/* startsichtbar.de – öffentliche Website. Stil nach 00 Konzept/stil.txt: Kalkweiß, Tanne, Koralle, Sonne, Minze.
   Schriften: Fraunces 400–600 (Titel, ohne Kursive) und Figtree (Text), lokal über schriften.css.
   Farben nur über die Variablen aus tokens.css. Bewegung nur über Hover, und nur ohne „Bewegung reduzieren“. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 var(--gr-m)/1.62 var(--schrift-text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--pitaya-tief); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--tinte); }
h1, h2, h3 { font-family: var(--schrift-titel); font-weight: 600; color: var(--tinte); line-height: 1.12; letter-spacing: -0.012em; margin: 0; text-wrap: balance; }
h2 { font-size: var(--gr-xl); }
h3 { font-size: var(--gr-l); }
p { margin: 0 0 var(--a-4); }
em { font-style: normal; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--pitaya-tief); outline-offset: 3px; border-radius: 6px; }
.nur-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.honig { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sprung { position: absolute; left: -999px; top: var(--a-2); background: var(--tinte); color: #fff; padding: var(--a-2) var(--a-4); border-radius: var(--r-s); z-index: 60; text-decoration: none; }
.sprung:focus { left: var(--a-4); }
.symbol { display: inline-block; vertical-align: -0.2em; flex: none; }
.klein { font-size: var(--gr-s); color: var(--tinte-weich); }
.dachzeile { display: block; font-weight: 700; font-size: var(--gr-s); color: var(--pitaya-tief); letter-spacing: 0.01em; margin-bottom: var(--a-3); }
.vorspann { font-size: 1.2rem; color: var(--tinte-weich); max-width: 40em; margin: var(--a-4) 0 0; }
.titel-xl { font-size: var(--gr-xl); }
.titel-2xl { font-size: var(--gr-2xl); }
.titel-l { font-size: var(--gr-l); }

/* Gerüst */
.abschnitt { max-width: var(--breite); margin: 0 auto; padding: clamp(3.5rem, 7vw, 6rem) var(--rand); }
.abschnitt--schmal { max-width: 52rem; }
.abschnitt--weit { max-width: none; }
.abschnitt__kopf { max-width: 44em; margin-bottom: var(--a-7); }
.abschnitt__kopf h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); margin-bottom: var(--a-3); }
.band { background: var(--butter); }
.band--tief { background: var(--papier-tief); }
.band--tanne { background: var(--tinte); color: oklch(0.93 0.025 165); }
.band--tanne h2, .band--tanne h3 { color: #fff; }
.band--tanne .dachzeile { color: var(--butter); }
.band--tanne a { color: var(--butter); }
.band--tanne .klein { color: oklch(0.84 0.03 165); }
.band--tanne .kasten { background: var(--hell); color: var(--tinte); }
.band--tanne .kasten .klein, .band--tanne .kasten p { color: var(--tinte-weich); }
.band--tanne .kasten a { color: var(--pitaya-tief); }
.band--tanne .kasten h3 { color: var(--tinte); }
.raster { display: grid; gap: var(--a-5); grid-template-columns: 1fr; }
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .raster--2, .raster--3 { grid-template-columns: 1fr; } }

.kasten { background: var(--hell); border: 1px solid var(--linie); border-radius: var(--r-l); padding: var(--a-6); box-shadow: var(--schatten-s); min-width: 0; }
.kasten--betont { background: var(--butter); border-color: transparent; }
.kasten p:last-child { margin-bottom: 0; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; gap: var(--a-2); font: 700 1rem/1.2 var(--schrift-text); text-decoration: none; padding: 0.95rem 1.5rem; border-radius: var(--r-rund); border: 2px solid transparent; cursor: pointer; min-height: 48px; transition: transform .18s var(--weich), background-color .18s, color .18s, border-color .18s; }
.knopf:hover { transform: translateY(-2px); }
.knopf__pfeil { display: inline-flex; transition: transform .2s var(--weich); }
.knopf:hover .knopf__pfeil { transform: translateX(3px); }
.knopf--haupt { background: var(--pitaya); color: var(--tinte); }
.knopf--haupt:hover { background: oklch(0.76 0.16 36); color: var(--tinte); }
.knopf--tinte { background: var(--tinte); color: #fff; }
.knopf--tinte:hover { background: oklch(0.36 0.055 165); color: #fff; }
.knopf--rand { background: transparent; color: var(--tinte); border-color: var(--tinte); }
.knopf--rand:hover { background: var(--tinte); color: #fff; }
.knopf--hell { background: var(--hell); color: var(--tinte); }
.knopf--hell:hover { background: var(--butter); color: var(--tinte); }
.knopf--klein { min-height: 40px; padding: 0.6rem 1.05rem; font-size: 0.94rem; }
.knopf.ist-gesperrt, .knopf[aria-disabled="true"] { opacity: .65; cursor: progress; transform: none; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--a-3); align-items: center; margin: var(--a-5) 0 0; }
.textknopf { background: none; border: 0; padding: 0; font: inherit; color: var(--pitaya-tief); cursor: pointer; text-decoration: underline; }

.marke { display: inline-block; font: 700 .8rem/1 var(--schrift-text); padding: 0.35rem 0.7rem; border-radius: var(--r-rund); background: var(--papier-tief); color: var(--tinte); }
.marke--minze { background: var(--minze); color: var(--minze-tief); }
.marke--butter { background: var(--butter); color: var(--bernstein-tief); }
.marke--glut { background: var(--glut-hauch); color: var(--glut); }

/* Kopfzeile */
.kopf { position: sticky; top: 0; z-index: 30; background: var(--papier); transition: box-shadow .2s; }
.kopf.ist-gerollt { box-shadow: 0 1px 0 var(--linie), 0 8px 24px -16px oklch(0.27 0.05 165 / .35); }
.kopf__innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); height: 78px; display: flex; align-items: center; justify-content: space-between; gap: var(--a-5); }
.kopf__marke { text-decoration: none; color: var(--tinte); }
.kopf__nav ul { display: flex; gap: clamp(1rem, 2.4vw, 1.9rem); list-style: none; margin: 0; padding: 0; }
.kopf__nav a { text-decoration: none; font-weight: 600; color: var(--tinte); padding: 0.4rem 0; border-bottom: 2px solid transparent; }
.kopf__nav a:hover, .kopf__nav a[aria-current="page"] { color: var(--pitaya-tief); border-bottom-color: var(--pitaya); }
.kopf__rechts { display: flex; align-items: center; gap: var(--a-4); }
.kopf__login { text-decoration: none; font-weight: 600; color: var(--tinte); white-space: nowrap; }
.kopf__login:hover { color: var(--pitaya-tief); }
.kopf__menue { display: none; width: 48px; height: 48px; border: 0; background: var(--hell); border-radius: 50%; cursor: pointer; position: relative; }
.kopf__menue-strich { position: absolute; left: 14px; right: 14px; top: 23px; height: 2px; background: var(--tinte); box-shadow: 0 -7px 0 var(--tinte), 0 7px 0 var(--tinte); }
.handymenue { display: none; }
.handymenue:not([hidden]) { display: block; }
@media (max-width: 1000px) {
  .kopf__nav, .kopf__login { display: none; }
  .kopf__menue { display: block; }
  .handymenue { border-top: 1px solid var(--linie); padding: var(--a-4) var(--rand) var(--a-6); background: var(--papier); }
  .handymenue ul { list-style: none; margin: 0 0 var(--a-5); padding: 0; }
  .handymenue li a { display: block; padding: var(--a-3) 0; font-weight: 600; font-size: 1.1rem; color: var(--tinte); text-decoration: none; border-bottom: 1px solid var(--linie); }
}
@media (max-width: 560px) { .kopf__rechts > .knopf { display: none; } }

/* Wortmarke (Kreis halb Tanne, halb Koralle wie im Favicon) */
.wortmarke { display: inline-flex; align-items: center; gap: 10px; font: 600 1.45rem/1 var(--schrift-titel); letter-spacing: -0.03em; color: var(--tinte); }
.wortmarke b { color: var(--pitaya-tief); font-weight: 600; }
.wortmarke__zeichen { width: 30px; height: 30px; border-radius: 50%; background: var(--pitaya); position: relative; overflow: hidden; flex: none; }
.wortmarke__zeichen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: var(--tinte); }
.kopf .wortmarke, .fuss .wortmarke { color: var(--tinte); }
.fuss .wortmarke { color: #fff; }
.fuss .wortmarke b { color: var(--butter); }

/* Knopf in der Kopfzeile etc. */
.kopf .knopf--tinte { padding: 0.7rem 1.1rem; }

/* Bühne */
.buehne { position: relative; overflow: hidden; background: var(--papier); padding: clamp(2.5rem, 5vw, 4rem) 0 0; }
.buehne__innen { position: relative; z-index: 1; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: end; }
.buehne__sonne { position: absolute; right: -10%; top: 4%; width: min(760px, 110vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--butter) 0 36%, oklch(0.76 0.16 36) 62%, var(--pitaya) 100%); opacity: .95; pointer-events: none; }
.buehne h1 { font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5.2rem); line-height: 1; font-weight: 600; letter-spacing: -0.025em; }
.buehne h1 span { color: var(--pitaya-tief); }
.buehne__text { font-size: 1.2rem; color: var(--tinte); max-width: 31em; margin: var(--a-5) 0 var(--a-5); }
.buehne__fakten { display: flex; flex-wrap: wrap; gap: var(--a-2) var(--a-5); padding: 0; margin: var(--a-5) 0 clamp(3rem, 6vw, 5rem); list-style: none; font-size: var(--gr-s); color: var(--tinte-weich); }
.buehne__fakten li::before { content: "✓ "; color: var(--pitaya-tief); font-weight: 700; }
.buehne__augen { display: inline-flex; align-items: center; gap: var(--a-2); font-weight: 700; font-size: var(--gr-s); color: var(--pitaya-tief); margin-bottom: var(--a-5); }
.buehne__augen::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pitaya); }

/* Beispielansicht Cockpit */
.cockpit { position: relative; z-index: 1; background: var(--hell); border: 1px solid var(--linie); border-bottom: 0; border-radius: 22px 22px 0 0; box-shadow: 0 30px 70px -20px oklch(0.3 0.08 40 / .28); padding: var(--a-5) var(--a-5) var(--a-6); font-size: .92rem; min-width: 0; }
.cockpit__kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--a-3); margin-bottom: var(--a-4); }
.cockpit__kopf strong { font: 600 1.15rem/1.2 var(--schrift-titel); color: var(--tinte); display: block; }
.cockpit__kopf small { display: block; color: var(--tinte-weich); font-size: .82rem; }
.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-3); }
.kachel { border: 1px solid var(--linie); border-radius: var(--r-m); padding: var(--a-4) var(--a-3); background: var(--papier); min-width: 0; }
.kachel .symbol { color: var(--tinte); margin-bottom: var(--a-3); display: block; }
.kachel b { display: block; color: var(--tinte); font-size: .95rem; line-height: 1.2; }
.kachel span { display: block; color: var(--tinte-weich); font-size: .8rem; margin-top: 3px; }
.kachel--frei { background: var(--tinte); border-color: var(--tinte); }
.kachel--frei b { color: #fff; }
.kachel--frei span { color: var(--minze); }
.kachel--frei .symbol { color: var(--butter); }
.cockpit__zeile { display: flex; align-items: center; gap: var(--a-3); margin-top: var(--a-3); padding: var(--a-3) var(--a-4); border-radius: var(--r-m); background: var(--minze); color: var(--tinte); font-weight: 600; }
.cockpit__zeile i { width: 9px; height: 9px; border-radius: 50%; background: var(--tinte); flex: none; }
.cockpit__fuss { margin: var(--a-3) 0 0; font-size: .78rem; color: var(--tinte-weich); }
@media (max-width: 900px) { .buehne__innen { grid-template-columns: 1fr; } .buehne__sonne { top: auto; bottom: -8%; width: 120vw; right: -40%; } }
@media (max-width: 480px) { .kacheln { grid-template-columns: 1fr 1fr; } .cockpit { padding: var(--a-4); } }

/* Türöffner Prüfer */
.pruefer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.pruefer h2 { color: #fff; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); margin-bottom: var(--a-4); }
.pruefer h2 span { color: var(--butter); }
.pruefer p { font-size: 1.1rem; color: oklch(0.92 0.025 165); }
.pruefer .klein { color: oklch(0.84 0.03 165); }
.pruefer__kasten { background: var(--hell); color: var(--tinte); border-radius: 22px; padding: var(--a-6); min-width: 0; }
.pruefer__kasten label { display: block; font-weight: 700; color: var(--tinte); margin-bottom: var(--a-2); }
.pruefer__feld { display: flex; gap: var(--a-2); flex-wrap: wrap; }
.pruefer__feld input { flex: 1 1 200px; font: 500 1rem var(--schrift-text); padding: 14px 16px; min-height: 48px; border-radius: var(--r-m); border: 2px solid var(--linie); background: var(--papier); color: var(--tinte); }
.pruefer__feld input:focus { border-color: var(--tinte); outline: 3px solid var(--pitaya); outline-offset: 2px; }
.ergebnis { list-style: none; margin: var(--a-5) 0 0; padding: 0; border-top: 1px solid var(--linie); }
.ergebnis li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--a-3); align-items: center; padding: var(--a-3) 0; border-bottom: 1px solid var(--linie); font-size: .95rem; }
.ergebnis i { width: 34px; height: 26px; border-radius: 6px; background: var(--papier-tief); border: 1px solid var(--linie); }
.ergebnis em { font-weight: 700; font-size: .8rem; padding: 4px 9px; border-radius: var(--r-rund); white-space: nowrap; }
.e-ok { background: var(--minze); color: var(--minze-tief); }
.e-fehlt { background: var(--glut-hauch); color: var(--glut); }
@media (max-width: 900px) { .pruefer { grid-template-columns: 1fr; } }

/* Schmerz / Antwort */
.raster-vier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--tinte); }
.raster-vier > div { padding: var(--a-5) var(--a-5) 0 0; min-width: 0; }
.raster-vier h3 { margin-bottom: var(--a-2); }
.raster-vier p { margin: 0; color: var(--tinte-weich); font-size: .98rem; }
.antwort { margin-top: var(--a-8); font: 600 clamp(1.5rem, 1rem + 1.8vw, 2.1rem)/1.25 var(--schrift-titel); color: var(--tinte); max-width: 28em; }
.antwort mark { background: linear-gradient(transparent 60%, var(--butter) 60%); color: inherit; }
@media (max-width: 900px) { .raster-vier { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .raster-vier { grid-template-columns: 1fr; } }

/* Module */
.modulraster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-4); }
.modul { position: relative; border: 1px solid var(--linie); border-radius: var(--r-l); padding: var(--a-6); background: var(--papier); display: flex; flex-direction: column; text-decoration: none; color: var(--tinte); min-width: 0; transition: border-color .18s, transform .18s var(--weich), box-shadow .18s; }
a.modul:hover { border-color: var(--tinte-fern); transform: translateY(-3px); box-shadow: var(--schatten-s); color: var(--tinte); }
.modul h3 { font-size: 1.35rem; margin-bottom: var(--a-2); }
.modul p { margin: 0 0 var(--a-4); color: var(--tinte-weich); }
.modul ul { margin: auto 0 0; padding: 0; list-style: none; font-size: .95rem; }
.modul li { padding: 4px 0 4px 22px; position: relative; }
.modul li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--pitaya); }
.modul .marke { align-self: flex-start; margin-bottom: var(--a-4); }
.modul__symbol { width: 46px; height: 46px; border-radius: 50%; background: var(--minze); display: grid; place-items: center; margin-bottom: var(--a-4); color: var(--tinte); }
.modul--frei { background: var(--pitaya); border-color: var(--pitaya); }
.modul--frei h3, .modul--frei p, .modul--frei li { color: var(--tinte); }
.modul--frei .modul__symbol { background: var(--tinte); color: var(--butter); }
.modul--frei li::before { background: var(--tinte); }
.modul--frei .marke { background: var(--tinte); color: #fff; }
@media (max-width: 980px) { .modulraster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .modulraster { grid-template-columns: 1fr; } }

/* Ablauf */
.schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-6); list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
.schritte li { position: relative; padding-top: var(--a-8); min-width: 0; }
.schritte li::before { counter-increment: schritt; content: counter(schritt); position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--pitaya); color: var(--tinte); font: 700 1.1rem/44px var(--schrift-text); text-align: center; }
.schritte h3 { margin-bottom: var(--a-2); }
.schritte p { margin: 0; color: var(--tinte-weich); }
@media (max-width: 760px) { .schritte { grid-template-columns: 1fr; gap: var(--a-6); } }

/* Vergleichstabelle */
.vergleich { border: 2px solid var(--tinte); border-radius: var(--r-l); background: var(--hell); overflow: hidden; }
.vergleich > div { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linie); }
.vergleich > div:first-child { border-top: 0; background: var(--tinte); color: #fff; font-weight: 700; }
.vergleich span { padding: var(--a-3) var(--a-4); font-size: .97rem; min-width: 0; }
.vergleich span + span { border-left: 1px solid var(--linie); font-weight: 600; color: var(--tinte); }
.vergleich > div:first-child span + span { color: var(--butter); border-left-color: oklch(1 0 0 / .2); }

/* Tabellen */
.tabellenrolle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .96rem; }
th, td { text-align: left; padding: var(--a-3) var(--a-3); border-bottom: 1px solid var(--linie); vertical-align: top; }
thead th { color: var(--tinte); font-weight: 700; }

/* Fragen */
.fragen { max-width: 52rem; }
.fragen details { border-bottom: 1px solid var(--linie); padding: var(--a-2) 0; }
.fragen summary { cursor: pointer; list-style: none; font: 600 1.2rem/1.3 var(--schrift-titel); color: var(--tinte); padding: var(--a-3) var(--a-7) var(--a-3) 0; position: relative; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; position: absolute; right: 6px; top: 8px; font: 400 1.7rem/1 var(--schrift-text); color: var(--pitaya-tief); }
.fragen details[open] summary::after { content: "–"; }
.fragen details > div { padding-bottom: var(--a-4); }
.fragen p { margin: 0; color: var(--tinte-weich); max-width: 44em; }

/* Lesetext, Rechtstexte */
.lesetext { max-width: var(--lesebreite); }
.lesetext h2 { font-size: 1.6rem; margin: var(--a-7) 0 var(--a-3); }
.lesetext h3 { margin: var(--a-5) 0 var(--a-2); }
.lesetext ul, .lesetext ol { padding-left: 1.25rem; }
.lesetext li { margin-bottom: var(--a-2); }
.recht { max-width: var(--lesebreite); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) var(--rand); }
.recht h2 { font-size: 1.5rem; margin: var(--a-7) 0 var(--a-3); }
.recht__stand { color: var(--tinte-weich); font-size: var(--gr-s); margin-bottom: var(--a-5); }
.recht__hinweis { background: var(--butter); border-radius: var(--r-m); padding: var(--a-4) var(--a-5); margin: var(--a-5) 0; }
.recht ul { padding-left: 1.25rem; }
.recht li { margin-bottom: var(--a-2); }
.recht address { margin: 0 0 var(--a-3); }

/* Seitenkopf */
.seitenkopf { background: var(--butter); padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.seitenkopf__innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.seitenkopf__innen h1 { max-width: 16em; }
.seitenkopf .dachzeile { color: var(--tinte); }
.seitenkopf .vorspann { color: var(--tinte); }
.seitenkopf--hell { background: var(--papier); }

/* Formulare */
.formular { display: grid; gap: var(--a-4); min-width: 0; }
.formularblock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 860px) { .formularblock { grid-template-columns: 1fr; } }
.feld { display: grid; gap: var(--a-2); min-width: 0; }
.feld label, .feld > span { font-weight: 700; color: var(--tinte); }
.feld__hilfe { font-weight: 400; color: var(--tinte-weich); font-size: var(--gr-s); }
.feld input, .feld select, .feld textarea, .pruefform input[type="text"], .pruefform input[type="url"] { width: 100%; font: 500 1rem var(--schrift-text); padding: 13px 15px; min-height: 48px; border-radius: var(--r-m); border: 2px solid var(--linie); background: var(--hell); color: var(--tinte); }
.feld textarea { min-height: 150px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--tinte); outline: 3px solid var(--pitaya); outline-offset: 2px; }
.haken { display: grid; grid-template-columns: auto 1fr; gap: var(--a-3); align-items: start; font-size: var(--gr-s); color: var(--tinte-weich); }
.haken input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--tinte); }
.kontaktwege { display: grid; gap: var(--a-3); margin-top: var(--a-4); }
.kontaktwege a { display: flex; align-items: center; gap: var(--a-3); font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--tinte); padding: var(--a-3) 0; border-bottom: 1px solid var(--linie); }
.kontaktwege a:hover { color: var(--pitaya-tief); }
.meldung { padding: var(--a-3) var(--a-4); border-radius: var(--r-m); margin: 0 0 var(--a-4); font-weight: 600; }
.meldung--ok { background: var(--minze); color: var(--minze-tief); }
.meldung--fehler { background: var(--glut-hauch); color: var(--glut); }
.meldung--hinweis { background: var(--butter); color: var(--tinte); }
.pruefform { display: grid; gap: var(--a-3); }
.pruefform label { font-weight: 700; }
.pruefergebnis { display: grid; gap: var(--a-3); }
.pruefseite { border: 1px solid var(--linie); border-radius: var(--r-m); padding: var(--a-4); background: var(--hell); min-width: 0; }
.punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a-2); }
.ausschnitt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--a-3); align-items: center; }

/* Blog */
.artikelreihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-4); }
@media (max-width: 900px) { .artikelreihe { grid-template-columns: 1fr; } }
.artikelkarte { display: block; text-decoration: none; color: var(--tinte); background: var(--hell); border: 1px solid var(--linie); border-radius: var(--r-l); padding: var(--a-6); min-width: 0; transition: transform .18s var(--weich), border-color .18s; }
.artikelkarte:hover { transform: translateY(-3px); border-color: var(--tinte-fern); color: var(--tinte); }
.artikelkarte h3 { margin-bottom: var(--a-2); }
.artikelkarte p { color: var(--tinte-weich); margin: 0; font-size: .97rem; }
.filterleiste { display: flex; flex-wrap: wrap; gap: var(--a-2); margin-bottom: var(--a-5); }
.filterleiste button { font: 600 .95rem var(--schrift-text); padding: .55rem 1rem; border-radius: var(--r-rund); border: 2px solid var(--linie); background: var(--hell); color: var(--tinte); cursor: pointer; }
.filterleiste button[aria-pressed="true"] { background: var(--tinte); color: #fff; border-color: var(--tinte); }

/* Preise */
.preise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-4); }
@media (max-width: 900px) { .preise { grid-template-columns: 1fr; } }
.paket { display: flex; flex-direction: column; background: var(--hell); border: 1px solid var(--linie); border-radius: var(--r-l); padding: var(--a-6); min-width: 0; }
.paket--vorn { border: 2px solid var(--tinte); }
.paket__preis { font: 600 2.4rem/1.1 var(--schrift-titel); color: var(--tinte); margin: var(--a-3) 0 var(--a-2); }
.paket__preis small { font: 400 1rem var(--schrift-text); color: var(--tinte-weich); }
.paket ul { list-style: none; margin: var(--a-4) 0 var(--a-5); padding: 0; }
.paket li { display: flex; gap: var(--a-2); padding: 5px 0; }
.paket li .symbol { color: var(--tinte); margin-top: 3px; }

/* Partner-Zahlen, Auflistung */
.liste-haken { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a-3); }
.liste-haken li { display: flex; gap: var(--a-3); align-items: flex-start; }
.liste-haken .symbol { color: var(--pitaya-tief); margin-top: 3px; }
.zeilen { list-style: none; margin: 0; padding: 0; }
.zeilen li { display: flex; justify-content: space-between; gap: var(--a-3); padding: var(--a-3) 0; border-bottom: 1px solid var(--linie); }

/* Einblick (Bildschirmfotos) */
.einblick { margin: var(--a-6) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-4); }
.einblick figure { margin: 0; background: var(--hell); border: 1px solid var(--linie); border-radius: var(--r-l); padding: var(--a-3); min-width: 0; }
.einblick img { display: block; width: 100%; height: auto; border-radius: var(--r-m); border: 1px solid var(--linie); }
.einblick figcaption { font-size: var(--gr-s); color: var(--tinte-weich); margin-top: var(--a-3); }
@media (max-width: 860px) { .einblick { grid-template-columns: 1fr; } }

/* Fläche und Abschluss */
.abschluss { background: var(--pitaya); padding: clamp(3.5rem, 7vw, 5.5rem) 0; position: relative; overflow: hidden; }
.abschluss__innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); display: flex; justify-content: space-between; align-items: center; gap: var(--a-6); flex-wrap: wrap; position: relative; }
.abschluss h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); max-width: 14em; color: var(--tinte); }
.abschluss p { margin: var(--a-3) 0 0; font-size: 1.1rem; color: var(--tinte); }
.abschluss .knopfreihe { margin: 0; }
.abschluss .knopf--rand { color: var(--tinte); border-color: var(--tinte); }

/* Fuß */
.fuss { background: var(--tinte); color: oklch(0.86 0.03 165); padding: clamp(3.5rem, 6vw, 4.5rem) 0 var(--a-6); font-size: .95rem; overflow: hidden; }
.fuss__innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.fuss__auftakt { display: flex; justify-content: space-between; align-items: center; gap: var(--a-5); flex-wrap: wrap; padding-bottom: var(--a-7); border-bottom: 1px solid oklch(1 0 0 / .14); }
.fuss__satz { font: 600 clamp(1.6rem, 1.1rem + 2vw, 2.4rem)/1.1 var(--schrift-titel); color: #fff; margin: 0; }
.fuss__spalten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a-5); padding: var(--a-7) 0; }
.fuss__spalten h2 { color: #fff; font: 700 1rem/1.2 var(--schrift-text); margin-bottom: var(--a-3); }
.fuss__spalten ul { list-style: none; margin: 0; padding: 0; }
.fuss__spalten li { margin: 6px 0; }
.fuss a { color: oklch(0.92 0.03 165); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss__ende { border-top: 1px solid oklch(1 0 0 / .14); padding-top: var(--a-5); font-size: .86rem; }
.fuss__ende p { margin: 0 0 var(--a-2); }
.fuss__riese { font: 600 clamp(3.5rem, 13vw, 11rem)/0.9 var(--schrift-titel); color: oklch(1 0 0 / .06); margin: var(--a-6) 0 0; letter-spacing: -0.03em; white-space: nowrap; user-select: none; }
@media (max-width: 860px) { .fuss__spalten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .fuss__spalten { grid-template-columns: 1fr; } }

/* Schmale Seiten (Anmeldung) */
.tor { background: var(--papier); }
.tor__kopf { padding: var(--a-5) var(--rand); }
.tor__karte { max-width: 30rem; margin: var(--a-6) auto; padding: 0 var(--rand); }
.tor__fuss { text-align: center; padding: var(--a-6) var(--rand); font-size: .9rem; }
.tor__fuss a { margin: 0 var(--a-2); }

/* Bewegung nur über Hover, keine Einblendungen beim Rollen */
@media (hover: hover) { .symbol { transition: transform .2s var(--weich); } }