/* ============================================================ German4You – Design-System Frisch, freundlich, „Swiss-clean" mit verspielten Akzenten. ============================================================ */ :root{ /* Palette nach swiss-jobrollen-check.ch: Blau #269CD9 / Akzent #2EA3F2 / Dunkel #232434 */ --bg:#f5f7fa; --bg-soft:#eef2f7; --surface:#ffffff; --surface-2:#f5f7fa; --ink:#232434; --ink-soft:#6e7077; --line:#e6e9ef; --brand:#269cd9; --brand-600:#1c7cb0; --brand-050:#e8f4fb; --teal:#2ea3f2; --coral:#ff5d73; --amber:#ffb020; --gold:#ffce4d; --good:#1fbf7a; --bad:#f24463; --warn:#f0a020; --dark:#232434; --dark-2:#2c2d40; --grad: linear-gradient(135deg,#269cd9 0%,#2ea3f2 100%); --grad-warm: linear-gradient(135deg,#ff8a3d 0%,#ff5d73 100%); --grad-dark: linear-gradient(125deg,#232434 0%,#232434 52%,#1c7cb0 145%); --shadow-sm:0 4px 14px rgba(35,36,52,.07); --shadow:0 10px 30px rgba(35,36,52,.10); --shadow-lg:0 16px 40px rgba(35,36,52,.14); --r:16px; --r-lg:22px; --r-pill:999px; --maxw:1080px; /* Aliase: einzelne Komponenten nutzen --card/--muted – so folgen sie automatisch dem Theme (behebt Weiss-auf-Weiss im Dark Mode bei cz-*, tax-card, cmp-card, cert-card, faq-item) */ --card:var(--surface); --muted:var(--ink-soft); /* Theming: getönte/warnende Flächen als Variablen (Dark Mode überschreibt sie) */ --tint:linear-gradient(135deg,#eef3ff,#e8fbf8); --tint-border:#d6e4ff; --warm-bg:#fff8ec; --warm-border:#ffe4b0; --warm-ink:#8a6412; --danger-bg:#fff0f3; --danger-ink:#b81b3c; --topnav-bg:rgba(255,255,255,.85); } /* ---------- Dunkles Design (umschaltbar, [data-theme=dark] auf ) ---------- */ [data-theme="dark"]{ --bg:#161723; --bg-soft:#1b1c2b; --surface:#232434; --surface-2:#2c2d40; --ink:#eef1f7; --ink-soft:#9ba0b0; --line:#343650; --brand:#3fb1ec; --brand-600:#6fc7f2; --brand-050:#1e2b3d; --teal:#3fb1ec; --shadow-sm:0 2px 8px rgba(0,0,0,.35); --shadow:0 12px 30px rgba(0,0,0,.45); --shadow-lg:0 24px 60px rgba(0,0,0,.55); --tint:linear-gradient(135deg,#1a2440,#14283a); --tint-border:#2b3a63; --warm-bg:#2b2312; --warm-border:#4a3c1c; --warm-ink:#ffce7a; --danger-bg:#33141d; --danger-ink:#ff8ba3; --topnav-bg:rgba(14,19,34,.88); color-scheme:dark; } [data-theme="dark"] .hero::before{opacity:.3} [data-theme="dark"] .brand .logo{box-shadow:0 6px 16px rgba(0,0,0,.5)} .theme-toggle{flex:0 0 auto;width:38px;height:38px;padding:0;border:1px solid var(--line); background:var(--surface);border-radius:var(--r-pill);font-size:17px;line-height:1; display:inline-flex;align-items:center;justify-content:center} .theme-toggle:hover{background:var(--surface-2)} /* Flächen, die im hellen Design bewusst dunkel sind (Ink-Hintergrund): im Dark Mode fixieren */ [data-theme="dark"] .footer, [data-theme="dark"] .trustbar, [data-theme="dark"] .admin-side{background:#0a0f1c} [data-theme="dark"] .nav-links a.admin-link{background:#0a0f1c;color:#fff} [data-theme="dark"] .nav-links a.admin-link:hover{background:var(--brand)} *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:'Nunito',system-ui,Segoe UI,Roboto,sans-serif; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; line-height:1.55; } [dir="rtl"]{direction:rtl} a{color:var(--brand);text-decoration:none} button{font-family:inherit;cursor:pointer} img{max-width:100%} .hidden{display:none!important} .center{text-align:center} .muted{color:var(--ink-soft)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:8px;justify-content:center; border:0;border-radius:var(--r-pill);padding:13px 22px;font-weight:800;font-size:15px; background:var(--surface-2);color:var(--ink);transition:transform .12s, box-shadow .12s, background .12s;white-space:nowrap} .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0) scale(.99)} .btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(38,156,217,.32)} .btn-primary:hover{box-shadow:0 12px 26px rgba(38,156,217,.42)} .btn-warm{background:var(--grad-warm);color:#fff;box-shadow:0 8px 20px rgba(255,93,115,.32)} .btn-ghost{background:transparent;border:2px solid var(--line);color:var(--ink)} .btn-ghost:hover{border-color:var(--brand);color:var(--brand)} .btn-lg{padding:16px 28px;font-size:17px} .btn-block{width:100%} .btn:disabled{opacity:.55;cursor:default;transform:none} /* ---------- Top navigation ---------- */ .topnav{position:sticky;top:0;z-index:50;background:var(--topnav-bg); backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .topnav .row{display:flex;align-items:center;gap:16px;height:64px} .brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:20px;color:var(--ink)} .brand .logo{width:38px;height:38px;border-radius:11px;display:grid;place-items:center; background:var(--grad);color:#fff;font-size:20px;box-shadow:0 6px 16px rgba(38,156,217,.35)} .brand small{font-weight:700;color:var(--ink-soft);font-size:12px} .nav-spacer{flex:1} .nav-links{display:flex;align-items:center;gap:8px} .nav-links a{color:var(--ink-soft);font-weight:700;padding:8px 12px;border-radius:10px} .nav-links a:hover{color:var(--ink);background:var(--surface-2)} /* Button im Nav (z. B. „Einstufungstest") darf NICHT von .nav-links a übersteuert werden: weisser, gut lesbarer Text auf dem Farbverlauf – auch bei Hover/Visited. */ .nav-links a.btn-primary,.nav-links a.btn-primary:visited{ color:#fff;-webkit-text-fill-color:#fff;padding:11px 20px;letter-spacing:.01em; box-shadow:0 6px 16px rgba(38,156,217,.30)} .nav-links a.btn-primary:hover{ color:#fff;-webkit-text-fill-color:#fff;background:var(--grad); box-shadow:0 10px 22px rgba(38,156,217,.42);transform:translateY(-1px)} .lang-switch{display:flex;gap:4px;background:var(--surface-2);border-radius:var(--r-pill);padding:4px} .lang-switch a{padding:5px 11px;border-radius:var(--r-pill);font-size:13px;font-weight:800;color:var(--ink-soft)} .lang-switch a.on{background:var(--surface);color:var(--brand);box-shadow:var(--shadow-sm)} /* Hamburger-Umschalter (nur mobil sichtbar, siehe Responsive) */ .brand{min-width:0} .brand-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nav-toggle{display:none;flex:0 0 auto;width:42px;height:42px;padding:0; border:1px solid var(--line);background:var(--surface);border-radius:12px; align-items:center;justify-content:center;color:var(--ink)} .nav-toggle:hover{background:var(--surface-2)} .nav-toggle .nt-bars,.nav-toggle .nt-bars::before,.nav-toggle .nt-bars::after{ display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s} .nav-toggle .nt-bars{position:relative} .nav-toggle .nt-bars::before,.nav-toggle .nt-bars::after{content:"";position:absolute;left:0} .nav-toggle .nt-bars::before{top:-6px} .nav-toggle .nt-bars::after{top:6px} .topnav.open .nav-toggle .nt-bars{background:transparent} .topnav.open .nav-toggle .nt-bars::before{top:0;transform:rotate(45deg)} .topnav.open .nav-toggle .nt-bars::after{top:0;transform:rotate(-45deg)} /* ---------- Hero / Landing ---------- */ .hero{position:relative;overflow:hidden;padding:64px 0 40px} .hero::before{content:"";position:absolute;inset:0;background: radial-gradient(600px 300px at 85% -5%, rgba(46,163,242,.16), transparent 60%), radial-gradient(700px 340px at 5% 10%, rgba(38,156,217,.14), transparent 55%);pointer-events:none} .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;position:relative} .badge{display:inline-flex;align-items:center;gap:8px;background:var(--brand-050);color:var(--brand-600); font-weight:800;font-size:13px;padding:7px 14px;border-radius:var(--r-pill);margin-bottom:16px} .hero h1{font-size:clamp(30px,4.2vw,50px);line-height:1.08;font-weight:900;margin:0 0 14px;letter-spacing:-.5px} .hero h1 .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .hero p.lead{font-size:19px;color:var(--ink-soft);margin:0 0 24px;max-width:36ch} .hero-cta{display:flex;gap:12px;flex-wrap:wrap} .hero-note{margin-top:14px;font-size:13px;color:var(--ink-soft)} .hero-art{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow-lg);padding:22px} .levels-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px} .level-chip{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:10px 14px; font-weight:900;color:var(--brand-600);min-width:64px;text-align:center} .level-chip small{display:block;font-weight:700;color:var(--ink-soft);font-size:11px} .features{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:40px 0} .feature{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-sm)} .feature .ic{font-size:28px} .feature h3{margin:10px 0 4px;font-size:16px} .feature p{margin:0;color:var(--ink-soft);font-size:13.5px} /* ---------- Generic card / section ---------- */ .section{padding:40px 0} .section h2{font-size:26px;font-weight:900;margin:0 0 6px} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow-sm)} .panel{max-width:520px;margin:40px auto;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);box-shadow:var(--shadow);padding:30px} .panel h1{font-size:24px;margin:0 0 6px} .stack{display:flex;flex-direction:column;gap:14px} .form-row{display:flex;flex-direction:column;gap:6px} .form-row label{font-size:13px;font-weight:800;color:var(--ink-soft)} .input{background:var(--surface-2);border:2px solid var(--line);border-radius:12px;padding:12px 14px; font-size:16px;color:var(--ink);outline:none;width:100%} .input:focus{border-color:var(--brand);background:var(--surface)} .checkbox{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-soft)} .checkbox input{margin-top:3px} .alert{border-radius:12px;padding:12px 15px;font-size:14px;font-weight:700} .alert-error{background:var(--danger-bg);border:1px solid var(--bad);color:var(--danger-ink)} .alert-ok{background:#eafaf2;border:1px solid var(--good);color:#0d8a53} .alert-info{background:var(--brand-050);border:1px solid var(--tint-border);color:var(--brand-600)} /* ---------- Disclaimer / legal ---------- */ .disclaimer{background:var(--warm-bg);border:1px solid var(--warm-border);color:var(--warm-ink);border-radius:12px; padding:12px 15px;font-size:13px;line-height:1.5} .disclaimer b{color:#6b4c08} .legal-note{font-size:12px;color:var(--ink-soft)} /* ---------- Progress / gamification ---------- */ .pbar{height:12px;background:var(--surface-2);border-radius:var(--r-pill);overflow:hidden;border:1px solid var(--line)} .pbar>span{display:block;height:100%;background:var(--grad);border-radius:var(--r-pill);transition:width .5s cubic-bezier(.2,.8,.2,1)} .chip-xp{background:linear-gradient(135deg,var(--gold),var(--amber));color:#5a3d00;font-weight:900; padding:6px 14px;border-radius:var(--r-pill);box-shadow:0 4px 12px rgba(255,176,32,.35)} .streak{background:var(--grad-warm);color:#fff;font-weight:900;padding:6px 14px;border-radius:var(--r-pill)} .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px} .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;text-align:center;box-shadow:var(--shadow-sm)} .stat .big{font-size:30px;font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .stat .lbl{font-size:12.5px;color:var(--ink-soft);font-weight:700} /* About-Fakten: gleich breite Karten, Zahlen brechen statt eine Spalte zu sprengen */ .ab-stats{margin:0 0 4px} .ab-stats .stat{display:flex;flex-direction:column;justify-content:center;gap:4px} .ab-stats .big{font-size:18px;line-height:1.25;overflow-wrap:break-word;hyphens:none} /* ---------- Level / course map ---------- */ .course-map{display:flex;flex-direction:column;gap:18px;position:relative;padding:10px 0} .lesson-node{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .12s;cursor:pointer} .lesson-node:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .lesson-node .orb{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:26px; background:var(--surface-2);border:2px solid var(--line);flex-shrink:0} .lesson-node.done .orb{background:var(--grad);color:#fff;border-color:transparent} .lesson-node.active .orb{border-color:var(--brand);box-shadow:0 0 0 5px var(--brand-050)} .lesson-node.locked{opacity:.6} .lesson-node .meta{flex:1;min-width:0} .lesson-node .meta h3{margin:0 0 3px;font-size:16px} .lesson-node .meta p{margin:0;font-size:13px;color:var(--ink-soft)} .lesson-node .score{font-weight:900;color:var(--good)} /* ---------- Exercise player ---------- */ .player{max-width:640px;margin:0 auto} .player-top{display:flex;align-items:center;gap:12px;margin-bottom:16px} .player-top .pbar{flex:1} .q-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow);padding:26px;animation:pop .25s} .q-kicker{font-size:12px;font-weight:900;color:var(--brand-600);text-transform:uppercase;letter-spacing:.5px} .q-text{font-size:22px;font-weight:800;line-height:1.4;margin:8px 0 20px} .q-text .gap{display:inline-block;min-width:70px;border-bottom:3px dashed var(--brand);color:var(--brand);text-align:center} .opts{display:grid;gap:10px} .opt{background:var(--surface-2);border:2px solid var(--line);border-radius:14px;padding:14px 18px; font-size:16px;font-weight:700;text-align:left;transition:.12s} .opt:hover:not(:disabled){border-color:var(--brand);transform:translateX(3px)} .opt.correct{border-color:var(--good);background:#eafaf2;color:#0d8a53} .opt.wrong{border-color:var(--bad);background:var(--danger-bg);color:var(--danger-ink)} .opt:disabled{cursor:default} /* order (tokens) */ .token-tray,.token-bank{display:flex;flex-wrap:wrap;gap:8px;min-height:52px;padding:10px; background:var(--surface-2);border:2px dashed var(--line);border-radius:14px;margin-bottom:10px} .token-tray{border-style:solid} .token{background:var(--surface);border:2px solid var(--line);border-radius:10px;padding:9px 14px;font-weight:800;font-size:15px} .token:hover{border-color:var(--brand)} /* match */ .match-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .match-col{display:flex;flex-direction:column;gap:8px} .match-item{background:var(--surface-2);border:2px solid var(--line);border-radius:12px;padding:12px 14px;font-weight:700;text-align:center} .match-item.sel{border-color:var(--brand);background:var(--brand-050)} .match-item.matched{border-color:var(--good);background:#eafaf2;color:#0d8a53;cursor:default} /* text input */ .answer-input{display:flex;gap:10px;flex-wrap:wrap} .answer-input .input{flex:1;min-width:200px;font-weight:700} .feedback{margin-top:18px;border-radius:14px;padding:16px 18px;animation:pop .25s} .feedback.ok{background:#eafaf2;border:1px solid var(--good)} .feedback.no{background:var(--danger-bg);border:1px solid var(--bad)} .feedback .fh{font-weight:900;font-size:16px;margin-bottom:6px;display:flex;gap:8px;align-items:center} .feedback .sol{color:#0d8a53;font-weight:800} .feedback .exp{color:var(--ink-soft);margin-top:6px;font-size:14px} .q-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px} /* ---------- Upsell / token cards ---------- */ .upsell{background:var(--tint);border:1px solid var(--tint-border);border-radius:var(--r-lg); padding:20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:space-between} .upsell .txt b{font-size:17px} .upsell .txt p{margin:2px 0 0;color:var(--ink-soft);font-size:14px} .pack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px} .pack{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:20px;text-align:center;box-shadow:var(--shadow-sm)} .pack.popular{border-color:var(--brand);position:relative} .pack.popular::after{content:"Beliebt";position:absolute;top:-11px;left:50%;transform:translateX(-50%); background:var(--grad);color:#fff;font-size:11px;font-weight:900;padding:4px 12px;border-radius:var(--r-pill)} .pack .price{font-size:32px;font-weight:900} .pack .cr{color:var(--brand-600);font-weight:800;margin:4px 0 14px} /* ---------- Toasts / confetti ---------- */ #toasts{position:fixed;top:76px;right:16px;z-index:100;display:flex;flex-direction:column;gap:10px} .toast{background:var(--surface);border:1px solid var(--gold);border-radius:14px;padding:12px 16px;box-shadow:var(--shadow); display:flex;gap:12px;align-items:center;animation:slidein .3s;min-width:220px} .toast .ti{font-size:24px} .toast .tt{font-weight:900;font-size:14px} .toast .td{font-size:12px;color:var(--ink-soft)} #confetti{position:fixed;inset:0;pointer-events:none;z-index:90;display:none} /* ---------- Footer ---------- */ .footer{margin-top:50px;background:var(--ink);color:#c7d0ea;padding:34px 0} .footer .row{display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between} .footer a{color:#dfe6fb} .footer .legal{font-size:12px;color:#8fa0c8;max-width:60ch;line-height:1.6} .footer .links{display:flex;gap:18px;flex-wrap:wrap;font-weight:700} @keyframes pop{from{transform:scale(.97);opacity:0}to{transform:scale(1);opacity:1}} @keyframes slidein{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}} @keyframes floatUp{to{transform:translateY(-42px);opacity:0}} .xp-pop{position:fixed;font-weight:900;color:var(--amber);font-size:20px;pointer-events:none;z-index:95;animation:floatUp 1s forwards} /* ---------- Responsive ---------- */ @media (max-width:860px){ .hero-grid{grid-template-columns:1fr} .features{grid-template-columns:repeat(2,1fr)} /* Hamburger-Menü: Nav-Links werden zu einem aufklappbaren Panel */ .topnav .row{gap:10px} .nav-toggle{display:inline-flex} .nav-links{ position:absolute; top:calc(100% + 6px); right:12px; left:12px; flex-direction:column; align-items:stretch; gap:2px; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); padding:8px; max-height:calc(100vh - 90px); overflow-y:auto; opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .18s, transform .18s; } .topnav.open .nav-links{opacity:1; transform:none; pointer-events:auto} .nav-links .hide-sm{display:block} /* im Menü sichtbar */ .nav-links a{padding:13px 14px; border-radius:12px; font-size:16px} .nav-links a.btn-primary,.nav-links a.btn-primary:visited{margin-top:6px; text-align:center; padding:13px 14px} /* Breite Tabellen horizontal scrollbar machen (kein Seiten-Overflow) */ .adm-table, .cmp-table{display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch} } @media (max-width:560px){ .features{grid-template-columns:1fr} .q-text{font-size:19px} .topnav .row{gap:8px} .brand small{display:none} .balance-chip .hide-sm{display:none} /* „Credits"-Label sparen */ .balance-chip{padding:7px 10px} } @media (max-width:400px){ .brand-txt{display:none} /* nur Logo, mehr Platz */ } /* ============================================================ Token-Kontostand, Magisches Üben, Coach, Modal ============================================================ */ .balance-chip{display:inline-flex;align-items:center;gap:6px;background:var(--tint); border:1px solid var(--tint-border);border-radius:var(--r-pill);padding:6px 8px 6px 14px;font-weight:800;color:var(--brand-600);font-size:14px} .balance-chip .buy-plus{width:24px;height:24px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:900} .balance-chip.low{border-color:var(--coral);background:var(--danger-bg);color:var(--danger-ink)} .balance-chip.low .buy-plus{background:var(--grad-warm)} /* Magische CTA-Karten */ .magic-cta{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0} .magic-card{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:22px;color:#fff; background:linear-gradient(135deg,#3b3fd6,#6a5cff 55%,#2ea3f2);box-shadow:var(--shadow);transition:transform .14s, box-shadow .14s;display:block} .magic-card.coach{background:linear-gradient(135deg,#7b2ff7,#ff5d73)} .magic-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)} .magic-card::after{content:"✨";position:absolute;right:-6px;top:-10px;font-size:80px;opacity:.18} .magic-card .mc-ic{font-size:34px} .magic-card h3{margin:8px 0 4px;font-size:20px} .magic-card p{margin:0;opacity:.92;font-size:14px} .magic-card .mc-cost{display:inline-block;margin-top:12px;background:rgba(255,255,255,.2);border-radius:var(--r-pill);padding:5px 12px;font-size:12.5px;font-weight:800} /* Fokus-Banner + magische Aufgabenkarte */ .focus-banner{background:var(--surface);border:1px dashed var(--brand);border-radius:var(--r);padding:12px 16px;margin-bottom:14px;font-size:14px} .focus-chip{display:inline-block;background:var(--brand-050);color:var(--brand-600);border-radius:var(--r-pill);padding:4px 12px;margin:2px 4px 0 0;font-weight:800;font-size:12.5px} .q-card.magic{background:linear-gradient(180deg,var(--surface),var(--surface-2));border-color:var(--tint-border);position:relative} .q-card.magic::before{content:"";position:absolute;inset:0;border-radius:var(--r-lg);padding:1px;background:linear-gradient(135deg,rgba(38,156,217,.5),rgba(46,163,242,.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.5} .hint-btn{margin-top:16px;background:var(--warm-bg);border:2px solid var(--warm-border);color:var(--warm-ink);border-radius:var(--r-pill);padding:9px 16px;font-weight:800;font-size:14px} .hint-btn:hover:not(:disabled){border-color:var(--amber)} .hint-btn .cost,.btn .cost{opacity:.75;font-weight:700;font-size:12px;margin-left:4px} .hintbox{margin-top:12px;background:var(--warm-bg);border:1px solid var(--warm-border);border-radius:12px;padding:12px 15px;font-size:14.5px;line-height:1.5;animation:pop .25s} .hintbox.coach{background:#f1eefe;border-color:#dcd2fb;color:#4b3b8f} .mastery-row{display:flex;align-items:center;gap:12px;margin:8px 0;font-size:14px;font-weight:700} .mastery-row .pbar{height:10px} /* Coach Nova Chat */ .coach-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:14px} .coach-log{display:flex;flex-direction:column;gap:10px;max-height:56vh;overflow-y:auto;padding:6px} .bubble{max-width:82%;padding:11px 15px;border-radius:16px;font-size:15px;line-height:1.5;animation:pop .2s} .bubble.coach{align-self:flex-start;background:#f1eefe;color:#3a2f6b;border-bottom-left-radius:5px} .bubble.me{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:5px} .coach-input{display:flex;gap:8px;margin-top:12px} .coach-input .input{flex:1} /* Modal */ .modal-overlay{position:fixed;inset:0;background:rgba(20,26,50,.5);backdrop-filter:blur(3px);z-index:200;display:grid;place-items:center;padding:20px;animation:pop .15s} .modal-box{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:26px;max-width:440px;width:100%} .modal-box h3{margin:0 0 8px} @media (max-width:640px){ .magic-cta{grid-template-columns:1fr} .bubble{max-width:90%} } /* Dynamisches „Beschwören" + Combo + Gratis-Badge */ .combo{background:var(--grad-warm);color:#fff;font-weight:900;padding:6px 12px;border-radius:var(--r-pill);animation:pop .3s;white-space:nowrap} .conjure-btn{width:100%;margin-bottom:14px;color:#fff;border:0;border-radius:var(--r-pill);padding:13px;font-weight:900;font-size:15px; background:linear-gradient(135deg,#7b2ff7,#269cd9);box-shadow:0 8px 22px rgba(123,47,247,.35);position:relative;overflow:hidden;display:flex;gap:8px;align-items:center;justify-content:center} .conjure-btn .cost{opacity:.85;font-weight:700;font-size:12px} .conjure-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-100%);animation:shimmer 3.2s infinite} .conjure-btn:hover{transform:translateY(-1px)} .conjure-btn.casting{animation:pulse .7s infinite} .conjure-btn:disabled{opacity:.7} @keyframes shimmer{to{transform:translateX(100%)}} @keyframes pulse{50%{box-shadow:0 8px 36px rgba(123,47,247,.75)}} .free-badge{display:inline-block;background:var(--good);color:#fff;font-size:11px;font-weight:900;padding:2px 9px;border-radius:var(--r-pill);vertical-align:middle;margin-left:6px} .q-card.magic{box-shadow:0 18px 50px rgba(79,70,229,.16)} .compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0} .compare>div{border-radius:14px;padding:16px;font-size:13.5px} .compare .free{background:var(--surface-2);border:1px solid var(--line)} .compare .paid{background:var(--tint);border:1px solid var(--tint-border)} .compare h4{margin:0 0 8px;font-size:14px} /* ============================================================ Professionelle Business-Landingpage ============================================================ */ .trustbar{background:var(--ink);color:#c7d0ea;font-size:13px;font-weight:700} .trustbar .wrap{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;padding:9px 20px} .trustbar b{color:#fff}.trustbar .dot{opacity:.4} /* Hero mit Partikel-Netzwerk (verbundene Punkte) auf dunklem Verlauf */ .hero2{position:relative;overflow:hidden;padding:84px 0 72px;background:var(--grad-dark)} #hero-net{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;opacity:.9} .hero2 .wrap{position:relative;z-index:1} .hero2-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center} .hero2-copy,.hero2-visual{min-width:0} /* verhindert Grid-Blowout durch lange Woerter (z. B. UK) */ .hero2 .eyebrow{color:#5fc0f5} .eyebrow{display:inline-block;font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-600);margin-bottom:14px} .h-title{font-size:clamp(28px,4.6vw,56px);line-height:1.08;font-weight:900;letter-spacing:-.01em;margin:0 0 18px;text-transform:uppercase;color:#fff;overflow-wrap:break-word;hyphens:auto} .h-sub{font-size:19px;line-height:1.6;color:rgba(255,255,255,.82);margin:0 0 26px;max-width:42ch} .cta-row{display:flex;gap:12px;flex-wrap:wrap} .hero2 .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.04)} .hero2 .btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.10)} .trust-chips{display:flex;gap:16px;flex-wrap:wrap;margin-top:20px;color:rgba(255,255,255,.75);font-weight:700;font-size:14px} .micro-legal{margin-top:16px;font-size:12.5px;color:rgba(255,255,255,.6)} /* Produkt-Vorschau (Mock) */ .hero2-visual{position:relative} .app-preview{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden;transform:rotate(.8deg)} .ap-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--surface-2);border-bottom:1px solid var(--line)} .ap-dot{width:10px;height:10px;border-radius:50%;background:#d7deee} .ap-url{margin-left:8px;font-size:12px;color:var(--ink-soft);font-weight:700} .ap-balance{margin-left:auto;background:var(--tint);border:1px solid var(--tint-border);color:var(--brand-600);font-weight:900;font-size:12px;padding:4px 10px;border-radius:var(--r-pill)} .ap-body{padding:22px} .ap-focus{font-size:13px;background:var(--brand-050);color:var(--brand-600);display:inline-block;padding:6px 12px;border-radius:var(--r-pill);font-weight:800;margin-bottom:14px} .ap-q{font-size:20px;font-weight:800;line-height:1.4;margin-bottom:16px} .ap-gap{color:var(--brand);border-bottom:3px dashed var(--brand);padding:0 14px} .ap-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px} .ap-opt{background:var(--surface-2);border:2px solid var(--line);border-radius:12px;padding:11px 14px;font-weight:700;font-size:15px} .ap-opt.correct{border-color:var(--good);background:#eafaf2;color:#0d8a53} .ap-conjure{margin-top:14px;text-align:center;color:#fff;font-weight:900;padding:12px;border-radius:var(--r-pill); background:linear-gradient(135deg,#7b2ff7,#269cd9);box-shadow:0 8px 22px rgba(123,47,247,.3)} .ap-badge{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px;font-weight:900;font-size:13px;box-shadow:var(--shadow)} .ap-badge.b1{top:-14px;left:-10px;color:#d9480f} .ap-badge.b2{bottom:16px;right:-14px;color:#7b2ff7} /* Kennzahlen */ .statbar{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:28px 20px;margin-top:-10px} .statbar div{text-align:center} .statbar b{display:block;font-size:22px;font-weight:900;color:var(--ink)} .statbar span{font-size:13px;color:var(--ink-soft);font-weight:600} /* Abschnitte */ .band{background:linear-gradient(180deg,var(--bg-soft),var(--bg))} .sec-head{text-align:center;max-width:640px;margin:0 auto 34px} .sec-head h2{font-size:clamp(26px,3.2vw,36px);font-weight:900;letter-spacing:-.02em;margin:6px 0 0} .sec-sub{color:var(--ink-soft);font-size:16px;margin-top:12px} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow-sm);position:relative} .step-n{width:40px;height:40px;border-radius:12px;background:var(--grad);color:#fff;font-weight:900;display:grid;place-items:center;font-size:18px;margin-bottom:14px} .step h3{margin:0 0 6px;font-size:18px}.step p{margin:0;color:var(--ink-soft);font-size:14.5px;line-height:1.6} .why{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .why-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .12s} .why-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .why-card .ic{font-size:30px}.why-card h3{margin:10px 0 6px;font-size:17px}.why-card p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.6} .levelband{display:grid;grid-template-columns:repeat(6,1fr);gap:14px} .lv-card{text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 10px;box-shadow:var(--shadow-sm)} .lv-k{font-size:26px;font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .lv-d{font-size:12.5px;color:var(--ink-soft);font-weight:700;margin-top:4px} .faq details{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px 18px;margin-bottom:10px;box-shadow:var(--shadow-sm)} .faq summary{cursor:pointer;font-weight:800;padding:14px 0;list-style:none;display:flex;justify-content:space-between;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-size:22px;color:var(--brand);font-weight:400} .faq details[open] summary::after{content:"–"} .faq p{margin:0 0 14px;color:var(--ink-soft);line-height:1.6;font-size:14.5px} .cta-band{background:linear-gradient(135deg,#1a2340,#2b356b);color:#fff;text-align:center;padding:56px 20px;margin-top:10px} .cta-band h2{font-size:clamp(24px,3.4vw,34px);font-weight:900;margin:0 0 8px} .cta-band p{color:#c7d0ea;margin:0 0 22px;font-size:16px} .cta-white{background:var(--surface);color:var(--brand-600);font-weight:900;box-shadow:0 10px 30px rgba(0,0,0,.25)} .cta-white:hover{transform:translateY(-2px)} @media (max-width:860px){ .hero2-grid{grid-template-columns:1fr;gap:34px} .statbar{grid-template-columns:repeat(2,1fr)} .steps,.why{grid-template-columns:1fr} .levelband{grid-template-columns:repeat(3,1fr)} } @media (max-width:520px){ .levelband{grid-template-columns:repeat(2,1fr)} .ap-badge{display:none} } /* Admin-Tabellen */ .adm-table{width:100%;border-collapse:collapse} .adm-table th{text-align:left;font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;border-bottom:1px solid var(--line)} .adm-table td{padding:10px;border-bottom:1px solid var(--line);font-weight:600;font-size:14px} /* Rechtstexte + Wert-Box */ .legal-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px} .legal-nav a{padding:9px 16px;border-radius:var(--r-pill);font-weight:800;font-size:14px;background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line)} .legal-nav a.on{background:var(--brand);color:#fff;border-color:var(--brand)} .legal-doc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 30px;box-shadow:var(--shadow-sm);line-height:1.7} .legal-doc h2{font-size:24px;margin:0 0 12px} .legal-doc h3{font-size:17px;margin:22px 0 8px} .legal-doc p{margin:0 0 12px} .legal-doc ul{margin:0 0 12px;padding-left:22px}.legal-doc li{margin:4px 0} .legal-doc a{color:var(--brand);word-break:break-word} .value-box{background:var(--tint);border:1px solid var(--tint-border);border-radius:var(--r-lg);padding:18px;margin:16px 0} .value-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-top:10px} .value-list span{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13.5px;font-weight:700;display:flex;justify-content:space-between;gap:8px} .value-list b{color:var(--brand-600)} /* ============================================================ Goethe-Prüfungstraining ============================================================ */ .exam-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; background:linear-gradient(135deg,#1a2340,#3b3fd6);color:#fff;border-radius:var(--r-lg);padding:18px 22px;margin:0 0 18px;box-shadow:var(--shadow);text-decoration:none} .exam-banner .mc-ic{font-size:26px} .exam-banner b{font-size:18px} .exam-banner p{margin:2px 0 0;opacity:.9;font-size:14px} .exam-banner .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff} .exam-skills{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .exam-skill{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:18px;box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;transition:transform .12s,box-shadow .12s} .exam-skill:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .exam-skill .es-ic{font-size:30px} .exam-skill h3{margin:0 0 4px;font-size:17px} .exam-skill p{margin:0;color:var(--ink-soft);font-size:13.5px;line-height:1.5} .q-lese-text{background:var(--surface-2);border-left:4px solid var(--brand);border-radius:12px;padding:16px 18px; line-height:1.7;margin:12px 0 16px;font-size:15.5px} .lese-q{margin:14px 0} .lese-q .lq{font-weight:800;font-size:16px;margin-bottom:10px} .audio-ctl,.rec-ctl{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0 4px} .btn.recording,.rec-ctl .recording{animation:pulse .8s infinite} .checklist{list-style:none;padding:0;margin:12px 0;display:grid;gap:8px} .checklist li{background:var(--surface-2);border-radius:10px;padding:9px 14px;font-size:13.5px;color:var(--ink-soft)} .write-area{width:100%;min-height:220px;background:var(--surface-2);border:2px solid var(--line);border-radius:14px; color:var(--ink);padding:14px 16px;font-size:16px;line-height:1.6;font-family:inherit;resize:vertical;outline:none} .write-area:focus{border-color:var(--brand);background:var(--surface)} .write-meta{display:flex;gap:16px;margin:10px 0;font-size:13px;font-weight:800;color:var(--ink-soft)} @media (max-width:560px){ .exam-skills{grid-template-columns:1fr} } /* Admin-Link im Header (immer sichtbar für Admins) */ .nav-links a.admin-link{background:var(--ink);color:#fff;border-radius:var(--r-pill);font-weight:800} .nav-links a.admin-link:hover{background:var(--brand);color:#fff} /* ============================================================ Adminpanel (Sidebar-Layout) ============================================================ */ .admin-body{background:var(--bg)} .admin-auth{min-height:100vh;display:grid;place-items:center;padding:20px} .admin-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh} .admin-side{background:var(--ink);color:#c7d0ea;padding:20px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh} .admin-logo{display:flex;gap:10px;align-items:center;color:#fff;font-weight:900;font-size:17px;text-decoration:none;margin-bottom:22px;padding:0 6px} .admin-logo small{color:#8fa0c8;font-weight:700;font-size:11px} .admin-nav{display:flex;flex-direction:column;gap:4px;flex:1} .admin-nav a{color:#c7d0ea;text-decoration:none;padding:11px 14px;border-radius:10px;font-weight:700;display:flex;gap:10px;align-items:center;font-size:14.5px} .admin-nav a:hover{background:rgba(255,255,255,.08);color:#fff} .admin-nav a.active{background:var(--brand);color:#fff} .admin-side-foot{display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(255,255,255,.12);padding-top:14px;margin-top:14px} .admin-back{color:#8fa0c8;font-size:13px;text-decoration:none;padding:0 6px} .admin-back:hover{color:#fff} .admin-logout{background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff;padding:9px;border-radius:10px;font-weight:800;cursor:pointer;width:100%} .admin-logout:hover{background:rgba(255,255,255,.1)} .admin-main{min-width:0} .admin-head{background:var(--surface);border-bottom:1px solid var(--line);padding:20px 28px;position:sticky;top:0;z-index:10} .admin-head h1{margin:0;font-size:22px} .admin-content{padding:26px 28px;max-width:940px} .pill{padding:3px 10px;border-radius:var(--r-pill);font-weight:800;font-size:12px} .pill.ok{background:#eafaf2;color:#0d8a53} .pill.warn{background:#fff4e0;color:#9a6a00} .set-row{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line);flex-wrap:wrap} .set-row:last-of-type{border-bottom:0} .set-info{flex:1;min-width:240px} .set-info b{font-size:15px} .set-info p{margin:4px 0 0;color:var(--ink-soft);font-size:13px;line-height:1.5} .set-info em{font-style:normal;font-weight:800;color:var(--ink)} .set-ctl{max-width:210px} @media (max-width:760px){ .admin-shell{grid-template-columns:1fr} .admin-side{position:static;height:auto} .admin-nav{flex-direction:row;flex-wrap:wrap} .admin-nav a{flex:1 1 auto} .set-row{flex-direction:column;align-items:stretch}.set-ctl{max-width:none} } /* ============================================================ Intelligentes Dashboard: Hero, Tagesziel-Ring, Fehlerkompass ============================================================ */ .hero-step{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap; background:linear-gradient(135deg,#1a2340,#3b3fd6 60%,#2ea3f2);color:#fff;border-radius:var(--r-lg);padding:24px 26px;box-shadow:var(--shadow);margin:14px 0} .hs-main{flex:1;min-width:240px} .hs-kicker{font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:.85} .hero-step h2{margin:6px 0;font-size:24px;color:#fff} .hs-sub{margin:0 0 6px;opacity:.92;font-size:15px} .hs-why{margin:0 0 14px;font-size:13.5px;background:rgba(255,255,255,.15);display:inline-block;padding:6px 12px;border-radius:var(--r-pill)} .hs-ring{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center} .goal-ring{width:96px;height:96px;border-radius:50%;background:conic-gradient(#fff calc(var(--p,0)*1%), rgba(255,255,255,.25) 0);display:grid;place-items:center} .goal-in{width:74px;height:74px;border-radius:50%;background:#26306b;display:grid;place-items:center;line-height:1;color:#fff} .goal-in b{font-size:24px;font-weight:900} .goal-in span{font-size:12px;opacity:.8} .hs-ringlbl{font-size:12.5px;opacity:.95;max-width:160px} .compass-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:12px} .compass-card{display:block;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px;text-decoration:none;color:inherit;transition:transform .12s,border-color .12s} .compass-card:hover{transform:translateY(-2px);border-color:var(--brand)} .cc-top{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:14px} .cc-top b{color:var(--bad)} .cc-cta{margin-top:10px;font-size:12.5px;font-weight:800;color:var(--brand-600)} .mini-bar{height:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden;margin-top:8px} .mini-bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--bad),var(--amber),var(--good));border-radius:var(--r-pill)} @media (max-width:560px){ .hero-step{flex-direction:column;align-items:stretch} .hs-ring{flex-direction:row;justify-content:center} } /* --- E-Mail-Bestätigung: Code-Eingabe --- */ .code-input{ text-align:center; font-size:32px; font-weight:900; letter-spacing:14px; padding:16px 10px; text-indent:14px; /* gleicht letter-spacing rechts aus */ font-variant-numeric:tabular-nums; } .code-input::placeholder{ letter-spacing:14px; color:var(--muted); opacity:.5; } /* ================= Fehlerkompass / Spaced Repetition ================= */ .due-banner{ display:flex;align-items:center;gap:16px; background:linear-gradient(120deg,#1b2a6b,#269cd9 60%,#2ea3f2); color:#fff;border-radius:18px;padding:16px 20px;margin:14px 0; text-decoration:none;box-shadow:0 12px 30px -14px rgba(38,156,217,.6); } .due-banner .due-ic{ font-size:34px;line-height:1 } .due-banner .due-txt{ flex:1;font-size:15px;line-height:1.35 } .due-banner .due-txt b{ font-size:17px } .compass-hero{ display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap; background:var(--card,#fff);border:1px solid var(--line,#e6eaf3);border-radius:20px; padding:22px 24px;margin:12px 0 18px; } .compass-due{ text-align:center;min-width:150px } .compass-due .cd-num{ font-size:52px;font-weight:900;line-height:1; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent } .compass-due .cd-lbl{ font-weight:800;color:var(--muted);margin-bottom:10px;font-size:13px } .tax-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px } .tax-card{ border:1px solid var(--line,#e6eaf3);border-radius:16px;padding:14px 16px;background:var(--card,#fff) } .tax-card .tx-top{ display:flex;align-items:center;gap:8px;margin-bottom:10px } .tax-card .tx-ic{ font-size:20px } .tax-card .tx-lbl{ font-weight:800;flex:1 } .tax-card .tx-due{ font-size:11px;font-weight:800;background:#ffe9c7;color:#8a5200;border-radius:999px;padding:2px 8px } .tax-card .tx-bar{ height:8px;border-radius:999px;background:#eef1f8;overflow:hidden;margin-bottom:8px } .tax-card .tx-bar span{ display:block;height:100%;border-radius:999px;background:var(--grad) } .tax-card .tx-meta{ display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted) } .tax-card .tx-meta a{ font-weight:800;text-decoration:none;color:var(--brand,#269cd9) } .tax-card.strong .tx-bar span{ background:linear-gradient(90deg,#1fbf7a,#2ea3f2) } .tax-card.mid .tx-bar span{ background:linear-gradient(90deg,#ffb020,#ffce4d) } .tax-card.weak .tx-bar span{ background:linear-gradient(90deg,#ff5d73,#ff8a5d) } .tax-card.new{ opacity:.75 } /* ================= Kaufseite: Wert & Vergleich ================= */ .buy-hero{ margin-bottom:18px } .buy-hero .bh-kicker{ font-weight:800;color:var(--brand,#269cd9);font-size:13px;letter-spacing:.02em } .buy-hero h1{ margin:.15em 0 .3em } .cmp-card{ border:1px solid var(--line,#e6eaf3);border-radius:20px;padding:18px 20px;margin:8px 0 18px; background:var(--surface) } .cmp-h{ font-size:19px;margin:0 0 12px } .cmp-table{ width:100%;border-collapse:collapse } .cmp-table th,.cmp-table td{ padding:10px 8px;text-align:left;border-bottom:1px solid var(--line,#eef1f8);font-size:14px } .cmp-table thead th{ font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:center } .cmp-table thead th:first-child{ text-align:left } .cmp-table td:not(:first-child),.cmp-table th:not(:first-child){ text-align:center;width:110px } .cmp-power-col{ background:rgba(38,156,217,.05);font-weight:700 } .cmp-table tbody tr:last-child td{ border-bottom:none } .ct-yes{ color:#1fbf7a;font-weight:900;font-size:16px } .ct-no{ color:#c2c8d6;font-weight:900;font-size:16px } .pack{ position:relative } .pack-badge{ position:absolute;top:-11px;left:50%;transform:translateX(-50%); background:var(--grad);color:#fff;font-size:11px;font-weight:900;letter-spacing:.02em; padding:4px 12px;border-radius:999px;white-space:nowrap;box-shadow:0 6px 16px -8px rgba(38,156,217,.7) } /* ================= Kaufseite: Conversion (Free -> Paid) ================= */ .buy-hero{ margin-bottom:18px } .buy-hero .bh-kicker{ font-weight:800;color:var(--brand,#269cd9);font-size:13px;letter-spacing:.3px } .buy-hero h1{ margin:.15em 0 .25em } .cmp-card{ border:1px solid var(--line,#e6eaf3);border-radius:18px;padding:18px 20px;margin:0 0 18px;background:var(--card,#fff) } .cmp-h{ font-size:19px;margin:0 0 12px } .cmp-table{ width:100%;border-collapse:collapse } .cmp-table th,.cmp-table td{ padding:10px 8px;text-align:left;border-bottom:1px solid var(--line,#eef1f8);font-size:14px } .cmp-table thead th{ font-size:13px;color:var(--muted);text-align:center } .cmp-table thead th:first-child{ text-align:left } .cmp-table td:not(:first-child),.cmp-table th:not(:first-child){ text-align:center;width:120px } .cmp-power-col{ background:linear-gradient(180deg,rgba(38,156,217,.06),rgba(46,163,242,.06));font-weight:700 } .cmp-table .ct-yes{ color:#1fbf7a;font-weight:900 } .cmp-table .ct-no{ color:#c2c8d6 } .pack{ position:relative } .pack-badge{ position:absolute;top:-11px;left:50%;transform:translateX(-50%); background:linear-gradient(90deg,#269cd9,#2ea3f2);color:#fff; font-size:11px;font-weight:900;padding:4px 12px;border-radius:999px;white-space:nowrap; box-shadow:0 6px 16px -8px rgba(38,156,217,.8); } /* ================= Leistungsnachweis (Vorschau) ================= */ .cert-preview{ border:2px solid var(--brand,#269cd9);border-radius:16px;overflow:hidden; text-align:center;background:var(--card,#fff);margin-top:16px; } .cert-preview .cp-band{ background:linear-gradient(90deg,#269cd9,#2ea3f2);color:#fff; font-weight:900;letter-spacing:.5px;padding:12px 16px;font-size:15px; } .cert-preview .cp-name{ font-size:30px;font-weight:900;color:var(--brand,#269cd9);margin:20px 10px 6px } .cert-preview .cp-level{ display:inline-flex;flex-direction:column;gap:2px;background:#eef2ff;border-radius:12px;padding:10px 26px;margin:8px 0 4px } .cert-preview .cp-level span{ font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.5px;text-transform:uppercase } .cert-preview .cp-level b{ font-size:34px;color:var(--brand,#269cd9);line-height:1 } .cert-preview .cp-stats{ color:var(--muted);font-weight:700;margin:6px 0 20px } /* ================= Alpasana-Zertifizierung ================= */ .cert-banner{ background:linear-gradient(120deg,#1b2a6b,#269cd9 55%,#2ea3f2);color:#fff } .cert-banner b, .cert-banner p{ color:#fff } .cert-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:16px } .cert-card{ border:1px solid var(--line,#e6eaf3);border-radius:16px;padding:16px 18px;background:var(--card,#fff);display:flex;flex-direction:column;gap:6px } .cert-card.passed{ border-color:#1fbf7a } .cert-card .cc-head{ display:flex;align-items:center;justify-content:space-between } .cert-card .cc-lv{ font-size:30px;font-weight:900;color:var(--brand,#269cd9);line-height:1 } .cert-card .cc-badge{ font-size:11px;font-weight:800;background:#e5f7ee;color:#127a4a;border-radius:999px;padding:3px 10px } .cert-card .cc-title{ font-weight:800 } .cert-card .cc-mods{ font-size:13px;color:var(--muted) } .cert-card .cc-total{ font-size:12px;color:var(--muted) } .cert-card .cc-price{ font-size:22px;font-weight:900;margin:6px 0 2px } .cert-card .cc-retake{ font-size:11px;font-weight:800;color:#8a5200;background:#ffe9c7;border-radius:999px;padding:2px 8px;vertical-align:middle } .cert-top{ position:sticky;top:0;background:var(--bg,#fff);z-index:5;padding:8px 0 } .cert-top .chip-xp{ font-variant-numeric:tabular-nums } .cert-modlist{ display:flex;flex-direction:column;gap:6px;margin:14px auto;max-width:280px;text-align:left } .opt.sel{ border-color:var(--brand,#269cd9);box-shadow:0 0 0 2px rgba(38,156,217,.25) } .score-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0 } .score-grid .sc{ text-align:center } .score-grid .sc-ic{ font-size:22px } .score-grid .sc-lbl{ font-size:12px;color:var(--muted);font-weight:700 } .score-grid .sc-bar{ height:8px;border-radius:999px;background:#eef1f8;overflow:hidden;margin:6px 0 4px } .score-grid .sc-bar span{ display:block;height:100%;background:var(--grad) } .cert-award{ background:#eef7f0;border:1px solid #bfe6cf;border-radius:14px;padding:14px;margin-top:14px } .verify-ok{ border:2px solid #1fbf7a;border-radius:14px;padding:16px;margin-top:16px } .verify-ok .v-badge{ font-weight:900;color:#127a4a;font-size:17px } .verify-bad{ border:2px solid #ff5d73;border-radius:14px;padding:16px;margin-top:16px;font-weight:800;color:#c22a3d } @media (max-width:560px){ .score-grid{ grid-template-columns:repeat(2,1fr) } } /* ================= Zertifizierung: Marketing (Landing + Seite) ================= */ .cert-promo{ background:linear-gradient(135deg,#0f1b4d,#1b2a6b 45%,#243b9a);color:#fff } .cert-promo .eyebrow{ color:#9fb6ff } .cert-promo h2,.cert-promo .sec-sub{ color:#fff } .cert-promo .sec-sub{ opacity:.9 } .cert-hero{ background:linear-gradient(135deg,#0f1b4d,#269cd9 60%,#2ea3f2);color:#fff;padding:56px 0 44px;text-align:center } .cert-hero .eyebrow{ color:#cdd9ff } .cert-hero h1{ font-size:clamp(28px,5vw,44px);margin:.2em auto .3em;max-width:14ch } .cert-hero .lead{ max-width:60ch;margin:0 auto;opacity:.95;font-size:18px } .cz-badges{ display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px } .cz-badges span{ background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff; border-radius:999px;padding:7px 14px;font-weight:700;font-size:13.5px } .cert-hero .cz-badges span{ background:rgba(255,255,255,.16) } .cz-steps{ display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:20px } .cz-step{ background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:18px 20px } .section:not(.cert-promo) .cz-step{ background:var(--card,#fff);border-color:var(--line,#e6eaf3) } .cz-step .cz-n{ width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;font-weight:900; display:flex;align-items:center;justify-content:center;margin-bottom:8px } .cz-step h3{ margin:.2em 0 } .cz-cta{ display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px; background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:16px 20px } .cz-price b{ font-size:26px } .cz-price .muted{ color:#cdd9ff } .cz-actions{ display:flex;gap:10px;flex-wrap:wrap } .cz-pricebox{ display:flex;gap:14px;justify-content:center;flex-wrap:wrap } .cz-pricebox>div{ border:1px solid var(--line,#e6eaf3);border-radius:16px;padding:16px 26px;text-align:center;background:var(--card,#fff) } .cz-pricebox b{ display:block;font-size:30px;color:var(--brand,#269cd9) } .cz-pricebox span{ font-size:13px;color:var(--muted) } .cz-p1{ box-shadow:0 12px 30px -16px rgba(38,156,217,.6) } .cz-table td,.cz-table th{ text-align:center } .cz-table td:first-child,.cz-table th:first-child{ text-align:left } .faq-item{ border:1px solid var(--line,#e6eaf3);border-radius:12px;padding:12px 16px;margin-bottom:10px;background:var(--card,#fff) } .faq-item summary{ font-weight:800;cursor:pointer;list-style:none } .faq-item summary::-webkit-details-marker{ display:none } .faq-item summary::before{ content:'＋';color:var(--brand,#269cd9);font-weight:900;margin-right:8px } .faq-item[open] summary::before{ content:'－' } .faq-item p{ margin:10px 0 2px;color:var(--muted) } @media (max-width:560px){ .cz-cta{ flex-direction:column;align-items:flex-start } } /* ================= Mobile-Feinschliff (Handy) ================= */ @media (max-width:820px){ .hero2-grid{ grid-template-columns:1fr } .hero2-visual{ margin-top:8px } } @media (max-width:600px){ .section{ padding:30px 0 } .wrap{ padding-left:16px;padding-right:16px } h1{ font-size:26px } h2{ font-size:22px } /* Buttons/CTAs griffig & vollbreit */ .btn-lg{ padding:14px 20px } .cta-row{ flex-direction:column } .cta-row .btn{ width:100% } .cz-actions{ flex-direction:column } .cz-actions .btn{ width:100% } /* Zertifizierung */ .cert-hero{ padding:40px 0 30px } .cert-hero h1{ font-size:26px } .cert-hero .lead{ font-size:16px } .buy-hero h1{ font-size:24px } .cz-badges span{ font-size:12px;padding:6px 11px } .cz-cta{ align-items:stretch;text-align:center } .cz-cta .cz-actions{ justify-content:center } .cz-pricebox{ flex-direction:column } .cz-pricebox>div{ width:100% } .cert-grid{ grid-template-columns:1fr } .tax-grid{ grid-template-columns:1fr } .compass-hero{ flex-direction:column;align-items:stretch;text-align:center } /* Tabellen: kompakt bzw. horizontal scrollbar statt Überlauf */ .cmp-table th,.cmp-table td{ padding:8px 5px;font-size:13px } .cmp-table td:not(:first-child),.cmp-table th:not(:first-child){ width:auto } .cz-table{ font-size:12px } .cz-table th,.cz-table td{ padding:7px 3px } .adm-table{ display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch } /* Prüfungs-Player */ .q-card{ padding:16px } .cert-top .chip-xp{ font-size:13px } } /* ================= Bestellfenster (Pro-Modal mit Paketen) ================= */ .order-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 4px } .order-pkg{ display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 8px; border:1.5px solid var(--line,#e6eaf3);border-radius:14px;background:var(--surface);cursor:pointer;font:inherit;transition:.15s } .order-pkg:hover{ border-color:var(--brand,#269cd9);transform:translateY(-2px) } .order-pkg.popular{ border-color:var(--brand,#269cd9);box-shadow:0 10px 22px -12px rgba(38,156,217,.75) } .order-pkg .op-label{ font-weight:800;font-size:12.5px } .order-pkg .op-cr{ font-size:11.5px;color:var(--muted) } .order-pkg .op-price{ font-size:18px;font-weight:900;color:var(--brand,#269cd9) } .order-more{ display:inline-block;margin-top:10px;font-size:13px;font-weight:700;text-decoration:none } @media (max-width:520px){ .order-grid{ grid-template-columns:1fr } } /* ================= Dashboard: klare Sektionen (Redesign) ================= */ .dash-h{font-size:18px;font-weight:900;margin:26px 0 12px;letter-spacing:-.2px} .hs-hello{color:#fff;font-weight:800;font-size:15px;opacity:.92;margin-bottom:4px} .hs-side{display:flex;flex-direction:column;gap:12px;align-items:stretch;min-width:172px} .hs-due{display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none; background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);border-radius:14px; padding:10px 14px;color:#fff;font-size:13.5px} .hs-due b{font-weight:900} .hs-due .hs-due-cta{font-weight:900;white-space:nowrap} .hs-due:hover{background:rgba(255,255,255,.26)} .kpi-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0 4px} .kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px; display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink)} .kpi .k-v{font-size:22px;font-weight:900} .kpi .k-l{font-size:12px;font-weight:800;color:var(--ink-soft)} a.kpi{transition:border-color .12s,transform .12s} a.kpi:hover{border-color:var(--brand);transform:translateY(-1px)} /* Stufen-Wahl direkt in der KPI-Kachel (Kunde stellt seine Übungsstufe selbst ein) */ .kpi-level{cursor:pointer} .kpi-level:hover{border-color:var(--brand)} .k-select{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--ink); font:inherit;font-size:22px;font-weight:900;padding:0;margin:0;cursor:pointer;width:100%} .k-select:focus{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px} [data-theme="dark"] .k-select option{background:var(--surface)} .improve-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;align-items:stretch} .imp-col{display:grid;grid-template-rows:1fr 1fr;gap:14px} .imp-card{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line); border-radius:var(--r);padding:18px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm); transition:transform .12s,box-shadow .12s} .imp-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .imp-card .ic{font-size:26px;line-height:1} .imp-card h4{margin:0;font-size:16px} .imp-card p{margin:0;color:var(--ink-soft);font-size:13.5px} .imp-card .imp-cta{margin-top:auto;font-weight:800;color:var(--brand);font-size:14px} .imp-card.compass{background:linear-gradient(180deg,var(--brand-050),var(--surface))} .imp-weak{display:flex;flex-direction:column;gap:9px;margin:4px 0 2px} .imp-weak .iw{font-size:13px;font-weight:700} .imp-weak .iw b{float:right;color:var(--ink)} .imp-weak .mini-bar{margin-top:4px} .triple-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch} .tri-card{position:relative;display:flex;flex-direction:column;gap:6px;background:var(--surface); border:1px solid var(--line);border-radius:var(--r);padding:20px 18px 18px;text-decoration:none; color:var(--ink);box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .12s} .tri-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .tri-card.featured{border-color:var(--brand);box-shadow:0 12px 28px rgba(38,156,217,.16)} .tri-card .ic{font-size:26px} .tri-card h4{margin:0;font-size:16px} .tri-card p{margin:0;color:var(--ink-soft);font-size:13.5px} .tri-card .imp-cta{margin-top:auto;font-weight:800;color:var(--brand);font-size:14px} .tri-badge{position:absolute;top:14px;right:14px;font-size:11px;font-weight:900;padding:3px 10px;border-radius:999px} .tri-badge.free{background:#eafaf2;color:#0d8a53} .tri-badge.pay{background:var(--grad);color:#fff} .duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .card.duo{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0} .small{font-size:13px} .credits-sec{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;align-items:stretch} .cs-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px} .cs-compare .col{border-radius:14px;padding:16px} .cs-compare .col h4{margin:0 0 6px;font-size:15px} .cs-compare .col p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-soft)} .cs-compare .col.g{background:var(--surface-2);border:1px solid var(--line)} .cs-compare .col.p{background:var(--tint);border:1px solid var(--tint-border)} .cs-buy{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px; display:flex;flex-direction:column;gap:8px;justify-content:center;text-align:center} .cs-bal b{font-size:32px;font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .cs-bal span{display:block;font-size:12px;color:var(--ink-soft);font-weight:800} @media (max-width:860px){ .kpi-bar{grid-template-columns:repeat(2,1fr)} .improve-grid,.triple-grid,.duo-grid,.credits-sec,.cs-compare{grid-template-columns:1fr} .imp-col{grid-template-rows:auto auto} } /* ================= Qualitäts-Umfrage ================= */ .survey{ border:1px dashed var(--line,#e6eaf3);border-radius:14px;padding:14px;margin:14px 0;text-align:center } .survey .sv-q{ font-weight:700;margin-bottom:8px } .survey .sv-stars{ display:flex;gap:4px;justify-content:center;margin-bottom:8px } .survey .sv-star{ background:none;border:none;font-size:28px;cursor:pointer;color:#ffb020;line-height:1;padding:0 2px } .survey .sv-msg{ width:100%;margin-bottom:8px } .sv-thanks{ font-weight:800;color:#127a4a;padding:10px } /* ================= LinkedIn-Button ================= */ .btn-linkedin{ background:#0a66c2;color:#fff;border:none } .btn-linkedin:hover{ background:#084e96;color:#fff } /* ================= Klarstellungs-Badge (Vorbereitungszertifizierung) ================= */ .clarity-pill{ display:inline-block;background:#fff4d6;color:#8a5a0a;font-weight:800;font-size:13px; border-radius:999px;padding:6px 14px;margin:8px 0 6px;border:1px solid #f0d38a; } /* ---------- Barrierefreiheit: sichtbarer Tastatur-Fokus ---------- */ :focus-visible{ outline:3px solid var(--brand); outline-offset:2px; border-radius:4px } .btn:focus-visible,.opt:focus-visible,.lang-switch a:focus-visible{ outline:3px solid var(--brand); outline-offset:3px } .input:focus-visible{ outline:2px solid var(--brand); outline-offset:1px } /* ============================================================ Welle 1: Tagesritual, Fehler des Tages, Lernkiste, Check-in ============================================================ */ .fdt-card{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:14px 16px; border:2px solid var(--warm-border);background:var(--warm-bg);color:var(--ink)} .fdt-card:hover{box-shadow:var(--shadow)} .fdt-ic{font-size:26px;flex:0 0 auto} .fdt-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .fdt-main .muted{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fdt-cta{flex:0 0 auto;padding:9px 16px} @media (max-width:560px){ .fdt-card{flex-wrap:wrap} .fdt-cta{width:100%;text-align:center} } .seg-chip{display:inline-block;margin-left:6px;padding:2px 9px;border-radius:var(--r-pill); background:var(--brand-050);color:var(--brand);font-size:11px;font-weight:800} .focus-banner.ritual{border-color:var(--warm-border);background:var(--warm-bg)} .reflect-box{border:1px dashed var(--line);border-radius:var(--r);padding:12px 14px;background:var(--surface-2)} .coach-quick .btn{display:inline-block;margin:6px 6px 0 0;padding:8px 12px;font-size:14px} .mastered-badge{display:inline-block;margin-top:8px;padding:6px 12px;border-radius:var(--r-pill); background:rgba(31,191,122,.12);color:var(--good);font-weight:800;font-size:14px} /* ============================================================ Welle 2: Prüfungsampel, Tages-Tools, Shadowing, Warum-falsch ============================================================ */ .daily-tools{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 4px} .dt-chip{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:var(--r-pill); background:var(--surface);border:1px solid var(--line);font-weight:800;color:var(--ink);box-shadow:var(--shadow-sm)} .dt-chip:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)} .ampel-card{margin:14px 0 18px} .ampel-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px} .ampel-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px; border-radius:var(--r);background:var(--surface-2);text-align:center} .am-dot{width:14px;height:14px;border-radius:50%;background:#c8d0e4} .zone-green .am-dot{background:var(--good);box-shadow:0 0 0 4px rgba(31,191,122,.15)} .zone-amber .am-dot{background:var(--amber);box-shadow:0 0 0 4px rgba(255,176,32,.15)} .zone-red .am-dot{background:var(--bad);box-shadow:0 0 0 4px rgba(242,68,99,.12)} .am-lbl{font-size:12px;font-weight:700;color:var(--ink-soft)} .am-val{font-size:15px} @media (max-width:640px){ .ampel-grid{grid-template-columns:repeat(2,1fr)} } .sh-ok{color:var(--good);font-weight:800} .sh-miss{color:var(--bad);font-weight:800;text-decoration:underline dotted} .why-box{border-style:dashed} /* ============================================================ Welle 3: Schweiz-Satz, Lernziel, Album, Buddy, Sim-Training ============================================================ */ .goal-card{margin:0 0 16px} .goal-chips{display:flex;gap:10px;flex-wrap:wrap} .goal-chips .dt-chip{cursor:pointer;border:1px solid var(--line);background:var(--surface)} .dt-chip.on{border-color:var(--brand);color:var(--brand);background:var(--brand-050)} .swiss-card{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:14px 16px; border-left:5px solid var(--bad)} .swiss-flag{font-size:26px;flex:0 0 auto} .swiss-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .swiss-text{font-size:16px;font-weight:700} .say-btn{flex:0 0 auto;padding:8px 12px} .album-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px} .album-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;box-shadow:var(--shadow-sm)} .al-q{font-weight:700;font-size:14px} .al-a{color:var(--good);font-weight:800;font-size:14px;margin-top:4px} .al-meta{color:var(--ink-soft);font-size:11px;margin-top:6px} @media (max-width:760px){ .album-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:480px){ .album-grid{grid-template-columns:1fr} } /* ============================================================ Alpasana-Story: Journey, About, Plattformen ============================================================ */ .journey{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .j-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:22px 18px 18px;box-shadow:var(--shadow-sm)} .j-card .ic{font-size:26px;margin-bottom:8px} .j-card h3{margin:.2em 0;font-size:16px} .j-card p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.55} .j-step{position:absolute;top:-12px;left:16px;width:26px;height:26px;border-radius:50%; background:var(--grad);color:#fff;font-weight:900;font-size:13px;display:grid;place-items:center; box-shadow:0 4px 10px rgba(38,156,217,.35)} @media (max-width:860px){ .journey{grid-template-columns:repeat(2,1fr)} } @media (max-width:520px){ .journey{grid-template-columns:1fr} } .ab-proof{font-size:13px;font-weight:700;color:var(--brand);margin-top:8px} .platform-list{display:flex;flex-direction:column;gap:8px;margin-top:12px} .pf-chip{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r); background:var(--surface);border:1px solid var(--line);font-weight:800;color:var(--ink)} .pf-chip span{font-weight:600;color:var(--ink-soft);font-size:14px} .pf-chip:hover{border-color:var(--brand)} .pf-chip.on{border:2px solid var(--brand);background:var(--brand-050)} /* ============================================================ Dashboard-Klarheit: ?-Popover, Heute-Duo, Kurs-Fold, Features ============================================================ */ .hlp{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;margin-left:4px; border-radius:50%;background:var(--surface-2);border:1px solid var(--line); color:var(--ink-soft);font-size:11px;font-weight:900;cursor:help;vertical-align:middle} .hlp .hlp-pop{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%); width:230px;background:var(--dark,#232434);color:#fff;font-size:12.5px;font-weight:600;line-height:1.5; padding:10px 12px;border-radius:10px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none; transition:opacity .15s;z-index:20;text-align:left;white-space:normal} .hlp:hover .hlp-pop,.hlp:focus .hlp-pop,.hlp:focus-within .hlp-pop{opacity:1} .hlp-link{float:right;font-size:13px;font-weight:700;color:var(--brand)} .today-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:4px} .today-duo .fdt-card,.today-duo .swiss-card{margin:0} @media (max-width:760px){ .today-duo{grid-template-columns:1fr} } .dt-label{font-weight:800;color:var(--ink-soft);font-size:14px;align-self:center;margin-right:2px} .course-fold{margin-top:16px} .course-fold summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px} .course-fold summary::-webkit-details-marker{display:none} .course-fold summary::after{content:"▾";color:var(--ink-soft);font-size:14px;transition:transform .15s} .course-fold[open] summary::after{transform:rotate(180deg)} .ft-cat{margin-bottom:14px} .ft-cat h3{margin:0 0 8px;font-size:17px} .ft-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px} .ft-list li{font-size:15px;color:var(--ink-soft);line-height:1.5} .ft-list b{color:var(--ink)} /* ---------- Dark-Mode-Feinschliff (Coach-Boxen, Popover) ---------- */ [data-theme="dark"] .hintbox.coach{background:#241f45;border-color:#453a8f;color:#cfc6ff} [data-theme="dark"] .bubble.coach{background:#241f45;color:#d6cdff} .hlp .hlp-pop{border:1px solid rgba(255,255,255,.18)} [data-theme="dark"] .hlp{background:var(--surface-2);border-color:var(--line);color:var(--ink-soft)} /* ---------- Sprach-Dropdown (kompakt, native Namen, folgt dem Theme) ---------- */ .lang-dd{position:relative;flex:0 0 auto} .lang-dd>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px; background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill); padding:7px 12px;font-weight:800;font-size:13px;color:var(--ink);user-select:none} .lang-dd>summary::-webkit-details-marker{display:none} .lang-dd>summary:hover{border-color:var(--brand)} .lang-dd .ld-caret{font-size:10px;color:var(--ink-soft);transition:transform .15s} .lang-dd[open] .ld-caret{transform:rotate(180deg)} .lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:180px; background:var(--surface);border:1px solid var(--line);border-radius:14px; box-shadow:var(--shadow-lg);padding:6px;z-index:70} .lang-menu a{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:10px; color:var(--ink);font-weight:700;font-size:14.5px;white-space:nowrap} .lang-menu a:hover{background:var(--surface-2)} .lang-menu a.on{color:var(--brand);background:var(--brand-050)} .lang-menu a .ld-check{margin-left:auto;color:var(--brand);font-weight:900} .lang-dd .ld-flag{font-size:16px;line-height:1} /* ============================================================ UX-Vereinfachung: 4-Zonen-Dashboard, Mehr-Seite, Stufen-Fold ============================================================ */ /* Serie kompakt im Heute-Block (statt eigener KPI-Kachel) */ .hs-streak{text-align:center;font-weight:800;font-size:13.5px;background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3);border-radius:var(--r-pill);padding:7px 14px} /* Meine Stufe: ruhige aufklappbare Zeile */ .lvl-fold{margin:0 0 18px} .lvl-fold summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px; font-size:14px;color:var(--ink-soft);font-weight:700;padding:8px 14px;border:1px solid var(--line); border-radius:var(--r-pill);background:var(--surface)} .lvl-fold summary::-webkit-details-marker{display:none} .lvl-fold summary b{color:var(--ink)} .lvl-fold .lvl-change{color:var(--brand);font-weight:800} .lvl-fold[open] summary{border-color:var(--brand)} .lvl-pick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 4px} .lvl-chip{border:1.6px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px; padding:7px 16px;font-weight:800;font-size:14px;cursor:pointer;transition:.15s} .lvl-chip:hover{border-color:var(--brand)} .lvl-chip.on{background:var(--brand);border-color:var(--brand);color:#fff} /* Zone Üben: drei gleich gebaute, ruhige Karten */ .simple-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch} .simple-card{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);padding:20px;color:var(--ink);box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .12s} .simple-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .simple-card .ic{font-size:26px;line-height:1} .simple-card h4{margin:2px 0 0;font-size:16.5px} .simple-card p{margin:0;color:var(--ink-soft);font-size:14px;flex:1} .due-badge{display:inline-block;min-width:22px;text-align:center;background:var(--coral);color:#fff; border-radius:var(--r-pill);font-size:12px;font-weight:900;padding:2px 7px;vertical-align:2px;margin-left:4px} /* Zone Prüfung: EIN Block, zwei Wege */ .exam-zone{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 20px} .exam-zone .ez-main{display:flex;align-items:center;gap:14px;min-width:240px;flex:1} .exam-zone .ic{font-size:30px;line-height:1} .exam-zone .ez-actions{display:flex;gap:10px;flex-wrap:wrap} /* Mehr-Seite: einfache Listenkarten */ .more-list{display:flex;flex-direction:column;gap:10px;margin:0 0 8px} .more-item{display:flex;align-items:center;gap:14px;padding:14px 16px;color:var(--ink)} .more-item:hover{border-color:var(--brand)} .more-item .mi-ic{font-size:22px;line-height:1;flex:0 0 auto} .more-item .mi-txt{display:flex;flex-direction:column;min-width:0;flex:1} .more-item .mi-txt .muted{font-size:13px} .more-item .mi-go{color:var(--brand);font-weight:900} .dt-chip.dt-more{border-style:dashed;color:var(--brand)} @media (max-width:760px){ .simple-trio{grid-template-columns:1fr} .exam-zone{flex-direction:column;align-items:stretch} .exam-zone .ez-actions .btn{flex:1;text-align:center} } /* Teilen-Karte nach dem Testergebnis (jeder Test = kostenloser Kanal) */ .share-card{margin-top:18px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:16px} .share-h{font-weight:900;font-size:16px} .share-sub{color:var(--ink-soft);font-size:13.5px;margin:2px 0 12px} .share-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .share-btn{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:9px 16px;font-weight:800;font-size:14px;color:#fff;cursor:pointer;font-family:inherit;text-decoration:none} .share-btn.wa{background:#25d366} .share-btn.tg{background:#29a9eb} .share-btn.fb{background:#1877f2} .share-btn.copy{background:var(--surface);border:1px solid var(--line);color:var(--ink)} .share-btn:hover{filter:brightness(1.05)} /* Lange Button-Labels (z. B. Ukrainisch) duerfen auf Mobil umbrechen, statt die Seite zu sprengen */ .btn{max-width:100%} @media (max-width:560px){ .btn{white-space:normal} } /* Weitere Grid-Karten (Why/Staerken) i18n-sicher: schrumpfbar + lange Woerter umbrechen (UK) */ .why-card,.step,.lv-card{min-width:0} .why-card h3,.why-card p,.why-card .ab-proof,.step h3,.step p{overflow-wrap:break-word}