@font-face { font-family: "Alegreya Sans"; font-weight: 400; font-display: swap; src: url(schrift/alegreya-sans-400.woff2) format("woff2"); }
  @font-face { font-family: "Alegreya Sans"; font-weight: 500; font-display: swap; src: url(schrift/alegreya-sans-500.woff2) format("woff2"); }
  :root {
    --sand: #F4F1EA; --sand-2: #EEF2EE; --karte: #FFFFFF;
    --salbei: #5B8C7B; --salbei-dunkel: #4A7666; --salbei-tint: #EAF3EF;
    --text: #3D3A36; --text-stark: #2F2C28; --text-mittel: #605F59; --text-hell: #6F6E68; --text-leise: #77766F;
    --text-aus: #9B9A94;   /* nur Inaktives und Zierzeichen (ausgebuchte Tage, Pfeile) – WCAG-Ausnahme */
    --wortmarke: #6B665E; --trenner: #F0ECE4; --rand: #9C9182; --feld: #FDFCFA;   /* Rand: Feldgrenze ≥ 3:1 (WCAG 1.4.11), 1 px, warm (Andreas 2026-10-11) */
    --fehler: #A0533A; --fehler-bg: #FBF0EC;
    /* Kontrast (2026-10-11): weiße Schrift steht auf --bedien = Salbei, gerade so dunkel, dass es 4,5:1 erfüllt (4,53:1).
       Salbei selbst (3,8:1) nur für Linien/Symbole. Hover = Salbei dunkel. */
    --bedien: #537F70;
    --radius: 24px; --radius-s: 13px;
    --titel: "Alegreya Sans", 'Segoe UI', sans-serif; --beschreibung: #74736D; --linie: #EEE9DF;
  }
  *, *::before, *::after { box-sizing: border-box; }
  :focus-visible { outline: 2px solid var(--salbei-dunkel); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0; min-height: 100vh; color: var(--text); line-height: 1.5;
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    background: var(--sand);
    padding: calc(4px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  }
  button { font: inherit; color: inherit; }
  .wrap { max-width: 460px; margin: 0 auto; }

  /* Kopf */
  /* Kopfzeile (Runde 30): Logo → Website, Wortmarke, rechts „Anmelden“. Kein Menü, kein Termin-Knopf. */
  .kopf { display: flex; align-items: center; gap: 10px; min-height: 48px; margin-bottom: 8px; }
  .kopf .logo { display: flex; color: var(--salbei); flex: none; }
  .wortmarke { font-family: var(--titel); font-weight: 500; font-size: 13px; color: var(--wortmarke); letter-spacing: .16em; text-transform: uppercase; margin-right: auto; }
  .anmelden { color: var(--salbei-dunkel); font-size: 14px; text-decoration: none; padding: 12px 0; cursor: pointer; }
  .anmelden:hover { text-decoration: underline; }
  button.anmelden { text-align: right; }   /* „Nicht Testa? Abmelden“ bricht bei langen Namen um (SL-12) */
  .leiste { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: -6px 0 4px; }
  .leiste[hidden] { display: none; }
  .ich { position: relative; }
  .ich summary { list-style: none; cursor: pointer; color: var(--salbei-dunkel); font-size: 14px; padding: 12px 0 12px 8px; }
  .ich summary::-webkit-details-marker { display: none; }
  .ich-pfeil { font-size: 11px; display: inline-block; transition: transform .15s; }
  .ich[open] .ich-pfeil { transform: rotate(180deg); }
  .ich-menue { position: absolute; right: 0; top: 100%; z-index: 20; background: var(--karte); border-radius: 14px; padding: 6px;
    box-shadow: 0 8px 28px rgba(61,58,54,.14); display: flex; flex-direction: column; min-width: 210px; }
  .ich-menue button { background: none; border: 0; text-align: left; padding: 11px 12px; border-radius: 9px; font-size: 14.5px;
    color: var(--text-stark); cursor: pointer; }
  .ich-menue button:hover { background: var(--feld); }
  .zurueck { background: none; border: 0; padding: 10px 10px 10px 0; color: var(--text-hell); font-size: 15px; cursor: pointer; display: flex; align-items: center; gap: 4px; }
  .zurueck[hidden] { visibility: hidden; display: flex; }
  .wer { font-size: 14px; color: var(--text-hell); text-align: right; }
  .wer a, .link { color: var(--salbei-dunkel); text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; font-size: inherit; }
  .wer a:hover, .link:hover { text-decoration: underline; }

  /* Karte */
  .karte {
    background: var(--karte); border-radius: var(--radius); padding: 28px 22px 24px;
    animation: auftauchen .32s ease-out;
  }
  @keyframes auftauchen { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  h1 { font-family: var(--titel); font-size: 24px; font-weight: 500; color: var(--text-stark); margin: 0 0 6px; line-height: 1.25; }
  .einleitung { color: var(--text-mittel); margin: 0 0 20px; font-size: 15px; }
  .vertrauen { display: flex; align-items: center; gap: 6px; justify-content: center; font-size: 13px; color: var(--salbei-dunkel); margin: 18px 0 0; }

  /* Auswahl-Kacheln */
  .wahl { display: grid; gap: 10px; }
  .kachel {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
    background: var(--feld); border: 1.5px solid var(--trenner); border-radius: 16px; padding: 15px 16px;
    transition: border-color .15s, background .15s; touch-action: manipulation;
  }
  .kachel:hover { border-color: var(--salbei); }
  .kachel:active { background: var(--salbei-tint); }
  .kachel .txt { flex: 1; min-width: 0; }
  .kachel .titel { font-weight: 600; color: var(--text-stark); font-size: 16px; display: block; }
  .kachel .sub { font-size: 14px; color: var(--text-hell); display: block; margin-top: 2px; }
  .kachel .pfeil { color: var(--text-aus); font-size: 20px; }
  .kachel.gesperrt { cursor: default; background: #FAF9F6; }
  .kachel.gesperrt .titel { color: var(--text-aus); }
  .kachel.gesperrt:hover { border-color: var(--trenner); }
  .kachel .hinweis { font-size: 13px; color: var(--salbei-dunkel); display: block; margin-top: 6px; }
  .kachel .preis { font-size: 14px; color: var(--text-mittel); white-space: nowrap; }
  /* Runde 32: Angebote als flache Liste mit Trennlinien */
  .wahl.flach { gap: 0; }
  .wahl.flach .kachel { background: none; border: 0; border-top: 1px solid var(--linie); border-radius: 0; padding: 16px 2px; }
  .wahl.flach .kachel:hover, .wahl.flach .kachel:active { background: var(--feld); }
  .wahl.flach .kachel .titel { font-size: 17px; }
  .wahl.flach .kachel .sub { margin-top: 4px; }
  .schalter + .einleitung { margin-top: 14px; }
  /* Nur eine Dauer am Ort (z. B. Caroline online 50 Min.): trotzdem als gewählter Reiter, halbe Breite */
  .schalter.einzeln button { flex: 0 0 50%; cursor: default; }   /* Preis bricht nie in sich um */
  .wahl.flach .kachel:hover .pfeil { color: var(--salbei-dunkel); }
  .gruppe { font-size: 13px; color: var(--text-leise); letter-spacing: .04em; margin: 18px 2px 8px; }
  .gruppe:first-child { margin-top: 0; }

  /* Umschalter (Dauer, Ort) */
  /* Runde 32: Reiter mit Unterstrich statt grauer Pille */
  .schalter { display: flex; border-bottom: 1px solid var(--linie); margin: 0 0 6px; }
  .schalter button {
    flex: 1; border: 0; background: none; padding: 12px 4px 11px; cursor: pointer; white-space: nowrap;
    font-size: 15px; color: var(--text-hell); touch-action: manipulation; border-bottom: 2.5px solid transparent; margin-bottom: -1px;
  }
  .schalter button.an { color: var(--text-stark); font-weight: 600; border-bottom-color: var(--bedien); }
  /* (+) neben den Kindern: weiteres Kind anlegen (Andreas 2026-10-18), schmal statt gleich breit */
  .schalter button.plus { flex: 0 0 48px; font-size: 19px; line-height: 1; }

  /* Tage und Uhrzeiten */
  .monat { font-size: 13px; color: var(--text-leise); margin: 18px 2px 8px; letter-spacing: .04em; }
  /* Monatskalender */
  .mkopf { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 8px; }
  .mkopf .mname { font-weight: 600; color: var(--text-stark); font-size: 16px; }
  .mkopf button { width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid var(--trenner); background: var(--feld); font-size: 20px; color: var(--text-mittel); cursor: pointer; touch-action: manipulation; }
  .mkopf button:disabled { opacity: .3; cursor: default; }
  .mgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; touch-action: pan-y; }
  .mgrid .wt { font-size: 12px; color: var(--text-leise); padding: 2px 0 4px; }
  .mtag { aspect-ratio: 1; border: 0; border-radius: 12px; background: none; font-size: 16px; color: var(--text-aus); position: relative; padding: 0; cursor: default;
    transition: background-color .22s ease, color .22s ease; }   /* Tage werden beim Eintreffen der Daten weich frei */
  .mtag.frei { color: var(--text-stark); font-weight: 600; background: var(--salbei-tint); cursor: pointer; touch-action: manipulation; }
  .mtag.frei:hover { box-shadow: inset 0 0 0 1.5px var(--salbei); }
  .mtag.an { background: var(--bedien); color: #fff; }
  .mtag.heute::after { content: ''; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--text-leise); }
  .mleer { aspect-ratio: 1; }
  /* Breiter als ein Handy (Popup am PC, ~600 px): Tage flacher, damit die Seite nicht unnötig lang wird */
  @media (min-width: 440px) { .mtag, .mleer { aspect-ratio: auto; height: 42px; } }
  .zeiten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
  .zeit {
    padding: 12px 0; border-radius: 12px; border: 1.5px solid var(--trenner); background: var(--feld);
    font-size: 16px; font-weight: 600; color: var(--text-stark); cursor: pointer; touch-action: manipulation;
  }
  .zeit:hover { border-color: var(--salbei); }
  .zeiten .zeit, .leer { animation: auftauchen .22s ease-out backwards; }   /* neue Zeiten blenden ein, statt zu springen */
  .zeit.an { background: var(--bedien); border-color: var(--bedien); color: #fff; }
  .zeit.zwei { font-size: 15px; padding: 9px 0; line-height: 1.25; }
  .zeit.zwei span { display: block; font-size: 12px; font-weight: 400; color: var(--text-hell); }
  .leer { color: var(--text-hell); font-size: 14px; padding: 8px 2px; }

  /* Felder */
  label { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 6px; color: var(--text); }
  label .opt { font-weight: 400; color: var(--text-leise); }
  input[type=text], input[type=email], input[type=tel] {
    width: 100%; padding: 13px 15px; border: 1px solid var(--rand); border-radius: var(--radius-s);
    font-size: 16px; color: var(--text-stark); background: var(--feld); outline: none;
    transition: border-color .15s, box-shadow .15s;
  }
  input:focus { border-color: var(--salbei); box-shadow: 0 0 0 4px rgba(91,140,123,.14); }
  input.code { font-size: 26px; letter-spacing: .5em; text-align: center; padding-left: .5em; font-weight: 600; }
  /* Runde 32: Beschriftung steht im Feld (oben links), Feld und Label sind eine Fläche */
  .fx { position: relative; margin-top: 10px; }
  .fx input::placeholder { color: var(--text-aus); }
  .fx label { position: absolute; left: 15px; top: 8px; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--text-mittel); pointer-events: none; }
  .fx input, .fx select { padding: 27px 15px 9px; }
  .fx select { width: 100%; border: 1px solid var(--rand); border-radius: var(--radius-s); font: inherit; font-size: 16px; color: var(--text-stark);
    background: var(--feld) 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.5l5 5 5-5' fill='none' stroke='%23605F59' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center;
    appearance: none; -webkit-appearance: none; outline: none; cursor: pointer; }
  .fx select:focus { border-color: var(--salbei); box-shadow: 0 0 0 4px rgba(91,140,123,.14); }
  .fx select.leer { color: var(--text-leise); }
  .fx select.fehler, .fx input.fehler { border-color: var(--fehler); background-color: var(--fehler-bg); }
  .zeile2 .fx, .zeile2 > div { min-width: 0; }
  .zwischen { font-size: 13px; color: var(--text-leise); letter-spacing: .04em; margin: 22px 2px 0; }
  .zeile2 { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
  .zeile2.gleich { grid-template-columns: 1fr 1fr; }

  /* Knöpfe */
  .knopf {
    width: 100%; margin-top: 22px; background: var(--bedien); color: #fff; border: 0; border-radius: var(--radius-s);
    padding: 15px; font-size: 16px; font-weight: 600; cursor: pointer; touch-action: manipulation;
    transition: background .15s, transform .05s;
  }
  .knopf:hover { background: var(--salbei-dunkel); }
  .knopf:active { transform: translateY(1px); }
  .knopf:disabled { background: #B9CDC5; cursor: default; }
  .knopf.leise { background: none; color: var(--text-mittel); margin-top: 8px; font-weight: 400; }
  .knopf.leise:hover { background: var(--sand); }

  /* Terminzeile */
  .terminkopf { display: flex; gap: 10px; align-items: flex-start; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--trenner); }
  .terminkopf svg { flex: 0 0 auto; margin-top: 2px; }
  .tk-text { flex: 1; min-width: 0; }
  /* Zeile 1 was + bei wem (kräftig), Zeile 2 wann (gut lesbar), Zeile 3 Preis + Ort (dünn).
     Dünn braucht eine Schrift mit Light-Schnitt: am iPhone San Francisco, am PC Segoe UI. */
  .tk-was { font-size: 15.5px; font-weight: 600; color: var(--text-stark); line-height: 1.35; }
  .tk-wann { font-size: 15px; color: var(--text-stark); margin-top: 1px; }
  .tk-wo { font-size: 13px; color: var(--text-hell); font-weight: 300; font-family: -apple-system, 'Segoe UI', system-ui, sans-serif; margin-top: 1px; }
  .tk-aendern { font-size: 13px; margin-top: 2px; white-space: nowrap; }
  /* Abschlussseite: dieselbe Terminzeile als zarte Fläche statt Trennlinie */
  .terminkopf.flaeche { background: var(--salbei-tint); border: 0; border-radius: 14px; padding: 13px 16px; margin: 20px 0 0; text-align: left; }
  .terminkopf.flaeche .tk-wo { color: var(--text-mittel); }
  /* Abschluss: was jetzt passiert – ruhige Zeilen mit Symbol statt nummerierter Liste */
  /* Hinweise unter der Terminfläche: Symbol und Text fluchten mit Kalendersymbol und Text darüber */
  .hinweise { margin: 16px 0 0; padding: 0 16px; display: grid; gap: 10px; }
  .hinweise .z { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--text-mittel); }
  .hinweise svg { flex: 0 0 20px; margin-top: 1px; }
  .hinweise .adr { color: var(--text-stark); overflow-wrap: anywhere; }
  .gruss { text-align: center; margin: 26px 0 0; color: var(--text-mittel); font-size: 15px; }
  .daten { font-size: 14px; color: var(--text-mittel); margin-top: 16px; display: flex; justify-content: space-between; gap: 12px; }
  .klein { font-size: 13px; color: var(--text-hell); margin: 14px 0 0; }

  /* Vertrag */
  .vertrag { border: 1.5px solid var(--trenner); border-radius: 16px; padding: 14px 16px; font-size: 14px; color: var(--text-mittel); }
  .vertrag ul { margin: 6px 0 8px; padding-left: 18px; }
  .vertrag li { margin: 3px 0; }
  .haken { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-mittel); margin-top: 14px; cursor: pointer; }
  .haken input { width: 20px; height: 20px; accent-color: var(--salbei); margin: 1px 0 0; flex: 0 0 auto; }

  /* Bestätigung */
  .symbol { width: 64px; height: 64px; margin: 0 auto 16px; background: var(--salbei-tint); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
  .mitte { text-align: center; }
  .geraet { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--trenner); }
  /* Abschluss: alle kommenden Termine dieses Zugangs (Lena + Max), der neue markiert */
  .kommend { list-style: none; margin: 10px 0 0; padding: 0; }
  .kommend li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 2px; border-top: 1px solid var(--linie); }
  .kommend li:first-child { border-top: 0; padding-top: 4px; }
  .kommend .km-text { flex: 1; min-width: 0; }
  .kommend .km-wann { font-size: 15px; font-weight: 600; color: var(--text-stark); }
  .kommend .km-was { font-size: 14px; color: var(--text-mittel); margin-top: 1px; }
  .kommend .km-neu { font-size: 11.5px; font-weight: 600; color: var(--salbei-dunkel); background: var(--salbei-tint); border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; }
  .kommend .link { font-size: 14px; padding: 2px 0 8px 8px; white-space: nowrap; }
  .kommend li.weg { opacity: .55; }
  .kommend li.weg .km-wann { text-decoration: line-through; font-weight: 400; }
  .geraet h2 { font-size: 17px; margin: 0 0 4px; color: var(--text-stark); }
  .geraet p { font-size: 14px; color: var(--text-mittel); margin: 0; }
  .geraet h2 + .knopf { margin-top: 14px; }
  .einfach-schliessen { display: block; margin: 14px auto 0; padding: 6px 10px; font-size: 15px; }

  /* Workshops */
  .ws { border: 1.5px solid var(--trenner); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; background: var(--feld); }
  .ws .datum { font-weight: 600; color: var(--text-stark); }
  .ws .zeit-ort { font-size: 14px; color: var(--text-hell); }
  .rolle { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; padding: 11px 12px; border-radius: 12px; border: 1.5px solid var(--trenner); background: var(--karte); margin-top: 8px; cursor: pointer; }
  .rolle:hover { border-color: var(--salbei); }
  .rolle:disabled { opacity: .45; cursor: default; }
  .rolle .r { font-size: 15px; font-weight: 600; color: var(--text-stark); }
  .rolle .p { font-size: 13px; color: var(--text-hell); white-space: nowrap; }

  footer { text-align: center; font-size: 13px; color: var(--text-hell); margin: 24px 0 0; }
  footer a { color: var(--salbei-dunkel); text-decoration: none; }
  footer .zur-website { display: inline-block; font-size: 14px; color: var(--beschreibung); padding: 12px; }
  footer.eng { margin-top: 0; }

  /* Leistungsübersicht (Runde 30): Liste statt Kacheln, Symbol ohne Kreis, alle sechs ohne Scrollen sichtbar */
  /* Erste Seite (Design Andreas 2026-10-18, Screenshots ../design/terminbuchung/erste-seite-karten-2026-10-18/):
     Titel direkt auf Sand; geschlossene Bereiche bilden zusammen eine weiße Karte mit Trennlinien, der offene
     Bereich steht als eigene Karte dazwischen (großer Kopf, Frage, Leistungen mit Preis rechts). Beim Umklappen
     ändern sich nur Abstand, Ecken, Kopfgröße und Klappenhöhe – alles mit Übergang, nichts wird neu aufgebaut. */
  .karte.uebersicht { background: none; padding: 10px 0 4px; }
  .titelblock { display: flex; flex-direction: column; gap: 4px; margin: 0 6px 18px; }
  .titelblock h1 { font-size: 26px; margin: 0; }
  .titelblock p { font-size: 15px; color: var(--text-mittel); margin: 0; }
  .liste { display: flex; flex-direction: column; }
  .kat { position: relative; background: var(--karte); overflow: hidden; border-radius: 0;
    transition: margin-top .28s ease, border-radius .28s ease; }
  .kat.oben { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
  .kat.unten { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
  .kat.oben:not(:first-child) { margin-top: 12px; }
  .kat::before { content: ''; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: var(--linie); transition: opacity .2s; }
  .kat.oben::before { opacity: 0; }
  .zeile { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 20px; border: 0; background: none;
    text-align: left; cursor: pointer; touch-action: manipulation; font: inherit; transition: padding .28s ease, background .15s; }
  .zeile:hover, .zeile:active { background: var(--feld); }
  .zeile:hover .pfeil { color: var(--salbei-dunkel); }
  .zeile .ic.marke { width: 40px; height: 40px; transform-origin: left center; transition: transform .28s ease, margin .28s ease; }
  .zeile .txt { flex: 1; min-width: 0; }
  /* Titel wächst per transform statt font-size: kein Neuumbruch pro Bild, läuft auf der Grafikkarte */
  .zeile .titel { display: inline-block; transform-origin: left center; font-family: var(--titel); font-weight: 500; font-size: 18px; color: var(--text-stark); line-height: 1.2; transition: transform .28s ease; }
  .zeile .pfeil { color: var(--text-aus); font-size: 20px; }
  .zeile.fest { cursor: default; }
  .zeile.fest:hover, .zeile.fest:active { background: none; }
  .kat.auf .zeile { padding: 24px 22px 12px; }
  .kat.auf .zeile:hover, .kat.auf .zeile:active { background: none; }
  .kat.auf .zeile .ic.marke { transform: scale(1.3); margin-right: 12px; }
  .kat.auf .zeile .titel { transform: scale(1.4444); }
  .kat.auf .zeile .pfeil { transform: rotate(90deg); color: var(--text-mittel); }
  .aufklapp { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
  .aufklapp.auf { grid-template-rows: 1fr; }
  .aufklapp-rahmen { overflow: hidden; min-height: 0; }
  .aufklapp-inhalt { padding: 0 22px 20px; opacity: 0; transition: opacity .2s ease; }
  .aufklapp.auf .aufklapp-inhalt { opacity: 1; transition-delay: .06s; }
  .aufklapp .schalter { margin: 0; }
  .frage { font-size: 15px; color: var(--text-mittel); margin: 0; padding: 12px 0; }
  .frage.frage-mehr { padding-top: 0; }
  .frage-mehr a { color: var(--salbei-dunkel); white-space: nowrap; }
  /* Leistungen im offenen Bereich: Titel, Unterzeile, rechts Preis (bzw. Pfeil bei Workshop-Terminen) */
  .angebot { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: 0;
    border-top: 1px solid var(--linie); padding: 15px 2px; cursor: pointer; touch-action: manipulation; font: inherit; }
  .angebot:hover, .angebot:active { background: var(--feld); }
  .angebot .txt { flex: 1; min-width: 0; }
  .angebot .titel { display: block; font-weight: 600; font-size: 16px; color: var(--text-stark); }
  .angebot .sub { display: block; font-size: 14px; color: var(--text-hell); margin-top: 2px; }
  .angebot .preis { font-size: 14.5px; color: var(--text-mittel); white-space: nowrap; }
  .angebot .pfeil { color: var(--text-aus); font-size: 20px; }
  .angebot.auf .pfeil { transform: rotate(90deg); }
  .angebot.gesperrt { cursor: default; }
  .angebot.gesperrt:hover { background: none; }
  .angebot.gesperrt .titel, .angebot.gesperrt .preis { color: var(--text-leise); }
  .angebot.option { padding-left: 18px; }
  .angebot:disabled { opacity: .45; cursor: default; }
  .angebot:disabled:hover { background: none; }
  .leer-hinweis { font-size: 14.5px; color: var(--text-mittel); border-top: 1px solid var(--linie); padding: 14px 2px 0; margin: 0; }

  /* Entwurfs-Umschalter (nur im Prototyp) */
  /* steht unten im Fluss, damit er auf dem Handy keine Leistung verdeckt */

  /* Nachricht zum Termin (gehört zur Buchung, nie gemerkt) */
  textarea {
    width: 100%; padding: 12px 15px; border: 1px solid var(--rand); border-radius: var(--radius-s); resize: vertical;
    font: inherit; font-size: 16px; color: var(--text-stark); background: var(--feld); outline: none; min-height: 88px;
  }
  textarea:focus { border-color: var(--salbei); box-shadow: 0 0 0 4px rgba(91,140,123,.14); }
  .nachricht-auf { display: block; margin-top: 18px; font-size: 15px; text-align: left; }
  .nachricht-auf[hidden] { display: none; }
  .nachricht .klein { margin-top: 6px; }

  /* Anrede: drei einzelne, gerundete Knöpfe mit eigenem Rahmen (wirken anklickbar), Auswahl salbeigrün
     gefüllt. Breite nach Textlänge, damit „Keine Angabe“ auch am iPhone mini in eine Zeile passt. */
  /* Designregel (Andreas 2026-10-12): Auswahl zwischen wenigen Optionen immer als Reiter mit Unterstrich */
  .auswahl { display: flex; border-bottom: 1px solid var(--linie); }
  .auswahl button {
    flex: 1; border: 0; border-bottom: 2.5px solid transparent; margin-bottom: -1px; background: none;
    padding: 12px 4px 11px; cursor: pointer; font-size: 15px; color: var(--text-hell); white-space: nowrap; touch-action: manipulation;
  }
  .auswahl button.an { color: var(--text-stark); font-weight: 600; border-bottom-color: var(--bedien); }
  .auswahl.fehler { border-bottom-color: var(--fehler); }
  .feldfehler { color: var(--fehler); font-size: 13px; margin: 6px 2px 0; }

  /* Angaben-Liste: ein Eintrag pro Zeile */
  .block-kopf { display: flex; justify-content: space-between; align-items: baseline; margin: 20px 0 8px; }
  .block-kopf h2 { font-size: 15px; margin: 0; color: var(--text-stark); }
  .erledigt { display: flex; gap: 8px; align-items: center; font-size: 14.5px; color: var(--text-stark); }

  /* Abschluss nach dem ersten Termin */

  /* Vertrag: Angaben-Kasten, Haken-Gruppen */
  .angaben-kurz { background: var(--sand); border-radius: 14px; padding: 12px 14px; font-size: 14px; color: var(--text-mittel); position: relative; }
  .pa-aendern { position: absolute; top: 12px; right: 14px; font-size: 13px; }
  .pa2 .pa-name { font-size: 16px; font-weight: 600; color: var(--text-stark); padding-right: 60px; }
  .pa2 .pa-adresse { font-size: 15px; color: var(--text); margin-bottom: 6px; }
  .pa2 .pa-ic { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-mittel); margin-top: 3px; overflow-wrap: anywhere; }
  .pa2 .pa-ic svg { flex: 0 0 auto; }
  .pa-rahmen { background: none; border: 1.5px solid var(--trenner); }
  .parteien { font-size: 13.5px; color: var(--text-hell); margin: 0 0 6px; }
  .haken-gruppe { margin-top: 20px; }
  .haken-gruppe .gruppe { margin: 0 2px 2px; }
  .haken .erl { display: block; font-size: 13px; color: var(--text-hell); margin-top: 2px; }
  .haken .pflicht { color: var(--fehler); }
  .vertrag.kurz ul { padding-left: 18px; margin: 8px 0 10px; }

  /* Vollständiger Vertragstext und Datenschutz-Info (Dialoge) */
  .volltext { font-size: 14.5px; color: var(--text); }
  .volltext h2 { font-size: 15.5px; color: var(--text-stark); margin: 22px 0 6px; }
  .volltext h3 { font-size: 14.5px; color: var(--text-stark); margin: 16px 0 4px; }
  .volltext p, .volltext li { margin: 0 0 8px; }
  .volltext ul { padding-left: 20px; margin: 0 0 8px; }
  .volltext a { color: var(--salbei-dunkel); }   /* nicht Browser-Blau (Andreas 2026-11-03) */
  .volltext .rechtstext > h2:first-child { margin: 0; text-align: center; text-transform: uppercase; letter-spacing: .08em; }
  .volltext .rechtstext > h2:first-child + p { text-align: center; color: var(--text-hell); margin-bottom: 18px; }
  .volltext .rechtstext > h2:first-child + p strong { font-weight: inherit; }
  .volltext .schrift-klein p { color: var(--text-hell); font-size: 13px; margin-top: 18px; }
  .volltext .haken { background: var(--salbei-tint); border-radius: 12px; padding: 10px 12px; margin: 8px 0 12px; color: var(--text); }
  .volltext details { margin-top: 18px; border-top: 1px solid var(--trenner); padding-top: 12px; }
  .volltext summary { cursor: pointer; color: var(--salbei-dunkel); font-size: 14px; }
  /* Nur eine Scrollfläche (Andreas 2026-11-03: zwei Leisten im Popup, am iPhone drei Anläufe): der Dialog selbst scrollt nie,
     nur .innen; Höhe nach dem sichtbaren Bereich (dvh, iPhone-Leisten), die Seite dahinter steht still. */
  dialog.lesen { border: 0; border-radius: var(--radius); padding: 0; width: min(680px, calc(100vw - 24px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
    overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
  dialog.lesen[open] { display: flex; flex-direction: column; }
  dialog.lesen::backdrop { background: rgba(47,44,40,.45); }
  html:has(dialog.lesen[open]) { overflow: hidden; }
  dialog.lesen .innen { padding: 22px 20px 8px; overflow: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
  dialog.lesen .fuss { flex: none; }
  dialog.lesen .fuss { padding: 10px 20px 16px; border-top: 1px solid var(--trenner); }
  dialog.lesen .fuss .knopf { margin-top: 0; }


  @media (min-width: 520px) { .karte { padding: 34px 32px 28px; } }

  /* ───── v2 ───── */
  /* Kategorie-Symbole: Linie in Salbei dunkel auf zartem Kreis (wie das Symbol in verify.php) */
  .ic { width: 46px; height: 46px; border-radius: 50%; background: var(--salbei-tint); color: var(--salbei-dunkel);
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto; --ic-bg: var(--salbei-tint); }
  .ic.gross { width: 54px; height: 54px; }
  .ic.marke { background: none; color: var(--salbei); }   /* Runde 30: Logo-Formen ohne Kreis */
  .ic.marke.gross { width: 48px; height: 48px; }
  .kachel.gesperrt .ic { opacity: .45; }
  .kat-kopf { display: flex; align-items: center; gap: 14px; margin: 0 0 6px; }
  .kat-kopf h1 { margin: 0; }
  .kat-kopf + .einleitung { margin-top: 10px; }
  /* Erkannt (E-5): oben groß „Hallo Lena“, darunter „Nicht Lena? Abmelden“ */
  .hallo { font-size: 26px; margin: 0 0 2px; }
  .nichtdu { font-size: 14px; color: var(--text-hell); margin: 0 0 20px; }
  .fuer { margin: 0 0 18px; }
  .fuer label { margin-top: 0; }
  /* Mailprüfung (FN-14) */
  .mailgross { font-size: 18px; font-weight: 600; color: var(--text-stark); overflow-wrap: anywhere; margin: 2px 0 0; }
  .tippfehler { font-size: 14px; margin: 2px 0 18px; }
  .tipp { font-size: 13.5px; color: var(--salbei-dunkel); margin: 6px 2px 0; }
  /* Gerätefrage am Schluss */
  .zwei-knoepfe { display: flex; gap: 8px; }
  .zwei-knoepfe .knopf { margin-top: 14px; }
  .knopf.zweit { background: var(--sand); color: var(--text); }
  .knopf.zweit:hover { background: #EAE5DA; }
  /* Workshops */
  .ws-text { font-size: 14.5px; color: var(--text-mittel); margin: 0 0 12px; }
  .pfeil { transition: transform .2s; }
  .ws-art.auf, .ws.auf { border-color: var(--salbei); }
  .ws-art.auf .pfeil, .ws.auf .ws-tag .pfeil { transform: rotate(90deg); }
  .ws-inhalt { padding: 4px 0 10px 14px; margin-left: 22px; border-left: 2px solid var(--salbei-tint); }
  .ws-tag { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
  .ws-tag .txt { flex: 1; }
  .ws-tag .datum, .ws-tag .zeit-ort { display: block; }
  .ws-tag .pfeil { color: var(--text-aus); font-size: 20px; }
  .ws-tag:disabled { opacity: .45; cursor: default; }
  .ws .zeit-ort { margin-bottom: 0; }
  .ws-rollen { margin-top: 4px; }
  .feldblock { margin-top: 18px; }

  /* ───── Popup auf der Website (Desktop, Andreas 2026-10-13) ─────
     ?popup im iframe der Website. Das Popup hat eine feste Größe (Website), längere Seiten scrollen darin. Kopf wie gehabt plus ×, Pfeile zurück/vorwärts, Seitenwechsel als Wischen. */
  .schliessen, .pfeile { display: none; }
  /* Fester Rahmen: Inhalt füllt die Popup-Höhe, „Fragen? …“ steht immer unten und rutscht nicht (Andreas 2026-10-13) */
  html.popup body { padding: 24px 24px 0; min-height: 100vh; display: flex; flex-direction: column; }
  html.popup .wrap { flex: 1; display: flex; flex-direction: column; }
  html.popup footer, html.popup footer.eng { position: sticky; bottom: 0; margin: auto 0 0; padding: 14px 0 16px; background: var(--sand); z-index: 1; }
  html.popup #app { padding-bottom: 8px; }
  html.popup .wrap { max-width: none; }
  html.popup .kopf { margin-bottom: 12px; }
  html.popup .schliessen { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px;
    margin-left: 14px; border: 0; border-radius: 50%; background: var(--karte); color: var(--text-mittel); cursor: pointer; }
  html.popup .schliessen:hover { color: var(--text-stark); box-shadow: 0 2px 10px rgba(61,58,54,.10); }
  html.popup .zurueck, html.popup .zurueck[hidden] { display: none; }
  html.popup .leiste { margin: -4px 0 8px; }
  html.popup .pfeile { display: flex; gap: 2px; margin-left: -8px; }
  .pfeile button { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: none; color: var(--text-hell); cursor: pointer; }
  .pfeile button:hover:not(:disabled) { background: var(--karte); color: var(--text-stark); }
  .pfeile button:disabled { color: var(--text-aus); opacity: .45; cursor: default; }
  html.popup footer .zur-website { display: none; }
  /* Wischen: nur die Karte bewegt sich, Kopf und Pfeile stehen (Animation im Skript, zeige()). Die alte Karte liegt
     währenddessen als Kopie über der neuen; seitlich nichts scrollen lassen. */
  html.popup .wrap { overflow-x: clip; margin: 0 -24px; padding: 0 24px; }   /* Kante = Popup-Rand: Pfeil-Kreis nicht abschneiden */
  html.popup #app { position: relative; }
  html.popup #app .karte { animation: none; }
  html.popup #app .karte.geist { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }

  /* Abstände und Farben, die früher als style="…" in den Templates standen (CSP style-src 'self').
     !important, damit sie wie ein Inline-Stil die Regeln der Bausteine übertrumpfen. */
  .mt-0 { margin-top: 0 !important; }
  .mt-14 { margin-top: 14px !important; }
  .mb-0 { margin-bottom: 0 !important; }
  .mb-4 { margin-bottom: 4px !important; }
  .mb-6 { margin-bottom: 6px !important; }
  .mb-10 { margin-bottom: 10px !important; }
  .mb-12 { margin-bottom: 12px !important; }
  .mb-18 { margin-bottom: 18px !important; }
  .m-0 { margin: 0 !important; }
  .m-0-0-10 { margin: 0 0 10px !important; }
  .zentriert { text-align: center !important; }
  .t-fehler { color: var(--fehler) !important; }
  .t-stark { color: var(--text-stark) !important; }
  .fw-600 { font-weight: 600 !important; }
/* Honeypot (A-7): für Menschen unsichtbar, auch für Screenreader (aria-hidden) und Tab (tabindex -1) */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }