/* =====================================================================
   KapFixIT Zertifikatstrainer
   Design: dunkles Produkt-UI, ruhig und dicht - bewusst KEIN Marketing-Hero.
   Alle Brand-Tokens stehen hier oben. Weicht die Live-Seite ab, nur hier anpassen.
   ===================================================================== */
:root{
  --brand:#5B5BD6;          /* KapFixIT Primary - niemals Teal */
  --brand-deep:#4B3FBF;
  --brand-soft:rgba(91,91,214,.14);
  --ember:#FF6B35;          /* Akzent / CTA-Highlight */

  --bg:#0B0B12;
  --bg-alt:#0F0F1A;
  --surface:rgba(255,255,255,.032);
  --surface-2:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);

  --text:#EDEDF2;
  --text-muted:#9A9AB0;
  --ok:#34D399;
  --warn:#FBBF24;
  --bad:#F87171;

  --r-sm:8px; --r:14px; --r-lg:20px;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 20px 50px -30px rgba(0,0,0,.9);
  --maxw:1120px;

  /* Schriften: bewusst die des Systems. Sie sind fuer Bildschirmtext gezeichnet,
     auf jedem Geraet sofort da, ohne Ladesprung und ohne Netzwerkaufruf. Eine
     eigene Schrift laesst sich spaeter als WOFF2 unter assets/fonts ergaenzen. */
  --font-body:system-ui,'Segoe UI Variable Text','Segoe UI',-apple-system,
              BlinkMacSystemFont,Roboto,Inter,Cantarell,Ubuntu,'Helvetica Neue',
              Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji';
  --font-display:'Segoe UI Variable Display',var(--font-body);
  --font-mono:ui-monospace,'Cascadia Mono','Cascadia Code',Consolas,
              'SF Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',monospace;

  /* Markenfarbe als Text: #5B5BD6 erreicht auf dem dunklen Grund nur 3,65:1 und
     bleibt damit unter der Lesbarkeitsgrenze. Fuer Flaechen bleibt sie, fuer
     Buchstaben gibt es diesen helleren Ton mit 6,7:1. */
  --brand-text:#8C8CF0;
}
[data-theme="light"]{
  --bg:#F7F7FB; --bg-alt:#FFFFFF;
  --surface:rgba(15,15,26,.03); --surface-2:rgba(15,15,26,.055);
  --line:rgba(15,15,26,.10); --line-strong:rgba(15,15,26,.18);
  --text:#14141F; --text-muted:#4A4A5E;   /* 8,1:1 statt 6,1:1 */
  --brand-text:#4A4ABF;                    /* 6,5:1 auf hellem Grund */
  --shadow:0 1px 2px rgba(15,15,26,.06), 0 12px 32px -24px rgba(15,15,26,.5);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:17px; line-height:1.65;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  /* Vier Ebenen, von vorn nach hinten:
     1+2  ein feines Raster, Anspielung auf die Platine im Logo. Bewusst so
          schwach, dass man es eher spuert als sieht - Text steht darueber.
     3+4  zwei kalte Lichtquellen oben in der Markenfarbe.
     5    eine warme unten, damit die Seite nach unten hin nicht abstirbt. */
  background-image:
    linear-gradient(rgba(255,255,255,.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.034) 1px, transparent 1px),
    radial-gradient(1200px 680px at 8% -10%, rgba(91,91,214,.38), transparent 60%),
    radial-gradient(900px 560px at 100% 4%, rgba(75,63,191,.26), transparent 62%),
    radial-gradient(1000px 640px at 60% 108%, rgba(255,107,53,.11), transparent 60%),
    /* Randabdunklung: fasst den Inhalt ein, statt ihn in einer leeren
       Flaeche schwimmen zu lassen. Wirkt vor allem auf breiten Schirmen. */
    radial-gradient(140% 100% at 50% 40%, transparent 42%, rgba(0,0,0,.5) 100%);
  background-size:52px 52px, 52px 52px, auto, auto, auto, auto;
  background-attachment:fixed;
}

/* Auf kleinen Geraeten kein fester Grund: das Bild muss sonst bei jedem
   Scrollschritt neu gezeichnet werden, und genau das ruckelt. */
@media (max-width:820px){
  body{background-attachment:scroll}
}
a{color:inherit;text-decoration:none}
a:hover{color:var(--brand-text)}
/* Ein sichtbarer Fokus ist Pflicht: wer mit der Tastatur arbeitet, muss sehen, wo er steht. */
:focus-visible{outline:2px solid var(--brand-text);outline-offset:2px;border-radius:4px}
/* Die Hierarchie traegt hier Groesse und Gewicht, nicht eine zweite Schrift.
   Das bleibt auf jedem Geraet gleich lesbar. */
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.2;letter-spacing:-.015em;
         margin:0 0 .5em;text-wrap:balance;max-width:24ch}
h1{font-size:clamp(1.85rem,4.4vw,2.7rem)}
h2{font-size:clamp(1.35rem,3vw,1.9rem);margin-top:0}
h3{font-size:1.15rem;letter-spacing:-.008em;max-width:34ch}
em{font-style:normal;color:var(--brand-text);}
/* Fliesstext im Inhalt bekommt eine bequeme Zeilenlaenge. Alles ueber
   etwa 70 Zeichen zwingt das Auge, den Zeilenanfang zu suchen. */
p{max-width:70ch}
li{max-width:70ch}
code{font-family:var(--font-mono);font-size:.86em;background:var(--surface-2);padding:.15em .4em;border-radius:6px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--brand);padding:.6rem 1rem;border-radius:var(--r-sm)}

/* ------------------------------------------------------------- Topbar */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem clamp(1rem,4vw,2rem);
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px);
}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:600}
.brand-mark{width:34px;height:34px;object-fit:contain;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.1;font-size:.95rem;justify-content:center}
.brand-sub{font-family:var(--font-mono);font-size:.62rem;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;font-weight:400}
.nav{display:flex;align-items:center;gap:.4rem;font-size:.9rem}
.nav a{padding:.45rem .7rem;border-radius:var(--r-sm)}

/* ------------------------------------------------------------ Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.6rem 1.1rem;border:1px solid transparent;border-radius:999px;
  font:inherit;font-weight:600;font-size:.92rem;cursor:pointer;
  /* Ohne diese beiden Zeilen zeigt ein echtes <button> die graue Standard-
     flaeche des Browsers. Zusammen mit heller Schrift heisst das: unlesbar,
     bis jemand mit der Maus darueberfaehrt. Links waren nie betroffen, weil
     <a> keine eigene Flaeche mitbringt - deshalb faellt so etwas spaet auf. */
  background:transparent; color:var(--text);
  transition:transform .12s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-lg{padding:.8rem 1.5rem;font-size:1rem}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:#fff;box-shadow:0 8px 24px -12px var(--brand)}
.btn-primary:hover{color:#fff;filter:brightness(1.08)}
/* Der stille Knopf braucht trotzdem eine eigene Flaeche, sonst steht er als
   blosser Umriss da und sieht aus wie ein Rahmen um nichts. */
.btn-ghost{background:var(--surface);border-color:var(--line-strong);color:var(--text)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--brand-text);color:var(--text)}

/* ------------------------------------------------------------ Layout */
main{max-width:var(--maxw);margin:0 auto;padding:clamp(1.5rem,5vw,3.5rem) clamp(1rem,4vw,2rem) 4rem}
.section{margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.eyebrow{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-text);margin:0 0 .6rem}
.lede{color:var(--text-muted);font-size:1.1rem;line-height:1.6;max-width:62ch;margin:0 0 1.5rem}
.muted{color:var(--text-muted)}
.small{font-size:.92rem}
.note{color:var(--text-muted);font-size:.9rem;line-height:1.6;border-left:2px solid var(--line-strong);padding-left:.9rem;margin-top:1rem;max-width:70ch}

.hero{padding:clamp(1rem,5vw,3rem) 0 clamp(2rem,6vw,4rem)}
.hero h1{max-width:16ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}

/* ------------------------------------------------------------- Cards */
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.15rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.5rem;
  transition:border-color .18s ease, transform .18s ease;
}
.card-link:hover{border-color:var(--brand);transform:translateY(-2px)}
.card h3{margin:0}
.card-text{font-size:.95rem;line-height:1.55;color:var(--text-muted);margin:.2rem 0}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.card-foot{margin-top:auto;padding-top:.6rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.code{font-family:var(--font-mono);font-size:.86rem;font-weight:700;color:var(--brand-text);letter-spacing:.04em}

.tag{display:inline-block;padding:.2rem .55rem;border-radius:999px;font-size:.72rem;font-weight:600;
     background:var(--surface-2);border:1px solid var(--line);color:var(--text-muted)}
.tag-ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.tag-warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
.tag-bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.tag-info{color:var(--brand-text);border-color:color-mix(in srgb,var(--brand) 40%,transparent)}
.tag-muted{opacity:.7}

.bar{height:5px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.bar span{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--ember))}

/* ------------------------------------------------------------ Tabelle */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
table.data{width:100%;border-collapse:collapse;font-size:.95rem;min-width:560px}
table.data th{
  text-align:left;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);font-weight:500;padding:.8rem 1rem;border-bottom:1px solid var(--line);white-space:nowrap;
}
table.data td{padding:.85rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
table.data tr:last-child td{border-bottom:none}
table.data tbody tr:hover{background:var(--surface-2)}
/* Abgelaufene oder aufgebrauchte Codes: noch lesbar, aber sichtbar erledigt.
   Ohne das saehe ein toter Einladungscode aus wie ein gueltiger. */
table.data tr.ist-aus{opacity:.5}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ------------------------------------------------------------ Formular */
.auth{max-width:420px;margin:0 auto;padding-top:2rem}
.form{display:flex;flex-direction:column;gap:.9rem;margin:1.5rem 0}
.form label{display:flex;flex-direction:column;gap:.4rem;font-size:.95rem;color:var(--text-muted);font-weight:600}
.form input{
  padding:.75rem .9rem;border-radius:var(--r);border:1px solid var(--line-strong);
  background:var(--bg-alt);color:var(--text);font:inherit;font-size:1rem;
}
.form input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}
.form-inline{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin:1rem 0}
.check{display:flex;align-items:center;gap:.5rem;font-size:.95rem;color:var(--text-muted)}
/* .form label setzt die Spaltenrichtung fuer Eingabefelder. Ein Kaestchen mit
   Beschriftung gehoert daneben, nicht darunter - sonst steht der Haken allein
   in der Mitte. */
.form label.check,.form-inline label.check{flex-direction:row;align-items:center;font-weight:400;color:var(--text)}

.flash{max-width:var(--maxw);margin:1rem auto 0;padding:.9rem 1.1rem;border-radius:var(--r);font-size:1rem;border:1px solid}
.flash-error{background:color-mix(in srgb,var(--bad) 12%,transparent);border-color:color-mix(in srgb,var(--bad) 40%,transparent);color:var(--bad)}
.flash-ok{background:color-mix(in srgb,var(--ok) 12%,transparent);border-color:color-mix(in srgb,var(--ok) 40%,transparent);color:var(--ok)}
.flash-info{background:var(--surface-2);border-color:var(--line)}

/* --------------------------------------------------------------- Quiz */
/* Die Lernflaeche ist die Seite, auf der Menschen am laengsten lesen.
   Deshalb hier: ruhige Zeilenlaenge, volle Textfarbe, nichts unter 1 rem. */
.quiz{max-width:min(70ch,100%);margin:0 auto}
.quiz-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}
.quiz-head .eyebrow{margin:0 0 .15rem}
.quiz-topic{margin:0;font-size:.95rem;color:var(--text-muted);line-height:1.4;max-width:46ch}
.stem{font-size:clamp(1.2rem,2.4vw,1.5rem);line-height:1.45;font-family:var(--font-body);
      font-weight:600;letter-spacing:-.005em;margin-bottom:1.6rem;max-width:44ch}
.options{display:flex;flex-direction:column;gap:.6rem}
.option{
  display:flex;gap:.85rem;align-items:flex-start;padding:1.05rem 1.1rem;cursor:pointer;
  font-size:1rem;line-height:1.55;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .15s ease, background .15s ease;
}
.option:hover{border-color:var(--brand);background:var(--surface-2)}
.option input{margin-top:.25rem;accent-color:var(--brand);width:18px;height:18px;flex:none}
.option:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.options .btn{margin-top:1rem;align-self:flex-start}

.verdict.is-ok{color:var(--ok)}
.verdict.is-bad{color:var(--bad)}
.answer-list{list-style:none;padding:0;margin:1.5rem 0;display:flex;flex-direction:column;gap:.5rem}
.answer-list li{display:flex;gap:.8rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.answer-list li{font-size:1rem;line-height:1.55}
.answer-list li p{margin:0;max-width:62ch}
.answer-list li p + p{margin-top:.35rem;font-size:.95rem;color:var(--text)}
.answer-list .marker{font-weight:700;color:var(--text-muted);flex:none;width:1.2em}
.answer-list .is-correct{border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:color-mix(in srgb,var(--ok) 8%,transparent)}
.answer-list .is-correct .marker{color:var(--ok)}
.answer-list .is-wrong{border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.answer-list .is-wrong .marker{color:var(--bad)}
/* Die Erklaerung ist der Grund, warum jemand hier ist. Sie steht in voller
   Textfarbe und in Lesegroesse, nicht als graue Randnotiz. */
.explain{border-left:3px solid var(--brand);padding:.1rem 0 .1rem 1.1rem;margin:1.6rem 0;
         color:var(--text);font-size:1.02rem;line-height:1.68}
.explain p{margin:0;max-width:66ch}

.log{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r);padding:1rem;
     font-family:var(--font-mono);font-size:.8rem;overflow-x:auto;white-space:pre-wrap}

/* ------------------------------------------------------------- Footer */
.footer{
  border-top:1px solid var(--line);padding:1.5rem clamp(1rem,4vw,2rem);
  display:flex;flex-wrap:wrap;gap:.5rem;justify-content:space-between;
  font-family:var(--font-mono);font-size:.8rem;color:var(--text-muted);
}

/* ------------------------------------ Leichter Kopierschutz (Kosmetik) */
[data-protected] .stem,[data-protected] .option span,[data-protected] .answer-list p{
  -webkit-user-select:none; user-select:none;
}
@media print{ [data-protected]{display:none !important} }

/* Wer im Betriebssystem mehr Kontrast eingestellt hat, bekommt ihn auch hier:
   kraeftigere Linien, kein gedaempftes Grau, keine Farbverlaeufe hinter Text. */
@media (prefers-contrast:more){
  :root{--text-muted:#D2D2E4;--line:rgba(255,255,255,.24);--line-strong:rgba(255,255,255,.4)}
  [data-theme="light"]{--text-muted:#2C2C3C;--line:rgba(15,15,26,.28);--line-strong:rgba(15,15,26,.45)}
  body{background-image:none}
  .option,.answer-list li,.card{border-width:2px}
}

/* Zum Ausdrucken: heller Grund, schwarzer Text, keine Flaechen. */
@media print{
  body{background:#fff;background-image:none;color:#000;font-size:11pt}
  .topbar,.footer,.hero-cta,.theme-form,.btn{display:none !important}
  main{max-width:none;padding:0}
  .card,.solution,.explain,.mnemonic,.pattern{break-inside:avoid;background:none;box-shadow:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#444}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .btn:hover,.card-link:hover{transform:none}
}
@media (max-width:560px){
  .brand-sub{display:none}
  /* Die Navigation darf umbrechen - sonst schiebt sie auf dem Handy die ganze Seite breit.
     Umgebrochen wird sie zwei bis drei Zeilen hoch; als klebende Leiste waere das
     auf einem kleinen Bildschirm zu viel, deshalb hier nicht sticky. */
  .topbar{position:static;flex-wrap:wrap;row-gap:.5rem;padding-top:.7rem;padding-bottom:.7rem}
  .nav{flex-wrap:wrap;justify-content:flex-end;font-size:.85rem;gap:.15rem}
  .nav a{padding:.4rem .5rem}
  .theme-toggle{width:30px;height:30px}
  main{padding-bottom:3rem}
}

/* ------------------------------------------------- Konto, 2FA, Codes */
.auth-wide{max-width:520px}
.code-input{font-family:var(--font-mono);font-size:1.4rem !important;letter-spacing:.35em;text-align:center}
.qr-box{display:flex;justify-content:center;padding:1.25rem;margin:1.25rem 0;
        background:#fff;border-radius:var(--r-lg);border:1px solid var(--line)}
.qr-box svg{display:block}
.details{border:1px solid var(--line);border-radius:var(--r);padding:.8rem 1rem;background:var(--surface)}
.details summary{cursor:pointer;font-size:1rem;font-weight:600;padding:.2rem 0}
.secret{font-family:var(--font-mono);font-size:1.05rem;letter-spacing:.1em;word-break:break-all;
        color:var(--brand-text);margin:.8rem 0 .2rem;user-select:all}
.codes{list-style:none;padding:1rem;margin:1.5rem 0;display:grid;gap:.5rem;
       grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
       background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.codes li{font-family:var(--font-mono);font-size:1rem;letter-spacing:.05em;text-align:center;
          padding:.55rem;background:var(--bg-alt);border-radius:var(--r-sm);user-select:all}

/* ------------------------------------------------- Design-Umschalter */
.theme-form{display:flex;margin:0}
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--text-muted);
  font:inherit;font-size:1rem;line-height:1;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.theme-toggle:hover{border-color:var(--brand);color:var(--text);background:var(--surface-2)}
.theme-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* Im hellen Design traegt der dunkle Farbverlauf zu dick auf. */
[data-theme="light"] body{
  /* Derselbe Aufbau, aber dunkle Rasterlinien auf hellem Grund und insgesamt
     zurueckhaltender: auf Weiss faellt jede Struktur staerker auf. */
  background-image:
    linear-gradient(rgba(15,15,26,.040) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,15,26,.040) 1px, transparent 1px),
    radial-gradient(1200px 680px at 8% -10%, rgba(91,91,214,.20), transparent 60%),
    radial-gradient(900px 560px at 100% 4%, rgba(75,63,191,.14), transparent 62%),
    radial-gradient(1000px 640px at 60% 108%, rgba(255,107,53,.08), transparent 60%),
    radial-gradient(140% 100% at 50% 40%, transparent 46%, rgba(15,15,26,.10) 100%);
  background-size:52px 52px, 52px 52px, auto, auto, auto, auto;
}

/* ------------------------------------------------- Glossar-Tooltips */
.gloss{
  position:relative;text-decoration:none;cursor:help;font-weight:inherit;
  border-bottom:1px dashed var(--brand-text);
}
.gloss:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}
.gloss-def{
  position:absolute;left:0;top:calc(100% + .5rem);z-index:30;
  width:max-content;max-width:min(34ch,78vw);
  padding:.6rem .75rem;border-radius:var(--r);
  background:var(--bg-alt);border:1px solid var(--line-strong);box-shadow:var(--shadow);
  color:var(--text);font-family:var(--font-body);font-size:.95rem;font-weight:400;
  line-height:1.55;letter-spacing:normal;text-align:left;
  opacity:0;visibility:hidden;transform:translateY(-4px);pointer-events:none;
  transition:opacity .12s ease,transform .12s ease;
  -webkit-user-select:text;user-select:text;
}
.gloss:hover .gloss-def,.gloss:focus .gloss-def,.gloss:focus-within .gloss-def{
  opacity:1;visibility:visible;transform:translateY(0);
}

/* ------------------------------------------------------ Pruefungsmodus */
.exam-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.7rem}
.exam-bar p{margin:0}
.timer{
  font-family:var(--font-mono);font-size:1.3rem;font-variant-numeric:tabular-nums;
  padding:.3rem .8rem;border:1px solid var(--line-strong);border-radius:999px;white-space:nowrap;
}
.timer.is-urgent{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.quiz .bar{margin-bottom:1.6rem}
.exam-abort{
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--line);
}
.rules{list-style:none;padding:0;margin:1.5rem 0;display:grid;gap:.5rem;max-width:64ch}
.rules li{padding:.8rem 1rem;font-size:1rem;line-height:1.55;background:var(--surface);
          border:1px solid var(--line);border-radius:var(--r)}
.card-accent{border-color:color-mix(in srgb,var(--brand) 45%,transparent)}
.card-foot form{display:inline-flex;margin:0}
.bar span.is-bad{background:linear-gradient(90deg,var(--bad),var(--warn))}

.item-grid{list-style:none;padding:0;margin:1rem 0 1.8rem;display:grid;gap:.4rem;
           grid-template-columns:repeat(auto-fill,minmax(62px,1fr))}
.item-chip{
  display:flex;align-items:center;justify-content:space-between;gap:.35rem;
  padding:.45rem .6rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);font-family:var(--font-mono);font-size:.78rem;
}
.item-chip:hover{border-color:var(--brand);color:var(--text)}
.item-nr{color:var(--text-muted)}
.item-chip.is-ok .item-mark{color:var(--ok)}
.item-chip.is-bad .item-mark{color:var(--bad)}
.item-chip.is-bad{border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.item-chip.is-skipped{opacity:.6}

/* ------------------------------------------------------- Loesungsweg */
/* Nach einem Fehler die wichtigste Flaeche der Seite - deshalb eigener Rahmen. */
.solution{
  margin:1.6rem 0;padding:1.1rem 1.25rem;border-radius:var(--r-lg);
  border:1px solid color-mix(in srgb,var(--brand) 40%,transparent);
  background:var(--brand-soft);
}
.solution.is-quiet{background:var(--surface);border-color:var(--line)}
.solution .eyebrow{margin-bottom:.5rem}
.solution-summary{margin:0 0 .9rem;font-weight:600;font-size:1.05rem;line-height:1.5}
.solution-steps{margin:0;padding-left:1.5rem;display:flex;flex-direction:column;gap:.6rem;
                font-size:1rem;line-height:1.55}
.solution-steps li{padding-left:.2rem}
.solution-steps li::marker{color:var(--brand-text);font-variant-numeric:tabular-nums;font-weight:700}
.solution-code{
  margin:.9rem 0 0;padding:.8rem .9rem;border-radius:var(--r);overflow-x:auto;
  background:var(--bg-alt);border:1px solid var(--line);
  font-family:var(--font-mono);font-size:.9rem;line-height:1.6;tab-size:2;
}
.solution-code::before{
  content:attr(data-lang);display:block;margin-bottom:.4rem;
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);
}
.solution-fold{margin:1.6rem 0}
.solution-fold .solution{margin:.9rem 0 0}

.mnemonic{
  display:flex;gap:.7rem;align-items:baseline;flex-wrap:wrap;
  margin:1.1rem 0;padding:.7rem .9rem;border-radius:var(--r);
  background:var(--surface-2);border-left:3px solid var(--ember);font-size:1rem;line-height:1.55;
}
.mnemonic-label{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ember);flex:none;
}
.source-link{margin:.8rem 0 0}
.source-link a{text-decoration:underline;text-underline-offset:2px}

/* Typischer Denkfehler - warnt, ohne zu schimpfen */
.pattern{
  margin:1.5rem 0;padding:1rem 1.2rem;border-radius:var(--r-lg);
  border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);
  background:color-mix(in srgb,var(--warn) 7%,transparent);
}
.pattern h3{margin:.1rem 0 .4rem}
.pattern p{margin:0;font-size:1rem;line-height:1.62;color:var(--text);max-width:66ch}
.card-pattern{border-color:color-mix(in srgb,var(--warn) 30%,transparent)}

/* Fallstudie: Kontext, der fuer mehrere Fragen gilt */
.case{
  margin:0 0 1.4rem;padding:.9rem 1.1rem;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--line-strong);
}
.case p:last-child{margin:0;font-size:1rem;line-height:1.6;color:var(--text);max-width:66ch}

/* --------------------------------------------- Cockpit je Zertifikat */
.cockpit{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:stretch;margin:1.5rem 0 .5rem}
.gauge{
  flex:none;width:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.25rem;padding:1.2rem;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line-strong);
}
.gauge-value{font-family:var(--font-display);font-size:3rem;line-height:1;font-weight:700;font-variant-numeric:tabular-nums}
.gauge-label{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.gauge.is-ok{border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.gauge.is-ok .gauge-value{color:var(--ok)}
.gauge.is-warn{border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.gauge.is-warn .gauge-value{color:var(--warn)}
.gauge.is-bad{border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.gauge.is-bad .gauge-value{color:var(--bad)}
.gauge-facts{
  flex:1 1 320px;display:grid;gap:.6rem;margin:0;align-content:center;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.gauge-facts div{padding:.7rem .9rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.gauge-facts dt{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.gauge-facts dd{margin:.15rem 0 0;font-size:1.3rem;font-weight:600;font-variant-numeric:tabular-nums;display:flex;flex-direction:column}
.gauge-facts dd span{font-size:.78rem;font-weight:400}

/* ------------------------------------------------- Wiedervorlage */
.due-bar{
  display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;align-items:center;
  margin:0 0 1.8rem;padding:1rem 1.2rem;border-radius:var(--r-lg);
  background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 35%,transparent);
}
.due-count{margin:0;font-family:var(--font-display);font-size:2.4rem;line-height:1;font-weight:700;color:var(--brand-text)}
.due-bar p{margin:0}
.due-list{display:flex;flex-wrap:wrap;gap:.35rem}
.due-list .tag{cursor:pointer}
.due-bar>p.small{flex-basis:100%;max-width:68ch}

/* ------------------------------------------------------- Glossar */
.glossar{display:grid;gap:.5rem;margin:1.5rem 0 0}
.glossar>div{padding:.9rem 1.1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.glossar dt{font-weight:600;color:var(--brand-text)}
.glossar dd{margin:.25rem 0 0;font-size:.93rem;color:var(--text-muted)}

/* -------------------------------------------------- Rollen & Pfade */
.role-head{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:flex-start;justify-content:space-between}
.role-head h2{margin-bottom:.3rem}
.role-salary{text-align:right;flex:none}
.salary-value{margin:0;font-family:var(--font-display);font-size:1.7rem;font-weight:600;font-variant-numeric:tabular-nums}
.role-salary p{margin:0}
.path{list-style:none;padding:0;margin:1.2rem 0 0;display:flex;flex-direction:column;gap:.5rem}
.path-step{
  display:flex;gap:.9rem;align-items:flex-start;padding:.85rem 1rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
}
.path-step.is-core{border-color:color-mix(in srgb,var(--brand) 40%,transparent)}
.path-nr{
  flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);font-family:var(--font-mono);font-size:.78rem;color:var(--text-muted);
}
.path-step.is-core .path-nr{background:var(--brand);color:#fff}
.path-code{margin:0 0 .15rem;font-family:var(--font-mono);font-weight:700;letter-spacing:.03em}
.path-step p{margin:0}

/* ----------------------------------------------- Formularergaenzung */
.form select,.form input[type="date"],.form input[type="search"],
.form-inline input[type="date"],.form-inline input[type="search"]{
  padding:.65rem .8rem;border-radius:var(--r);border:1px solid var(--line-strong);
  background:var(--bg-alt);color:var(--text);font:inherit;font-size:.95rem;
}
.form select:focus,.form input:focus,.form-inline input:focus{outline:2px solid var(--brand);outline-offset:1px}
.flagbox{margin-top:.6rem;color:var(--text-muted);font-size:.88rem;cursor:pointer}
.flagbox input{accent-color:var(--brand);width:16px;height:16px}
.report{margin-top:2.5rem}
.report summary{color:var(--text-muted);font-weight:400;font-size:.86rem}
@media (max-width:560px){
  .role-salary{text-align:left}
  .gauge{width:100%}
}

/* --------------------------------------------------- Gefuehrter Einstieg */
/* Drei Bloecke, grosse Klickflaechen, nichts zum Suchen. Wer hier landet, hat
   sich gerade registriert und soll nach einer Minute wissen, wo es losgeht. */
.start{max-width:min(78ch,100%)}
.start-form{display:flex;flex-direction:column;gap:2.2rem;margin-top:1.5rem}
.start-step{border:0;padding:0;margin:0;min-width:0}
.start-step legend{
  display:flex;align-items:center;gap:.7rem;padding:0;margin:0 0 .4rem;
  font-family:var(--font-display);font-size:1.3rem;font-weight:700;letter-spacing:-.01em;
}
.start-nr{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:1.9rem;height:1.9rem;border-radius:999px;
  background:var(--brand);color:#fff;font-size:.95rem;font-weight:700;
}
.start-step > .small{margin:0 0 1rem;max-width:62ch}

.choice-grid{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.choice-grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.choice{
  display:flex;gap:.8rem;align-items:flex-start;padding:1rem 1.1rem;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .15s ease,background .15s ease;
}
.choice:hover{border-color:var(--brand);background:var(--surface-2)}
.choice input{margin-top:.3rem;accent-color:var(--brand);width:18px;height:18px;flex:none}
.choice:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.choice-body{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.choice-title{font-weight:600;font-size:1.02rem;line-height:1.35}
.choice-text{font-size:.95rem;line-height:1.5;color:var(--text-muted)}
.choice-meta{font-size:.88rem;color:var(--text-muted)}
.start-date{display:flex;flex-direction:column;gap:.4rem;max-width:22rem;font-size:.95rem;color:var(--text-muted);font-weight:600}

/* Das Ergebnis: erst die eine Empfehlung, dann die ganze Strecke. */
.start-pick{
  margin:1.5rem 0 2.5rem;padding:1.4rem 1.5rem;border-radius:var(--r-lg);
  border:1px solid color-mix(in srgb,var(--brand) 45%,transparent);background:var(--brand-soft);
}
.start-pick h2{margin:.1rem 0 .6rem;font-size:clamp(1.3rem,2.6vw,1.7rem);max-width:30ch}
.start-pick-why{margin:0 0 1.1rem;font-size:1.05rem;line-height:1.6;max-width:62ch}
.start-facts{display:flex;flex-wrap:wrap;gap:1.6rem;margin:0 0 1.3rem}
.start-facts div{display:flex;flex-direction:column;gap:.15rem}
.start-facts dt{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.09em;
                text-transform:uppercase;color:var(--text-muted)}
.start-facts dd{margin:0;font-size:1.5rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.start-facts dd .small{display:block;font-size:.85rem;font-weight:400;color:var(--text-muted)}

.start-path{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-direction:column;gap:.6rem}
.start-stop{
  padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);max-width:none;
}
.start-stop.is-now{border-color:color-mix(in srgb,var(--ok) 50%,transparent)}
.start-stop.is-off{opacity:.62}
.start-stop-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.2rem}
.start-stop-title{margin:0;font-size:1.02rem;font-weight:600;line-height:1.4}
.start-stop-title a:hover{color:var(--brand-text)}
.start-stop p{margin:0}
.start-stage{
  margin:0 0 .5rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);
}

/* ------------------------------------------------- Pruefungsleitfaden */
/* Die Fragen, die Menschen sonst woanders googeln. Bewusst als Klapptext:
   wer uebt, braucht sie nicht staendig, wer bucht, findet sie sofort. */
.guide{margin:2rem 0}
.guide-list{display:flex;flex-direction:column;gap:.5rem;margin:1rem 0 0}
.guide-item{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:.9rem 1.1rem}
.guide-item summary{cursor:pointer;font-weight:600;font-size:1.02rem;list-style-position:outside}
.guide-item[open] summary{margin-bottom:.6rem}
.guide-item p{margin:0;font-size:1rem;line-height:1.62;max-width:66ch}
.guide-item p + p{margin-top:.6rem}
.guide-source{margin-top:1rem;font-size:.9rem;color:var(--text-muted)}

/* ------------------------------------------------------------- Der Weg
   Oben im Lernbereich steht kein Prozentwert, sondern drei Dinge, die man
   sofort versteht: heute, Serie, Engpass. Die beiden Zahlen links sind schmal,
   der Text rechts bekommt die Breite - dort steht der naechste Schritt. */
.weg{
  display:grid;gap:1px;margin:0 0 2rem;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.weg>div{background:var(--bg-alt);padding:1.15rem 1.3rem;display:flex;flex-direction:column;gap:.45rem}
.weg-fokus{grid-column:span 2;background:var(--brand-soft)}
.weg-zahl{
  margin:0;font-family:var(--font-display);font-size:2.6rem;line-height:1;font-weight:700;
  color:var(--brand-text);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.45rem;
}
.weg-von{font-size:.95rem;font-weight:500;color:var(--text-muted);font-family:var(--font-body)}
.weg-label{margin:0;font-size:.95rem;color:var(--text)}
.weg p{margin:0}
.weg .bar{margin:.15rem 0 .1rem}
.weg-fokus-titel{margin:0;font-size:1.05rem;line-height:1.4}
.weg-fokus-titel a{font-family:var(--font-mono);font-weight:600}
.weg-fokus-titel .muted{display:block;font-size:.92rem;color:var(--text-muted)}
.weg-reife{margin:0;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.95rem}
.weg-engpass{margin:0;max-width:56ch;line-height:1.6}
.weg-cta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.35rem}
@media (max-width:700px){ .weg-fokus{grid-column:1/-1} }

/* --------------------------------------------------------- Spickzettel
   Auf dem Bildschirm eine normale Seite, auf Papier zwei Spalten und keine
   Flaechen. Gedruckt wird das hier oefter als gelesen. */
.spick-kopf{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;justify-content:space-between}
.spick-cta{display:flex;gap:.5rem;flex-wrap:wrap}
.spick-lede{max-width:62ch}
.spick-block{margin-top:2.4rem}
.spick-block h2{margin-bottom:.6rem}
.spick-bereich{
  margin:1.4rem 0 .5rem;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);font-weight:500;max-width:none;
}
.spick-fallen{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.7rem;
              grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.spick-fallen li{padding:.8rem 1rem;border:1px solid var(--line);border-radius:var(--r);
                 background:var(--surface);break-inside:avoid}
.spick-fallen p{margin:0;max-width:none}
.spick-fall-titel{font-weight:600;color:var(--brand-text);margin-bottom:.3rem !important}
.spick-merk{margin:0;padding-left:1.1rem;display:grid;gap:.4rem}
.spick-merk li{max-width:none;line-height:1.55}
.spick-begriffe{margin:1rem 0 0;display:grid;gap:.55rem;
                grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.spick-begriffe div{break-inside:avoid}
.spick-begriffe dt{font-weight:600;font-family:var(--font-mono);font-size:.9rem}
.spick-begriffe dd{margin:.1rem 0 0;color:var(--text-muted);font-size:.93rem;line-height:1.5}
.spick-fuss{margin-top:2.5rem}

@media print{
  .spick-cta,.spick-lede{display:none !important}
  .spick .table-wrap{border:none;background:none;overflow:visible}
  .spick table.data{min-width:0}
  .spick-fallen,.spick-begriffe{grid-template-columns:1fr 1fr;gap:.5rem}
  .spick-fallen li{border:none;padding:0 0 .4rem;background:none}
  .spick-block{margin-top:1.2rem;break-inside:auto}
  .spick-kopf h1{margin:0}
  .weg{display:none !important}
}

/* -------------------------------------------------------- Lernkapitel
   Lesetext, kein Datenblatt. Deshalb schmale Spalte, ruhige Flaeche und
   Zwischenueberschriften, die den Weg durch den Bereich zeigen. */
.kapitel-nav{margin:2rem 0 2.5rem;padding:1.1rem 1.3rem;border:1px solid var(--line);
             border-radius:var(--r-lg);background:var(--surface)}
.kapitel-nav ol{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.kapitel-nav li{max-width:none}
.kapitel-nav a{display:flex;gap:.7rem;align-items:baseline;color:var(--text);line-height:1.45}
.kapitel-nav a:hover{color:var(--brand-text)}
.kapitel-nr{font-family:var(--font-mono);font-size:.78rem;color:var(--text-muted);min-width:1.4em}

.kapitel{margin:0 0 3.5rem;scroll-margin-top:5rem}
.kapitel-kopf{margin-bottom:1rem}
.kapitel-kopf h2{margin:.2rem 0 0;max-width:28ch}
.kapitel-text p{font-size:1.05rem;line-height:1.72;max-width:68ch;margin:0 0 1rem}
.kapitel-kern{margin:1.4rem 0;padding:1.1rem 1.3rem;border-left:3px solid var(--brand);
              background:var(--surface);border-radius:0 var(--r) var(--r) 0}
.kapitel-kern-titel{margin:0 0 .6rem;font-family:var(--font-mono);font-size:.72rem;
                    letter-spacing:.1em;text-transform:uppercase;color:var(--brand-text);font-weight:600}
.kapitel-kern ul{margin:0;padding-left:1.1rem;display:grid;gap:.5rem}
.kapitel-kern li{line-height:1.6;max-width:64ch}
.kapitel-blick{margin:1.2rem 0 0;padding:.9rem 1.1rem;border:1px dashed var(--line-strong);
               border-radius:var(--r);font-size:.97rem;line-height:1.62;max-width:68ch}
.kapitel-blick span{display:block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
                    text-transform:uppercase;color:var(--text-muted);margin-bottom:.35rem}
.kapitel-cta{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:1.2rem}

@media print{
  .kapitel-nav{display:none !important}
  .kapitel{break-inside:auto;margin-bottom:1.6rem}
  .kapitel-kern,.kapitel-blick{background:none;break-inside:avoid}
  .kapitel-cta{display:none !important}
}

/* Der Bewertungshinweis im Pruefungsleitfaden: eine Einordnung, keine Aussage
   des Anbieters. Deshalb leiser gesetzt als der Rest des Absatzes. */
.guide-note{font-size:.93rem;color:var(--text-muted);border-left:2px solid var(--line-strong);
            padding-left:.8rem;margin-top:.6rem}

/* ------------------------------------------------------- Wasserzeichen
   Liegt hinter dem Text, nicht darueber: Lesbarkeit geht vor. Die Deckkraft
   ist so gewaehlt, dass es beim Lesen nicht stoert, in einem Bildschirmfoto
   aber lesbar bleibt. Im Ausdruck darf es deutlicher sein, dort ist es der
   eigentliche Zweck. */
.wm{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
    user-select:none;-webkit-user-select:none}
.wm-raster{
  position:absolute;top:-30%;left:-30%;width:160%;height:160%;
  display:flex;flex-wrap:wrap;align-content:space-around;justify-content:space-around;
  gap:3.5rem 2.5rem;transform:rotate(-24deg);
}
.wm-raster span{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;white-space:nowrap;
  color:var(--text);opacity:.055;
}
[data-theme="light"] .wm-raster span{opacity:.07}
/* Der Inhalt steht darueber, sonst laege das Zeichen im Text. */
.topbar,main,.footer,.flash{position:relative;z-index:1}

@media (prefers-contrast:more){ .wm{display:none} }
@media print{
  .wm{position:fixed}
  .wm-raster span{opacity:.13;color:#000}
}

/* --------------------------------------------------- Verwaltungsnavigation
   Die Verwaltung hat drei Seiten statt einer Wand aus Tabellen. */
.admin-nav{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.5rem 0 2rem;
           border-bottom:1px solid var(--line);padding-bottom:.6rem}
.admin-nav a{padding:.45rem .85rem;border-radius:var(--r-sm);color:var(--text-muted);font-size:.95rem}
.admin-nav a:hover{background:var(--surface);color:var(--text)}
.admin-nav a[aria-current]{background:var(--brand-soft);color:var(--brand-text);font-weight:600}
.koeder-kopf{margin-top:2rem}

/* ------------------------------------------------ Kunden und Lizenzen
   Formulare mit vielen kurzen Feldern: nebeneinander statt untereinander,
   sonst scrollt man fuer eine Lizenz durch eine halbe Seite. */
.lizenz-form{display:grid;gap:.9rem 1.1rem;margin:1.5rem 0;
             grid-template-columns:repeat(auto-fit,minmax(190px,1fr));align-items:end}
.lizenz-form label{display:flex;flex-direction:column;gap:.35rem;
                   font-size:.9rem;color:var(--text-muted);font-weight:600}
.lizenz-form input,.lizenz-form select{
  padding:.65rem .8rem;border-radius:var(--r);border:1px solid var(--line-strong);
  background:var(--bg-alt);color:var(--text);font:inherit;font-size:.98rem;
}
.lizenz-form .lizenz-weit{grid-column:1/-1}
.lizenz-form button{align-self:end}
@media (max-width:560px){ .lizenz-form{grid-template-columns:1fr} }

.code-gross{margin:1.5rem 0;padding:1.2rem 1.4rem;border-radius:var(--r-lg);
            background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 35%,transparent)}
.code-wert{margin:.2rem 0 .5rem;font-family:var(--font-mono);font-size:1.9rem;
           font-weight:700;letter-spacing:.06em;color:var(--brand-text)}
.code-feld{display:flex;flex-direction:column;gap:.25rem}
.code-feld input{padding:.6rem .8rem;border-radius:var(--r);border:1px solid var(--line-strong);
                 background:var(--bg-alt);color:var(--text);font-family:var(--font-mono);
                 font-size:1rem;letter-spacing:.05em;min-width:15ch}

/* ------------------------------------------------------------- Preise
   Drei Karten nebeneinander, die mittlere hervorgehoben. Kein Countdown,
   kein durchgestrichener Preis: Die Karte muss durch Inhalt ueberzeugen. */
.preis-grid{display:grid;gap:1.1rem;margin:2rem 0;
            grid-template-columns:repeat(auto-fit,minmax(270px,1fr));align-items:start}
.preis{padding:1.4rem 1.5rem;border:1px solid var(--line);border-radius:var(--r-lg);
       background:var(--surface);display:flex;flex-direction:column;gap:.9rem}
.preis.is-empfehlung{border-color:color-mix(in srgb,var(--brand) 55%,transparent);
                     background:var(--brand-soft)}
.preis.is-jetzt{box-shadow:0 0 0 2px var(--brand-text) inset}
.preis header{display:flex;flex-direction:column;gap:.3rem}
.preis-name{margin:0;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em;
            text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:.5rem}
.preis-wert{margin:0;font-family:var(--font-display);font-size:2.3rem;font-weight:700;
            line-height:1;color:var(--text);display:flex;align-items:baseline;gap:.5rem}
.preis-wert span{font-family:var(--font-body);font-size:.92rem;font-weight:500;color:var(--text-muted)}
.preis-liste{margin:0;padding-left:1.1rem;display:grid;gap:.45rem}
.preis-liste li{line-height:1.55;max-width:none;font-size:.97rem}
.preis-alternativ{margin:0;padding:.7rem .9rem;border-radius:var(--r);
                  background:var(--surface-2);font-size:.95rem}
.preis-fuss{margin:0;font-size:.92rem;line-height:1.6;color:var(--text-muted)}

/* Die Sperrseite bleibt schmal: Es geht um einen Absatz, nicht um ein Regal. */
.sperre .lede,.sperre p{max-width:62ch}

/* -------------------------------------------------- Nutzungsbedingungen
   Ein langer Lesetext. Schmale Spalte, klare Zwischenueberschriften, Listen
   mit Luft: Was man nicht liest, wirkt im Streitfall auch nicht. */
.agb h2{margin:2.2rem 0 .6rem;font-size:1.25rem;max-width:34ch}
.agb p{max-width:68ch;line-height:1.7}
.agb ul{margin:.6rem 0 1rem;padding-left:1.2rem;display:grid;gap:.5rem}
.agb li{max-width:66ch;line-height:1.65}
.agb .note{margin-top:2.5rem}

/* Der Hinweis unter dem Einloesefeld gehoert in die volle Breite. */
.code-hinweis{flex-basis:100%;align-items:flex-start;font-size:.9rem;line-height:1.55;margin-top:.4rem}
.code-hinweis input{margin-top:.2rem}
.code-hinweis span{max-width:64ch}

/* Kaufknoepfe auf der Preisseite: drei Laufzeiten nebeneinander, die
   empfohlene hervorgehoben. Sie stehen im Fluss der Karte, nicht als Balken. */
.preis-kauf{display:flex;flex-wrap:wrap;gap:.5rem;margin:.3rem 0}
.preis-kauf form{margin:0}
.preis-kauf .btn{white-space:nowrap}