/* ============================================================
   Eğitim365 – Gestaltung
   Datei: assets/css/stil.css
   Stand: Bauschritt 5, 28.10.2026 (Kauf, Bestellung, Teilnehmerkonto ergänzt)

   GESTALTUNGSREGELN (für das Handbuch):
   - Farben: Nachtblau (Grund), Bosporus-Petrol (Flächen), Safran (einziger Akzent),
     Papierweiß (Hintergrund), Tulpenrot (nur Warnungen).
   - Erkennungszeichen: die „365“ im safrangelben Kreis wie ein Kalendertag,
     und Kurse als Eintrittskarte mit Abrisskante.
   - Schriften liegen auf dem eigenen Server (keine Google-Server, Datenschutz).
   - Handy zuerst: nichts ist breiter als der Bildschirm, kein seitliches Schieben.
   ============================================================ */

/* ---------- Schriften (eigener Server) ---------- */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../schriften/bricolage-grotesque-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../schriften/bricolage-grotesque-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../schriften/bricolage-grotesque-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../schriften/bricolage-grotesque-latin-ext-800-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../schriften/source-sans-3-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../schriften/source-sans-3-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../schriften/source-sans-3-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../schriften/source-sans-3-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../schriften/source-sans-3-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../schriften/source-sans-3-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../schriften/source-sans-3-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../schriften/source-sans-3-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- Farben und Maße ---------- */
:root {
  --gece:      #14213D;  /* Nachtblau – Text auf hellem Grund, Kopfbereich */
  --bogaz:     #0F6E6E;  /* Bosporus-Petrol – Flächen, Links */
  --bogaz-hell:#E3F1F0;
  --safran:    #E8A317;  /* Safran – einziger Akzent: 365-Kreis, Hauptknopf */
  --safran-tief:#B97C00;
  --kagit:     #F6F7F9;  /* Papierweiß – Seitenhintergrund */
  --beyaz:     #FFFFFF;
  --murekkep:  #1C2430;  /* Fließtext */
  --gri:       #5B6576;  /* Nebentext */
  --cizgi:     #D7DCE3;  /* Linien */
  --lale:      #C8324B;  /* Tulpenrot – nur Warnungen/Fehler */

  --schrift-titel: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --schrift-text:  "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --breite: 1120px;
  --rand: 20px;
  --radius-karte: 18px;
  --radius-knopf: 999px;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: 1.0625rem;          /* 17px */
  line-height: 1.6;
  color: var(--murekkep);
  background: var(--kagit);
  overflow-wrap: break-word;     /* lange Wörter brechen um – kein seitliches Schieben */
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--bogaz); text-underline-offset: 3px; }
a:hover { color: var(--gece); }
:focus-visible { outline: 3px solid var(--safran); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--schrift-titel); color: var(--gece); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-weight: 800; font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: -.02em; }
h2 { font-weight: 800; font-size: clamp(1.5rem, 4vw, 2.2rem); letter-spacing: -.01em; }
h3 { font-weight: 600; font-size: 1.25rem; }
p { margin: 0 0 1em; max-width: 68ch; }

.huelle { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Hinweisband „im Aufbau“ ---------- */
.vorschau-band {
  background: var(--safran);
  color: var(--gece);
  font-weight: 600;
  font-size: .95rem;
  text-align: center;
  padding: .45rem var(--rand);
}

/* ---------- Kopfbereich ---------- */
.kopf { background: var(--gece); color: var(--beyaz); }
.kopf .huelle {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 68px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px;
}
.logo {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--schrift-titel); font-weight: 800; font-size: 1.45rem;
  color: var(--beyaz); text-decoration: none; letter-spacing: -.01em;
}
.logo:hover { color: var(--beyaz); }
/* Das Erkennungszeichen: 365 im Kalendertag-Kreis */
.logo-tag {
  display: inline-grid; place-items: center;
  width: 2.35em; height: 2.35em; border-radius: 50%;
  background: var(--safran); color: var(--gece);
  font-size: .62em; font-weight: 800; letter-spacing: -.02em;
  box-shadow: inset 0 -3px 0 var(--safran-tief);
}
.menue { display: flex; align-items: center; gap: 4px 16px; flex-wrap: wrap; }
.menue a { color: #DCE3EE; text-decoration: none; font-weight: 600; font-size: .98rem; padding: 6px 2px; }
.menue a:hover, .menue a[aria-current="page"] { color: var(--beyaz); text-decoration: underline; text-decoration-color: var(--safran); text-decoration-thickness: 2px; }
.sprachwahl { display: inline-flex; border: 1px solid #3A4A6B; border-radius: var(--radius-knopf); overflow: hidden; }
.sprachwahl a { padding: 4px 11px; font-size: .85rem; font-weight: 700; color: #DCE3EE; text-decoration: none; }
.sprachwahl a[aria-current="true"] { background: var(--beyaz); color: var(--gece); }

/* ---------- Kopfteil der Startseite ---------- */
.held { background: var(--gece); color: #DCE3EE; padding: 40px 0 72px; }
.held h1 { color: var(--beyaz); max-width: 18ch; }
.held p { font-size: 1.15rem; max-width: 52ch; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: 56px 0; }
.abschnitt-eng { padding-top: 0; margin-top: -40px; }   /* Karten ragen in den dunklen Kopfteil */

/* ---------- Die Eintrittskarte (Kurskarte) ---------- */
.karten { display: grid; gap: 28px; }
.karte {
  --kerbe: 16px;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--beyaz);
  border-radius: var(--radius-karte);
  box-shadow: 0 1px 0 var(--cizgi), 0 18px 40px -24px rgba(20, 33, 61, .45);
  position: relative;
}
.karte-haupt { padding: 26px 24px 22px; }
.karte-art {
  display: inline-block; font-size: .85rem; font-weight: 700; color: var(--bogaz);
  background: var(--bogaz-hell); border-radius: 6px; padding: 2px 8px; margin-bottom: 10px;
}
.karte h3 { font-size: clamp(1.35rem, 3.5vw, 1.75rem); font-weight: 800; margin-bottom: .35em; }
.karte-text { color: var(--gri); margin-bottom: 14px; }
.karte-fakten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-weight: 600; font-size: .95rem; }
.karte-fakten li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--safran); margin-right: 7px; vertical-align: middle; }

/* Abrissteil: auf dem Handy unten, auf breiten Bildschirmen rechts */
.karte-abriss {
  position: relative;
  padding: 22px 24px 24px;
  border-top: 2px dashed var(--cizgi);
  display: flex; flex-direction: column; gap: 6px; justify-content: center;
}
/* Kerben links und rechts an der Abrisslinie */
.karte-abriss::before, .karte-abriss::after {
  content: ""; position: absolute; top: calc(var(--kerbe) * -1 - 1px);
  width: calc(var(--kerbe) * 2); height: calc(var(--kerbe) * 2);
  border-radius: 50%; background: var(--kagit);
}
.karte-abriss::before { left: calc(var(--kerbe) * -1); }
.karte-abriss::after  { right: calc(var(--kerbe) * -1); }
.karte-preis { font-family: var(--schrift-titel); font-weight: 800; font-size: 2rem; color: var(--gece); line-height: 1; }
.karte-umrechnung { font-size: .85rem; font-weight: 700; margin-top: 4px; }   /* ≈ Lira (29.10.2026) */
.karte-bedingungen { font-size: .9rem; color: var(--gri); margin: 0 0 10px; }

@media (min-width: 760px) {
  .karte { grid-template-columns: 1fr 290px; }
  .karte-haupt { padding: 32px 34px; }
  .karte-abriss { border-top: 0; border-left: 2px dashed var(--cizgi); padding: 28px 30px; }
  .karte-abriss::before, .karte-abriss::after { left: calc(var(--kerbe) * -1 - 1px); right: auto; }
  .karte-abriss::before { top: calc(var(--kerbe) * -1); }
  .karte-abriss::after  { top: auto; bottom: calc(var(--kerbe) * -1); }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  border-radius: var(--radius-knopf); border: 0;
  font-family: var(--schrift-text); font-weight: 700; font-size: 1.05rem;
  text-decoration: none; cursor: pointer;
  background: var(--safran); color: var(--gece);
  box-shadow: inset 0 -3px 0 var(--safran-tief);
}
.knopf:hover { background: #F2B42E; color: var(--gece); }
.knopf:active { box-shadow: none; transform: translateY(1px); }
.knopf-zweit { background: transparent; color: var(--bogaz); box-shadow: inset 0 0 0 2px var(--bogaz); }
.knopf-zweit:hover { background: var(--bogaz-hell); color: var(--gece); }
.knopf:disabled, .knopf[aria-disabled="true"] { background: var(--cizgi); color: var(--gri); box-shadow: none; cursor: not-allowed; }

/* ---------- Leerer Zustand ---------- */
.leer { background: var(--beyaz); border: 2px dashed var(--cizgi); border-radius: var(--radius-karte); padding: 28px; color: var(--gri); }

/* ---------- Fußbereich ---------- */
.fuss { border-top: 1px solid var(--cizgi); padding: 32px 0 40px; font-size: .95rem; color: var(--gri); }
.fuss-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 14px; }
.fuss-links a { color: var(--gece); font-weight: 600; }
.fuss small { display: block; max-width: 70ch; }

/* ---------- Prüfseite für den Server (einrichten/) ---------- */
.pruefliste { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; }
.pruefliste li { background: var(--beyaz); border-radius: 10px; padding: 12px 14px; border-left: 5px solid var(--cizgi); }
.pruefliste li.ok { border-left-color: var(--bogaz); }
.pruefliste li.fehler { border-left-color: var(--lale); }
.pruefliste li.hinweis { border-left-color: var(--safran); }
.pruefliste strong { display: block; color: var(--gece); }

/* =========================================================
   Bauschritt 2: Seite „Eğitim ver“, Formulare, Verwaltungs- und Ausbilderbereich
   Regel: alles einspaltig auf dem Handy, nichts breiter als der Bildschirm.
   ========================================================= */

/* Ausbilder-Name auf der Kurskarte */
.karte-ausbilder { font-weight: 600; color: var(--bogaz); margin: -.2em 0 .5em; }

/* Kopfteil der Ausbilderseite: etwas weniger Abstand nach unten */
.held-ausbilder { padding-bottom: 48px; }

/* Weiße Tafel für Formulare und Meldungen */
.tafel {
  background: var(--beyaz); border-radius: var(--radius-karte);
  box-shadow: 0 1px 0 var(--cizgi), 0 18px 40px -28px rgba(20, 33, 61, .45);
  padding: 24px 20px; max-width: 760px;
}
@media (min-width: 760px) { .tafel { padding: 34px 38px; } }
.tafel-ok { border-top: 6px solid var(--bogaz); }

/* Vorteile (drei Punkte, keine Nummern – keine Reihenfolge) */
.vorteile { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .vorteile { grid-template-columns: repeat(3, 1fr); } }
.vorteile li { background: var(--beyaz); border-radius: 14px; padding: 18px 18px 6px; border-top: 4px solid var(--safran); }
.vorteile h3 { font-size: 1.12rem; margin-bottom: .3em; }

/* Ablauf (echte Reihenfolge → Nummern) */
.ablauf { counter-reset: schritt; list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.ablauf li { counter-increment: schritt; display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.ablauf li::before {
  content: counter(schritt); flex: 0 0 auto; display: inline-grid; place-items: center;
  width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--gece); color: var(--beyaz);
  font-family: var(--schrift-titel); font-weight: 800; font-size: .9rem;
}
.randnotiz { color: var(--gri); font-size: .95rem; }
.abschnitt-formular { padding-top: 0; }

/* Formulare */
.formular h2 { margin-bottom: .8em; }
.feld { margin: 0 0 18px; min-width: 0; }
.feld label { display: block; font-weight: 700; color: var(--gece); margin-bottom: 4px; }
.feld-art { font-weight: 400; color: var(--gri); font-size: .85rem; }
.feld-hilfe { display: block; color: var(--gri); font-size: .9rem; margin-bottom: 6px; }
.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld input[type="password"],
.feld input[type="url"], .feld select, .feld textarea {
  display: block; width: 100%; max-width: 100%; font: inherit; color: var(--murekkep);
  padding: 11px 13px; border: 1px solid #B9C1CD; border-radius: 10px; background: var(--beyaz);
}
.feld textarea { resize: vertical; min-height: 110px; }
.feld input[type="file"] { display: block; max-width: 100%; font: inherit; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 3px solid var(--safran); outline-offset: 1px; border-color: var(--gece); }
.feld-fehlerhaft input, .feld-fehlerhaft select, .feld-fehlerhaft textarea { border-color: var(--lale); }
.feld-fehler { color: var(--lale); font-weight: 600; font-size: .92rem; margin: 6px 0 0; }
.feld-reihe { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .feld-reihe { grid-template-columns: 1fr 1fr; } }
.feld-haken label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--murekkep); }
.feld-haken input { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--bogaz); }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Meldungen oben auf der Seite */
.meldung { border-radius: 10px; padding: 12px 14px; font-weight: 600; margin: 0 0 18px; max-width: none; }
.meldung-ok { background: var(--bogaz-hell); color: var(--gece); border-left: 5px solid var(--bogaz); }
.meldung-fehler { background: #FBE9EC; color: #7A1426; border-left: 5px solid var(--lale); }
.meldung-hinweis { background: #FDF3DC; color: var(--gece); border-left: 5px solid var(--safran); }

/* Kleine Statusmarke */
.marke { display: inline-block; font-size: .8rem; font-weight: 700; border-radius: 6px; padding: 2px 8px; background: var(--kagit); color: var(--gri); }
.marke-neu { background: #FDF3DC; color: #7A5200; }
.marke-ok { background: var(--bogaz-hell); color: var(--bogaz); }
.marke-fehler { background: #FBE9EC; color: #7A1426; }

/* Kopf der geschützten Bereiche (Verwaltung, Ausbilder) */
.bereich-kopf { background: var(--gece); color: var(--beyaz); }
.bereich-kopf .huelle { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.bereich-name { font-size: .85rem; font-weight: 700; color: var(--safran); margin-left: 4px; }
.bereich-menue { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.bereich-menue a, .bereich-menue button {
  color: #DCE3EE; text-decoration: none; font: inherit; font-weight: 600; font-size: .95rem;
  background: none; border: 0; padding: 6px 2px; cursor: pointer;
}
.bereich-menue a[aria-current="page"], .bereich-menue a:hover, .bereich-menue button:hover { color: var(--beyaz); text-decoration: underline; text-decoration-color: var(--safran); text-decoration-thickness: 2px; }
.bereich-menue form { margin: 0; }
.bereich-menue .sprachwahl a { padding: 4px 11px; font-size: .85rem; }
.bereich-menue .sprachwahl a[aria-current="true"] { color: var(--gece); text-decoration: none; }
.bereich-inhalt { padding: 28px 0 56px; }
.bereich-inhalt h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); }

/* Kacheln (Übersicht) */
.kacheln { display: grid; gap: 14px; margin: 0 0 28px; padding: 0; list-style: none; }
@media (min-width: 640px) { .kacheln { grid-template-columns: repeat(3, 1fr); } }
.kachel { display: block; background: var(--beyaz); border-radius: 14px; padding: 18px; text-decoration: none; color: var(--murekkep); box-shadow: 0 1px 0 var(--cizgi); }
.kachel strong { display: block; font-family: var(--schrift-titel); font-size: 2rem; font-weight: 800; color: var(--gece); line-height: 1.1; }
.kachel-hervor { border-top: 5px solid var(--safran); }

/* Listen als Karten (statt Tabellen – auf dem Handy ohne seitliches Schieben) */
.liste { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.liste-eintrag { background: var(--beyaz); border-radius: 12px; padding: 14px 16px; box-shadow: 0 1px 0 var(--cizgi); }
.liste-eintrag a.liste-titel { font-weight: 700; color: var(--gece); text-decoration: none; }
.liste-eintrag a.liste-titel:hover { text-decoration: underline; }
.liste-zeile { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--gri); font-size: .92rem; margin-top: 4px; }
.reiter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.reiter a { text-decoration: none; font-weight: 600; padding: 6px 12px; border-radius: var(--radius-knopf); background: var(--beyaz); color: var(--gece); box-shadow: inset 0 0 0 1px var(--cizgi); }
.reiter a[aria-current="page"] { background: var(--gece); color: var(--beyaz); }
/* Auswahl nach Unterrichtssprache über den Kurskarten (seit 29.10.2026) */
/* Weiße Leiste, weil sie (wie die Karten) in den dunklen Kopfteil ragt – sonst wäre die Beschriftung unlesbar */
.sprachwahl-kurse { align-items: center; background: var(--beyaz); border-radius: var(--radius-karte); padding: 12px 14px; box-shadow: 0 8px 24px rgba(15, 30, 50, .12); position: relative; }
.sprachwahl-label { font-weight: 600; color: var(--gece); margin-right: 2px; flex-basis: 100%; }
@media (min-width: 600px) { .sprachwahl-label { flex-basis: auto; } }
/* Startseite: ein weißer Kasten mit Sprachleiste und Länderreihe (seit 29.10.2026) */
.sprachwahl-kasten { background: var(--beyaz); border-radius: var(--radius-karte); padding: 12px 14px; box-shadow: 0 8px 24px rgba(15, 30, 50, .12); position: relative; margin: 0 0 18px; }
.sprachwahl-kasten .sprachwahl-kurse { background: none; box-shadow: none; padding: 0; margin: 0 0 12px; }
/* Flaggen (Bilder aus assets/flaggen, rund) */
.flagge { width: 18px; height: 18px; border-radius: 50%; vertical-align: -4px; margin-right: 6px; box-shadow: 0 0 0 1px rgba(15, 30, 50, .15); object-fit: cover; }
.flagge-welt { margin-right: 6px; }
.laender-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-top: 10px; border-top: 1px solid var(--cizgi); font-size: .92rem; color: var(--gece); }
.laender-reihe-titel { font-weight: 600; flex-basis: 100%; }
@media (min-width: 600px) { .laender-reihe-titel { flex-basis: auto; } }
.laender-flaggen { display: flex; flex-wrap: wrap; gap: 6px; }
.laender-flaggen .flagge { width: 24px; height: 24px; margin: 0; vertical-align: 0; }

/* Angaben einer Bewerbung */
.angaben { margin: 0 0 20px; display: grid; gap: 12px; }
.angaben div { background: var(--beyaz); border-radius: 10px; padding: 10px 14px; }
.angaben dt { font-size: .85rem; font-weight: 700; color: var(--gri); }
.angaben dd { margin: 2px 0 0; white-space: pre-line; }
.angaben dd.ohne-umbruch { white-space: normal; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 16px; }
.knopf-klein { min-height: 40px; padding: 0 16px; font-size: .95rem; }
.knopf-warnung { background: transparent; color: var(--lale); box-shadow: inset 0 0 0 2px var(--lale); }
.knopf-warnung:hover { background: #FBE9EC; color: #7A1426; }
.linkfeld { display: block; width: 100%; font: inherit; font-size: .9rem; padding: 10px; border: 1px dashed var(--bogaz); border-radius: 8px; background: var(--bogaz-hell); word-break: break-all; }

/* Ausbilder: Profil-Fortschritt und Foto */
.fortschritt { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.fortschritt li { display: flex; gap: 10px; align-items: center; }
.fortschritt li::before { content: "○"; font-weight: 800; color: var(--gri); width: 1.2em; text-align: center; }
.fortschritt li.erledigt::before { content: "✓"; color: var(--bogaz); }
.profilfoto { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; background: var(--bogaz-hell); margin-bottom: 10px; }
.vertragstext { background: var(--kagit); border-radius: 10px; padding: 16px; white-space: pre-line; max-height: 50vh; overflow-y: auto; margin-bottom: 18px; font-size: .97rem; }

/* ============================================================
   Bauschritt 3 – Kurseditor (Ausbilder und Verwaltung)
   ============================================================ */
.kacheln { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
@media (min-width: 640px) { .kacheln { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.knopf-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--bogaz); text-decoration: underline; cursor: pointer; }
.knopf-link:hover { color: var(--gece); }

.editor { min-width: 0; }
.editor .tafel { max-width: 860px; }
.editor h2 { font-size: clamp(1.3rem, 4vw, 1.7rem); }

/* Schrittleiste: echte Reihenfolge → Nummern. Auf dem Handy umbrechend, nie seitlich schiebend. */
.schritt-leiste { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.schritt-leiste a {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-weight: 600; font-size: .95rem; color: var(--gece);
  background: var(--beyaz); border-radius: var(--radius-knopf); padding: 5px 14px 5px 5px;
  box-shadow: inset 0 0 0 1px var(--cizgi);
}
.schritt-leiste a[aria-current="step"], .schritt-leiste a[aria-current="page"] { background: var(--gece); color: var(--beyaz); box-shadow: none; }
.schritt-nr {
  display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%;
  background: var(--kagit); color: var(--gece); font-family: var(--schrift-titel); font-weight: 800; font-size: .85rem;
}
.schritt-leiste a.fertig .schritt-nr { background: var(--bogaz); color: var(--beyaz); }
.schritt-leiste a[aria-current="step"] .schritt-nr, .schritt-leiste a[aria-current="page"] .schritt-nr { background: var(--safran); color: var(--gece); }

/* Abschnitte im Formular */
.gruppe { border: 0; border-top: 1px solid var(--cizgi); margin: 0 0 8px; padding: 18px 0 4px; min-width: 0; }
.gruppe legend { font-family: var(--schrift-titel); font-weight: 800; font-size: 1.15rem; color: var(--gece); padding: 0 8px 0 0; }
.wiederholung { background: var(--kagit); border-radius: 12px; padding: 14px 14px 2px; margin: 0 0 12px; }
@media (min-width: 640px) {
  .wiederholung-zwei { display: grid; grid-template-columns: 140px 1fr; gap: 0 14px; }
}

/* Module und Lektionen */
.modulliste { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 16px; counter-reset: modul; }
.modul { background: var(--kagit); border-radius: 14px; padding: 16px; border-left: 5px solid var(--bogaz); min-width: 0; }
.modul .formular .feld:last-of-type { margin-bottom: 10px; }
.lektionsliste { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; }
.lektionsliste li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  background: var(--beyaz); border-radius: 10px; padding: 8px 10px 8px 14px;
}
.lektionsliste li > a { font-weight: 700; color: var(--gece); flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
.lektionsliste .randnotiz { font-size: .85rem; }
.inline-form { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.knopf-pfeil {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: var(--beyaz); color: var(--gece); font-size: 1.1rem; font-weight: 800; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--cizgi);
}
.knopf-pfeil:hover { background: var(--bogaz-hell); }
.knopf-pfeil:disabled { opacity: .35; cursor: default; background: var(--beyaz); }
.link-warnung { color: var(--lale); font-weight: 600; font-size: .92rem; }
.link-warnung:hover { color: #7A1426; }
.neu-zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.neu-zeile input[type="text"] {
  flex: 1 1 14em; min-width: 0; font: inherit; padding: 9px 12px; border: 1px solid #B9C1CD; border-radius: 10px; background: var(--beyaz);
}
.modul-neu { border-top: 2px dashed var(--cizgi); padding-top: 18px; margin-top: 4px; }
.modul-neu h3 { font-size: 1.15rem; }

/* Prüfungsfragen */
.fragenliste { margin: 0 0 18px; padding-left: 1.6em; display: grid; gap: 6px; }
.fragenliste li { padding-left: 4px; }
.fragenliste a { color: var(--gece); font-weight: 600; overflow-wrap: anywhere; }
.antwort-zeile { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.antwort-zeile input[type="radio"] { width: 24px; height: 24px; flex: 0 0 auto; margin: 0; accent-color: var(--bogaz); }
.antwort-buchstabe { flex: 0 0 auto; font-family: var(--schrift-titel); font-weight: 800; color: var(--gece); width: 1.2em; }
.antwort-zeile input[type="text"] {
  flex: 1 1 auto; min-width: 0; font: inherit; padding: 10px 12px; border: 1px solid #B9C1CD; border-radius: 10px; background: var(--beyaz);
}
.antwort-zeile:has(input[type="radio"]:checked) input[type="text"] { border-color: var(--bogaz); box-shadow: inset 0 0 0 1px var(--bogaz); background: var(--bogaz-hell); }

/* Zertifikat: Unterschrift und Vorschau (nachempfunden dem späteren PDF, Querformat) */
.unterschrift-bild { display: block; max-width: 220px; max-height: 80px; object-fit: contain; margin: 4px 0 8px; }
.zertifikat-vorschau {
  max-width: 860px; aspect-ratio: 297 / 210; background: var(--beyaz); color: var(--gece);
  border: 10px solid var(--gece); outline: 2px solid var(--safran); outline-offset: -18px;
  padding: clamp(18px, 5vw, 48px); display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(4px, 1.4vw, 12px); font-size: clamp(.62rem, 1.8vw, 1rem); overflow: hidden; margin-bottom: 28px;
}
.zv-marke { display: inline-flex; align-items: center; gap: .3em; font-family: var(--schrift-titel); font-weight: 800; font-size: 1.4em; }
.zv-titel { font-family: var(--schrift-titel); font-weight: 800; font-size: 2.2em; line-height: 1.1; }
.zv-name { font-family: var(--schrift-titel); font-weight: 600; font-size: 1.7em; border-bottom: 2px solid var(--safran); padding: 0 1em .1em; }
.zv-text { margin: 0; max-width: 46em; color: var(--murekkep); }
.zv-fuss { margin-top: auto; width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; font-size: .85em; color: var(--gri); text-align: left; }
.zv-fuss > div { display: flex; flex-direction: column; gap: 2px; }
.zv-fuss > div:last-child { text-align: right; }
.zv-fuss .unterschrift-bild { max-height: 3.5em; margin: 0; }

.pruefliste li.fehler { border-left-color: var(--lale); }
.pruefliste li a { display: inline-block; margin-top: 4px; font-weight: 600; }
.weiter { margin: 22px 0 0; }

/* ============================================================
   Bauschritt 3 – Verkaufsseite (Vorlage für jede Ausbildung)
   ============================================================ */
.vs-vorschau-band { background: var(--safran); color: var(--gece); font-weight: 700; text-align: center; padding: .55rem var(--rand); }

.vs-held { background: var(--gece); color: #DCE3EE; padding: 40px 0 56px; }
.vs-held-gitter { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .vs-held-gitter { grid-template-columns: 1fr 340px; gap: 48px; } }
.vs-held h1 { color: var(--beyaz); max-width: 20ch; overflow-wrap: anywhere; }
.vs-kategorie { display: inline-block; color: var(--safran); font-weight: 700; margin-bottom: 10px; }
.vs-unterzeile { font-size: 1.15rem; max-width: 52ch; }
/* Hürden, die wegfallen: durchgestrichen */
.vs-huerden { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.vs-huerden li { display: flex; gap: 10px; align-items: baseline; color: #B9C4D6; }
.vs-huerden li::before { content: "✕"; color: var(--safran); font-weight: 800; flex: 0 0 auto; }
.vs-huerden li { text-decoration: line-through; text-decoration-color: rgba(232, 163, 23, .7); text-decoration-thickness: 2px; }

.vs-kaufbox { background: var(--beyaz); color: var(--murekkep); border-radius: var(--radius-karte); padding: 22px; box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .6); }
.vs-kurstitel { font-weight: 700; color: var(--gece); margin-bottom: 4px; }
.vs-preis { font-family: var(--schrift-titel); font-weight: 800; font-size: 2.4rem; color: var(--gece); line-height: 1.1; margin-bottom: 14px; }
.vs-kaufen { width: 100%; text-align: center; }
.vs-haken, .vs-checkliste { list-style: none; padding: 0; display: grid; gap: 8px; }
.vs-haken { margin: 14px 0 0; font-size: .95rem; }
.vs-haken li, .vs-checkliste li { display: flex; gap: 10px; align-items: baseline; }
.vs-haken li::before, .vs-checkliste li::before { content: "✓"; color: var(--bogaz); font-weight: 800; flex: 0 0 auto; }

.vs-abschnitt h2 { margin-bottom: .7em; }
.vs-hell { background: var(--beyaz); }
.vs-zwei { display: grid; gap: 28px; align-items: center; }
@media (min-width: 860px) { .vs-zwei { grid-template-columns: 1fr 1fr; gap: 48px; } }

/* Einblick: vereinfachtes Bild des Lernbereichs */
.vs-einblick { background: var(--beyaz); border-radius: 14px; box-shadow: 0 1px 0 var(--cizgi), 0 18px 40px -28px rgba(20, 33, 61, .45); padding: 0 0 16px; overflow: hidden; }
.vs-einblick-leiste { display: flex; gap: 6px; padding: 10px 14px; background: var(--gece); margin-bottom: 12px; }
.vs-einblick-leiste span { width: 10px; height: 10px; border-radius: 50%; background: #3A4A6B; }
.vs-einblick-leiste span:first-child { background: var(--safran); }
.vs-einblick-modul { display: flex; gap: 10px; align-items: center; margin: 0 14px 8px; padding: 10px 12px; border-radius: 10px; background: var(--kagit); font-weight: 600; overflow-wrap: anywhere; }
.vs-nr { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--gece); color: var(--beyaz); font-family: var(--schrift-titel); font-weight: 800; font-size: .85rem; }
.vs-einblick-balken { margin: 14px 14px 0; height: 8px; border-radius: 99px; background: var(--kagit); overflow: hidden; }
.vs-einblick-balken span { display: block; height: 100%; background: var(--bogaz); }

.vs-gruppen { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 700px) { .vs-gruppen { grid-template-columns: 1fr 1fr; } }
.vs-gruppen li { background: var(--beyaz); border-radius: 14px; padding: 18px 18px 4px; border-left: 5px solid var(--bogaz); }
.vs-gruppen h3 { font-size: 1.12rem; margin-bottom: .3em; }
.vs-checkliste { margin: 0; font-size: 1.08rem; }

/* Module: echte Reihenfolge → Nummern */
.vs-module { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: vsmodul; }
.vs-module li { counter-increment: vsmodul; position: relative; background: var(--beyaz); border-radius: 14px; padding: 18px 18px 4px 66px; box-shadow: 0 1px 0 var(--cizgi); }
.vs-module li::before {
  content: counter(vsmodul); position: absolute; left: 16px; top: 16px;
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--gece); color: var(--beyaz); font-family: var(--schrift-titel); font-weight: 800;
}
.vs-module h3 { font-size: 1.15rem; margin-bottom: .3em; overflow-wrap: anywhere; }
.vs-ergebnis { font-weight: 600; color: var(--bogaz); margin-bottom: .4em; }

.vs-zahlen { background: var(--bogaz); color: var(--beyaz); padding: 34px 0; }
.vs-zahlen ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (min-width: 760px) { .vs-zahlen ul { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } }   /* 29.10.2026: 4 oder 5 Zahlen in einer Reihe */
.vs-zahlen strong { display: block; font-family: var(--schrift-titel); font-weight: 800; font-size: 2.3rem; line-height: 1.05; color: var(--beyaz); }
.vs-zahlen span { color: #D3ECEA; }

.vs-passt { display: grid; gap: 16px; }
@media (min-width: 760px) { .vs-passt { grid-template-columns: 1fr 1fr; } }
.vs-passt > div { background: var(--beyaz); border-radius: 14px; padding: 18px; }
.vs-passt h3 { font-size: 1.12rem; }
.vs-passt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vs-passt li { display: flex; gap: 10px; align-items: baseline; }
.vs-passt-ja { border-top: 5px solid var(--bogaz); }
.vs-passt-ja li::before { content: "✓"; color: var(--bogaz); font-weight: 800; flex: 0 0 auto; }
.vs-passt-nein { border-top: 5px solid var(--cizgi); }
.vs-passt-nein li::before { content: "–"; color: var(--gri); font-weight: 800; flex: 0 0 auto; }

/* Drei Schritte: echte Reihenfolge → Nummern */
.vs-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: vsschritt; }
@media (min-width: 760px) { .vs-schritte { grid-template-columns: repeat(3, 1fr); } }
.vs-schritte li { counter-increment: vsschritt; background: var(--kagit); border-radius: 14px; padding: 18px 18px 4px; }
.vs-schritte li::before {
  content: counter(vsschritt); display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--safran); color: var(--gece); font-family: var(--schrift-titel); font-weight: 800; margin-bottom: 10px;
}
.vs-schritte h3 { font-size: 1.12rem; margin-bottom: .3em; }

.vs-ticket .vs-kaufen { margin-top: 4px; }
.vs-ticket-daten { margin: 14px 0 0; display: grid; gap: 10px; }
.vs-ticket-daten dt { font-size: .85rem; font-weight: 700; color: var(--gri); }
.vs-ticket-daten dd { margin: 0; font-weight: 600; }

.vs-ausbilder { display: grid; gap: 20px; align-items: start; }
@media (min-width: 700px) { .vs-ausbilder { grid-template-columns: 160px 1fr; gap: 32px; } }
.vs-ausbilder-foto { width: 160px; height: 160px; }
.vs-fach { color: var(--bogaz); font-weight: 600; }

.vs-stimmen { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .vs-stimmen { grid-template-columns: 1fr 1fr; } }
.vs-stimmen li { background: var(--beyaz); border-radius: 14px; padding: 18px; }
.vs-stimmen blockquote { margin: 0 0 10px; font-size: 1.05rem; }
.vs-stimme-name { font-weight: 700; color: var(--gece); margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }

.vs-faq { display: grid; gap: 10px; max-width: 760px; }
.vs-faq details { background: var(--beyaz); border-radius: 12px; padding: 0 16px; box-shadow: 0 1px 0 var(--cizgi); }
.vs-faq summary { cursor: pointer; font-weight: 700; color: var(--gece); padding: 14px 0; list-style-position: outside; }
.vs-faq details[open] summary { color: var(--bogaz); }
.vs-faq details p { margin: 0 0 14px; }

.vs-schluss { background: var(--gece); color: #DCE3EE; padding: 56px 0; text-align: center; }
.vs-schluss h2 { color: var(--beyaz); margin-left: auto; margin-right: auto; max-width: 24ch; }
.vs-schluss p { margin-left: auto; margin-right: auto; }
.vs-schluss .vs-kaufen { width: auto; margin: 6px 0 22px; }
.vs-hinweis { font-size: .9rem; color: #A9B4C6; }

/* ============================================================
   Bauschritt 4 – Termine, Kalender, öffentliche Seiten
   Erkennungszeichen: jeder Termin als kleines Kalenderblatt (Tag + Monat),
   passend zur „365“ im Kalendertag-Kreis des Logos.
   ============================================================ */
.termine { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.termin { display: flex; gap: 14px; align-items: flex-start; background: var(--beyaz); border-radius: 14px; padding: 14px; box-shadow: 0 1px 0 var(--cizgi); min-width: 0; }
.vs-hell .termin { background: var(--kagit); box-shadow: none; }
.termin-tag {
  flex: 0 0 auto; width: 58px; text-align: center; border-radius: 10px; overflow: hidden;
  background: var(--beyaz); box-shadow: inset 0 0 0 2px var(--gece);
  font-weight: 700; font-size: .78rem; color: var(--gece); padding-bottom: 5px; line-height: 1.1;
}
.termin-tag span { display: block; background: var(--gece); color: var(--beyaz); font-family: var(--schrift-titel); font-weight: 800; font-size: 1.45rem; padding: 6px 0 4px; margin-bottom: 4px; }
.termin-live .termin-tag span { background: var(--bogaz); }
.termin-live .termin-tag { box-shadow: inset 0 0 0 2px var(--bogaz); }
.termin-start .termin-tag span { background: var(--safran); color: var(--gece); }
.termin-start .termin-tag { box-shadow: inset 0 0 0 2px var(--safran); }
.termin-inhalt { min-width: 0; flex: 1 1 auto; }
.termin-inhalt p { margin: 0 0 4px; }
.termin-art { font-size: .85rem; font-weight: 700; color: var(--bogaz); }
.termin-start .termin-art { color: var(--safran-tief); }
.termin-kurs { font-weight: 700; color: var(--gece); overflow-wrap: anywhere; }
.termin-kurs a, .termin-ausbilder a { color: inherit; }
.termin-ausbilder { font-size: .92rem; color: var(--gri); }
.termin-zeit { font-weight: 600; }
.termin-hinweis { color: var(--gri); font-size: .95rem; }
.termin-plaetze { display: inline-block; font-size: .85rem; font-weight: 700; border-radius: 6px; padding: 2px 8px; background: var(--bogaz-hell); color: var(--bogaz); }
.termin-voll .termin-plaetze { background: #FBE9EC; color: #7A1426; }
.termin-abgesagt .termin-plaetze { background: #FBE9EC; color: #7A1426; }
.termin-abgesagt .termin-zeit, .termin-abgesagt .termin-kurs, .termin-abgesagt > strong { text-decoration: line-through; text-decoration-color: var(--lale); }
.termin-abgesagt .termin-tag { opacity: .55; }

/* Kalenderseite */
.kal-held { padding-bottom: 64px; }
.kal-filter { max-width: none; display: grid; gap: 0 16px; align-items: end; margin-bottom: 28px; }
@media (min-width: 700px) { .kal-filter { grid-template-columns: 1fr 1fr auto; } .kal-filter .knopf { margin-bottom: 18px; } }
.kal-monat { font-size: clamp(1.3rem, 4vw, 1.7rem); margin: 8px 0 14px; padding-bottom: 6px; border-bottom: 3px solid var(--safran); display: inline-block; }
.kal-leer { margin-top: 10px; }
.kalender-hinweis { margin: 24px 0 0; font-weight: 700; }

/* Ausbilderseite */
.eg-held { padding-bottom: 48px; }
.eg-gitter { display: grid; gap: 20px; align-items: center; }
@media (min-width: 700px) { .eg-gitter { grid-template-columns: 160px 1fr; gap: 32px; } }
.eg-foto { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--safran); background: var(--bogaz-hell); }
@media (min-width: 700px) { .eg-foto { width: 160px; height: 160px; } }
.eg-rolle { color: var(--safran); font-weight: 700; margin: 0 0 4px; }
.eg-held h1 { margin-bottom: .3em; overflow-wrap: anywhere; }
.eg-fach { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.eg-fach li { background: rgba(255, 255, 255, .1); color: var(--beyaz); border-radius: var(--radius-knopf); padding: 3px 12px; font-size: .92rem; font-weight: 600; }
.eg-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.eg-links a { color: var(--beyaz); font-weight: 700; }
.eg-bio { max-width: 68ch; }

/* Karten: Titel als Link, ohne Unterstreichung */
.karte-titel-link { color: inherit; text-decoration: none; }
.karte-titel-link:hover { text-decoration: underline; text-decoration-color: var(--safran); }
.karte-ausbilder a { color: var(--bogaz); font-weight: 700; }

/* Kurseditor: Schritt „Termine“ */
.modus-wahl { border-top: 0; padding-top: 0; display: grid; gap: 10px; }
.modus-option { display: flex; gap: 10px; align-items: flex-start; background: var(--kagit); border-radius: 12px; padding: 12px 14px; cursor: pointer; font-weight: 400; }
.modus-option[hidden] { display: none; }   /* Zahlungswege je Land (29.10.2026): ausgeblendete Wege wirklich verbergen */
.modus-option input { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--bogaz); }
.modus-option:has(input:checked) { box-shadow: inset 0 0 0 2px var(--bogaz); background: var(--bogaz-hell); }
.termin-form { background: var(--kagit); border-radius: 14px; padding: 16px; margin: 0 0 20px; }
.termin-form h3 { font-size: 1.15rem; }
.termin-form input[type="date"], .termin-form input[type="time"] { display: block; width: 100%; font: inherit; padding: 10px 12px; border: 1px solid #B9C1CD; border-radius: 10px; background: var(--beyaz); min-height: 46px; }
.termin-verwaltung .knopf-link { font-size: .95rem; }
.vergangen { margin-top: 18px; }
.vergangen summary { cursor: pointer; font-weight: 700; color: var(--gece); padding: 6px 0; }
.liste-eintrag.termin-abgesagt { opacity: .8; }

/* Verwaltung: Kurzadresse eines Ausbilders */
.neu-zeile > label { flex: 1 1 100%; font-weight: 600; font-size: .92rem; overflow-wrap: anywhere; }

/* ============================================================
   Bauschritt 5 – Kauf, Bestellung, Teilnehmerkonto
   ============================================================ */
.kauf-gitter { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .kauf-gitter { grid-template-columns: 1fr 340px; gap: 40px; } .kauf-uebersicht { position: sticky; top: 20px; } }
.kauf-uebersicht h2 { font-size: 1.25rem; overflow-wrap: anywhere; }
.kauf-uebersicht .vs-haken { margin: 0 0 14px; }
.kauf-preis { font-family: var(--schrift-titel); font-weight: 800; font-size: 2.2rem; color: var(--gece); line-height: 1.1; margin: 4px 0 6px; }
.kauf-knopf { width: 100%; margin-top: 6px; }
@media (min-width: 640px) { .kauf-knopf { width: auto; } }
.zahlart-wahl { border-top: 1px solid var(--cizgi); display: grid; gap: 10px; }
.zahlart-wahl small { color: var(--gri); font-size: .9rem; }
.feld-haken a { font-weight: 700; }
.bestell-tafel { max-width: 720px; }
.bestell-tafel h1 { overflow-wrap: anywhere; }
.bankdaten { margin-top: 12px; }
.bankdaten dd { font-size: 1.1rem; font-weight: 600; overflow-wrap: anywhere; }
.paypal-knoepfe { max-width: 420px; margin: 16px 0; min-height: 50px; }
.hesap h1 { overflow-wrap: anywhere; }
.hesap-liste .liste-eintrag strong:first-child { font-size: 1.1rem; color: var(--gece); }
.termin-wahl { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--cizgi); }
.termin-wahl select { display: block; width: 100%; max-width: 100%; font: inherit; padding: 10px 12px; border: 1px solid #B9C1CD; border-radius: 10px; background: var(--beyaz); }
.kachel:not(a) { cursor: default; }

/* ---------- Bewegung nur, wenn erwünscht ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Unterrichtssprache (29.10.2026) ----------
   Zeigt Käufern, in welcher Sprache eine Ausbildung unterrichtet wird – unabhängig von der Sprache der Webseite. */
.vs-sprache { margin: 12px 0 0; font-weight: 700; font-size: .95rem; }
/* Preis nach Land (29.10.2026): Länderwahl in der Kaufbox – volle Breite, auch auf dem Handy ohne seitliches Schieben */
.vs-land { margin: 12px 0 0; display: grid; gap: 6px; }
/* Lira-Hinweis und „Anmeldung öffnet bald“ (29.10.2026) */
.vs-umrechnung { margin: -6px 0 12px; font-weight: 700; }
.vs-umrechnung small { display: block; font-weight: 400; font-size: .8rem; }
.vs-bald-kontakt { margin: 10px 0 0; font-size: .9rem; overflow-wrap: anywhere; }
.vs-land label { font-size: .9rem; font-weight: 700; }
.vs-land select { width: 100%; max-width: 100%; }
.karte-fakten .karte-sprache { color: var(--bogaz); }
.termin-sprache { font-size: .92rem; font-weight: 600; margin: 2px 0 0; }

/* ---------- Ausbilderfoto auf der Karte (29.10.2026) ----------
   Rundes Foto links neben Titel und Ausbildername; auf schmalen Handys darüber. Ohne Foto: Anfangsbuchstaben. */
.karte-kopf { display: flex; gap: 16px; align-items: flex-start; }
.karte-kopf-text { min-width: 0; flex: 1 1 auto; }
.karte-foto { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: block; background: var(--bogaz); box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(0,0,0,.08); }
.karte-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.karte-foto-kuerzel { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 1.3rem; letter-spacing: .02em; }
@media (max-width: 480px) {
  .karte-kopf { flex-direction: column; gap: 10px; }
  .karte-foto { flex-basis: 56px; width: 56px; height: 56px; }
}

/* ============================================================
   Bauschritte 6–10 (29.10.2026): Lernbereich, Prüfung, Dokumente, Prüfseite, Verwaltung
   ============================================================ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.feld input[type="search"] { width: 100%; max-width: 100%; font: inherit; padding: 10px 12px; border: 1px solid #B9C1CD; border-radius: 10px; background: var(--beyaz); }

/* Fortschrittsbalken: Petrol auf hellem Petrol, Safran-Spitze zeigt „hier bist du“ */
.fortschritt { height: 12px; border-radius: 999px; background: var(--bogaz-hell); overflow: hidden; margin: 4px 0 8px; }
.fortschritt > span { display: block; height: 100%; min-width: 12px; background: var(--bogaz); border-right: 4px solid var(--safran); border-radius: 999px; }
.fortschritt-text { font-weight: 600; margin: 0 0 14px; }
.hesap-lernen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--cizgi); }
.hesap-lernen .fortschritt { flex: 1 1 100%; margin: 0; }

.lern h1 { overflow-wrap: anywhere; }
.lern h2 { margin-top: 32px; }
.lern-zurueck { margin: 0 0 6px; font-weight: 600; }
.lern-zurueck a::before { content: "‹ "; }
.lern-ort { color: var(--gri); margin: 0 0 4px; font-size: .95rem; }
.lern-stand { max-width: 760px; }
.lern-fertig { font-weight: 700; color: var(--bogaz); margin: 0 0 12px; }

.lern-module { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: modul; }
.lern-modul { background: var(--beyaz); border-radius: 14px; padding: 16px; box-shadow: 0 1px 0 var(--cizgi); counter-increment: modul; }
.lern-modul-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lern-modul-kopf h3 { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.lern-ergebnis { color: var(--gri); margin: 6px 0 10px; }
.lern-lektionen { list-style: none; margin: 0; padding: 0; }
.lern-lektionen li + li { border-top: 1px solid var(--cizgi); }
.lern-lektionen a { display: flex; align-items: center; gap: 10px; padding: 10px 2px; min-height: 44px; text-decoration: none; color: var(--murekkep); }
.lern-lektionen a:hover .lern-lektion-titel { text-decoration: underline; }
.lern-lektion-titel { flex: 1; overflow-wrap: anywhere; }
.lern-dauer { color: var(--gri); font-size: .9rem; white-space: nowrap; }
.haken { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--cizgi); position: relative; }
.lern-lektionen .erledigt .haken { background: var(--bogaz); box-shadow: none; }
.lern-lektionen .erledigt .haken::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid var(--beyaz); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.lern-lektionen .erledigt .lern-lektion-titel { color: var(--gri); }

/* Lektion */
.video-rahmen { position: relative; width: 100%; max-width: 900px; aspect-ratio: 16 / 9; background: var(--gece); border-radius: 14px; overflow: hidden; margin: 10px 0 20px; }
.video-rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lern-text { max-width: 70ch; font-size: 1.05rem; line-height: 1.65; }
.lern-text p { margin: 0 0 1em; overflow-wrap: anywhere; }
.lern-material { margin: 8px 0 20px; }
.lern-material .knopf { white-space: normal; text-align: center; }
.lern-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 24px 0; padding: 18px 0; border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }
.lern-aktion .lern-fertig { margin: 0; flex: 1 1 100%; }
.lern-blaettern { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; font-weight: 600; }
.lern-blaettern a:last-child { text-align: right; }
.lern-blaettern a:first-child:not(:only-child)::before { content: "‹ "; }
.lern-blaettern a:last-child:not(:only-child)::after { content: " ›"; }

/* Prüfung */
.pr-regeln { margin: 0 0 18px; padding-left: 1.2em; }
.pr-regeln li { margin-bottom: 6px; }
.pr-fragen { margin: 0 0 20px; padding: 0; list-style: none; counter-reset: frage; display: grid; gap: 14px; }
.pr-frage { counter-increment: frage; background: var(--beyaz); border-radius: 14px; padding: 16px; box-shadow: 0 1px 0 var(--cizgi); }
.pr-frage fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.pr-frage legend { font-weight: 700; color: var(--gece); margin-bottom: 10px; padding: 0; overflow-wrap: anywhere; }
.pr-frage legend::before { content: counter(frage) ". "; color: var(--bogaz); }
.pr-antwort { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--cizgi); margin-top: 8px; }
.pr-antwort input { margin-top: 4px; flex: none; width: 18px; height: 18px; accent-color: var(--bogaz); }
.pr-antwort span { overflow-wrap: anywhere; }
.pr-antwort:has(input:checked) { box-shadow: inset 0 0 0 2px var(--bogaz); background: var(--bogaz-hell); }
.pr-trotzdem { display: flex; gap: 8px; margin: 0 0 16px; }
.pr-ergebnis { margin-bottom: 24px; }
.pr-zahl { font-family: var(--schrift-titel); font-weight: 800; font-size: clamp(2.6rem, 10vw, 3.6rem); color: var(--gece); margin: 0; line-height: 1; }

/* Auswahl (Radio) in Formularen */
.wahl-gruppe { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.wahl-gruppe legend { font-weight: 700; margin-bottom: 4px; padding: 0; }
.wahl { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; }
.wahl input { margin-top: 4px; flex: none; accent-color: var(--bogaz); }
.wahl span { overflow-wrap: anywhere; }
.hintergrund-klein { display: block; max-width: 260px; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 1px 0 var(--cizgi); margin: 6px 0; }
.zertifikat-vorschau.mit-hintergrund { background-size: cover; background-position: center; }

/* Dokumente ausstellen */
.dok-form { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--cizgi); }
.dok-form input[type="file"] { margin-top: 8px; }
.dok-sperre { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 10px; }
.dok-sperre input { flex: 1 1 200px; min-width: 0; font: inherit; padding: 8px 10px; border: 1px solid #B9C1CD; border-radius: 10px; }

/* Prüfseite */
.zp { max-width: 640px; }
.zp-form { display: grid; gap: 4px; }
.zp-form input { text-transform: uppercase; letter-spacing: .04em; }
.zp-echt { margin-top: 20px; border-radius: 14px; border: 2px solid var(--bogaz); overflow: hidden; }
.zp-siegel { margin: 0; padding: 12px 16px; background: var(--bogaz); color: var(--beyaz); font-weight: 700; font-size: 1.1rem; }
.zp-daten { margin: 0; padding: 6px 16px 14px; }
.zp-daten div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 8px 0; border-bottom: 1px solid var(--cizgi); }
.zp-daten div:last-child { border-bottom: 0; }
.zp-daten dt { color: var(--gri); font-size: .9rem; }
.zp-daten dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 560px) { .zp-daten div { grid-template-columns: 160px minmax(0, 1fr); gap: 12px; } }

/* Verwaltung: Teilnehmer */
.such-form { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: flex-end; max-width: 560px; }
.such-form .feld { flex: 1 1 240px; }
.such-form .knopf { margin-bottom: 18px; }
.tn-zugang { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--cizgi); }
.tn-zugang p { margin: 0 0 4px; overflow-wrap: anywhere; }
.tn-aktionen { margin: 10px 0 0; }
.tn-aktionen select { font: inherit; padding: 6px 8px; border: 1px solid #B9C1CD; border-radius: 10px; background: var(--beyaz); max-width: 100%; }
.tn-aktionen form { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tn-neu { margin-top: 12px; }
.tn-neu summary { cursor: pointer; font-weight: 600; color: var(--bogaz); }
.tn-neu select { max-width: 100%; }

/* Rechtliche Seiten (Bauschritt 11): ruhige Lesespalte */
.recht { max-width: 760px; }
.recht h1 { overflow-wrap: anywhere; }
.recht h2 { font-size: clamp(1.15rem, 3.6vw, 1.35rem); margin: 28px 0 8px; }
.recht p { max-width: 70ch; overflow-wrap: anywhere; }

/* Verkaufsseite: lange Versprechen kleiner setzen, damit die Überschrift nicht den ganzen Bildschirm füllt (29.10.2026) */
.vs-held h1.vs-h1-lang { font-size: clamp(1.6rem, 4.2vw, 2.5rem); max-width: 26ch; }
.vs-held h1.vs-h1-sehrlang { font-size: clamp(1.4rem, 3.4vw, 2rem); max-width: 32ch; }

/* Umfang je Modul (Lektionen · PDF-Seiten) gut sichtbar – Ahmet, 29.10.2026 */
.vs-modul-umfang { margin: 6px 0 0; font-weight: 700; color: var(--bogaz); font-size: .98rem; }

/* Teilnahmevoraussetzung unter dem Kaufknopf (Eğitmen Sınavı, 29.10.2026): deutlich, aber ruhig */
.vs-voraussetzung { margin: 14px 0 0; padding: 10px 12px; border-left: 4px solid var(--safran); background: var(--kagit);
  font-size: .93rem; line-height: 1.45; overflow-wrap: anywhere; }
.lern-voraussetzung { overflow-wrap: anywhere; }