/* ============================================================
   kundenbuch.at – öffentliche Website (nicht die Anwendung)
   Eigene Datei mit eigener Version (?v= in src/vorlagen/webseite.php),
   damit die Website nicht am Versionsstand von app.css hängt.

   DIE FARBWERTE SIND AUS app.css (:root und Dunkelmodus) ÜBERNOMMEN,
   nicht neu gewählt — die Kontrastangaben dort gelten hier genauso.
   Ändert sich die Hausfarbe in app.css, gehört sie hier nachgezogen.

   Vorgaben wie in der Anwendung: Bedienelemente >= 44 px, Text >= 4.5:1,
   Rahmen >= 3:1, sichtbarer Fokus, kein Horizontalscroll ab 320 px.
   Keine fremden Schriften: Systemschrift.
   ============================================================ */

:root {
  --grund:        #ffffff;
  --flaeche:      #f4f6f8;
  --linie:        #c9d1d9;
  --text:         #1c2530;
  --text-leise:   #55606d;
  --haupt:        #0f6674;
  --haupt-dunkel: #0a4d58;
  --haupt-hell:   #e3f1f3;
  --haupt-schrift:#ffffff;
  --fehler:       #a3282b;   /* aus app.css, auf weiss 6.5:1 */
  --erfolg:       #1d6b3f;
  --radius:       10px;
  --tippziel:     44px;
  --breite:       68rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund:      #161b22;
    --flaeche:    #1f2630;
    --linie:      #3a4552;
    --text:       #e8edf2;
    --text-leise: #a8b3bf;
    --haupt:      #4bb8c9;
    --haupt-dunkel: #7fd3e0;
    --haupt-hell: #16323a;
    --haupt-schrift: #08222a;
    --fehler:     #ff8a8d;
    --erfolg:     #6ed49a;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body.web {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--grund);
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}

a { color: var(--haupt); text-underline-offset: 0.15em; }
a:hover { color: var(--haupt-dunkel); }
a:focus-visible {
  outline: 3px solid var(--haupt);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.6rem; }
h1 { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.6rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); margin-top: 2.2rem; }
h3 { font-size: 1.1rem; margin-top: 1.4rem; }
p, ul, ol { margin: 0 0 1rem; }
ul, ol { padding-left: 1.3rem; }
li + li { margin-top: 0.3rem; }

.w-breite {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 max(1rem, env(safe-area-inset-left)) 0 max(1rem, env(safe-area-inset-right));
}

/* --- Sprungmarke (WCAG 2.4.1) --- */
.w-sprung {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 0.7rem 1rem; background: var(--grund); color: var(--haupt);
  border: 2px solid var(--haupt); border-radius: 0 0 var(--radius) 0;
}
.w-sprung:focus { left: 0; }

/* --- Kopf ---------------------------------------------------------------
   Am Handy zwei Zeilen: Marke + Anmelden oben, die drei Ziele darunter.
   Ab 760 px eine Zeile. */
.w-kopf {
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
  padding-top: env(safe-area-inset-top);
}
.w-kopf-zeile {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "marke anmelden" "nav nav";
  align-items: center;
  gap: 0.25rem 1rem;
  padding-block: 0.5rem;
}
.w-marke {
  grid-area: marke;
  display: inline-flex; align-items: center;
  min-height: var(--tippziel);
  font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em;
  color: var(--haupt); text-decoration: none;
}
.w-anmelden { grid-area: anmelden; }
.w-nav { grid-area: nav; }
.w-nav ul {
  display: flex; flex-wrap: wrap; gap: 0 0.25rem;
  list-style: none; margin: 0; padding: 0;
}
.w-nav li + li { margin-top: 0; }
.w-nav a {
  display: inline-flex; align-items: center;
  min-height: var(--tippziel);
  padding: 0 0.7rem;
  color: var(--text); text-decoration: none; border-radius: var(--radius);
}
.w-nav li:first-child a { padding-left: 0; }
.w-nav a:hover { color: var(--haupt); background: var(--haupt-hell); }
.w-nav a[aria-current="page"] {
  color: var(--haupt); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 2px;
}
@media (min-width: 760px) {
  .w-kopf-zeile {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "marke nav anmelden";
  }
  .w-nav ul { justify-content: flex-end; }
  .w-nav li:first-child a { padding-left: 0.7rem; }
}

/* --- Knöpfe --- */
.w-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tippziel);
  padding: 0.5rem 1.15rem;
  font: inherit; font-weight: 600; line-height: 1.2;
  text-decoration: none; text-align: center;
  border-radius: var(--radius);
  border: 1px solid transparent;
}
.w-knopf-haupt { background: var(--haupt); color: var(--haupt-schrift); }
.w-knopf-haupt:hover { background: var(--haupt-dunkel); color: var(--haupt-schrift); }
.w-knopf-rand { background: var(--grund); color: var(--haupt); border-color: var(--linie); }
.w-knopf-rand:hover { background: var(--haupt-hell); color: var(--haupt); }
.w-knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.4rem 0 0; }

/* --- Inhalt --- */
.w-inhalt { display: block; }
.w-abschnitt { padding-block: 2.5rem; }
.w-abschnitt > .w-breite > h2:first-child { margin-top: 0; }
.w-abschnitt-flaeche { background: var(--flaeche); border-block: 1px solid var(--linie); }
.w-text { max-width: 44rem; }
.w-leise { color: var(--text-leise); }
.w-gross { font-size: 1.15rem; }

/* Startseite: Einstieg */
.w-buehne { padding-block: 3rem 2.5rem; }
.w-buehne h1 { max-width: 22ch; }
.w-buehne .w-gross { max-width: 40rem; }
.w-dachzeile {
  margin: 0 0 0.6rem;
  font-size: 0.95rem; font-weight: 600; color: var(--haupt);
  letter-spacing: 0.02em;
}

/* Einrichtungsangebot (seit 29.10.2026 statt „Kennenlernen", seit 6aq unter den drei Schritten) */
.w-einrichtung { margin: 0.9rem 0 0; max-width: 40rem; }

/* Kartenraster */
.w-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
}
.w-karte {
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}
.w-karte h3 { margin-top: 0; }
.w-karte p:last-child, .w-karte ul:last-child { margin-bottom: 0; }

/* Preise */
.w-preis {
  font-size: 1.6rem; font-weight: 700; color: var(--text);
  margin: 0.2rem 0 0.4rem; line-height: 1.2;
}
.w-preis small { font-size: 0.95rem; font-weight: 400; color: var(--text-leise); }


/* Rechtsseiten */
.w-recht { padding-block: 2rem 3rem; }
/* Silbentrennung NUR auf den Rechtsseiten: dort brachen „Datenschutzerklärung" und
   „Auftragsverarbeitungsvertrag" bei 375 px ohne Strich. Global gesetzt trennte sie am PC
   die Startseiten-Überschrift in „Ter-mine" und „ei-genen" (am Bild gemessen 29.10.2026). */
.w-recht h1 { hyphens: auto; }
.w-recht .w-breite > * { max-width: 46rem; }
.w-recht h2 { font-size: 1.25rem; margin-top: 2rem; }
.w-recht h3 { font-size: 1.05rem; }
.w-stand { color: var(--text-leise); font-size: 0.95rem; }
.w-daten { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 0.3rem 1rem; margin: 0 0 1rem; }
.w-daten dt { color: var(--text-leise); }
.w-daten dd { margin: 0; }
@media (max-width: 520px) {
  .w-daten { grid-template-columns: 1fr; gap: 0; }
  .w-daten dd { margin-bottom: 0.6rem; }
}
.w-tabelle-huelle { overflow-x: auto; margin: 0 0 1rem; }
.w-tabelle { border-collapse: collapse; width: 100%; font-size: 0.97rem; }
.w-tabelle th, .w-tabelle td {
  text-align: left; vertical-align: top;
  padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--linie);
}
.w-tabelle th { color: var(--text-leise); font-weight: 600; }
.w-inhaltsverzeichnis { columns: 2 14rem; }

/* --- Fuß --- */
.w-fuss {
  background: var(--flaeche);
  border-top: 1px solid var(--linie);
  padding-block: 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
  font-size: 0.95rem;
}
.w-fuss-liste {
  display: flex; flex-wrap: wrap; gap: 0 0.25rem;
  list-style: none; margin: 0 0 0 -0.6rem; padding: 0;
}
.w-fuss-liste li + li { margin-top: 0; }
.w-fuss-liste a {
  display: inline-flex; align-items: center;
  min-height: var(--tippziel); padding: 0 0.6rem;
}

/* Überschrift in einer Karte (h2 statt h3, wenn die Karte ein eigener Abschnitt ist) */
.w-karte-titel { font-size: 1.15rem; margin: 0 0 0.3rem; }
.w-karte .w-knopf { margin-top: 0.4rem; }
code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.92em;
  background: var(--flaeche);
  padding: 0.05em 0.3em;
  border-radius: 4px;
}
/* Vier Karten: am PC in einer Reihe statt 3 + 1 (am Bild gemessen 28.10.2026) */
.w-raster-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* Erklärvideo (webseite_video): Querformat ab 700 px, darunter Hochformat */
.w-video-rahmen { margin: 1.25rem 0 0; }
.w-video { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--haupt-dunkel); }
.w-video-hoch { max-width: 22rem; margin-inline: auto; }
.w-video-text { margin-top: .6rem; font-size: .9rem; color: var(--text-leise); text-align: center; }
@media (max-width: 699px) { .w-video-quer { display: none; } }
@media (min-width: 700px) { .w-video-hoch { display: none; } }

/* Startseite: nach dem Bühnentext das Video, „Demo ansehen“ direkt darunter, die Bildunterschrift
   erst danach (am Handy dreizeilig, sie trennte sonst Video und Knopf). Die Videobreite folgt der
   Fensterhöhe, damit Video und Knopf gemeinsam in ein Fenster passen. */
.w-start-video { grid-area: video; display: flex; flex-direction: column; min-width: 0; }
.w-start-video .w-video-rahmen { display: contents; }
.w-start-video .w-video { margin-inline: auto; }
.w-start-video .w-video-text { order: 1; }
.w-start-video .w-video-quer { width: min(100%, max(20rem, calc((100vh - 6rem) * 16 / 9))); }
.w-start-video .w-video-hoch { width: min(100%, 22rem, max(12rem, calc((100vh - 6rem) * 9 / 16))); }
@supports (height: 100svh) {
  .w-start-video .w-video-quer { width: min(100%, max(20rem, calc((100svh - 6rem) * 16 / 9))); }
  .w-start-video .w-video-hoch { width: min(100%, 22rem, max(12rem, calc((100svh - 6rem) * 9 / 16))); }
}
.w-start-knopf { justify-content: center; margin-top: 0.9rem; }

/* --- Kontaktformular (/kontakt, seit 30.10.2026) ---
   Rahmen der Eingabefelder in --text-leise statt --linie: Bedienelemente
   brauchen >= 3:1 gegen den Grund (WCAG 1.4.11), --linie hat nur ~1.5:1. */
.w-formular { margin: 1rem 0 0; }
.w-feld { margin: 0 0 1.1rem; }
.w-feld label { display: block; font-weight: 600; margin: 0 0 0.3rem; }
.w-optional { font-weight: 400; color: var(--text-leise); }
.w-feld-hinweis { margin: 0 0 0.35rem; font-size: 0.95rem; color: var(--text-leise); }
.w-feld-fehler { margin: 0 0 0.35rem; font-weight: 600; color: var(--fehler); }
.w-feld input, .w-feld select, .w-feld textarea {
  display: block; width: 100%;
  min-height: var(--tippziel);
  padding: 0.55rem 0.7rem;
  font: inherit; line-height: 1.4;
  color: var(--text); background: var(--grund);
  border: 1px solid var(--text-leise);
  border-radius: var(--radius);
}
.w-feld textarea { resize: vertical; min-height: 10rem; }
.w-feld input:focus-visible, .w-feld select:focus-visible, .w-feld textarea:focus-visible,
.w-knopf:focus-visible {
  outline: 3px solid var(--haupt);
  outline-offset: 2px;
}
.w-feld-mit-fehler { border-left: 3px solid var(--fehler); padding-left: 0.75rem; }
.w-feld-mit-fehler input, .w-feld-mit-fehler select, .w-feld-mit-fehler textarea {
  border: 2px solid var(--fehler);
}
button.w-knopf { cursor: pointer; }
.w-formular-datenschutz { font-size: 0.95rem; }
.w-meldung {
  margin: 1rem 0 1.2rem; padding: 0.8rem 1rem;
  border-radius: var(--radius); border-left: 4px solid;
}
.w-meldung p:last-child, .w-meldung ul:last-child { margin-bottom: 0; }
.w-meldung-fehler { border-color: var(--fehler); background: color-mix(in srgb, var(--fehler) 10%, transparent); }
.w-meldung-ok { border-color: var(--erfolg); background: color-mix(in srgb, var(--erfolg) 12%, transparent); }
.w-meldung-fehler a { color: var(--text); }
.w-kontakt-email { margin-top: 2rem; }
/* Honeypot: für Menschen unsichtbar, für Vorleseprogramme per aria-hidden
   ausgeblendet, per tabindex=-1 nicht erreichbar. Nicht display:none — manche
   Bots überspringen ausgeblendete Felder. */
.w-hp {
  position: absolute !important; left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* --- Startseite: Bühne mit Handy-Bild (Entwurf 6aq, 30.10.2026) ---------
   Die alte Beispiel-SMS (.w-sms) ist durch das Handy ersetzt und entfernt
   (keine andere Seite nutzte sie, per grep geprüft).
   Am Handy untereinander: Text, Knöpfe, Handy, Gegensatz. Ab 880 px zwei Spalten,
   das Handy rechts neben dem Text, der Gegensatz darunter in der Textspalte.
   KEIN LAYOUT-SPRINGEN: Das Handy hat feste Breite und aspect-ratio; die Bewegung
   verändert nur transform/opacity der Mitteilung, nie ihren Platz im Fluss. */
.w-buehne-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "text" "video" "handy" "gegensatz";
  gap: 1.75rem;
}
.w-buehne-text { grid-area: text; }
.w-handy-rahmen { grid-area: handy; margin: 0; justify-self: center; width: min(19rem, 100%); }
.w-gegensatz { grid-area: gegensatz; }
@media (min-width: 880px) {
  .w-buehne { padding-block: 3.5rem 3rem; }
  .w-buehne-raster {
    grid-template-columns: minmax(0, 1fr) 19rem;
    grid-template-areas: "text handy" "gegensatz handy" "video video";
    grid-template-rows: auto 1fr auto;
    column-gap: 3rem;
    row-gap: 1.5rem;
  }
  .w-handy-rahmen { align-self: start; }
  .w-start-video { margin-top: 1.5rem; }
}
.w-buehne h1 { font-size: clamp(1.9rem, 1.3rem + 2.8vw, 3rem); max-width: 18ch; }
.w-vertrauen { margin: 0.9rem 0 0; font-size: 0.95rem; color: var(--text-leise); }

/* Das Gerät: Farben eigens, damit es in hell und dunkel gleich aussieht
   (ein Handy hat keinen Dunkelmodus der Website). Weiß auf #0f6674 = 6.6:1,
   #1c2530 auf #ffffff = 15:1 — beide über AA. */
.w-handy {
  --handy-rand: #1c2530;
  aspect-ratio: 19 / 27;
  padding: 0.55rem;
  background: var(--handy-rand);
  border-radius: 2.6rem;
  /* 1-px-Kante in --linie: im Dunkelmodus verschwände der Gehäuserand sonst im Grund */
  box-shadow: 0 0 0 1px var(--linie), 0 1.2rem 2.5rem -1.2rem rgba(10, 30, 40, 0.45);
}
.w-handy-schirm {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 2.1rem;
  padding: 2.4rem 0.85rem 1rem;
  color: #ffffff;
  background: linear-gradient(165deg, #0f6674 0%, #0a4d58 55%, #123c4a 100%);
  text-align: center;
}
.w-handy-schirm::before {          /* Kamera-Aussparung, gerätneutral */
  content: ""; position: absolute; top: 0.7rem; left: 50%;
  width: 4.5rem; height: 1.1rem; margin-left: -2.25rem;
  background: var(--handy-rand); border-radius: 1rem;
}
.w-handy-schirm p { margin: 0; }
.w-handy-uhr { font-size: 3.4rem; font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; }
.w-handy-tag { font-size: 0.95rem; margin-top: 0.15rem !important; }
.w-mitteilung {
  margin-top: 1.6rem;
  padding: 0.7rem 0.85rem 0.8rem;
  text-align: left;
  color: #1c2530;
  background: #ffffff;
  border-radius: 1.1rem;
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.22);
  line-height: 1.35;
}
.w-mitteilung-kopf {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 600; color: #55606d; letter-spacing: 0.02em;
}
.w-mitteilung-kopf span { margin-left: auto; font-weight: 400; }
.w-mitteilung-symbol rect { fill: #1d6b3f; }
.w-mitteilung-symbol path { fill: #ffffff; }
.w-mitteilung-absender { font-weight: 700; font-size: 1.02rem; margin-top: 0.3rem !important; }
.w-mitteilung-text { font-size: 0.93rem; margin-top: 0.1rem !important; }
.w-schnellantwort {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin: 0.55rem 0 0 auto;
  width: max-content; max-width: 100%;
  padding: 0.45rem 0.55rem 0.45rem 0.9rem;
  font-size: 0.93rem; font-weight: 600;
  color: #0a4d58; background: #e3f1f3;
  border-radius: 1.1rem 1.1rem 0.3rem 1.1rem;
}
.w-schnellantwort svg { fill: #0f6674; flex: none; }
.w-handy-text { margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--text-leise); text-align: center; }

/* Gegensatz: vorher/nachher als zwei Zeilen */
.w-gegensatz { list-style: none; margin: 0; padding: 0; max-width: 34rem; align-self: start; }
.w-gegensatz li { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.55rem 0; }
.w-gegensatz li + li { margin-top: 0; border-top: 1px solid var(--linie); }
.w-gegensatz-marke {
  flex: none; display: inline-grid; place-items: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  font-weight: 700; font-size: 0.95rem; line-height: 1;
}
.w-gegensatz-nein { color: var(--text-leise); }
.w-gegensatz-nein .w-gegensatz-marke { border: 2px solid var(--text-leise); }
.w-gegensatz-ja .w-gegensatz-marke { background: var(--haupt); color: var(--haupt-schrift); }

/* Bewegung: einmal beim Laden, unter 2,5 s fertig, nur transform/opacity.
   Die Überschrift bewegt sich nie (sie ist das LCP-Element und darf nicht
   unsichtbar starten). */
@keyframes w-herein {
  from { opacity: 0; transform: translateY(-1.6rem) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes w-auftauchen {
  from { opacity: 0; transform: translateY(0.6rem); }
  to   { opacity: 1; transform: none; }
}
.w-mitteilung    { animation: w-herein 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both; }
.w-schnellantwort { animation: w-auftauchen 0.45s ease-out 1.9s both; }
/* web.js hält die Bewegung an, bis das Handy im Bild ist (am Handy liegt es unter
   den Knöpfen — sonst liefe sie ungesehen ab). Ohne JavaScript läuft sie sofort. */
.w-handy[data-wartet] .w-mitteilung,
.w-handy[data-wartet] .w-schnellantwort { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .w-mitteilung, .w-schnellantwort { animation: none; }
}
/* Am Handy kompakter: weniger Luft oben, flacheres Gerät, kleinere Uhr —
   damit Gerät und Mitteilung nach einem kurzen Wisch ganz zu sehen sind. */
@media (max-width: 879px) {
  .w-buehne { padding-block: 1.75rem 2.5rem; }
  .w-buehne h1 { font-size: clamp(1.75rem, 1.2rem + 2.8vw, 2.4rem); }
  .w-handy-rahmen { width: min(17.5rem, 100%); }
  .w-handy { aspect-ratio: 19 / 26; }
  .w-handy-schirm { padding-top: 2.1rem; }
  .w-handy-uhr { font-size: 2.5rem; }
  .w-mitteilung { margin-top: 1rem; }
}

/* Drei Schritte */
.w-schritte {
  list-style: none; margin: 1.2rem 0 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  counter-reset: schritt;
}
.w-schritte li {
  counter-increment: schritt;
  margin: 0;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}
.w-schritte h3 { margin-top: 0.6rem; }
.w-schritte h3::before { content: counter(schritt) ". "; color: var(--haupt); }
.w-schritte p { margin: 0; }
.w-schritt-symbol {
  display: block; fill: none; stroke: var(--haupt);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.w-schritte + .w-einrichtung { margin-top: 1.4rem; }
.w-mehr { margin: 1.2rem 0 0; }
.w-mehr a { display: inline-flex; align-items: center; min-height: var(--tippziel); font-weight: 600; }

/* ===== Branchenseiten + Fragen (6as, Entwurf 31.10.2026) ===== */
/* Brotkrümel */
.w-kruemel ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 0.8rem; padding: 0; font-size: 0.95rem; }
.w-kruemel li { display: flex; align-items: center; margin: 0; color: var(--text-leise); }
.w-kruemel li + li::before { content: "›"; padding: 0 0.45rem; color: var(--text-leise); }
.w-kruemel a { display: inline-flex; align-items: center; min-height: var(--tippziel); }
.w-kruemel [aria-current] { color: var(--text-leise); }

/* Für Ihren Betrieb: Karten mit Symbol, ganze Karte ist der Verweis */
.w-branchen {
  list-style: none; margin: 1.2rem 0 0; padding: 0;
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));  /* 6 Karten: am PC 3 + 3 */
}
.w-branchen li { margin: 0; }
.w-branchen a {
  display: flex; gap: 0.8rem; align-items: flex-start; height: 100%;
  min-height: var(--tippziel);
  padding: 0.9rem 1rem;
  background: var(--grund); color: var(--text); text-decoration: none;
  border: 1px solid var(--linie); border-radius: var(--radius);
}
.w-branchen a:hover { border-color: var(--haupt); background: var(--haupt-hell); }
.w-branchen .w-schritt-symbol { flex: none; }
.w-branchen strong { display: block; color: var(--haupt); }
.w-branchen span { font-size: 0.95rem; line-height: 1.45; }

/* Beispiel-SMS */
.w-sms-beispiel { margin: 1.2rem 0; max-width: 26rem; }
.w-sms-blase {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 1.1rem 1.1rem 1.1rem 0.3rem;
  padding: 0.8rem 1rem;
}
.w-abschnitt-flaeche .w-sms-blase { background: var(--grund); }
.w-sms-blase p { margin: 0; }
.w-sms-absender { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.2rem !important; }
.w-sms-beispiel figcaption { margin-top: 0.5rem; font-size: 0.9rem; color: var(--text-leise); }

/* So läuft ein Tag */
.w-tag { list-style: none; margin: 1rem 0 0; padding: 0; max-width: 44rem; }
.w-tag li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 0.8rem; margin: 0; padding: 0.6rem 0; border-top: 1px solid var(--linie); }
.w-tag li:last-child { border-bottom: 1px solid var(--linie); }
.w-tag time { font-weight: 700; color: var(--haupt); font-variant-numeric: tabular-nums; }
.w-beispiel-hinweis { font-size: 0.95rem; color: var(--text-leise); }

/* Abschluss */
.w-abschluss-preis { margin: 1.2rem 0 0; }
.w-mehr { display: flex; flex-wrap: wrap; gap: 0 1.4rem; }

/* Häufige Fragen */
.w-fragen { max-width: 46rem; }
.w-fragen h2 { font-size: 1.2rem; margin-top: 2rem; }
.w-fragen-inhalt { columns: 2 18rem; margin: 1rem 0 0; }
.w-fragen-inhalt li { break-inside: avoid; }
.w-fragen-inhalt a { display: inline-flex; align-items: center; min-height: var(--tippziel); padding-block: 0.3rem; line-height: 1.35; }

/* Fußzeile: Branchen über den Rechtsseiten */
.w-fuss-branchen { margin-bottom: 0.4rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--linie); }
/* Textabschnitt ohne eigene Hülle: Breite der Seite, Zeilenlänge des Fließtexts */
.w-breite.w-text { max-width: var(--breite); }
.w-breite.w-text > * { max-width: 44rem; }