/* Praxis-Grow · Website · Stand 08.10.2026
   Clean in Weiß und Grün: viel Weißraum, hellgraue Flächen mit weißen Kacheln,
   Systemschrift, Grün nur für Knöpfe und Links. Arbeitsbeispiele als Kacheln. */

:root {
  /* Farben */
  --weiss: oklch(100% 0 0);
  --grau: oklch(97.3% 0.002 250);
  --logo-navy: #0D1F2D;
  --logo-gruen: #1D9E75;
  --logo-mint: #5ECBA1;
  --tinte: oklch(22% 0.03 240);      /* Logo-Navy */
  --tinte-2: oklch(42% 0.025 240);
  --tinte-3: oklch(48% 0.02 240);
  --linie: oklch(89% 0.003 260);
  --feldrand: oklch(62% 0.006 260);
  --linie-zart: oklch(93% 0.002 260);
  --gruen: oklch(50% 0.11 165);
  --gruen-dunkel: oklch(43% 0.1 165);
  --gruen-zart: oklch(95% 0.035 163);
  --mint-zart: oklch(93% 0.05 163);
  --ampel-gruen: #1D9E75;
  --ampel-gelb: oklch(82% 0.15 85);
  --ampel-rot: oklch(58% 0.18 28);

  /* Schrift */
  --f: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --f-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --t-klein: 0.875rem;
  --t-text: 1.0625rem;
  --t-gross: 1.3125rem;
  --t-h3: 1.75rem;
  --t-h2: clamp(2rem, 1.3rem + 2.6vw, 3rem);
  --t-h1: clamp(2.5rem, 1.5rem + 4.4vw, 4.75rem);

  /* Abstände */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --block: clamp(var(--s-8), 3rem + 5vw, 128px);

  --wrap: 1080px;
  --r-gross: 22px;
  --r-klein: 12px;
  --kopf-hoehe: 68px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--f); font-size: var(--t-text); line-height: 1.5; letter-spacing: -0.01em; color: var(--tinte); background: var(--weiss); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
[id] { scroll-margin-top: calc(var(--kopf-hoehe) + var(--s-4)); }
[hidden] { display: none !important; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--s-5)); margin-inline: auto; }
main { overflow-x: hidden; overflow-x: clip; } /* Wasserzeichen darf über den Rand ragen, ohne seitliches Scrollen */

/* Typografie */
h1, h2, h3 { font-family: var(--f-display); color: var(--tinte); font-weight: 600; overflow-wrap: break-word; }
h1 { font-size: var(--t-h1); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; hyphens: manual; }
h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.025em; max-width: 24ch; hyphens: manual; text-wrap: balance; }
h3 { font-size: var(--t-gross); line-height: 1.25; letter-spacing: -0.015em; hyphens: auto; }
p { max-width: 68ch; }
p, li, dd, dt, a { overflow-wrap: break-word; }
.lead { font-size: var(--t-gross); line-height: 1.45; color: var(--tinte-2); max-width: 44ch; }
.klein, .kleingedruckt { font-size: var(--t-klein); color: var(--tinte-3); }
.kleingedruckt { margin-top: var(--s-5); max-width: 80ch; }
.marke-zeile { font-size: var(--t-klein); color: var(--tinte-2); text-wrap: balance; }
.marke-zeile strong { color: var(--tinte); font-weight: 600; }
.zentriert { text-align: center; justify-items: center; }
.zentriert h2, .zentriert .lead { margin-inline: auto; }

/* Zugänglichkeit */
:focus-visible { outline: 3px solid var(--logo-gruen); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: var(--s-4); top: -60px; z-index: 30; background: var(--tinte); color: var(--weiss); padding: var(--s-3) var(--s-4); border-radius: var(--r-klein); text-decoration: none; }
.skip:focus { top: var(--s-3); }

/* Knöpfe und Links */
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-6); }
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--s-5); border-radius: 980px; background: var(--gruen); color: var(--weiss); font: 500 var(--t-text)/1.2 var(--f); letter-spacing: -0.01em; text-decoration: none; border: 0; cursor: pointer; transition: background-color .2s ease; }
.knopf:hover { background: var(--gruen-dunkel); }
.knopf:disabled { opacity: .4; cursor: not-allowed; }
.knopf-leise { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--s-5); border-radius: 980px; background: var(--grau); color: var(--tinte); font: 500 var(--t-text)/1.2 var(--f); text-decoration: none; }
.knopf-leise:hover { background: var(--linie-zart); }
.flaeche .knopf-leise, .panel .knopf-leise { background: var(--weiss); }
.mehr, .link { color: var(--gruen); text-decoration: none; font-weight: 400; }
.aktionen .mehr, .aktionen .link { display: inline-block; padding-block: 12px; }
.mehr::after { content: "\00a0›"; }
.mehr:hover, .link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 20; background: oklch(100% 0 0 / .8); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--linie-zart); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); height: var(--kopf-hoehe); }
.marke { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; font: 600 1.375rem/1 var(--f-display); letter-spacing: -0.02em; color: var(--tinte); }
.marke img { width: 38px; height: 38px; }
.kopf nav { display: flex; align-items: center; gap: var(--s-6); font-size: 0.9375rem; }
.kopf nav a { text-decoration: none; color: var(--tinte-2); }
.kopf nav a:hover, .kopf nav a[aria-current="page"] { color: var(--tinte); }
.kopf nav a[aria-current="page"]:not(.nav-cta) { text-decoration: underline; text-decoration-color: var(--logo-gruen); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.kopf nav .nav-cta { color: var(--weiss); background: var(--gruen); padding: 9px 18px; border-radius: 980px; }
.kopf nav .nav-cta:hover { color: var(--weiss); background: var(--gruen-dunkel); }
.menu-knopf { display: none; min-height: 44px; font: 500 var(--t-klein) var(--f); color: var(--tinte); background: var(--grau); border: 0; border-radius: 980px; padding: 6px 18px; cursor: pointer; }

/* Abschnitte */
.block { padding-block: var(--block); }
.flaeche, .nacht { background: var(--grau); }
.abschnitt-kopf { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-4) var(--s-8); align-items: end; margin-bottom: var(--s-8); }
.abschnitt-kopf.zentriert { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }

/* Kacheln und Blätter (Arbeitsbeispiele) */
.blatt, .panel { background: var(--weiss); border-radius: var(--r-gross); padding: var(--s-6); }
.block:not(.flaeche):not(.nacht) .blatt, .block:not(.flaeche) .panel, .hero .blatt { background: var(--grau); }
.blatt-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--linie); font-size: var(--t-klein); }
.blatt-kopf strong { font: 600 var(--t-text) var(--f-display); }
.blatt-kopf span { color: var(--tinte-3); }
.blatt-zeilen { list-style: none; counter-reset: z; }
.blatt-zeilen li { counter-increment: z; display: grid; grid-template-columns: 2rem 1fr; padding: var(--s-3) 0; border-bottom: 1px solid var(--linie-zart); }
.blatt-zeilen li:last-child { border-bottom: 0; }
.blatt-zeilen li::before { content: counter(z); font-weight: 600; color: var(--logo-gruen); }
.blatt-haken li { display: block; }
.blatt-haken li::before { content: none; }
.blatt-fuss { margin-top: var(--s-4); font-size: var(--t-klein); color: var(--tinte-2); }
.blatt-unterschrift { margin-top: var(--s-5); display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--t-klein); color: var(--tinte-3); }
.blatt-unterschrift span { flex: 1; border-top: 1px solid var(--linie); padding-top: var(--s-1); }
.haken { display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1.5px solid var(--tinte-3); margin-right: var(--s-2); vertical-align: -3px; font-size: .7rem; line-height: 1; }
.haken.an { background: var(--logo-gruen); border-color: var(--logo-gruen); color: var(--weiss); }
.haken.an::after { content: "✓"; font-weight: 700; }

/* Hero */
.hero { position: relative; isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: -1; right: -18%; top: -4%; width: min(380px, 45vw); aspect-ratio: 1; pointer-events: none; opacity: .09; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cline x1='16' y1='6' x2='16' y2='26' stroke='%231D9E75' stroke-width='2.4' stroke-linecap='round'/%3E%3Cline x1='6' y1='16' x2='26' y2='16' stroke='%231D9E75' stroke-width='2.4' stroke-linecap='round'/%3E%3Cline x1='19.5' y1='21' x2='25' y2='26.5' stroke='%235ECBA1' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s-8); align-items: center; padding-block: var(--s-8) var(--s-7); }
.hero + .block, .hero + .wrap { padding-top: var(--s-7); }
.hero .marke-zeile { margin-bottom: var(--s-4); }
.hero .lead { margin-top: var(--s-5); }
.hero-notiz { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--linie-zart); font-size: var(--t-klein); color: var(--tinte-2); max-width: 46ch; }
.hero-notiz a { color: var(--gruen); font-weight: 600; text-decoration: none; white-space: nowrap; }
.hero-foto picture { display: block; }
.hero-foto img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-gross); background: var(--grau); }
.hero-bereich { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hero h1 { font-size: clamp(2.5rem, 1.5rem + 4vw, 4rem); }
.hero-bereich .blatt { justify-self: end; width: min(100%, 470px); }
.hero-breit { display: block; padding-bottom: var(--s-7); text-align: center; }
.hero-breit .hero-text { display: grid; justify-items: center; gap: var(--s-4); }
.hero-breit h1 { max-width: 16ch; }
.hero-breit .lead { margin-inline: auto; }
.hero-breit .aktionen { justify-content: center; margin-top: var(--s-4); }

/* Wegweiser */
.wegweiser { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-8); align-items: start; }
.wegweiser .lead { margin-top: var(--s-4); }
.wizard-fortschritt { height: 4px; background: var(--linie); border-radius: 2px; overflow: hidden; }
.wizard-fortschritt span { display: block; height: 100%; background: linear-gradient(90deg, var(--logo-gruen), var(--logo-mint)); transform-origin: left; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.wizard-zaehler { margin-top: var(--s-4); font-size: var(--t-klein); color: var(--tinte-3); }
.wizard-frage { font: 600 var(--t-h3)/1.2 var(--f-display); letter-spacing: -0.02em; color: var(--tinte); margin-top: var(--s-1); outline: none; }
.wizard-hinweis-klein { font-size: var(--t-klein); color: var(--tinte-3); margin-top: var(--s-1); }
.wizard-optionen { margin-top: var(--s-5); background: var(--weiss); border-radius: var(--r-klein); overflow: hidden; }
.wizard-option { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); width: 100%; text-align: left; font: 400 var(--t-text)/1.35 var(--f); letter-spacing: -0.01em; color: var(--tinte); background: var(--weiss); border: 0; border-top: 1px solid var(--linie-zart); padding: var(--s-4) var(--s-5); min-height: 56px; cursor: pointer; }
.wizard-option:first-child { border-top: 0; }
.wizard-option:hover { background: var(--gruen-zart); }
.wizard-option:hover::after { color: var(--logo-gruen); }
.wizard-option::after { content: "›"; flex: none; color: var(--tinte-3); font-size: 1.25rem; line-height: 1; }
.wizard-option[aria-pressed="true"] { font-weight: 600; }
.wizard-option[aria-pressed="true"]::after { content: "✓"; color: var(--gruen); font-size: 1rem; }
.mehrfach .wizard-option::after { content: ""; width: 1.25rem; height: 1.25rem; border: 1.5px solid var(--linie); border-radius: 50%; }
.mehrfach .wizard-option[aria-pressed="true"]::after { content: "✓"; display: grid; place-items: center; background: var(--gruen); border-color: var(--gruen); color: var(--weiss); font-size: .75rem; }
.wizard-leiste { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-5); }
.wizard-zurueck { min-height: 44px; font: 400 var(--t-klein) var(--f); color: var(--gruen); background: none; border: 0; padding: var(--s-2) 0; cursor: pointer; }
.wizard-zurueck:hover { text-decoration: underline; }
.wizard-block { padding: var(--s-5); background: var(--weiss); border-radius: var(--r-klein); margin-top: var(--s-4); }
.wizard-lage { font: 600 var(--t-gross)/1.35 var(--f-display); letter-spacing: -0.015em; color: var(--tinte); outline: none; }
.wizard-unterkopf { margin-top: var(--s-4); font-size: var(--t-klein); font-weight: 600; color: var(--tinte-2); }
.wizard-schritte { list-style: none; counter-reset: w; margin-top: var(--s-2); }
.wizard-schritte li { counter-increment: w; display: grid; grid-template-columns: 1.75rem 1fr; padding: var(--s-1) 0; }
.wizard-schritte li::before { content: counter(w); font-weight: 600; color: var(--gruen); }
.wizard-preis { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--linie-zart); }
.wizard-preis span { color: var(--tinte-3); }
.wizard-hinweis { margin-top: var(--s-4); color: var(--tinte-2); }
.wizard-cta-text { margin-top: var(--s-6); font-weight: 600; }
.wizard [tabindex="-1"]:focus, .ergebnis:focus { outline: none; }

/* Bereiche als Kacheln */
.kacheln { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-5); }
.kachel-gross { grid-row: span 2; }
.mini-karte { display: grid; gap: var(--s-2); margin-top: var(--s-2); padding: var(--s-5); border-radius: var(--r-klein); background: var(--grau); font-size: var(--t-klein); color: var(--tinte-2); }
.mini-karte strong { color: var(--tinte); padding-bottom: var(--s-2); border-bottom: 1px solid var(--linie); }
.kachel { display: flex; flex-direction: column; gap: var(--s-4); min-height: 240px; padding: var(--s-7) var(--s-6) var(--s-6); background: var(--weiss); border-radius: var(--r-gross); text-decoration: none; transition: box-shadow .25s ease; }
.kachel:hover { box-shadow: 0 8px 32px oklch(22% 0.03 240 / .1), inset 0 0 0 1px var(--logo-mint); }
.kachel h3 { font-size: var(--t-h3); letter-spacing: -0.02em; }
.kachel p { color: var(--tinte-2); }
.kachel .mehr { margin-top: auto; }

/* Jobs */
.stellen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.stelle { min-height: 0; gap: var(--s-3); }
.stelle h3 { font-size: var(--t-h3); letter-spacing: -0.02em; hyphens: manual; text-wrap: balance; }
.stelle .mwd { font-size: var(--t-text); font-weight: 400; color: var(--tinte-3); letter-spacing: 0; }
.stelle-spalten { display: grid; gap: var(--s-5); margin-top: var(--s-2); }
.stelle-kopf { font-size: var(--t-klein); font-weight: 600; color: var(--tinte-2); margin-bottom: var(--s-1); }
.stelle ul { list-style: none; }
.stelle li { padding: var(--s-2) 0; border-top: 1px solid var(--linie-zart); font-size: var(--t-klein); color: var(--tinte-2); }
.stelle .mehr { margin-top: auto; padding-top: var(--s-4); }
.blatt-zeilen a { color: var(--tinte); text-decoration: none; }
.blatt-zeilen a:hover { color: var(--gruen); }

/* Bewerbungsformular */
.bewerbung input[type="file"] { width: 100%; padding: var(--s-2); border: 1.5px dashed var(--feldrand); border-radius: var(--r-klein); background: oklch(100% 0 0 / .6); font: 400 var(--t-klein) var(--f); color: var(--tinte-2); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.bewerbung input[type="file"]:hover { border-color: var(--gruen); background: oklch(100% 0 0 / .85); }
.bewerbung input[type="file"]::file-selector-button { margin-right: var(--s-3); padding: 10px 18px; border: 0; border-radius: 980px; background: var(--gruen-zart); color: var(--gruen-dunkel); font: 500 var(--t-klein) var(--f); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.bewerbung input[type="file"]:hover::file-selector-button { background: var(--gruen); color: var(--weiss); }
.bewerbung input[type="file"]:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; }
.anfrage select { -webkit-appearance: none; appearance: none; padding-right: var(--s-7); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23157a5b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right var(--s-4) center !important; background-size: 12px 8px !important; }
.anfrage select:hover { border-color: var(--gruen); }
.feld-hinweis { display: block; font-size: .8125rem; color: var(--tinte-3); }
.haken-feld { display: flex; gap: var(--s-3); align-items: flex-start; margin-top: var(--s-4); font-size: var(--t-klein); color: var(--tinte-2); }
.haken-feld input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--gruen); flex: none; }
.haken-feld a { color: var(--gruen); }
.uebernahme.fehler { background: oklch(95% 0.04 28); color: oklch(42% 0.14 28); }
.falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Marketing-Bausteine */
.bausteine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.baustein { min-height: 0; padding: var(--s-6); }
.baustein h3 { font-size: var(--t-gross); }

/* Zitate */
.zitate { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-8); }
.zitat blockquote { font: 600 clamp(1.375rem, 1rem + 1.1vw, 1.875rem)/1.25 var(--f-display); letter-spacing: -0.02em; color: var(--tinte); }
.zitat p { margin-top: var(--s-3); color: var(--tinte-2); }
.zitat .mehr { display: inline-block; margin-top: var(--s-3); }

/* Probleme auf Bereichsseiten */
.protokoll { list-style: none; background: var(--weiss); border-radius: var(--r-gross); padding: var(--s-2) var(--s-6); }
.block:not(.flaeche) .protokoll { background: var(--grau); }
.protokoll > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s-3) var(--s-8); padding: var(--s-6) 0; border-top: 1px solid var(--linie-zart); }
.protokoll > li:first-child { border-top: 0; }
.protokoll h3 { font-size: var(--t-gross); }
.protokoll p, .protokoll li li { color: var(--tinte-2); }
.protokoll .ablauf { padding-left: 1.25rem; margin: var(--s-3) 0; }
.protokoll .ablauf li { padding: var(--s-1) 0; }
.protokoll em { display: block; margin-top: var(--s-3); font-style: normal; font-weight: 600; color: var(--gruen); }
.protokoll div p + p { margin-top: var(--s-3); }
details.kleingedruckt summary { cursor: pointer; color: var(--gruen); }

/* Demo-Methode */
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-8); align-items: center; }
.schritte { list-style: none; counter-reset: s; margin-top: var(--s-6); }
.schritte li { counter-increment: s; display: grid; grid-template-columns: 2.5rem 1fr; padding: var(--s-4) 0; border-top: 1px solid var(--linie); }
.schritte li::before { content: counter(s); grid-row: 1 / span 2; font: 600 var(--t-gross)/1.2 var(--f-display); color: var(--logo-gruen); }
.schritte li > * { grid-column: 2; }
.schritte strong { display: block; font-weight: 600; }
.schritte span { color: var(--tinte-2); }
.demo-preis { margin-top: var(--s-5); font-weight: 600; }

/* Entwurf (Skizze einer Praxis-Website) */
.entwurf { position: relative; }
.entwurf-flaeche { border-radius: var(--r-klein); background: var(--grau); padding: var(--s-5); display: grid; gap: var(--s-4); }
.block:not(.flaeche) .entwurf .entwurf-flaeche { background: var(--weiss); }
.entwurf-leiste { display: flex; justify-content: space-between; align-items: center; font: 600 var(--t-klein) var(--f-display); }
.entwurf-leiste span { display: flex; gap: var(--s-4); font-weight: 400; color: var(--tinte-3); }
.entwurf-titel { font: 600 1.5rem/1.15 var(--f-display); letter-spacing: -0.02em; max-width: 16ch; }
.entwurf-balken { height: 10px; border-radius: 5px; background: var(--linie); max-width: 70%; }
.entwurf-balken.kurz { max-width: 45%; }
.entwurf-knopf { justify-self: start; padding: var(--s-2) var(--s-4); background: var(--gruen); color: var(--weiss); font-size: var(--t-klein); border-radius: 980px; }
.entwurf-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.entwurf-raster div { border-radius: var(--r-klein); padding: var(--s-3); font-size: .8125rem; color: var(--tinte-2); background: var(--weiss); border: 1px solid var(--linie-zart); }
.entwurf-notizen { margin-top: calc(-1 * var(--s-2)); }
.entwurf-notizen div, .entwurf-notizen .notiz { border: 0; background: none; padding: 0 var(--s-2); }
.notiz { font-size: .8125rem; line-height: 1.35; color: var(--gruen); }
.notiz-hoch::before { content: "↑ "; }
.notiz-links::before { content: "← "; }
.notiz-rechts { justify-self: end; text-align: right; margin-top: calc(-1 * var(--s-3)); }
.entwurf-zeile { display: flex; align-items: center; gap: var(--s-3) var(--s-5); flex-wrap: wrap; }
.entwurf-zeile .notiz { max-width: 26ch; }
.entwurf-flaeche { container-type: inline-size; }
@container (max-width: 600px) {
  .entwurf-zeile { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
  .notiz-links::before { content: "↑ "; }
  .entwurf-zeile .notiz { max-width: none; }
}
.wrap:not(.demo) > .entwurf { max-width: 860px; margin-inline: auto; }
.demo > .entwurf { width: 100%; }

/* Preise */
.voranschlag { max-width: 860px; margin-inline: auto; }
.voranschlag-gruppe { margin-top: var(--s-6); }
.voranschlag-gruppe h3 { font: 600 var(--t-klein) var(--f); letter-spacing: 0; color: var(--tinte-3); padding-bottom: var(--s-2); }
.voranschlag dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-6); padding: var(--s-4) 0; border-top: 1px solid var(--linie); }
.voranschlag dt { font-weight: 600; }
.voranschlag dt small { display: block; font-weight: 400; font-size: var(--t-klein); color: var(--tinte-2); margin-top: var(--s-1); max-width: 60ch; }
.voranschlag dd { font: 600 var(--t-gross)/1.2 var(--f-display); white-space: nowrap; text-align: right; }

/* Über mich */
.ueber { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.ueber p + p { margin-top: var(--s-4); }
.ueber .lead { margin-bottom: var(--s-5); }
.fakten { list-style: none; background: var(--weiss); border-radius: var(--r-klein); padding: 0 var(--s-5); }
.fakten li { padding: var(--s-3) 0; border-top: 1px solid var(--linie-zart); font-size: var(--t-klein); }
.fakten li:first-child { border-top: 0; }
.fakten-titel { font-weight: 600; margin: var(--s-6) 0 var(--s-2); }
.fakten-titel:first-child { margin-top: 0; }

/* Fragen */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-8); align-items: start; }
.faq details { border-bottom: 1px solid var(--linie); }
.faq details:first-child { border-top: 1px solid var(--linie); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) 0; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.375rem; line-height: 1; font-weight: 300; color: var(--gruen); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--tinte-2); padding-bottom: var(--s-5); }

/* Pflichten-Check */
.pflichten-form fieldset { border: 0; border-top: 1px solid var(--linie); padding: var(--s-4) 0; }
.pflichten-form legend { float: left; width: 100%; font-weight: 600; margin-bottom: var(--s-2); }
.pflichten-form label { display: inline-flex; gap: var(--s-2); align-items: center; margin-right: var(--s-6); min-height: 44px; cursor: pointer; color: var(--tinte-2); }
.pflichten-form input { width: 20px; height: 20px; accent-color: var(--gruen); }
.pflichten-form .knopf { margin-top: var(--s-4); }
.ergebnis:empty { display: none; }
.ergebnis { margin-top: var(--s-6); outline: none; }
.ergebnis-leer { color: var(--tinte-2); }
.ampel { display: flex; align-items: center; gap: var(--s-3); font: 600 var(--t-gross) var(--f-display); margin-bottom: var(--s-2); }
.ampel-licht { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.ampel-gruen .ampel-licht { background: var(--ampel-gruen); }
.ampel-gelb .ampel-licht { background: var(--ampel-gelb); }
.ampel-rot .ampel-licht { background: var(--ampel-rot); }
.ergebnis > p:not(.ampel) { color: var(--tinte-2); }
.ergebnis .knopf { margin-top: var(--s-4); }

/* Vorher / Nachher */
.vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.vergleich > div { background: var(--weiss); border-radius: var(--r-gross); padding: var(--s-6); }
.vergleich h3 { padding-bottom: var(--s-3); }
.vergleich .nachher h3 { color: var(--gruen); }
.vergleich ul { list-style: none; }
.vergleich li { padding: var(--s-3) 0; border-top: 1px solid var(--linie-zart); color: var(--tinte-2); }

/* Kontakt (hell, Formular als Kachel) */
.kontakt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.kontakt .lead { margin-top: var(--s-5); }
.kontakt-telefon { display: block; margin-top: var(--s-6); font: 600 clamp(1.875rem, 1.3rem + 2vw, 2.75rem)/1 var(--f-display); letter-spacing: -0.02em; color: var(--tinte); text-decoration: none; }
.kontakt-telefon:hover { color: var(--gruen); }
.kontakt-adresse { margin-top: var(--s-4); font-size: var(--t-klein); color: var(--tinte-2); }
.kontakt-adresse a, .ausweg a { color: var(--gruen); text-decoration: none; overflow-wrap: anywhere; }
.anfrage { display: flex; flex-direction: column; gap: var(--s-2); position: relative; background: var(--weiss); border-radius: var(--r-gross); padding: var(--s-6); }
.kontakt { position: relative; }
.kontakt > .anker { position: absolute; top: 0; left: 0; }
.anfrage label { font-size: var(--t-klein); color: var(--tinte-2); margin-top: var(--s-3); }
.anfrage label:first-of-type { margin-top: 0; }
.anfrage input:not([type="file"]):not([type="checkbox"]), .anfrage select, .anfrage textarea { font: inherit; padding: var(--s-3) var(--s-4); border-radius: var(--r-klein); border: 1px solid var(--feldrand); background: var(--weiss); color: var(--tinte); }
.anfrage textarea { resize: vertical; }
.uebernahme { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-klein); background: var(--gruen-zart); font-size: var(--t-klein); color: var(--tinte-2); }
.anfrage .knopf { margin-top: var(--s-5); align-self: flex-start; }
.anfrage > p { font-size: var(--t-klein); color: var(--tinte-3); margin-top: var(--s-3); }
.ausweg { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--linie-zart); font-size: var(--t-klein); }
.ausweg button { margin-top: var(--s-3); font: 500 var(--t-klein) var(--f); color: var(--gruen); background: var(--gruen-zart); border: 0; border-radius: 980px; padding: var(--s-2) var(--s-4); min-height: 44px; cursor: pointer; }

/* Abschluss auf Bereichsseiten */
.abschluss { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--s-8); align-items: end; }
.abschluss .lead { margin-top: var(--s-4); }
.andere-bereiche { font-size: var(--t-klein); color: var(--tinte-3); }
.andere-bereiche a { display: block; margin-top: var(--s-2); font: 600 var(--t-gross) var(--f-display); color: var(--gruen); text-decoration: none; }
.andere-bereiche a::after { content: "\00a0›"; }
.andere-bereiche a:hover { text-decoration: underline; }

/* Fuß */
.fuss { padding: var(--s-6) 0; font-size: var(--t-klein); color: oklch(82% 0.02 240); background: var(--logo-navy); }
.fuss a { color: var(--logo-mint); }
.fuss-innen { display: flex; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.fuss nav { display: flex; flex-wrap: wrap; column-gap: var(--s-5); }
.fuss a { text-decoration: none; display: inline-block; padding-block: var(--s-3); }
.fuss a:hover { text-decoration: underline; }

/* Rechtstexte */
.recht { padding-block: var(--s-9); max-width: 72ch; }
.recht h1 { font-size: var(--t-h2); }
.recht h2 { font-size: var(--t-gross); margin-top: var(--s-6); max-width: none; }
.recht p, .recht li { color: var(--tinte-2); margin-top: var(--s-3); }
.recht a { color: var(--gruen); overflow-wrap: anywhere; }
.recht ul { padding-left: var(--s-5); }

/* Mobile Aktionsleiste */
.leiste { display: none; }

/* Schmale Fenster: Menü-Knopf */
@media (max-width: 980px) {
  .menu-knopf { display: inline-block; }
  .kopf nav { display: none; position: absolute; left: 0; right: 0; top: var(--kopf-hoehe); flex-direction: column; align-items: stretch; gap: 0; background: var(--weiss); border-bottom: 1px solid var(--linie-zart); padding: var(--s-2) var(--s-5) var(--s-5); font-size: var(--t-text); }
  .kopf nav.offen { display: flex; }
  .kopf nav a { padding: var(--s-4) 0; border-top: 1px solid var(--linie-zart); color: var(--tinte); }
  .kopf nav a:first-child { border-top: 0; }
  .kopf nav .nav-cta { margin-top: var(--s-3); text-align: center; padding: var(--s-3); border-top: 0; }
  .hero, .hero-bereich, .wegweiser, .demo, .ueber, .faq, .kontakt, .abschluss, .abschnitt-kopf { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .hero-bereich .blatt { justify-self: start; }
  .hero-foto { max-width: 480px; }
  .kacheln, .stellen, .bausteine { grid-template-columns: minmax(0, 1fr); }
  .kachel-gross { grid-row: auto; }
  .kein-js .menu-knopf { display: none; }
  .kein-js .kopf-innen { height: auto; flex-wrap: wrap; padding-block: var(--s-2); }
  .kein-js .kopf nav { display: flex; position: static; flex-direction: row; flex-wrap: wrap; gap: 0 var(--s-4); width: 100%; padding: 0; border: 0; background: none; font-size: var(--t-klein); }
  .kein-js .kopf nav a { border: 0; padding: var(--s-3) 0; }
  .kein-js .kopf nav .nav-cta { margin: 0; padding: var(--s-2) var(--s-4); }
  .kachel { min-height: 0; padding: var(--s-6); }
  .protokoll > li { grid-template-columns: minmax(0, 1fr); }
}

/* Handy */
@media (max-width: 640px) {
  .hero { padding-block: var(--s-6) var(--s-8); }
  .zitate, .vergleich { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .blatt, .panel, .anfrage { padding: var(--s-5); }
  .protokoll { padding: var(--s-1) var(--s-5); }
  .entwurf-raster { grid-template-columns: 1fr 1fr; }
  .entwurf-raster div:last-child { display: none; }
  .entwurf-leiste span { display: none; }
  .entwurf-zeile { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
  .notiz-links::before { content: "↑ "; }
  .notiz-rechts { display: none; }
  .entwurf-notizen .notiz:nth-child(3) { display: none; }
  .hero-foto { order: -1; max-width: 112px; }
  .hero-foto img { border-radius: 50%; }
  .hero .lead { font-size: var(--t-text); }
  .hero-notiz { display: none; }
  .hero-breit { text-align: left; }
  .hero-breit .hero-text { justify-items: start; }
  .hero-breit .aktionen { justify-content: flex-start; }
  .voranschlag dl > div { grid-template-columns: minmax(0, 1fr); }
  .voranschlag dd { text-align: left; }
  .leiste { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; gap: var(--s-2); padding: var(--s-2) var(--s-4) calc(var(--s-2) + env(safe-area-inset-bottom)); background: oklch(100% 0 0 / .9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--linie-zart); }
  .leiste a { flex: 1; display: grid; place-items: center; min-height: 46px; border-radius: 980px; background: var(--grau); font-weight: 500; text-decoration: none; color: var(--tinte); }
  .leiste a + a { background: var(--gruen); color: var(--weiss); }
  body:has(.leiste) { padding-bottom: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .wizard-fortschritt span, .knopf, .kachel { transition: none; }
}

/* ------------------------------------------------------------------
   Liquid Glass (ab 08.10.2026 fest eingebaut, Prinzip nach github.com/nikdelvin/liquid-glass, MIT):
   SVG-Verzerrung im backdrop-filter. Chrome, Edge, Firefox zeigen Lichtbrechung,
   Safari (auch Chrome auf iPhone/iPad) automatisch Milchglas.
   ------------------------------------------------------------------ */

/* Farbflächen hinter dem Glas: ohne etwas Farbe ist Glas auf Weiß unsichtbar */
body {
  background-color: var(--weiss);
  background-image:
    radial-gradient(38% 42% at 8% 12%, oklch(86% 0.09 163 / .55), transparent 72%),
    radial-gradient(34% 40% at 92% 30%, oklch(90% 0.07 163 / .45), transparent 72%),
    radial-gradient(30% 36% at 70% 88%, oklch(88% 0.03 240 / .45), transparent 72%),
    radial-gradient(36% 40% at 20% 80%, oklch(91% 0.06 170 / .45), transparent 72%);
  background-attachment: fixed;
}
.flaeche, .nacht { background: oklch(97.3% 0.002 250 / .45); }
.fuss { background: var(--logo-navy); }

/* Gemeinsamer Glas-Look */
.kopf,
.glaskarte,
.kachel,
.blatt,
.panel,
.protokoll,
.vergleich > div,
.anfrage,
.fakten,
.wizard-block,
.block:not(.flaeche):not(.nacht) .blatt,
.block:not(.flaeche) .panel,
.block:not(.flaeche) .protokoll,
.hero .blatt {
  background: oklch(100% 0 0 / .42);
  border: 1px solid oklch(100% 0 0 / .7);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / .8),
    inset 0 -1px 0 oklch(100% 0 0 / .3),
    0 10px 30px oklch(21% 0.006 260 / .08);
  -webkit-backdrop-filter: blur(18px) saturate(175%);
  backdrop-filter: blur(18px) saturate(175%);
}
.wizard-optionen { background: oklch(100% 0 0 / .55); border: 1px solid oklch(100% 0 0 / .7); }
.wizard-option { background: transparent; }
.wizard-option:hover { background: oklch(100% 0 0 / .5); }
.mini-karte, .entwurf-flaeche { background: oklch(100% 0 0 / .45); }
.entwurf-raster div { background: oklch(100% 0 0 / .6); }
.knopf-leise, .flaeche .knopf-leise, .panel .knopf-leise { background: oklch(100% 0 0 / .55); border: 1px solid oklch(100% 0 0 / .7); }
.anfrage input, .anfrage select, .anfrage textarea { background: oklch(100% 0 0 / .7); }

/* Kopfzeile: beim Scrollen läuft der Inhalt sichtbar unter dem Glas durch */
.kopf {
  background: oklch(100% 0 0 / .4);
  border: 0;
  border-bottom: 1px solid oklch(100% 0 0 / .7);
  box-shadow: inset 0 -1px 0 oklch(21% 0.006 260 / .06), 0 6px 24px oklch(21% 0.006 260 / .06);
}

/* Echte Lichtbrechung, wo der Browser SVG-Filter im backdrop-filter kann */
.glas-brechung .kopf { backdrop-filter: url(#glas-leicht) blur(10px) saturate(180%); }
.glas-brechung .glaskarte { backdrop-filter: url(#glas-brechung) blur(6px) saturate(170%); }
.glas-brechung .kachel,
.glas-brechung .blatt,
.glas-brechung .panel,
.glas-brechung .protokoll,
.glas-brechung .vergleich > div,
.glas-brechung .anfrage,
.glas-brechung .fakten,
.glas-brechung .wizard-block { backdrop-filter: url(#glas-leicht) blur(14px) saturate(175%); }

/* Glaskarte über dem Hero-Foto */
.hero-foto { position: relative; }
.glaskarte {
  position: absolute;
  left: var(--s-5);
  right: var(--s-5);
  bottom: var(--s-5);
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-5);
  border-radius: 20px;
  background: oklch(100% 0 0 / .5);
  border: 1px solid oklch(100% 0 0 / .6);
  color: var(--tinte);
  isolation: isolate;
}
.glaskarte-titel { font-size: var(--t-klein); font-weight: 600; color: var(--tinte-2); }
.glaskarte a { font: 600 1.625rem/1.1 var(--f-display); letter-spacing: -0.02em; color: var(--tinte); text-decoration: none; justify-self: start; }
.glaskarte a:hover { color: var(--gruen-dunkel); }
.glaskarte p { font-size: var(--t-klein); color: var(--tinte); }

@media (min-width: 641px) {
  .hero-notiz { display: none; }
}

@media (max-width: 900px) {
  .kopf nav { background: oklch(100% 0 0 / .85); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
}

@media (max-width: 640px) {
  .glaskarte { display: none; }
  .hero-notiz { display: block; }
  body { background-attachment: scroll; }
}

.glas-filter { position: absolute; width: 0; height: 0; overflow: hidden; }
@media (max-width: 900px) {
  .hero::before { right: -8%; top: 2%; opacity: .07; }
}

/* Startseite: Düsseldorf (Medienhafen) über den ganzen Hero, auch unter der Glas-Kopfzeile
   Foto: Anja (cocoparisienne), Pixabay-Inhaltslizenz, pixabay.com/de/photos/2402629 */
.hero-stadt { min-height: min(78vh, 760px); }
.hero-stadt::before { display: none; }
.hero-stadt::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(var(--kopf-hoehe) * -1);
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    linear-gradient(100deg, oklch(100% 0 0 / .9) 0%, oklch(100% 0 0 / .8) 40%, oklch(100% 0 0 / .25) 100%),
    url("img/duesseldorf.jpg") center 35% / cover no-repeat;
  background:
    linear-gradient(100deg, oklch(100% 0 0 / .9) 0%, oklch(100% 0 0 / .8) 40%, oklch(100% 0 0 / .25) 100%),
    image-set(url("img/duesseldorf.webp") type("image/webp"), url("img/duesseldorf.jpg") type("image/jpeg")) center 35% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, #000 82%, transparent);
}
@media (max-width: 900px) {
  .hero-stadt { min-height: 0; }
  .hero-stadt::after {
    background:
      linear-gradient(to bottom, oklch(100% 0 0 / .45), oklch(100% 0 0 / .85) 55%),
      url("img/duesseldorf.jpg") center 30% / cover no-repeat;
    background:
      linear-gradient(to bottom, oklch(100% 0 0 / .45), oklch(100% 0 0 / .85) 55%),
      image-set(url("img/duesseldorf.webp") type("image/webp"), url("img/duesseldorf.jpg") type("image/jpeg")) center 30% / cover no-repeat;
  }
}

/* Über uns: Foto neben den Gründer-Fakten */
.gruender { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, .75fr); gap: var(--s-5); align-items: stretch; }
.gruender-foto { display: block; min-height: 240px; }
.gruender-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; border-radius: var(--r-gross); background: var(--grau); }
.gruender + .fakten-titel { margin-top: var(--s-6); }
@media (max-width: 460px) {
  .gruender { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .gruender-foto { order: -1; width: min(100%, 280px); min-height: 0; }
  .gruender-foto img { height: auto; aspect-ratio: 4 / 5; }
}

/* Bewegung: ruhig, einmalig, nur transform und opacity.
   Hero beim Laden gestaffelt, weitere Inhalte beim Hereinscrollen (Klasse kommt aus seite.js). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes auftauchen { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes einblenden-bild { from { opacity: 0; } to { opacity: 1; } }

  .hero-text > * { animation: auftauchen .8s cubic-bezier(.22, 1, .36, 1) both; }
  .hero-text > :nth-child(2) { animation-delay: .08s; }
  .hero-text > :nth-child(3) { animation-delay: .16s; }
  .hero-text > :nth-child(4) { animation-delay: .24s; }
  .hero-text > :nth-child(5) { animation-delay: .32s; }
  .hero-stadt::after { animation: einblenden-bild 1.2s ease-out both; }

  .bewegt { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--verzug, 0s); }
  .bewegt.sichtbar { opacity: 1; transform: none; }

  .kachel { transition: box-shadow .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1); }
  .kachel:hover { transform: translateY(-3px); }
  .knopf { transition: background-color .2s ease, transform .15s ease; }
  .knopf:active { transform: scale(.97); }
  .glaskarte { transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
  .glaskarte:hover { transform: translateY(-2px); }
}

/* Kopfzeile: „Digital-Check anfragen“ erst zeigen, wenn der gleiche Knopf im Hero aus dem Bild ist */
@media (min-width: 981px) {
  .nav-cta { transition: opacity .3s ease, visibility .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
  .cta-doppelt .nav-cta { opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; }
}

/* Abschnitts-Anzeige im Kopf (Liquid Glass), erscheint nach dem Hero */
.abschnitt { position: relative; margin-right: auto; margin-left: var(--s-4); flex-shrink: 0; transition: opacity .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1), visibility .35s; }
.abschnitt.aus { opacity: 0; visibility: hidden; transform: translateY(-6px); }
.abschnitt-knopf {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 38px; padding: 6px 14px 6px 16px;
  font: 500 0.875rem/1 var(--f); color: var(--tinte); letter-spacing: -0.01em;
  border-radius: 980px; cursor: pointer;
  background: oklch(100% 0 0 / .38);
  border: 1px solid oklch(100% 0 0 / .75);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .85), inset 0 -1px 0 oklch(100% 0 0 / .3), 0 4px 16px oklch(21% 0.006 260 / .08);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
}
.glas-brechung .abschnitt-knopf { backdrop-filter: url(#glas-leicht) blur(10px) saturate(180%); }
.abschnitt-knopf:hover { background: oklch(100% 0 0 / .55); }
.abschnitt-knopf:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }
.abschnitt-name { display: inline-block; white-space: nowrap; max-width: 190px; overflow: hidden; text-overflow: ellipsis; transition: opacity .14s ease, transform .14s ease; }
.wechsel .abschnitt-name { opacity: 0; transform: translateY(4px); }
.abschnitt-pfeil { width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid var(--tinte-2); border-bottom: 1.5px solid var(--tinte-2); transform: rotate(45deg); transition: transform .25s ease; }
.abschnitt-knopf[aria-expanded="true"] .abschnitt-pfeil { transform: translateY(3px) rotate(-135deg); }
.abschnitt-liste {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px; list-style: none;
  padding: var(--s-2); border-radius: 18px;
  /* fast deckend: ein backdrop-filter innerhalb der Glas-Kopfzeile sieht die Seite dahinter nicht */
  background: oklch(99% 0.004 165 / .96);
  border: 1px solid oklch(100% 0 0 / .8);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .9), 0 16px 40px oklch(21% 0.006 260 / .14);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
}
.abschnitt-liste a { display: block; padding: 10px 12px; border-radius: 10px; font-size: 0.9375rem; color: var(--tinte-2); text-decoration: none; }
.abschnitt-liste a:hover { background: oklch(100% 0 0 / .7); color: var(--tinte); }
.abschnitt-liste a[aria-current] { color: var(--tinte); font-weight: 600; background: oklch(50% 0.11 165 / .1); }
@media (min-width: 981px) and (max-width: 1199px) { .abschnitt { display: none; } }
@media (max-width: 980px) {
  .abschnitt { margin-left: var(--s-3); }
  .abschnitt-knopf { min-height: 40px; padding-inline: 12px; }
  .abschnitt-name { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
}
.kopf .marke { white-space: nowrap; }
/* Schmale Handys: Wortmarke weicht der Abschnitts-Anzeige, das Logo-Zeichen bleibt */
.marke span { transition: opacity .25s ease; }
@media (max-width: 480px) {
  .kopf-innen:has(.abschnitt:not(.aus)) .marke span { display: none; }
  .abschnitt.aus { display: none; }
  @starting-style { .abschnitt { opacity: 0; transform: translateY(-6px); } }
}

/* Grüne Glas-Knöpfe: alle Hauptknöpfe der Seite, „Digital-Check anfragen“ im Kopf und in der Handy-Leiste */
.knopf,
.kopf nav .nav-cta,
.leiste a + a {
  color: var(--weiss);
  background: linear-gradient(180deg, oklch(44% 0.11 165 / .86), oklch(37% 0.1 165 / .9));
  border: 1px solid oklch(82% 0.09 165 / .55);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / .4),
    inset 0 -1px 0 oklch(20% 0.05 165 / .25),
    0 8px 24px oklch(40% 0.1 165 / .22);
  text-shadow: 0 1px 1px oklch(20% 0.05 165 / .35);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
}
.glas-brechung .knopf,
.glas-brechung .kopf nav .nav-cta { backdrop-filter: url(#glas-leicht) blur(8px) saturate(180%); }
.knopf:hover,
.kopf nav .nav-cta:hover,
.leiste a + a:hover {
  color: var(--weiss);
  background: linear-gradient(180deg, oklch(48% 0.11 165 / .9), oklch(40% 0.1 165 / .94));
}
@media (min-width: 1200px) {
  .kopf .marke, .kopf nav a { white-space: nowrap; }
  .kopf nav { gap: 22px; }
}

/* Helle Glas-Knöpfe als Gegenstück: „Anrufen“ in der Handy-Leiste und Nebenknöpfe */
.knopf-leise,
.leiste a:first-child {
  background: oklch(100% 0 0 / .5);
  border: 1px solid oklch(100% 0 0 / .8);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .9), inset 0 -1px 0 oklch(100% 0 0 / .3), 0 6px 18px oklch(21% 0.006 260 / .07);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
}
.knopf-leise:hover, .leiste a:first-child:hover { background: oklch(100% 0 0 / .7); }
.bewerbung input[type="file"]::file-selector-button {
  color: var(--weiss);
  background: linear-gradient(180deg, oklch(44% 0.11 165 / .86), oklch(37% 0.1 165 / .9));
  border: 1px solid oklch(82% 0.09 165 / .55);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .4), inset 0 -1px 0 oklch(20% 0.05 165 / .25), 0 4px 12px oklch(40% 0.1 165 / .2);
}
.bewerbung input[type="file"]:hover::file-selector-button { color: var(--weiss); background: linear-gradient(180deg, oklch(48% 0.11 165 / .9), oklch(40% 0.1 165 / .94)); }

/* Navigation: aktuelle Seite als Glas-Pille statt grüner Unterstrich (wie die Abschnitts-Anzeige) */
.kopf nav a[aria-current="page"]:not(.nav-cta) { text-decoration: none; }
@media (min-width: 981px) {
  .kopf nav { gap: 6px; }
  .kopf nav a:not(.nav-cta) {
    padding: 8px 12px;
    border-radius: 980px;
    border: 1px solid transparent;
    transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, color .2s ease;
  }
  .kopf nav a:not(.nav-cta):hover { background: oklch(100% 0 0 / .32); }
  .kopf nav a[aria-current="page"]:not(.nav-cta) {
    color: var(--tinte);
    background: oklch(100% 0 0 / .38);
    border-color: oklch(100% 0 0 / .75);
    box-shadow: inset 0 1px 0 oklch(100% 0 0 / .85), inset 0 -1px 0 oklch(100% 0 0 / .3), 0 4px 16px oklch(21% 0.006 260 / .08);
  }
  .kopf nav .nav-cta { margin-left: 8px; }
}
@media (min-width: 1200px) {
  .kopf nav { gap: 0; }
  .kopf nav a:not(.nav-cta) { padding-inline: 10px; }
}
@media (max-width: 980px) {
  .kopf nav a[aria-current="page"]:not(.nav-cta) { font-weight: 600; }
}

/* Preise-Seite: Einstieg nach Anliegen und Zusagen, redaktionelle Liste statt Karten */
.einstiege-wrap { max-width: 860px; margin-inline: auto; }
.einstiege { list-style: none; margin-top: var(--s-6); border-bottom: 1px solid var(--linie); }
.einstiege li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-6); padding: var(--s-5) 0; border-top: 1px solid var(--linie); }
.einstiege strong { font: 600 var(--t-gross)/1.25 var(--f-display); letter-spacing: -0.015em; }
.einstiege span { grid-column: 1; color: var(--tinte-2); max-width: 62ch; }
.einstiege em { grid-column: 2; grid-row: 1 / span 2; align-self: start; font-style: normal; font-weight: 600; color: var(--gruen-dunkel); text-align: right; white-space: nowrap; padding-top: 4px; }
.zusagen { list-style: none; margin-top: var(--s-6); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); font-size: var(--t-klein); color: var(--tinte-2); }
.zusagen li { padding-top: var(--s-3); border-top: 1px solid var(--linie); }
.zusagen strong { display: block; color: var(--tinte); font-size: var(--t-text); margin-bottom: var(--s-1); }
@media (max-width: 760px) {
  .einstiege li { grid-template-columns: minmax(0, 1fr); }
  .einstiege em { grid-column: 1; grid-row: auto; text-align: left; white-space: normal; padding-top: var(--s-1); }
  .zusagen { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
}

/* Einwilligungs-Fenster: klein, unten links, kein Overlay; beide Wahlmöglichkeiten gleich gewichtet */
.einwilligung {
  position: fixed; z-index: 30; left: var(--s-5); bottom: var(--s-5);
  width: min(420px, calc(100vw - 2 * var(--s-4)));
  padding: var(--s-5); border-radius: 22px;
  display: grid; gap: var(--s-3);
  font-size: var(--t-klein); color: var(--tinte-2);
  background: oklch(99% 0.004 165 / .82);
  border: 1px solid oklch(100% 0 0 / .8);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .9), 0 18px 48px oklch(21% 0.006 260 / .16);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
}
.einwilligung[hidden] { display: none; }
.einwilligung-titel { font: 600 var(--t-text)/1.3 var(--f-display); color: var(--tinte); }
.einwilligung a { color: var(--gruen-dunkel); }
.einwilligung-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-top: var(--s-1); }
.einwilligung-knoepfe .knopf-leise { min-height: 44px; padding: 0 var(--s-3); font-size: var(--t-klein); border: 1px solid var(--linie); cursor: pointer; }
.einwilligung-knoepfe .knopf-leise:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .einwilligung { animation: auftauchen .6s cubic-bezier(.22, 1, .36, 1) .6s both; }
}
@media (max-width: 640px) {
  .einwilligung { left: var(--s-4); right: var(--s-4); width: auto; bottom: calc(78px + env(safe-area-inset-bottom)); }
}
.fuss .fuss-knopf { background: none; border: 0; padding-block: var(--s-3); padding-inline: 0; font: inherit; color: var(--logo-mint); cursor: pointer; }
.fuss .fuss-knopf:hover { text-decoration: underline; }
.einwilligung-details summary { cursor: pointer; color: var(--gruen-dunkel); font-weight: 500; width: max-content; }
.einwilligung-details[open] summary { margin-bottom: var(--s-2); }
.einwilligung-art { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; padding: var(--s-3) 0; border-top: 1px solid var(--linie-zart); cursor: pointer; }
.einwilligung-art input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gruen); }
.einwilligung-art input:disabled { cursor: not-allowed; }
.einwilligung-art strong { display: block; color: var(--tinte); }
.einwilligung-speichern { width: 100%; min-height: 40px; margin-top: var(--s-2); font-size: var(--t-klein); border: 1px solid var(--linie); cursor: pointer; }
.einwilligung { max-height: calc(100dvh - 2 * var(--s-5)); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 640px) { .einwilligung { max-height: calc(100dvh - 110px - env(safe-area-inset-bottom)); } }