/* Familienarbeit auf Augenhöhe – Lead-Funnel "Kennenlern-Gespräch"
   Markenstil von Maria Lier: Farben, Schriften, Layout für alle drei Seiten.
   Schriften liegen self-hosted in /fonts, damit nichts von fremden Servern lädt. */

@font-face{font-family:'Raleway';src:url('/fonts/raleway-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Raleway';src:url('/fonts/raleway-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Lora';src:url('/fonts/lora-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Lora';src:url('/fonts/lora-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Great Vibes';src:url('/fonts/great-vibes-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}

:root{
	--tanne:#3C5553;
	--mint:#CFDDDC;
	--beere:#B83E6A;
	--beere-dunkel:#9A3159;
	--creme:#F9F5F2;
	--aprikot:#E8A98F;
	--maxw:1120px;
	--maxw-schmal:720px;
	--radius:22px;
	--schatten:0 18px 44px rgba(60,85,83,.10);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
	margin:0;
	background:var(--creme);
	color:var(--tanne);
	font-family:'Lora',Georgia,'Times New Roman',serif;
	font-size:18px;
	line-height:1.7;
	display:flex;
	flex-direction:column;
	min-height:100vh;
	-webkit-font-smoothing:antialiased;
}

a{color:var(--beere);text-decoration:none;border-bottom:1px solid rgba(184,62,106,.35);}
a:hover{color:var(--beere-dunkel);border-bottom-color:var(--beere);}

main{flex:1 0 auto;width:100%;}
.huelle{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.huelle-schmal{max-width:var(--maxw-schmal);margin:0 auto;padding:0 24px;}

/* ---------- Kopf mit Logo ----------
   Das Logo ist bewusst klein. Es soll die Marke zeigen und nicht den Platz
   wegnehmen, den der grosse Knopf im ersten Blick braucht. */
.marken-kopf{text-align:center;padding:20px 24px 2px;}
.marken-kopf img{width:min(150px,38vw);height:auto;display:inline-block;}
.marken-kopf .wortmarke{
	font-family:'Raleway',system-ui,sans-serif;font-weight:800;
	font-size:1.2rem;letter-spacing:.01em;color:var(--tanne);
	border:none;display:inline-block;
}

/* ---------- Kopfbereich der Startseite ---------- */
.eyebrow{
	text-align:center;
	font-family:'Raleway',system-ui,sans-serif;
	font-weight:600;
	font-size:.82rem;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--beere);
	margin:14px 0 10px;
}

/* Die Headline laeuft breiter und etwas kleiner als vorher. So steht das
   Versprechen am Computer in zwei Zeilen und der Knopf rutscht nicht
   unter den Bildschirmrand. */
h1.headline{
	font-family:'Raleway',system-ui,sans-serif;
	font-weight:800;
	font-size:clamp(1.72rem,4.6vw,2.4rem);
	line-height:1.14;
	letter-spacing:-.015em;
	text-align:center;
	color:var(--tanne);
	margin:0 auto;
	max-width:46ch;
	text-wrap:balance;
}
h1.headline .akzent{color:var(--beere);display:block;}

.subheadline{
	text-align:center;
	max-width:60ch;
	margin:16px auto 0;
	font-size:clamp(1.03rem,1.9vw,1.22rem);
	line-height:1.65;
	color:rgba(60,85,83,.9);
	text-wrap:pretty;
}

.zierlinie{
	width:74px;height:2px;border-radius:2px;
	background:var(--mint);
	margin:34px auto 0;
}

/* ---------- Zweispaltiger Block ---------- */
.zwei-spalten{
	display:grid;
	grid-template-columns:1.05fr .95fr;
	gap:46px;
	align-items:stretch;      /* beide Spalten gleich hoch */
	margin:36px auto 0;
}

.spalte-text{
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	height:100%;
}

.zwischen-ueberschrift{
	font-family:'Raleway',system-ui,sans-serif;
	font-weight:800;
	font-size:clamp(1.3rem,2.6vw,1.72rem);
	line-height:1.3;
	margin:0 0 26px;
	color:var(--tanne);
	text-wrap:balance;
}
.zwischen-ueberschrift .akzent{color:var(--beere);display:block;}

.vorteile{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px;flex:1 1 auto;}
.vorteile li{display:flex;gap:16px;align-items:flex-start;}
.vorteile .punkt{
	flex:0 0 auto;
	width:30px;height:30px;border-radius:50%;
	background:var(--mint);
	display:flex;align-items:center;justify-content:center;
	margin-top:2px;
	box-shadow:0 2px 8px rgba(60,85,83,.10);
}
.vorteile .punkt svg{width:15px;height:15px;display:block;}
.vorteile .text{font-size:1.02rem;line-height:1.6;color:var(--tanne);}

/* ---------- Bildkarte rechts ----------
   Die Karte legt sich über die ganze Spalte (position:absolute), damit sie
   genau so hoch wird wie die Textspalte daneben. Sonst würde ein hochkantes
   Foto die Zeile in die Länge ziehen und links unten ein Loch hinterlassen. */
.spalte-bild{position:relative;min-height:440px;}
.bildkarte{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	border-radius:var(--radius);
	overflow:hidden;
	background:var(--mint);
	box-shadow:var(--schatten);
}
.bildkarte img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center 22%;
}

/* ---------- Handlungsaufruf ---------- */
.cta-block{text-align:center;margin:46px auto 0;}
/* Der obere Knopf sitzt enger am Text, damit er im ersten Blick bleibt. */
.cta-block.cta-oben{margin:24px auto 0;}
.knopf{
	display:inline-block;
	width:min(660px,100%);
	background:var(--beere);
	color:#fff;
	border:none;
	border-bottom:none;
	border-radius:16px;
	padding:23px 30px;
	font-family:'Raleway',system-ui,sans-serif;
	font-weight:800;
	font-size:clamp(1.05rem,2.2vw,1.3rem);
	letter-spacing:.01em;
	line-height:1.3;
	cursor:pointer;
	box-shadow:0 14px 30px rgba(184,62,106,.28);
	transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.knopf:hover{background:var(--beere-dunkel);color:#fff;transform:translateY(-2px);box-shadow:0 18px 36px rgba(184,62,106,.34);}
.knopf:active{transform:translateY(0);}
.knopf-unterzeile{
	margin:14px auto 0;
	font-size:.95rem;
	color:rgba(60,85,83,.72);
	max-width:52ch;
}

.abstand-unten{padding-bottom:80px;}

/* ---------- Formular (Seite 2) ---------- */
.formular-kopf{text-align:center;margin:6px auto 0;}
.formular-kopf h1{
	font-family:'Raleway',system-ui,sans-serif;font-weight:800;
	font-size:clamp(1.6rem,3.6vw,2.3rem);line-height:1.2;margin:14px 0 10px;text-wrap:balance;
}
.formular-kopf h1 .akzent{color:var(--beere);}
.formular-kopf p{margin:0 auto;max-width:52ch;color:rgba(60,85,83,.85);font-size:1rem;}

.fortschritt{margin:30px auto 0;max-width:var(--maxw-schmal);}
.fortschritt .balken{height:8px;border-radius:8px;background:var(--mint);overflow:hidden;}
.fortschritt .fuellung{height:100%;width:0;background:var(--beere);border-radius:8px;transition:width .35s ease;}
.fortschritt .zaehler{
	margin-top:10px;text-align:center;font-family:'Raleway',system-ui,sans-serif;
	font-weight:600;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(60,85,83,.65);
}

.karte{
	background:#fff;
	border-radius:var(--radius);
	box-shadow:var(--schatten);
	padding:38px 34px;
	margin:26px auto 0;
	max-width:var(--maxw-schmal);
}

.schritt{display:none;}
.schritt.aktiv{display:block;animation:sanft-rein .3s ease;}
@keyframes sanft-rein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.schritt h2{
	font-family:'Raleway',system-ui,sans-serif;font-weight:800;
	font-size:clamp(1.18rem,2.6vw,1.45rem);line-height:1.32;margin:0 0 8px;text-wrap:balance;
}
.schritt .hinweis{margin:0 0 22px;font-size:.96rem;color:rgba(60,85,83,.72);}

/* Kleines Sternchen an den Feldern, die wirklich ausgefüllt werden sollen. */
.pflicht{color:var(--beere);font-weight:700;}
.pflicht-hinweis{margin:10px 0 0;font-size:.88rem;color:rgba(60,85,83,.68);}

.feld{margin:0 0 18px;}
.feld label.beschriftung{
	display:block;font-family:'Raleway',system-ui,sans-serif;font-weight:600;
	font-size:.9rem;letter-spacing:.02em;margin:0 0 7px;color:var(--tanne);
}
.feld input[type=text],
.feld input[type=email],
.feld input[type=tel],
.feld select,
.feld textarea{
	width:100%;
	font-family:'Lora',Georgia,serif;
	font-size:1rem;
	color:var(--tanne);
	background:var(--creme);
	border:1.5px solid rgba(60,85,83,.18);
	border-radius:12px;
	padding:13px 15px;
	line-height:1.5;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.feld textarea{min-height:132px;resize:vertical;}
.feld input:focus,.feld select:focus,.feld textarea:focus{
	outline:none;border-color:var(--beere);box-shadow:0 0 0 3px rgba(184,62,106,.14);
}
.feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

.auswahl{display:flex;flex-direction:column;gap:11px;margin:0 0 6px;}
.auswahl label{
	display:flex;gap:13px;align-items:flex-start;
	background:var(--creme);
	border:1.5px solid rgba(60,85,83,.16);
	border-radius:14px;
	padding:14px 16px;
	cursor:pointer;
	font-size:1rem;line-height:1.5;
	transition:border-color .15s ease, background .15s ease;
}
.auswahl label:hover{border-color:rgba(184,62,106,.45);}
.auswahl input{
	flex:0 0 auto;width:21px;height:21px;margin:2px 0 0;accent-color:var(--beere);cursor:pointer;
}
.auswahl label:has(input:checked){border-color:var(--beere);background:#fff;box-shadow:0 0 0 2px rgba(184,62,106,.10);}

.datenschutz-block{
	background:var(--creme);
	border:1.5px solid rgba(60,85,83,.16);
	border-radius:14px;
	padding:20px 20px 18px;
	margin:4px 0 20px;
}
.datenschutz-block h3{
	font-family:'Raleway',system-ui,sans-serif;font-weight:800;
	font-size:1rem;margin:0 0 8px;color:var(--tanne);
}
.datenschutz-block p{margin:0;font-size:.93rem;line-height:1.62;color:rgba(60,85,83,.88);}

.zustimmung{
	display:flex;gap:13px;align-items:flex-start;
	font-size:1rem;line-height:1.55;cursor:pointer;
	background:#fff;border:1.5px solid rgba(60,85,83,.2);border-radius:14px;padding:15px 16px;
}
.zustimmung input{flex:0 0 auto;width:22px;height:22px;margin:1px 0 0;accent-color:var(--beere);cursor:pointer;}
.zustimmung:has(input:checked){border-color:var(--beere);}

.knopf-reihe{display:flex;gap:14px;align-items:center;margin-top:28px;flex-wrap:wrap;}
.knopf-weiter{
	flex:1 1 auto;
	background:var(--beere);color:#fff;border:none;border-radius:14px;
	padding:17px 26px;font-family:'Raleway',system-ui,sans-serif;font-weight:800;font-size:1.05rem;
	cursor:pointer;box-shadow:0 10px 24px rgba(184,62,106,.26);
	transition:background .15s ease, transform .15s ease;
}
.knopf-weiter:hover{background:var(--beere-dunkel);transform:translateY(-1px);}
.knopf-weiter[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;}
.knopf-zurueck{
	flex:0 0 auto;
	background:transparent;color:var(--tanne);
	border:1.5px solid rgba(60,85,83,.28);border-radius:14px;
	padding:17px 24px;font-family:'Raleway',system-ui,sans-serif;font-weight:600;font-size:1rem;
	cursor:pointer;transition:border-color .15s ease, background .15s ease;
}
.knopf-zurueck:hover{border-color:var(--tanne);background:rgba(207,221,220,.4);}

.fehler{
	margin:14px 0 0;color:var(--beere-dunkel);font-size:.95rem;
	background:rgba(184,62,106,.08);border-radius:12px;padding:12px 15px;display:none;
}
.fehler.sichtbar{display:block;}

/* ---------- Danke-Seite ---------- */
.danke{
	text-align:center;
	max-width:var(--maxw-schmal);
	margin:0 auto;
	padding:20px 24px 0;
}
.danke .siegel{
	width:88px;height:88px;border-radius:50%;
	background:var(--mint);
	display:flex;align-items:center;justify-content:center;
	margin:26px auto 26px;
	box-shadow:0 10px 26px rgba(60,85,83,.14);
}
.danke .siegel svg{width:40px;height:40px;}
.danke h1{
	font-family:'Raleway',system-ui,sans-serif;font-weight:800;
	font-size:clamp(1.9rem,4.6vw,2.9rem);line-height:1.16;margin:0 0 18px;text-wrap:balance;
}
.danke h1 .akzent{color:var(--beere);}
.danke .gross{font-size:clamp(1.05rem,2vw,1.2rem);line-height:1.7;max-width:48ch;margin:0 auto;}
.danke .schreibschrift{
	font-family:'Great Vibes',cursive;
	font-size:clamp(1.9rem,4.4vw,2.6rem);
	color:var(--beere);
	line-height:1.3;
	margin:34px 0 0;
}
.danke .kaertchen{
	background:#fff;border-radius:var(--radius);box-shadow:var(--schatten);
	padding:26px 28px;margin:34px auto 0;text-align:left;max-width:560px;
}
.danke .kaertchen h2{
	font-family:'Raleway',system-ui,sans-serif;font-weight:800;font-size:1.05rem;margin:0 0 10px;
}
.danke .kaertchen p{margin:0;font-size:.98rem;line-height:1.65;color:rgba(60,85,83,.88);}

/* ---------- Footer ---------- */
.site-footer{
	flex:0 0 auto;
	background:var(--mint);
	border-top:1px solid rgba(60,85,83,.15);
	margin-top:70px;
}
.site-footer .inner{
	max-width:var(--maxw);margin:0 auto;padding:26px 24px;
	display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between;
	font-size:.92rem;
}
.site-footer .fname{font-family:'Raleway',system-ui,sans-serif;font-weight:800;color:var(--tanne);}
.site-footer nav{display:flex;flex-wrap:wrap;gap:6px 18px;}
.site-footer a{color:var(--tanne);border-bottom:1px solid rgba(60,85,83,.3);}
.site-footer a:hover{color:var(--beere);border-bottom-color:var(--beere);}
.site-footer .copy{width:100%;color:rgba(60,85,83,.72);font-size:.86rem;}

/* ---------- Handy und Tablet ---------- */
@media (max-width:900px){
	body{font-size:17px;}
	.zwei-spalten{
		grid-template-columns:1fr;
		gap:32px;
		margin-top:38px;
	}
	/* Auf dem Handy zuerst die Punkte, danach das Bild. */
	.spalte-text{order:1;}
	.spalte-bild{order:2;position:static;min-height:0;}
	.bildkarte{position:static;inset:auto;height:auto;aspect-ratio:3/4;}
	.knopf{width:100%;padding:19px 22px;}
	.karte{padding:28px 22px;}
	.marken-kopf{padding-top:16px;}
	.marken-kopf img{width:min(118px,32vw);}
	.zwischen-ueberschrift .akzent{display:inline;}
	/* Auf dem Handy darf das Versprechen in einem Fluss laufen, sonst wird
	   die Headline unnoetig hoch und der Knopf rutscht nach unten. */
	h1.headline .akzent{display:inline;}
	.cta-block.cta-oben{margin:20px auto 0;}
}

/* Sehr schmale Handys. Alles im Kopfbereich rueckt enger zusammen, damit der
   Knopf auch auf einem kleinen Bildschirm ohne Scrollen zu sehen ist. */
@media (max-width:360px){
	.marken-kopf{padding-top:12px;}
	.marken-kopf img{width:104px;}
	.eyebrow{font-size:.74rem;letter-spacing:.12em;margin:10px 0 8px;}
	h1.headline{font-size:1.52rem;}
	.subheadline{font-size:.98rem;line-height:1.55;margin-top:12px;}
	.cta-block.cta-oben{margin:16px auto 0;}
	.knopf{padding:17px 18px;}
}

@media (max-width:560px){
	.feld-paar{grid-template-columns:1fr;}
	.knopf-reihe{flex-direction:column-reverse;align-items:stretch;}
	.knopf-zurueck,.knopf-weiter{width:100%;}
	.site-footer .inner{flex-direction:column;align-items:flex-start;}
}