@font-face{font-family:"Nunito";src:url(/assets/schrift/nunito.woff2) format("woff2");font-weight:200 1000;font-style:normal;font-display:swap}
/* CODERWERKSTATT · Stil für Konto-, Kurs- und Rechtsseiten (gleiche Farben wie index.html) */
:root{
  --bg:#F6F7F9;--surface:#FFFFFF;--surface-2:#EFF3F7;--ink:#0E1A2B;--muted:#526075;--line:#DFE5EC;
  --brand:#0B6A88;--brand-ink:#FFFFFF;--brand-soft:#E2F1F6;--brand-hover:#095872;
  --ok:#1D7A4C;--ok-soft:#E3F3EA;--warn:#8F6200;--warn-soft:#FBF1D9;--err:#B3261E;--err-soft:#FBE7E5;
  --shadow:0 1px 2px rgba(14,26,43,.06),0 8px 24px -12px rgba(14,26,43,.18);
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0A111C;--surface:#101A29;--surface-2:#152235;--ink:#E6EDF6;--muted:#9BAAC0;--line:#22324A;
  --brand:#5CC3DD;--brand-ink:#04161D;--brand-soft:#12303C;--brand-hover:#7DD2E7;
  --ok:#7DD3A1;--ok-soft:#14301F;--warn:#E5C46C;--warn-soft:#30280F;--err:#FF8A80;--err-soft:#3A1715;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16.5px/1.55 var(--f-body);min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3{margin:0;line-height:1.2;letter-spacing:-.015em}
p{margin:0}
a{color:var(--brand)}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px}
.in{max-width:1100px;margin-inline:auto;padding-inline:16px;width:100%}
@media (min-width:720px){.in{padding-inline:28px}}
header.top{border-bottom:1px solid var(--line);background:var(--surface)}
.topin{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:750;font-size:18px}
.mark{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--brand);color:var(--brand-ink);font:700 13px var(--f-mono)}
.navr{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.navr>a:not(.btn){color:var(--muted);text-decoration:none;font-weight:550}
.seite{flex:1;padding-block:40px 64px;display:grid;gap:22px;align-content:start}
.eyebrow{font:600 12.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
.leise{color:var(--muted)}
.karte{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:28px;display:grid;gap:16px}
.karte.schmal{max-width:520px;width:100%;margin-inline:auto}
.karte.text{max-width:760px}
.karte h1{font-size:28px;font-weight:800}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 15.5px var(--f-body);text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--brand)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.primary:hover{background:var(--brand-hover)}
.btn.small{min-height:38px;padding:6px 14px;font-size:15px}
.btn.gross{min-height:52px;font-size:16.5px;width:100%}
.btn.ghost{background:transparent}
.formular{display:grid;gap:8px}
.formular label{font-weight:600;font-size:15px;margin-top:6px}
.formular label small{font-weight:400;color:var(--muted)}
.formular select,.formular input[type=tel],.formular input[type=email],.formular input[type=password],.formular input:not([type]){font:inherit;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);width:100%}
.formular input:focus{outline:2px solid var(--brand);outline-offset:0;border-color:var(--brand)}
.formular .btn{margin-top:12px}
.haken{display:flex;gap:10px;align-items:flex-start;font-weight:400!important;font-size:14.5px!important;color:var(--muted)}
.haken input{margin-top:4px;width:18px;height:18px;flex:none;accent-color:var(--brand)}
.haken-liste{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.haken-liste li{position:relative;padding-left:26px}
.haken-liste li::before{content:"✓";position:absolute;left:2px;top:0;color:var(--ok);font-weight:700}
.meld{border-radius:10px;padding:10px 14px;font-size:15px;background:var(--brand-soft)}
.meld.ok{background:var(--ok-soft);color:var(--ok)}
.meld.fehler{background:var(--err-soft);color:var(--err)}
.kopfzeile{display:flex;flex-wrap:wrap;gap:16px 24px;justify-content:space-between;align-items:flex-end}
.kopfzeile h1{font-size:32px;font-weight:800}
.row{display:flex;flex-wrap:wrap;gap:10px}
.abschnitt{font-size:20px;font-weight:750;margin-top:8px}
.kursliste{display:grid;gap:12px}
.kurszeile{display:flex;flex-wrap:wrap;gap:12px 20px;justify-content:space-between;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 20px}
.kurszeile.aktiv{border-color:var(--brand)}
.kurszeile h3{font-size:18px}
.platzhalter{border:2px dashed var(--warn);background:var(--warn-soft);color:var(--ink);border-radius:12px;padding:14px 16px;font-size:15px}
footer.foot{border-top:1px solid var(--line);padding-block:28px;color:var(--muted);font-size:14.5px}
.footin{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
.footin nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.footin a{color:var(--muted);text-decoration:none}


/* ===== Stil wie die C-AKADEMIE (hell), weniger bunt ===== */
:root{--bg:#FFF8EC;--surface:#FFFFFF;--surface-2:#FFF1DA;--ink:#1F2340;--muted:#4A4E70;--line:#1F2340;
  --brand:#1462B0;--brand-fill:#5CB9F7;--brand-ink:#1F2340;--brand-soft:#E1F1FE;--ok:#0C744E;--ok-soft:#DDF7EB;
  --warn:#8A5600;--warn-soft:#FFF1C6;--err:#C0271D;--err-soft:#FFE2DC;--shadow:5px 5px 0 #1F2340;color-scheme:light;
  --f-titel:"Arial Rounded MT Bold",ui-rounded,"SF Pro Rounded","Nunito","Varela Round",system-ui,sans-serif;
  --f-body:ui-rounded,"SF Pro Rounded","Nunito","Varela Round","Quicksand",system-ui,-apple-system,"Segoe UI",sans-serif}
body{background-color:var(--bg);background-image:radial-gradient(#EDD9B4 1.1px,transparent 1.6px);background-size:22px 22px;color:var(--ink);font-family:var(--f-body);font-weight:500}
h1,h2,h3{font-family:var(--f-titel);font-weight:900}
header.top{background:rgba(255,248,236,.95);border-bottom:2.5px solid var(--line)}
.logo{font-family:var(--f-titel);font-weight:900}
.mark{background:var(--brand-fill);color:var(--ink);border:2.5px solid var(--line);border-radius:10px;box-shadow:2px 2px 0 var(--line);transform:rotate(-6deg)}
.karte{background:#fff;border:2.5px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
.btn{background:#fff;color:var(--ink);border:2.5px solid var(--line);border-radius:14px;font-weight:800;box-shadow:3px 3px 0 var(--line);transition:transform .08s,box-shadow .08s}
.btn:hover{border-color:var(--line);background:#FFFBEF;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--line)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--line)}
.btn.primary{background:var(--brand-fill);color:var(--ink);font-weight:900}
.btn.primary:hover{background:#7CC8FA}
.btn.ghost{background:transparent}
.formular select,.formular input[type=tel],.formular input[type=email],.formular input[type=password],.formular input:not([type]){background:#fff;border:2px solid var(--line);border-radius:12px;color:var(--ink)}
.formular input:focus{outline:3px solid var(--brand-fill);border-color:var(--line)}
.haken input{accent-color:var(--brand)}
.kurszeile{background:#fff;border:2.5px solid var(--line);border-radius:16px;box-shadow:3px 3px 0 var(--line)}
.kurszeile.aktiv{background:var(--brand-soft)}
.meld{border:2px solid var(--line);border-radius:12px}
.platzhalter{border-color:var(--line);background:#FFF1C6}
footer.foot{border-top:2.5px solid var(--line)}

/* ruhiger: fast nur Tinte und Papier */
.btn.primary{background:var(--ink);color:#FFF8EC}
.btn.primary:hover{background:#2E3358}
.mark{background:#fff;color:var(--ink)}
a{color:var(--ink)}
.haken-liste li::before{color:var(--ink)}
.kurszeile.aktiv{background:#fff;border-style:solid}
.platzhalter{background:#fff;border-style:dashed}

/* Schrift Nunito (frei, SIL OFL) – liegt mit auf dem Server, damit die Seite überall gleich aussieht */
:root{--f-titel:"Nunito",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;--f-body:"Nunito",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif}
body{font-family:var(--f-body);font-weight:600}
h1,h2,h3,h4,.logo,.karte h1{font-family:var(--f-titel);font-weight:900}
.btn{font-family:var(--f-body);font-weight:800}
/* Hauptknopf leicht blau, damit er sofort auffällt */
.btn.primary{background:#9ED3F5;color:var(--ink);border-color:var(--ink)}
.btn.primary:hover:hover{background:#B7DFF8}

/* ===== Nachtmodus ===== */
.modus{width:40px;min-width:40px;padding:0}
html.nacht{--bg:#0B1220;--surface:#111A2B;--surface-2:#16233A;--ink:#E6EDF6;--muted:#A3B3C9;--line:#3A5078;--brand:#8CCBF2;--brand-soft:#16304A;
  --ok:#7CFFB2;--ok-soft:#14301F;--warn-soft:#2A2615;--err:#FF8A9E;--err-soft:#3A1715;--shadow:5px 5px 0 rgba(0,0,0,.55);color-scheme:dark}
html.nacht body{background-color:var(--bg);background-image:radial-gradient(#1B2A44 1.1px,transparent 1.6px)}
html.nacht header.top{background:rgba(11,18,32,.95)}
html.nacht :is(.karte,.btn:not(.primary),.kurszeile,.kurszeile.aktiv,.mark,.platzhalter,.formular input,.formular select){background:var(--surface-2);color:var(--ink)}
html.nacht .btn:not(.primary):hover{background:#1C2B47}
html.nacht .btn.primary{color:#0B1220}
html.nacht a,html.nacht .haken-liste li::before{color:var(--brand)}
html.nacht .logo{color:var(--ink)}
html.nacht .navr>a:not(.btn){color:var(--muted)}
.logo span:last-child{white-space:nowrap}
@media (max-width:460px){.navr{gap:10px;flex-wrap:nowrap}.navr>a[href="/#kurse"],.navr>a.btn.primary{display:none}.navr>a{white-space:nowrap}}

/* ===== Angebote auf der Kursseite: Einzelkurs oder „Alle Kurse“ ===== */
.angebote{display:grid;gap:14px}
.angebot{position:relative;display:grid;gap:10px;padding:18px 18px 16px;background:#fff;border:2.5px solid var(--line);border-radius:16px;box-shadow:3px 3px 0 var(--line)}
.angebot.empfohlen{border-color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.angebot h2{font-size:20px}
.angebot .betrag{font:900 26px/1.1 var(--f-titel)}
.angebot .betrag small{font:700 14px var(--f-body);color:var(--muted)}
.angebot .badge{justify-self:start;font-size:12.5px;font-weight:800;padding:3px 10px;border:2px solid var(--ink);border-radius:999px;background:#9ED3F5;color:var(--ink)}
.angebot .btn{width:100%}
html.nacht .angebot{background:var(--surface-2)}
html.nacht .angebot.empfohlen{border-color:var(--brand);box-shadow:4px 4px 0 rgba(0,0,0,.55)}
html.nacht .angebot .badge{background:#9ED3F5;color:#0B1220;border-color:#0B1220}

/* ===== Rechtstexte ===== */
.karte.text{gap:12px}
.karte.text h2{font-size:19px;margin-top:10px}
.karte.text h3{font-size:16.5px;margin-top:4px}
.karte.text ul,.karte.text ol{margin:0;padding-left:22px;display:grid;gap:4px}
.karte.text .stand{color:var(--muted);font-size:14px}
.karte.text .muster{border:2px dashed var(--line);border-radius:12px;padding:14px 16px}