/* =====================================================================
   Einschulungs-Strecke - Selbstbedienung fuer neue POM-Kunden.

   WARUM DIESE SEITE NICHT UNTER /p/ LIEGT
   /p/ ist das Lead-System der Brief-Kampagne: eine Vorlage, N Datensaetze,
   byte-identisch erzwungen von tools/lint-leads. Diese Seite ist das
   Gegenteil - genau eine Seite, kein Datensatz, keine Praxisfarbe. Sie
   unter /p/ zu legen haette bedeutet, den Linter aufzuweichen (er prueft
   JEDEN Ordner unter p/ ausser "shared" und faellt ohne config.js auf
   Exit 1). Auf Wurzelebene wird er gar nicht beruehrt.

   FARBE
   Durchgehend POM-Olive, KEINE Praxisfarbe. Hier spricht Place of Motion
   mit seinem Kunden - nicht die Praxis mit ihrem Patienten. Deshalb laedt
   die Seite auch lead.js nicht.

   Geteilt mit den Lead-Seiten wird nur tokens.css (Fonts, Grundfarben).
   ===================================================================== */

/* Mehrere Klassen hier setzen display (inline-block, flex, block) und
   wuerden damit das hidden-Attribut aushebeln - Klassenselektor schlaegt
   die UA-Regel [hidden]{display:none}. Betrifft konkret den Terminknopf,
   der ohne diese Zeile sichtbar bliebe, obwohl es keinen Link gibt. */
[hidden]{ display:none !important }

body{
  font-family:var(--body); color:var(--ink);
  background:radial-gradient(120% 60% at 50% 0%, #F4F6FA 0%, #E9EDF4 55%, #E2E7EF 100%);
  min-height:100dvh; margin:0;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Breiter als die Lead-Seiten (480px): Diese Seite zeigt Nachbauten von
   App-Dialogen. Bei 480px werden aus zweispaltigen Formularzeilen
   Stapel, und der Nachbau sieht dann anders aus als der echte Dialog am
   Laptop - also genau dort falsch, wo er stimmen muss. */
.es{ width:100%; max-width:760px; margin:0 auto; background:#fff; min-height:100dvh }
@media (min-width:800px){
  body{ padding:40px 16px }
  .es{ min-height:auto; border-radius:26px; overflow:hidden;
    box-shadow:0 44px 90px -44px rgba(15,23,42,.5), 0 0 0 1px rgba(15,23,42,.05) }
}

/* ---------- Kopf ---------- */
.es__head{ background:var(--olive); color:#fff; padding:calc(26px + env(safe-area-inset-top)) 24px 24px }
.es__mark{ display:inline-flex; background:#fff; border-radius:13px; padding:10px 14px; margin-bottom:18px;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.45) }
.es__mark img{ height:44px; width:auto; display:block }
.es__h1{ font-family:var(--display); font-weight:800; font-size:29px; line-height:1.12; letter-spacing:-.02em; margin:0 0 10px }
.es__sub{ font-size:15px; line-height:1.55; margin:0; opacity:.94; max-width:52ch }

/* ---------- Uebersicht ---------- */
.es__body{ padding:24px }
.ueber{ list-style:none; margin:0 0 30px; padding:0; border:1px solid var(--s200); border-radius:16px; overflow:hidden }
.ueber li{ border-top:1px solid var(--s100) }
.ueber li:first-child{ border-top:0 }
.ueber a{ display:flex; align-items:center; gap:12px; padding:13px 16px; text-decoration:none; color:inherit }
.ueber a:hover{ background:var(--s100) }
.ueber b{ font-family:var(--display); font-weight:700; font-size:15px }
.ueber i{ font-style:normal; color:var(--s500); font-size:13px }
.ueber .no{ flex:0 0 26px; height:26px; border-radius:50%; background:var(--olive); color:#fff;
  font-family:var(--display); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center }

/* Abschnitts-Ueberschrift. Trennt "einmal einstellen" von "jedes Mal" -
   die Zusage "danach nie wieder" gilt nur fuer die ersten drei Schritte,
   und ohne diese Trennung liest sich die Strecke laenger als sie ist. */
.ueber__t{ padding:9px 16px 8px; font-size:10.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--s400); background:var(--s100) }
.teil{ font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--olive); margin:0 0 20px }
.teil--zwei{ border-top:1px solid var(--s200); margin-top:38px; padding-top:34px }

/* ---------- Schritt ---------- */
.step{ padding-top:34px; border-top:1px solid var(--s200); margin-top:34px; scroll-margin-top:16px }
.step:first-of-type{ border-top:0; margin-top:0; padding-top:0 }
/* Nach einer Abschnitts-Ueberschrift zieht die schon ihren Trennstrich -
   der Schritt darunter darf keinen zweiten setzen. */
.teil + .step{ border-top:0; margin-top:0; padding-top:0 }
.step__no{ display:inline-block; background:var(--olive); color:#fff; font-family:var(--display); font-weight:700;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:4px 11px; border-radius:99px; margin-bottom:11px }
.step__h{ font-family:var(--display); font-weight:800; font-size:23px; line-height:1.2; letter-spacing:-.015em; margin:0 0 9px }
.step__why{ color:var(--s600); font-size:15px; line-height:1.6; margin:0 0 18px; max-width:56ch }

/* Pfad-Zeile: wo der Dialog steckt. Bewusst als Brotkrumen und nicht als
   Fliesstext - der Weg ist das, was man beim Nachmachen sucht. */
.weg{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:0 0 16px; font-size:13.5px }
.weg__lab{ color:var(--s500) }
.weg b{ background:var(--s100); border:1px solid var(--s200); border-radius:8px; padding:4px 9px;
  font-family:var(--display); font-weight:700; font-size:13px }
.weg .pf{ color:var(--s400) }

/* ---------- Nachbau eines App-Dialogs ---------- */
.frame{ margin:0 0 16px }
.ui{ border:1px solid var(--s200); border-radius:16px; overflow:hidden; background:#fff; box-shadow:var(--shadow-card) }
.ui__head{ padding:15px 18px 12px; border-bottom:1px solid var(--s100) }
.ui__title{ font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.01em; margin:0 }
.ui__kicker{ font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--s400); margin:3px 0 0 }
.ui__tabs{ display:flex; gap:2px; padding:0 18px; border-bottom:1px solid var(--s200) }
.ui__tab{ padding:10px 13px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--s400); border-bottom:2px solid transparent; margin-bottom:-1px; display:flex; align-items:center; gap:7px }
.ui__tab--on{ color:var(--ink); border-bottom-color:var(--olive) }
.ui__badge{ background:#FEF3C7; color:#B45309; border-radius:99px; min-width:18px; height:18px; padding:0 5px;
  font-size:10px; font-weight:700; letter-spacing:0; display:flex; align-items:center; justify-content:center }
.ui__body{ padding:18px }
.ui__body > * + *{ margin-top:15px }

/* Formularteile */
.lab{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--s500); margin-bottom:6px }
.lab .req{ color:#DC2626; letter-spacing:0 }
.lab .opt{ color:var(--s300); font-weight:500; letter-spacing:0; text-transform:none }
.in{ border:1px solid var(--s200); border-radius:11px; padding:10px 12px; font-size:13.5px; color:var(--s400); background:#fff }
.in--fill{ color:var(--ink) }
.zeile{ display:flex; gap:9px }
.zeile > *{ flex:1 }
.zeile .w4{ flex:0 0 30% }
.hint{ font-size:11.5px; color:var(--s500); line-height:1.5; margin:6px 0 0 }

/* Hervorhebung: das Feld, um das es im Schritt geht. Olivgruener Ring
   statt Pfeil - ein Pfeil braucht eine Position, ein Ring nicht, und
   die Seite muss auch am Handy stimmen. */
.hi{ outline:2px solid var(--olive); outline-offset:3px; border-radius:11px }

.radio{ display:flex; gap:10px; align-items:flex-start; border:2px solid transparent; background:var(--s100);
  border-radius:13px; padding:11px 12px }
.radio--on{ border-color:var(--olive); background:rgba(139,168,58,.07) }
.radio .dot{ flex:0 0 15px; height:15px; border-radius:50%; border:2px solid var(--s300); margin-top:2px; background:#fff }
.radio--on .dot{ border-color:var(--olive); box-shadow:inset 0 0 0 3px var(--olive) }
.radio b{ display:block; font-size:13.5px; font-family:var(--display); font-weight:700 }
.radio span{ display:block; font-size:11.5px; color:var(--s500); line-height:1.45; margin-top:2px }

.knopf{ display:block; text-align:center; background:var(--olive); color:#fff; font-family:var(--display);
  font-weight:700; font-size:14px; border-radius:12px; padding:12px }
.knopf--still{ background:var(--s100); color:var(--s500) }
.drop{ border:2px dashed var(--s200); border-radius:16px; padding:22px; text-align:center; background:var(--s100) }
.drop b{ display:block; font-family:var(--display); font-weight:700; font-size:13.5px }
.drop span{ display:block; font-size:11.5px; color:var(--s500); margin-top:3px }

.gruppe{ font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--s400) }

/* ---------- Bildunterschrift / Hinweise ---------- */
.cap{ font-size:13px; color:var(--s500); line-height:1.55; margin:10px 2px 0 }
.merk{ border-left:3px solid var(--olive); background:#F7F9F1; border-radius:0 12px 12px 0;
  padding:12px 14px; font-size:13.5px; line-height:1.6; color:var(--s600); margin:16px 0 0 }
.merk b{ color:var(--ink) }
.warn{ border-left:3px solid #D97706; background:#FFFBEB; border-radius:0 12px 12px 0;
  padding:12px 14px; font-size:13.5px; line-height:1.6; color:#78350F; margin:16px 0 0 }
.warn b{ color:#451A03 }

/* ---------- Pflicht / freiwillig ----------
   Eigener Block statt Fliesstext. Der Dialog selbst beantwortet die Frage
   nur halb (roter Stern an der IBAN steht immer, Telefon und E-Mail tragen
   gar keine Kennzeichnung), und "muss ich das ausfuellen" ist genau die
   Frage, an der jemand abbricht, wenn er die Antwort nicht in einer Zeile
   findet. Marken statt Farbe allein: "Pflicht"/"frei" steht als Wort da,
   damit es auch ohne Farbunterscheidung und im Ausdruck lesbar bleibt. */
.pflicht{ border:1px solid var(--s200); border-radius:16px; padding:16px 18px; margin-top:16px }
.pflicht__t{ font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--s400); margin:0 0 12px }
.pflicht ul{ list-style:none; margin:0; padding:0 }
.pflicht li{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--s100);
  font-size:13.5px; line-height:1.55; color:var(--s600) }
.pflicht li:first-child{ border-top:0; padding-top:0 }
.pflicht li b{ color:var(--ink) }
.pflicht .ja,.pflicht .nein{ flex:0 0 62px; text-align:center; font-size:10.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; border-radius:99px; padding:4px 0; margin-top:1px }
.pflicht .ja{ background:rgba(139,168,58,.16); color:#4C5E1D }
.pflicht .nein{ background:var(--s100); color:var(--s500) }
/* Variante fuer Aufzaehlungen, deren Marken Bezeichner sind und keine
   Wertung (Zahlungsarten). Olive hiesse dort faelschlich "Pflicht". */
.pflicht--arten .ja,.pflicht--arten .nein{ background:var(--s100); color:var(--s500); letter-spacing:0 }
@media (max-width:460px){
  .pflicht li{ flex-direction:column; gap:6px }
  .pflicht .ja,.pflicht .nein{ flex:0 0 auto; align-self:flex-start; padding:4px 11px }
}

/* ---------- Vorher / Nachher (Schritt Logo) ---------- */
.vn{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px }
@media (max-width:560px){ .vn{ grid-template-columns:1fr } }
.vn__t{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--s400); margin:0 0 7px }
.beleg{ border:1px solid var(--s200); border-radius:13px; padding:14px; background:#fff; box-shadow:var(--shadow-card) }
.beleg__kopf{ display:flex; align-items:center; gap:10px; padding-bottom:11px; border-bottom:2px solid var(--olive) }
.beleg__logo{ width:38px; height:38px; border-radius:9px; border:1px solid var(--s200); display:flex;
  align-items:center; justify-content:center; overflow:hidden; flex:0 0 auto; background:#fff }
.beleg__logo img{ width:100%; height:100%; object-fit:contain; padding:3px }
.beleg__logo--platz{ background:var(--olive); color:#fff; font-family:var(--display); font-weight:700;
  font-size:14px; letter-spacing:.02em; border-color:transparent }
.beleg__leer{ width:38px; height:38px; border-radius:9px; border:1px dashed var(--s300); flex:0 0 auto }
.beleg__nam{ display:block; font-family:var(--display); font-weight:700; font-size:13.5px; line-height:1.25 }
.beleg__adr{ display:block; font-size:10.5px; color:var(--s500); margin-top:1px }
.beleg__zeile{ height:7px; border-radius:3px; background:var(--s100); margin-top:9px }

/* ---------- Schluss ---------- */
.schluss{ border-top:1px solid var(--s200); margin-top:34px; padding-top:26px }
.schluss h2{ font-family:var(--display); font-weight:800; font-size:20px; margin:0 0 9px }
.schluss p{ color:var(--s600); font-size:14.5px; line-height:1.6; margin:0 0 16px; max-width:56ch }
.termin{ display:inline-block; background:var(--olive); color:#fff; text-decoration:none; font-family:var(--display);
  font-weight:700; font-size:15px; padding:13px 22px; border-radius:13px; box-shadow:var(--shadow-olive) }

/* Sichtbares Pruefdatum. Steht bewusst am Fuss der Seite und nicht im
   Kleingedruckten: Eine veraltete Anleitung ist schlechter als keine,
   also muss der Leser sehen koennen, wie alt sie ist. */
.geprueft{ display:flex; align-items:center; gap:8px; margin-top:26px; font-size:12px; color:var(--s400) }
.geprueft .pkt{ width:7px; height:7px; border-radius:50%; background:var(--olive); flex:0 0 auto }

.es__footer{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:22px 24px calc(24px + env(safe-area-inset-bottom));
  border-top:1px solid var(--s200); margin-top:26px; font-size:12px; color:var(--s400) }
.es__footer a{ color:var(--s500) }