/* ============================================================
   Stammliebe Marketing-Website – Design-System «Optimum»
   Stand 28.08.2026 · Quelle: Spezifikation Anhang B
   Helle Papier-Welt mit Tannengrün-Ankern und Bernstein als
   reiner Handlungsfarbe. Alle Text/Grund-Paare WCAG AA geprüft.
   Wird NUR von den Marketing-Seiten geladen (nicht von App/Admin).
   ============================================================ */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-var.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/source-sans-3-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Grundflächen hell */
  --papier: #FBF8F1;
  --papier-tief: #F1EBDD;
  --karte: #FFFFFF;
  --linie: #E2DAC8;
  --linie-stark: #C9BFA8;
  /* Text hell */
  --tinte: #26211A;
  --gedaempft: #5E5747;
  --bernstein-tief: #7D5E20;
  --tanne-link: #2E5C41;
  /* Marke / dunkle Sektionen */
  --tanne-950: #0F1712;
  --tanne-900: #14231B;
  --tanne-800: #1B2820;
  --creme: #F2EFE4;
  --salbei: #AFBEB2;
  --linie-dunkel: rgba(242, 239, 228, .14);
  /* Akzent */
  --bernstein: #E4A33C;
  --bernstein-ink: #241A08;
  --bernstein-hof: rgba(228, 163, 60, .12);
  /* Zustände */
  --erfolg-tief: #1F6B3E;
  --warn-tief: #A63D1F;
  /* Schrift */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  /* Schatten */
  --schatten-ruhend: 0 1px 3px rgba(38, 33, 26, .07);
  --schatten-gehoben: 0 12px 32px rgba(38, 33, 26, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--tanne-link); }
a:hover { color: var(--tinte); }
p { margin: 0 0 14px; max-width: 68ch; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.18; margin: 0 0 12px; }
h1 { font-size: clamp(31px, 5.4vw, 50px); }
h2 { font-size: clamp(26px, 3.6vw, 37px); }
h3 { font-size: 19px; font-family: var(--sans); font-weight: 700; line-height: 1.35; }
h1 em, h2 em { font-style: normal; color: var(--bernstein-tief); }
b, strong { font-weight: 700; }

/* Fokus & Zugänglichkeit */
:focus-visible { outline: 3px solid var(--bernstein-tief); outline-offset: 3px; border-radius: 4px; }
.tanne :focus-visible, .fuss :focus-visible { outline-color: var(--bernstein); }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--bernstein); color: var(--bernstein-ink);
  padding: 10px 18px; border-radius: 0 0 12px 0; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Layout */
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.sektion { padding: 64px 0; }
.sektion--tief { background: var(--papier-tief); }
.sektion--tanne { background: var(--tanne-900); color: var(--creme); }
.sektion--tanne h1, .sektion--tanne h2 { color: var(--creme); }
.sektion--tanne p { color: var(--salbei); }
.sektion--tanne h1 em { color: var(--bernstein); }
.kopfblock { max-width: 860px; margin-bottom: 32px; }
.kicker {
  display: block; font-size: 14px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bernstein-tief); margin-bottom: 10px;
}
.sektion--tanne .kicker { color: var(--bernstein); }
.unterzeile { font-size: 19px; color: var(--gedaempft); }
.sektion--tanne .unterzeile { color: var(--salbei); }

/* Navigation */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--papier); border-bottom: 1px solid var(--linie);
}
.nav-innen {
  max-width: 1160px; margin: 0 auto; padding: 0 20px;
  min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.logo {
  font-family: var(--serif); font-weight: 600; font-size: 23px;
  color: var(--tinte); text-decoration: none;
}
.logo .dot { color: var(--bernstein); }
.nav-links { display: none; align-items: center; gap: 26px; }
.nav-links a { font-size: 16px; font-weight: 600; color: var(--gedaempft); text-decoration: none; padding: 8px 0; }
.nav-links a:hover { color: var(--tinte); }
.nav-links a[aria-current="page"] { color: var(--tinte); border-bottom: 2px solid var(--bernstein); }
.nav-cta { white-space: nowrap; }
.menue-knopf {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 8px 14px;
  background: none; border: 1.5px solid var(--tinte); border-radius: 12px;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--tinte);
  cursor: pointer; text-decoration: none;
}
.m-menue {
  position: fixed; inset: 0; z-index: 60; background: var(--papier);
  padding: 12px 20px 32px; overflow: auto; display: none;
}
.m-menue.offen { display: block; }
.m-menue-kopf { display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.m-menue-schliessen {
  min-width: 48px; min-height: 48px; border: 1.5px solid var(--tinte); border-radius: 12px;
  background: none; font-size: 22px; font-weight: 700; color: var(--tinte); cursor: pointer;
}
.m-menue nav a {
  display: block; padding: 15px 4px; font-size: 18px; font-weight: 600;
  color: var(--tinte); text-decoration: none; border-bottom: 1px solid var(--linie);
}
.m-menue .btn { margin-top: 20px; width: 100%; }
body.menue-offen { overflow: hidden; }
@media (min-width: 900px) {
  .nav-innen { min-height: 72px; }
  .nav-links { display: flex; }
  .menue-knopf { display: none; }
}

/* Knöpfe */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  background: var(--bernstein); color: var(--bernstein-ink);
  font-weight: 700; font-size: 17px; line-height: 1.3;
  border: 0; border-radius: 12px; padding: 13px 24px; min-height: 48px;
  text-decoration: none; cursor: pointer; box-shadow: var(--schatten-ruhend);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  font-family: var(--sans);
}
.btn:hover { filter: brightness(.96); box-shadow: var(--schatten-gehoben); color: var(--bernstein-ink); }
.btn:active { transform: translateY(1px); }
.btn--sekundaer {
  background: transparent; color: var(--tinte); border: 1.5px solid var(--tinte); box-shadow: none;
}
.btn--sekundaer:hover { background: var(--papier-tief); color: var(--tinte); filter: none; }
.sektion--tanne .btn--sekundaer, .btn--hell { background: transparent; color: var(--creme); border: 1.5px solid var(--creme); box-shadow: none; }
.sektion--tanne .btn--sekundaer:hover, .btn--hell:hover { background: rgba(242, 239, 228, .08); color: var(--creme); filter: none; }
.cta-reihe { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 8px 0 10px; }
.cta-reihe .btn { flex: 1 1 260px; max-width: 420px; }
@media (min-width: 720px) { .cta-reihe .btn { flex: 0 0 auto; } }
.vertrauenszeile { font-style: italic; font-size: 14px; color: var(--gedaempft); margin: 4px 0 0; }
.sektion--tanne .vertrauenszeile { color: var(--salbei); }
.pilot-hinweis { font-size: 14.5px; color: var(--gedaempft); margin-top: 8px; }
.sektion--tanne .pilot-hinweis { color: var(--salbei); }

/* Chips */
.chip {
  display: inline-flex; align-items: center;
  background: var(--bernstein-hof); color: var(--bernstein-tief);
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  border-radius: 999px; padding: 4px 12px; white-space: nowrap;
}
.chip--heute { background: rgba(31, 107, 62, .1); color: var(--erfolg-tief); }

/* Hero */
.hero { padding: 72px 0 80px; }
.hero-raster { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .hero-raster { grid-template-columns: 11fr 9fr; gap: 64px; } .hero { padding: 88px 0 96px; } }
.hero .lead { font-size: 19px; line-height: 1.55; max-width: 56ch; }
.hero-bild { display: flex; justify-content: center; }
.hero-bild svg { width: 100%; max-width: 460px; }

/* Karten & Raster */
.karten { display: grid; gap: 20px; margin: 24px 0; }
.karten--2 { grid-template-columns: 1fr; }
.karten--3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .karten--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .karten--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.karte {
  background: var(--karte); border-radius: 16px; padding: 26px;
  box-shadow: var(--schatten-ruhend); display: flex; flex-direction: column; gap: 10px;
}
.karte p { margin: 0; font-size: 16px; color: var(--gedaempft); }
.karte .ico { color: var(--tanne-link); }
.zitatkarte {
  background: var(--karte); border-left: 4px solid var(--bernstein); border-radius: 16px;
  padding: 22px 24px; box-shadow: var(--schatten-ruhend); margin: 20px 0;
}
.zitatkarte p { font-family: var(--serif); font-size: 21px; line-height: 1.45; margin: 0; color: var(--tinte); }

/* Kreislauf */
.kreislauf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 28px 0 16px; padding: 0; counter-reset: schritt; }
@media (min-width: 900px) { .kreislauf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kreislauf li {
  list-style: none; background: var(--karte); border-radius: 16px; padding: 24px;
  box-shadow: var(--schatten-ruhend); display: flex; flex-direction: column; gap: 10px;
}
.kreislauf .nrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kreislauf .n {
  width: 36px; height: 36px; border-radius: 999px; flex: none;
  background: var(--bernstein); color: var(--bernstein-ink);
  font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center;
}
.kreislauf b { font-size: 17px; line-height: 1.4; }
.kreislauf p { margin: 0; font-size: 15px; color: var(--gedaempft); }
.status-heute { font-size: 13px; font-weight: 700; color: var(--erfolg-tief); }

/* Schrittliste (Branchenseiten) */
.schritte { display: flex; flex-direction: column; gap: 14px; margin: 24px 0; padding: 0; }
.schritte li {
  list-style: none; background: var(--karte); border-radius: 16px; padding: 22px 24px;
  box-shadow: var(--schatten-ruhend); display: flex; gap: 18px; align-items: flex-start;
}
.schritte .n {
  width: 36px; height: 36px; border-radius: 999px; flex: none; margin-top: 2px;
  background: var(--bernstein); color: var(--bernstein-ink);
  font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.schritte .inhalt { display: flex; flex-direction: column; gap: 8px; font-size: 16px; }
.schritte .inhalt p { margin: 0; }
.schritte .chip { align-self: flex-start; }
[data-page="beispiel"] .schritte li { flex-direction: column; gap: 10px; min-width: 0; }

/* Branchenkarten */
.branchen-raster { display: grid; gap: 20px; margin: 28px 0 20px; }
@media (min-width: 640px) { .branchen-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .branchen-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.branchen-karte {
  position: relative; background: var(--karte); border-radius: 16px; padding: 26px;
  box-shadow: var(--schatten-ruhend); display: flex; flex-direction: column; gap: 9px;
  border: 1px solid transparent; transition: box-shadow .15s ease, border-color .15s ease;
}
.branchen-karte:hover { box-shadow: var(--schatten-gehoben); border-color: var(--linie-stark); }
.branchen-karte h3 { margin: 0; }
.branchen-karte .pain { color: var(--gedaempft); font-size: 15px; margin: 0; }
.branchen-karte .ergebnis { font-size: 15px; margin: 0; }
.branchen-karte a {
  font-weight: 700; font-size: 15px; text-decoration: none; margin-top: 4px;
}
.branchen-karte a::after { content: ""; position: absolute; inset: 0; }
.branchen-karte .ico { color: var(--tanne-link); }

/* Gegenüberstellung / Synergie */
.synergie-liste { display: flex; flex-direction: column; gap: 14px; margin: 24px 0; }
.synergie-liste .karte { flex-direction: row; gap: 18px; align-items: flex-start; }
.synergie-liste .ico { flex: none; margin-top: 3px; }
.synergie-liste .titelzeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.synergie-liste .titelzeile b { font-size: 17px; }

/* Formular-Bausteine */
.feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.feld label { font-size: 15px; font-weight: 600; }
.feld .hinweis { font-size: 13px; color: var(--gedaempft); }
.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld textarea, #g-paket {
  font: inherit; font-size: 16px; color: var(--tinte);
  background: var(--karte); border: 1.5px solid var(--linie-stark); border-radius: 12px;
  padding: 12px 16px; min-height: 48px; width: 100%;
}
.feld textarea { min-height: 120px; resize: vertical; }
.feld input:focus, .feld textarea:focus, #g-paket:focus { outline: 3px solid var(--bernstein-tief); outline-offset: 1px; border-color: var(--bernstein-tief); }
.feld.fehlerhaft input, .feld.fehlerhaft textarea { border-color: var(--warn-tief); border-width: 2px; }
.feldfehler { display: none; font-size: 14px; color: var(--warn-tief); font-weight: 600; }
.feld.fehlerhaft .feldfehler { display: block; }
.einwilligung { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0; font-size: 15px; }
.einwilligung input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--bernstein); }
.datenschutz-kasten {
  background: var(--papier-tief); border-radius: 12px; padding: 14px 16px;
  font-size: 13.5px; line-height: 1.55; color: var(--gedaempft); margin: 16px 0;
}
.formfehler {
  display: none; background: #FBEDE7; border: 1.5px solid var(--warn-tief); color: var(--warn-tief);
  border-radius: 12px; padding: 12px 16px; font-weight: 600; font-size: 15px; margin: 0 0 16px;
}

/* Wahlkarten (Fragebogen) */
.wahl { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 6px; }
.wahl label {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--karte); border: 1.5px solid var(--linie-stark); border-radius: 12px;
  padding: 15px 18px; min-height: 56px; font-size: 16.5px; line-height: 1.45; cursor: pointer;
}
.wahl label:hover { border-color: var(--bernstein-tief); }
.wahl input { width: 22px; height: 22px; margin-top: 1px; flex: none; accent-color: var(--bernstein); }
.wahl label:has(input:checked) { border-color: var(--bernstein-tief); background: var(--bernstein-hof); }
.wahl input:focus-visible { outline: 3px solid var(--bernstein-tief); outline-offset: 2px; }

/* Fragebogen-Schritte */
.check-schritt { max-width: 720px; }
.check-karte {
  background: var(--karte); border-radius: 20px; padding: 28px 22px;
  box-shadow: var(--schatten-gehoben); margin: 0 0 24px;
}
@media (min-width: 720px) { .check-karte { padding: 44px; } }
.fortschritt { margin-bottom: 20px; }
.fortschritt .zeile { font-size: 15.5px; font-weight: 600; margin-bottom: 8px; }
.fortschritt .balken { height: 6px; border-radius: 999px; background: var(--linie); overflow: hidden; }
.fortschritt .balken > div { height: 6px; background: var(--bernstein); border-radius: 999px; transition: width .25s ease; }
.fortschritt .ruhig { font-size: 13.5px; color: var(--gedaempft); margin-top: 8px; }
.check-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 26px; }
.check-nav .zurueck {
  background: none; border: 0; font: inherit; font-size: 16px; font-weight: 600;
  color: var(--tanne-link); cursor: pointer; padding: 12px 8px; min-height: 48px;
}
.js .check-schritt-panel[hidden] { display: none; }

/* Leistungs-Karten heute vs. schrittweise */
.leistungen { display: grid; gap: 20px; margin: 28px 0; }
@media (min-width: 860px) { .leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.leistung-gruppe { border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 15px; }
.leistung-gruppe--heute { background: var(--karte); box-shadow: var(--schatten-ruhend); }
.leistung-gruppe--spaeter { background: var(--papier-tief); border: 1px solid var(--linie-stark); }
.leistung-gruppe .gruppen-titel {
  font-size: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--erfolg-tief);
}
.leistung { display: flex; gap: 12px; font-size: 16px; }
.leistung .mark { flex: none; font-weight: 700; color: var(--erfolg-tief); }
.leistung-gruppe--spaeter .leistung .mark { color: var(--gedaempft); }
.leistung p { margin: 0; }

/* FAQ */
.faq { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--linie-stark); }
.faq details:first-of-type { border-top: 1px solid var(--linie-stark); }
.faq summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 17px 6px; min-height: 56px; font-size: 17.5px; font-weight: 700; cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; color: var(--gedaempft); flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { background: var(--papier-tief); }
.faq details p { padding: 0 6px 18px; margin: 0; font-size: 16px; max-width: 68ch; }

/* Evidenz (Studienlage) – helle Fassung */
.evidence-grid { display: grid; gap: 20px; margin: 24px 0; }
@media (min-width: 860px) { .evidence-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.evidence-card {
  background: var(--karte); border-radius: 16px; padding: 24px;
  box-shadow: var(--schatten-ruhend); display: flex; flex-direction: column; gap: 10px;
}
.evidence-label { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--bernstein-tief); text-transform: uppercase; }
.evidence-card h3 { margin: 0; }
.evidence-card p { margin: 0; font-size: 15px; color: var(--gedaempft); }
.evidence-bridge { color: var(--tinte) !important; }
.evidence-source { font-weight: 700; font-size: 14.5px; margin-top: auto; }
.evidence-principle { display: grid; gap: 16px; margin: 24px 0; }
@media (min-width: 720px) { .evidence-principle { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.evidence-step { background: var(--papier-tief); border-radius: 14px; padding: 18px 20px; }
.evidence-step span { display: block; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--bernstein-tief); margin-bottom: 4px; }
.evidence-step b { display: block; font-size: 17px; margin-bottom: 4px; }
.evidence-step p { margin: 0; font-size: 14.5px; color: var(--gedaempft); }
.evidence-note { font-size: 15px; color: var(--gedaempft); border-top: 1px solid var(--linie-stark); padding-top: 16px; }

/* Grundsätze */
.grundsaetze { display: grid; gap: 14px 28px; margin: 20px 0; }
@media (min-width: 780px) { .grundsaetze { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grundsaetze div { font-size: 15.5px; line-height: 1.55; }

/* Abschlussband */
.abschluss { text-align: center; }
.abschluss .innen { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.abschluss .cta-reihe { justify-content: center; }

/* Fusszeile */
.fuss { background: var(--tanne-950); color: var(--salbei); padding: 56px 0 28px; }
.fuss a { color: var(--salbei); text-decoration: none; }
.fuss a:hover { color: var(--creme); }
.fuss-raster { display: grid; gap: 32px; }
@media (min-width: 860px) { .fuss-raster { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.fuss .logo { color: var(--creme); }
.fuss-titel { font-size: 13.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--creme); margin-bottom: 6px; }
.fuss nav { display: flex; flex-direction: column; }
.fuss nav a { padding: 8px 0; font-size: 15px; min-height: 40px; display: flex; align-items: center; }
.fuss .beschrieb { font-size: 14px; line-height: 1.6; margin-top: 10px; max-width: 46ch; }
.fuss-schluss { border-top: 1px solid var(--linie-dunkel); margin-top: 36px; padding-top: 20px; display: flex; flex-direction: column; gap: 6px; }
.fuss-schluss .vertrauenszeile { color: var(--salbei); }
.fuss-schluss small { font-size: 13px; }

/* Länderansprache im Hero – tritt hinter den Marken-Kicker zurück. */
.kicker--land { display: block; opacity: .78; margin-top: 2px; }

/* Länderansicht-Korrektur: eine ruhige Zeile, kein Modal. Wer ohnehin
   richtig einsortiert ist, soll davon nichts merken. */
.land-korrektur { font-size: 13px; color: var(--gedaempft); margin: 4px 0 0; }
.land-korrektur-knopf {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--salbei); text-decoration: underline; text-underline-offset: 2px;
}
.land-korrektur-knopf:hover, .land-korrektur-knopf:focus-visible { color: var(--papier); }

/* Produkt und gemeinsame Gestaltung, September 2026. */
:root { --motion-fast: 160ms; --motion-base: 260ms; --motion-ease: cubic-bezier(.22,1,.36,1); --accent: #2E5C41; --accent-ink: #fff; --surface: #fff; --bg: var(--papier); --line: var(--linie); --text: var(--tinte); --muted: var(--gedaempft); }
#lhchat .fuss { background: white; font-size: 13px; }
html { scroll-padding-top: 100px; }
.nav { border-bottom: 1px solid var(--linie); }
.nav-links { gap: clamp(10px, 1.4vw, 22px); }
.nav-links a { font-size: 15px; }
.nav-links a.btn { color: var(--bernstein-ink); }
.btn { min-height: 48px; transition: background var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-base); }
.btn:hover { box-shadow: 0 5px 18px #14231b18; }
.hero-studio { padding: clamp(48px, 7vw, 100px) 0; }
.hero-studio .hero-raster { align-items: center; gap: clamp(32px, 5vw, 72px); }
.hero-copy { min-width: 0; }
.hero-studio h1 { font-size: clamp(40px, 4.5vw, 62px); letter-spacing: -.035em; line-height: 1.07; margin: 24px 0; }
.hero-studio h1 em { display: inline-block; }
.hero-studio .lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; max-width: 42ch; }
.hero-studio .cta-reihe { align-items: flex-start; flex-direction: column; gap: 18px; margin: 30px 0 24px; }
.hero-studio .cta-reihe .btn { flex: 0 1 auto; max-width: 100%; }

/* Public platform directory: stable pages for each role, no script required. */
.platform-intro { padding-bottom: 56px; }
.platform-intro h1 { max-width: 20ch; font-size: clamp(38px,5vw,68px); line-height: 1.08; letter-spacing: -.035em; }
.platform-intro .lead { max-width: 60ch; margin-bottom: 28px; }
.platform-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 44px; font-size: 14px; }
.platform-switcher { border-block: 1px solid #cbd4c8; background: #eef1e9; }
.platform-switcher nav { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-block: 12px; }
.platform-switcher a { padding: 10px 16px; border-radius: 7px; color: #244632; font-weight: 600; }
.platform-switcher a[aria-current="page"] { color: #fff; background: #193e2b; }
.platform-area-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.platform-area,.platform-function { padding: clamp(24px,3vw,40px); border: 1px solid #ccd5c8; border-radius: 20px; background: #fffefa; min-width: 0; }
.platform-area { display: flex; flex-direction: column; position: relative; }
.platform-area h3 { font-size: clamp(25px,3vw,34px); margin: 12px 0; }
.platform-area h3 a { text-decoration: none; color: #193e2b; }
.platform-number { color: #657360; font: 500 32px/1.2 var(--font-display,serif); }
.platform-access { margin: 20px 0 0; color: #52634f; font-size: 14px; }
.platform-area ul,.platform-function ul { padding-left: 20px; margin: 8px 0 28px; }
.platform-area li,.platform-function li { margin: 6px 0; }
.platform-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; color: #244632; font-weight: 600; margin-top: auto; }
.platform-link .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.platform-functions,.platform-flow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.platform-function { display: flex; flex-direction: column; }
.platform-function h3 { font-size: 26px; line-height: 1.15; }
.platform-flow { list-style: none; padding: 0; }
.platform-flow li { padding: 24px; border-top: 2px solid #6d826b; }
.platform-flow span { color: #52634f; font-size: 14px; }
.platform-flow h3 { font-size: 26px; }
.platform-note { max-width: 80ch; padding: 24px; margin: 32px 0 0; border-left: 3px solid #b68024; background: #f0eee5; }
@media(max-width:760px) {
  .platform-area-grid,.platform-functions,.platform-flow { grid-template-columns: minmax(0,1fr); }
  .platform-switcher nav { gap: 4px; }
  .platform-switcher a { padding: 10px 12px; }
  .platform-breadcrumb { margin-bottom: 28px; }
}
.hero-text-link { color: var(--creme); text-decoration: none; padding: 4px 0; border-bottom: 1px solid var(--salbei); }
.hero-text-link:hover { color: var(--bernstein); }
.hero-studio .hero-assurance { font-size: 14px; line-height: 1.6; }
.hero-index { display: flex; flex-wrap: wrap; gap: 16px; border-top: 1px solid var(--linie-dunkel); padding-top: 24px; margin-top: 32px; color: var(--salbei); font-size: 14px; }
.product-preview__scene { min-width: 0; border-radius: 24px; border: 1px solid #ffffff38; background: #f8faf6; padding: clamp(18px, 2.4vw, 30px); color: var(--tinte); box-shadow: 0 30px 60px #0003; }
.explorer-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.eyebrow { font-size: 12px; letter-spacing: .1em; font-weight: 700; color: #39513d; }
.status-pill { border: 1px solid #c5d1c5; padding: 3px 9px; border-radius: 20px; font-size: 12px; color: #39513d; }
.product-preview__scene h2 { color: #1a3023; font-size: clamp(25px, 2.5vw, 32px); letter-spacing: -.025em; }
.product-preview__scene p { color: #526052; }
.product-preview__scene .explorer-caption { font-size: 12px; margin: 10px 0 20px; }
.explorer-choices { display: flex; gap: 4px; border-bottom: 1px solid #ccd6cb; padding-bottom: 8px; margin-bottom: 16px; }
.explorer-choices a { flex: 1; text-align: center; font-size: 14px; padding: 8px 5px; text-decoration: none; border-radius: 8px; color: #35503b; line-height: 1.3; display: grid; align-items: center; min-height: 44px; }
.explorer-choices a[aria-selected="true"] { background: #1a3826; color: white; }
.explorer-choices a:hover { background: #e3eae1; color: #1a3826; }
.explorer-panel { background: white; border: 1px solid #d9e0d5; border-radius: 14px; margin-bottom: 14px; }
.explorer-window { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid #e5e9e2; padding: 12px 16px; font-size: 12px; color: #5b665a; }
.explorer-window > :first-child { color: #7b8976; letter-spacing: 3px; font-size: 9px; }
.explorer-content { padding: 20px; min-height: 302px; }
.explorer-content h3 { color: #1a3023; margin: 10px 0; font-size: 20px; }
.explorer-content p { font-size: 15px; }
.explorer-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #f1e8ce; color: #68470f; font-size: 28px; }
.demo-response { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #e0e6dc; border-radius: 9px; margin: 8px 0; font-size: 14px; }
.demo-response > :first-child { color: #537649; font-size: 20px; }
.explorer-content .explorer-note { font-size: 13px; margin: 14px 0 0; }
.explorer-list { padding-left: 19px; font-size: 15px; line-height: 1.8; }
.explorer-link { font-size: 14px; font-weight: 700; }
.explorer-bottom { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; text-decoration: none; padding: 4px 0; }
.product-preview__scene :focus-visible { outline-color: #805d1a; }
.service-strip { background: var(--bernstein); color: var(--bernstein-ink); padding: 20px 0; }
.service-strip .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 16px; }
.service-strip a { color: inherit; font-weight: 700; }
.branchen-karte, .evidence-card { transition: border-color var(--motion-base), box-shadow var(--motion-base); }
.branchen-karte:hover { border-color: var(--tanne-link); box-shadow: var(--schatten-gehoben); }
.faq-layout { display: grid; gap: 30px; }
.studio-faq details { border-bottom: 1px solid var(--linie-stark); padding: 0; }
.studio-faq details:first-child { border-top: 1px solid var(--linie-stark); }
.studio-faq summary { cursor: pointer; padding: 21px 25px 21px 0; font-size: 18px; font-weight: 600; }
.studio-faq details p { padding: 0 12px 14px 0; font-size: 16px; }
.studio-faq details[open] summary { color: var(--tanne-link); }
.form input, .form select, .form textarea, input, select, textarea { scroll-margin-top: 120px; }
@media (min-width: 900px) { .faq-layout { grid-template-columns: 1fr 1.6fr; gap: 72px; } }
@media (max-width: 1050px) and (min-width: 780px) { .nav-links { gap: 10px; } .nav-links .nav-cta { padding-inline: 12px; font-size: 13px; } }
@media (max-width: 600px) {
  .hero-studio h1 { font-size: clamp(36px, 9vw, 52px); }
  .hero-studio .hero-raster { gap: 32px; }
  .hero-studio .btn { white-space: normal; text-align: left; }
  .hero-index { font-size: 12px; gap: 12px; margin-top: 24px; }
  .product-preview__scene { border-radius: 18px; }
  .explorer-content { padding: 16px; }
  .explorer-choices a { font-size: 13px; }
}
@media (prefers-reduced-motion: no-preference) {
  .product-preview__scene[data-enhanced] .explorer-panel:not([hidden]) { animation: product-enter 260ms var(--motion-ease) both; }
  .hero-copy { animation: product-enter 420ms var(--motion-ease) both; }
  @keyframes product-enter { from { opacity: .4; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}

.pricing-intro h1 { font-size: clamp(40px, 5vw, 66px); letter-spacing: -.035em; }
.pricing-intro > .wrap > .lead { font-size: 20px; max-width: 52ch; }
.studio-plans { display: grid; gap: 22px; margin: 36px 0 24px; }
.studio-plan { padding: 28px; border: 1px solid var(--linie-stark); background: white; border-radius: 18px; display: flex; flex-direction: column; min-width: 0; }
.studio-plan--starter { border: 2px solid var(--tanne-link); background: #f7faf4; }
.plan-label { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--tanne-link); margin-bottom: 10px; }
.studio-plan .pname { font-size: 31px; }
.plan-summary { font-size: 16px; color: var(--gedaempft); min-height: 76px; }
.studio-price { font-size: 33px; font-weight: 700; letter-spacing: -.035em; margin: 20px 0; }
.studio-price span { display: block; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--gedaempft); }
.studio-terms { font-size: 14px; border-block: 1px solid var(--linie); padding: 12px 0; margin: 0; }
.studio-terms > div { display: flex; gap: 8px; justify-content: space-between; margin: 3px 0; }
.studio-terms dd { margin: 0; font-variant-numeric: tabular-nums; }
.plan-availability { font-size: 14px; color: var(--tanne-link); margin-top: 18px; }
.plan-features { padding-left: 18px; font-size: 16px; flex: 1; margin: 0 0 24px; }
.plan-features li { margin: 10px 0; }
.studio-plan .btn { justify-content: center; text-align: center; }
.pricing-note { font-size: 14px; max-width: 88ch; }
.pricing-clarity { display: grid; gap: 24px; }
@media (min-width: 960px) { .studio-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pricing-clarity { grid-template-columns: 1fr 1.4fr; gap: 64px; } }

/* Sonstiges */
.hinweiskasten {
  background: var(--papier-tief); border-radius: 12px; padding: 13px 18px;
  font-size: 14px; color: var(--gedaempft); display: inline-block; margin: 10px 0;
}
.sektion--tief .hinweiskasten { background: var(--karte); box-shadow: var(--schatten-ruhend); }
.ico { flex: none; }
.ico svg { display: block; }

@media (min-width: 900px) { .sektion { padding: 96px 0; } }

/* Native anchor navigation must finish even when keyboard focus is still scrolling. */
html:has(.produktablauf) { scroll-behavior: auto; }
.produktablauf__wrap { max-width: 1000px; }
.produktablauf__film { margin: 24px 0 16px; }
.produktablauf__film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #123d32; border-radius: 12px; }
.produktablauf__film figcaption { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--gedaempft); }
.produktablauf__text { padding: 16px 0; border-top: 1px solid var(--linie, #d2dbd5); border-bottom: 1px solid var(--linie, #d2dbd5); }
.produktablauf__text summary { cursor: pointer; font-weight: 700; }
.produktablauf__text ol { padding-left: 24px; }
.produktablauf__text li { margin: 12px 0; }


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