/* MCG Academy — Design-System.
Übernommen aus dem freigegebenen Design-Entwurf (August 2026).
--green = Dunkelgrün (Primär) | --accent = Hellgrün (Akzent)
Hell-/Dunkelmodus über [data-theme] am -Element. */
/* ====================================================================
SCHRIFTEN — selbst ausgeliefert, bewusst NICHT von Google geladen.
Der Entwurf holte sie per @import von fonts.googleapis.com. Damit
überträgt jeder Seitenaufruf die IP-Adresse des Besuchers an Google,
und zwar bevor er irgendetwas bestätigen konnte. Gleichzeitig steht in
der Fußzeile jeder Seite "DSGVO-konform", und die Spezifikation
begründet die Bannerfreiheit ausdrücklich damit, dass es keine solchen
Abrufe gibt. Das war ein Widerspruch — und in Deutschland ein bekanntes
Abmahnthema.
Beides sind variable Schriften: eine Datei deckt alle Schnitte von 400
bis 800 ab, deshalb genügen vier Dateien (je Familie latin und
latin-ext) mit zusammen rund 96 KB. Die Optik ist unverändert, es sind
dieselben Schriften. Beide stehen unter der Open Font License, die das
Selbst-Ausliefern erlaubt.
font-display:swap wie im Entwurf: Text erscheint sofort in der
Ersatzschrift und wird nachgezogen, statt unsichtbar zu bleiben.
==================================================================== */
@font-face{
font-family:'Sora';
font-style:normal;
font-weight:400 800;
font-display:swap;
src:url('/assets/fonts/sora-latin.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:'Sora';
font-style:normal;
font-weight:400 800;
font-display:swap;
src:url('/assets/fonts/sora-latin-ext.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:'Hanken Grotesk';
font-style:normal;
font-weight:400 700;
font-display:swap;
src:url('/assets/fonts/hanken-grotesk-latin.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:'Hanken Grotesk';
font-style:normal;
font-weight:400 700;
font-display:swap;
src:url('/assets/fonts/hanken-grotesk-latin-ext.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;
}
/* ====================================================================
ZENTRALES FARBSCHEMA – hier die exakten MCG-Hex-Werte eintragen.
--green = Dunkelgrün (Primär) | --accent = Hellgrün (Akzent)
==================================================================== */
:root{
--bg:#ffffff; --surface:#ffffff; --surface-2:#f3f8f4; --surface-3:#e9f2ec;
--border:#e1ebe4; --ink:#0d1d16; --muted:#54675e;
--green:#0d3a2b; --green-700:#15573f; --green-600:#1c6f50;
--accent:#33d089; --accent-2:#15b873; --accent-soft:#e6f8ef; --accent-ink:#063a25;
--shadow:0 1px 2px rgba(13,29,22,.05),0 18px 44px -18px rgba(13,29,22,.22);
--ring:rgba(51,208,137,.4);
}
[data-theme="dark"]{
--bg:#07120d; --surface:#0c1d14; --surface-2:#0f271b; --surface-3:#143123;
--border:#1d3528; --ink:#eaf3ee; --muted:#9bb1a6;
--green:#0e4732; --green-700:#1a6d4f; --green-600:#26986c;
--accent:#4fe3a1; --accent-2:#2fcf86; --accent-soft:#0f2d20; --accent-ink:#cdf6e0;
--shadow:0 1px 2px rgba(0,0,0,.4),0 22px 50px -20px rgba(0,0,0,.7);
/* Eigene Fassung, weil --accent im Dunkelmodus heller ist: Der Ring aus
dem hellen Modus stand auf dunklem Grund zu schwach da. */
--ring:rgba(79,227,161,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
/* Lange deutsche Komposita sind in schmalen Spalten breiter als die Zeile,
und ein Wort ohne Trennmöglichkeit läuft aus seinem Kasten heraus statt
umzubrechen. Bei 280px Breite reichte die Quizfrage
("Instandhaltungsmeldung", 242px in einer 170px breiten Spalte) allein
aus, um die ganze Seite auf 297px Inhalt zu dehnen — waagerechtes
Scrollen auf jeder Seite mit solchem Text. Die Regel erlaubt den Umbruch
nur dort, wo ein Wort sonst überlaufen würde; sobald es in die Zeile
passt, ändert sie nichts. Deshalb steht sie global und nicht in einer
Media Query. */
body{overflow-wrap:break-word}
.dsp{font-family:'Sora',sans-serif}
.wrap{max-width:1200px;margin:0 auto;padding:0 26px}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img,svg{display:block}
/* Logo */
.logo{display:flex;align-items:center;gap:11px}
/* Das echte Zeichen bleibt QUADRATISCH (Markenform), aber enger gefasst:
viewBox-Quadrat 380x380 um die Buchstabenmitte -- die Schrift belegt 80
statt 55 Prozent der Breite. */
.logo .mark{height:46px;width:auto;border-radius:2px;display:block}
.logo .wordmark{line-height:1.05}
.logo .wordmark b{font-family:'Sora';font-weight:700;font-size:18px;letter-spacing:-.02em;display:block}
.logo .wordmark span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* Kopfzeile / Navigation */
.nav{border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);position:sticky;top:0;z-index:50}
.nav-in{display:flex;align-items:center;height:78px;gap:30px}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{font-weight:600;font-size:15px;color:var(--muted);padding:9px 15px;border-radius:10px;transition:.18s}
.nav-links a:hover,.nav-links a.active{color:var(--green-600);background:var(--surface-2)}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;padding:13px 24px;border-radius:12px;transition:.2s;white-space:nowrap}
.btn:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.btn-pri{background:var(--green);color:#fff}.btn-pri:hover{background:var(--green-700);transform:translateY(-1px)}
.btn-acc{background:var(--accent);color:var(--accent-ink)}.btn-acc:hover{background:var(--accent-2);transform:translateY(-1px)}
.btn-out{border:2px solid var(--ink);color:var(--ink)}.btn-out:hover{border-color:var(--green-600);color:var(--green-600)}
.btn-ghost{border:1.5px solid var(--border);color:var(--ink)}.btn-ghost:hover{border-color:var(--accent)}
.btn-sm{padding:10px 16px;font-size:14px}
/* GLOBAL, und das fehlte: Der Code sperrt Knoepfe an vielen Stellen
(btn.disabled = true beim Absenden), aber ohne diese Regel sah man das
nicht -- der Knopf blieb unveraendert, und wer nichts sieht, klickt
nochmal. Es gab nur drei Deklarationen in einzelnen Bereichen; die sind
damit ueberfluessig und entfallen. */
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn:disabled:hover{transform:none}
/* Aufmacher */
.hero{padding:90px 0 30px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(640px 360px at 88% -10%,var(--accent-soft),transparent 70%)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-600);background:var(--accent-soft);padding:7px 14px;border-radius:999px}
.hero h1{font-family:'Sora';font-weight:800;font-size:clamp(42px,6.4vw,84px);line-height:1;letter-spacing:-.03em;margin:24px 0 22px;position:relative}
.hero h1 .hl{color:var(--green-600)}
.hero p{font-size:clamp(18px,2.2vw,23px);color:var(--muted);max-width:680px;line-height:1.5;position:relative}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;position:relative}
.trust{display:flex;gap:36px;margin-top:54px;flex-wrap:wrap;position:relative}
.trust b{font-family:'Sora';font-weight:700;font-size:30px;display:block}
.trust span{font-size:14px;color:var(--muted)}
/* Kurskarten */
.section{padding:70px 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:36px}
.h2{font-family:'Sora';font-weight:700;font-size:clamp(28px,3.8vw,44px);letter-spacing:-.025em;line-height:1.05}
.lead{color:var(--muted);font-size:17px;max-width:560px;margin-top:10px;line-height:1.55}
.course-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.course{background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden;transition:.25s;text-align:center}
.course:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.course-thumb{aspect-ratio:16/9;position:relative;display:grid;place-items:center;color:#fff;overflow:hidden}
.course-thumb.a{background:linear-gradient(135deg,#13573f,#0d3a2b)}
.course-thumb.b{background:linear-gradient(135deg,#1c6f50,#15b873)}
.course-thumb.c{background:linear-gradient(135deg,#0d3a2b,#1f7a58)}
.course-thumb.d{background:linear-gradient(135deg,#15b873,#0e4a35)}
.course-b p{color:var(--muted);font-size:14px;line-height:1.5;margin-top:8px}
.course-thumb .badge{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.95);color:var(--green);font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px}
.course-thumb .title-art{font-family:'Sora';font-weight:800;font-size:clamp(22px,3vw,30px);text-shadow:0 2px 12px rgba(0,0,0,.3);padding:0 20px;letter-spacing:-.01em}
.course-b{padding:26px 24px 28px}
.course-b h3{font-size:19px;line-height:1.3;letter-spacing:-.01em;min-height:50px}
.rating{display:flex;align-items:center;justify-content:center;gap:6px;color:#f5a524;font-weight:700;font-size:14px;margin-bottom:12px}
.course-b .btn{margin-top:18px}
/* Leistungen */
.services{background:var(--surface-2)}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.svc-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.svc-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:28px 24px;font-family:'Sora';font-weight:700;font-size:19px;line-height:1.25;letter-spacing:-.01em;box-shadow:0 14px 30px -20px rgba(13,29,22,.4);transition:.25s}
.svc-card:nth-child(2),.svc-card:nth-child(3){margin-top:26px}
.svc-card:hover{transform:translateY(-4px);border-color:var(--accent)}
.svc-card .ic{width:46px;height:46px;border-radius:12px;background:var(--accent-soft);color:var(--green-600);display:grid;place-items:center;margin-bottom:16px}
/* Vorteils-Kacheln */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:28px}
.feat .ic{width:50px;height:50px;border-radius:13px;background:var(--accent-soft);color:var(--green-600);display:grid;place-items:center;margin-bottom:16px}
.feat h3{font-family:'Sora';font-weight:600;font-size:19px;margin-bottom:8px}
.feat p{color:var(--muted);font-size:15px;line-height:1.55}
/* Zweispaltige Variante (Kontaktseite). Muss VOR der @media(max-width:880px)
weiter unten stehen, damit deren Kollaps auf 1fr bei schmalen Geräten
gewinnt — sonst würde diese Regel den Kollaps aller .feat-grid-Elemente
überschreiben und bei 375px zum waagerechten Scrollen führen. */
.feat-grid-2{grid-template-columns:1fr 1fr}
/* Quiz-Vorschau */
.quiz-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.quiz-list{list-style:none;margin:22px 0 28px}
.quiz-list li{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:16px;margin-bottom:12px}
.quiz-list .tick{width:24px;height:24px;border-radius:999px;background:var(--accent-soft);color:var(--green-600);display:grid;place-items:center;flex-shrink:0}
.quiz-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px;box-shadow:var(--shadow)}
.quiz-meta{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px}
.quiz-bar{height:7px;border-radius:999px;background:var(--surface-3);overflow:hidden;margin-bottom:22px}
.quiz-bar div{height:100%;width:30%;background:linear-gradient(90deg,var(--green-600),var(--accent));border-radius:999px}
.quiz-q{font-family:'Sora';font-weight:600;font-size:19px;line-height:1.35;margin-bottom:18px;letter-spacing:-.01em}
.quiz-opt{display:flex;align-items:center;gap:13px;border:1.5px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:10px;font-size:15px;font-weight:500}
.quiz-opt .dot{width:22px;height:22px;border-radius:999px;border:2px solid var(--border);flex-shrink:0;display:grid;place-items:center;font-size:13px}
.quiz-opt.correct{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.quiz-opt.correct .dot{border-color:var(--accent-2);background:var(--accent-2);color:#fff}
.quiz-fb{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--green-600);margin-top:14px}
/* Inhouse-Hinweis */
.inhouse{display:flex;align-items:center;gap:40px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:24px;padding:46px 48px;flex-wrap:wrap}
.inhouse .ic{width:74px;height:74px;border-radius:18px;background:var(--green);color:#fff;display:grid;place-items:center;flex-shrink:0}
.inhouse .ic svg{width:36px;height:36px}
/* min-width:min(300px,100%) statt hart 300px: der Entwurf nutzte die
Mindestbreite nur, um auf breiten Schirmen den Umbruch auszulösen. Als
harter Wert erzwingt sie auf schmalen Geräten einen Überlauf, weil das
Elternteil dort samt Innenabstand weniger als 300px breit ist. */
.inhouse .txt{flex:1;min-width:min(300px,100%)}
.inhouse h2{font-family:'Sora';font-weight:700;font-size:clamp(26px,3vw,34px);letter-spacing:-.02em;color:var(--green)}
.inhouse p{color:var(--accent-ink);font-size:17px;line-height:1.55;margin-top:10px;max-width:640px}
/* Abschluss-Band */
.band{background:linear-gradient(135deg,var(--green),var(--green-700));border-radius:28px;padding:64px;text-align:center;color:#fff;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;inset:0;background:radial-gradient(420px 220px at 88% 0,rgba(51,208,137,.4),transparent 60%)}
.band h2{color:#fff;position:relative}
.band p{color:rgba(255,255,255,.85);max-width:540px;margin:14px auto 28px;position:relative;font-size:18px}
/* Fußzeile */
.footer{background:var(--surface-2);border-top:1px solid var(--border);padding:60px 0 30px;margin-top:20px}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:36px}
.foot-grid h4{font-family:'Sora';font-size:14px;font-weight:700;margin-bottom:16px}
.foot-grid a,.foot-grid p{display:block;color:var(--muted);font-size:14px;padding:5px 0;line-height:1.5}
.foot-grid a:hover{color:var(--green-600)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;margin-top:42px;padding-top:24px;border-top:1px solid var(--border);color:var(--muted);font-size:13px;flex-wrap:wrap}
/* ===== Kundenbereich (spätere Phase) ===== */
.dash{padding:46px 0 80px}
.dash-top{display:flex;align-items:center;gap:20px;margin-bottom:34px}
.dash-av{width:78px;height:78px;border-radius:999px;background:linear-gradient(135deg,var(--green),var(--accent-2));display:grid;place-items:center;color:#fff;font-family:'Sora';font-size:32px;font-weight:700}
.dash-grid{display:grid;grid-template-columns:262px 1fr;gap:30px;align-items:start}
.side{background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden}
.side a{display:flex;align-items:center;gap:13px;padding:14px 20px;font-size:15px;font-weight:500;color:var(--muted);border-bottom:1px solid var(--border);transition:.15s}
.side a:last-child{border-bottom:none}
.side a.on{background:var(--green);color:#fff}
.side a:hover:not(.on){background:var(--surface-2);color:var(--green-600)}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:30px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:30px 20px;text-align:center}
.stat .ic{width:60px;height:60px;border-radius:999px;background:var(--accent-soft);color:var(--green-600);display:grid;place-items:center;margin:0 auto 14px}
.stat b{font-family:'Sora';font-weight:700;font-size:38px}
.stat span{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.prog-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;display:grid;grid-template-columns:280px 1fr;overflow:hidden}
.prog-thumb{background:linear-gradient(135deg,#13573f,#0d3a2b);display:grid;place-items:center;color:#fff;font-family:'Sora';font-weight:800;font-size:28px}
.prog-b{padding:26px}
.track{height:9px;border-radius:999px;background:var(--surface-3);overflow:hidden;margin-top:16px}
.fill{height:100%;width:35%;background:linear-gradient(90deg,var(--green-600),var(--accent));border-radius:999px}
.prog-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.icon{width:1.1em;height:1.1em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.hide{display:none!important}
@media(max-width:880px){
.nav-links{display:none}
.course-grid,.svc-grid,.svc-cards,.feat-grid,.stat-row,.foot-grid,.dash-grid,.prog-card,.quiz-grid{grid-template-columns:1fr}
.svc-card:nth-child(2),.svc-card:nth-child(3){margin-top:0}
.band{padding:44px 26px}
/* Kopfzeile auf schmalen Geräten.
Das Menü ist hier schon ausgeblendet, aber Logo, Modus-Knopf und
"Mein Konto" brauchten zusammen mit dem 30px-Abstand mehr Platz als
ein Telefon hat — die Seite scrollte dadurch auf JEDER Unterseite
waagerecht (bei 375px gemessen: 429px Inhalt, 54px Überhang).
Statt Bruchpunkte von Hand zu raten, ist das Logo hier das flexible
Element: es darf schrumpfen und notfalls beschnitten werden, die
Knöpfe bleiben unangetastet. Damit kann bei keiner Breite mehr
waagerecht gescrollt werden. */
.nav-in{gap:14px}
.logo{flex:1 1 auto;min-width:0}
.logo .wordmark{min-width:0;overflow:hidden}
.logo .wordmark b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-in .btn{flex:0 0 auto}
/* Rasterfelder dürfen unter ihre Inhaltsbreite schrumpfen. Ohne das
bleibt min-width:auto stehen und ein einzelnes breites Kind zwingt
die ganze Spalte über den Bildschirmrand hinaus. */
.quiz-grid>*,.svc-grid>*,.course-grid>*,.feat-grid>*,.foot-grid>*{min-width:0}
}
@media(max-width:430px){
/* Auf sehr schmalen Geräten die Unterzeile des Logos weglassen. Sie
steht weiterhin vollständig in der Fußzeile. */
.logo .wordmark span{display:none}
/* Knöpfe im Inhalt dürfen ihre Beschriftung umbrechen. ".btn" ist
bewusst einzeilig ("nowrap"), damit ein Knopf nie zerfällt — bei
280px war "Kostenlose Vorschau ansehen" damit aber 254,6px breit und
passte nicht in die 228px breite Spalte. Der Umbruch greift erst,
wenn die Beschriftung wirklich nicht mehr passt: unterhalb von etwa
307px. Oberhalb davon bleibt jeder Knopf einzeilig und unverändert.
max-width verhindert, dass ein Knopf breiter als sein Elternteil
wird, text-align zentriert die dann zweizeilige Beschriftung.
Die Kopfzeile ist ausgenommen — dort würde ein Umbruch die feste
Höhe von 78px sprengen; sie kommt bis 280px ohne Umbruch aus. */
.btn{white-space:normal;max-width:100%;text-align:center}
.nav-in .btn{white-space:nowrap}
}
/* ===== Ergänzungen gegenüber dem Entwurf ===== */
/* Preisdarstellung auf Kurskarten und Kursseite */
.price{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:14px}
.price b{font-family:'Sora';font-weight:700;font-size:28px;letter-spacing:-.02em}
.price s{color:var(--muted);font-size:16px}
.price .vat{display:block;width:100%;color:var(--muted);font-size:12.5px;margin-top:2px}
/* Hinweisbänder (z. B. Platzhalter-Rechtstexte) */
.notice{border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:var(--accent-soft);
color:var(--accent-ink);border-radius:14px;padding:16px 18px;font-size:15px;line-height:1.55;margin-bottom:24px}
.notice strong{font-weight:700}
/* Formulare */
.form{max-width:440px;margin:0 auto}
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:15px;padding:12px 14px;
border:1.5px solid var(--border);border-radius:11px;background:var(--surface);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);
box-shadow:0 0 0 3px var(--ring)}
.field .hint{color:var(--muted);font-size:13px;margin-top:5px}
/* Sicherheitsprüfung im Formular. Die feste Mindesthöhe hält den Platz
frei, bevor das Widget geladen ist — sonst springt der Absendeknopf beim
Erscheinen nach unten, und wer schnell klickt, trifft ins Leere. 65px ist
die Höhe des Widgets in der Standarddarstellung. */
.captcha{min-height:65px;margin:6px 0 16px}
.form .btn{width:100%;justify-content:center;margin-top:6px}
.form-alt{text-align:center;color:var(--muted);font-size:14px;margin-top:18px}
.form-alt a{color:var(--green-600);font-weight:600}
/* Rückmeldungen */
.msg{border-radius:11px;padding:12px 14px;font-size:14.5px;line-height:1.5;margin-bottom:16px}
.msg-err{background:#fdeceb;color:#8d201a;border:1px solid #f3c2be}
.msg-ok{background:var(--accent-soft);color:var(--accent-ink);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
[data-theme="dark"] .msg-err{background:#3a1512;color:#f6c9c5;border-color:#5d2b26}
/* Eingabefehler ist der DRITTE Zustand zwischen ok und Störung: Der Nutzer
kann ihn selbst beheben. Deshalb warnend, nicht alarmierend — ein
Tippfehler soll nicht wie ein Systemausfall aussehen. */
.msg-warn{background:#fdf4e3;color:#7a4e07;border:1px solid #efd9a8}
[data-theme="dark"] .msg-warn{background:#3a2c10;color:#f4dda6;border-color:#5d4a1c}
/* Lade- und Leerzustände */
.loading,.empty{text-align:center;color:var(--muted);padding:48px 20px;font-size:16px}
/* Ladefehler steht mitten im Inhaltsbereich und braucht deshalb eine
eigene Breite und Zentrierung, anders als .msg im Formularfluss. */
.load-error{max-width:560px;margin:32px auto;text-align:center}
/* Kurs-Detailseite */
.course-hero{display:grid;grid-template-columns:1.5fr 1fr;gap:44px;align-items:start;padding:52px 0}
.course-hero h1{font-family:'Sora';font-weight:800;font-size:clamp(30px,4.4vw,52px);line-height:1.05;
letter-spacing:-.03em;margin:18px 0 16px}
.buy-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:26px;
box-shadow:var(--shadow);position:sticky;top:100px}
.buy-card .btn{width:100%;justify-content:center;margin-top:18px}
/* .price ist zentriert und trägt 14px Abstand nach oben (Kurskarten);
in der Kaufkarte steht sie linksbündig direkt am Kartenrand. */
.buy-card .price{justify-content:flex-start;margin-top:0}
.buy-hint{margin-top:10px;text-align:center;color:var(--muted);font-size:13px}
.incl{list-style:none;margin-top:20px}
.incl li{display:flex;gap:11px;align-items:flex-start;color:var(--muted);font-size:14.5px;margin-bottom:10px}
.incl .tick{width:22px;height:22px;border-radius:999px;background:var(--accent-soft);color:var(--green-600);
display:grid;place-items:center;flex-shrink:0}
.curriculum{border:1px solid var(--border);border-radius:16px;overflow:hidden}
.curr-mod{border-bottom:1px solid var(--border)}
.curr-mod:last-child{border-bottom:none}
.curr-mod>h3{background:var(--surface-2);padding:15px 20px;font-family:'Sora';font-weight:600;font-size:16px}
/* Verzeichniszeile als echte Spalten.
Vorher schob margin-left:auto die Dauer nur bis zum naechsten Element —
dadurch stand sie in Zeilen MIT Vorschau-Kennzeichnung ganz woanders als
in Zeilen ohne, gemessen bis zu 479px Unterschied. Jetzt haben Dauer und
Kennzeichnung feste Spaltenbreiten, und beide Felder werden immer
gerendert (auch leer), damit die Spalten zeilenuebergreifend stehen.
tabular-nums gibt allen Ziffern die gleiche Breite, sonst wandert die
Dauer zwischen "9 Min." und "16 Min." um ein paar Pixel. */
.curr-les{display:flex;align-items:center;gap:11px;padding:13px 20px;font-size:14.5px;
border-top:1px solid var(--border);color:var(--muted)}
.curr-les .les-title{flex:1 1 auto;min-width:0}
.curr-les .dur{flex:0 0 82px;text-align:right;white-space:nowrap;
font-variant-numeric:tabular-nums}
.curr-les .pv-slot{flex:0 0 84px;display:flex;justify-content:flex-end}
.curr-les .pv{background:var(--accent-soft);color:var(--green-600);font-size:11.5px;
font-weight:700;padding:3px 9px;border-radius:999px;flex-shrink:0}
@media(max-width:560px){
/* Auf schmalen Geraeten schrumpfen die Spalten, bleiben aber bündig.
Die Vorschau-Kennzeichnung wird NICHT ausgeblendet: sie sagt dem
Besucher, dass er diese Lektion kostenlos ansehen kann, und ist damit
ein Kaufargument — sie muss auf dem Telefon genauso sichtbar sein. */
.curr-les{gap:8px;padding:12px 14px}
.curr-les .dur{flex-basis:56px;font-size:12.5px}
.curr-les .pv-slot{flex-basis:62px}
.curr-les .pv{font-size:10.5px;padding:3px 7px}
}
@media(max-width:880px){
.course-hero{grid-template-columns:1fr;gap:28px;padding:34px 0}
.buy-card{position:static}
}
/* Fehlerseite (404) */
.error-page{text-align:center;padding:60px 0}
.error-title{margin:18px 0 12px}
.error-lead{margin:0 auto 28px}
/* Fußzeile: Kurzbeschreibung unter dem Logo */
.foot-about{max-width:280px;margin-top:16px}
/* Startseite: aus dem Entwurf übernommene Inline-Stile als Klassen.
Jede Klasse trägt exakt die Eigenschaften, die zuvor im style-Attribut
standen — Darstellung bleibt unverändert. */
.quiz-title-gap{margin-top:14px}
.svc-cta-gap{margin-top:26px}
.sec-head-center{justify-content:center;text-align:center}
.lead-centered{margin:10px auto 0}
.band-cta{position:relative}
/* Kurskatalog: aus dem Entwurf übernommene Inline-Stile als Klassen.
.hero-compact überschreibt Innenabstand und (per Nachfahren-Selektor,
damit die Spezifität von ".hero h1" gezogen wird) die Schriftgröße der
Überschrift für die kürzere Katalog-Hero. .section-tight überschreibt
nur den oberen Innenabstand des ersten Abschnitts danach. */
.hero-compact{padding:64px 0 10px}
.hero-compact h1{font-size:clamp(34px,5vw,62px)}
.section-tight{padding-top:34px}
/* Auth-Seiten (Registrierung/Anmeldung/Passwort-Reset/Konto): aus dem
Entwurf übernommene Inline-Stile als Klassen. .auth-title/.auth-lead
zentrieren Überschrift und Unterzeile der schmalen Formularseiten,
.form-alt-sm verkleinert nur den Datenschutz-Hinweis unter dem
Registrierungsformular. .dash-greeting/.dash-name/.dash-email sind die
drei Textzeilen im Begrüßungskopf der Kontoseite, .dash-actions ordnet
die Aktionsknöpfe darunter. */
.auth-title{text-align:center;font-size:30px;margin-bottom:8px}
.auth-lead{text-align:center;margin:0 auto 26px}
.form-alt-sm{font-size:13px}
.dash-greeting{color:var(--muted);font-size:16px}
.dash-name{font-size:32px;letter-spacing:-.02em}
.dash-email{color:var(--muted);font-size:15px}
.dash-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
/* Kurs-Detailseite: aus dem Entwurf übernommene Inline-Stile als Klassen.
.lead-wide erlaubt der Unterzeile im Kurs-Aufmacher mehr Breite als die
sonst übliche .lead. .meta-line und .desc-block sind die Kennzahlen-
bzw. Beschreibungszeile darunter. .curriculum-section überschreibt nur
den oberen Innenabstand des Kursverzeichnis-Abschnitts, .h2-sm dessen
Überschrift auf eine kleinere Größe als die Standard-.h2. */
.lead-wide{max-width:640px}
.meta-line{color:var(--muted);font-size:14.5px;margin-top:14px}
.desc-block{font-size:17px;line-height:1.6;color:var(--ink);margin-top:24px}
.curriculum-section{padding-top:10px}
.h2-sm{font-size:clamp(24px,3vw,34px);margin-bottom:20px}
/* Statische Seiten (Über uns, Kontakt, Firmenkunden, Rechtstexte): aus
dem Task-13-Entwurf übernommene Inline-Stile als Klassen. Jede Klasse
trägt exakt die Eigenschaften, die zuvor im style-Attribut standen —
Darstellung bleibt unverändert. Werte, die auf mehreren dieser Seiten
identisch vorkamen, sind zu EINER gemeinsamen Klasse zusammengefasst
statt mehrfach angelegt worden (z. B. .page-title, .lead-gap). */
.wrap-narrow{max-width:820px}
.page-title{margin:18px 0 20px}
.page-title-sm{margin:18px 0 16px}
.lead-gap{margin-bottom:32px}
.para-intro{font-size:18px;line-height:1.65;color:var(--muted);margin-bottom:20px}
.para-body{font-size:17px;line-height:1.65;color:var(--muted);margin-bottom:20px}
.ink-strong{color:var(--ink)}
.sec-h2{font-size:26px;margin:36px 0 16px}
.sec-h2-alt{font-size:26px;margin:40px 0 14px}
.inhouse-gap{margin-top:36px}
.inhouse-gap-lg{margin-top:40px}
.inhouse-title{font-size:24px}
.incl-lg{font-size:16px}
.incl-sm{font-size:15.5px}
.link-acc{color:var(--green-600);font-weight:600}
.notice-gap{margin-top:32px}
/* Warnkasten der vier Rechtstext-Platzhalter. Absichtlich warntypisch gelb
statt in der grünen Hausfarbe — er soll auffallen, weil über die Seite
nichts verkauft werden darf, solange dort Platzhalter stehen.
Die Werte des Entwurfs gelten für den hellen Modus; im dunklen Modus
werden sie umgesetzt statt übernommen, sonst stünde ein hellgelber Kasten
auf dunkelgrünem Grund. Muster wie bei .msg-err, das denselben Fall löst. */
.notice-warn{border-color:#e0a800;background:#fff8e6;color:#6b4e00}
[data-theme="dark"] .notice-warn{border-color:#7a5c00;background:#33280a;color:#f5e2a8}
.foot-note{margin-top:28px;color:var(--muted);font-size:15px}
.legal-h2{font-size:20px;margin:24px 0 8px}
.legal-p{color:var(--muted);line-height:1.7}
.legal-p-mb{margin-bottom:16px}
.legal-p-mt{margin-top:16px}
/* ============================================================ Adminbereich
Eigene Klassen, weil der Adminbereich Listen und Kennzahlen zeigt, nicht
Verkaufsflaechen. Bewusst ohne @media: Das Raster wird ueber auto-fit
schmal, statt an einer Bruchstelle umzuschalten — damit kann keine Spalte
bei einer Zwischenbreite verschwinden (die .pv-slot-Regression der
Phase 1 kam genau daher). */
.adm-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.adm-who{color:var(--muted);font-size:14px}
.adm-nav{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 26px}
.adm-nav a{border:1.5px solid var(--border);border-radius:10px;padding:8px 14px;
font-size:14px;font-weight:600;color:var(--ink)}
.adm-nav a:hover{border-color:var(--accent)}
.adm-nav a[aria-current="page"]{background:var(--green);border-color:var(--green);color:#fff}
.adm-nav a:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.adm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
gap:14px;margin-bottom:26px}
.adm-stat{border:1px solid var(--border);border-radius:14px;padding:16px 18px;
background:var(--surface-2)}
/* tabular-nums, damit die Zahlen mehrerer Karten auf gleicher Hoehe gleich
breit stehen und nicht je Ziffernkombination wandern. */
.adm-num{font-family:'Sora',system-ui,sans-serif;font-size:30px;font-weight:700;
font-variant-numeric:tabular-nums;line-height:1.15}
.adm-lbl{color:var(--muted);font-size:14px;margin-top:2px}
.adm-sub{font-size:13px;margin-top:6px;font-variant-numeric:tabular-nums}
/* --- Listen im Adminbereich -------------------------------------------
Feste Spaltenbreiten, damit Angaben zeilenuebergreifend buendig stehen.
Wird es zu schmal, scrollt die LISTE waagerecht in ihrem eigenen Kasten
— es wird keine Spalte ausgeblendet. Eine ausgeblendete Spalte war in
Phase 1 der Fehler (.pv-slot), und eine waagerecht scrollende Seite ist
ebenfalls keine Loesung. */
.adm-scroll{overflow-x:auto;margin-bottom:26px}
.adm-list{border:1px solid var(--border);border-radius:14px;overflow:hidden}
/* Die Spaltenbreiten haengen an der LISTE, nicht an der Zeile — so tragen
mehrere Listenarten dieselbe Zeilengestaltung, aber eigene Raster. */
.adm-list-produkte{min-width:860px}
.adm-list-produkte .adm-row{grid-template-columns:56px 1fr 110px 120px 130px 310px}
.adm-list-kurse{min-width:720px}
.adm-list-kurse .adm-row{grid-template-columns:1fr 130px 90px 250px}
.adm-list-zuordnung{min-width:600px}
.adm-list-zuordnung .adm-row{grid-template-columns:56px 1fr 210px}
.adm-row{display:grid;gap:12px;align-items:center;padding:12px 16px;
border-top:1px solid var(--border)}
.adm-row:first-child{border-top:0}
.adm-row-head{background:var(--surface-2);font-size:13px;font-weight:700;color:var(--muted)}
.adm-c-pos{font-variant-numeric:tabular-nums;color:var(--muted);font-size:14px}
.adm-c-titel{min-width:0}
.adm-c-titel b{display:block;font-weight:700;overflow-wrap:anywhere}
.adm-slug{display:block;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.adm-c-art{font-size:14px}
.adm-c-preis{font-variant-numeric:tabular-nums;text-align:right;font-weight:600}
.adm-c-status{font-size:14px}
.adm-c-anzahl{font-variant-numeric:tabular-nums;text-align:right;font-size:14px;color:var(--muted)}
.adm-c-tun{display:flex;gap:6px}
.adm-pill{display:inline-block;border:1px solid var(--border);border-radius:999px;
padding:3px 10px;font-size:12.5px;font-weight:600;color:var(--muted)}
.adm-pill-on{border-color:color-mix(in srgb,var(--accent) 55%,transparent);
background:var(--accent-soft);color:var(--accent-ink)}
/* --- Formular im Adminbereich ---------------------------------------- */
.adm-form{border:1px solid var(--border);border-radius:14px;padding:20px 22px;margin-bottom:26px}
.adm-form-titel{font-family:'Sora',system-ui,sans-serif;font-size:18px;font-weight:700;
margin-bottom:16px}
.adm-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 18px}
.adm-span2{grid-column:1/-1}
.adm-check{display:flex;align-items:center;gap:10px;margin:4px 0 18px}
.adm-check input{width:auto}
.adm-form-tun{display:flex;gap:10px;flex-wrap:wrap}
/* --- Kursinhalt: Module mit eingeschachtelten Lektionen ---------------- */
.adm-abschnitt{font-family:'Sora',system-ui,sans-serif;font-size:20px;font-weight:700;
margin:6px 0 12px}
.adm-hinweis{color:var(--muted);font-size:14px;line-height:1.65;margin-bottom:16px}
.adm-modul{margin-bottom:22px}
.adm-modul .adm-scroll{margin-bottom:0}
/* Die Lektionsliste rueckt ein und sitzt bewusst OHNE Abstand unter ihrem
Modul: Zusammengehoerigkeit ueber Naehe, nicht ueber eine Linie mehr. */
.adm-modul-lekt{margin-left:22px}
.adm-list-module{min-width:640px}
.adm-list-module .adm-row{grid-template-columns:56px 1fr 90px 310px}
.adm-list-lektionen{min-width:820px}
.adm-list-lektionen .adm-row{grid-template-columns:56px 1fr 90px 110px 100px 310px}
.adm-c-dauer{font-variant-numeric:tabular-nums;text-align:right;font-size:14px}
/* Dritter Zustand der Video-Spalte: "unbekannt" darf weder wie "gesetzt"
noch wie "fehlt" aussehen — sonst haelt man eine Stoerung fuer einen
Befund. Gleiche Logik wie .msg-err gegen .empty. */
.adm-pill-unklar{border-color:#e0a800;color:#6b4e00;background:#fff8e6}
[data-theme="dark"] .adm-pill-unklar{border-color:#7a5c00;color:#f5e2a8;background:#33280a}
.adm-list-blog{min-width:820px}
.adm-list-blog .adm-row{grid-template-columns:1fr 120px 150px 290px}
/* Die Vorschau nutzt dieselben Regeln wie der veroeffentlichte Beitrag --
was hier steht, steht spaeter auch draussen. */
.blog-vorschau{border:1px solid var(--border);border-radius:14px;
padding:20px 24px;max-width:44rem;font-size:17px;line-height:1.7}
.blog-vorschau h2{font-family:'Sora',system-ui,sans-serif;font-size:24px;
font-weight:700;margin:28px 0 12px}
.blog-vorschau h3{font-family:'Sora',system-ui,sans-serif;font-size:19px;
font-weight:700;margin:24px 0 10px}
.blog-vorschau p{margin:0 0 16px}
.blog-vorschau ul,.blog-vorschau ol{margin:0 0 16px;padding-left:1.4em}
.blog-vorschau blockquote{margin:0 0 16px;padding-left:16px;
border-left:3px solid var(--accent);color:var(--muted)}
.blog-vorschau pre{margin:0 0 16px;padding:12px 14px;border-radius:10px;
background:var(--surface-2);overflow-x:auto;font-size:14px}
.blog-vorschau code{font-family:ui-monospace,Consolas,monospace;font-size:.92em}
.blog-vorschau img{max-width:100%;height:auto;border-radius:10px}
.adm-list-fragen{min-width:760px}
.adm-list-fragen .adm-row{grid-template-columns:56px 1fr 330px}
.adm-list-material{min-width:720px}
.adm-list-material .adm-row{grid-template-columns:1fr 200px 90px 240px}
.adm-material{margin-top:34px}
.adm-list-rabatt{min-width:940px}
.adm-list-rabatt .adm-row{grid-template-columns:1fr 110px 100px 100px 84px 130px 290px}
/* Vierter Zustand der Pille: "FEHLT" ist kein unklarer Befund, sondern ein
klarer und ein schlechter -- eine bezahlte Bestellung ohne Freischaltung.
Sie darf deshalb weder wie "gesetzt" (gruen) noch wie "unbekannt" (gelb)
aussehen. */
.adm-pill-warn{border-color:#c0261a;color:#8d201a;background:#fdeceb;font-weight:700}
[data-theme="dark"] .adm-pill-warn{border-color:#8d201a;color:#ffbdb6;background:#3a1512}
/* --- Bestellungen ----------------------------------------------------- */
.adm-list-bestellung{min-width:1240px}
.adm-list-bestellung .adm-row{grid-template-columns:64px 1fr 100px 130px 130px 110px 120px 130px 120px}
.adm-list-ereignis{min-width:840px}
.adm-list-ereignis .adm-row{grid-template-columns:100px 1fr 110px 1fr}
.bst-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:14px;margin-bottom:20px}
.bst-kachel{border:1px solid var(--border);border-radius:14px;padding:14px 16px}
.bst-kachel-titel{display:block;color:var(--muted);font-size:13px;font-weight:600;
margin-bottom:4px}
/* tabular-nums, damit die Zahlen der Kacheln untereinander buendig stehen,
und white-space:nowrap, damit der Betrag nicht vom Euro getrennt wird. */
.bst-kachel-wert{font-family:'Sora',system-ui,sans-serif;font-size:22px;font-weight:700;
font-variant-numeric:tabular-nums;white-space:nowrap}
.bst-leiste{display:flex;gap:26px;align-items:flex-end;margin-bottom:16px;
flex-wrap:wrap}
.bst-filter{max-width:320px;margin-bottom:0}
.bst-export{display:flex;gap:8px;align-items:stretch}
.bst-export input{flex:1 1 auto;min-width:0}
.bst-export .btn{flex:0 0 auto;white-space:nowrap}
/* --- Kursliste im Kundenkonto ----------------------------------------- */
.konto-abschnitt{font-family:'Sora',system-ui,sans-serif;font-size:22px;font-weight:700;
margin:8px 0 14px}
.konto-kurs{display:flex;align-items:center;justify-content:space-between;gap:18px;
border:1px solid var(--border);border-radius:14px;padding:18px 20px;
margin-bottom:12px;flex-wrap:wrap}
.konto-kurs-text b{display:block;font-family:'Sora',system-ui,sans-serif;font-size:17px;
font-weight:700;margin-bottom:2px}
.konto-kurs-text span,.konto-kurs-offline span{display:block;color:var(--muted);
font-size:14px;line-height:1.55}
/* Freigeschaltet, aber gerade nicht lesbar: KEIN Fehlerrot -- der Zugang
des Kunden besteht. Gelb wie .adm-pill-unklar: ein Zwischenzustand. */
.konto-kurs-offline{display:block;border-color:#e0a800;background:#fff8e6}
[data-theme="dark"] .konto-kurs-offline{border-color:#7a5c00;background:#33280a}
.konto-kurs-offline b{display:block;font-size:15.5px;margin-bottom:4px}
/* --- Bestellverlauf im Kundenkonto ------------------------------------
Gleiche Regeln wie die Adminlisten: feste Spalten an der LISTE, immer
alle Felder rendern, zu schmal -> die Liste scrollt in ihrem Kasten. */
.kto-titel{margin-bottom:6px}
.kto-untertitel{color:var(--muted);font-size:15px;line-height:1.6;margin-bottom:22px;
max-width:640px}
.kto-scroll{overflow-x:auto;margin-bottom:26px}
.kto-liste{border:1px solid var(--border);border-radius:14px;overflow:hidden;
min-width:680px}
.kto-row{display:grid;grid-template-columns:56px 1fr 130px 170px 150px;gap:12px;
align-items:center;padding:13px 16px;border-top:1px solid var(--border)}
.kto-row:first-child{border-top:0}
.kto-row-head{background:var(--surface-2);font-size:13px;font-weight:700;
color:var(--muted)}
.kto-c-nr{font-variant-numeric:tabular-nums;color:var(--muted);font-size:14px}
.kto-c-was{min-width:0}
.kto-c-was b{display:block;font-weight:700;overflow-wrap:anywhere}
.kto-c-was span,.kto-c-betrag span{display:block;color:var(--muted);font-size:13px}
.kto-c-betrag{font-variant-numeric:tabular-nums;text-align:right;font-weight:600}
.kto-c-status{font-size:14px}
.kto-pill{display:inline-block;border:1px solid var(--border);border-radius:999px;
padding:3px 10px;font-size:12.5px;font-weight:600;color:var(--muted)}
.kto-pill-ok{border-color:color-mix(in srgb,var(--accent) 55%,transparent);
background:var(--accent-soft);color:var(--accent-ink)}
.kto-pill-wartet{border-color:#e0a800;color:#6b4e00;background:#fff8e6}
[data-theme="dark"] .kto-pill-wartet{border-color:#7a5c00;color:#f5e2a8;background:#33280a}
.kto-keine{color:var(--muted)}
/* Der Vorschau-Knopf traegt die Gestalt des Kennzeichens (.pv), ist aber
bedienbar. Der Dialog liegt ueber allem und schliesst per Kreuz oder
Klick auf den Grund. */
.pv-knopf{cursor:pointer;font:inherit;border:0}
.pv-dialog{position:fixed;inset:0;z-index:90;background:rgba(8,16,13,.72);
display:grid;place-items:center;padding:20px}
.pv-dialog.hide{display:none}
.pv-dialog-kasten{position:relative;width:min(920px,100%)}
.pv-dialog-buehne{position:relative;aspect-ratio:16/9;background:#0b1512;
border-radius:14px;overflow:hidden;display:grid;
place-items:center;padding:0}
.pv-dialog-buehne .empty,.pv-dialog-buehne .msg,.pv-dialog-buehne .notice{
max-width:420px;margin:20px}
.pv-dialog-player{position:absolute;inset:0;width:100%;height:100%;border:0}
.pv-dialog-zu{position:absolute;top:-42px;right:0;width:36px;height:36px;
border:0;border-radius:50%;background:#fff;color:#0d1d16;
font-size:20px;line-height:1;cursor:pointer}
/* --- Lernansicht (konto/kurs) ------------------------------------------
Player links (fuehrt), Kursinhalt rechts; unterhalb von 900px stapelt
es. Die Buehne haelt IMMER 16:9 -- auch waehrend Meldungen, sonst
springt die Seite bei jedem Lektionswechsel. */
.lern-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;
margin-bottom:20px;flex-wrap:wrap}
.lern-raster{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);
gap:26px;align-items:start}
@media (max-width:900px){.lern-raster{grid-template-columns:1fr}}
.lern-buehne{position:relative;aspect-ratio:16/9;background:#0b1512;
border-radius:14px;overflow:hidden}
.lern-player{position:absolute;inset:0;width:100%;height:100%;border:0}
.lern-hinweis{position:absolute;inset:0;display:grid;place-items:center;padding:22px}
.lern-hinweis .notice,.lern-hinweis .msg{max-width:460px}
.lern-leiste{display:flex;align-items:center;justify-content:space-between;gap:12px;
margin-top:14px}
.lern-lektionstitel{font-family:'Sora',system-ui,sans-serif;font-size:17px;
font-weight:700;min-width:0;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.lern-seite{border:1px solid var(--border);border-radius:14px;padding:16px 14px;
max-height:70vh;overflow-y:auto}
.lern-seitentitel{font-family:'Sora',system-ui,sans-serif;font-size:15px;
font-weight:700;margin:0 6px 10px}
.lern-modul{margin-bottom:14px}
.lern-modul-titel{font-size:12.5px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--muted);margin:0 6px 6px}
/* Lektionen sind KNOEPFE (sie wechseln den Player, keine Seite) und
rendern beide Felder immer -- Titel und Dauer stehen spaltenbuendig. */
.lern-lektion{display:flex;align-items:center;justify-content:space-between;gap:10px;
width:100%;text-align:left;padding:9px 10px;border:0;border-radius:9px;
background:none;font:inherit;font-size:14.5px;color:inherit;
cursor:pointer}
.lern-lektion:hover{background:var(--surface-2)}
.lern-lektion-aktiv,.lern-lektion-aktiv:hover{background:var(--accent-soft);
color:var(--accent-ink);font-weight:600}
.lern-lektion-titel{min-width:0;overflow-wrap:anywhere}
.lern-lektion-dauer{flex:0 0 auto;font-variant-numeric:tabular-nums;font-size:12.5px;
color:var(--muted)}
.lern-lektion-aktiv .lern-lektion-dauer{color:inherit}
/* Materialkasten unter dem Kursinhalt. Zeilen sind KNOEPFE: Der Klick
holt eine frische signierte Adresse, er fuehrt auf keine Seite. Beide
Felder werden immer gerendert (Titel, Groesse) — spaltenbuendig. */
.lern-material{border-top:1px solid var(--border);margin-top:14px;padding-top:12px}
.lern-material-zeile{display:flex;align-items:center;justify-content:space-between;
gap:10px;width:100%;text-align:left;padding:9px 10px;border:0;
border-radius:9px;background:none;font:inherit;font-size:14.5px;
color:inherit;cursor:pointer}
.lern-material-zeile:hover{background:var(--surface-2)}
.lern-material-zeile:disabled{opacity:.5;cursor:progress}
.lern-material-titel{min-width:0;overflow-wrap:anywhere}
.lern-material-hinweis{display:block;font-size:12px;color:var(--muted)}
.lern-material-groesse{flex:0 0 auto;font-variant-numeric:tabular-nums;
font-size:12.5px;color:var(--muted)}
/* ============================================================ Fortschritt
Der Balken traegt seine Breite als BENANNTE KLASSE in 5-Prozent-Schritten
-- style-Attribute sind im Projekt nicht erlaubt, auch nicht in per
JavaScript erzeugtem Markup. Fuenf Prozent Aufloesung reichen: Ein
Balken ist eine Groessenordnung, keine Messuhr. Die Zahl daneben ist
exakt. */
.konto-fortschritt{display:flex;align-items:center;gap:10px;margin-top:8px}
.konto-balken{flex:1 1 auto;min-width:80px;max-width:220px;height:7px;
border-radius:99px;background:var(--surface-2);overflow:hidden}
.konto-balken-fuellung{display:block;height:100%;border-radius:99px;
background:var(--accent)}
.konto-fortschritt-text{flex:0 0 auto;font-size:12.5px;color:var(--muted);
font-variant-numeric:tabular-nums}
.konto-balken-0 .konto-balken-fuellung,.konto-balken-0{width:0%}
.konto-balken-5 .konto-balken-fuellung,.konto-balken-5{width:5%}
.konto-balken-10 .konto-balken-fuellung,.konto-balken-10{width:10%}
.konto-balken-15 .konto-balken-fuellung,.konto-balken-15{width:15%}
.konto-balken-20 .konto-balken-fuellung,.konto-balken-20{width:20%}
.konto-balken-25 .konto-balken-fuellung,.konto-balken-25{width:25%}
.konto-balken-30 .konto-balken-fuellung,.konto-balken-30{width:30%}
.konto-balken-35 .konto-balken-fuellung,.konto-balken-35{width:35%}
.konto-balken-40 .konto-balken-fuellung,.konto-balken-40{width:40%}
.konto-balken-45 .konto-balken-fuellung,.konto-balken-45{width:45%}
.konto-balken-50 .konto-balken-fuellung,.konto-balken-50{width:50%}
.konto-balken-55 .konto-balken-fuellung,.konto-balken-55{width:55%}
.konto-balken-60 .konto-balken-fuellung,.konto-balken-60{width:60%}
.konto-balken-65 .konto-balken-fuellung,.konto-balken-65{width:65%}
.konto-balken-70 .konto-balken-fuellung,.konto-balken-70{width:70%}
.konto-balken-75 .konto-balken-fuellung,.konto-balken-75{width:75%}
.konto-balken-80 .konto-balken-fuellung,.konto-balken-80{width:80%}
.konto-balken-85 .konto-balken-fuellung,.konto-balken-85{width:85%}
.konto-balken-90 .konto-balken-fuellung,.konto-balken-90{width:90%}
.konto-balken-95 .konto-balken-fuellung,.konto-balken-95{width:95%}
.konto-balken-100 .konto-balken-fuellung,.konto-balken-100{width:100%}
/* Haekchen in der Lektionsliste der Lernansicht. Der Zustand steht als
Zeichen UND als Titel da -- eine Farbe allein waere fuer jemanden mit
Farbsehschwaeche keine Auskunft. */
.lern-lektion-haken{flex:0 0 auto;width:18px;text-align:center;font-size:13px;
color:var(--muted)}
.lern-lektion-haken-erledigt{color:var(--accent);font-weight:700}
.lern-fortschritt{display:flex;align-items:center;gap:10px;margin:0 6px 12px}
.lern-abhaken{margin-top:14px}
/* Der Fortsetzen-Hinweis ist eine Auskunft, keine Warnung -- .notice,
nicht .msg-err. Der Rueckweg steht als Textknopf daneben: Er wechselt
keine Seite, also kein . */
.lern-fortsetzen-notiz{margin-top:14px;display:flex;align-items:center;
gap:10px;flex-wrap:wrap}
.lern-vonvorne{border:0;background:none;padding:0;font:inherit;font-size:14px;
font-weight:600;color:var(--accent-ink);cursor:pointer;
text-decoration:underline}
.lern-vonvorne:hover{text-decoration:none}
/* ========================================================== Abschlusstest
Der Test ersetzt die Video-Buehne. Antworten sind echte Radiogruppen --
damit funktionieren Tastatur und Vorlesehilfen ohne Zutun. Richtig und
falsch tragen ein Zeichen UND eine Farbe; Farbe allein waere fuer
jemanden mit Farbsehschwaeche keine Auskunft. */
.quiz-kopf{margin-bottom:18px}
.quiz-titel{font-family:'Sora',system-ui,sans-serif;font-size:20px;font-weight:700;
margin:0 0 6px}
.quiz-hinweis{font-size:14px;color:var(--muted);margin:0}
.quiz-frage{border:1px solid var(--border);border-radius:12px;padding:14px 16px;
margin-bottom:12px}
.quiz-frage-text{font-weight:600;margin:0 0 10px}
.quiz-nr{color:var(--muted);font-variant-numeric:tabular-nums}
.quiz-option{display:flex;align-items:flex-start;gap:9px;padding:7px 8px;
border-radius:9px;cursor:pointer}
.quiz-option:hover{background:var(--surface-2)}
.quiz-option input{margin-top:3px;flex:0 0 auto}
.quiz-tun{margin-top:16px}
.quiz-ergebnis{border:1px solid var(--border);border-radius:12px;padding:16px 18px;
margin-bottom:16px}
.quiz-ergebnis-ok{border-color:color-mix(in srgb,var(--accent) 55%,transparent);
background:var(--accent-soft)}
.quiz-punkte{font-family:'Sora',system-ui,sans-serif;font-size:22px;font-weight:700;
margin:0 0 4px;font-variant-numeric:tabular-nums}
.quiz-urteil{margin:0;font-size:14px}
.quiz-frage-richtig{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.quiz-frage-falsch{border-color:#e0a800}
.quiz-befund{margin:0;font-size:14px;font-weight:600}
.quiz-loesung{margin:6px 0 0;font-size:14px}
.quiz-erklaerung{margin:8px 0 0;font-size:14px;color:var(--muted)}
/* Der Eintrag in der Seitenleiste, der den Test oeffnet. */
.lern-test{border-top:1px solid var(--border);margin-top:14px;padding-top:12px}
/* Im Testmodus ist die Buehne kein Videofenster: Das 16:9-Verhaeltnis und
der dunkle Grund muessen weg, sonst steckt der Test in einem Kasten
fester Hoehe. */
.lern-buehne-test{aspect-ratio:auto;background:none;border-radius:0;overflow:visible}
/* =============================================== Newsletter
Sitzt in der Fusszeile. Das Eingabefeld traegt eine echte Beschriftung
(nur fuer Vorlesehilfen sichtbar) -- ein Platzhaltertext allein ist
keine Beschriftung, er verschwindet beim Tippen. */
.nl-form h4{margin:0 0 8px}
.nl-text{font-size:13px;color:var(--muted);margin:0 0 10px;line-height:1.5}
.nl-zeile{display:flex;gap:8px;flex-wrap:wrap}
.nl-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.nl-zeile input{flex:1 1 160px;min-width:0;padding:9px 11px;border-radius:9px;
border:1px solid var(--border);background:var(--bg);color:inherit;
font:inherit;font-size:14px}
.nl-msg{margin-top:8px}
.nl-msg .msg{font-size:13px;padding:8px 10px}
.nl-eingabe{font-size:13px;color:#8a5a00;margin:0}
[data-theme="dark"] .nl-eingabe{color:#f0c96a}
.nl-tun{margin-top:22px;display:flex;gap:8px;flex-wrap:wrap}
/* ===================================================================== Blog
Die Karte ist EIN Link -- ein Klick irgendwo darauf fuehrt zum Beitrag.
Deshalb als Behaelter und keine verschachtelten Links darin. */
.blog-liste{display:grid;gap:14px;margin-top:26px}
.blog-karte{display:block;border:1px solid var(--border);border-radius:14px;
padding:18px 20px;text-decoration:none;color:inherit;
transition:border-color .15s}
.blog-karte:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.blog-karte-datum{display:block;font-size:12.5px;color:var(--muted);
font-variant-numeric:tabular-nums}
.blog-karte-titel{display:block;font-family:'Sora',system-ui,sans-serif;
font-size:19px;font-weight:700;margin:4px 0 6px;line-height:1.3}
.blog-karte-text{display:block;font-size:14.5px;color:var(--muted);line-height:1.6}
.blog-karte-mehr{display:block;margin-top:10px;font-size:14px;font-weight:600;
color:var(--accent-ink)}
/* Der Beitrag selbst. Eine Lesespalte ist enger als der Satzspiegel --
ueber 75 Zeichen je Zeile verliert das Auge den Zeilenanfang. */
.wrap-lesen{max-width:44rem}
.blog-zurueck{font-size:14px;margin:0 0 18px}
.blog-titel{margin:0 0 8px}
.blog-meta{font-size:13.5px;color:var(--muted);margin:0 0 22px}
#blog-inhalt{font-size:17px;line-height:1.7}
#blog-inhalt h2{font-family:'Sora',system-ui,sans-serif;font-size:24px;
font-weight:700;margin:34px 0 12px;line-height:1.25}
#blog-inhalt h3{font-family:'Sora',system-ui,sans-serif;font-size:19px;
font-weight:700;margin:28px 0 10px}
#blog-inhalt h4{font-size:17px;font-weight:700;margin:22px 0 8px}
#blog-inhalt p{margin:0 0 18px}
#blog-inhalt ul,#blog-inhalt ol{margin:0 0 18px;padding-left:1.4em}
#blog-inhalt li{margin-bottom:7px}
#blog-inhalt blockquote{margin:0 0 18px;padding:2px 0 2px 18px;
border-left:3px solid var(--accent);color:var(--muted)}
#blog-inhalt blockquote p{margin:0}
#blog-inhalt pre{margin:0 0 18px;padding:14px 16px;border-radius:12px;
background:var(--surface-2);overflow-x:auto;font-size:14px}
#blog-inhalt code{font-family:ui-monospace,Consolas,monospace;font-size:.92em;
background:var(--surface-2);padding:1px 5px;border-radius:5px}
#blog-inhalt pre code{background:none;padding:0}
#blog-inhalt img{max-width:100%;height:auto;border-radius:12px;margin:0 0 18px}
#blog-inhalt hr{border:0;border-top:1px solid var(--border);margin:28px 0}
#blog-inhalt a{color:var(--accent-ink);text-decoration:underline}
/* =============================================== Bewertungen (Admin)
Sterne stehen als Zeichen UND als Zahl da -- eine Symbolreihe allein
ist fuer eine Vorlesehilfe keine Auskunft. */
.adm-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:12px;margin-bottom:22px}
.adm-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.bew-karte{border:1px solid var(--border);border-radius:14px;padding:15px 17px;
margin-bottom:12px}
.bew-kopf{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.bew-sterne{color:var(--accent);font-size:16px;letter-spacing:.08em}
.bew-note{font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted)}
.bew-inhalt b{display:block;margin-bottom:4px}
.bew-text{margin:0 0 6px;font-size:14.5px;white-space:pre-line;overflow-wrap:anywhere}
.bew-meta{display:block;font-size:12.5px;color:var(--muted)}
.bew-notiz{display:block;font-size:12.5px;color:#8a5a00;margin-top:6px}
[data-theme="dark"] .bew-notiz{color:#f0c96a}
.bew-tun{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
/* =============================================== Bewertungen (oeffentlich) */
.rev-block{margin-top:44px}
.rev-kopf{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.rev-schnitt{font-family:'Sora',system-ui,sans-serif;font-size:26px;font-weight:700;
font-variant-numeric:tabular-nums}
.rev-sterne{color:var(--accent);font-size:19px;letter-spacing:.08em}
.rev-anzahl{color:var(--muted);font-size:14px}
.rev-karte{border:1px solid var(--border);border-radius:14px;padding:15px 17px;
margin-bottom:12px}
.rev-karte-kopf{display:flex;align-items:center;gap:10px;margin-bottom:6px;
flex-wrap:wrap}
.rev-titel{font-weight:700}
.rev-text{margin:6px 0 0;font-size:14.5px;white-space:pre-line;overflow-wrap:anywhere}
.rev-meta{font-size:12.5px;color:var(--muted)}
/* =============================================== Eigene Bewertung
Sitzt in der Lernansicht. Die Sternwahl sind echte Radios -- Tastatur
und Vorlesehilfen funktionieren dadurch ohne Zutun. */
.lern-bewertung{border-top:1px solid var(--border);margin-top:14px;padding-top:12px}
.bwg-sterne{display:flex;gap:2px;margin:6px 0 10px}
.bwg-stern{cursor:pointer;font-size:24px;line-height:1;color:var(--border)}
.bwg-stern input{position:absolute;opacity:0;width:1px;height:1px}
.bwg-stern-an{color:var(--accent)}
.bwg-feld{width:100%;margin-bottom:8px}
.bwg-status{display:block;font-size:12.5px;color:var(--muted);margin-bottom:8px}
/* =============================================== Zertifikate im Konto
Eine Karte je freigeschaltetem Kurs -- auch fuer die, die noch nicht
abgeschlossen sind. "Keine Zertifikate" und "noch nichts
abgeschlossen" sind verschiedene Aussagen, und nur die zweite sagt dem
Kunden, was zu tun ist. */
.konto-hinweis{font-size:14.5px;color:var(--muted);max-width:70ch;margin:0 0 22px}
.zert-karte{display:flex;align-items:center;justify-content:space-between;gap:16px;
border:1px solid var(--border);border-radius:14px;padding:16px 18px;
margin-bottom:12px;flex-wrap:wrap}
.zert-text{min-width:0}
.zert-text b{display:block;font-weight:700;overflow-wrap:anywhere}
.zert-art{display:block;font-size:14px;font-weight:600;color:var(--accent-ink);
margin-top:3px}
.zert-meta{display:block;font-size:13px;color:var(--muted);margin-top:3px;
overflow-wrap:anywhere}
.zert-tun{flex:0 0 auto}
/* =============================================== Echtheitspruefung
Oeffentliche Seite ohne Anmeldung. Die Trefferkarte nennt genau das,
was auf dem Papier steht -- nicht mehr. */
.wrap-eng{max-width:760px}
.pruef-intro{font-size:15px;color:var(--muted);max-width:66ch;margin:0 0 22px}
.pruef-form{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;
margin-bottom:22px}
.pruef-form .field{flex:1 1 260px;margin:0}
.pruef-form input{font-family:ui-monospace,Consolas,monospace;letter-spacing:.06em;
text-transform:uppercase}
.pruef-treffer{border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);
background:var(--accent-soft);border-radius:14px;padding:18px 20px}
.pruef-gueltig{font-weight:700;color:var(--accent-ink);margin:0 0 4px}
.pruef-art{font-family:'Sora',system-ui,sans-serif;font-size:20px;font-weight:700;
margin:0 0 14px}
.pruef-liste{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:8px 16px;
margin:0;font-size:14.5px}
.pruef-liste dt{color:var(--muted)}
.pruef-liste dd{margin:0;overflow-wrap:anywhere}
.pruef-fuss{font-size:12.5px;color:var(--muted);margin-top:26px;max-width:70ch}
@media (max-width:520px){
.pruef-liste{grid-template-columns:1fr;gap:2px 0}
.pruef-liste dd{margin-bottom:8px}
}
/* ==================================================================== Kasse
Betraege stehen rechts und mit tabular-nums, damit sie ueber die Zeilen
hinweg buendig stehen. Die Summenzeile ist die einzige, die optisch
heraussticht -- alles andere ist Beleg, nicht Aufforderung. */
.cko-block{border:1px solid var(--border);border-radius:14px;padding:18px 20px;
margin-bottom:18px}
.cko-titel{font-family:'Sora',system-ui,sans-serif;font-size:17px;font-weight:700;
margin-bottom:12px}
.cko-wahl{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;
font-size:15px;line-height:1.5;cursor:pointer}
.cko-wahl input{width:auto;margin-top:3px;flex:0 0 auto}
.cko-zwei{display:grid;grid-template-columns:1fr 2fr;gap:0 14px}
.cko-mitknopf{display:flex;gap:8px;align-items:stretch}
.cko-mitknopf input{flex:1 1 auto;min-width:0}
.cko-mitknopf .btn{flex:0 0 auto;white-space:nowrap}
.cko-summenblock{background:var(--surface-2)}
.cko-zeile{display:flex;justify-content:space-between;gap:16px;padding:7px 0;
font-size:15px;border-bottom:1px solid var(--border)}
.cko-zeile:last-child{border-bottom:0}
.cko-wert{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.cko-posten{font-weight:600}
.cko-netto,.cko-steuer{color:var(--muted)}
.cko-summe{font-size:18px;font-weight:700;padding-top:12px;margin-top:4px;
border-top:2px solid var(--border)}
.cko-absenden{width:100%;justify-content:center}
.cko-fuss{margin-top:10px;text-align:center}
@media(max-width:520px){
/* Nur der PLZ/Ort-Zweispalter wird gestapelt. Es verschwindet nichts —
die Regel aendert eine Anordnung, keine Sichtbarkeit. */
.cko-zwei{grid-template-columns:1fr}
}
/* Rabattzeile in der Bestelluebersicht: erscheint nur, wenn ein Rabatt
greift, und wird gruen gesetzt -- eine Minderung des Betrags ist eine
gute Nachricht und darf so aussehen. */
.cko-rabatt{color:var(--green-600)}
[data-theme="dark"] .cko-rabatt{color:var(--accent)}
/* ====================================================================
WIDERRUFSFUNKTION (§ 356a BGB) — /widerruf-erklaeren
Das Gesetz verlangt die Funktion „hervorgehoben und leicht zugänglich".
In der Fusszeile heisst das: nicht als fünfter grauer Link zwischen den
anderen untergehen, sondern erkennbar als Handlung. Gleichzeitig ist es
kein Werbeknopf — es bleibt ein Fusszeilenlink, nur deutlicher.
==================================================================== */
.foot-grid a.foot-widerruf{color:var(--text);font-weight:600;margin-top:4px}
.foot-grid a.foot-widerruf:hover{color:var(--green-600)}
.wid-form{margin-top:28px}
.wid-form .field{margin-bottom:20px}
.wid-form textarea{width:100%;font:inherit;color:inherit;background:var(--surface);
border:1px solid var(--border);border-radius:11px;padding:11px 13px;resize:vertical}
.wid-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
/* Das Sternchen ist eine Angabe, keine Verzierung — es muss auch bei
schwacher Farbwahrnehmung als Pflichthinweis lesbar bleiben, deshalb
Fettung zusätzlich zur Farbe. */
.pflicht{color:#b4451c;font-weight:700}
[data-theme="dark"] .pflicht{color:#f0a882}
/* Der Wortlaut der Erklärung, den der Kunde absendet. Hervorgehoben, weil
er der eigentliche Inhalt der Willenserklärung ist — und nicht als
Kleingedrucktes unter dem Knopf. */
.wid-erklaerung{background:var(--surface-2);border:1px solid var(--border);
border-radius:12px;padding:16px 18px;margin:4px 0 24px}
.wid-erklaerung-titel{font-family:'Sora';font-size:13.5px;font-weight:700;
margin-bottom:6px}
.wid-erklaerung-text{font-size:15px;line-height:1.6}
.wid-absenden{width:100%}
.wid-fuss{margin-top:28px;color:var(--muted);font-size:14px;line-height:1.6}
@media (min-width:640px){ .wid-absenden{width:auto;min-width:260px} }
/* Der hervorgehobene Zugang zur Widerrufsfunktion im Bestellverlauf.
Zurückhaltend, aber auffindbar: Das Gesetz verlangt „hervorgehoben",
nicht „aufdringlich" -- und niemand soll den Eindruck bekommen, das
Widerrufen sei der vorgesehene nächste Schritt. */
.kto-widerruf{margin-top:34px;padding:20px 22px;background:var(--surface-2);
border:1px solid var(--border);border-radius:14px;max-width:620px}
.kto-widerruf-titel{font-family:'Sora';font-size:15px;font-weight:700;
margin-bottom:6px}
.kto-widerruf-text{font-size:14.5px;line-height:1.6;color:var(--muted);
margin-bottom:16px}
/* ====================================================================
ADMINLISTE DER WIDERRUFE
Sechs Spalten, feste Breiten, und die Liste scrollt in ihrem eigenen
Kasten (.adm-scroll) — es wird KEINE Spalte ausgeblendet und die Seite
scrollt nie waagerecht. Der Erklärungstext steht bewusst UNTER der
Zeile: Fliesstext in einer Rasterspalte zerbricht die Ausrichtung aller
anderen Zeilen.
==================================================================== */
.adm-list-widerrufe{min-width:960px}
.adm-list-widerrufe .adm-row{grid-template-columns:170px 1fr 130px 170px 110px 210px}
.wdr-zeit{font-variant-numeric:tabular-nums;font-size:13.5px}
.wdr-zeit span{display:block;color:var(--muted);font-size:12.5px}
.wdr-wer b{display:block;font-weight:700;overflow-wrap:anywhere}
.wdr-wer span{display:block;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.wdr-tun{display:flex;gap:6px;flex-wrap:wrap}
.wdr-erledigt{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
/* „unbekannt" und „nein" sind Befunde, keine Werte — sie müssen sich vom
gewöhnlichen Inhalt abheben, ohne wie ein Systemfehler zu wirken. */
.wdr-warn{color:#8d5a00;font-size:12.5px;font-weight:600}
[data-theme="dark"] .wdr-warn{color:#f0c778}
.wdr-detail{padding:0 16px 14px;border-bottom:1px solid var(--border);
background:var(--surface-2)}
.wdr-erklaerung{font-size:14px;line-height:1.55;padding-left:12px;
border-left:3px solid var(--border)}
.wdr-nachricht,.wdr-vermerk{font-size:13.5px;line-height:1.55;margin-top:8px;
color:var(--muted)}
/* Ruhe ist ein eigener Zustand und darf NICHT wie ein Ladefehler aussehen:
„alles bearbeitet" ist eine gute Nachricht. */
.adm-ruhig{color:var(--muted);font-size:14.5px;padding:10px 0 4px}
/* Das amtliche Muster-Widerrufsformular (Anlage 2 EGBGB). Es wird als
Formularvorlage abgedruckt, nicht als Fliesstext — deshalb Zeilen mit
Abstand darunter, damit man es ausdrucken und von Hand ausfüllen kann. */
.wid-muster{border:1px solid var(--border);border-radius:14px;
padding:20px 22px;margin:6px 0 26px;background:var(--surface-2)}
.wid-muster-zeile{font-size:14.5px;line-height:1.6;padding-bottom:14px;
margin-bottom:14px;border-bottom:1px dashed var(--border)}
.wid-muster-fuss{font-size:13px;color:var(--muted)}
/* Behälter für Turnstile im Newsletter-Formular. Solange er leer ist,
nimmt er KEINEN Platz — das Widget erscheint nur, wenn Turnstile eine
Interaktion für nötig hält, und ein reservierter Leerraum in der
Fusszeile jeder Seite wäre eine Lücke ohne Grund. */
.nl-turnstile:not(:empty){margin-top:10px}
/* ------------------------------------------------- Kontoloeschung
Der einzige Knopf der Anwendung, der etwas Unwiederbringliches tut --
und er sieht auch so aus. Bewusst NICHT die Akzentfarbe: Gruen heisst
hier ueberall "weiter", und ein gruener Knopf fuer "endgueltig loeschen"
waere eine Einladung zum Verklicken. Die Farbwerte sind dieselben wie
bei .msg-err; eine zweite Rotdefinition waere eine zweite Pflegestelle. */
.btn-danger{background:#8d201a;color:#fff}
.btn-danger:hover{background:#6f1914;transform:translateY(-1px)}
[data-theme="dark"] .btn-danger{background:#a8332c;color:#fff}
[data-theme="dark"] .btn-danger:hover{background:#8d201a}
/* Die abzuschreibende Adresse. Monospace, damit ein Punkt von einem Komma
zu unterscheiden ist -- der Kunde muss sie zeichengenau treffen. */
.del-adresse{font-family:ui-monospace,Consolas,monospace;font-weight:700;
overflow-wrap:anywhere}
/* Das Formular ist breiter als das Anmeldeformular (.form hat 440px), weil
der Erklaertext darin steht und nicht nur zwei Felder. */
.del-form{max-width:none;margin-top:26px;padding-top:22px;
border-top:1px solid var(--border)}
.del-form .btn{width:auto}
.del-abbruch{margin-left:10px}
/* Gleiche Bauform wie .cko-wahl in der Kasse: Haekchen oben, Text daneben,
die ganze Zeile klickbar. */
.del-wahl{display:flex;align-items:flex-start;gap:10px;margin:14px 0 18px;
font-size:15px;line-height:1.5;cursor:pointer}
.del-wahl input{width:auto;margin-top:3px;flex:0 0 auto}
/* Der Bericht nach der Loeschung. Kein Aufzaehlungspunkt, sondern ein
Haken -- es ist eine Liste von Dingen, die getan wurden. */
.del-bericht{list-style:none;padding:0;margin:14px 0}
.del-bericht li{padding:5px 0 5px 24px;position:relative;font-size:15px;
line-height:1.55}
.del-bericht li::before{content:"\2713";position:absolute;left:0;
color:var(--accent);font-weight:700}
/* Der Name eines geloeschten Kontos in der Pruefung. Bewusst NICHT rot und
nicht wie eine Warnung: Das Dokument ist echt, nur der Name ist auf
Verlangen des Inhabers entfernt. Eine Warnfarbe hier waere eine
Unterstellung gegen jemanden, der sein Recht genutzt hat. */
.pruef-entnamt{display:block;font-style:italic;color:var(--muted)}
.pruef-entnamt-grund{display:block;font-size:13px;color:var(--muted);
margin-top:4px;line-height:1.5}
/* --------------------------------------------------- Zweiter Faktor
Der Schluessel und der QR-Code. Monospace und weite Laufweite, weil man
den Schluessel notfalls abtippt -- da muss eine 0 von einem O zu
unterscheiden sein. Der QR-Code bekommt einen weissen Grund, AUCH im
Dunkelmodus: Ein invertierter QR-Code ist von vielen Kameras nicht
lesbar. */
.mfa-form{max-width:none}
.mfa-form .btn{width:auto}
.mfa-h3{font-size:16px;margin:22px 0 8px}
.mfa-qr{background:#fff;padding:14px;border-radius:12px;display:inline-block;
border:1px solid var(--border);margin-bottom:14px;
color:#33414b;font-size:13px;max-width:260px}
.mfa-qr-bild{display:block;width:200px;height:200px;image-rendering:pixelated}
.mfa-geheimnis{font-family:ui-monospace,Consolas,monospace;font-size:15px;
letter-spacing:.12em;word-break:break-all;background:var(--surface-2);
padding:10px 12px;border-radius:8px;margin-bottom:8px}
.adm-list-mfa .adm-row{grid-template-columns:1fr 130px 120px 120px}
/* Hinweis des Waechters der Sicherheitspruefung. Leer nimmt er KEINEN
Platz -- er erscheint nur, wenn die Pruefung ungewoehnlich lange
braucht, und ein reservierter Leerraum unter jedem Anmeldeformular waere
eine Luecke ohne Grund. */
.captcha-hinweis{margin:0 0 12px;font-size:13.5px;line-height:1.5;
color:var(--muted)}
.captcha-hinweis:empty{display:none;margin:0}
/* ============================================ Bauzaun (Baustellenseite) ==
Die Seite, die ein Fremder sieht, solange BAUSTELLE_SCHLUESSEL gesetzt
ist (functions/lib/bauzaun.js). Eigene Klassen und keine Wiederverwendung
der Kopfzeilen-Klassen: Die Seite hat keine Navigation, keinen
Modus-Umschalter und kein Skript -- sie soll auch dann noch richtig
aussehen, wenn am Rest der Seite gerade gebaut wird.
ERSTER ENTWURF WAR SCHWER LESBAR, und zwar aus einem Grund, den man
nicht an den Kontrastzahlen sieht: Der ganze Fliesstext stand auf
--muted -- dem Token fuer NEBENSAECHLICHEN Text -- auf der einen Seite,
die aus nichts als diesem Text besteht. Formal waren 7,68:1 in Ordnung
(WCAG AAA verlangt 7:1); gelesen hat es sich wie eine ausgegraute
Fussnote. Hauptinhalt gehoert auf --ink. */
.bz-body{
min-height:100vh;display:flex;align-items:center;justify-content:center;
padding:40px 20px;background:var(--bg);color:var(--ink);
/* Eigene Linkfarbe, weil --accent-2 (#15b873) auf Weiss nur 2,58:1
ergibt -- gemessen, nicht geschaetzt. WCAG verlangt 4,5:1, und auf
dieser Seite sind die Links die EINZIGEN anklickbaren Dinge; sie
duerfen nicht das Schlechtestlesbare daran sein. --green-700 kommt
auf 7,5:1. Im Rest der Website tritt das nicht auf: Dort steht
--accent-2 nur als Flaeche mit weisser Schrift darauf. */
--bz-link:#15573f;
}
.bz-karte{
max-width:580px;width:100%;text-align:center;
background:var(--surface);border:1px solid var(--border);
border-radius:20px;padding:52px 40px;box-shadow:var(--shadow);
}
/* Das Firmenzeichen traegt eine eigene dunkelgruene Flaeche und ist
quadratisch (viewBox 380x380). Ohne die Eckenrundung sieht es auf
hellem Grund wie ein verirrter Klotz aus. */
.bz-logo{display:block;margin:0 auto 30px;width:48px;height:48px;border-radius:11px}
.bz-titel{
font-family:Sora,system-ui,sans-serif;font-weight:700;
font-size:clamp(26px,5vw,34px);line-height:1.2;letter-spacing:-.01em;
margin:0 0 18px;color:var(--ink);
}
.bz-text{margin:0 0 16px;font-size:17px;line-height:1.65;color:var(--ink)}
/* Nur DIESE Zeile ist wirklich nachrangig. */
.bz-leise{font-size:15.5px;color:var(--muted)}
/* Unterstrichen von Anfang an: Auf einer Seite ohne Navigation ist der
Unterstrich der einzige Hinweis darauf, was anklickbar ist. Der
Hoverzustand aendert die STAERKE, nicht die Farbe -- eine zweite Farbe
waere in einem der beiden Modi zu schwach. */
.bz-link{
color:var(--bz-link);text-decoration:underline;text-underline-offset:3px;
text-decoration-thickness:1px;
}
.bz-link:hover{text-decoration-thickness:2px}
.bz-fuss{
margin:34px 0 0;padding-top:22px;border-top:1px solid var(--border);
font-size:14.5px;color:var(--muted);
}
.bz-trenner{margin:0 10px;color:var(--border)}
/* Der Dunkelmodus der Website haengt an [data-theme="dark"], gesetzt von
js/shell.js aus localStorage. Diese Seite hat kein Skript. Sie folgt
deshalb dem System -- und zwar NUR sie: Ein Media Query weiter oben
wuerde auf allen anderen Seiten die ausdrueckliche Wahl des Besuchers
uebergehen. Die Werte sind dieselben wie in [data-theme="dark"]. */
@media (prefers-color-scheme: dark){
.bz-body{
--bg:#07120d; --surface:#0c1d14; --border:#1d3528;
--ink:#eaf3ee; --muted:#9bb1a6; --bz-link:#4fe3a1;
--shadow:0 1px 2px rgba(0,0,0,.4),0 22px 50px -20px rgba(0,0,0,.7);
}
}
/* --- Newsletter-Versand im Adminbereich -------------------------------
Spaltenbreiten an der LISTE, nicht an der Zeile -- dieselbe Regel wie
bei den uebrigen Adminlisten. Die letzte Spalte ist breit, weil dort
entweder ein Knopf ODER ein Satz steht, der erklaert, warum es keinen
gibt: Ein gesperrter Knopf ohne Grund sieht wie ein Defekt aus. */
.adm-list-nl{min-width:900px}
.adm-list-nl .adm-row{grid-template-columns:1fr 110px 130px 180px 340px}
.nl-titel b{display:block;line-height:1.35}
.nl-titel span{display:block;font-size:12px;color:var(--muted);
font-family:ui-monospace,Consolas,monospace}
.nl-datum{font-variant-numeric:tabular-nums}
.nl-stand{font-size:13.5px;line-height:1.4}
.nl-leer{color:var(--muted)}
.nl-warn-text{display:block;font-size:12px;color:#a35a00}
[data-theme="dark"] .nl-warn-text{color:#f0b968}
.nl-grund{display:block;font-size:12.5px;line-height:1.45;color:var(--muted)}
.nl-laeuft{font-size:13px;color:var(--accent-2);font-weight:600}
.nl-zahlen{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 18px;
padding:14px 18px;border:1px solid var(--border);border-radius:12px;
background:var(--surface-2);font-size:14px;color:var(--muted)}
.nl-zahlen b{color:var(--ink)}
/* --- Titelbild eines Blogbeitrags ------------------------------------
Die Vorschau ist absichtlich klein und mit Rahmen: Sie soll zeigen, DASS
ein Bild haengt und wie es beschnitten wirkt -- nicht das Bild feiern. */
.bb-zeile{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.bb-vorschau{display:block;max-width:320px;width:100%;height:auto;
margin:12px 0 0;border:1px solid var(--border);border-radius:10px}
.bb-fehlt{margin:12px 0 0;font-size:13px;color:var(--muted)}
.bb-hinweis{margin:12px 0 0;font-size:13px;line-height:1.5}
/* Titelbild im Blogbeitrag. object-fit deckt den Fall ab, dass jemand ein
Bild mit anderem Seitenverhaeltnis hochlaedt -- besser eingepasst als
verzerrt, und besser als ein Bild, das die Spalte sprengt. */
.blog-titelbild{display:block;width:100%;height:auto;max-height:420px;
object-fit:cover;border-radius:14px;margin:22px 0 28px;
background:var(--surface-2)}
/* ====================================================================
DATENAUSKUNFT NACH ART. 15 DSGVO
Die Auskunft ist ein Text zum LESEN, kein Datenraster: Der Kunde will
wissen, was wir ueber ihn wissen, nicht Spalten vergleichen. Deshalb
Beschriftung und Wert als Paare untereinander und nicht in einer
Tabelle -- eine Tabelle mit 40 Spalten (so viele hat `orders`) waere
auf einem Telefon unbenutzbar und muesste waagerecht scrollen.
Jede Kategorie ist zugeklappt. Aufgeklappt waeren es bei einem echten
Konto mehrere Tausend Zeilen, und die eine Kategorie, die den Kunden
interessiert, faende er nicht. Die Anzahl steht in der Zusammenfassung,
die ist also auch zugeklappt aussagekraeftig.
==================================================================== */
.aus-kopf{margin-bottom:26px}
.aus-tun{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
/* Der Kontoblock steht oben und ohne Klapperei: Das sind fuenf Angaben,
und sie beantworten die haeufigste Frage („welche Adresse habt ihr"). */
.aus-konto{padding:18px 20px;background:var(--surface-2);
border:1px solid var(--border);border-radius:14px;margin-bottom:22px}
.aus-konto-titel{font-family:'Sora';font-size:15px;font-weight:700;
margin-bottom:10px}
.aus-kat{border:1px solid var(--border);border-radius:12px;
margin-bottom:10px;background:var(--surface)}
.aus-kat > summary{cursor:pointer;padding:13px 16px;font-weight:700;
font-size:14.5px;display:flex;gap:10px;align-items:baseline;
flex-wrap:wrap;list-style:none}
.aus-kat > summary::-webkit-details-marker{display:none}
.aus-kat > summary::before{content:'\25B8';color:var(--muted);
font-weight:400;flex:none}
.aus-kat[open] > summary::before{content:'\25BE'}
.aus-kat-zahl{font-weight:400;color:var(--muted);font-size:13.5px;
font-variant-numeric:tabular-nums}
.aus-kat-rumpf{padding:0 16px 16px}
/* Zweck, Rechtsgrundlage und Aufbewahrung sind Pflichtangaben nach
Art. 15 Abs. 1 -- sie gehoeren zur Kategorie und nicht in eine Fussnote
am Seitenende, wo sie niemand dem Datensatz zuordnet. */
.aus-recht{font-size:13px;line-height:1.6;color:var(--muted);
border-left:3px solid var(--border);padding-left:12px;margin-bottom:16px}
.aus-recht b{color:var(--text);font-weight:600}
.aus-eintrag{padding:13px 0;border-top:1px solid var(--border)}
.aus-eintrag:first-child{border-top:none}
.aus-paar{display:grid;grid-template-columns:1fr;gap:1px;padding:3px 0}
@media (min-width:620px){
.aus-paar{grid-template-columns:230px 1fr;gap:12px}
}
.aus-feld{font-size:13px;color:var(--muted)}
.aus-wert{font-size:14px;line-height:1.55;overflow-wrap:anywhere;
white-space:pre-wrap}
/* „nicht gesetzt" ist ein eigener Zustand und darf nicht wie ein Wert
aussehen -- sonst liest jemand einen leeren Namen als leeren Namen
statt als „haben wir nicht". */
.aus-leer{color:var(--muted);font-style:italic}
.aus-datei{font-size:13.5px;color:var(--muted);line-height:1.6;
margin-top:26px}
/* ====================================================================
KONTAKT- UND FIRMENANFRAGE
Ein schmales Formular, kein Raster: Die Felder werden von oben nach
unten ausgefuellt, und eine zweite Spalte zwingt den Blick zum
Springen. Zwei Ausnahmen stehen nebeneinander, weil sie kurz sind und
zusammengehoeren (Telefon/Teilnehmer, Wunschtermin).
Die Turnstile-Flaeche hat KEINE feste Hoehe. Das Widget erscheint nur,
wenn Cloudflare eine Interaktion fuer noetig haelt ('interaction-only')
-- ein reservierter Kasten waere bei fast allen Besuchern ein leeres
Loch im Formular.
==================================================================== */
.anf-form{max-width:560px}
.anf-zwei{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:560px){
.anf-zwei{grid-template-columns:1fr 1fr;gap:16px}
}
.anf-turnstile:not(:empty){margin:4px 0 18px}
.anf-fuss{font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:14px}
/* Das Textfeld ist der Kern des Formulars und darf das zeigen. */
.anf-form textarea{min-height:150px;resize:vertical}
/* Der Soforthinweis zum gewaehlten Thema. Ruhig, nicht warnend: Er soll
helfen und nicht nach Fehler aussehen -- deshalb die Akzentflaeche und
kein Rot. Bei „Frage zu einem Kurs" und „Etwas anderes" erscheint er
gar nicht, und dann darf auch kein leerer Kasten stehenbleiben. */
.anf-hinweis{background:var(--accent-soft);border-radius:10px;
padding:13px 16px;font-size:14px;line-height:1.6;margin:0 0 18px}
/* ====================================================================
HAEUFIGE FRAGEN
statt eigener Klapp-Logik: Der Browser kann das, es
funktioniert ohne JavaScript, und die Suche im Browser (Strg+F) findet
auch zugeklappten Text -- bei einer selbstgebauten Loesung mit
display:none nicht.
Die Antworten stehen im ausgelieferten HTML und werden NICHT
nachgeladen: Der halbe Zweck dieser Seite ist die Auffindbarkeit, und
Crawler fuehren kein JavaScript aus.
==================================================================== */
.faq-sprung{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0 0 34px}
.faq-sprung a{font-size:13.5px;padding:7px 13px;border-radius:999px;
background:var(--surface-2);border:1px solid var(--border);
color:var(--text);text-decoration:none}
.faq-sprung a:hover{background:var(--accent-soft);border-color:transparent}
/* scroll-margin, damit die Ueberschrift nach einem Sprung nicht unter der
Kopfzeile klebt. */
.faq-h2{font-size:19px;margin:38px 0 14px;scroll-margin-top:90px}
.faq-f{border-bottom:1px solid var(--border)}
.faq-f > summary{cursor:pointer;padding:15px 30px 15px 0;font-size:15.5px;
font-weight:600;position:relative;list-style:none}
.faq-f > summary::-webkit-details-marker{display:none}
.faq-f > summary::after{content:'+';position:absolute;right:6px;top:13px;
font-size:20px;font-weight:400;color:var(--muted);line-height:1}
.faq-f[open] > summary::after{content:'\2212'}
.faq-a{padding:0 30px 18px 0;font-size:14.5px;line-height:1.7;color:var(--muted)}
.faq-a p{margin:0 0 12px}
.faq-a p:last-child{margin-bottom:0}
.faq-a strong{color:var(--text)}
/* Der Verweis auf den verbindlichen Text. Kleiner, aber nicht versteckt:
Wo eine FAQ-Antwort eine Rechtsfolge zusammenfasst, muss der Leser
sehen, wo das Verbindliche steht. */
.faq-quelle{font-size:13px;color:var(--muted);opacity:.85}
.faq-schluss{margin-top:44px;padding:24px 26px;background:var(--surface-2);
border:1px solid var(--border);border-radius:14px}
.faq-schluss p{color:var(--muted);margin:0 0 16px;line-height:1.6}
/* Wasserzeichen ueber dem Player: die Adresse des Kaeufers.
pointer-events:none ist PFLICHT -- ein Wasserzeichen, das Klicks
schluckt, macht den Player unbedienbar, und das faellt erst dem Kunden
auf. user-select:none, damit es sich nicht versehentlich markieren
laesst.
Der Uebergang macht das Wandern zwischen den Ecken ruhig statt
springend; alle 30 Sekunden eine andere Ecke. Eine feste Ecke waere
weggeschnitten, bevor ein Mitschnitt geteilt wird. */
/* Profilseite. Zwei Spalten fuer PLZ und Ort, weil sie zusammengehoeren
und einzeln jeweils eine halbe Zeile verschwenden. Unter 560 px
untereinander -- eine 3 cm breite PLZ neben einem 3 cm breiten Ort ist
auf dem Telefon unbenutzbar. */
.prof-form{max-width:560px}
.prof-h2{margin:32px 0 14px}
.prof-zwei{display:grid;grid-template-columns:1fr 2fr;gap:0 16px}
.prof-tun{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}
@media (max-width:560px){ .prof-zwei{grid-template-columns:1fr} }
/* Das Merk-Haekchen in der Kasse. Etwas Abstand nach oben, damit es nicht
wie das letzte Anschriftsfeld aussieht -- es ist eine Entscheidung und
keine Angabe. */
.cko-merken{margin-top:18px}
.lern-wz{position:absolute;z-index:2;pointer-events:none;user-select:none;
font-size:12px;line-height:1;letter-spacing:.02em;
color:rgba(255,255,255,.42);text-shadow:0 1px 3px rgba(0,0,0,.55);
background:rgba(0,0,0,.18);padding:5px 9px;border-radius:6px;
transition:top .8s ease,bottom .8s ease,left .8s ease,right .8s ease}
.lern-wz.wz-ol{top:12px;left:12px;right:auto;bottom:auto}
.lern-wz.wz-or{top:12px;right:12px;left:auto;bottom:auto}
.lern-wz.wz-ur{bottom:12px;right:12px;left:auto;top:auto}
.lern-wz.wz-ul{bottom:12px;left:12px;right:auto;top:auto}
/* Auf schmalen Geräten kleiner -- sonst nimmt die Adresse ein Viertel
der Breite und stört mehr, als sie abschreckt. */
@media (max-width:560px){ .lern-wz{font-size:10px;padding:4px 7px} }