/* =============================================================
   Growen Media — page content
   Requires base.css to be loaded first.
   ============================================================= */

/* ---------- hero ---------- */
.hero{padding-block:clamp(48px, 7vw, 92px) clamp(44px, 6vw, 76px);}

.hero-inner{
	display:grid;
	grid-template-columns:minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap:clamp(32px, 5vw, 64px);
	align-items:center;
}
@media (max-width:900px){
	.hero-inner{grid-template-columns:1fr;}
}

.eyebrow{
	display:inline-flex; align-items:center; gap:8px;
	font-size:13px; font-weight:500; color:var(--teal-deep);
	background:var(--teal-tint); padding:6px 12px; border-radius:20px;
	margin-bottom:20px;
}

.hero h1{font-size:var(--step-h1); margin-bottom:18px;}

.hero p.lead{
	font-size:var(--step-lead);
	color:var(--text-soft);
	max-width:46ch;
	margin-bottom:30px;
}

.cta-row{display:flex; gap:14px; flex-wrap:wrap;}

.btn-primary{
	background:var(--teal); color:var(--teal-tint);
	padding:14px 26px; border-radius:10px;
	font-size:15px; font-weight:500; text-decoration:none;
	display:inline-block; border:none; cursor:pointer;
}
.btn-ghost{
	padding:14px 26px; border-radius:10px;
	font-size:15px; font-weight:500; color:var(--text);
	border:0.5px solid var(--line-strong);
	text-decoration:none; display:inline-block;
}
.btn-primary:focus-visible,
.btn-ghost:focus-visible{outline:2px solid var(--teal); outline-offset:3px;}

/* search demo */
.searchcard{
	background:var(--surface); border-radius:16px;
	border:0.5px solid var(--line); padding:22px;
	box-shadow:0 1px 2px rgba(0,0,0,0.03);
	min-width:0;
}
.searchbar{
	display:flex; align-items:center; gap:10px;
	background:var(--bg); border-radius:10px;
	padding:13px 16px; border:0.5px solid var(--line);
	min-width:0;
}
.searchbar .dot{width:8px; height:8px; border-radius:50%; background:var(--pop); flex-shrink:0;}
#query-text{
	font-family:'IBM Plex Mono', monospace;
	font-size:clamp(12px, 0.7rem + 0.35vw, 14px);
	color:var(--text); flex:1; min-width:0;
	white-space:nowrap; overflow:hidden;
}
#query-text::after{content:'|'; animation:blink 1s step-start infinite; color:var(--teal);}
@keyframes blink{50%{opacity:0;}}

.result-row{
	display:flex; align-items:center; gap:12px;
	margin-top:16px; padding:12px 14px; border-radius:10px;
	background:var(--teal-tint);
	opacity:0; transform:translateY(6px);
	transition:opacity .4s ease, transform .4s ease;
}
.result-row.show{opacity:1; transform:translateY(0);}
.result-row .pin{
	width:26px; height:26px; border-radius:50%; background:var(--teal);
	flex-shrink:0; display:flex; align-items:center; justify-content:center;
	color:var(--teal-tint); font-size:13px;
}
.result-row .label{font-size:13px; color:var(--teal-deep); font-weight:500;}
.result-row .sub{font-size:12px; color:var(--text-mute);}

/* ---------- problem ---------- */
.problem{
	background:var(--surface);
	border-top:0.5px solid var(--line);
	border-bottom:0.5px solid var(--line);
}
.problem-inner{
	display:grid; grid-template-columns:1fr 1fr;
	gap:clamp(32px, 4vw, 56px); align-items:start;
}
@media (max-width:880px){
	.problem-inner{grid-template-columns:1fr;}
}
.problem h2{font-size:var(--step-h2); margin-bottom:16px;}
.problem p{color:var(--text-soft); font-size:1rem; max-width:52ch;}

.query-tags{display:flex; flex-wrap:wrap; gap:10px; align-content:flex-start;}
.query-tags span{
	font-family:'IBM Plex Mono', monospace; font-size:13px;
	background:var(--bg-alt); border:0.5px solid var(--line);
	padding:8px 12px; border-radius:8px; color:var(--text-soft);
}

/* ---------- section headings ---------- */
.section-head{max-width:60ch; margin-bottom:clamp(32px, 4vw, 52px);}
.section-head .kicker{
	display:block; font-family:'IBM Plex Mono', monospace;
	font-size:13px; color:var(--teal-deep); margin-bottom:10px;
}
.section-head h2{font-size:var(--step-h2);}
.section-head p{
	margin-top:14px;
	font-size:1rem;
	color:var(--text-soft);
	max-width:58ch;
}

/* ---------- service cards ---------- */
.cards{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:clamp(16px, 2vw, 24px);
}
@media (max-width:720px){
	.cards{grid-template-columns:1fr;}
}
.card{
	background:var(--surface); border:0.5px solid var(--line);
	border-radius:14px; padding:clamp(20px, 2.5vw, 28px);
}
.card .num{
	display:block; font-family:'IBM Plex Mono', monospace;
	font-size:13px; color:var(--pop); margin-bottom:14px;
}
.card h3{font-size:var(--step-h3); margin-bottom:10px;}
.card p{font-size:0.925rem; color:var(--text-soft);}

/* ---------- process ---------- */
.process{background:var(--bg-alt);}
.steps{display:flex; flex-direction:column;}
.step{
	display:grid;
	grid-template-columns:clamp(96px, 12vw, 136px) 1fr;
	gap:clamp(16px, 2.5vw, 28px);
	padding-block:26px;
	border-top:0.5px solid var(--line);
}
.step:last-child{border-bottom:0.5px solid var(--line);}
@media (max-width:620px){
	.step{grid-template-columns:1fr; gap:8px;}
}
.step .phase{font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--teal-deep);}
.step h3{font-size:var(--step-h3); margin-bottom:6px;}
.step p{font-size:0.925rem; color:var(--text-soft); max-width:60ch;}

/* ---------- branchen ---------- */
.chips{display:flex; flex-wrap:wrap; gap:12px;}
.chip{
	background:var(--surface); border:0.5px solid var(--line);
	border-radius:24px; padding:10px 18px; font-size:14px;
}

/* ---------- difference ---------- */
.diff-grid{
	display:grid; grid-template-columns:1fr 1fr; gap:0;
	border:0.5px solid var(--line); border-radius:14px; overflow:hidden;
}
@media (max-width:760px){
	.diff-grid{grid-template-columns:1fr;}
}
.diff-col{padding:clamp(24px, 3vw, 36px);}
.diff-col.no{background:var(--surface);}
.diff-col.yes{background:var(--teal-deep); color:var(--teal-tint);}
.diff-col h3{font-size:1rem; margin-bottom:18px;}
.diff-col.no h3{color:var(--text-mute);}
.diff-col ul{list-style:none;}
.diff-col li{font-size:0.925rem; padding-block:8px; display:flex; gap:10px;}
.diff-col.no li{color:var(--text-soft); border-bottom:0.5px solid var(--line);}
.diff-col.yes li{border-bottom:0.5px solid rgba(225,245,238,0.15);}
.diff-col li:last-child{border-bottom:none;}

/* ---------- final cta ---------- */
.final-cta{
	background:var(--teal); color:var(--teal-tint);
	border-radius:20px; padding:clamp(36px, 5vw, 64px) clamp(24px, 4vw, 48px);
	text-align:center;
}
.final-cta h2{font-size:var(--step-h2); margin-bottom:14px; color:var(--teal-tint);}
.final-cta p{
	color:var(--teal-tint); opacity:0.85;
	margin:0 auto 28px; max-width:52ch;
}
.final-cta .btn-primary{background:var(--teal-tint); color:var(--teal-deep);}
.final-cta .btn-primary:focus-visible{outline:2px solid var(--teal-tint); outline-offset:3px;}

/* =============================================================
   Editor content (pages and posts)
   base.css zeroes all margins, so prose written in the WordPress
   editor needs its spacing put back explicitly.
   ============================================================= */
.entry-content{max-width:70ch;}

.entry-content > * + *{margin-top:1.1em;}

.entry-content h2{font-size:var(--step-h2); margin-top:2em;}
.entry-content h3{font-size:var(--step-h3); margin-top:1.8em;}
.entry-content h4{font-size:1rem; font-weight:600; margin-top:1.6em;}

.entry-content p,
.entry-content li{color:var(--text-soft);}

.entry-content a{color:var(--teal-deep); text-decoration:underline; text-underline-offset:2px;}
.entry-content a:hover{color:var(--teal);}

.entry-content ul,
.entry-content ol{padding-left:1.4em;}
.entry-content li + li{margin-top:0.4em;}

.entry-content blockquote{
	border-left:3px solid var(--teal); padding-left:20px;
	color:var(--text-soft); font-style:italic;
}

.entry-content img{border-radius:12px;}

.entry-content figcaption{
	font-size:13px; color:var(--text-mute); margin-top:8px; text-align:center;
}

.entry-content hr{border:none; border-top:0.5px solid var(--line);}

.entry-content table{width:100%; border-collapse:collapse; font-size:0.925rem;}
.entry-content th,
.entry-content td{padding:10px 12px; border-bottom:0.5px solid var(--line); text-align:left;}
.entry-content th{font-weight:600;}

.entry-content code{
	font-family:'IBM Plex Mono', monospace; font-size:0.9em;
	background:var(--bg-alt); padding:2px 6px; border-radius:5px;
}
.entry-content pre{
	background:var(--bg-alt); border:0.5px solid var(--line);
	border-radius:10px; padding:18px; overflow-x:auto;
}
.entry-content pre code{background:none; padding:0;}

/* WordPress alignment classes */
.entry-content .aligncenter{margin-inline:auto; display:block;}
.entry-content .alignright{float:right; margin:0 0 1em 1.5em;}
.entry-content .alignleft{float:left; margin:0 1.5em 1em 0;}
.entry-content .alignwide,
.entry-content .alignfull{max-width:none;}

/* search form + pagination fall out of core, give them the house look */
.search-form{display:flex; gap:10px; flex-wrap:wrap; max-width:460px;}
.search-form label{flex:1; min-width:180px;}
.search-form input[type="search"]{
	width:100%; font:inherit; font-size:15px;
	padding:12px 14px; border-radius:10px;
	border:0.5px solid var(--line-strong); background:var(--surface); color:var(--text);
}
.search-form input[type="search"]:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
.search-form input[type="submit"]{
	font:inherit; font-size:15px; font-weight:500; cursor:pointer;
	background:var(--teal); color:var(--teal-tint);
	border:none; border-radius:10px; padding:12px 22px;
}

.nav-links{display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; font-size:14px;}
.nav-links .page-numbers{
	padding:8px 13px; border-radius:8px; text-decoration:none;
	border:0.5px solid var(--line); background:var(--surface); color:var(--text-soft);
}
.nav-links .page-numbers.current{background:var(--teal); color:var(--teal-tint); border-color:var(--teal);}

/* =============================================================
   Kontaktformular
   ============================================================= */
.kontaktformular{max-width:560px;}

.form-hinweis{
	padding:14px 18px; border-radius:10px; margin-bottom:24px;
	font-size:0.95rem; border:0.5px solid transparent;
}
.form-ok{background:var(--teal-tint); color:var(--teal-deep); border-color:var(--teal);}
.form-fehler{background:#FDECEC; color:#8A2020; border-color:#E0A0A0;}

.kontakt-form .feld{display:flex; flex-direction:column; gap:6px; margin-bottom:18px;}

.kontakt-form label{font-size:14px; font-weight:500; color:var(--text);}
.kontakt-form .pflicht{color:var(--pop);}

.kontakt-form input[type="text"],
.kontakt-form input[type="email"],
.kontakt-form input[type="tel"],
.kontakt-form textarea{
	font:inherit; font-size:16px; /* 16px verhindert das Zoomen auf iOS */
	width:100%; padding:12px 14px;
	background:var(--surface); color:var(--text);
	border:0.5px solid var(--line-strong); border-radius:10px;
}
.kontakt-form textarea{resize:vertical; min-height:150px;}

.kontakt-form input:focus-visible,
.kontakt-form textarea:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}

.kontakt-form .feld-checkbox{margin-bottom:16px;}
.kontakt-form .feld-checkbox label{
	display:flex; align-items:flex-start; gap:10px;
	font-weight:400; font-size:0.9rem; color:var(--text-soft); cursor:pointer;
}
.kontakt-form .feld-checkbox input{margin-top:4px; flex-shrink:0; width:17px; height:17px; accent-color:var(--teal);}
.kontakt-form .feld-checkbox a{color:var(--teal-deep); text-decoration:underline; text-underline-offset:2px;}

.kontakt-form .feld-hinweis{font-size:13px; color:var(--text-mute); margin-bottom:22px;}

.kontakt-form button[type="submit"]{cursor:pointer;}
.kontakt-form button[type="submit"]:focus-visible{outline:2px solid var(--teal); outline-offset:3px;}

/* Honigtopf: unsichtbar, aber nicht display:none — manche Bots prüfen darauf */
.feld-honigtopf{
	position:absolute !important;
	left:-9999px; top:auto;
	width:1px; height:1px; overflow:hidden;
}

/* =============================================================
   Rechtstexte — Impressum, Datenschutz, AGB
   ============================================================= */
.rechtstext .wrap{max-width:860px;}

/* ---------- Kopf ---------- */
.rechtstext-kopf{
	padding-bottom:clamp(24px, 3vw, 36px);
	margin-bottom:clamp(28px, 3.5vw, 44px);
	border-bottom:0.5px solid var(--line);
}
.rechtstext-kopf .kicker{
	display:block; font-family:'IBM Plex Mono', monospace;
	font-size:13px; color:var(--teal-deep); margin-bottom:12px;
}
.rechtstext-kopf h1{
	font-size:var(--step-h2);
	max-width:24ch;
}

/* ---------- Sprungmarken ---------- */
.rechtstext-toc{
	background:var(--surface);
	border:0.5px solid var(--line);
	border-radius:14px;
	padding:clamp(20px, 2.5vw, 28px);
	margin-bottom:clamp(32px, 4vw, 52px);
}
.rechtstext-toc-titel{
	display:block; font-family:'IBM Plex Mono', monospace;
	font-size:12px; letter-spacing:0.04em; text-transform:uppercase;
	color:var(--text-mute); margin-bottom:14px;
}
.rechtstext-toc ul{
	list-style:none; padding:0; margin:0;
	display:flex; flex-wrap:wrap; gap:8px;
}
.rechtstext-toc li{margin:0;}
.rechtstext-toc a{
	display:inline-block;
	background:var(--bg-alt); border:0.5px solid var(--line);
	border-radius:20px; padding:7px 14px;
	font-size:13.5px; color:var(--text-soft);
	text-decoration:none; transition:background .15s, color .15s, border-color .15s;
}
.rechtstext-toc a:hover{
	background:var(--teal-tint); color:var(--teal-deep); border-color:var(--teal);
}
.rechtstext-toc a:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}

/* ---------- Textkörper ---------- */
.rechtstext-inhalt{max-width:68ch;}

.rechtstext-inhalt h2{
	font-size:clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
	margin-top:clamp(40px, 4.5vw, 60px);
	padding-top:clamp(28px, 3vw, 36px);
	border-top:0.5px solid var(--line);
	/* Anker nicht unter der stickenden Navigation verstecken */
	scroll-margin-top:96px;
}
.rechtstext-inhalt h2:first-child{
	margin-top:0; padding-top:0; border-top:none;
}

/* Automatische Nummerierung: Abschnitte umsortieren ohne Neunummerieren */
.rechtstext-inhalt.ist-numeriert{counter-reset:abschnitt;}
.rechtstext-inhalt.ist-numeriert h2{
	counter-increment:abschnitt;
	display:flex; align-items:baseline; gap:14px;
}
.rechtstext-inhalt.ist-numeriert h2::before{
	content:counter(abschnitt, decimal-leading-zero);
	flex-shrink:0;
	font-family:'IBM Plex Mono', monospace;
	font-size:0.7em; font-weight:500;
	color:var(--pop);
}

.rechtstext-inhalt h3{
	font-size:var(--step-h3);
	margin-top:2em;
	scroll-margin-top:96px;
}

.rechtstext-inhalt p,
.rechtstext-inhalt li{color:var(--text-soft);}

.rechtstext-inhalt a{
	color:var(--teal-deep); text-decoration:underline; text-underline-offset:2px;
}
.rechtstext-inhalt a:hover{color:var(--teal);}

/* Blockadressen: die Anbieterangaben ohne Absatzabstände */
.rechtstext-inhalt .adresse{
	background:var(--surface);
	border:0.5px solid var(--line);
	border-left:3px solid var(--teal);
	border-radius:0 12px 12px 0;
	padding:20px 24px;
	font-style:normal; line-height:1.7;
	color:var(--text);
}

/* Aufzählungen mit Marken-Akzent statt Standardpunkt */
.rechtstext-inhalt ul:not(.rechtstext-toc ul){list-style:none; padding-left:0;}
.rechtstext-inhalt ul:not(.rechtstext-toc ul) > li{
	position:relative; padding-left:22px;
}
.rechtstext-inhalt ul:not(.rechtstext-toc ul) > li::before{
	content:''; position:absolute; left:4px; top:0.65em;
	width:7px; height:7px; border-radius:2px;
	background:var(--teal); opacity:0.55;
}

/* Hervorgehobener Kernsatz */
.rechtstext-inhalt .hinweis{
	background:var(--teal-tint);
	border-radius:12px;
	padding:18px 22px;
	color:var(--teal-deep);
}

/* Stand-Angabe */
.rechtstext-inhalt .rechtstext-stand{
	margin-top:clamp(40px, 5vw, 64px);
	padding-top:22px;
	border-top:0.5px solid var(--line);
	font-family:'IBM Plex Mono', monospace;
	font-size:13px; color:var(--text-mute);
}

/* =============================================================
   Unterseiten: Leistungen, Preise, Referenzen
   ============================================================= */

.seiten-breit{max-width:none;}
.seiten-cta{padding-top:0;}
.seiten-cta .final-cta{margin-top:clamp(20px, 3vw, 40px);}

.seiten-notiz{
	background:var(--pop-tint); border:0.5px solid var(--pop);
	border-radius:12px; padding:16px 20px;
	font-size:0.9rem; color:var(--text);
}

/* ---------- Brotkrumen ---------- */
.brotkrumen{
	display:flex; gap:10px; align-items:center; flex-wrap:wrap;
	margin-bottom:22px;
	font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--text-mute);
}
.brotkrumen a{color:var(--teal-deep); text-decoration:none;}
.brotkrumen a:hover{text-decoration:underline;}
.brotkrumen a:focus-visible{outline:2px solid var(--teal); outline-offset:2px; border-radius:3px;}

/* ---------- Leistungskarten als Links ---------- */
.leistung-karte{
	display:flex; flex-direction:column; gap:0;
	text-decoration:none; color:inherit;
	transition:border-color .15s, transform .15s, box-shadow .15s;
}
.leistung-karte:hover{
	border-color:var(--teal);
	transform:translateY(-2px);
	box-shadow:0 4px 14px rgba(31,36,32,0.07);
}
.leistung-karte:focus-visible{outline:2px solid var(--teal); outline-offset:3px;}
.leistung-karte h3{margin-bottom:10px;}
.leistung-karte p{flex:1;}
.leistung-karte-mehr{
	margin-top:18px;
	font-family:'IBM Plex Mono', monospace; font-size:12px;
	color:var(--teal-deep);
}

@media (prefers-reduced-motion:reduce){
	.leistung-karte:hover{transform:none;}
}

/* ---------- Quernavigation ---------- */
.geschwister{
	margin-top:clamp(44px, 5vw, 68px);
	padding-top:28px;
	border-top:0.5px solid var(--line);
}
.geschwister-titel{
	display:block;
	font-family:'IBM Plex Mono', monospace; font-size:12px;
	letter-spacing:0.05em; text-transform:uppercase;
	color:var(--text-mute); margin-bottom:14px;
}
.geschwister ul{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px;}
.geschwister li{margin:0;}
.geschwister a{
	display:inline-block;
	background:var(--surface); border:0.5px solid var(--line);
	border-radius:24px; padding:10px 18px;
	font-size:14px; color:var(--text-soft); text-decoration:none;
	transition:background .15s, color .15s, border-color .15s;
}
.geschwister a:hover{background:var(--teal-tint); color:var(--teal-deep); border-color:var(--teal);}
.geschwister a:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}

/* ---------- Preise ---------- */
.preis-raster{
	display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
	gap:clamp(16px, 2vw, 24px);
	margin-block:clamp(28px, 3.5vw, 44px);
}

.preis-karte{
	display:flex; flex-direction:column;
	background:var(--surface); border:0.5px solid var(--line);
	border-radius:16px; padding:clamp(22px, 2.6vw, 30px);
}
.preis-karte.ist-empfohlen{
	border-color:var(--teal); border-width:1px;
	box-shadow:0 2px 16px rgba(15,110,86,0.09);
}

.preis-marke{
	align-self:flex-start;
	font-family:'IBM Plex Mono', monospace; font-size:11px;
	letter-spacing:0.04em; text-transform:uppercase;
	background:var(--teal); color:var(--teal-tint);
	padding:5px 11px; border-radius:12px; margin-bottom:16px;
}

.preis-karte h3{
	font-size:var(--step-h3); margin-bottom:6px; margin-top:0;
	font-family:'Space Grotesk', sans-serif;
}
.preis-fuer{font-size:0.875rem; color:var(--text-mute); margin-bottom:20px;}

.preis-wert{
	display:flex; align-items:baseline; gap:8px;
	padding-bottom:20px; margin-bottom:20px;
	border-bottom:0.5px solid var(--line);
}
.preis-ab{
	font-family:'IBM Plex Mono', monospace; font-size:12px;
	color:var(--text-mute); text-transform:uppercase; letter-spacing:0.04em;
}
.preis-zahl{
	font-family:'Space Grotesk', sans-serif; font-weight:600;
	font-size:clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
	color:var(--text); line-height:1;
}
.preis-karte.ist-empfohlen .preis-zahl{color:var(--teal-deep);}

.preis-liste{list-style:none; padding:0; margin:0 0 24px; flex:1;}
.preis-liste li{
	position:relative; padding-left:24px; padding-block:6px;
	font-size:0.925rem; color:var(--text-soft);
}
.preis-liste li + li{margin-top:0;}
.preis-liste li::before{
	content:''; position:absolute; left:3px; top:0.95em;
	width:9px; height:5px;
	border-left:2px solid var(--teal); border-bottom:2px solid var(--teal);
	transform:rotate(-45deg);
}

.preis-karte .btn-primary,
.preis-karte .btn-ghost{text-align:center;}

.preis-fuss{
	margin-top:8px; padding-top:22px;
	border-top:0.5px solid var(--line);
	font-size:13px; color:var(--text-mute); max-width:72ch;
}

/* ---------- Referenzen ---------- */
.fall-liste{display:flex; flex-direction:column; gap:clamp(20px, 2.5vw, 32px); margin-block:clamp(28px, 3.5vw, 44px);}

.fall{
	background:var(--surface); border:0.5px solid var(--line);
	border-radius:16px; padding:clamp(22px, 3vw, 34px);
}

.fall-meta{
	display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;
}
.fall-meta span{
	font-family:'IBM Plex Mono', monospace; font-size:11px;
	background:var(--bg-alt); border:0.5px solid var(--line);
	border-radius:12px; padding:5px 11px; color:var(--text-soft);
}

.fall h3{margin-top:0; margin-bottom:16px; font-size:var(--step-h3);}

.fall-block{margin-bottom:18px;}
.fall-block strong{
	display:block;
	font-family:'IBM Plex Mono', monospace; font-weight:400;
	font-size:11px; letter-spacing:0.05em; text-transform:uppercase;
	color:var(--text-mute); margin-bottom:6px;
}
.fall-block p{font-size:0.95rem; color:var(--text-soft); margin:0;}

.fall-zahlen{
	display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
	gap:12px; margin-block:24px;
}
.fall-zahl{
	background:var(--teal-tint); border-radius:12px; padding:16px 18px;
}
.fall-zahl b{
	display:block;
	font-family:'Space Grotesk', sans-serif; font-weight:600;
	font-size:clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
	color:var(--teal-deep); line-height:1.1;
	font-variant-numeric:tabular-nums;
}
.fall-zahl span{
	display:block; margin-top:5px;
	font-size:12px; color:var(--teal-deep); opacity:0.8;
}

.fall-zitat{
	margin:0; padding:18px 22px;
	background:var(--bg-alt); border-left:3px solid var(--teal);
	border-radius:0 12px 12px 0;
}
.fall-zitat p{font-size:0.95rem; color:var(--text); font-style:italic; margin:0;}
/* Hervorgehobener Kernsatz — auch ausserhalb der Rechtstexte nutzbar */
.entry-content .hinweis{
	background:var(--teal-tint);
	border-radius:12px;
	padding:18px 22px;
	color:var(--teal-deep);
	max-width:74ch;
}
.entry-content .hinweis strong{color:var(--teal-deep);}

.fall-zitat footer{
	margin-top:10px;
	font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--text-mute);
	font-style:normal;
}

/* =============================================================
   Zusammengesetzte Bausteine im Editor-Inhalt
   .entry-content bringt Prosa-Regeln mit (Abstände, Einzüge,
   Textfarbe). Sie stehen später in dieser Datei und gewinnen
   damit gegen die Komponentenstile. Hier zurückgenommen.
   ============================================================= */

/* Überschriften in Karten und Schritten brauchen keinen Prosa-Abstand */
.entry-content .steps h3,
.entry-content .diff-col h3,
.entry-content .fall h3,
.entry-content .preis-karte h3{margin-top:0;}

/* Listen in Komponenten sind keine Prosa-Listen */
.entry-content .diff-col ul,
.entry-content .preis-liste,
.entry-content .fall-zahlen{padding-left:0;}

.entry-content .diff-col li + li,
.entry-content .preis-liste li + li{margin-top:0;}

/* Textfarbe: auf dunkelgrünem Grund muss der helle Ton gewinnen */
.entry-content .diff-col.yes h3,
.entry-content .diff-col.yes li{color:var(--teal-tint);}
.entry-content .diff-col.no li{color:var(--text-soft);}
.entry-content .diff-col.no h3{color:var(--text-mute);}

.entry-content .fall-zahl span{color:var(--teal-deep);}

/* Unterstreichung von Prosa-Links in Komponenten zurücknehmen */
.entry-content .preis-karte .btn-primary,
.entry-content .preis-karte .btn-ghost,
.entry-content .fall .btn-primary{text-decoration:none;}

/* Tabellen in Leistungsseiten: Kopfzeile abgesetzt */
.entry-content thead th{
	background:var(--bg-alt);
	font-family:'IBM Plex Mono', monospace;
	font-size:12px; letter-spacing:0.03em; text-transform:uppercase;
	color:var(--text-soft);
}

/* Verweis auf die Leistungsübersicht unter dem Kartenraster */
.leistungen-alle{margin-top:clamp(22px, 2.5vw, 32px);}
.leistungen-alle a{
	font-family:'IBM Plex Mono', monospace; font-size:13px;
	color:var(--teal-deep); text-decoration:none;
	border-bottom:1px solid rgba(8,80,65,0.3); padding-bottom:2px;
}
.leistungen-alle a:hover{border-bottom-color:var(--teal);}
.leistungen-alle a:focus-visible{outline:2px solid var(--teal); outline-offset:3px;}

/* Chips, die auf eine Branchenseite führen */
a.chip{text-decoration:none; color:var(--text); transition:background .15s, border-color .15s, color .15s;}
a.chip.ist-verlinkt{border-color:var(--line-strong);}
a.chip:hover{background:var(--teal-tint); border-color:var(--teal); color:var(--teal-deep);}
a.chip:focus-visible{outline:2px solid var(--teal); outline-offset:3px;}

/* =============================================================
   Landingpage-Bausteine (Branchenseiten)
   ============================================================= */

/* Einstiegsszenario — die Situation des Lesers, vor jedem Argument */
.entry-content .szenario{
	border-left:3px solid var(--teal);
	background:var(--surface);
	border-radius:0 12px 12px 0;
	padding:20px 24px;
	margin-block:clamp(20px, 2.5vw, 28px);
	max-width:none;
}
.entry-content .szenario p{margin:0;}
.entry-content .szenario p + p{margin-top:0.9em;}

/* Handlungsaufforderung mitten im Text */
.entry-content .inline-cta{
	background:var(--teal-deep);
	border-radius:16px;
	padding:clamp(24px, 3vw, 34px);
	margin-block:clamp(32px, 4vw, 48px);
	max-width:none;
}
.entry-content .inline-cta h3{
	margin:0 0 10px;
	font-family:'Space Grotesk', sans-serif;
	font-size:var(--step-h3);
	color:var(--teal-tint);
}
.entry-content .inline-cta p{
	color:var(--teal-tint); opacity:0.88;
	margin:0 0 20px; max-width:56ch;
}
.entry-content .inline-cta .btn-primary{
	background:var(--teal-tint); color:var(--teal-deep);
	text-decoration:none;
}
.entry-content .inline-cta .btn-primary:hover{background:#fff;}
.entry-content .inline-cta .btn-primary:focus-visible{
	outline:2px solid var(--teal-tint); outline-offset:3px;
}
.entry-content .inline-cta .cta-klein{
	display:block; margin-top:14px; margin-bottom:0;
	font-family:'IBM Plex Mono', monospace; font-size:12px;
	color:var(--teal-tint); opacity:0.7;
}

/* Einwände: Aussage des Lesers, darunter die Antwort */
.entry-content .einwaende{
	display:flex; flex-direction:column;
	gap:14px;
	margin-block:clamp(22px, 3vw, 32px);
	max-width:none;
}
.entry-content .einwand{
	background:var(--surface);
	border:0.5px solid var(--line);
	border-radius:14px;
	padding:20px 24px;
}
.entry-content .einwand > strong{
	display:block; margin-bottom:10px;
	font-family:'Space Grotesk', sans-serif; font-weight:600;
	font-size:1rem; color:var(--text);
}
.entry-content .einwand > strong::before{
	content:'„'; color:var(--teal); margin-right:1px;
}
.entry-content .einwand > strong::after{
	content:'"'; color:var(--teal);
}
.entry-content .einwand p{margin:0; font-size:0.95rem;}
.entry-content .einwand p + p{margin-top:0.8em;}

/* Kennzahlenreihe außerhalb einer Fallkarte */
.entry-content > .fall-zahlen{max-width:none;}

/* =============================================================
   Zweispaltiges Layout für Leistungs- und Branchenseiten
   Links der Inhalt, rechts eine mitlaufende Angebotskarte.
   Ohne sie stünde bei 1200 px Containerbreite rund ein Drittel
   der Fläche leer, weil Prosa bei etwa 70 Zeichen lesbar bleibt.
   ============================================================= */

.seiten-layout{
	display:grid;
	grid-template-columns:minmax(0, 1fr) 320px;
	gap:clamp(32px, 4vw, 64px);
	align-items:start;
}

/* Die Textspalte darf hier die volle Breite nutzen — die Begrenzung
   übernimmt jetzt das Raster. */
.seiten-layout .entry-content{max-width:none;}

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

/* ---------- Angebotskarte ---------- */
.seiten-seitenleiste{
	position:sticky; top:104px;
	min-width:0;
}

@media (max-width:980px){
	.seiten-seitenleiste{position:static; top:auto;}
}

.sl-karte{
	background:var(--surface);
	border:0.5px solid var(--line);
	border-top:3px solid var(--teal);
	border-radius:4px 4px 16px 16px;
	padding:clamp(22px, 2.4vw, 28px);
}

.sl-kicker{
	display:block;
	font-family:'IBM Plex Mono', monospace;
	font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
	color:var(--teal-deep); margin-bottom:12px;
}

.sl-titel{
	font-family:'Space Grotesk', sans-serif; font-weight:600;
	font-size:1.0625rem; line-height:1.3;
	color:var(--text); margin:0 0 12px;
}

.sl-text{
	font-size:0.875rem; line-height:1.6;
	color:var(--text-soft); margin:0 0 20px;
}

.sl-button{
	display:block; width:100%; text-align:center;
	padding:14px 18px; font-size:14.5px;
	text-decoration:none;
}

.sl-fakten{
	list-style:none; padding:0;
	margin:22px 0 0;
	border-top:0.5px solid var(--line);
	padding-top:18px;
}
.sl-fakten li{
	position:relative; padding-left:22px;
	font-size:13px; line-height:1.5; color:var(--text-soft);
}
.sl-fakten li + li{margin-top:9px;}
.sl-fakten li::before{
	content:''; position:absolute; left:2px; top:0.42em;
	width:8px; height:5px;
	border-left:2px solid var(--teal); border-bottom:2px solid var(--teal);
	transform:rotate(-45deg);
}

.sl-preis{
	display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
	margin:20px 0 0; padding-top:18px;
	border-top:0.5px solid var(--line);
}
.sl-preis span{
	font-family:'IBM Plex Mono', monospace;
	font-size:11px; letter-spacing:0.05em; text-transform:uppercase;
	color:var(--text-mute);
}
.sl-preis strong{
	font-family:'Space Grotesk', sans-serif; font-weight:600;
	font-size:1.375rem; color:var(--teal-deep); line-height:1;
}
.sl-preis a{
	flex-basis:100%;
	font-family:'IBM Plex Mono', monospace; font-size:12px;
	color:var(--teal-deep); text-decoration:none;
	border-bottom:1px solid rgba(8,80,65,0.3); padding-bottom:1px;
	align-self:flex-start; width:fit-content;
}
.sl-preis a:hover{border-bottom-color:var(--teal);}
.sl-preis a:focus-visible{outline:2px solid var(--teal); outline-offset:3px;}

/* Sehr lange Inhalte: die Karte darf mitlaufen, aber nie höher als
   der Bildschirm werden. */
@media (min-width:981px){
	.seiten-seitenleiste{max-height:calc(100vh - 128px); overflow-y:auto;}
}

/* -------------------------------------------------------------
   Slogan im Abschnitt "Suche verändert sich"
   Liegt unter den Suchanfragen und liest sich als Antwort darauf.
   Die Markierung greift die Idee aus der Navigation auf: ein
   kurzer türkiser Balken, der auf der Trennlinie sitzt.
   ------------------------------------------------------------- */
.problem-antwort{min-width:0;}

.problem-slogan{
	position:relative;
	margin:clamp(26px, 3.5vw, 40px) 0 0;
	padding-top:clamp(22px, 2.6vw, 30px);
	border-top:0.5px solid var(--line);

	font-family:'Space Grotesk', sans-serif;
	font-weight:600;
	font-size:clamp(1.0625rem, 0.98rem + 0.55vw, 1.375rem);
	line-height:1.35;
	letter-spacing:-0.01em;
	color:var(--text);
	max-width:32ch;
	text-wrap:balance;
}

/* Der Balken sitzt mittig auf der 0,5px-Linie. */
.problem-slogan::before{
	content:'';
	position:absolute;
	top:-1px;
	left:0;
	width:36px;
	height:2px;
	border-radius:2px;
	background:var(--teal);
}

.problem-slogan strong{
	font-weight:600;
	color:var(--teal-deep);
}

.problem-slogan em{
	font-style:normal;
	color:var(--teal-deep);
}

/* Einspaltig wird die Spalte breit — Zeilenlänge begrenzt halten. */
@media (max-width:880px){
	.problem-slogan{max-width:34ch;}
}

@media (max-width:480px){
	.problem-slogan{
		max-width:none;
		padding-top:20px;
	}
	.problem-slogan::before{width:30px;}
}

/* =============================================================
   Korrekturen
   ============================================================= */

/* Schaltflächen im Editor-Inhalt: .entry-content a setzt eine dunkle
   Schriftfarbe, die auf dem türkisen Grund der Schaltfläche fast
   unsichtbar ist. Hier explizit zurückgeholt. */
.entry-content .btn-primary{
	color:var(--teal-tint);
	text-decoration:none;
}
.entry-content .btn-primary:hover{color:#fff;}

.entry-content .btn-ghost{
	color:var(--text);
	text-decoration:none;
}

/* Ausnahme: im dunklen Inline-CTA ist die Schaltfläche hell mit
   dunkler Schrift — das bleibt so. */
.entry-content .inline-cta .btn-primary{
	color:var(--teal-deep);
}
.entry-content .inline-cta .btn-primary:hover{color:var(--teal-deep);}

/* Abstand zwischen Kopfleiste und erstem Inhalt halbieren */
main > section:first-child{padding-top:calc(var(--section-y) / 2);}
main > section:first-child.hero{padding-top:clamp(24px, 3.5vw, 46px);}

/* Wortmarke innerhalb von Inhalten, etwa in der Vergleichstabelle */
.logo-inline{
	display:inline-flex; align-items:center; gap:9px;
	font-family:'Space Grotesk', sans-serif; font-weight:600;
	line-height:1;
}
.logo-inline .mark{width:22px; height:22px; display:block; flex-shrink:0;}
.diff-col.yes .logo-inline{color:var(--teal-tint);}

/* =============================================================
   Zahlen-Sektion: Modellrechnung auf der Startseite
   ============================================================= */
.zahlen{background:var(--bg-alt);}

.zahlen-raster{
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:clamp(14px, 1.8vw, 20px);
	margin-bottom:clamp(28px, 3.5vw, 44px);
}
@media (max-width:880px){
	.zahlen-raster{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:480px){
	.zahlen-raster{grid-template-columns:1fr;}
}

.zahl{
	background:var(--surface);
	border:0.5px solid var(--line);
	border-radius:14px;
	padding:clamp(20px, 2.4vw, 26px);
	display:flex; flex-direction:column; gap:10px;
}
.zahl b{
	font-family:'Space Grotesk', sans-serif; font-weight:600;
	font-size:clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
	line-height:1;
	color:var(--teal-deep);
	font-variant-numeric:tabular-nums;
	letter-spacing:-0.02em;
}
.zahl span{font-size:0.875rem; line-height:1.5; color:var(--text-soft);}

.zahl.ist-hervorgehoben{
	background:var(--teal-deep);
	border-color:var(--teal-deep);
}
.zahl.ist-hervorgehoben b{color:var(--teal-tint);}
.zahl.ist-hervorgehoben span{color:var(--teal-tint); opacity:0.85;}

/* Offenlegung der Annahmen */
.zahlen-rechnung{
	background:var(--surface);
	border:0.5px solid var(--line);
	border-left:3px solid var(--teal);
	border-radius:0 14px 14px 0;
	padding:clamp(22px, 2.6vw, 30px);
	max-width:78ch;
}
.zahlen-rechnung h3{
	font-family:'IBM Plex Mono', monospace; font-weight:400;
	font-size:12px; letter-spacing:0.05em; text-transform:uppercase;
	color:var(--text-mute); margin:0 0 16px;
}
.zahlen-rechnung ul{list-style:none; padding:0; margin:0;}
.zahlen-rechnung li{
	position:relative; padding-left:22px;
	font-size:0.925rem; line-height:1.6; color:var(--text-soft);
}
.zahlen-rechnung li + li{margin-top:10px;}
.zahlen-rechnung li::before{
	content:''; position:absolute; left:3px; top:0.65em;
	width:7px; height:7px; border-radius:2px;
	background:var(--teal); opacity:0.55;
}
.zahlen-fussnote{
	margin:20px 0 0; padding-top:18px;
	border-top:0.5px solid var(--line);
	font-size:13px; line-height:1.6; color:var(--text-mute);
}

/* =============================================================
   Rentabilitätsrechner (Kurzbefehl [rechner])
   ============================================================= */
.roi{
	background:var(--surface);
	border:0.5px solid var(--line);
	border-radius:18px;
	padding:clamp(22px, 3vw, 34px);
	margin-block:clamp(28px, 3.5vw, 44px);
	max-width:none;
}

.roi-frage{
	margin:0 0 clamp(22px, 2.6vw, 30px);
	font-family:'Space Grotesk', sans-serif; font-weight:600;
	font-size:clamp(1rem, 0.96rem + 0.3vw, 1.125rem);
	color:var(--text);
}

.roi-regler{
	display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:clamp(20px, 2.6vw, 32px);
}
@media (max-width:760px){
	.roi-regler{grid-template-columns:1fr;}
}

/* Ergebnis */
.roi-ergebnis{
	display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:14px;
	margin-top:clamp(26px, 3.2vw, 38px);
}
@media (max-width:700px){
	.roi-ergebnis{grid-template-columns:1fr;}
}

.roi-karte{
	background:var(--bg); border:0.5px solid var(--line);
	border-radius:14px; padding:20px;
	display:flex; flex-direction:column; gap:3px;
}
.roi-karte.ist-ergebnis{background:var(--teal-deep); border-color:var(--teal-deep);}

.roi-label{
	font-family:'IBM Plex Mono', monospace; font-size:11px;
	letter-spacing:0.05em; text-transform:uppercase; color:var(--text-mute);
}
.roi-karte.ist-ergebnis .roi-label{color:var(--teal-tint); opacity:0.75;}

.roi-karte strong{
	font-family:'Space Grotesk', sans-serif; font-weight:600;
	font-size:clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
	line-height:1.1; color:var(--text);
	font-variant-numeric:tabular-nums;
	letter-spacing:-0.02em;
}
.roi-karte.ist-ergebnis strong{color:var(--teal-tint);}

.roi-einheit{font-size:13px; color:var(--text-soft);}
.roi-karte.ist-ergebnis .roi-einheit{color:var(--teal-tint); opacity:0.8;}

.roi-erklaerung{
	margin:clamp(24px, 3vw, 32px) 0 0; padding-top:20px;
	border-top:0.5px solid var(--line);
	font-size:0.9rem; line-height:1.6; color:var(--text-soft);
	max-width:78ch;
}

.roi-hinweis{
	margin:14px 0 0;
	font-size:13px; line-height:1.6; color:var(--text-mute);
	max-width:78ch;
}

/* Schieberegler, barrierefrei und ohne Fremdabhängigkeiten */
.regler label{
	display:flex; flex-direction:column; gap:8px;
	font-size:0.9rem; line-height:1.45; color:var(--text-soft);
	margin-bottom:12px;
}
.regler output{
	font-family:'Space Grotesk', sans-serif; font-weight:600;
	font-size:1.25rem; color:var(--teal-deep);
	font-variant-numeric:tabular-nums;
}

.regler input[type="range"]{
	-webkit-appearance:none; appearance:none;
	width:100%; height:24px; background:transparent;
	cursor:pointer; display:block; margin:0;
}

/* Schiene */
.regler input[type="range"]::-webkit-slider-runnable-track{
	height:4px; border-radius:2px; background:var(--line-strong);
}
.regler input[type="range"]::-moz-range-track{
	height:4px; border-radius:2px; background:var(--line-strong);
}

/* Griff — mindestens 24px für Bedienung mit dem Finger */
.regler input[type="range"]::-webkit-slider-thumb{
	-webkit-appearance:none; appearance:none;
	width:24px; height:24px; margin-top:-10px;
	border-radius:50%; background:var(--teal);
	border:3px solid var(--surface);
	box-shadow:0 1px 4px rgba(8,80,65,0.35);
}
.regler input[type="range"]::-moz-range-thumb{
	width:24px; height:24px;
	border-radius:50%; background:var(--teal);
	border:3px solid var(--surface);
	box-shadow:0 1px 4px rgba(8,80,65,0.35);
}

.regler input[type="range"]:focus-visible{outline:none;}
.regler input[type="range"]:focus-visible::-webkit-slider-thumb{
	outline:2px solid var(--teal); outline-offset:2px;
}
.regler input[type="range"]:focus-visible::-moz-range-thumb{
	outline:2px solid var(--teal); outline-offset:2px;
}

/* =============================================================
   Bestätigung nach dem Absenden des Formulars
   Ersetzt das Formular vollständig, damit niemand doppelt sendet.
   ============================================================= */
.form-bestaetigung{
	background:var(--teal-tint);
	border:0.5px solid rgba(15,110,86,0.22);
	border-radius:18px;
	padding:clamp(26px, 3.4vw, 40px);
	scroll-margin-top:96px;
}
.form-bestaetigung:focus{outline:none;}
.form-bestaetigung:focus-visible{
	outline:2px solid var(--teal);
	outline-offset:3px;
}

.form-bestaetigung-haken{
	display:flex; align-items:center; justify-content:center;
	width:44px; height:44px; margin-bottom:18px;
	border-radius:50%;
	background:var(--teal);
	color:var(--teal-tint);
}
.form-bestaetigung-haken svg{width:24px; height:24px; display:block;}

.form-bestaetigung h3{
	margin:0 0 10px;
	font-family:'Space Grotesk', sans-serif; font-weight:600;
	font-size:clamp(1.1875rem, 1.1rem + 0.5vw, 1.5rem);
	line-height:1.25; letter-spacing:-0.015em;
	color:var(--teal-deep);
}

.form-bestaetigung p{
	margin:0;
	font-size:1rem; line-height:1.6;
	color:var(--teal-deep);
}

.form-bestaetigung-klein{
	margin-top:18px !important;
	padding-top:16px;
	border-top:0.5px solid rgba(15,110,86,0.2);
	font-size:0.875rem !important;
	line-height:1.6;
	opacity:0.85;
}
.form-bestaetigung-klein a{
	color:var(--teal-deep);
	text-decoration:underline;
	text-decoration-thickness:1px;
	text-underline-offset:2px;
}

/* Fehlermeldungen springen ebenfalls an die richtige Stelle */
.form-hinweis{scroll-margin-top:96px;}
.form-hinweis:focus{outline:none;}

/* =============================================================
   Eigentum statt Miete
   ============================================================= */
.eigentum{background:var(--bg-alt);}

.eigentum-paar{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:clamp(16px, 2vw, 24px);
	margin-bottom:clamp(28px, 3.5vw, 44px);
}
@media (max-width:760px){
	.eigentum-paar{grid-template-columns:1fr;}
}

.eigentum-karte{
	background:var(--surface);
	border:0.5px solid var(--line);
	border-radius:16px;
	padding:clamp(22px, 2.8vw, 30px);
	display:flex; flex-direction:column;
}

.eigentum-typ{
	font-family:'IBM Plex Mono', monospace; font-size:11px;
	letter-spacing:0.06em; text-transform:uppercase;
	color:var(--text-mute); margin-bottom:12px;
}

.eigentum-karte h3{
	margin:0 0 12px;
	font-family:'Space Grotesk', sans-serif; font-weight:600;
	font-size:clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	line-height:1.3; letter-spacing:-0.01em;
	color:var(--text);
}

.eigentum-karte > p{
	margin:0;
	font-size:0.9375rem; line-height:1.6;
	color:var(--text-soft);
}

.eigentum-folge{
	margin-top:auto !important;
	padding-top:18px;
	border-top:0.5px solid var(--line);
	font-size:0.875rem !important;
}
.eigentum-folge strong{display:block; color:var(--text); margin-bottom:4px;}

/* Die bessere Variante deutlich, aber nicht schreiend hervorheben */
.eigentum-karte.ist-besser{
	background:var(--teal-tint);
	border-color:rgba(15,110,86,0.22);
}
.eigentum-karte.ist-besser .eigentum-typ{color:var(--teal); opacity:0.9;}
.eigentum-karte.ist-besser h3,
.eigentum-karte.ist-besser .eigentum-folge strong{color:var(--teal-deep);}
.eigentum-karte.ist-besser > p{color:var(--teal-deep); opacity:0.9;}
.eigentum-karte.ist-besser .eigentum-folge{border-top-color:rgba(15,110,86,0.2);}

/* Folgerungen */
.eigentum-punkte{
	background:var(--surface);
	border:0.5px solid var(--line);
	border-left:3px solid var(--teal);
	border-radius:0 16px 16px 0;
	padding:clamp(22px, 2.8vw, 32px);
	max-width:80ch;
}
.eigentum-punkte h3{
	font-family:'IBM Plex Mono', monospace; font-weight:400;
	font-size:12px; letter-spacing:0.05em; text-transform:uppercase;
	color:var(--text-mute); margin:0 0 18px;
}
.eigentum-punkte ul{list-style:none; padding:0; margin:0;}
.eigentum-punkte li{
	position:relative; padding-left:22px;
	font-size:0.9375rem; line-height:1.6; color:var(--text-soft);
}
.eigentum-punkte li + li{margin-top:14px;}
.eigentum-punkte li::before{
	content:''; position:absolute; left:3px; top:0.62em;
	width:7px; height:7px; border-radius:2px; background:var(--teal);
}
.eigentum-punkte li strong{color:var(--text);}
.eigentum-fussnote{
	margin:22px 0 0; padding-top:18px;
	border-top:0.5px solid var(--line);
	font-size:13px; line-height:1.6; color:var(--text-mute);
}

/* =============================================================
   USP-Raster
   ============================================================= */
.usp-raster{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:clamp(16px, 2vw, 26px);
}
@media (max-width:900px){
	.usp-raster{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:560px){
	.usp-raster{grid-template-columns:1fr;}
}

.usp-punkt{
	padding-top:20px;
	border-top:2px solid var(--teal);
}
.usp-punkt h3{
	margin:0 0 8px;
	font-family:'Space Grotesk', sans-serif; font-weight:600;
	font-size:1.0625rem; line-height:1.3; letter-spacing:-0.01em;
	color:var(--text);
}
.usp-punkt p{
	margin:0;
	font-size:0.9375rem; line-height:1.6;
	color:var(--text-soft);
}

/* Kürzung: Fußnote der Eigentum-Sektion steht jetzt frei, nicht im Kasten */
.eigentum > .wrap > .eigentum-fussnote{
	margin:clamp(20px, 2.4vw, 28px) 0 0;
	padding-top:0;
	border-top:none;
	max-width:70ch;
}
/* Ohne den Mittelabsatz sitzt die Folge-Zeile direkt unter der Überschrift */
.eigentum-karte h3 + .eigentum-folge{
	margin-top:0 !important;
	padding-top:16px;
}

/* =============================================================
   FAQ — eingeklappt, damit die Seiten kurz bleiben
   ============================================================= */
.faq{background:var(--bg-alt);}

.faq-titel{
	font-family:'Space Grotesk', sans-serif; font-weight:600;
	font-size:clamp(1.375rem, 1.2rem + 1vw, 1.875rem);
	line-height:1.2; letter-spacing:-0.02em;
	color:var(--text);
	margin:0 0 clamp(20px, 2.4vw, 28px);
}

.faq-liste{
	max-width:80ch;
	border-top:0.5px solid var(--line);
}

.faq-punkt{
	border-bottom:0.5px solid var(--line);
}

.faq-punkt summary{
	display:flex; align-items:flex-start; gap:14px;
	padding:clamp(15px, 1.8vw, 19px) 0;
	cursor:pointer;
	list-style:none;
	font-family:'Space Grotesk', sans-serif; font-weight:600;
	font-size:clamp(0.9875rem, 0.95rem + 0.25vw, 1.0625rem);
	line-height:1.4;
	color:var(--text);
	transition:color 0.15s ease;
	/* Fingerfreundliche Trefferfläche */
	min-height:44px;
}
.faq-punkt summary::-webkit-details-marker{display:none;}
.faq-punkt summary::marker{content:'';}
.faq-punkt summary:hover{color:var(--teal-deep);}

.faq-punkt summary:focus-visible{
	outline:2px solid var(--teal);
	outline-offset:3px;
	border-radius:4px;
}

/* Zeichen rechts: Plus wird zu Minus */
.faq-punkt summary::after{
	content:''; flex-shrink:0;
	width:14px; height:14px; margin-left:auto; margin-top:5px;
	background:
		linear-gradient(var(--teal), var(--teal)) center/14px 2px no-repeat,
		linear-gradient(var(--teal), var(--teal)) center/2px 14px no-repeat;
	transition:transform 0.2s ease;
}
.faq-punkt[open] summary::after{
	background:linear-gradient(var(--teal), var(--teal)) center/14px 2px no-repeat;
	transform:rotate(180deg);
}

.faq-antwort{
	padding:0 0 clamp(18px, 2.2vw, 24px);
	max-width:72ch;
}
.faq-antwort p{
	margin:0;
	font-size:0.9375rem; line-height:1.65;
	color:var(--text-soft);
}
.faq-antwort a{
	color:var(--teal-deep);
	text-decoration:underline;
	text-decoration-thickness:1px;
	text-underline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
	.faq-punkt summary,
	.faq-punkt summary::after{transition:none;}
}

/* Zweite FAQ-Gruppe: Zusammenarbeit */
.faq-untertitel{
	font-family:'IBM Plex Mono', monospace; font-weight:400;
	font-size:12px; letter-spacing:0.05em; text-transform:uppercase;
	color:var(--text-mute);
	margin:clamp(34px, 4vw, 48px) 0 14px;
}
.faq-untertitel + .faq-liste .faq-punkt summary{
	font-size:0.9375rem;
	padding-block:14px;
}