/* Setnetz Academy – Basis-Stylesheet nach der Setnetz-CI (Entwurf „Setnetz Website“):
   Blau/Weiß aus dem Logo-Blau, Dunkelblau statt Schwarz, brand-blue als einzige Aktionsfarbe.
   Schriften liegen selbst gehostet unter /static/fonts (SIL Open Font License) – kein Abruf bei Google. */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/barlow-condensed-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: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/barlow-condensed-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: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/barlow-condensed-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: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/barlow-condensed-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; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-sans-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: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-sans-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: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-sans-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: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-sans-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: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-500-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: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-ext-500-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: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/ibm-plex-sans-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: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/ibm-plex-sans-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: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/ibm-plex-mono-latin-500-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: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/ibm-plex-mono-latin-ext-500-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; }

:root {
  /* Farben der Setnetz-CI */
  --logo-blue: #2a87b1;   /* Logo, große Flächen, Text ab 24 px */
  --blue: #1f6f94;        /* einzige Aktionsfarbe: Buttons, Links, Labels, Icons */
  --blue-hover: #185a79;
  --navy: #0e3a52;        /* Überschriften, dunkle Flächen (Kopfleiste, Fuß, Schwerpunkt) */
  --sky: #8fcbe6;         /* Akzent nur auf --navy */
  --tint: #ddeef6;        /* helle Blaufläche */
  --ink: #0f2a3a; --muted: #52677a; --line: #d3e3ec; --line-strong: #7892a3; --bg: #f3f8fb; --card: #fff;
  --on-navy: #c3dce8;
  /* Zustände (fachlich nötig: bestanden, fällig, widerrufen) */
  --ok: #17803d; --ok-bg: #e5f5ea; --warn: #8a5a00; --warn-bg: #fff4d6; --bad: #b3261e; --bad-bg: #fde8e6; --info: var(--blue); --info-bg: var(--tint);
  --radius: 6px; --radius-sm: 4px; --shadow: none;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --header-h: 88px;
}
@media (max-width: 860px) { :root { --header-h: 64px; } }
* { box-sizing: border-box; }
/* Hintergrund des Fußes auch beim Überziehen am Seitenende (iPad/iPhone) */
html { -webkit-text-size-adjust: 100%; background: var(--navy); }
/* Fuß immer am unteren Bildschirmrand: Seite mindestens so hoch wie der Bildschirm, Inhalt wächst */
body { margin: 0; font: 16px/1.55 var(--font); color: var(--ink); background: var(--bg); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; }
body > .site-footer { flex-shrink: 0; }
a { color: var(--blue); }
a:hover { color: var(--blue-hover); }
strong, b { font-weight: 600; }
/* Überschriften: Barlow Condensed in Versalien, Dunkelblau */
h1, h2, h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: 1.02; color: var(--navy); margin: 0 0 .5em; letter-spacing: .005em; }
h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 2.4vw, 2rem); margin-top: 1.4em; }
h3 { font-size: 1.35rem; }
.card h3:not(:first-child) { margin-top: 1.4em; }
h1 small, h2 small, h3 small { font-family: var(--font); text-transform: none; font-weight: 500; font-size: .55em; letter-spacing: 0; }
.card h2:first-child, .card h1:first-child { margin-top: 0; }
img { max-width: 100%; }
code, .mono { font-family: var(--mono); font-size: .92em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; z-index: 99; }

/* Seitenrand; bei Geräten mit Aussparung (Notch) mindestens der sichere Bereich */
.container { max-width: 1120px; margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
.container--wide { max-width: 1280px; }
main.container { padding-top: 2rem; padding-bottom: 4rem; }

/* Kontaktleiste (nur breit), Kopf weiß mit Logo in Logo-Blau */
.topbar { background: var(--navy); color: var(--on-navy); font: 500 13px/1 var(--mono); letter-spacing: .02em; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; min-height: 40px; }
.topbar__kontakt { display: flex; gap: 2rem; }
.topbar a { color: #fff; text-decoration: none; } .topbar a:hover { color: var(--sky); }
@media (max-width: 860px) { .topbar { display: none; } }
.site-header { background: #fff; color: var(--ink); position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: .8rem; color: var(--navy); text-decoration: none; font-weight: 600; font-size: 1.1rem; margin-right: auto; }
.brand__logo { display: flex; }
.brand__logo img { display: block; height: 56px; width: auto; }
@media (max-width: 860px) { .brand__logo img { height: 40px; } }
.mainnav { display: flex; align-items: center; gap: .35rem 1.6rem; flex-wrap: wrap; }
.mainnav a, .mainnav .linklike { color: var(--ink); text-decoration: none; padding: .45rem 0; font-size: 1rem; font-weight: 500; border-bottom: 2px solid transparent; }
.mainnav a:hover, .mainnav .linklike:hover { color: var(--blue); }
.mainnav a.active { color: var(--blue); border-bottom-color: var(--blue); }
.mainnav a.btn { color: #fff; padding: 0 1.25rem; border-bottom: 0; }
.nav-toggle { display: none; min-height: 44px; background: #fff; border: 1px solid var(--line-strong); color: var(--navy); border-radius: var(--radius-sm); padding: .4rem .9rem; font: 600 1rem var(--font); cursor: pointer; }
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .mainnav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; padding: .25rem 20px 1rem; }
  .mainnav a, .mainnav .linklike { border-bottom: 1px solid var(--line); padding: .7rem 0; text-align: left; }
  .mainnav a.active { border-bottom-color: var(--line); }
  .mainnav a.btn { margin-top: .75rem; border-bottom: 0; }
  .mainnav.open { display: flex; }
}

/* Fuß: Dunkelblau mit Negativ-Logo; unten der sichere Bereich (Home-Balken am iPhone/iPad) */
.site-footer { background: var(--navy); color: var(--on-navy); font-size: .94rem; padding: 3rem 0 calc(3rem + env(safe-area-inset-bottom)); }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem 3rem; flex-wrap: wrap; }
.footer-brand { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
.footer-brand img { display: block; height: 40px; width: auto; }
.site-footer strong { color: #fff; }
.footer-links { display: flex; gap: .5rem 1.75rem; flex-wrap: wrap; align-items: flex-start; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--sky); }

/* Buttons: primär brand-blue mit weißer Schrift, sekundär 2 px Rahmen; Ecken 4 px */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 48px; background: var(--blue); color: #fff; border: 2px solid var(--blue); border-radius: var(--radius-sm); padding: .5rem 1.25rem; font: 600 1rem/1.2 var(--font); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--logo-blue); outline-offset: 2px; }
.btn--accent { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn--accent:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; }
/* sekundär auf Dunkelblau: weiße Fläche, dunkelblaue Schrift */
.btn--ghost { background: #fff; color: var(--navy); border-color: #fff; }
.btn--ghost:hover { background: var(--tint); border-color: var(--tint); color: var(--navy); }
.btn--ghost-dark { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn--ghost-dark:hover { background: var(--tint); color: var(--blue-hover); border-color: var(--blue-hover); }
.btn--danger { background: transparent; color: var(--bad); border-color: #e2b4af; }
.btn--danger:hover { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); }
.btn--small { min-height: 40px; padding: .3rem .85rem; font-size: .9rem; }
.btn--large { min-height: 56px; padding: .6rem 1.75rem; font-size: 1.06rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.linklike { background: none; border: 0; color: var(--blue); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
form.inline { display: inline; }

/* Cards / layout */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem; }
.narrow { max-width: 720px; margin-left: auto; margin-right: auto; }
.narrow--sm { max-width: 440px; }
.center { text-align: center; }
.grid { display: grid; gap: 1.5rem; }
/* min(…, 100%): eine Spalte darf nie breiter werden als der Platz – sonst zoomt das Handy heraus */
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.grid > .card { margin-bottom: 0; }
.grid + .card, .grid + section, .grid + .grid { margin-top: 1.5rem; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head h1 { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.lead { font-size: 1.2rem; color: #3a5061; }
/* Überzeile: IBM Plex Mono in Versalien mit weiter Laufweite */
.eyebrow { font: 500 13px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--blue); margin: 0 0 .4rem; }
.eyebrow--light { color: var(--sky); }
.crumbs { font-size: .9rem; color: var(--muted); margin-bottom: 1rem; }
.empty { text-align: center; padding: 2.5rem; }
@media (max-width: 480px) { .grid--2 { grid-template-columns: 1fr; } .card { padding: 1.1rem; } }

/* Flash & badges */
.flash { border-radius: var(--radius-sm); padding: .8rem 1rem; margin-bottom: 1rem; border: 1px solid; }
.flash ul { margin: 0; padding-left: 1.2rem; }
.flash--success { background: var(--ok-bg); border-color: #b7e0c3; color: #0f5a2b; }
.flash--error { background: var(--bad-bg); border-color: #f3c0bb; color: #8a1c15; }
.flash--warn { background: var(--warn-bg); border-color: #f3dc98; color: #6b4600; }
.flash--info { background: var(--tint); border-color: #b5d6e6; color: var(--navy); }
.badge { display: inline-block; padding: .12rem .6rem; border-radius: 40px; font-size: .78rem; font-weight: 600; vertical-align: middle; white-space: nowrap; }
.badge--ok { background: var(--ok-bg); color: var(--ok); } .badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--bad { background: var(--bad-bg); color: var(--bad); } .badge--info { background: var(--info-bg); color: var(--info); }
.badge--neutral { background: #e8f0f5; color: var(--muted); }
input.copy { width: 100%; margin-top: .4rem; font-family: var(--mono); font-size: .85rem; padding: .4rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }

/* Forms */
/* Formularfelder 48 px hoch, 1 px line-strong, Label darüber 14 px/600 */
.form { display: grid; gap: 1rem; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin: 0 0 .5rem; display: grid; gap: .8rem; min-width: 0; }
legend { font-weight: 600; color: var(--navy); padding: 0 .4rem; }
.field { display: grid; gap: .35rem; min-width: 0; }
.field > span { font-weight: 600; font-size: .875rem; }
.field em { color: var(--bad); font-style: normal; }
.field small { color: var(--muted); font-size: .82rem; }
input:not([type=checkbox]):not([type=radio]), select, textarea { width: 100%; font: inherit; min-height: 48px; padding: .6rem .75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
input[type=checkbox], input[type=radio] { accent-color: var(--blue); }
textarea.mono { font-family: var(--mono); font-size: .85rem; line-height: 1.5; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: .9rem; align-items: end; }
.row--zip { grid-template-columns: minmax(90px, 1fr) 3fr; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; }
.check input { margin-top: .3rem; }
.inline-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.inline-form input { flex: 1; min-width: 180px; }
.filters { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; }
.filters .field { min-width: 150px; }
.segmented { display: flex; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px; margin-bottom: 1.2rem; }
.segmented a { flex: 1; text-align: center; padding: .55rem; border-radius: 3px; text-decoration: none; color: var(--muted); font-weight: 600; }
.segmented a.active { background: var(--blue); color: #fff; }
.pay-option { display: flex; gap: .8rem; border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem; cursor: pointer; background: #fff; }
.pay-option:has(input:checked) { border-color: var(--blue); background: #f0f7fb; }
.pay-option span { display: grid; } .pay-option small { color: var(--muted); }

/* Tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.table th { text-align: left; font: 500 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); border-bottom: 2px solid var(--line); padding: .6rem .6rem; }
.table td { border-bottom: 1px solid var(--line); padding: .7rem .6rem; vertical-align: top; }
.table .num { text-align: right; white-space: nowrap; }
.table tr.total td { font-weight: 600; font-size: 1.05rem; border-top: 2px solid var(--navy); }
.table--plain td { padding: .5rem 0; }
.table--dense td { padding: .35rem .5rem; }
/* Aktionen bleiben Tabellenzelle (sonst verrutschen die Linien); Knöpfe umbrechen darin */
.table td.actions > * { display: inline-flex; vertical-align: middle; margin: 0 .3rem .3rem 0; }
.table td.actions > form.inline > .btn { margin: 0; }
.row--warn td { background: var(--warn-bg); }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45rem 1rem; margin: 0 0 1rem; }
.kv dt { color: var(--muted); font-size: .9rem; } .kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 480px) { .kv { grid-template-columns: 1fr; gap: 0; } .kv dt { margin-top: .55rem; } .kv dt:first-child { margin-top: 0; } }
.kv--big dd { font-size: 1.05rem; }
.verify__liste { margin: 0; padding-left: 1.1rem; text-align: left; } .verify__liste li + li { margin-top: .35rem; } .verify__liste small { font-weight: 400; }

/* Startseite: weiße Bühne über die ganze Breite, dann Schritte, Kurse, ein dunkelblauer Schwerpunkt */
.band { box-shadow: 0 0 0 100vmax var(--band, #fff); clip-path: inset(0 -100vmax); background: var(--band, #fff); }
.hero { --band: #fff; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 2.5rem; align-items: center; margin: -2rem 0 0; padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(3rem, 7vw, 6rem); }
.hero__text { grid-column: span 7; display: flex; flex-direction: column; gap: 1.5rem; }
.hero__text > * { margin: 0; }
.hero h1 { font-size: clamp(2.9rem, 7vw, 5.6rem); line-height: .92; letter-spacing: -.01em; }
.hero .hl { color: var(--logo-blue); }
.hero .lead { max-width: 38em; }
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero__card { grid-column: span 5; display: grid; gap: 1rem; justify-items: center; }
.hero__caption { text-align: center; color: var(--muted); font: 500 13px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.mini-card { width: 100%; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; max-width: 400px; aspect-ratio: 85.6/54; display: flex; flex-direction: column; }
.mini-card__head { background: var(--navy); color: #fff; font: 700 1.15rem/1.1 var(--display); text-transform: uppercase; padding: .9rem 1.1rem; border-bottom: 4px solid var(--logo-blue); letter-spacing: .02em; }
.mini-card__body { display: flex; justify-content: space-between; padding: 1.1rem; gap: 1rem; flex: 1; }
.mini-card__body small { display: block; color: var(--muted); font: 500 .66rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.mini-card__body b { display: block; margin-bottom: .5rem; }
.mini-qr { width: 88px; height: 88px; align-self: flex-end; background: conic-gradient(var(--navy) 25%, #fff 0 50%, var(--navy) 0 75%, #fff 0) 0 0/22px 22px; border: 6px solid #fff; outline: 2px solid var(--navy); }
@media (max-width: 900px) { .hero__text, .hero__card { grid-column: 1 / -1; } }
/* Schrittfolge: Haarlinie oben in brand-blue, Mono-Nummer */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1.5rem; margin: clamp(2.5rem, 6vw, 4.5rem) 0; }
.step { border-top: 4px solid var(--blue); padding: 1.1rem 0 0; }
.step h3 { margin: .5rem 0 .4rem; font-size: 1.6rem; }
.step p { margin: 0; color: #3a5061; }
.step__n { font: 500 14px/1 var(--mono); letter-spacing: .12em; color: var(--blue); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.section-head a { font-weight: 600; }
.split { --band: var(--navy); color: #fff; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 2.5rem; margin: clamp(3rem, 7vw, 6rem) 0 -4rem; padding: clamp(3rem, 7vw, 5.5rem) 0; }
.split h2 { margin-top: 0; color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); }
.split .checks li::before { color: var(--sky); }
.split .checks li { border-top: 1px solid #2f5d75; padding-top: .7rem; padding-bottom: .1rem; }
.verify-teaser { background: #fff; color: var(--ink); border-radius: var(--radius); padding: 1.75rem; align-self: start; }
.verify-teaser h2 { color: var(--navy); font-size: clamp(1.6rem, 3vw, 2.2rem); }
.checks { list-style: none; padding: 0; }
.checks li { padding-left: 1.8rem; position: relative; margin-bottom: .5rem; }
.checks li::before { content: "✓"; position: absolute; left: 0; top: inherit; color: var(--blue); font-weight: 700; }
.cat-title { margin-top: 2.2rem; }

/* Kurskarten: weiß mit 4-px-Oberkante in brand-blue (kein Rahmen zusätzlich) */
.course-card { background: #fff; border-top: 4px solid var(--blue); border-radius: var(--radius); padding: 1.4rem; display: flex; flex-direction: column; }
.course-card h3 { margin: .6rem 0 .4rem; font-size: 1.45rem; } .course-card h3 a { text-decoration: none; color: var(--navy); }
.course-card h3 a:hover { color: var(--blue); }
.course-card__top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.course-card__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; }
.facts { list-style: none; padding: 0; margin: .5rem 0; font-size: .9rem; color: var(--muted); }
.facts li { padding: .15rem 0; }
.facts--list li { padding: .35rem 0; border-bottom: 1px dashed var(--line); color: var(--ink); }
.price { font: 700 1.6rem/1.1 var(--display); color: var(--navy); } .price small { font: 500 .75rem var(--font); color: var(--muted); }
.price--big { font-size: 2.6rem; }
.course-detail { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; }
.buybox { position: sticky; top: calc(var(--header-h) + 1rem); }
@media (max-width: 900px) { .course-detail { grid-template-columns: 1fr; } .buybox { position: static; } }
.lesson-list { padding-left: 1.4rem; }
.lesson-list li { padding: .45rem 0; border-bottom: 1px solid var(--line); }
.lesson-list li span { display: inline-block; min-width: 70%; } .lesson-list small { color: var(--muted); float: right; }
.checkout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 820px) { .checkout { grid-template-columns: 1fr; } }
.checkout__links { display: grid; gap: 1.25rem; min-width: 0; }
/* Kasse: Kursauswahl, Rabatte, Rechnungsanschrift */
.kurswahl { display: grid; gap: .5rem; }
.kurswahl__zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; cursor: pointer; background: #fff; }
.kurswahl__zeile.is-gewaehlt, .kurswahl__zeile:has(input[type=checkbox]:checked) { border-color: var(--blue); background: #f0f7fb; }
.kurswahl__zeile input[type=number] { width: 4.5rem; text-align: center; }
.kurswahl__zeile input[type=checkbox] { width: 1.2rem; height: 1.2rem; }
.kurswahl__titel { font-weight: 600; hyphens: auto; overflow-wrap: break-word; }
.kurswahl__titel small, .kurswahl__preis small { display: block; font-weight: 400; color: var(--muted); font-size: .8rem; }
.kurswahl__titel .kurswahl__warn { color: #6b4600; }
.kurswahl__preis { text-align: right; white-space: nowrap; font-weight: 600; }
.kurswahl__rechnen { justify-self: start; }
@media (max-width: 520px) {
  .kurswahl__zeile { grid-template-columns: auto minmax(0, 1fr); row-gap: .2rem; }
  .kurswahl__preis { grid-column: 2; text-align: left; display: flex; gap: .4rem; align-items: baseline; }
  .kurswahl__preis small { display: inline; }
}
.checkout .form > h2:first-of-type { margin-top: 0; }
/* Unterschrift: Zeichenfeld 3:1 mit Schreiblinie, Auswahl im Praxis-Formular */
.unterschrift { display: grid; gap: .5rem; }
.unterschrift canvas { width: 100%; max-width: 560px; aspect-ratio: 3 / 1; height: auto; touch-action: none; cursor: crosshair; border: 2px dashed var(--line-strong); border-radius: var(--radius);
  background: #fff linear-gradient(to top, transparent 22%, #b9c3d1 22%, #b9c3d1 calc(22% + 1px), transparent calc(22% + 1px)); }
.unterschrift-bild { display: block; box-sizing: border-box; max-width: min(240px, 100%); max-height: 80px; width: auto; height: auto; margin-top: .3rem; }
.unterschrift-bild--gross { max-width: min(360px, 100%); max-height: 120px; border: 1px solid var(--line); border-radius: var(--radius); padding: .4rem; }
.unterschrift-karte { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; align-items: center; justify-content: space-between; }
.unterschrift-karte h2 { margin: 0 0 .2rem; }
.unterschrift-wahl { gap: .5rem; }
.unterschrift-neu { display: grid; gap: .5rem; }
.unterschrift-neu__feld { display: grid; gap: .5rem; }
.unterschrift-neu:not(:has(input[value=neu]:checked)) .unterschrift-neu__feld { display: none; }
.btn--bestellen { flex-wrap: wrap; column-gap: .35rem; }
.rabatt-info { background: var(--tint); border: 1px solid #b5d6e6; border-radius: var(--radius); padding: .8rem 1rem; margin: 0 0 1rem; font-size: .94rem; }
.rabatt-info ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.rabatt-info--klein { margin: 1rem 0 0; font-size: .85rem; }
.table tr.rabatt td { color: var(--ok); padding-top: 0; }
.table tr.zwischen td { border-top: 1px solid var(--line); }
.rabatt-ersparnis { color: var(--ok); font-weight: 700; margin: .5rem 0 0; }
.anschriften { display: grid; gap: .5rem; }
.anschrift-neu { display: grid; gap: .6rem; }
.anschrift-neu__felder { display: grid; gap: .6rem; padding: 0 .2rem .4rem; }
.anschrift-neu:not(:has(input[value=neu]:checked)) .anschrift-neu__felder { display: none; }

/* Learning */
.progress { height: 8px; background: var(--tint); border-radius: 99px; overflow: hidden; margin: .5rem 0; }
.progress > div { height: 100%; background: var(--blue); border-radius: 99px; }
.enroll__head { display: flex; justify-content: space-between; }
.learn-head { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.learn-head h1 { margin: .2rem 0; }
.learn-head__progress { min-width: 220px; }
.learn-grid { display: grid; grid-template-columns: 340px 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 860px) { .learn-grid { grid-template-columns: 1fr; } }
.lesson-nav { list-style: none; padding: .5rem; }
.lesson-nav a { display: grid; grid-template-columns: 30px 1fr auto; gap: .6rem; align-items: center; padding: .55rem .5rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); font-size: .95rem; }
.lesson-nav a:hover { background: var(--tint); }
.lesson-nav small { color: var(--muted); }
.lesson-nav .dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tint); font: 500 .75rem var(--mono); color: var(--navy); }
.lesson-nav .done .dot { background: var(--blue); color: #fff; }
.lesson-nav .exam-item .dot { background: var(--navy); color: #fff; }
.lesson { max-width: 820px; margin: 0 auto; padding: clamp(1.2rem, 3vw, 2.5rem); }
.lesson__head { border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }
.lesson__foot { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.2rem; flex-wrap: wrap; }
.prose { font-size: 1.06rem; }
.prose h2 { font-size: 1.7rem; margin-top: 1.6em; }
.prose h3 { font-size: 1.3rem; margin-top: 1.4em; }
.prose table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .95rem; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: .5rem .7rem; text-align: left; vertical-align: top; }
.prose th { background: var(--bg); }
/* Hinweiskästen: Fläche mit 4-px-Oberkante (keine seitlichen Farbstreifen) */
.prose blockquote { margin: 1.2rem 0; padding: .9rem 1.1rem; border-top: 4px solid var(--blue); background: var(--tint); border-radius: var(--radius); }
.prose blockquote p { margin: .3rem 0; }
.prose .box--warn { border-top-color: var(--warn); background: var(--warn-bg); }
.prose .box--company { border-top-color: var(--navy); background: #e6eef3; }
.media-ph { display: flex; gap: 1rem; align-items: center; border-radius: var(--radius); padding: 1rem; margin: 1.2rem 0; background: repeating-linear-gradient(135deg, #ddeef6 0 14px, #cfe5f0 14px 28px); color: #3e5a6b; font-size: .92rem; }
.media-ph strong { font: 500 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.media-ph__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--navy); color: #fff; }

/* Exam */
.exam-bar { position: sticky; top: calc(var(--header-h) + .5rem); z-index: 10; display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem 1rem; margin-bottom: 1rem; }
.timer { font: 500 1.3rem var(--mono); color: var(--navy); }
.timer.low { color: var(--bad); }
/* float nimmt der Legende die Sonderrolle: sonst setzt der Browser sie auf den oberen Rahmen,
   und lange Fragen ragen zur Hälfte über den Kasten hinaus. min-width: 0 hebt die Mindestbreite
   eines fieldset (min-content) auf, die lange Wörter sonst rechts hinausschiebt. */
.question legend { float: left; width: 100%; font-weight: 600; font-size: 1.05rem; color: var(--ink); padding: 0; margin-bottom: .8rem; overflow-wrap: break-word; }
.question { display: grid; gap: .5rem; border: 1px solid var(--line); min-width: 0; }
.qnum { display: block; font: 500 12px/1.4 var(--mono); color: var(--blue); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .3rem; }
.multi { font-weight: 400; color: var(--info); font-size: .9rem; }
.answer { display: flex; gap: .8rem; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .95rem; cursor: pointer; background: #fff; }
.answer:hover { background: var(--bg); }
.answer:has(input:checked) { border-color: var(--blue); background: #f0f7fb; }
.answer input { margin-top: .25rem; transform: scale(1.2); }
.answer.correct { border-color: var(--ok); background: var(--ok-bg); }
.exam-submit { text-align: center; }
.result { text-align: center; }
.result__score { font: 700 4.5rem/1 var(--display); }
.result--ok .result__score { color: var(--ok); } .result--bad .result__score { color: var(--bad); }
.result ul { text-align: left; display: inline-block; }
.review-q { border-bottom: 1px solid var(--line); padding: .5rem 0; }

/* Verify */
.verify { max-width: 660px; margin: 0 auto; background: #fff; border-radius: var(--radius); padding: 2rem; border-top: 8px solid; }
.verify--ok { border-top-color: var(--ok); } .verify--warn { border-top-color: #e0a400; } .verify--bad { border-top-color: var(--bad); }
.verify__icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 2.1rem; font-weight: 700; color: #fff; margin-bottom: 1rem; }
.verify--ok .verify__icon { background: var(--ok); } .verify--warn .verify__icon { background: #e0a400; } .verify--bad .verify__icon { background: var(--bad); }
.verify--ok h1 { color: var(--ok); } .verify--bad h1 { color: var(--bad); } .verify--warn h1 { color: var(--warn); }
.verify--frage { border-top-color: var(--navy); } .verify--frage .verify__icon { background: var(--navy); }
.verify .form { margin-top: 1rem; }

/* Company / admin */
.stats .stat { display: grid; gap: .2rem; }
.stat span { font: 500 12px/1.4 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.stat strong { font: 700 2.2rem/1.05 var(--display); color: var(--navy); }
.mini-enroll { display: grid; grid-template-columns: 1fr 120px; gap: .5rem; align-items: center; font-size: .88rem; }
.admin-tabs { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 2px solid var(--line); margin-bottom: 1.5rem; }
.admin-tabs a { padding: .6rem .9rem; text-decoration: none; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.admin-tabs a:hover { color: var(--blue); }
.admin-tabs a.active { color: var(--navy); border-bottom-color: var(--blue); }
.admin-list li { padding: .3rem 0; }
.admin-enroll { border-bottom: 1px solid var(--line); padding: .5rem 0; }
.qcard { padding: 1rem 1.2rem; }
.qcard--review { border-top: 4px solid var(--warn); }
.qcard__head { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; justify-content: space-between; }
/* Checkliste der praktischen Prüfung: optionale Punkte, Reihenfolge, Hinweis unter dem Punkt */
.qcard--optional { border-style: dashed; }
.qcard__actions { display: flex; gap: .4rem; align-items: center; margin-left: auto; }
.qcard__actions .btn { min-width: 40px; }
.btn:disabled { opacity: .35; cursor: default; transform: none; }
.check__hinweis { display: block; color: var(--muted); font-size: .85rem; margin-top: .15rem; }
.answers { margin: .3rem 0; padding-left: 1.2rem; }
.answers li.correct { color: var(--ok); font-weight: 700; }
.answers li.correct::after { content: "  ✓"; }
.answer-edit { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: .5rem; }
.note-card { background: #fffbea; border-color: #f3dc98; }
.editor .preview { max-height: 80vh; overflow: auto; }
pre.log { background: var(--navy); color: #d2e6f0; padding: 1rem; border-radius: var(--radius); max-height: 360px; overflow: auto; font: .8rem/1.5 var(--mono); white-space: pre-wrap; }
details summary { cursor: pointer; font-weight: 600; margin: .5rem 0; }
address { font-style: normal; line-height: 1.6; }
/* Überweisung (Vorkasse) mit GiroCode, Zahlungsarten in den Einstellungen */
.transfer { margin: 1.2rem 0; padding: 1.1rem 1.2rem; border-top: 4px solid var(--blue); border-radius: var(--radius); background: var(--bg); }
.transfer h2 { margin-top: 0; font-size: 1.15rem; }
.transfer__grid { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-start; }
.transfer__grid .kv { flex: 1 1 16rem; margin: 0; }
.girocode { margin: 0; text-align: center; }
.girocode svg { display: block; border-radius: 6px; }
.girocode figcaption { font-size: .8rem; color: var(--muted); margin-top: .3rem; }
.paylist { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .35rem; }
.paylist .badge { min-width: 4.5rem; text-align: center; }

/* ---------- Handy & Tablet ---------- */
[hidden] { display: none !important; }
input, select, textarea { max-width: 100%; }
/* Überlange Wörter (Komposita, Pfade, E-Mail-Adressen) umbrechen statt die Seite zu verbreitern */
main { overflow-wrap: break-word; }
/* Gitter-Elemente dürfen schmaler werden als ihr Inhalt (Tabellen scrollen dann in .table-wrap) */
.row, .row > *, .grid > *, .form > *, fieldset > * { min-width: 0; }
.site-footer .linklike { color: #fff; }
/* Deutsche Silbentrennung in Überschriften statt Umbruch mitten im Wort */
h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; }
.verify h1 { font-size: clamp(1.35rem, 6vw, 2rem); }
/* Finger statt Maus: Tippziele mindestens 40–44 px, Eingaben 16 px (iOS zoomt sonst beim Antippen hinein) */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn.btn--small { min-height: 40px; padding-top: .45rem; padding-bottom: .45rem; }
  input:not([type=checkbox]):not([type=radio]), select, textarea, textarea.mono, input.copy { font-size: max(16px, 1em); }
  .mainnav.open a, .mainnav.open .linklike { min-height: 44px; display: flex; align-items: center; }
  .footer-links a, .footer-links .linklike { padding: .35rem 0; }
  .table button.linklike, .table a { display: inline-block; padding: .5rem 0; }
}
@media print { .topbar, .site-header, .site-footer, .btn, .admin-tabs { display: none !important; } html, body { background: #fff; } }

/* Einträge auf dem Fahrausweis (Beauftragung, Fortbildung) */
.eintrag-neu { margin-top: 1rem; }
.eintrag-neu > summary { list-style: none; display: inline-flex; }
.eintrag-neu > summary::-webkit-details-marker { display: none; }
.eintrag-neu[open] > summary { display: none; }
.row--leer td { color: var(--muted); }
.table--eintraege td:first-child, .table--eintraege .btn { white-space: nowrap; }
@media (max-width: 600px) {
  .table--eintraege thead { display: none; }
  .table--eintraege, .table--eintraege tbody, .table--eintraege tr, .table--eintraege td { display: block; }
  .table--eintraege tr { padding: .7rem 0; border-bottom: 1px solid var(--line); }
  .table--eintraege td { border: 0; padding: .1rem 0; }
  .table--eintraege td:first-child { font-weight: 700; }
  .table--eintraege td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: .85rem; }
  .table--eintraege .btn-row { margin-top: .4rem; }
  .table--eintraege .row--leer td { display: inline; }
  .table--eintraege .row--leer td:first-child::after { content: " – "; }
}