/* 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); } *{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} .logo .mark{width:46px;height:46px;border-radius:2px;background:var(--green);display:grid;place-items:center;color:#fff;font-family:Georgia,'Times New Roman',serif;font-weight:600;font-size:18px;letter-spacing:.08em;text-indent:.08em} .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} /* 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} .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} /* 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}