/* =====================================================================
   FVBGS – Förderverein Birkenau Grundschule Augsburg-Lechhausen e.V.
   Stylesheet – kinderfreundlicher Schulheft-Look
   ---------------------------------------------------------------------
   Aufbau:
   OBERER TEIL   = Layout, Struktur, Responsivität, Funktion
   UNTERER TEIL  = Optik (Farben, Schatten, Buntstift-Buttons, Doodles)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Quicksand:wght@400;500;600;700&family=Caveat:wght@500;700&display=swap');


/* =====================================================================
   ============================ TEIL 1 =================================
   ===================== LAYOUT / STRUKTUR / FUNKTION ===================
   ===================================================================== */


*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	font-family: "Quicksand", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

html{
	scroll-behavior:smooth;
	overflow-x:hidden;
}

body{
	min-height:100vh;
	display:flex;
	flex-direction:column;
	position:relative;
	overflow-x:hidden;
}

main{
	flex:1;
	width:100%;
	position:relative;
	z-index:1;
}

img{
	max-width:100%;
	display:block;
}

a{
	text-decoration:none;
}

ul{
	list-style:none;
}


/* --- HEADER ---------------------------------------------------------- */
header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	min-height:80px;
	z-index:1000;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:8px 30px;
	gap:20px;
}

.header-logo{
	display:flex;
	align-items:center;
	gap:12px;
	flex-shrink:0;
}

.header-logo img{
	height:64px;
	width:auto;
}

.header-logo-text{
	display:flex;
	flex-direction:column;
	line-height:1.1;
}

.header-logo-text .name{
	font-size:18px;
	font-weight:700;
}

.header-logo-text .ort{
	font-size:13px;
}


/* --- NAVIGATION (Buntstifte) ----------------------------------------- */
nav{
	display:flex;
	align-items:center;
}

.nav-list{
	display:flex;
	gap:4px;
	align-items:center;
	flex-wrap:wrap;
	justify-content:flex-end;
}

.nav-list li{
	position:relative;
}


/* === DER BUNTSTIFT-BUTTON === */
.pencil-btn{
	display:inline-flex;
	align-items:center;
	font-family:"Patrick Hand", "Caveat", cursive;
	font-size:15px;
	font-weight:700;
	padding:0;
	border:none;
	background:none;
	cursor:pointer;
	position:relative;
	min-height:32px;
	transition:transform 200ms ease;
}

.pencil-btn:hover{
	transform:translateY(-3px) rotate(-2deg);
}

/* Radiergummi (linke Seite) */
.pencil-btn .eraser{
	width:14px;
	height:26px;
	background:var(--btn-eraser, #e07b6e);
	border:2px solid #2a2f3a;
	border-right:none;
	border-radius:7px 0 0 7px;
	position:relative;
}

/* Metallband zwischen Radiergummi und Holz */
.pencil-btn .ferrule{
	width:6px;
	height:26px;
	background:repeating-linear-gradient(
		180deg,
		#b8b8b8 0px,
		#b8b8b8 3px,
		#888 3px,
		#888 6px
	);
	border-top:2px solid #2a2f3a;
	border-bottom:2px solid #2a2f3a;
}

/* Holzkörper (mit der Schrift) */
.pencil-btn .body{
	background:var(--btn-color, #f4c734);
	border:2px solid #2a2f3a;
	border-left:none;
	border-right:none;
	padding:4px 12px;
	color:#2a2f3a;
	height:26px;
	display:flex;
	align-items:center;
	white-space:nowrap;
	letter-spacing:0.3px;
}

/* Holzspitze rechts */
.pencil-btn .tip{
	width:0;
	height:0;
	border-top:13px solid transparent;
	border-bottom:13px solid transparent;
	border-left:16px solid #e8c891;
	position:relative;
}

/* Bleistiftmine (schwarze Spitze) */
.pencil-btn .tip::after{
	content:"";
	position:absolute;
	left:-16px;
	top:-5px;
	width:0;
	height:0;
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
	border-left:7px solid #2a2f3a;
}


/* Aktiver Buntstift (aktuelle Seite) */
.pencil-btn.aktiv{
	transform:translateY(-4px) rotate(-3deg);
}
.pencil-btn.aktiv .body{
	box-shadow:inset 0 0 0 2px rgba(255,255,255,0.4);
}


/* Burger Button (Mobile) */
.burger{
	display:none;
	flex-direction:column;
	gap:5px;
	background:none;
	border:none;
	cursor:pointer;
	padding:8px;
	z-index:1001;
}

.burger span{
	display:block;
	width:28px;
	height:3px;
	border-radius:2px;
}


.page-spacer{
	height:88px;
}


/* --- HERO ------------------------------------------------------------ */
.hero{
	width:100%;
	min-height:540px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	text-align:center;
	padding:50px 20px 70px;
	position:relative;
}

.hero-logo{
	max-width:300px;
	margin-bottom:20px;
	animation:logo-float 4s ease-in-out infinite;
}

@keyframes logo-float{
	0%, 100% { transform:translateY(0); }
	50%      { transform:translateY(-8px); }
}

.hero h1{
	font-family:"Patrick Hand", "Caveat", cursive;
	font-size:42px;
	font-weight:700;
	margin-bottom:14px;
	max-width:900px;
	line-height:1.2;
}

.hero-untertitel{
	font-family:"Caveat", cursive;
	font-size:24px;
	margin-bottom:35px;
	max-width:700px;
}

.hero-cta{
	display:flex;
	gap:18px;
	flex-wrap:wrap;
	justify-content:center;
}


/* --- BIG-CTA BUTTON (für Hero / Spendenbox) -------------------------- */
.btn-big{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:14px 30px;
	font-family:"Patrick Hand", "Caveat", cursive;
	font-size:20px;
	font-weight:700;
	border-radius:18px;
	border:3px solid #2a2f3a;
	cursor:pointer;
	transition:transform 200ms ease, box-shadow 200ms ease;
	text-decoration:none;
}

.btn-big:hover{
	transform:translateY(-3px) rotate(-1deg);
}


/* --- SEKTIONEN ------------------------------------------------------- */
section{
	width:100%;
	padding:70px 20px;
	position:relative;
}

.container{
	max-width:1100px;
	margin:0 auto;
	position:relative;
}

.section-titel{
	text-align:center;
	margin-bottom:45px;
}

.section-titel h2{
	font-family:"Patrick Hand", "Caveat", cursive;
	font-size:38px;
	font-weight:700;
	margin-bottom:12px;
	position:relative;
	display:inline-block;
}

/* Grüner Unterstrich wie im Logoentwurf */
.section-titel h2::after{
	content:"";
	display:block;
	width:60%;
	height:4px;
	margin:8px auto 0;
	background:#7aa83a;
	border-radius:2px;
	transform:rotate(-1deg);
}

.section-titel p{
	font-family:"Caveat", cursive;
	font-size:22px;
	max-width:700px;
	margin:0 auto;
}


/* --- 3-KARTEN-RASTER (Förderbereiche) -------------------------------- */
.karten-3{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:26px;
}

.karte{
	padding:30px 26px;
	border-radius:20px;
	display:flex;
	flex-direction:column;
	position:relative;
}

.karte h3{
	font-family:"Patrick Hand", cursive;
	font-size:22px;
	margin-bottom:12px;
	font-weight:700;
}

.karte p{
	font-size:15px;
	line-height:1.65;
}

.karte-icon{
	width:60px;
	height:60px;
	margin-bottom:18px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	font-size:30px;
	border:3px solid #2a2f3a;
}


/* --- TEXTBOX --------------------------------------------------------- */
.textbox{
	padding:35px 32px;
	border-radius:20px;
	margin-bottom:25px;
	position:relative;
}

.textbox h2{
	font-family:"Patrick Hand", cursive;
	font-size:30px;
	margin-bottom:18px;
	font-weight:700;
}

.textbox h3{
	font-family:"Patrick Hand", cursive;
	font-size:22px;
	margin:22px 0 10px;
	font-weight:700;
}

.textbox p,
.textbox li{
	font-size:16px;
	line-height:1.75;
	margin-bottom:10px;
}

.textbox ul{
	margin:10px 0 15px 26px;
	list-style:none;
}

.textbox ul li{
	margin-bottom:8px;
	position:relative;
	padding-left:6px;
}

.textbox ul li::before{
	content:"✏️";
	position:absolute;
	left:-26px;
	font-size:14px;
}


/* --- SLIDESHOW ------------------------------------------------------- */
.slidebox{
	max-width:900px;
	margin:0 auto;
	position:relative;
	border-radius:22px;
	overflow:hidden;
	border:4px solid #2a2f3a;
}

.slideshow{
	position:relative;
	width:100%;
	height:480px;
	overflow:hidden;
}

.mySlides{
	display:none;
	width:100%;
	height:100%;
	object-fit:cover;
}

.slide-btn{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	border:3px solid #2a2f3a;
	padding:12px 16px;
	cursor:pointer;
	font-size:22px;
	border-radius:50%;
	width:50px;
	height:50px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:700;
}

.slide-left{ left:15px; }
.slide-right{ right:15px; }

.slide-caption{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	padding:14px 20px;
	font-family:"Patrick Hand", cursive;
	font-size:18px;
	font-weight:600;
	text-align:center;
}

.fade{
	animation-name:fade;
	animation-duration:1s;
}

@keyframes fade{
	from{ opacity:.3; }
	to  { opacity:1; }
}


/* --- 2-SPALTEN ------------------------------------------------------- */
.zwei-spalten{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:30px;
	align-items:start;
}


/* --- SPENDEN-BOX ----------------------------------------------------- */
.spenden-box{
	text-align:center;
	padding:45px 30px;
	border-radius:22px;
	position:relative;
}

.spenden-box .btn-big{
	font-size:22px;
	padding:18px 40px;
	margin:18px 0 10px;
}

.spenden-hinweis{
	font-family:"Caveat", cursive;
	font-size:18px;
	margin-top:14px;
}


/* --- KONTAKT --------------------------------------------------------- */
.kontakt-box{
	padding:35px 30px;
	border-radius:20px;
	text-align:center;
	position:relative;
}

.kontakt-box h3{
	font-family:"Patrick Hand", cursive;
	font-size:24px;
	margin-bottom:10px;
}

.kontakt-box .mail-link{
	display:inline-block;
	font-family:"Patrick Hand", cursive;
	font-size:22px;
	font-weight:700;
	margin:15px 0;
}


/* --- FOOTER ---------------------------------------------------------- */
footer{
	width:100%;
	padding:35px 20px;
	margin-top:auto;
	position:relative;
	z-index:1;
}

.footer-inner{
	max-width:1100px;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
	gap:20px;
}

.footer-links{
	display:flex;
	gap:22px;
	flex-wrap:wrap;
}

.footer-links a{
	font-family:"Patrick Hand", cursive;
	font-size:16px;
}

.footer-copy{
	font-family:"Caveat", cursive;
	font-size:16px;
}


/* --- HINWEIS-BOX ----------------------------------------------------- */
.hinweis{
	padding:14px 18px;
	border-radius:12px;
	font-size:14px;
	margin:15px 0;
	border:2px dashed;
}


/* --- DOKUMENTE-DOWNLOAD (Kacheln) ----------------------------------- */
.doku-liste{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:16px;
	margin-top:10px;
}

.doku-karte{
	display:flex;
	align-items:center;
	gap:14px;
	padding:16px 18px;
	border-radius:14px;
	text-decoration:none;
	transition:transform 150ms ease, box-shadow 150ms ease;
}

.doku-icon{
	flex-shrink:0;
	width:42px;
	height:42px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:10px;
	font-size:20px;
}

.doku-text{
	display:flex;
	flex-direction:column;
	line-height:1.3;
}

.doku-titel{
	font-family:"Patrick Hand", cursive;
	font-size:18px;
	font-weight:700;
}

.doku-sub{
	font-size:13px;
}


/* --- SPONSOREN ------------------------------------------------------- */
.sponsoren-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
	gap:20px;
	margin-top:10px;
}

.sponsor-karte{
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	gap:12px;
	padding:24px 20px;
	border-radius:16px;
	text-decoration:none;
	transition:transform 150ms ease, box-shadow 150ms ease;
}

.sponsor-logo-wrap{
	width:100%;
	height:110px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:8px;
}

.sponsor-logo-wrap img{
	max-width:100%;
	max-height:100%;
	width:auto;
	height:auto;
	object-fit:contain;
}

.sponsor-name{
	font-family:"Patrick Hand", cursive;
	font-size:18px;
	font-weight:700;
}

.sponsor-info{
	font-size:13px;
}


/* --- ERSTELLER-DANK (grosse Karte auf Sponsorenseite) --------------- */
.ersteller-dank{
	display:flex;
	align-items:center;
	gap:28px;
	padding:32px 34px;
	border-radius:20px;
	margin-bottom:30px;
	flex-wrap:wrap;
	justify-content:center;
	text-align:center;
}

.ersteller-dank-logo{
	flex-shrink:0;
	width:110px;
	height:110px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:24px;
	font-size:56px;
}

.ersteller-dank-text{
	flex:1;
	min-width:240px;
	display:flex;
	flex-direction:column;
	gap:6px;
}

.ersteller-dank-label{
	font-size:14px;
	text-transform:uppercase;
	letter-spacing:0.8px;
	font-weight:700;
}

.ersteller-dank-name{
	font-family:"Patrick Hand", cursive;
	font-size:38px;
	font-weight:700;
	line-height:1.1;
}

.ersteller-dank-text p{
	font-size:15px;
	line-height:1.6;
	margin:4px 0 0;
}

/* --- ERSTELLER-INFO (Verantwortung + Kontakt) ----------------------- */
.ersteller-info{
	max-width:820px;
	margin:30px auto 0;
	padding:22px 28px;
	border-radius:16px;
	text-align:center;
}

.ersteller-info p{
	font-size:14px;
	line-height:1.65;
	margin:0;
}

.ersteller-info .ersteller-kontakt{
	margin-top:14px;
	padding-top:14px;
	font-weight:600;
}


/* --- GIROCODE / SPENDEN-WEGE ---------------------------------------- */
.spende-wege{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:24px;
	align-items:stretch;
	margin-top:10px;
}

.spende-weg{
	padding:28px 26px;
	border-radius:18px;
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	position:relative;
}

.girocode-img{
	width:200px;
	max-width:70%;
	height:auto;
	border-radius:10px;
	margin:14px 0;
	background:#fff;
	padding:8px;
}

.girocode-steps{
	font-size:14px;
	line-height:1.7;
	margin-top:6px;
}


/* --- WEBSITE-ERSTELLER-SPARTE --------------------------------------- */
.ersteller-box{
	margin-top:26px;
	padding:22px 28px;
	border-radius:16px;
	display:flex;
	align-items:center;
	gap:20px;
	justify-content:center;
	text-align:left;
	flex-wrap:wrap;
}

.ersteller-icon{
	flex-shrink:0;
	width:56px;
	height:56px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:14px;
	font-size:28px;
}

.ersteller-text{
	display:flex;
	flex-direction:column;
	line-height:1.35;
}

.ersteller-label{
	font-size:13px;
	text-transform:uppercase;
	letter-spacing:0.5px;
}

.ersteller-name{
	font-family:"Patrick Hand", cursive;
	font-size:26px;
	font-weight:700;
}

.ersteller-sub{
	font-size:13px;
}


/* --- DOODLES (dekorative Hintergrund-Icons) ------------------------- */
.doodle{
	position:absolute;
	pointer-events:none;
	opacity:0.5;
	z-index:0;
}

.doodle img{
	width:100%;
	height:100%;
}


/* --- RESPONSIVE: TABLET ---------------------------------------------- */
@media (max-width:980px){
	.karten-3{
		grid-template-columns:1fr 1fr;
	}
	.zwei-spalten{
		grid-template-columns:1fr;
	}
	.hero h1{
		font-size:36px;
	}
	.section-titel h2{
		font-size:32px;
	}
}


/* --- RESPONSIVE: MOBILE ---------------------------------------------- */
@media (max-width:780px){

	header{
		padding:6px 15px;
		min-height:72px;
	}

	.page-spacer{ height:78px; }
	.spende-wege{ grid-template-columns:1fr; }

	.header-logo img{
		height:52px;
	}
	.header-logo-text .name{
		font-size:15px;
	}
	.header-logo-text .ort{
		font-size:12px;
	}

	.burger{
		display:flex;
	}

	.nav-list{
		display:none;
		position:absolute;
		top:72px;
		left:0;
		right:0;
		flex-direction:column;
		gap:8px;
		padding:18px 20px;
		align-items:center;
	}

	.nav-list.open{
		display:flex;
	}

	.karten-3{
		grid-template-columns:1fr;
	}

	.doku-liste{
		grid-template-columns:1fr;
	}

	.hero{
		padding:30px 15px 50px;
		min-height:auto;
	}

	.hero-logo{
		max-width:220px;
	}

	.hero h1{
		font-size:30px;
	}

	.hero-untertitel{
		font-size:20px;
	}

	section{
		padding:50px 15px;
	}

	.slideshow{
		height:300px;
	}

	.section-titel h2{
		font-size:28px;
	}

	.textbox h2{
		font-size:26px;
	}

	.footer-inner{
		flex-direction:column;
		text-align:center;
	}

	.doodle{
		opacity:0.25;
		transform:scale(0.7);
	}
}




/* =====================================================================
   ============================ TEIL 2 =================================
   ============================= OPTIK ==================================
   ===================================================================== */


/* --- Farbvariablen (am Logo orientiert, kinderfreundlich) ----------- */
:root{
	--creme:        #faf3e0;
	--creme-dark:   #f0e6cc;
	--papier:       #fefcf3;

	--marine:       #1f3a68;
	--marine-dark:  #142848;

	--gruen:        #7aa83a;
	--gruen-dark:   #5e8528;

	/* Buntstift-Palette */
	--gelb:         #f4c734;
	--gruenStift:   #8cc63f;
	--blau:         #5ba8d4;
	--rot:          #e07b6e;
	--lila:         #9b7ec2;
	--orange:       #ec9a4a;
	--tuerkis:      #4ec9b0;

	--text:         #2a2f3a;
	--text-soft:    #5a6273;
	--weiss:        #ffffff;

	--border:       rgba(31, 58, 104, 0.18);
	--shadow-soft:  3px 3px 0 rgba(31, 58, 104, 0.15);
	--shadow-med:   5px 5px 0 rgba(31, 58, 104, 0.18);
}


/* --- Papierhintergrund mit Doodles ----------------------------------- */
body{
	background:
		radial-gradient(circle at 15% 5%,  rgba(91, 168, 212, 0.08), transparent 35%),
		radial-gradient(circle at 85% 20%, rgba(244, 199, 52, 0.10), transparent 35%),
		radial-gradient(circle at 50% 80%, rgba(122, 168, 58, 0.08), transparent 40%),
		repeating-linear-gradient(
			0deg,
			transparent 0,
			transparent 31px,
			rgba(31, 58, 104, 0.04) 31px,
			rgba(31, 58, 104, 0.04) 32px
		),
		var(--creme);
	color:var(--text);
	line-height:1.55;
}

h1, h2, h3, h4{
	color:var(--marine);
}


/* --- HEADER OPTIK ---------------------------------------------------- */
header{
	background:rgba(250, 243, 224, 0.95);
	backdrop-filter:blur(10px);
	border-bottom:3px solid var(--marine);
	box-shadow:0 2px 12px rgba(31, 58, 104, 0.10);
}

.header-logo-text .name{
	font-family:"Patrick Hand", cursive;
	color:var(--marine);
}

.header-logo-text .ort{
	font-family:"Caveat", cursive;
	color:var(--gruen-dark);
	font-weight:700;
}


/* --- BUNTSTIFT-NAVIGATION (Farben pro Button) ---------------------- */
.nav-list li:nth-child(1) .pencil-btn { --btn-color: var(--gelb);       --btn-eraser: var(--rot);  }
.nav-list li:nth-child(2) .pencil-btn { --btn-color: var(--gruenStift); --btn-eraser: var(--rot);  }
.nav-list li:nth-child(3) .pencil-btn { --btn-color: var(--blau);       --btn-eraser: var(--rot);  }
.nav-list li:nth-child(4) .pencil-btn { --btn-color: var(--rot);        --btn-eraser: var(--gelb); }
.nav-list li:nth-child(5) .pencil-btn { --btn-color: var(--lila);       --btn-eraser: var(--rot);  }
.nav-list li:nth-child(6) .pencil-btn { --btn-color: var(--tuerkis);    --btn-eraser: var(--rot);  }
.nav-list li:nth-child(7) .pencil-btn { --btn-color: var(--orange);     --btn-eraser: var(--rot);  }

.burger span{
	background:var(--marine);
}


/* --- HERO OPTIK ------------------------------------------------------ */
.hero h1{
	color:var(--marine);
}

.hero-untertitel{
	color:var(--marine);
	font-weight:500;
}


/* --- BIG BUTTONS OPTIK ---------------------------------------------- */
.btn-big{
	box-shadow:var(--shadow-med);
}

.btn-big:hover{
	box-shadow:7px 7px 0 rgba(31, 58, 104, 0.25);
}

.btn-primary{
	background:var(--marine);
	color:var(--weiss);
}

.btn-secondary{
	background:var(--gruenStift);
	color:var(--marine-dark);
}

.btn-spende{
	background:var(--gelb);
	color:var(--marine-dark);
}

.btn-mail{
	background:var(--blau);
	color:var(--weiss);
}


/* --- SECTION-HINTERGRÜNDE ------------------------------------------- */
.section-hell{
	background:transparent;
}

.section-akzent{
	background:
		repeating-linear-gradient(
			0deg,
			transparent 0,
			transparent 31px,
			rgba(31, 58, 104, 0.04) 31px,
			rgba(31, 58, 104, 0.04) 32px
		),
		rgba(122, 168, 58, 0.10);
}

.section-marine{
	background:var(--marine);
	color:var(--weiss);
}
.section-marine h2,
.section-marine h3,
.section-marine p,
.section-marine .section-titel p{
	color:var(--weiss);
}
.section-marine .section-titel h2::after{
	background:var(--gelb);
}


/* --- KARTEN OPTIK ---------------------------------------------------- */
.karte{
	background:var(--papier);
	border:3px solid var(--marine);
	box-shadow:var(--shadow-med);
	transition:transform 200ms ease, box-shadow 200ms ease;
}

.karte:nth-child(odd){
	transform:rotate(-0.5deg);
}
.karte:nth-child(even){
	transform:rotate(0.5deg);
}

.karte:hover{
	transform:rotate(0deg) translateY(-4px);
	box-shadow:7px 7px 0 rgba(31, 58, 104, 0.25);
}

.karte p{
	color:var(--text);
}

.karte-icon{
	color:var(--marine-dark);
	background:var(--gelb);
}

.karten-3 .karte:nth-child(1) .karte-icon{ background:var(--gelb); }
.karten-3 .karte:nth-child(2) .karte-icon{ background:var(--gruenStift); }
.karten-3 .karte:nth-child(3) .karte-icon{ background:var(--blau); }
.karten-3 .karte:nth-child(4) .karte-icon{ background:var(--rot); }
.karten-3 .karte:nth-child(5) .karte-icon{ background:var(--lila); }
.karten-3 .karte:nth-child(6) .karte-icon{ background:var(--orange); }


/* --- TEXTBOX OPTIK --------------------------------------------------- */
.textbox{
	background:var(--papier);
	border:3px solid var(--marine);
	box-shadow:var(--shadow-med);
}

.textbox p,
.textbox li{
	color:var(--text);
}

.textbox a:not(.btn-big):not(.btn-primary):not(.btn-secondary):not(.btn-spende):not(.btn-mail){
	color:var(--marine);
	font-weight:600;
	text-decoration:underline;
	text-decoration-style:wavy;
	text-decoration-color:var(--gruen);
	text-underline-offset:3px;
}
.textbox a:not(.btn-big):not(.btn-primary):not(.btn-secondary):not(.btn-spende):not(.btn-mail):hover{
	color:var(--gruen-dark);
}


/* --- SLIDESHOW OPTIK ------------------------------------------------- */
.slidebox{
	background:var(--marine-dark);
	box-shadow:var(--shadow-med);
}

.slide-btn{
	background:var(--gelb);
	color:var(--marine-dark);
	transition:background 150ms ease, transform 150ms ease;
}

.slide-btn:hover{
	background:var(--weiss);
	transform:translateY(-50%) scale(1.1);
}

.slide-caption{
	background:linear-gradient(180deg, transparent, rgba(31,40,72,0.85));
	color:var(--weiss);
}


/* --- SPENDEN-BOX OPTIK ---------------------------------------------- */
.spenden-box{
	background:linear-gradient(135deg, #fff2c4, var(--gelb));
	color:var(--marine-dark);
	border:3px solid var(--marine);
	box-shadow:var(--shadow-med);
}

.spenden-box h2{
	color:var(--marine-dark);
	font-size:34px;
}

.spenden-box .btn-big{
	background:var(--marine);
	color:var(--weiss);
}

.spenden-hinweis{
	color:var(--marine-dark);
}


/* --- KONTAKT OPTIK --------------------------------------------------- */
.kontakt-box{
	background:var(--papier);
	border:3px solid var(--marine);
	box-shadow:var(--shadow-med);
}

.kontakt-box .mail-link{
	color:var(--gruen-dark);
	border-bottom:3px dashed var(--gruen);
	padding-bottom:3px;
}

.kontakt-box .mail-link:hover{
	color:var(--marine);
	border-color:var(--marine);
}


/* --- HINWEIS-BOX OPTIK ---------------------------------------------- */
.hinweis{
	background:#fff8e0;
	border-color:var(--gelb);
	color:#6b5a14;
}

.hinweis strong{
	color:var(--marine);
}


/* --- DOKUMENTE-DOWNLOAD OPTIK --------------------------------------- */
.doku-karte{
	background:var(--creme);
	border:2px solid var(--marine);
	box-shadow:var(--shadow-soft);
}

.doku-karte:hover{
	transform:translateY(-3px);
	box-shadow:var(--shadow-med);
}

.doku-icon{
	background:var(--blau);
	color:var(--weiss);
}

.doku-titel{
	color:var(--marine);
}

.doku-sub{
	color:var(--text-soft);
}

.doku-karte:nth-child(1) .doku-icon{ background:var(--blau); }
.doku-karte:nth-child(2) .doku-icon{ background:var(--gruenStift); }
.doku-karte:nth-child(3) .doku-icon{ background:var(--orange); }
.doku-karte:nth-child(4) .doku-icon{ background:var(--lila); }
.doku-karte:nth-child(5) .doku-icon{ background:var(--rot); }
.doku-karte:nth-child(6) .doku-icon{ background:var(--gelb); color:var(--marine-dark); }


/* --- SPONSOREN OPTIK ------------------------------------------------- */
.sponsor-karte{
	background:var(--weiss);
	border:2px solid var(--border);
	box-shadow:var(--shadow-soft);
}

.sponsor-karte:hover{
	transform:translateY(-3px);
	box-shadow:var(--shadow-med);
	border-color:var(--marine);
}

.sponsor-name{
	color:var(--marine);
}

.sponsor-info{
	color:var(--text-soft);
}


/* --- ERSTELLER-DANK OPTIK (Sponsorenseite) -------------------------- */
.ersteller-dank{
	background:linear-gradient(135deg, rgba(31,58,104,0.08), rgba(122,168,58,0.10));
	border:3px solid var(--marine);
	box-shadow:var(--shadow-med);
}

.ersteller-dank-logo{
	background:var(--marine);
	color:var(--weiss);
	box-shadow:var(--shadow-soft);
}

.ersteller-dank-label{
	color:var(--gruen-dark);
}

.ersteller-dank-name{
	color:var(--marine);
}

.ersteller-dank-text p{
	color:var(--text-soft);
}

/* --- ERSTELLER-INFO OPTIK ------------------------------------------- */
.ersteller-info{
	background:rgba(31,58,104,0.04);
	border:1px solid var(--border);
}

.ersteller-info p{
	color:var(--text-soft);
}

.ersteller-info .ersteller-kontakt{
	border-top:1px dashed var(--border);
	color:var(--marine);
}


/* --- GIROCODE / SPENDEN-WEGE OPTIK ---------------------------------- */
.spende-weg{
	background:var(--papier);
	border:3px solid var(--marine);
	box-shadow:var(--shadow-med);
}

.spende-weg h3{
	font-family:"Patrick Hand", cursive;
	font-size:24px;
	color:var(--marine);
	margin-bottom:6px;
}

.spende-weg.paypal-wartend{
	background:rgba(31,58,104,0.04);
	border-style:dashed;
}

.girocode-img{
	border:2px solid var(--border);
}

.girocode-steps{
	color:var(--text-soft);
}


/* --- WEBSITE-ERSTELLER OPTIK ---------------------------------------- */
.ersteller-box{
	background:linear-gradient(135deg, rgba(31,58,104,0.06), rgba(122,168,58,0.08));
	border:2px solid var(--marine);
	box-shadow:var(--shadow-soft);
}

.ersteller-icon{
	background:var(--marine);
	color:var(--weiss);
}

.ersteller-label{
	color:var(--gruen-dark);
	font-weight:700;
}

.ersteller-name{
	color:var(--marine);
}

.ersteller-sub{
	color:var(--text-soft);
}


/* --- FOOTER OPTIK ---------------------------------------------------- */
footer{
	background:var(--marine);
	color:var(--weiss);
	border-top:4px dashed var(--gelb);
}

.footer-links a{
	color:var(--weiss);
	opacity:0.9;
	transition:opacity 150ms ease, color 150ms ease;
}

.footer-links a:hover{
	color:var(--gelb);
	opacity:1;
}

.footer-copy{
	color:rgba(255,255,255,0.85);
}


/* --- DOODLES OPTIK --------------------------------------------------- */
.doodle img{
	filter:drop-shadow(0 0 1px rgba(0,0,0,0.05));
}

.doodle{
	animation:doodle-wiggle 6s ease-in-out infinite;
}

@keyframes doodle-wiggle{
	0%, 100% { transform:rotate(-3deg); }
	50%      { transform:rotate(3deg); }
}

.doodle.no-wiggle{
	animation:none;
}


/* --- MOBILE NAVIGATION OPTIK ---------------------------------------- */
@media (max-width:780px){
	.nav-list{
		background:var(--creme);
		border:3px solid var(--marine);
		border-top:none;
		border-radius:0 0 18px 18px;
		box-shadow:var(--shadow-med);
	}
}


/* =====================================================================
   ============= PERFORMANCE / MOBILE-OPTIMIERUNG ======================
   ---------------------------------------------------------------------
   Ziel: flüssiges Scrollen auf dem Handy.
   - Dauer-Animationen (Doodle-Wackeln, Logo-Schweben) kosten auf
     Mobilgeräten viel Rechenleistung, weil bei jedem Frame neu
     gezeichnet wird. Auf schmalen Screens werden sie abgeschaltet.
   - backdrop-filter (Weichzeichner) im fixierten Header ist beim
     Scrollen besonders teuer -> auf Mobil durch soliden, leicht
     deckenden Hintergrund ersetzt.
   ===================================================================== */

@media (max-width:780px){

	/* Endlos-Animationen auf Mobil stoppen (Elemente bleiben sichtbar) */
	.doodle,
	.hero-logo{
		animation:none !important;
	}

	/* Teuren Weichzeichner im Header durch soliden Hintergrund ersetzen */
	header{
		backdrop-filter:none;
		-webkit-backdrop-filter:none;
		background:var(--creme);
	}
}

/* Nutzer, die reduzierte Bewegung wünschen: alle Dauer-Animationen aus.
   (Barrierefreiheit + Performance, gilt auf allen Geräten) */
@media (prefers-reduced-motion: reduce){
	*,
	*::before,
	*::after{
		animation-duration:0.001ms !important;
		animation-iteration-count:1 !important;
		transition-duration:0.001ms !important;
		scroll-behavior:auto !important;
	}
}