/* LehrLynx Gestaltung v33 – wird als letztes Stylesheet geladen.
   Farben ausschließlich über Variablen aus farbansichten.css bzw. lehrlynx.css. */

/* ---------- Farbansicht-Umschalter im Kopfbereich ---------- */
.ansicht{position:relative;flex:none;margin-left:6px}
.ansicht-button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 13px;border-radius:999px;border:1px solid var(--dark-border);background:transparent;color:var(--text-secondary);font:inherit;font-size:.9rem;font-weight:700;cursor:pointer}
.ansicht-button:hover,.ansicht-button[aria-expanded="true"]{color:var(--text-primary);border-color:var(--tech-blue)}
.ansicht-icon{width:18px;height:18px;flex:none}
.ansicht-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:80;width:min(320px,calc(100vw - 32px));padding:14px;border-radius:18px;border:1px solid var(--dark-border);background:var(--dark-card);box-shadow:var(--shadow)}
.ansicht-panel[hidden]{display:none}
.ansicht-title{margin:2px 4px 10px;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.ansicht-options{display:grid;gap:8px}
.ansicht-option{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;border:1px solid var(--dark-border);cursor:pointer;color:var(--text-primary)}
.ansicht-option:hover{border-color:var(--tech-blue)}
.ansicht-option:has(input:checked){border-color:var(--tech-green);box-shadow:inset 0 0 0 1px var(--tech-green)}
.ansicht-option input{position:absolute;opacity:0;pointer-events:none}
.ansicht-option:has(input:focus-visible){outline:3px solid var(--tech-blue);outline-offset:2px}
.ansicht-text{display:grid;line-height:1.3}
.ansicht-text strong{font-size:.95rem}
.ansicht-text small{color:var(--text-secondary);font-size:.8rem}
/* Vorschaufelder zeigen die Ansicht unabhängig von der gerade aktiven Ansicht */
.ansicht-swatch{display:inline-flex;flex:none;width:46px;height:30px;border-radius:9px;overflow:hidden;border:1px solid rgba(127,127,127,.45)}
.ansicht-swatch i{flex:1}
.ansicht-swatch-original i:nth-child(1){background:#080b11}.ansicht-swatch-original i:nth-child(2){background:#111722}.ansicht-swatch-original i:nth-child(3){background:#00b4d8}
.ansicht-swatch-hell i:nth-child(1){background:#f3f6f9}.ansicht-swatch-hell i:nth-child(2){background:#ffffff}.ansicht-swatch-hell i:nth-child(3){background:#007d99}
.ansicht-swatch-kontrast i:nth-child(1){background:#000000}.ansicht-swatch-kontrast i:nth-child(2){background:#ffffff}.ansicht-swatch-kontrast i:nth-child(3){background:#4fe3ff}
.ansicht-note{margin:12px 4px 2px;color:var(--text-secondary);font-size:.8rem;line-height:1.5}
.ansicht-deko{margin-top:14px;padding-top:12px;border-top:1px solid var(--dark-border)}
.ansicht-deko[hidden]{display:none}
.ansicht-deko-schalter{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 12px;border-radius:14px;border:1px solid var(--dark-border);background:none;color:var(--text-primary);font:inherit;text-align:left;cursor:pointer}
.ansicht-deko-schalter:hover{border-color:var(--tech-blue)}
.ansicht-deko-schalter:focus-visible{outline:3px solid var(--tech-blue);outline-offset:2px}
.ansicht-deko-spur{position:relative;flex:none;width:46px;height:26px;border-radius:999px;background:var(--dark-border);transition:background .2s}
.ansicht-deko-spur span{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--text-secondary);transition:transform .2s,background .2s}
.ansicht-deko-schalter[aria-checked="true"]{border-color:var(--tech-green);box-shadow:inset 0 0 0 1px var(--tech-green)}
.ansicht-deko-schalter[aria-checked="true"] .ansicht-deko-spur{background:var(--tech-green)}
.ansicht-deko-schalter[aria-checked="true"] .ansicht-deko-spur span{transform:translateX(20px);background:var(--text-primary)}
.ansicht-deko-mehr{display:inline-flex;align-items:center;min-height:44px;margin:4px 4px 0;color:var(--tech-blue);font-size:.85rem;font-weight:700}
@media (prefers-reduced-motion:reduce){.ansicht-deko-spur,.ansicht-deko-spur span{transition:none}}
.ansicht-consent{padding:0;border:0;background:none;color:var(--tech-blue);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.ansicht-inline .ansicht-options{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
@media (max-width:1180px){.site-header .navbar>.ansicht{order:1;margin-left:auto;margin-right:8px}.site-header .navbar>.nav-toggle{order:2}.site-header .navbar>.nav-links{order:5}}
@media (max-width:520px){.ansicht-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.ansicht-button{padding:9px 11px}}

/* ---------- Kompaktere Kopfbereiche: Inhalte erscheinen früher ---------- */
.page-hero{padding-top:30px;padding-bottom:26px}
.page-hero h1{font-size:clamp(2rem,3.9vw,3.25rem);line-height:1.06}
.page-hero>div>p{font-size:clamp(1rem,1.5vw,1.14rem);margin-top:16px}
.path-hero{padding-top:26px;padding-bottom:24px}
.path-hero h1{font-size:clamp(1.9rem,3.6vw,3rem)}
.legal-hero h1{font-size:clamp(1.9rem,3.6vw,3rem)}
@media (max-width:700px){
  .page-hero{padding-top:20px;padding-bottom:18px}
  .page-hero h1,.path-hero h1{font-size:1.85rem}
  .page-hero>div>p{font-size:1rem}
}

/* ---------- Kompakter Speicherhinweis ---------- */
.consent-bar-inner{padding:12px 20px;gap:10px 18px}
.consent-text{font-size:.88rem;line-height:1.5}
@media (max-width:700px){
  .consent-bar-inner{padding:12px 16px}
  .consent-actions{width:100%}
  .consent-btn{flex:1 1 0;min-height:42px;padding:9px 12px}
}

/* ---------- Hell: Zeichnungen auf dunkler Zeichenfläche ---------- */
:root[data-farbansicht="hell"] svg:not(.ansicht-icon):not(.circuit-art):not([data-flach]){background-color:#0f1823;border-radius:12px}
:root[data-farbansicht="hell"] body::before{opacity:.35}
:root[data-farbansicht="hell"] .site-header{box-shadow:0 1px 0 rgba(16,32,48,.06)}
:root[data-farbansicht="hell"] .circuit-art{filter:saturate(1.2) brightness(.8)}

/* ---------- Kontrast: deutlich sichtbarer Fokus und Unterstreichung ---------- */
:root[data-farbansicht="kontrast"] :focus-visible{outline:3px solid #ffd400!important;outline-offset:3px}
:root[data-farbansicht="kontrast"] main a:not([class]){text-decoration-thickness:2px}
:root[data-farbansicht="kontrast"] body::before{display:none}

@media print{.ansicht{display:none!important}}

/* ---------- Feinabstimmung v33 ---------- */
@media (max-width:700px){.ansicht-panel{position:fixed;left:16px;right:16px;top:72px;width:auto;max-height:calc(100vh - 88px);max-height:calc(100dvh - 88px);overflow-y:auto}}
:root[data-farbansicht="hell"] body{background:radial-gradient(circle at 14% 5%,rgba(0,125,153,.07),transparent 32%),radial-gradient(circle at 87% 9%,rgba(122,51,184,.045),transparent 30%),linear-gradient(180deg,#f4f7fa 0%,#eef2f6 60%,#f3f6f9 100%)}
/* Hell: Schaltflächen auf Fach- bzw. Pfadfarbe bekommen weiße Schrift */
:root[data-farbansicht="hell"] [data-subject] :is(.wk-btn.primary,.lc-btn.primary,.path-btn.primary,.lab-primary),
:root[data-farbansicht="hell"] .path-btn.primary{color:#fff}
:root[data-farbansicht="hell"] :where(.gradient-text){background-image:linear-gradient(90deg,var(--tech-blue),var(--tech-green))}

/* Frage melden */
.frage-melden{margin:10px 0 0;font-size:.84rem}
.frage-melden a{color:var(--text-muted);text-decoration:underline;text-underline-offset:3px}
.frage-melden a:hover{color:var(--tech-blue)}
/* Lernstufe Rookie bis Profi (v34) */
.stufe-badge{display:inline-block;margin-left:6px;padding:2px 9px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.04em;vertical-align:middle;background:var(--tech-green);color:var(--dark-bg)}
.stufe-badge[hidden]{display:none}
.route-card.ist-meine-stufe{border-color:var(--tech-green);box-shadow:inset 0 0 0 1px var(--tech-green)}
.home-level-more{display:flex;flex-wrap:wrap;gap:8px 22px;margin:18px 0 0}
.home-level-more a{font-weight:700}
/* Downloads: Arbeitsblatt-Generator (v34) */
.download-zwei{margin:0 0 18px}
.download-neu{display:grid;gap:6px;padding:20px 22px;border-radius:var(--radius-lg,18px);border:1px solid var(--tech-green);background:var(--dark-card);text-decoration:none;color:var(--text-primary)}
.download-neu strong{font-size:1.25rem}
.download-neu span:not(.eyebrow):not(.route-arrow){color:var(--text-secondary)}
.download-neu .route-arrow{font-weight:800;color:var(--tech-green)}
.download-neu:hover{box-shadow:inset 0 0 0 1px var(--tech-green)}
/* Offline-App (v34) */
.off-box{margin:12px 0}
.off-haken{display:flex;gap:8px;align-items:center;margin:8px 0;color:var(--text-primary)}
.off-haken input{width:18px;height:18px;accent-color:var(--tech-green)}
.off-klein{font-size:.9rem;color:var(--text-muted)}
.off-balken{height:10px;border-radius:999px;background:var(--dark-border);overflow:hidden;margin-top:6px}
.off-balken span{display:block;height:100%;width:0;background:var(--tech-green);transition:width .2s}
.off-hilfe{margin-top:10px}
.off-hilfe summary{cursor:pointer;font-weight:700}
.home-offline{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between;padding:16px 20px;border-radius:var(--radius-lg,18px);border:1px dashed var(--dark-border);background:var(--dark-card)}
.home-offline p{margin:0;color:var(--text-secondary)}
.home-offline a{font-weight:800;white-space:nowrap}
/* Fachenglisch in Erklärungen (v34) */
.wk-en,.glossary-en{margin:6px 0}
.wk-en span[lang=en],.glossary-en span[lang=en]{font-weight:700;color:var(--tech-green)}
.wk-en small,.glossary-en small{color:var(--text-muted)}
/* Werkzeugbilder (v34) */
.lc-pocket img{display:block;width:120px;height:120px;max-width:100%;object-fit:cover;border-radius:14px;box-shadow:0 6px 14px rgba(0,0,0,.35)}
.wk-grafik{margin:0 0 14px}
.wk-grafik img{display:block;width:100%;max-width:240px;height:auto;border-radius:16px}
.wk-bildnachweis{font-size:.82rem;color:var(--text-muted);margin-top:18px}
@media (max-width:640px){.lc-pocket img{width:94px;height:94px}}
/* v48: Bauteil-Details und Wissensabschnitte in der Hell-Ansicht – Themenfarben auf Weiß mit ausreichendem Kontrast */
:root[data-farbansicht="hell"] .lc-item-detail[data-subject],:root[data-farbansicht="hell"] .bc-knowledge[data-subject]{background:#ffffff}
:root[data-farbansicht="hell"] .lc-item-detail[data-subject] :is(h3,h4,a,.wk-term,[data-term]),:root[data-farbansicht="hell"] .bc-knowledge[data-subject] :is(h3,h4,a,.wk-term,[data-term],.bc-subject){filter:brightness(.82)}
/* v57 Release-Prüfung: Sprunglink im hellen Modus mit heller Schrift (Kontrast ≥ 4,5:1 auf Akzentfläche) */
html[data-farbansicht="hell"] .skip-link{color:#ffffff}