/* ============================================================
   DESIGN TOKENS – alle Konstanten, kein Magic Number
   ============================================================ */
:root {
  /* Voltklar Brand – Cyan Akzent, Off-White BG (Light Mode) */
  --brand:        #00B8D4;
  --brand-hover:  #0097A7;
  --accent:       #00E5FF;
  --accent-dark:  #00B8D4;
  --accent2:      #00B8D4;
  --bg-app:       #F1F5F9;
  --bg1:          #ffffff;
  --bg2:          #e5eaf0;
  --bg3:          #d4dbe4;
  --text1:        #0a0a0a;
  --text2:        #5a6273;
  --border:       rgba(0,0,0,0.11);
  --radius:       10px;
  --radius-card:  14px;
  --shadow-sm:    0 1px 4px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.10);

  /* Bot-Farben */
  --bjoern:       #e8b400;
  --flopsi:       #dc2626;
  --marko:        #00E5FF;

  /* Timing */
  --t-fast:       0.12s;
  --t-norm:       0.20s;

  /* Schaltplan-SVG */
  --sp-wire:      #0a0a0a;
}

[data-theme="dark"] {
  --brand:    #00E5FF;
  --brand-hover: #33EEFF;
  --bg-app:   #0a0a0a;
  --bg1:      #121212;
  --bg2:      #1a1a1a;
  --bg3:      #242424;
  --text1:    #f0f4ff;
  --text2:    #8899bb;
  --border:   rgba(255,255,255,0.09);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.40);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.50);
  --sp-wire:  #00E5FF;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,sans-serif;
  background:var(--bg-app);
  color:var(--text1);
  height:100vh;height:100dvh;
  overflow:hidden;
  transition:background var(--t-norm), color var(--t-norm);
}
button{font-family:inherit;cursor:pointer}
input,select{font-family:inherit;outline:none}
.hide{display:none!important}

/* ============================================================
   OFFLINE INDICATOR
   ============================================================ */
#offline-bar{
  display:none;
  position:fixed;top:0;left:0;right:0;
  background:#b45309;color:#fff;
  font-size:12px;font-weight:600;
  text-align:center;padding:5px;
  z-index:9999;
}
#offline-bar.show{display:block}

/* ============================================================
   API KEY MODAL
   ============================================================ */
#api-modal{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,0.55);
  z-index:1000;
  align-items:center;justify-content:center;
  padding:16px;
}
#api-modal.show{display:flex}

/* iOS-Install-Modal (v38) – gleiche Mechanik wie API-Modal */
#ios-install-modal{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,0.62);
  z-index:1200;
  align-items:center;justify-content:center;
  padding:16px;
}
#ios-install-modal.show{display:flex}
.api-box{
  background:var(--bg1);
  border-radius:var(--radius-card);
  padding:28px 24px;
  max-width:400px;width:100%;
  border:1px solid var(--border);
  box-shadow:var(--shadow-md);
}
.api-box h2{font-size:16px;font-weight:700;color:var(--text1);margin-bottom:6px}
.api-box p{font-size:12px;color:var(--text2);line-height:1.6;margin-bottom:16px}
.api-field{margin-bottom:12px}
.api-field label{display:block;font-size:12px;color:var(--text2);margin-bottom:4px;font-weight:600}
.api-field input{
  width:100%;padding:9px 12px;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg2);color:var(--text1);font-size:13px;
  font-family:monospace;
}
.api-field input:focus{border-color:var(--brand)}
.api-btns{display:flex;gap:8px}
.btn-primary{
  padding:9px 20px;background:var(--brand);color:#000;
  border:none;border-radius:var(--radius);font-size:13px;font-weight:700;
  flex:1;transition:background var(--t-fast);
}
.btn-primary:hover{background:var(--brand-hover);color:#000}
.btn-ghost{
  padding:9px 16px;background:transparent;color:var(--text2);
  border:1px solid var(--border);border-radius:var(--radius);font-size:13px;
  transition:border-color var(--t-fast);
}
.btn-ghost:hover{border-color:#888;color:var(--text1)}

/* ============================================================
   BOT-SWITCH-OVERLAY (v38 – Bot im laufenden Betrieb wechseln)
   ============================================================ */
#bot-switch-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,0.62);
  z-index:1100;
  align-items:center;justify-content:center;
  padding:16px;
  animation:bs-fade var(--t-norm) ease-out;
}
#bot-switch-overlay.show{display:flex}
@keyframes bs-fade{from{opacity:0}to{opacity:1}}
.bot-switch-box{
  background:var(--bg1);
  border-radius:var(--radius-card);
  padding:22px 20px 18px;
  max-width:380px;width:100%;
  border:1px solid var(--border);
  box-shadow:var(--shadow-md);
}
.bot-switch-title{font-size:15px;font-weight:700;color:var(--text1);text-align:center;margin-bottom:3px}
.bot-switch-sub{font-size:11px;color:var(--text2);text-align:center;margin-bottom:16px}
.bot-switch-cards{
  display:flex;gap:8px;justify-content:center;
  margin-bottom:12px;
}
.bot-switch-card{
  flex:1;
  background:var(--bg2);
  border:2px solid var(--border);
  border-radius:var(--radius-card);
  padding:12px 6px;
  cursor:pointer;
  transition:border-color var(--t-fast), transform var(--t-fast);
  text-align:center;
}
.bot-switch-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.bot-switch-card.current{border-color:var(--brand);background:var(--bg3)}
.bot-switch-card.current::after{
  content:"✓ aktiv";
  display:block;
  font-size:9px;font-weight:700;
  color:var(--brand);
  margin-top:4px;
}
.bsc-avatar{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;color:#fff;
  margin:0 auto 6px;
}
.bsc-name{font-size:13px;font-weight:700;color:var(--text1);margin-bottom:2px}
.bsc-role{font-size:10px;font-weight:600;letter-spacing:.3px}

/* ============================================================
   WELCOME SCREEN
   ============================================================ */
/* ============================================================
   TOPBANNER – Full-Width Logo-Streifen (Welcome + Splash)
   Immer schwarzer BG, egal ob Light oder Dark Mode
   ============================================================ */
.topbanner{
  width:100%;
  background:#000;
  display:flex;align-items:center;justify-content:center;
  padding:18px 0;
  border-bottom:1px solid rgba(0,229,255,0.35);
  box-shadow:0 1px 14px rgba(0,229,255,0.14);
}
.topbanner img{
  display:block;
  width:100%;
  max-width:640px;
  height:auto;
  padding:0 24px;
}
@media (max-width:640px){
  .topbanner{padding:12px 0}
  .topbanner img{padding:0 16px}
}

#welcome{
  max-width:none;
  padding:0;
  height:100vh;height:100dvh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;
}
.welcome-hint{
  text-align:center;
  padding:14px 20px 4px;
  font-size:13px;
  color:var(--text2);
  font-style:italic;
}
.welcome-content{
  max-width:680px;width:100%;
  margin:0 auto;
  padding:20px 16px 24px;
  display:flex;flex-direction:column;
  flex:1;
}
.brand-logo-row,
.brand-name-top,
.brand-name-sub,
.welcome-tagline{display:none}

.sel-title{font-size:16px;font-weight:700;color:var(--text1);margin-bottom:4px;text-align:center}
.sel-sub{font-size:13px;color:var(--text2);margin-bottom:20px;text-align:center}

.name-cards{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.name-card{
  background:var(--bg1);
  border:2px solid var(--border);
  border-radius:var(--radius-card);
  padding:18px 22px;
  cursor:pointer;
  transition:border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  min-width:150px;max-width:180px;
  box-shadow:var(--shadow-sm);
}
.name-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.name-card.picked{border-color:var(--brand);background:var(--bg2)}
.nc-avatar{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:16px;color:#fff;
  margin-bottom:10px;
}
.nc-name{font-size:17px;font-weight:700;color:var(--text1);margin-bottom:3px}
.nc-role{font-size:11px;font-weight:600;letter-spacing:.3px;margin-bottom:4px}
.nc-desc{font-size:11px;color:var(--text2);line-height:1.5}

.start-btn{
  display:block;width:100%;max-width:280px;margin:0 auto;
  padding:13px;background:var(--brand);color:#000;
  border:none;border-radius:var(--radius);
  font-size:15px;font-weight:700;
  opacity:.35;pointer-events:none;
  transition:opacity var(--t-norm), background var(--t-fast);
}
.start-btn.ready{opacity:1;pointer-events:all}
.start-btn.ready:hover{background:var(--brand-hover);color:#000}

.welcome-footer{
  text-align:center;margin-top:16px;
  font-size:11px;color:var(--text2);line-height:1.8;
}

/* ============================================================
   APP SHELL
   ============================================================ */
#app{display:none;max-width:960px;margin:0 auto;padding:0 12px;
  flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
.app-header{
  background:#000;
  border:1px solid rgba(0,229,255,0.22);
  border-radius:var(--radius-card);
  padding:8px 14px;
  margin:10px 0;
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-shrink:0;
  box-shadow:0 1px 10px rgba(0,229,255,0.10);
}
.header-left{display:flex;align-items:center;gap:12px;min-width:0}
.app-logo-mini{
  height:40px;width:auto;display:block;
  flex-shrink:0;
}
@media (max-width:420px){
  .app-logo-mini{height:34px}
}
.header-right{display:flex;align-items:center;gap:8px}
.bot-badge{
  font-size:11px;font-weight:700;
  padding:3px 11px;border-radius:20px;
  color:#000;flex-shrink:0;
  cursor:pointer;
  transition:transform var(--t-fast), box-shadow var(--t-fast);
}
.bot-badge:hover{transform:scale(1.06);box-shadow:0 0 0 2px rgba(0,229,255,0.22)}
.bot-badge:active{transform:scale(0.96)}
.header-icon-btn{
  background:rgba(255,255,255,0.08);border:none;
  color:#fff;width:32px;height:32px;
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:15px;transition:background var(--t-fast);flex-shrink:0;
}
.header-icon-btn:hover{background:rgba(0,229,255,0.22)}

/* Nav */
.nav{
  display:flex;gap:6px;margin-bottom:10px;
  flex-wrap:wrap;flex-shrink:0;
}
.nav-btn{
  padding:6px 13px;border-radius:20px;
  border:1px solid var(--border);
  background:var(--bg2);color:var(--text2);
  font-size:12px;font-weight:500;
  transition:all var(--t-fast);
}
.nav-btn:hover{border-color:#888;color:var(--text1)}
.nav-btn.active{background:var(--brand);color:#000;border-color:var(--brand);font-weight:700}

/* Sections */
.section{display:none}
.section.active{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;padding-bottom:20px}
#sec-chat.active{overflow:hidden;padding-bottom:0}

/* ============================================================
   CHAT
   ============================================================ */
.chat-wrap{
  display:flex;flex-direction:column;flex:1;min-height:0;
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  overflow:hidden;
  background:var(--bg1);
  box-shadow:var(--shadow-sm);
}
.chat-top{
  background:var(--brand);
  padding:10px 14px;
  display:flex;align-items:center;gap:10px;flex-shrink:0;
}
.bot-avatar{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;
  color:#fff;flex-shrink:0;
}
.chat-top-name{color:#000;font-size:13px;font-weight:700}
.chat-top-sub{color:rgba(0,0,0,0.68);font-size:11px;margin-top:1px}

.routing-badge{
  margin-left:auto;
  font-size:10px;font-weight:700;
  padding:2px 8px;border-radius:12px;
  background:rgba(0,0,0,0.22);color:#000;
  opacity:0;transition:opacity var(--t-norm);
}
.routing-badge.show{opacity:1}

.quick-q{
  display:flex;flex-wrap:wrap;gap:5px;
  padding:8px 10px;
  border-bottom:1px solid var(--border);
  background:var(--bg2);flex-shrink:0;
}
.qq{
  padding:3px 10px;border:1px solid var(--border);
  border-radius:20px;font-size:11px;color:var(--text2);
  cursor:pointer;background:var(--bg1);
  transition:all var(--t-fast);
}
.qq:hover{border-color:var(--accent);color:var(--text1)}

.chat-msgs{
  padding:14px;
  flex:1;min-height:0;
  overflow-y:auto;
  background:var(--bg1);
  display:flex;flex-direction:column;gap:10px;
}
.msg{
  max-width:84%;
  padding:9px 13px;
  border-radius:12px;
  font-size:13px;line-height:1.7;
}
.msg.bot{
  background:var(--bg2);color:var(--text1);
  align-self:flex-start;
  border:1px solid var(--border);
}
.msg.user{
  background:var(--brand);color:#000;
  align-self:flex-end;
  font-weight:500;
}
.msg-meta{
  font-size:10px;color:var(--text2);
  margin-top:4px;opacity:.7;
}

/* Markdown in Bot-Nachrichten */
.msg.bot p{margin:0 0 8px 0}
.msg.bot p:last-of-type{margin-bottom:0}
.msg.bot h3,.msg.bot h4{
  margin:10px 0 4px 0;font-size:13px;
  font-weight:700;color:var(--text1);
}
.msg.bot h3:first-child,.msg.bot h4:first-child{margin-top:0}
.msg.bot ul,.msg.bot ol{
  margin:6px 0;padding-left:20px;
}
.msg.bot li{margin-bottom:4px}
.msg.bot strong{font-weight:600;color:var(--text1)}
.msg.bot em{font-style:italic}
.msg.bot code{
  background:var(--bg3,rgba(0,0,0,.08));
  padding:1px 5px;border-radius:4px;
  font-family:'Fira Code',monospace;font-size:12px;
}
.msg.bot pre{
  background:var(--bg3,rgba(0,0,0,.06));
  padding:10px 12px;border-radius:8px;
  overflow-x:auto;margin:8px 0;
}
.msg.bot pre code{
  background:none;padding:0;font-size:12px;
  display:block;white-space:pre;
}
.msg.bot hr{
  border:none;border-top:1px solid var(--border);
  margin:10px 0;
}

/* Typing indicator */
.typing{
  display:none;align-items:center;gap:5px;
  padding:9px 13px;
  background:var(--bg2);border-radius:12px;
  width:fit-content;
  border:1px solid var(--border);
  align-self:flex-start;
}
.typing.show{display:flex}
.typing span{
  width:5px;height:5px;background:#94a3b8;
  border-radius:50%;
  animation:tdot 1.2s infinite;
}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes tdot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}

.chat-in{
  display:flex;gap:8px;padding:10px;
  border-top:1px solid var(--border);
  background:var(--bg2);flex-shrink:0;
}
.chat-in input{
  flex:1;padding:8px 12px;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg1);color:var(--text1);font-size:13px;
}
.chat-in input:focus{border-color:var(--brand)}
.send-btn{
  padding:8px 16px;background:var(--accent);color:#451a03;
  border:none;border-radius:var(--radius);
  font-weight:700;font-size:12px;
  transition:background var(--t-fast);
}
.send-btn:hover{background:var(--accent-dark)}
.mic-btn{
  flex-shrink:0;width:38px;height:38px;border-radius:50%;border:2px solid var(--border);
  background:var(--bg2);color:var(--text1);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s;
}
.mic-btn:hover{border-color:var(--brand);background:var(--bg3)}
.mic-btn.listening{background:#e53935;border-color:#e53935;color:#fff;animation:mic-pulse 1s infinite}
@keyframes mic-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* Upload + Menü */
.upload-wrap{position:relative;flex-shrink:0}
.upload-btn{
  width:38px;height:38px;border-radius:50%;border:2px solid var(--border);
  background:var(--bg2);color:var(--text1);font-size:22px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .2s;line-height:1;
}
.upload-btn:hover{border-color:var(--brand);background:var(--bg3)}
.upload-menu{
  display:none;position:absolute;bottom:46px;left:0;
  background:var(--bg1);border:1px solid var(--border);
  border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.15);
  overflow:hidden;min-width:180px;z-index:100;
}
.upload-menu.show{display:block}
.upload-menu button{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:10px 14px;border:none;background:none;
  color:var(--text1);font-size:13px;cursor:pointer;
  text-align:left;
}
.upload-menu button:hover{background:var(--bg3)}

/* Bild-Preview über dem Chat-Input */
.img-preview{
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;border-top:1px solid var(--border);
  background:var(--bg3);font-size:12px;color:var(--text2);flex-shrink:0;
}
.img-preview img{
  width:40px;height:40px;object-fit:cover;border-radius:6px;
  border:1px solid var(--border);
}
.img-preview-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.img-preview-x{
  background:none;border:none;color:var(--text2);font-size:16px;
  cursor:pointer;padding:2px 6px;border-radius:4px;
}
.img-preview-x:hover{background:var(--bg2);color:var(--danger,#e53935)}

/* ============================================================
   RECHNER
   ============================================================ */
.calc-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.calc-tab{
  padding:5px 12px;border-radius:20px;
  border:1px solid var(--border);
  background:var(--bg2);color:var(--text2);font-size:11px;font-weight:500;
  transition:all var(--t-fast);
}
.calc-tab.active{background:var(--brand);color:#000;border-color:var(--brand);font-weight:700}
.calc-box{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-card);padding:18px;
}
.calc-box h3{
  font-size:14px;font-weight:700;color:var(--text1);
  margin-bottom:14px;padding-bottom:8px;
  border-bottom:1px solid var(--border);
}
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;color:var(--text2);margin-bottom:3px;font-weight:500}
.field input,.field select{
  width:100%;padding:7px 10px;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg1);color:var(--text1);font-size:13px;
}
.field input:focus,.field select:focus{border-color:var(--brand)}
.calc-btn{
  width:100%;padding:9px;
  background:var(--brand);color:#000;
  border:none;border-radius:var(--radius);
  font-size:13px;font-weight:700;
  margin-top:4px;
  transition:background var(--t-fast);
}
.calc-btn:hover{background:var(--brand-hover);color:#000}
.result-box{
  background:var(--brand);color:#000;
  border-radius:var(--radius);padding:14px;
  margin-top:14px;display:none;
}
.result-box.show{display:block}
.rl{font-size:11px;color:rgba(0,0,0,0.68);margin-bottom:3px;font-weight:600}
.rv{font-size:22px;font-weight:700;color:#000}
.rh{font-size:11px;color:rgba(0,0,0,0.72);margin-top:6px;line-height:1.6}
.result-warn{color:#7f1d1d!important;font-weight:700!important}
.result-ok{color:#14532d!important;font-weight:700!important}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:480px){.calc-grid{grid-template-columns:1fr}}

/* ============================================================
   NORMEN
   ============================================================ */
.norm-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.norm-cat{
  padding:4px 11px;border-radius:20px;
  border:1px solid var(--border);
  background:var(--bg2);color:var(--text2);font-size:11px;
  transition:all var(--t-fast);
}
.norm-cat.active{background:var(--brand);color:#000;border-color:var(--brand);font-weight:700}
.norm-search{
  width:100%;padding:8px 12px;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg1);color:var(--text1);font-size:13px;
  margin-bottom:10px;
}
.norm-search:focus{border-color:var(--brand)}
.norm-item{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:12px;margin-bottom:8px;cursor:pointer;
  transition:border-color var(--t-fast);
}
.norm-item:hover{border-color:#888}
.norm-item h3{
  font-size:13px;font-weight:600;color:var(--text1);
  margin-bottom:4px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.norm-item p{font-size:12px;color:var(--text2);line-height:1.5}
.ntag{
  display:inline-block;font-size:10px;
  padding:1px 7px;border-radius:20px;font-weight:700;
}
.ntag-vde{background:#dbeafe;color:#1e40af}
.ntag-vob{background:#dcfce7;color:#166534}
.ntag-bgv{background:#fef9c3;color:#854d0e}
.ntag-dguv{background:#fef9c3;color:#854d0e}
.ntag-din{background:#fae8ff;color:#7e22ce}
.norm-detail{
  display:none;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--border);
  font-size:12px;color:var(--text1);line-height:1.9;
}
.norm-detail.open{display:block}

/* ============================================================
   QUIZ
   ============================================================ */
.quiz-top{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.quiz-cat-sel{
  padding:5px 10px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--bg1);color:var(--text1);font-size:12px;
}
.pb{flex:1;height:5px;background:var(--border);border-radius:3px;overflow:hidden;min-width:80px}
.pf{height:100%;background:var(--accent);border-radius:3px;transition:width .3s}
.qcard{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-card);padding:18px;
}
.qlevel{
  font-size:10px;font-weight:700;color:var(--accent);
  letter-spacing:.5px;margin-bottom:6px;text-transform:uppercase;
}
.qq-text{font-size:15px;font-weight:600;color:var(--text1);margin-bottom:16px;line-height:1.5}
.qopts{display:flex;flex-direction:column;gap:7px}
.qopt{
  padding:10px 14px;border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg1);color:var(--text1);
  font-size:13px;cursor:pointer;text-align:left;
  transition:all var(--t-fast);
}
.qopt:hover:not(:disabled){border-color:var(--accent);background:#fef9c3}
[data-theme="dark"] .qopt:hover:not(:disabled){background:#2a2000}
.qopt.correct{background:#dcfce7;border-color:#166534;color:#166534}
.qopt.wrong{background:#fee2e2;border-color:#991b1b;color:#991b1b}
[data-theme="dark"] .qopt.correct{background:#0a2e14;border-color:#22c55e;color:#4ade80}
[data-theme="dark"] .qopt.wrong{background:#2e0a0a;border-color:#ef4444;color:#f87171}
.qfb{
  margin-top:12px;padding:10px;border-radius:var(--radius);
  font-size:12px;line-height:1.6;display:none;
}
.qfb.show{display:block}
.qfb.ok{background:#dcfce7;color:#166534}
.qfb.nok{background:#fee2e2;color:#991b1b}
[data-theme="dark"] .qfb.ok{background:#0a2e14;color:#4ade80}
[data-theme="dark"] .qfb.nok{background:#2e0a0a;color:#f87171}
.next-btn{
  margin-top:10px;padding:8px 18px;
  background:var(--brand);color:#000;border:none;
  border-radius:var(--radius);font-size:13px;font-weight:700;
  cursor:pointer;display:none;
  transition:background var(--t-fast);
}
.next-btn.show{display:inline-block}
.next-btn:hover{background:var(--brand-hover);color:#000}
.score-end{
  text-align:center;padding:28px;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-card);
}
.score-end h2{font-size:52px;font-weight:800;color:var(--accent)}

/* ============================================================
   TIPPS
   ============================================================ */
.tipps-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tc{
  padding:4px 11px;border-radius:20px;
  border:1px solid var(--border);
  background:var(--bg2);color:var(--text2);font-size:11px;
  transition:all var(--t-fast);
}
.tc.active{background:var(--brand);color:#000;border-color:var(--brand);font-weight:700}
.tcard{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-card);padding:14px;margin-bottom:8px;
}
.tcard h3{font-size:13px;font-weight:600;color:var(--text1);margin-bottom:5px}
.tcard p{font-size:12px;color:var(--text2);line-height:1.7}
.tmeta{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.ttag{
  display:inline-block;font-size:10px;
  padding:1px 7px;border-radius:20px;font-weight:600;
  background:#dbeafe;color:#1e40af;
}
[data-theme="dark"] .ttag{background:#1e3a5f;color:#60a5fa}

/* ============================================================
   SCHALTPLÄNE
   ============================================================ */
.sp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
@media(max-width:480px){.sp-grid{grid-template-columns:1fr}}
.sp-card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-card);padding:14px;cursor:pointer;
  transition:all var(--t-fast);
}
.sp-card:hover{border-color:var(--accent)}
.sp-card.sel{border-color:var(--brand);background:var(--bg3)}
.sp-card h3{font-size:13px;font-weight:600;color:var(--text1);margin-bottom:3px}
.sp-card p{font-size:11px;color:var(--text2)}
.sp-explain{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-card);padding:18px;
}
/* ── Schaltplan Erklärung: neue Formatierung ────────────── */
.sp-erkl-body { font-size:12px; color:var(--text1); line-height:1.8; }
.erkl-section { margin-bottom:14px; }
.erkl-h {
  font-size:12px; font-weight:700; color:var(--accent);
  margin:0 0 7px; display:flex; align-items:center; gap:5px;
  border-bottom:1px solid rgba(232,180,0,0.2); padding-bottom:4px;
}
.erkl-flow { font-size:12px; line-height:1.85; color:var(--text1); margin:0 0 8px; }
.erkl-pfad {
  background:var(--bg3); border-left:3px solid var(--accent);
  border-radius:6px; padding:9px 14px; margin-bottom:9px;
  font-family:monospace; font-size:12px; font-weight:600; color:var(--text1);
  overflow-x:auto; white-space:nowrap;
}
.ep-b {
  background:var(--accent); color:#111; border-radius:4px;
  padding:1px 6px; font-weight:700; font-family:monospace;
}
.ep-w { color:var(--accent2); font-weight:700; }
.erkl-table {
  width:100%; border-collapse:collapse; font-size:11px; margin-bottom:10px;
}
.erkl-table th {
  background:var(--brand); color:#000;
  padding:5px 10px; text-align:left; font-weight:700; font-size:11px;
}
.erkl-table td {
  padding:5px 10px; border-bottom:1px solid var(--border); color:var(--text1);
}
.erkl-table tr:nth-child(even) td { background:var(--bg3); }
.erkl-merksatz {
  background:rgba(232,180,0,0.10); border:1px solid rgba(232,180,0,0.35);
  border-left:4px solid var(--accent); border-radius:8px;
  padding:10px 14px; font-size:12px; color:var(--text1);
  margin-bottom:12px; line-height:1.75;
}
.erkl-rule {
  background:rgba(220,38,38,0.07); border-left:4px solid #dc2626;
  border-radius:8px; padding:9px 14px; font-size:12px;
  color:var(--text1); margin-bottom:12px; line-height:1.75;
}

/* ============================================================
   SCHALTPLAN – SVG + SPIELMODUS  (S6)
   ============================================================ */

/* Motor-Drehrichtung Animationen */
@keyframes sp-spin-cw  { to { transform: rotate(360deg);  } }
@keyframes sp-spin-ccw { to { transform: rotate(-360deg); } }
.sp-m-spin { display:block; }
.sp-svg{
  width:100%;color:var(--sp-wire,#0a0a0a);
  display:block;overflow:visible;margin-bottom:10px;
}
.sp-svg .spw { stroke:currentColor;stroke-width:2;fill:none; }
.sp-svg .spw1{ stroke:currentColor;stroke-width:1.5;fill:none; }
.sp-svg .spa { stroke:currentColor;stroke-width:2.5;fill:none; }
.sp-svg .spwd{ stroke:currentColor;stroke-width:1.5;fill:none;stroke-dasharray:4,3; }
.sp-svg .spc { fill:currentColor; }
/* Schaltplan Labels: fill:currentColor erbt var(--sp-wire) → hell im Dark-Mode, dunkel im Light-Mode */
.sp-svg .sp-lbl {
  fill: currentColor;
}
/* sp-klbl (Klemmen-Nummern): accent-Farbe mit Halo bleibt wie bisher */

.sp-svg .sp-klbl {
  fill: var(--accent);
  font-size: 9px;
  font-weight: 700;
  paint-order: stroke fill;
  stroke: var(--bg1);
  stroke-width: 5px;
  stroke-linejoin: round;
}
/* Game highlight – gelbe Hervorhebung */
.sp-svg g.sp-hi .spw,
.sp-svg g.sp-hi .spa,
.sp-svg g.sp-hi .spw1,
.sp-svg g.sp-hi .spwd{ stroke:var(--accent)!important;stroke-width:3!important; }
.sp-svg g.sp-hi .spc{ fill:var(--accent)!important; }
.sp-svg g.sp-hi rect.spw{ stroke:var(--accent)!important;stroke-width:3!important;fill:rgba(232,180,0,.12)!important; }

.sp-tabs{ display:flex;gap:6px;margin-bottom:12px; }
.sp-tab{
  padding:5px 14px;border-radius:20px;
  border:1px solid var(--border);
  background:var(--bg2);color:var(--text2);font-size:12px;font-weight:500;
  transition:all var(--t-fast);
}
.sp-tab.active{ background:var(--brand);color:#000;border-color:var(--brand);font-weight:700; }
.sp-panel{ display:none; }
.sp-panel.active{ display:block; }

/* Spielmodus */
.sp-gq{ font-size:14px;font-weight:600;color:var(--text1);margin-bottom:14px;line-height:1.5; }
.sp-gbar{ display:flex;align-items:center;gap:10px;margin-bottom:14px; }
.sp-gpb{ flex:1;height:5px;background:var(--border);border-radius:3px;overflow:hidden; }
.sp-gpf{ height:100%;background:var(--accent);border-radius:3px;transition:width .3s; }
.sp-gopts{ display:flex;flex-direction:column;gap:7px;margin-bottom:10px; }
.sp-gopt{
  padding:9px 14px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg1);color:var(--text1);font-size:13px;text-align:left;
  transition:all var(--t-fast);
}
.sp-gopt:hover:not(:disabled){ border-color:var(--accent); }
.sp-gopt.correct{ background:#dcfce7;border-color:#166534;color:#166534; }
.sp-gopt.wrong  { background:#fee2e2;border-color:#991b1b;color:#991b1b; }
[data-theme="dark"] .sp-gopt.correct{ background:#0a2e14;border-color:#22c55e;color:#4ade80; }
[data-theme="dark"] .sp-gopt.wrong  { background:#2e0a0a;border-color:#ef4444;color:#f87171; }
.sp-gfb{
  padding:9px 12px;border-radius:var(--radius);font-size:12px;
  line-height:1.6;display:none;margin-bottom:10px;
}
.sp-gfb.show{ display:block; }
.sp-gfb.ok { background:#dcfce7;color:#166534; }
.sp-gfb.nok{ background:#fee2e2;color:#991b1b; }
[data-theme="dark"] .sp-gfb.ok { background:#0a2e14;color:#4ade80; }
[data-theme="dark"] .sp-gfb.nok{ background:#2e0a0a;color:#f87171; }
.sp-gend{
  text-align:center;padding:22px;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-card);
}
.sp-gend h2{ font-size:46px;font-weight:800;color:var(--accent); }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.sec-header{
  display:flex;align-items:center;gap:8px;
  margin-bottom:14px;
}
/* ============================================================
   INTERAKTIVER SPIELMODUS – Stromfluss, Schalter, Lampe (S6.1)
   ============================================================ */
.sp-isvg{ cursor:default; }
.sp-isvg .sp-switch-btn{
  cursor:pointer;
  fill:transparent;          /* SVG-Default wäre black – MUSS transparent sein! */
}
/* Strompfad-Animation auf Kind-Elemente propagieren */
.sp-isvg [data-path].path-active > line,
.sp-isvg [data-path].path-active > circle{
  stroke:var(--accent)!important; stroke-width:3!important;
}
.sp-isvg [data-path].path-active.sp-anim > line{
  stroke-dasharray:10,4;
  animation:sp-flow .7s linear infinite;
}
.sp-isvg [data-path].path-dim{ opacity:0.28; }
/* Aktive Verbindungslinie direkt (für einfache Elemente ohne Kind) */
.sp-isvg [data-path].path-active{
  stroke:var(--accent)!important; stroke-width:3!important;
}
.sp-isvg [data-path]{ transition:stroke .2s,opacity .2s,fill .2s; }
.sp-isvg [data-path].path-active .spw,
.sp-isvg [data-path].path-active .spa{
  stroke:var(--accent)!important;stroke-width:3!important;
}
.sp-isvg [data-path].path-active{ stroke:var(--accent)!important;stroke-width:3!important; }
.sp-isvg [data-path].path-dim{ opacity:0.28; }
@keyframes sp-flow{ to{ stroke-dashoffset:-16; } }
.sp-isvg [data-path].path-active.sp-anim{
  stroke-dasharray:10,4;animation:sp-flow .7s linear infinite;
}
.sp-isvg g.sp-lamp-on .sp-lamp-c{
  fill:var(--accent)!important;stroke:var(--accent)!important;
  filter:drop-shadow(0 0 6px var(--accent));
}
.sp-isvg g.sp-lamp-on .sp-lamp-x{
  stroke:#111!important;stroke-width:2.5!important;
}
.sp-isvg .sp-sw-border{ pointer-events:none; }
.sp-isvg .sp-switch-btn:hover + .sp-sw-border{
  opacity:1!important;stroke-width:2!important;
}
.sp-status-bar{
  font-size:13px;font-weight:600;padding:8px 12px;
  background:var(--bg2);border-radius:var(--radius);margin-bottom:8px;
  border:1px solid var(--border);text-align:center;
  transition:background .3s,border-color .3s;
}
.sp-status-bar.on{ background:#dcfce7;border-color:#16a34a;color:#15803d; }
.sp-status-bar.off{ background:var(--bg2);color:var(--text2); }
[data-theme="dark"] .sp-status-bar.on{ background:#0a2e14;border-color:#22c55e;color:#4ade80; }
.sp-chal-box{
  padding:12px 14px;border-radius:var(--radius-card);
  background:var(--bg2);border:1px solid var(--border);margin-bottom:8px;
}
.sp-chal-box h4{ font-size:13px;font-weight:600;color:var(--text1);margin-bottom:4px; }
.sp-chal-box p{ font-size:11px;color:var(--text2);line-height:1.6; }
.sp-chal-box.done{ border-color:#16a34a;background:#dcfce7; }
[data-theme="dark"] .sp-chal-box.done{ background:#0a2e14;border-color:#22c55e; }
.sp-chal-box.done h4{ color:#16a34a; }

/* S6 DIN EN 60617 Busbar-Klassen */
.sp-svg .sp-bus   { stroke:currentColor; stroke-width:2.5; fill:none; }
.sp-svg .sp-bus-pe{ stroke:currentColor; stroke-width:1.5; fill:none; stroke-dasharray:8,5; }

.sp-sw-legend{ font-size:11px;color:var(--text2);margin-top:6px;line-height:1.7;text-align:center; }

.sec-icon{
  width:32px;height:32px;border-radius:8px;
  background:var(--brand);color:#000;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;
}
.sec-title{font-size:15px;font-weight:700;color:var(--text1)}
.sec-sub{font-size:11px;color:var(--text2)}

/* ============================================================
   UTILITY
   ============================================================ */
.text-accent{color:var(--accent)}
.text-muted{color:var(--text2)}

/* ============================================================
   WISSEN TAB
   ============================================================ */
.wissen-controls{padding:0 16px 8px}
.wissen-search{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:var(--bg2);color:var(--text1);font-size:14px;outline:none;box-sizing:border-box}
.wissen-search:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(37,99,235,.15)}
.wissen-filters{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.wissen-lf-btn{padding:5px 10px;border:1px solid var(--border);border-radius:20px;background:var(--bg2);color:var(--text2);font-size:11px;font-weight:600;cursor:pointer;transition:all .2s}
.wissen-lf-btn.active,.wissen-lf-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.wissen-count{padding:4px 16px;font-size:12px;color:var(--text2)}

.wissen-list{padding:0 16px 16px;display:flex;flex-direction:column;gap:8px}
.wissen-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:14px 16px;cursor:pointer;transition:all .2s}
.wissen-card:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.wissen-card.skeleton{opacity:.5;cursor:default}
.wissen-card.skeleton:hover{transform:none;box-shadow:none;border-color:var(--border)}
.wissen-card-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.wissen-card-lf{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:12px;font-size:10px;font-weight:700;color:#fff;white-space:nowrap}
.wissen-card-title{font-size:14px;font-weight:700;color:var(--text1)}
.wissen-card-kurz{font-size:12px;color:var(--text2);line-height:1.5}
.wissen-card-tags{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.wissen-card-tag{padding:2px 8px;border-radius:8px;font-size:10px;background:var(--bg3,var(--bg1));color:var(--text2);border:1px solid var(--border)}
.wissen-card-tag.pruefung{background:rgba(244,67,54,.1);color:#E53935;border-color:rgba(244,67,54,.2);font-weight:600}
.wissen-card-tag.leer{background:rgba(255,152,0,.08);color:#E65100;border-color:rgba(255,152,0,.15)}

.wissen-detail{padding:0 16px 24px}
.wissen-back{display:inline-flex;align-items:center;gap:4px;padding:8px 16px;margin:12px 0;border:1px solid var(--border);border-radius:10px;background:var(--bg2);color:var(--text1);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.wissen-back:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

.wissen-dtl-header{margin-bottom:20px}
.wissen-dtl-lf{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:14px;font-size:12px;font-weight:700;color:#fff;margin-bottom:10px}
.wissen-dtl-title{font-size:22px;font-weight:800;color:var(--text1);margin-bottom:6px}
.wissen-dtl-kurz{font-size:14px;color:var(--text2);line-height:1.6}

.wissen-block{margin-bottom:18px}
.wissen-block-text{font-size:14px;line-height:1.8;color:var(--text1)}
.wissen-block-text p{margin:0 0 10px}

.wissen-block-bild{text-align:center;margin:16px 0}
.wissen-block-bild img{max-width:100%;border-radius:10px;border:1px solid var(--border);background:#fff}
.wissen-block-bild .wissen-caption{font-size:11px;color:var(--text2);margin-top:6px;font-style:italic}

.wissen-block-formel{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px 18px;text-align:center;margin:14px 0}
.wissen-block-formel .formel-label{font-size:12px;color:var(--text2);margin-bottom:4px;font-weight:600}
.wissen-block-formel .formel-text{font-size:20px;font-weight:800;color:var(--accent);font-family:'Courier New',monospace;letter-spacing:1px}

.wissen-block-merksatz{background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(37,99,235,.03));border:1px solid rgba(37,99,235,.2);border-left:4px solid var(--accent);border-radius:10px;padding:14px 18px;margin:14px 0}
.wissen-block-merksatz .merksatz-label{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.wissen-block-merksatz .merksatz-text{font-size:14px;line-height:1.6;color:var(--text1);font-weight:600}

.wissen-block-tabelle{overflow-x:auto;margin:14px 0}
.wissen-block-tabelle table{width:100%;border-collapse:collapse;font-size:13px}
.wissen-block-tabelle th{background:var(--accent);color:#fff;padding:8px 12px;text-align:left;font-weight:700;font-size:12px}
.wissen-block-tabelle td{padding:8px 12px;border-bottom:1px solid var(--border);color:var(--text1)}
.wissen-block-tabelle tr:nth-child(even) td{background:var(--bg2)}

.wissen-block-hinweis{background:rgba(255,152,0,.08);border:1px solid rgba(255,152,0,.2);border-left:4px solid #FF9800;border-radius:10px;padding:12px 16px;margin:14px 0;font-size:13px;color:var(--text1);line-height:1.6}
.wissen-block-hinweis strong{color:#E65100}

.wissen-block-liste{margin:10px 0;padding-left:20px}
.wissen-block-liste li{font-size:14px;line-height:1.8;color:var(--text1);margin-bottom:4px}

.wissen-norm-ref{margin-top:20px;padding:12px 16px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;font-size:12px;color:var(--text2)}
.wissen-norm-ref strong{color:var(--text1)}

.wissen-quellen{margin-top:12px;font-size:11px;color:var(--text2);line-height:1.6}
.wissen-quellen a{color:var(--accent);text-decoration:none}
.wissen-quellen a:hover{text-decoration:underline}

.wissen-lf-header{padding:12px 0 6px;display:flex;align-items:center;gap:8px}
.wissen-lf-header .lf-icon{font-size:20px}
.wissen-lf-header .lf-name{font-size:14px;font-weight:700;color:var(--text1)}
.wissen-lf-header .lf-count{font-size:12px;color:var(--text2)}

.wissen-empty-state{text-align:center;padding:40px 20px;color:var(--text2)}
.wissen-empty-state .empty-icon{font-size:40px;margin-bottom:12px}
.wissen-empty-state .empty-text{font-size:14px;line-height:1.6}

/* ============================================================
   SPLASH-SCREEN (v36 – Beta-Tester-Empfang)
   Immer dunkel, passend zum Voltklar-Branding, unabhängig vom Theme
   ============================================================ */
#splash {
  display: none;
  position: fixed; inset: 0;
  background: #0a0a0a;
  color: #f0f4ff;
  z-index: 10000;
  overflow-y: auto;
  padding: 0 0 40px;
  flex-direction: column;
  align-items: center;
}
.splash-inner {
  max-width: 560px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 16px 0;
}
.splash-logo{display:none}
.splash-text p {
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 12px;
  color: #d0d6e0;
}
.splash-text p strong { color: #fff; }
.splash-banner-link {
  display: block;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.splash-banner-link:active { transform: scale(0.98); }
.splash-banner-link img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
}
.splash-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  text-align: center;
  padding: 18px 20px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(37,211,102,0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.splash-whatsapp:active {
  transform: scale(0.98);
  box-shadow: 0 2px 10px rgba(37,211,102,0.5);
}
.splash-footer {
  text-align: center;
  font-size: 12px;
  color: #6a7080;
  padding: 20px 0 10px;
}
.splash-footer a {
  color: #8899bb;
  text-decoration: underline;
}

/* ============================================================
   GLOBAL FOOTER (Copyright + Rechtliches + Kontakt)
   ============================================================ */
#global-footer {
  text-align: center;
  font-size: 11px;
  color: var(--text2);
  padding: 10px 8px;
  background: var(--bg-app);
  border-top: 1px solid var(--border);
  margin-top: auto;
}
#global-footer a {
  color: var(--text2);
  text-decoration: none;
  margin: 0 2px;
}
#global-footer a:hover { color: var(--brand); }

/* ============================================================
   RECHTLICHES MODAL (nutzt bestehende .api-box-Styles)
   ============================================================ */
#rechtliches-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 10001;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Brand-Logo im Welcome responsiv halten */
.brand-logo-img {
  max-width: 340px;
  width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
}