/* =============================================================
   Dachdeckerei Kappes — Seiteninhalte
   Requires base.css to be loaded first.

   Kräftig/industriell: gerade Sektionsgrenzen statt schräger
   Schnitte, eckige statt runder Karten, dicke Konturlinien und
   versetzte "Sticker"-Schatten statt weicher Weichzeichner-Schatten.
   ============================================================= */

/* ---------- generischer Fließtext (Seiten, Rechtstexte, Blogartikel) ---------- */
.entry-content{max-width:68ch; font-size:var(--step-lead); color:var(--text-soft);}
.entry-content h2{margin:1.6em 0 .6em; color:var(--schiefer);}
.entry-content h3{margin:1.3em 0 .5em;}
.entry-content p + p,
.entry-content ul + p,
.entry-content p + ul{margin-top:1em;}
.entry-content ul,
.entry-content ol{padding-left:1.3em; margin-top:.6em;}
.entry-content li + li{margin-top:.4em;}
.entry-content a{color:var(--schiefer); text-decoration-color:var(--terrakotta); text-underline-offset:3px;}
.entry-content blockquote{
	border-left:var(--kontur) solid var(--terrakotta);
	padding-left:1.2em; margin:1.4em 0;
	font-style:italic; color:var(--text-mute);
}

/* ---------- Blaupausen-Eckmarken ----------
   Wiederkehrendes Signature-Detail statt generischer Kartenoptik:
   technische Zeichnungen markieren Bezugspunkte mit kurzen Eckwinkeln
   (Passermarken) — hier auf Karten und gerahmte Bilder übertragen, an
   der oberen linken und unteren rechten Ecke, leicht nach außen versetzt.
   Braucht position:relative auf jedem Ziel-Element (siehe dort). */
.leistung-karte::before, .leistung-karte::after,
.testimonial-karte::before, .testimonial-karte::after,
.team-karte::before, .team-karte::after,
.kontakt-info::before, .kontakt-info::after,
.leistung-sidebar::before, .leistung-sidebar::after,
.ratgeber-karte::before, .ratgeber-karte::after,
.ratgeber-sidebar::before, .ratgeber-sidebar::after,
.rechtstext-toc::before, .rechtstext-toc::after,
.kanzlei-buero-bild::before, .kanzlei-buero-bild::after{
	content:"";
	position:absolute; z-index:2;
	width:14px; height:14px;
	border:2px solid var(--terrakotta);
	pointer-events:none;
}
.leistung-karte::before, .testimonial-karte::before, .team-karte::before,
.kontakt-info::before, .leistung-sidebar::before, .ratgeber-karte::before,
.ratgeber-sidebar::before, .rechtstext-toc::before, .kanzlei-buero-bild::before{
	top:-7px; left:-7px; border-right:none; border-bottom:none;
}
.leistung-karte::after, .testimonial-karte::after, .team-karte::after,
.kontakt-info::after, .leistung-sidebar::after, .ratgeber-karte::after,
.ratgeber-sidebar::after, .rechtstext-toc::after, .kanzlei-buero-bild::after{
	bottom:-7px; right:-7px; border-left:none; border-top:none;
}
.kanzlei-buero-bild{position:relative;}

/* ---------- Spotlight-Glanz auf Karten ----------
   Folgt dem Mauszeiger (assets/js/interactions.js setzt --mx/--my). Als
   eigenes Element statt ::before/::after, weil die Eckmarken oben beide
   Pseudo-Element-Plätze der Karte bereits belegen. z-index:-1 zusammen
   mit isolation:isolate auf der jeweiligen Karte hält den Glanz zuverlässig
   hinter dem Karteninhalt, aber vor dem Kartenhintergrund. */
.karte-glanz{
	position:absolute; inset:0; z-index:-1;
	background:radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(209,78,42,0.16), transparent 70%);
	opacity:0;
	transition:opacity .35s ease;
	pointer-events:none;
}
.leistung-karte:hover .karte-glanz,
.team-karte:hover .karte-glanz,
.testimonial-karte:hover .karte-glanz,
.ratgeber-karte:hover .karte-glanz{opacity:1;}

/* =============================================================
   Startseite: Hero
   Bewusst als ganzflächiges Foto mit Textebene statt als
   Zweispalten-Raster mit freistehendem Porträt (das wäre strukturell
   zu nah an der Kanzlei-Demo). Ein einziges großes Baustellenfoto
   trägt hier die ganze Fläche, der Text liegt links darüber.
   ============================================================= */
.hero{
	position:relative;
	isolation:isolate;
	overflow:hidden;
	display:flex;
	align-items:flex-end;
	min-height:clamp(520px, 82vh, 760px);
	background:var(--schiefer);
	border-bottom:var(--kontur) solid var(--schiefer);
}

.hero-bild{
	position:absolute; inset:0; z-index:0;
}
.hero-bild img{
	display:block; width:100%; height:100%;
	object-fit:cover; object-position:60% 35%;
}

/* Verdunkelt die linke Seite für lesbaren Text, gibt rechts das Foto
   frei — kein Vollflächen-Scrim, das Foto bleibt erkennbar. */
.hero-scrim{
	position:absolute; inset:0; z-index:1;
	background:linear-gradient(100deg,
		rgba(17,19,22,0.92) 0%,
		rgba(17,19,22,0.82) 32%,
		rgba(17,19,22,0.42) 58%,
		rgba(17,19,22,0.08) 82%
	);
}

/* ---------- Dachkante: durchgehendes Signature-Element ----------
   Eine Reihe harter Dreiecke wie eine Dachsilhouette gegen den Himmel —
   markiert Übergänge zwischen Sektionen anstelle eines schlichten
   Farbwechsels. Wiederverwendbar über die Modifier-Klassen unten. */
.dachkante{
	position:absolute; left:0; right:0; z-index:1;
	height:15px;
	background-repeat:repeat-x;
	background-size:30px 15px;
	pointer-events:none;
}
.dachkante.ist-unten{bottom:0;}
.dachkante.ist-terrakotta{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='15' viewBox='0 0 30 15'%3E%3Cpath d='M0 15 15 0 30 15Z' fill='%23D14E2A'/%3E%3C/svg%3E");
}
.dachkante.ist-schiefer{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='15' viewBox='0 0 30 15'%3E%3Cpath d='M0 15 15 0 30 15Z' fill='%2322252A'/%3E%3C/svg%3E");
}
.dachkante.ist-creme{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='15' viewBox='0 0 30 15'%3E%3Cpath d='M0 15 15 0 30 15Z' fill='%23F6F3EC'/%3E%3C/svg%3E");
}

.hero-inhalt{
	position:relative; z-index:2;
	padding-block:clamp(96px, 16vw, 156px) clamp(64px, 9vw, 104px);
	max-width:56ch;
}
.hero-inhalt .kicker{
	background:transparent; border-color:var(--creme); color:var(--creme);
}
.hero h1{margin-top:6px; color:var(--creme);}
.hero-text{font-size:var(--step-lead); color:rgba(246,243,236,0.82); margin-top:20px; max-width:52ch;}
.hero-actions{display:flex; flex-wrap:wrap; justify-content:flex-start; gap:16px; margin-top:32px;}
.hero-actions .cta-button.ist-ghost{
	background:transparent; color:var(--creme);
	border:var(--kontur) solid var(--creme);
	box-shadow:none;
}
.hero-actions .cta-button.ist-ghost:hover{background:rgba(246,243,236,0.1);}

/* ---------- Siegel: gestempeltes Etikett über dem Hero-Foto ----------
   Referenziert einen Handwerks-Qualitätsstempel statt eines generischen
   Trust-Badges — sitzt jetzt in der oberen rechten Ecke des Fotos statt
   ein einzelnes Porträt zu überlappen. */
.hero-siegel{
	position:absolute; z-index:2;
	top:clamp(88px, 13vw, 128px); right:clamp(20px, 4vw, 48px);
	max-width:150px;
	background:var(--terrakotta); color:var(--creme);
	border:2px solid var(--schiefer-deep);
	box-shadow:4px 4px 0 var(--schiefer-deep);
	padding:10px 14px;
	font-size:0.75rem; font-weight:800; text-transform:uppercase; letter-spacing:0.03em; line-height:1.3;
	text-align:center;
	transform:rotate(-6deg);
}

@media (max-width:700px){
	.hero{align-items:flex-end;}
	.hero-scrim{
		background:linear-gradient(180deg,
			rgba(17,19,22,0.55) 0%,
			rgba(17,19,22,0.88) 55%,
			rgba(17,19,22,0.96) 100%
		);
	}
	.hero-siegel{top:auto; bottom:clamp(200px, 42vh, 260px); right:16px;}
}

/* ---------- Kennzahlen: eigenständige, dunkle Band unter dem Hero ----------
   Gerade Kante, dicker Terrakotta-Steg statt schrägem Farbwechsel. */
.kennzahlen-band{
	position:relative;
	isolation:isolate; overflow:hidden;
	background:var(--schiefer);
	border-bottom:6px solid var(--terrakotta);
	padding-block:clamp(40px, 6vw, 64px);
}
/* Spotlight: folgt dem Mauszeiger über die gesamte Leiste, nicht nur
   innerhalb einer einzelnen Kennzahl — siehe assets/js/interactions.js */
.kennzahlen-band::before{
	content:"";
	position:absolute; inset:0; z-index:0;
	background:radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(209,78,42,0.22), transparent 70%);
	opacity:0;
	transition:opacity .35s ease;
	pointer-events:none;
}
.kennzahlen-band:hover::before{opacity:1;}
.kennzahlen{
	position:relative; z-index:1;
	display:grid; grid-template-columns:repeat(3, 1fr);
	gap:clamp(28px, 4vw, 48px);
	text-align:center;
}
.kennzahl{
	padding-block:14px;
	padding-inline:clamp(12px, 2vw, 24px);
	border-left:2px solid rgba(245,233,223,0.18);
}
.kennzahl:first-child{border-left:none;}
.kennzahl svg{width:26px; height:26px; color:var(--terrakotta); margin-bottom:14px;}
.kennzahl-wert{
	font-weight:900;
	font-size:clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem);
	line-height:1;
	color:var(--creme);
	display:block;
}
.kennzahl-text{font-size:0.9375rem; color:rgba(245,233,223,0.72); margin-top:10px; max-width:22ch; margin-inline:auto;}

@media (max-width:700px){
	.kennzahlen{grid-template-columns:1fr; gap:32px;}
	.kennzahl{border-left:none; padding-inline:0; padding-top:24px; border-top:2px solid rgba(245,233,223,0.18);}
	.kennzahl:first-child{border-top:none; padding-top:0;}
}

/* =============================================================
   Leistungen
   ============================================================= */
/* =============================================================
   Dach-Finder: interaktiver Schnell-Check (nur Startseite)
   ============================================================= */
.dach-finder{
	background:var(--terrakotta-tint);
	border-bottom:var(--kontur) solid var(--schiefer);
}
.finder-optionen{
	display:grid; grid-template-columns:repeat(2, 1fr);
	gap:14px;
	max-width:56rem;
}
.finder-option{
	display:flex; align-items:center; gap:12px;
	text-align:left;
	padding:18px 20px;
	background:var(--surface);
	border:2px solid var(--schiefer);
	border-radius:var(--radius);
	font:inherit; font-weight:700; font-size:0.9375rem; color:var(--schiefer);
	cursor:pointer;
	box-shadow:3px 3px 0 var(--schiefer);
	transition:transform var(--dauer) var(--ease), box-shadow var(--dauer) var(--ease), background var(--dauer) var(--ease);
}
.finder-option svg{
	width:20px; height:20px; flex-shrink:0;
	fill:var(--terrakotta-deep);
}
.finder-option:hover{transform:translate(3px,3px); box-shadow:0 0 0 var(--schiefer);}
.finder-option[aria-pressed="true"],
.finder-option.ist-aktiv{
	background:var(--schiefer); color:var(--creme);
	transform:translate(3px,3px); box-shadow:0 0 0 var(--schiefer);
}
.finder-option[aria-pressed="true"] svg,
.finder-option.ist-aktiv svg{fill:var(--terrakotta);}

.finder-ergebnis{
	margin-top:28px; max-width:56rem;
	background:var(--schiefer); color:var(--creme);
	border:var(--kontur) solid var(--schiefer-deep);
	border-radius:var(--radius);
	padding:clamp(24px, 3vw, 32px);
	box-shadow:var(--shadow-md);
}
.finder-ergebnis:focus{outline:none;}
.finder-ergebnis-label{
	font-size:0.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
	color:var(--terrakotta);
	margin-bottom:8px;
}
.finder-ergebnis h3{color:var(--creme); margin-bottom:10px;}
.finder-ergebnis p:not(.finder-ergebnis-label){color:rgba(245,233,223,0.8); margin-bottom:20px; max-width:60ch;}

@media (max-width:700px){
	.finder-optionen{grid-template-columns:1fr;}
}

#leistungen{border-bottom:var(--kontur) solid var(--schiefer);}

.leistungen-grid{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	grid-auto-rows:1fr;
	gap:clamp(16px, 2vw, 22px);
}
.leistung-karte{
	position:relative;
	isolation:isolate;
	display:flex; flex-direction:column; align-items:flex-start;
	padding:clamp(24px, 3vw, 32px);
	background:var(--surface);
	border:var(--kontur) solid var(--schiefer);
	border-radius:var(--radius);
	text-decoration:none;
	box-shadow:var(--shadow-sm);
	transition:transform var(--dauer) var(--ease), box-shadow var(--dauer) var(--ease), background var(--dauer) var(--ease);
}
.leistung-karte:hover{
	/* Leichte Rotation beim Hover — wie ein Dachziegel, der sich einen
	   Spalt anhebt, statt eines neutralen Kartenversatzes. */
	transform:translate(5px, 5px) rotate(-1deg);
	box-shadow:0 0 0 var(--schiefer);
	background:var(--terrakotta-tint);
}
.leistung-icon{
	width:40px; height:40px; padding:9px;
	color:var(--creme);
	background:var(--schiefer);
	border-radius:var(--radius);
	margin-bottom:18px;
}
.leistung-karte:hover .leistung-icon{background:var(--terrakotta-deep);}

/* Stempel-Nummer wie auf einem Auftragszettel — macht aus vier
   austauschbaren Feature-Karten vier durchnummerierte Positionen. */
.leistung-nummer{
	position:absolute; top:14px; right:14px;
	font-size:0.6875rem; font-weight:800; letter-spacing:0.03em;
	color:var(--text-mute);
	font-variant-numeric:tabular-nums;
}
/* Semantisch h2: auf der Leistungen-Hub-Seite folgt die Karte direkt auf
   das h1, ohne h2 dazwischen — auf der Startseite folgt sie auf das h2 des
   Abschnitts, was ebenfalls unproblematisch ist (Wiederholung, kein Sprung).
   Optisch weiterhin die kompaktere h3-Größe. */
.leistung-karte h2{
	margin-bottom:8px;
	font-size:var(--step-h3); font-weight:800;
}
.leistung-karte p{color:var(--text-soft); font-size:0.9375rem; flex-grow:1;}
.leistung-karte-mehr{
	display:inline-flex; align-items:center; gap:6px;
	margin-top:18px; font-size:0.8125rem; font-weight:800; text-transform:uppercase; letter-spacing:0.02em; color:var(--schiefer);
}
.leistung-karte-mehr svg{width:16px; height:16px; transition:transform var(--dauer) var(--ease);}
.leistung-karte:hover .leistung-karte-mehr svg{transform:translateX(4px);}

@media (max-width:1000px){
	.leistungen-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
	.leistungen-grid{grid-template-columns:1fr;}
}

/* ---------- Detailseite einer Leistung ---------- */
.leistung-layout{
	display:grid; grid-template-columns:1fr 300px;
	gap:clamp(32px, 5vw, 64px);
	align-items:start;
}
.leistung-leistungen{
	list-style:none; margin-top:24px;
	display:grid; gap:12px;
}
.leistung-leistungen li{
	display:flex; gap:10px; align-items:flex-start;
	font-size:var(--step-lead); color:var(--text);
}
.leistung-leistungen svg{width:20px; height:20px; flex-shrink:0; margin-top:3px; color:var(--terrakotta-deep);}

.leistung-sidebar{
	background:var(--surface); border:var(--kontur) solid var(--schiefer); border-radius:var(--radius);
	box-shadow:var(--shadow-sm);
	padding:clamp(22px, 2.6vw, 28px);
	position:sticky; top:96px;
}
.leistung-sidebar h3{margin-bottom:14px;}
.leistung-sidebar .cta-button{width:100%; justify-content:center; margin-top:18px;}

@media (max-width:820px){
	.leistung-layout{grid-template-columns:1fr;}
	.leistung-sidebar{position:static;}
}

.leistungen-ergaenzung{
	margin-top:clamp(28px, 4vw, 40px);
	padding:20px 24px;
	border-left:var(--kontur) solid var(--terrakotta);
	background:var(--surface);
	color:var(--text-soft); font-size:0.9375rem; max-width:66ch;
}

/* =============================================================
   Inhaber / Über uns
   ============================================================= */
#ueber-uns{border-bottom:var(--kontur) solid var(--schiefer);}

.kanzlei-buero-bild{
	margin-bottom:clamp(32px, 4vw, 48px);
	border:var(--kontur) solid var(--schiefer);
	border-radius:var(--radius);
	overflow:hidden;
	box-shadow:var(--shadow-md);
}
.kanzlei-buero-bild img{display:block; width:100%; height:auto;}

.team-grid{
	display:grid; grid-template-columns:repeat(2, 1fr);
	gap:clamp(24px, 3vw, 40px);
}
.team-karte{
	position:relative;
	isolation:isolate;
	background:var(--surface); border:var(--kontur) solid var(--schiefer); border-radius:var(--radius);
	box-shadow:var(--shadow-sm);
	padding:clamp(28px, 3.2vw, 40px);
	text-align:center;
	max-width:420px; margin-inline:auto;
	transition:transform var(--dauer) var(--ease), box-shadow var(--dauer) var(--ease);
}
.team-karte:hover{transform:translate(4px, 4px) rotate(-0.6deg); box-shadow:0 0 0 var(--schiefer);}
.team-avatar{margin-bottom:18px;}
.team-foto{
	border-radius:var(--radius);
	object-fit:cover;
	/* Aktuelles Foto ist eine Actionaufnahme (Dachstuhl-Aufbau), kein
	   Kopf-und-Schulter-Porträt — mittiger statt kopflastiger Zuschnitt,
	   damit im quadratischen Rahmen nicht nur Dachbalken/Himmel zu sehen
	   sind. Bei einem künftigen Porträtfoto ggf. wieder nach oben (z. B.
	   50% 15%) verschieben. */
	object-position:50% 40%;
	aspect-ratio:1;
	border:var(--kontur) solid var(--schiefer);
	box-shadow:4px 4px 0 var(--terrakotta);
}
.team-titel{color:var(--terrakotta-deep); font-weight:700; font-size:0.9375rem; margin-bottom:16px;}
.team-zitat{
	font-style:italic; font-weight:600; font-size:1.125rem;
	color:var(--text-soft); max-width:36ch; margin-inline:auto;
}

@media (max-width:700px){
	.team-grid{grid-template-columns:1fr;}
}

/* ---------- Inhaber-Editorial (Über-uns-Seite): großformatig ---------- */
.team-editorial{display:grid; gap:clamp(56px, 7vw, 88px);}
.team-editorial-eintrag{
	display:grid;
	grid-template-columns:minmax(220px, 340px) 1fr;
	gap:clamp(32px, 5vw, 64px);
	align-items:center;
}

.team-editorial-bild{position:relative;}
.team-foto-editorial{
	display:block; width:100%; height:auto;
	border-radius:var(--radius);
	object-fit:cover;
	aspect-ratio:4 / 5;
	box-shadow:var(--shadow-md);
	border:var(--kontur) solid var(--schiefer);
}

/* Semantisch h2 (folgt direkt auf das h1 der Über-uns-Seite, kein h2
   dazwischen ausgelassen) — optisch weiterhin die kompaktere h3-Größe wie
   bei der Startseiten-Teaser-Variante (.team-karte h3, unverändert h3). */
.team-editorial-text h2{font-size:var(--step-h3); font-weight:800;}
.team-editorial-text .team-titel{margin-top:4px;}
.team-editorial-text .team-zitat{margin-inline:0; text-align:left; max-width:44ch; font-size:1.25rem;}

/* ---------- Interaktiver Werdegang: aufklappbare Zeitleiste ---------- */
.lebenslauf{
	position:relative;
	margin:22px 0;
	padding-left:28px;
}
.lebenslauf::before{
	content:"";
	position:absolute; top:6px; bottom:6px; left:5px;
	width:3px; background:var(--schiefer);
}
.lebenslauf-eintrag{
	position:relative;
	padding-bottom:18px;
}
.lebenslauf-eintrag::before{
	content:"";
	position:absolute; top:5px; left:-29px;
	width:12px; height:12px;
	background:var(--surface); border:3px solid var(--terrakotta);
	transition:background var(--dauer) var(--ease);
}
.lebenslauf-eintrag[open]::before{background:var(--terrakotta);}
.lebenslauf-eintrag summary{
	cursor:pointer; list-style:none;
	display:flex; align-items:baseline; flex-wrap:wrap; gap:10px;
	font-size:0.9375rem;
}
.lebenslauf-eintrag summary::-webkit-details-marker{display:none;}
.lebenslauf-jahr{
	font-weight:800; color:var(--terrakotta-deep);
	min-width:3.5em;
}
.lebenslauf-titel{font-weight:700; color:var(--schiefer);}
.lebenslauf-eintrag summary svg{
	width:14px; height:14px; margin-left:auto; flex-shrink:0;
	color:var(--text-mute);
	transition:transform var(--dauer) var(--ease);
}
.lebenslauf-eintrag[open] summary svg{transform:rotate(180deg);}
.lebenslauf-eintrag p{
	margin-top:8px; padding-left:calc(3.5em + 10px);
	font-size:0.9375rem; color:var(--text-soft);
}

@media (max-width:760px){
	.team-editorial-eintrag{grid-template-columns:1fr;}
	.team-foto-editorial{max-width:280px; margin-inline:auto;}
}

/* =============================================================
   Kundenstimmen
   ============================================================= */
#referenzen{border-bottom:var(--kontur) solid var(--schiefer);}

.sterne{display:inline-flex; gap:2px; color:var(--terrakotta); margin-bottom:14px;}
.sterne svg{width:16px; height:16px;}

.testimonial-karte{
	position:relative;
	isolation:isolate;
	background:var(--surface); border:var(--kontur) solid var(--schiefer); border-radius:var(--radius);
	box-shadow:var(--shadow-sm);
	padding:clamp(24px, 2.8vw, 32px);
	height:100%;
	display:flex; flex-direction:column;
	transition:transform var(--dauer) var(--ease), box-shadow var(--dauer) var(--ease);
}
.testimonial-karte:hover{transform:translate(4px, 4px) rotate(-0.6deg); box-shadow:0 0 0 var(--schiefer);}
.testimonial-karte blockquote{
	font-size:1.125rem; line-height:1.5;
	color:var(--text); flex-grow:1;
}
.testimonial-karte figcaption{margin-top:18px; display:flex; flex-direction:column; gap:2px;}
.testimonial-name{font-weight:800; font-size:0.9375rem; color:var(--schiefer);}
.testimonial-gebiet{font-size:0.8125rem; color:var(--text-mute); text-transform:uppercase; letter-spacing:0.03em;}

/* ---------- Karussell: eine große Stimme, sanfte Überblendung ---------- */
.testimonial-slider{max-width:56rem; margin-inline:auto;}
.testimonial-slider-track{
	display:grid;
}
.testimonial-slide{
	grid-area:1 / 1;
	opacity:0;
	transform:translateY(6px);
	transition:opacity .6s ease, transform .6s ease;
	pointer-events:none;
}
.testimonial-slide.ist-aktiv{
	opacity:1;
	transform:none;
	pointer-events:auto;
}
.testimonial-slider .testimonial-karte{
	border:none; box-shadow:none; background:transparent;
	padding:0 0 0 clamp(0px, 4vw, 24px);
	text-align:center;
}
/* Die Karussell-Variante zeigt keinen umrandeten Kartenkörper — der
   Karten-Hover-Effekt (Versatz + Rotation, siehe .testimonial-karte:hover
   oben) würde hier nur den zentrierten Zitattext ohne erkennbaren Grund
   verschieben, deshalb hier gezielt zurückgesetzt. */
.testimonial-slider .testimonial-karte:hover{transform:none; box-shadow:none;}
.testimonial-slider .testimonial-karte::before,
.testimonial-slider .testimonial-karte::after{content:none;}
.testimonial-slider .sterne{justify-content:center;}
.testimonial-slider .testimonial-karte blockquote{
	font-size:clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
	line-height:1.45;
	font-weight:600;
}
.testimonial-slider .testimonial-karte figcaption{align-items:center;}

.testimonial-slider-dots{display:flex; justify-content:center; gap:8px; margin-top:32px;}
/* Klickfläche 24×24px (Mindestgröße für Touch-Targets) bei weiterhin
   dezentem 10px-Quadrat — das eigentliche Quadrat ist ein ::before, damit
   die Optik unverändert bleibt. */
.testimonial-slider-dots button{
	width:24px; height:24px; border:none;
	background:transparent; cursor:pointer; padding:0;
	position:relative;
}
.testimonial-slider-dots button::before{
	content:"";
	position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
	width:10px; height:10px;
	background:var(--line-strong);
	opacity:0.3;
	transition:background var(--dauer) var(--ease), transform var(--dauer) var(--ease), opacity var(--dauer) var(--ease);
}
.testimonial-slider-dots button[aria-selected="true"]::before{background:var(--terrakotta); opacity:1; transform:translate(-50%, -50%) scale(1.3);}

@media (prefers-reduced-motion:reduce){
	.testimonial-slide{transition:opacity .01ms; transform:none;}
}

.testimonial-grid{
	display:grid; grid-template-columns:repeat(3, 1fr);
	gap:clamp(18px, 2.4vw, 24px);
}
@media (max-width:900px){.testimonial-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.testimonial-grid{grid-template-columns:1fr;}}

/* =============================================================
   FAQ (natives <details>/<summary>, kein JS nötig)
   ============================================================= */
.faq-block{position:relative; background:var(--schiefer-tint); border-bottom:var(--kontur) solid var(--schiefer);}
.faq-liste{display:grid; gap:14px; max-width:76ch;}
.faq-eintrag{
	background:var(--surface); border:2px solid var(--schiefer); border-radius:var(--radius-sm);
	padding:18px 22px;
}
.faq-eintrag summary{
	cursor:pointer; list-style:none;
	display:flex; align-items:center; justify-content:space-between; gap:16px;
	font-weight:700; color:var(--schiefer);
}
.faq-eintrag summary::-webkit-details-marker{display:none;}
.faq-eintrag summary svg{width:18px; height:18px; flex-shrink:0; transition:transform var(--dauer) var(--ease); color:var(--terrakotta-deep);}
.faq-eintrag[open] summary svg{transform:rotate(180deg);}
/* Dachspitze statt neutralem Chevron als Auf-/Zuklapp-Indikator. */
.faq-dach{fill:var(--terrakotta-deep);}
.faq-eintrag summary:hover .faq-dach{fill:var(--terrakotta);}
.faq-eintrag p{margin-top:14px; color:var(--text-soft); font-size:0.9375rem;}

/* =============================================================
   Schluss-CTA
   ============================================================= */
.schluss-cta{
	position:relative;
	background:var(--schiefer); color:var(--creme);
	text-align:center;
	border-bottom:6px solid var(--terrakotta);
}
.schluss-cta h2{color:var(--creme);}
.schluss-cta p{color:rgba(245,233,223,0.75); max-width:52ch; margin:14px auto 0;}
.schluss-cta .cta-button{margin-top:28px;}
.schluss-cta .cta-button.ist-terrakotta{box-shadow:5px 5px 0 var(--terrakotta-deep);}

/* =============================================================
   Kontakt
   ============================================================= */
.kontakt-layout{
	display:grid; grid-template-columns:1fr 340px;
	gap:clamp(32px, 5vw, 64px);
	align-items:start;
}
.kontakt-info{
	position:relative;
	background:var(--surface); border:var(--kontur) solid var(--schiefer); border-radius:var(--radius);
	box-shadow:var(--shadow-sm);
	padding:clamp(24px, 3vw, 32px);
	display:grid; gap:20px;
}
.kontakt-info-eintrag{display:flex; gap:12px; align-items:flex-start;}
.kontakt-info-eintrag svg{width:20px; height:20px; flex-shrink:0; margin-top:2px; color:var(--terrakotta-deep);}
.kontakt-info-eintrag strong{display:block; font-size:0.8125rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-mute); margin-bottom:2px;}

.kontakt-form .feld{margin-top:16px;}
.kontakt-form label{display:block; font-weight:700; font-size:0.9375rem; margin-bottom:6px; color:var(--schiefer);}
.kontakt-form .pflicht{color:var(--terrakotta-deep);}
.kontakt-form input,
.kontakt-form select,
.kontakt-form textarea{
	width:100%; padding:12px 14px;
	border:2px solid var(--schiefer); border-radius:var(--radius-sm);
	font:inherit; color:var(--text); background:var(--surface);
	transition:border-color var(--dauer) var(--ease), box-shadow var(--dauer) var(--ease);
}
.kontakt-form input:focus,
.kontakt-form select:focus,
.kontakt-form textarea:focus{
	outline:none; border-color:var(--terrakotta); box-shadow:3px 3px 0 var(--terrakotta);
}
.feld-honigtopf{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden;}
.feld-checkbox{margin-top:18px; display:flex; align-items:flex-start; gap:10px;}
.feld-checkbox label{display:flex; gap:10px; font-weight:400; font-size:0.875rem; color:var(--text-soft);}
.feld-checkbox input{width:auto; margin-top:3px;}
.feld-checkbox a{color:var(--schiefer);}
.feld-hinweis{margin-top:14px; font-size:0.8125rem; color:var(--text-mute);}
.kontakt-form .btn-primary{
	margin-top:22px; width:100%;
	padding:14px 24px; border:var(--kontur) solid var(--schiefer-deep);
	background:var(--terrakotta); color:var(--creme);
	font-weight:800; font-size:0.9375rem; text-transform:uppercase; letter-spacing:0.02em; cursor:pointer;
	box-shadow:var(--shadow-sm);
	transition:background var(--dauer) var(--ease), transform var(--dauer) var(--ease), box-shadow var(--dauer) var(--ease);
}
.kontakt-form .btn-primary:hover{background:var(--terrakotta-deep); transform:translate(5px,5px); box-shadow:0 0 0 var(--schiefer);}

.form-bestaetigung{
	background:var(--terrakotta-tint); border:var(--kontur) solid var(--terrakotta);
	border-radius:var(--radius); padding:28px;
}
.form-bestaetigung-haken{
	display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center;
	background:var(--terrakotta); color:var(--surface); border-radius:var(--radius); margin-bottom:14px;
}
.form-bestaetigung-haken svg{width:22px; height:22px;}
.form-bestaetigung h3{margin-bottom:8px;}
.form-bestaetigung-klein{margin-top:12px; font-size:0.875rem; color:var(--text-mute);}
.form-hinweis{padding:16px 20px; border:2px solid currentColor; border-radius:var(--radius-sm); font-size:0.9375rem;}
.form-fehler{background:#FBEAEA; color:#8A2E2E;}

@media (max-width:860px){
	.kontakt-layout{grid-template-columns:1fr;}
}

/* =============================================================
   Rechtstexte (Impressum, Datenschutz)
   ============================================================= */
.rechtstext-kopf{max-width:60ch; margin-bottom:32px;}
.rechtstext-toc{
	position:relative;
	background:var(--surface); border:var(--kontur) solid var(--schiefer); border-radius:var(--radius);
	padding:20px 24px; margin-bottom:32px; max-width:60ch;
}
.rechtstext-toc-titel{display:block; font-weight:800; font-size:0.8125rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-mute); margin-bottom:10px;}
.rechtstext-toc ul{list-style:none; display:grid; gap:6px;}
.rechtstext-toc a{color:var(--schiefer); text-decoration:none; font-size:0.9375rem;}
.rechtstext-toc a:hover{text-decoration:underline;}
.rechtstext-inhalt{max-width:68ch;}

/* =============================================================
   404
   ============================================================= */
.seite-404{text-align:center; max-width:52ch; margin-inline:auto; padding-block:40px;}
.seite-404 p{color:var(--text-soft); margin:16px 0 28px;}

/* =============================================================
   Blog (nicht verlinkt, Datei liegt für spätere Erweiterung bereit)
   ============================================================= */
.ratgeber-grid{
	display:grid; grid-template-columns:repeat(3, 1fr);
	gap:clamp(20px, 2.6vw, 28px);
}
.ratgeber-karte{
	position:relative;
	isolation:isolate;
	display:flex; flex-direction:column;
	background:var(--surface); border:var(--kontur) solid var(--schiefer); border-radius:var(--radius);
	box-shadow:var(--shadow-sm);
	padding:clamp(22px, 2.6vw, 28px);
	text-decoration:none;
	transition:transform var(--dauer) var(--ease), box-shadow var(--dauer) var(--ease);
}
.ratgeber-karte:hover{transform:translate(5px,5px) rotate(-1deg); box-shadow:0 0 0 var(--schiefer);}
.ratgeber-kategorie{
	display:inline-block; align-self:flex-start;
	font-size:0.75rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
	color:var(--terrakotta-deep); background:var(--terrakotta-tint);
	padding:5px 12px; margin-bottom:14px;
}
/* Semantisch h2 (folgt direkt auf das h1 der Seite, kein h2 dazwischen
   ausgelassen) — optisch weiterhin wie zuvor die kompaktere h3-Größe. */
.ratgeber-karte h2{
	margin-bottom:10px;
	font-size:var(--step-h3); font-weight:800;
}
.ratgeber-karte p{color:var(--text-soft); font-size:0.9375rem; flex-grow:1;}
.ratgeber-datum{margin-top:16px; font-size:0.8125rem; color:var(--text-mute);}

@media (max-width:900px){.ratgeber-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.ratgeber-grid{grid-template-columns:1fr;}}

.ratgeber-artikel-layout{
	display:grid; grid-template-columns:1fr 300px;
	gap:clamp(32px, 5vw, 64px); align-items:start;
}
.ratgeber-artikel-kopf{max-width:66ch; margin-bottom:32px;}
.ratgeber-artikel-meta{display:flex; gap:14px; align-items:center; color:var(--text-mute); font-size:0.875rem; margin-top:10px;}

.ratgeber-sidebar{
	background:var(--surface); border:var(--kontur) solid var(--schiefer); border-radius:var(--radius);
	box-shadow:var(--shadow-sm);
	padding:clamp(22px, 2.6vw, 28px); position:sticky; top:96px;
}
.ratgeber-sidebar h3{margin-bottom:12px; font-size:1.0625rem;}
.ratgeber-sidebar p{color:var(--text-soft); font-size:0.9375rem; margin-bottom:16px;}
.ratgeber-sidebar .cta-button{width:100%; justify-content:center;}

@media (max-width:820px){
	.ratgeber-artikel-layout{grid-template-columns:1fr;}
	.ratgeber-sidebar{position:static;}
}