/* Theme "Ruhig" – informatik-pruefung.de (lädt nach style.css). Tafel-Schwarz, Gelb als einziger Akzent, klare Struktur. */
:root{
  --bg:#141414; --bg2:#0a0a0a; --panel:#0a0a0a; --panel2:#1c1c1c; --line:#2c2c2c; --line2:#444;
  --txt:#fff; --mut:#bbb; --dim:#8c8c8c;
  --gold:#ffb800; --gold2:#ffc933; --goldbg:rgba(255,184,0,.1);
  --paper:#fff; --paper2:#f4f4f2; --ink:#111; --ink2:#555; --pline:#ddd;
  --r:0px; --font:'Roboto',system-ui,sans-serif; --slab:'Roboto Slab',Georgia,serif;
}
body{background:#151515;font-family:var(--font)}
h1,h2,h3,h4,.card h4,.group-head h2,.a-head h2,.ua-nr,.note-ring b,.rh-txt h2,.modal-box h3,.sec,.stat b{font-family:var(--slab)}
h1,h2,h3,h4{font-weight:700}

/* Logo + Kopfzeile */
.topbar{background:#0a0a0a;border-bottom:1px solid var(--line);backdrop-filter:none}
.brand{padding:0}.brand img{height:50px;display:block}
.brand-dot{display:none}
.topbar-title{color:#ddd;letter-spacing:.14em}
@media(max-width:700px){.topbar-title{display:none}}

/* Flach & eckig */
.panel,.card,.thema-card,.maintab,.train-start,.drill-card,.modal-box,.resume,.hist-row,.seg,.result-hero,.calc{border-radius:0}
.seg-btn,.chip,.btn,.btn-submit,.btn-check,.tool-btn,.icon-btn,.opt,.sheet input[type=text],.sheet select,.sheet textarea,.pair .l,.rz,.fb,.a-ctx,.d-card,.paper,.sheet,.nav-a,.meta-chip,.badge,.a-pts,.ua-pts,.ua-nr,.flag,.optres div,.modal-list,.toast,.calc-grid button,.calc-display,.d,.hist-note,.ns-row .nn,.bar,.bar i,.mbar,.mbar i,.pill{border-radius:0!important}
.btn,.btn-submit,.btn-check,.chip,.badge,.panel h3{text-transform:uppercase;letter-spacing:.04em}
.btn{font-weight:700}
.btn.gold,.btn-submit,.badge{background:var(--gold);color:#111}
.btn.gold:hover,.btn-submit:hover{background:var(--gold2)}
.btn.ghost{border:2px solid #555}.btn.ghost:hover{border-color:var(--gold)}
.chip{border-width:1px;font-weight:700}.chip.active{background:var(--gold);color:#111;border-color:var(--gold)}
.panel h3{color:var(--gold)}

/* ── Startseite: ruhig und gegliedert ── */
.start-wrap{max-width:1040px;gap:1.4rem;padding-top:2.4rem}
.hero h1{font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:800;letter-spacing:0;max-width:none}
.hero h1 em{color:var(--gold)}
.hero p{font-size:1rem;color:var(--mut);max-width:60ch;margin-top:.5rem}

.maintabs{gap:0;border-bottom:1px solid var(--line);margin:.4rem 0 0}
.maintab{border:0;border-bottom:3px solid transparent;background:transparent;padding:.7rem 1.4rem .7rem 0;margin-right:1.4rem}
.maintab b{font-size:.95rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.maintab span{display:none}
.maintab.active{background:transparent;border-bottom-color:var(--gold)}
.maintab.active b{color:#fff}

/* Auswahlleiste: eine Zeile */
.selector{gap:1rem 2rem;padding:.2rem 0 .4rem}
.seg{background:transparent;border:0;padding:0;gap:0}
.seg-btn{border:1px solid var(--line2);color:var(--mut);padding:.55rem 1.4rem;flex-direction:row;align-items:center;gap:.5rem;margin-left:-1px}
.seg-btn b{font-size:.95rem}
.seg-btn span{display:none}
.seg-btn small{font-size:.75rem;opacity:.7}
.seg-btn:hover{color:#fff}
.seg-btn.active{background:var(--gold);color:#111;border-color:var(--gold);position:relative;z-index:1}
.modus-lbl{display:none}
.chip{padding:.5rem 1rem}

/* Bereichsinfo: eine ruhige Zeile */
.bereich-info{font-size:.88rem;color:var(--dim);max-width:75ch;padding:0}
.bereich-info .pill{background:transparent;border:1px solid var(--line2);color:var(--mut);font-weight:500}
.bereich-info br{display:none}
.bereich-info span[style]{margin-top:.6rem!important;color:var(--dim)}

/* Gruppen */
.group{margin:1.6rem 0 0}
.group-head{border-bottom:1px solid var(--line);padding-bottom:.6rem;margin-bottom:1rem;align-items:baseline}
.group-head h2{font-size:1.25rem}
.group-head span{font-size:.82rem;color:var(--dim)}

/* Prüfungssätze als Liste */
.cards{display:flex;flex-direction:column;gap:.7rem}
.card{display:grid;grid-template-columns:minmax(0,1fr) 210px;grid-template-areas:"top foot" "title foot" "desc foot" "meta foot";column-gap:1.6rem;align-items:start;padding:1.2rem 1.4rem;background:#0a0a0a;border:1px solid var(--line);gap:.5rem 1.6rem;overflow:visible}
.card:hover{border-color:var(--gold);transform:none;background:#0d0d0d}
.card-top{grid-area:top;justify-content:flex-start;gap:1rem}
.card-nr{order:-1;color:var(--gold);text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:.78rem}
.diff{color:var(--mut)}
.card h4{grid-area:title;font-size:1.15rem;line-height:1.3}
.card p{grid-area:desc;-webkit-line-clamp:2;color:var(--mut);font-size:.9rem}
.card-meta{grid-area:meta;margin-top:.2rem;gap:.4rem}
.meta-chip{background:transparent;border:1px solid var(--line);color:var(--mut);font-weight:500}
.card-foot{grid-area:foot;align-self:stretch;flex-direction:column;align-items:stretch;justify-content:space-between;gap:1rem;border-top:0;border-left:1px solid var(--line);padding:0 0 0 1.6rem;font-size:.85rem;color:var(--dim)}
.card-foot .go{background:var(--gold);color:#111;text-align:center;padding:.65rem 1rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.82rem}
.card:hover .card-foot .go{background:var(--gold2)}
@media(max-width:760px){
  .card{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "title" "desc" "meta" "foot"}
  .card-foot{border-left:0;border-top:1px solid var(--line);padding:.8rem 0 0;flex-direction:row;align-items:center}
}

/* Prüfungsansicht */
.exam-bar{background:#0a0a0a}
.eb-timer{background:transparent;border:2px solid var(--gold);border-radius:0}
.timer-dot{border-radius:0}
.prog{height:4px;background:#2c2c2c}.prog>div{background:var(--gold)}
.rail,.side{background:#0a0a0a}
.nav-a.aktiv{border-color:var(--gold)}
.d-done{background:var(--gold);border-color:var(--gold);color:#111}
.sheet-wrap{background:#141414}
.sheet{box-shadow:none;border:1px solid #333}
.a-ctx{border-left:0;border-top:3px solid var(--gold)}
.ua-nr{background:var(--gold);color:#111}
.opt:has(input:checked){border-color:var(--gold);background:#fff8e1}
.opt input{accent-color:#111}
.sheet input[type=text]:focus,.sheet select:focus,.sheet textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,184,0,.25)}
.btn-check{background:#111;color:#fff}
.side-tab.active{color:var(--gold);border-color:var(--gold)}
.calc-grid button.eq{background:var(--gold);color:#111}
.paper{box-shadow:none}

/* Auswertung */
.result-hero{background:#0a0a0a}
.note-ring{border-radius:0;border-width:6px;background:transparent}
.scale-bar,.scale-bar i{border-radius:0}
.toast{border-color:var(--gold)}

/* Hauptmenü wie auf informatik-pruefung.de */
.topstrip{background:#232323;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem clamp(1rem,4vw,2.5rem);font-size:.82rem;color:#ddd}
.topstrip a{color:#ddd;text-decoration:none}.topstrip a:hover{color:var(--gold)}
.topstrip span{display:flex;align-items:center;gap:.8rem}.topstrip i{width:1px;height:14px;background:#666}
.topbar{gap:1.5rem}
.mainnav{display:flex;align-items:center;gap:1.8rem;margin-left:auto;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.mainnav::-webkit-scrollbar{display:none}
.mainnav a{color:#fff;text-decoration:none;text-transform:uppercase;font-size:.9rem;padding:.4rem 0;border-bottom:2px solid transparent;font-weight:500}
.mainnav a:hover{color:var(--gold)}
.mainnav a.on{color:var(--gold);border-bottom-color:var(--gold)}
.topbar-title{display:none}
@media(max-width:700px){.topstrip a[href^=mailto]{display:none}.topstrip{justify-content:flex-end}.mainnav{gap:1.1rem}.brand img{height:40px}}

/* ── Final: Variante 1a (Karten-Raster, Tafel) ── */
.hero h1{font-size:clamp(2rem,4.4vw,3rem);line-height:1.1}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem}
.card{display:flex;flex-direction:column;gap:.7rem;padding:1.5rem;min-height:210px;grid-template-columns:none;grid-template-areas:none}
.card-top{justify-content:space-between}
.card-nr{order:0}
.card h4{font-size:1.2rem}
.card p{font-size:.88rem;-webkit-line-clamp:3}
.card-meta{margin-top:auto}
.card-foot{flex-direction:row;align-items:center;justify-content:space-between;border-left:0;border-top:1px solid var(--line);padding:.8rem 0 0;align-self:auto}
.card-foot .go{background:transparent;color:var(--gold);padding:0;text-align:right;font-weight:500;text-transform:none;letter-spacing:0;font-size:.9rem}
.card:hover .card-foot .go{background:transparent;color:var(--gold2)}
.eb-timer{border:0;background:transparent;padding:0}
.eb-timer #timer-val{color:var(--gold);font-size:1.7rem}
.eb-timer.crit #timer-val{color:#ff8b97}

/* Kopfbereich deckungsgleich mit informatik-pruefung.de */
:root{--hpad:max(1.2rem,calc((100% - 1280px)/2))}
.topstrip{background:#2a2a2a;padding:.75rem var(--hpad);font-size:.9rem;color:#e6e6e6;justify-content:space-between}
.topstrip a{display:inline-flex;align-items:center;gap:.45rem;color:#e6e6e6}
.topstrip .ts-l,.topstrip .ts-r{display:flex;align-items:center;gap:1.4rem}
.topstrip .ts-r{gap:1rem}.topstrip i{height:22px}
.topbar{background:#131313;border-bottom:0;padding:.9rem var(--hpad)}
.brand img{height:72px}
.mainnav{gap:2.3rem}
.mainnav a{font-size:.95rem;font-weight:500;letter-spacing:0}
.mainnav a.sub::after{content:'';display:inline-block;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);margin-left:.55rem}
@media(max-width:700px){.brand img{height:44px}.topstrip .ts-l a:first-child{display:none}.topstrip{font-size:.8rem}}

/* Aufklappmenüs: weiße Panels wie auf informatik-pruefung.de */
:root{--hpad:max(1.2rem,calc((100% - min(66%,1300px))/2))}
.mainnav{overflow:visible;white-space:nowrap}
.mainnav>a:hover,.mainnav .mi>a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.mainnav .mi{position:relative;display:flex;align-items:center}
.mainnav ul{list-style:none;margin:0;padding:0}
.mainnav .dd,.mainnav .dd ul{display:none;position:absolute;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.35);min-width:210px;z-index:200;text-align:left;padding:12px 0}
.mainnav .dd{top:100%;left:-1.9rem}
.mainnav .mi:hover>.dd,.mainnav .mi:focus-within>.dd{display:block}
.mainnav .dd li{position:static}
.mainnav .dd li>a{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;padding:.5rem 15px .5rem 22px;border:0;font-size:.98rem;line-height:1.4;text-transform:none;font-weight:400;color:#111;white-space:nowrap}
.mainnav .dd li:hover>a,.mainnav .dd li>a:hover{color:var(--gold);background:transparent}
.mainnav .dd li.has>a::after{content:'';width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);flex:none;margin:0}
.mainnav .dd li>ul{left:100%;top:12px;right:auto}
.mainnav .dd li:hover>ul,.mainnav .dd li:focus-within>ul{display:block}
.mainnav .dd li li>ul{top:12px}
@media(max-width:900px){.mainnav .dd{display:none!important}.mainnav{overflow-x:auto}}

/* Maße 1:1 zur Hauptseite */
.topstrip{height:37px;padding:0 var(--hpad);font-size:.81rem;align-items:center}
.topstrip a{gap:.25rem}
.topstrip a svg{width:14px;height:14px;flex:none}
.topstrip .ts-l{gap:1.2rem}.topstrip .ts-r{gap:.9rem}.topstrip i{height:14px}
.topbar{height:48px;padding:0 var(--hpad);background:#161616;align-items:center}
.brand img{height:34px}
.mainnav{gap:2rem;height:100%}
.mainnav .mi{height:100%}
.mainnav>a,.mainnav .mi>a{font-size:.875rem;font-weight:400;padding:.3rem 0;display:inline-flex;align-items:center}
.mainnav a.sub::after{margin-left:.4rem;width:6px;height:6px}
.mainnav a.on{color:#fff;border-bottom-color:transparent}
.mainnav>a.on:hover{color:var(--gold);border-bottom-color:var(--gold)}
@media(max-width:700px){.brand img{height:30px}.topstrip{height:auto;padding:.5rem 1.2rem}}

/* Feinabstimmung nach Pixelvergleich */
.topstrip{height:50px}
.topbar{height:72px}
.brand img{height:47px}
.mainnav{gap:2.4rem}
.mainnav>a,.mainnav .mi>a{font-weight:500}
@media(max-width:700px){.brand img{height:34px}.topbar{height:56px}}

/* Kontaktleiste 1:1 */
.topstrip .ts-l{gap:.7rem}
.topstrip .ts-l a:last-child{gap:.45rem}
.topstrip .ts-l a svg{width:17px;height:17px}
.topstrip .ts-r{gap:1rem}
.topstrip .ts-r a{gap:.05rem}
.topstrip .ts-r a svg{width:16px;height:16px;align-self:flex-start;margin-top:.55rem}
.topstrip i{height:28px;width:1px;background:#e6e6e6}

/* Farben nach Pixelmessung der Hauptseite */
.topstrip{background:#222}
.topbar{background:#0b0b0b}

/* Farben aus Pixelmessung der Hauptseite */
.topstrip,.topstrip a{color:#ababab}
.topstrip a:hover{color:var(--gold)}
.topstrip i{background:#e7e7e7}
.topbar{background:linear-gradient(90deg,#0c0c0c 8%,#1d1d1d 39%,#252525 50%,#0d0d0d 93%)}

/* Registrieren | Anmelden 1:1 */
.topstrip .ts-r{gap:1.2rem;margin-right:.35rem}
.topstrip .ts-r a{gap:0}
.topstrip .ts-r a svg{align-self:center;margin:0 -1px 0 0;position:relative;top:-3px;width:16px;height:16px}
.topstrip i{height:20px}

.topbar{background:linear-gradient(90deg,#070707 0%,#0b0b0b 6%,#0e0e0e 14%,#171717 27%,#1f1f1f 39%,#242424 50%,#1e1e1e 66%,#151515 78%,#0e0e0e 89%,#0b0b0b 95%,#090909 100%)}

/* Personen-Symbole sind auf der Hauptseite schwarz */
.topstrip .ts-r a svg{color:#000;stroke:#000}
.topstrip .ts-r a:hover svg{color:#000}