:root {
	--font: 1em Lexend, Helvetica, sans-serif;
	--primary-background-color: #fff;
	--primary-foreground-color: #000;
	--secondary-background-color: #004b4b;
	--secondary-foreground-color: #fff;
	--secondary-link-foreground-color: #eee;
	--pill-background: #004b4b;
	--pill-foreground: #fff;
	--link-color: #004b4b;
	--icon-bg: #fff;
}

/*Dunkelmodus*/
@media(prefers-color-scheme: dark) {
    :root {
	--primary-background-color: #222;
	--primary-foreground-color: #fff;
	--link-color: #26A269;
	--icon-bg: #dcd8cd;
    }
    
    .white-bg {
	background: #DCD8CD !important;
    }
}

a {
	color: var(--link-color);
}

/*Verbesserte Tastaurbedienung*/
:focus {
    outline: 3px solid #b4822d;
}

@font-face {
  font-family: "Lexend";
  src: url(../fonts/Lexend-Regular.ttf) format("truetype");
}

body {
	font: var(--font);
	color: var(--primary-foreground-color);
	background: var(--primary-background-color);
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

body > article {
    flex-grow: 1;
}

html, body {
	min-height: 100vh;
}

h1 {
	font-size: 2.5em;
	font-weight: bold;
	margin: 0.5em 0;
}

h2 {
	font-size: 2em;
	margin: 0.5em 0;
	font-weight: normal;
}

h3 {
	font-size: 1.5em;
	margin: 0.5em 0;
	font-weight: normal;
}

h4 {
	margin: 0.5em 0;
	font-weight: normal;
}

@media(max-width: 60ch) {
	h1 {
		font-size: 2em;
	}
}


/*
	Header and Footer
*/

header, footer {
	color: var(--secondary-foreground-color);
	background: var(--secondary-background-color);
	padding: 0.5ch 2ch;
	box-shadow: 0 0 .5em #0008;
}

h1 > img {
	display: inline-block;
	max-height: 1.75em;
	vertical-align: middle;
	max-width: 3ch;
}

footer a {
	color: var(--secondary-link-foreground-color);
}

/*
	Article
*/

article {
	padding: 2ch;
}

/*
	Pills
*/

.pill {
	display: block;
	background: var(--pill-background);
	color: var(--pill-foreground);
	text-decoration: none;
	padding: 1.5ch;
	margin: 1ch;
	min-height: 6em;
	transition: box-shadow .5s;
	position: relative;
}	

.pill:hover, .linkbutton:hover {
	box-shadow: 0 0 .7em #000b;
}

a.pill {
	box-shadow: 0 0 .3ch #000;
}

a.pill h3 {
	text-decoration: underline;
}

.pill-text {
	margin: 1ch;
	margin-right: auto;
}

.pill h3, .pill h4 {
	margin: 0.5ch 0;
	margin-top: 0;
	font-size: 2em;
}

.pillcase2, .pillcase3 {
	display: flex;
	flex-direction: column;
	align-content: stretch;
}

@media(min-width: 120ch) {
	.pillcase2 {
		flex-direction: row;
		padding: 0;
	}
	
	.pillcase2 > .pill {
		width: 50%;
	}
}

@media(min-width: 150ch) {
	.pillcase3 {
		flex-direction: row;
		padding: 0;
	}
	
	.pillcase3 > .pill {
		width: 100%;
	}
	
	.pill-text h3, .pill-text h4 {
		font-size: 1.5em;
	}
}

@media(max-width: 60ch) {
	.pill {
		margin-left: 0;
		margin-right: 0;
		padding: 1ch;
	}
	
	.pill[class*="icon-"] h3::before {
    		display: inline-block;
    		content: "";
    		padding-left: 1.1em;
    		margin-right: .3ch;
    		height: 1.1em;
    		border-radius: .1em;
	    	background-position: center;
	    	background-color: var(--icon-bg);
	    	background-image: var(--icon);
	    	background-size: var(--icon-scale, 100%);
	    	background-repeat: no-repeat;
	    	vertical-align: middle;
	}
}

@media(min-width: 60ch) {
	.pill[class*="icon-"] {
		padding-left: 8em;
	}
	
	.pill[class*="icon-"]::before {
		height: 6em;
		padding-left: 6em;
		margin: auto 0;
		margin-right: 2ch;
		content: "";
		border-radius: 1ch;
		overflow: hidden;
		position: absolute;
		left: 1.5ch;
               background-position: center;
                background-color: var(--icon-bg);
                background-image: var(--icon);
                background-size: var(--icon-scale, 100%);
                background-repeat: no-repeat;
	}
}

.icon-eu {
	--icon: url("/media/EU.png");
	--icon-bg: #003399;
}

.icon-bundeswahlleitung {
	--icon: url("/media/bundeswahlleitung-icon.svg");
}

.icon-treuchtlingen {
	--icon: url("/media/logo.svg");
	--icon-scale: 80%;
}

.icon-bayern {
	--icon: url("/media/bayern.svg");
}

.icon-ergebnis {
	--icon: url("/media/poll_black_icon.svg");
}

.icon-zweitstimme {
	--icon: url("/media/poll_icon.svg");
	--icon-bg: #1d36a0;
}

.icon-info {
	--icon: url("/media/info_black_icon.svg");
}

.icon-ballot {
	--icon: url("/media/ballot_black_icon.svg");
}

/*
	Linkbuttons
*/

.linkbutton {
	display: inline-block;
	border: solid 2px #fff;
	text-decoration: none;
	padding: 1ch;
	margin-bottom: 0.1em;
	margin-top: 0.1em;
	transition: box-shadow .5s;
}

/*
	Probestimmzettel workarounds
	(Sorry, den haben nicht wir verbrochen …)
 */

.probestimmzettel-2026-container {
	color: #000;
	background: #fff;
	margin: 0 -2ch;
	padding: 2ch;
}