/* ORIGINAL GLOBAL RULE (DEAKTIVIERT)
html[data-theme="dark"] img {
  filter: brightness(0) invert(1);
}
*/

/* Oeffnungszeiten-V2.184-8-15042026-10-05 */

/*
================================================================
OEFFNUNGSZEITEN CSS – V184
----------------------------------------------------------------
Ausgelagerte Styles aus der Master-HTML.

Info:
- Enthält Tagmodus und Nachtmodus
- Für sichere Trennung von Struktur (HTML), Design (CSS) und Logik (JS)
- Kann lokal relativ oder auf dem Server per absoluter URL geladen werden
================================================================
*/

:root{
      --bg:#dfe9f7;
      --panel:#ffffff;
      --panel-2:#edf4ff;
      --panel-3:#dce9fb;
      --text:#112033;
      --muted:#4f647f;
      --line:#bfd0e6;
      --line-strong:#97b3d8;
      --brand:#2563eb;
      --brand-2:#1d4ed8;
      --ok:#0f9d58;
      --warn:#b45309;
      --danger:#dc2626;
      --shadow:0 14px 34px rgba(15, 23, 42, 0.10);
      --radius:20px;
      --font-sans:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
      --font-ui:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:var(--font-sans);
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      font-synthesis-weight:none;
      background:
        radial-gradient(circle at top left, rgba(37,99,235,.16), transparent 30%),
        radial-gradient(circle at top right, rgba(14,165,233,.10), transparent 24%),
        linear-gradient(180deg, #eef4fd 0%, #dfe9f7 100%);
      color:var(--text);
    }

    .topbar{
      position:sticky;
      top:0;
      z-index:50;
      backdrop-filter:blur(14px);
      background:rgba(245,249,255,.92);
      border-bottom:1px solid var(--line-strong);
      box-shadow:0 8px 26px rgba(15, 23, 42, .08);
    }

    .topbar-inner{
      width:min(1200px, calc(100% - 24px));
      margin:0 auto;
      min-height:68px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:10px 0;
    }

    .brand-wrap{
      min-width:0;
    }

    .brand-title{
      margin:0;
      font-size:1.28rem;
      font-weight:900;
      letter-spacing:-0.03em;
      line-height:1.05;
    }

    .brand-sub{
      margin-top:3px;
      color:#475569;
      font-size:.95rem;
      line-height:1.25;
      font-weight:700;
    }

    .clock-card{
      display:flex;
      align-items:center;
      gap:12px;
      padding:10px 14px;
      border:1px solid var(--line-strong);
      border-radius:16px;
      background:linear-gradient(180deg,#ffffff,#ebf3ff);
      box-shadow:var(--shadow);
      flex-shrink:0;
    }

    .clock-icon{
      width:22px;
      height:22px;
      color:var(--brand-2);
      flex-shrink:0;
    }

    .clock-info{
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      line-height:1.15;
    }

    .clock-date{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
      color:#475569;
      font-size:.88rem;
      white-space:nowrap;
      font-weight:700;
    }

    .clock-time{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
      font-size:1.05rem;
      font-weight:900;
      letter-spacing:-0.02em;
      white-space:nowrap;
    }

    /* ==========================================================
   [14042026 Live-Hintergruende-Neu]
   live-hintergrund-aendern pos 1 von 4
   Bereich A = äußerer Live-Container / Außenfläche
   Nur HINTERGRUND / BORDER hier anpassen.
   NICHT ändern: width, display, gap, Layout.
   ========================================================== */
.live-summary-wrap{
      width:min(1200px, calc(100% - 24px));
      margin:10px auto 0;
      display:flex;
      align-items:flex-start;
      gap:10px;
    }

    /* ==========================================================
   [14042026 Live-Hintergruende-Neu]
   live-hintergrund-aendern pos 2 von 4
   Bereich C = große Live-Karte innen
   Nur HINTERGRUND / BORDER hier anpassen.
   NICHT ändern: padding, min-height, Layout.
   ========================================================== */
.live-summary{
  flex:1;
  min-width:0;
  padding:12px 16px;
  border:1px solid var(--line-strong);
  border-radius:18px;
  background:linear-gradient(180deg,#ffffff 0%, #f2f5f8 52%, #edf1f4 100%);
  box-shadow:0 10px 22px rgba(15,23,42,.08);
  color:var(--text);
  font-weight:900;
  letter-spacing:-0.01em;
  line-height:1.35;
}

    .live-summary-label{
      color:var(--brand-2);
      margin-right:8px;
    }

    .live-summary-detail{
      color:#475569;
      font-weight:800;
    }


    .live-summary,
    .live-summary-label,
    .live-summary-detail,
    .live-summary-info-toggle,
    .live-summary-info-box,
    .live-summary-info-box strong,
    .live-summary-info-box p{
      font-family:var(--font-ui);
      font-style:normal;
    }

    .live-summary-info{
      position:relative;
      flex-shrink:0;
    }

    /* ==========================================================
   [14042026 Live-Hintergruende-Neu]
   live-hintergrund-aendern pos 3 von 4
   Live-Buttons = Info-Button
   Nur HINTERGRUND / BORDER / border-radius hier anpassen.
   ========================================================== */
.live-summary-info-toggle{
      list-style:none;
      width:34px;
      height:34px;
      border-radius:999px;
      border:1px solid var(--line-strong);
      background:linear-gradient(180deg,#ffffff,#eef4ff);
      box-shadow:0 10px 22px rgba(15,23,42,.08);
      color:var(--brand-2);
      font-size:1rem;
      font-weight:900;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      user-select:none;
    }

    .live-summary-info-toggle::-webkit-details-marker{
      display:none;
    }

    .live-summary-info-toggle:hover,
    .live-summary-info[open] .live-summary-info-toggle{
      border-color:#7fa7df;
      background:#f7fbff;
      color:var(--brand);
    }

    .live-summary-info-box{
      position:absolute;
      right:0;
      top:44px;
      width:min(360px, calc(100vw - 36px));
      padding:12px 14px;
      border-radius:16px;
      border:1px solid var(--line-strong);
      background:linear-gradient(180deg,#ffffff,#eef4ff);
      box-shadow:0 14px 30px rgba(15,23,42,.14);
      color:var(--text);
      z-index:30;
    }

    .live-summary-info-box strong{
      display:block;
      margin:0 0 6px;
      color:var(--brand-2);
      font-size:.95rem;
    }

    .live-summary-info-box p{
      margin:0;
      color:#475569;
      font-size:.92rem;
      line-height:1.5;
      font-weight:700;
    }

    .app{
      width:min(1200px, calc(100% - 24px));
      margin:14px auto 20px;
      display:grid;
      grid-template-columns:360px 1fr;
      gap:18px;
      min-height:calc(100vh - 104px);
    }

    .panel{
      background:var(--panel);
      border:1px solid var(--line-strong);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
    }

    .sidebar{
      display:flex;
      flex-direction:column;
      min-height:100%;
      background:linear-gradient(180deg, #edf4ff 0%, #dce9fb 100%);
    }

    .sidebar-head{
      padding:14px 16px 12px;
      border-bottom:1px solid var(--line-strong);
      background:linear-gradient(180deg, #ffffff, #eef5ff);
      flex-shrink:0;
    }

    .title{
      margin:0 0 10px;
      font-size:1.14rem;
      font-weight:900;
      letter-spacing:-0.02em;
    }

    .controls{
      display:grid;
      gap:10px;
    }

    .control-row{
      display:flex;
      gap:10px;
    }

    .field,
    .select,
    .voice-btn{
      min-height:48px;
      border:1px solid var(--line-strong);
      border-radius:14px;
      background:#fff;
      color:var(--text);
      font:inherit;
    }

    .field{
      width:100%;
      padding:0 14px;
      outline:none;
      font-weight:600;
    }

    .search-wrap{
      position:relative;
      display:flex;
      align-items:center;
    }

    .field{
      padding-right:50px;
    }

    .clear-btn{
      position:absolute;
      right:8px;
      top:50%;
      transform:translateY(-50%);
      width:34px;
      height:34px;
      border:1px solid var(--line-strong);
      border-radius:999px;
      background:#fff;
      color:#475569;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      box-shadow:0 4px 10px rgba(15,23,42,.08);
    }

    .clear-btn:hover{
      color:var(--text);
      border-color:#7fa7df;
      background:#f7fbff;
    }

    .clear-btn.hidden{
      display:none;
    }

    .map-box{
      margin:0 16px 18px;
      padding:14px;
      background:#fff;
      border:1px solid var(--line-strong);
      border-radius:16px;
      box-shadow:0 8px 18px rgba(15,23,42,.06);
    }

    .map-box h3{
      margin:0 0 8px;
      font-size:1rem;
      letter-spacing:-0.02em;
    }

    .map-box p{
      margin:0 0 12px;
      color:#475569;
      font-size:.94rem;
      line-height:1.45;
      font-weight:600;
    }

    .map-preview{
      display:block;
      width:100%;
      border-radius:14px;
      border:1px solid var(--line-strong);
      overflow:hidden;
      background:#fff;
      cursor:inherit;
    }

    .map-preview img{
      display:block;
      width:100%;
      height:auto;
    }

    .map-overlay{
      position:relative;
      margin-top:12px;
      border-radius:14px;
      overflow:hidden;
      border:1px solid var(--line-strong);
      background:#fff;
    }

    .map-overlay img{
      display:block;
      width:100%;
      height:auto;
    }

    .map-pins{
      position:absolute;
      inset:0;
      pointer-events:none;
    }

    .map-pin{
  position:absolute;
  width:22px;
  height:22px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:3px solid transparent;
  background:transparent;
  cursor:pointer;
  pointer-events:auto;
}

.map-pin:hover{
  border-color:rgba(239,68,68,1);
}

.map-pin.active{
  border-color:rgba(37,99,235,1);
  transform:translate(-50%,-50%) scale(1.2);
  box-shadow:
    0 0 0 4px rgba(37,99,235,0.25),
    0 0 16px rgba(37,99,235,0.5);
  animation:pinFadeIn .2s ease, pinPulse 1.4s infinite;
  position:relative;
}

/* echtes Fadenkreuz */
.map-pin.active::before,
.map-pin.active::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:rgba(37,99,235,0.6);
  transform:translate(-50%,-50%);
  pointer-events:none;
}

/* horizontale Linie */
.map-pin.active::before{
  width:100%;
  height:1px;
}

/* vertikale Linie */
.map-pin.active::after{
  width:1px;
  height:100%;
}

    .map-pin-label{
      position:absolute;
      left:50%;
      bottom:26px;
      transform:translateX(-50%);
      background:rgba(17,32,51,.96);
      color:#fff;
      padding:4px 8px;
      border-radius:999px;
      font-size:.72rem;
      font-weight:700;
      white-space:nowrap;
      opacity:0;
      pointer-events:none;
      transition:opacity .16s ease;
      box-shadow:0 8px 18px rgba(15,23,42,.18);
    }

    .map-pin:hover .map-pin-label,
    .map-pin:focus-visible .map-pin-label,
    .map-pin.active .map-pin-label{
      opacity:1;
    }

    .map-editor-note{
      margin-top:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      text-align:center;
      font-size:.9rem;
      line-height:1.4;
      font-weight:800;
      background:linear-gradient(135deg,#2563eb,#1d4ed8);
      color:#fff;
      padding:12px 14px;
      border-radius:14px;
      cursor:pointer;
      transition:.2s;
      box-shadow:0 10px 20px rgba(37,99,235,.25);
      user-select:none;
    }

    .map-editor-note:hover{
      transform:translateY(-1px);
      box-shadow:0 14px 28px rgba(37,99,235,.35);
    }

    .map-editor-note code{
      font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      background:#eef4ff;
      padding:1px 5px;
      border-radius:6px;
      color:#284b79;
      font-size:.8rem;
    }


    .map-help-note{
      margin-top:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      text-align:center;
      font-size:.9rem;
      line-height:1.4;
      font-weight:800;
      background:linear-gradient(180deg,#ffffff,#eef4ff 56%, #f8fbff 100%);
      color:#1d4ed8;
      padding:12px 14px;
      border-radius:14px;
      cursor:pointer;
      transition:.2s;
      box-shadow:0 10px 20px rgba(37,99,235,.12);
      user-select:none;
      border:1px solid #b6cff7;
    }

    .map-help-note:hover{
      transform:translateY(-1px);
      box-shadow:0 14px 28px rgba(37,99,235,.18);
      background:linear-gradient(180deg,#ffffff,#e6f0ff);
    }

    .manual-list{
      margin:0;
      padding-left:18px;
      display:grid;
      gap:8px;
      color:#27415f;
      line-height:1.55;
      font-weight:600;
    }

    .manual-list strong{
      color:#112033;
    }

    .page-version{
      display:block;
      padding:10px 18px 26px;
      color:#4f647f;
      font-size:.78rem;
      line-height:1.35;
      text-align:right;
      font-weight:800;
      letter-spacing:.02em;
      min-height:1.2em;
    }

    @media (max-width: 640px){
      .clear-btn{
        width:32px;
        height:32px;
      }
      .page-version{
        font-size:.64rem;
        padding:0 14px 14px;
      }
    }


    .field:focus,
    .select:focus,
    .voice-btn:focus{
      border-color:#6a9cff;
      box-shadow:0 0 0 4px rgba(37,99,235,.12);
      outline:none;
    }

    .select{
      padding:0 14px;
      width:130px;
      cursor:pointer;
      font-weight:700;
    }

    .voice-btn{
      border:none;
      background:linear-gradient(135deg, var(--brand), var(--brand-2));
      color:#fff;
      padding:0 14px;
      font-weight:800;
      cursor:pointer;
      box-shadow:0 8px 20px rgba(37,99,235,.24);
      white-space:nowrap;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
    }

    .voice-btn.listening{
      animation:pulse 1.1s infinite;
    }

    .btn-icon,
    .action-icon{
      width:18px;
      height:18px;
      flex-shrink:0;
    }

    @keyframes pulse{
      0%{transform:scale(1)}
      50%{transform:scale(1.03)}
      100%{transform:scale(1)}
    }

    @keyframes pinFadeIn{
  0%{opacity:0; transform:translate(-50%,-50%) scale(0.8);}
  100%{opacity:1; transform:translate(-50%,-50%) scale(1.2);}
}

@keyframes pinPulse{
      0%{
        box-shadow:0 0 0 0 rgba(37,99,235,0.55);
      }
      70%{
        box-shadow:0 0 0 16px rgba(37,99,235,0);
      }
      100%{
        box-shadow:0 0 0 0 rgba(37,99,235,0);
      }
    }

    .hint{
      margin-top:10px;
      color:#475569;
      font-size:.91rem;
      line-height:1.4;
      font-weight:600;
    }

    /* V2.102: sehr dezente SWR-Radiostreams in der Seitenleiste */
    .radio-streams-mini{
      margin-top:10px;
      padding:10px 12px;
      border:1px solid rgba(151,179,216,.55);
      border-radius:14px;
      background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(238,245,255,.82));
      box-shadow:0 8px 18px rgba(15,23,42,.04);
    }

    .radio-streams-mini-label{
      display:block;
      margin:0 0 8px;
      color:#5a7493;
      font-size:.72rem;
      line-height:1.3;
      font-weight:900;
      letter-spacing:.04em;
      text-transform:uppercase;
    }

    .radio-streams-mini-links{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
    }

    .radio-stream-link{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 10px;
      border-radius:999px;
      border:1px solid #cfe0f7;
      background:rgba(255,255,255,.88);
      color:#5a7493;
      font-size:.78rem;
      font-weight:800;
      text-decoration:none;
      transition:background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
    }

    .radio-stream-link:hover,
    .radio-stream-link:focus-visible{
      color:#1d4ed8;
      background:#ffffff;
      border-color:#b6cff7;
      transform:translateY(-1px);
      outline:none;
    }

    .radio-stream-link::before{
      content:"♪";
      margin-right:6px;
      font-size:.75rem;
      opacity:.72;
    }

    .company-list{
      padding:10px;
      overflow:auto;
      flex:1;
      min-height:0;
      background:linear-gradient(180deg, #dce9fb 0%, #d3e3f8 100%);
      border-top:1px solid rgba(255,255,255,.55);
      scrollbar-width:thin;
      scrollbar-color:#86a8d8 #cfe0f7;
    }

    .company-list::-webkit-scrollbar{
      width:10px;
    }

    .company-list::-webkit-scrollbar-track{
      background:#cfe0f7;
      border-radius:999px;
    }

    .company-list::-webkit-scrollbar-thumb{
      background:#86a8d8;
      border-radius:999px;
      border:2px solid #cfe0f7;
    }

    .company-btn{
      width:100%;
      text-align:left;
      background:linear-gradient(180deg,#ffffff,#f4f8ff);
      border:1px solid #adc4e4;
      border-radius:16px;
      padding:14px;
      margin:0 0 10px;
      cursor:pointer;
      transition:.18s ease;
      box-shadow:0 5px 14px rgba(37,99,235,.08);
    }

    .company-btn:hover{
      background:linear-gradient(180deg,#ffffff,#eef4ff 56%, #f8fbff 100%);
      border-color:#7fa7df;
      transform:translateY(-1px);
    }

    .company-btn.active{
      background:linear-gradient(180deg, #dceaff, #ffffff);
      border-color:#5f90da;
      box-shadow:0 10px 24px rgba(37,99,235,.18);
    }

.company-btn.emergency-top{
  background:linear-gradient(180deg,#fff9f0 0%, #fff4df 100%);
  border-color:#e7c98b;
  box-shadow:0 8px 18px rgba(180,83,9,.10);
}
.company-btn.emergency-top:hover{
  background:linear-gradient(180deg,#fffaf3 0%, #fff0d8 100%);
  border-color:#ddb56b;
}
.company-btn.emergency-top.active{
  background:linear-gradient(180deg,#fff1d0 0%, #fff9ee 100%);
  border-color:#d39d3c;
  box-shadow:0 12px 24px rgba(180,83,9,.14);
}

.company-btn.emergency-defibrillator{
  background:linear-gradient(180deg,#f7f0c8 0%, #f1de82 100%);
  border-color:#c5a53d;
  box-shadow:0 8px 18px rgba(146,112,10,.12);
}
.company-btn.emergency-defibrillator:hover{
  background:linear-gradient(180deg,#f9f3d4 0%, #f3e18b 100%);
  border-color:#b9982f;
}
.company-btn.emergency-defibrillator.active{
  background:linear-gradient(180deg,#efdc74 0%, #fbf4d9 100%);
  border-color:#a98a28;
  box-shadow:0 12px 24px rgba(146,112,10,.18);
}

.company-btn.emergency-notfall{
  background:linear-gradient(180deg,#daf2e3 0%, #a8e0ba 100%);
  border-color:#4fa56f;
  box-shadow:0 8px 18px rgba(18,136,73,.11);
}
.company-btn.emergency-notfall:hover{
  background:linear-gradient(180deg,#e3f6ea 0%, #afe4bf 100%);
  border-color:#459764;
}
.company-btn.emergency-notfall.active{
  background:linear-gradient(180deg,#9ad9ae 0%, #ecf8f0 100%);
  border-color:#3f8a5d;
  box-shadow:0 12px 24px rgba(18,136,73,.17);
}

.company-btn.emergency-aerztlich{
  background:linear-gradient(180deg,#fde3e1 0%, #f6a9a4 100%);
  border-color:#d86a65;
  box-shadow:0 8px 18px rgba(205,63,59,.11);
}
.company-btn.emergency-aerztlich:hover{
  background:linear-gradient(180deg,#fee9e7 0%, #f7b2ad 100%);
  border-color:#cc5f5a;
}
.company-btn.emergency-aerztlich.active{
  background:linear-gradient(180deg,#f39a95 0%, #fff0ef 100%);
  border-color:#be5652;
  box-shadow:0 12px 24px rgba(205,63,59,.17);
}

.company-btn[data-id="defibrillator"]{
  background:linear-gradient(135deg,#f8e7a3 0%, #f2d56d 42%, #ebc84c 100%);
  border-color:#d7ba56;
  box-shadow:0 10px 22px rgba(210,174,25,.16);
}
.company-btn[data-id="defibrillator"]:hover{
  background:linear-gradient(135deg,#faedb8 0%, #f5dc83 42%, #efd364 100%);
  border-color:#cfb14a;
  box-shadow:0 14px 28px rgba(210,174,25,.20);
}
.company-btn[data-id="defibrillator"].active{
  background:linear-gradient(135deg,#f1da83 0%, #ebcb57 45%, #e2bf43 100%);
  border-color:#caa537;
  box-shadow:0 16px 32px rgba(210,174,25,.24);
}
.company-btn[data-id="defibrillator"] .company-name,
.company-btn[data-id="defibrillator"] .company-meta,
.company-btn[data-id="defibrillator"] .company-live-detail{
  color:#3f2f00;
}
.company-btn[data-id="defibrillator"] .company-live-pill{
  background:rgba(255,248,214,.9);
  color:#7b5b00;
  border-color:rgba(123,91,0,.18);
}

.company-btn[data-id="notfall"]{
  background:linear-gradient(135deg,#59cb86 0%, #40bf73 45%, #31b565 100%);
  border-color:#3ea96a;
  box-shadow:0 10px 22px rgba(5,160,70,.16);
}
.company-btn[data-id="notfall"]:hover{
  background:linear-gradient(135deg,#6fd596 0%, #52c881 45%, #3fbb70 100%);
  border-color:#389f62;
  box-shadow:0 14px 28px rgba(5,160,70,.20);
}
.company-btn[data-id="notfall"].active{
  background:linear-gradient(135deg,#43bf76 0%, #34b368 45%, #26a55b 100%);
  border-color:#2f9555;
  box-shadow:0 16px 32px rgba(5,160,70,.24);
}
.company-btn[data-id="notfall"] .company-name,
.company-btn[data-id="notfall"] .company-meta,
.company-btn[data-id="notfall"] .company-live-detail{
  color:#ffffff;
}
.company-btn[data-id="notfall"] .company-live-pill{
  background:rgba(255,255,255,.18);
  color:#ffffff;
  border-color:rgba(255,255,255,.28);
}

.company-btn[data-id="aerztlicher_notfalldienst"]{
  background:linear-gradient(135deg,#f68d8a 0%, #f07673 45%, #eb6664 100%);
  border-color:#dd7673;
  box-shadow:0 10px 22px rgba(236,64,62,.16);
}
.company-btn[data-id="aerztlicher_notfalldienst"]:hover{
  background:linear-gradient(135deg,#f9a29f 0%, #f48683 45%, #ee7572 100%);
  border-color:#d56d6a;
  box-shadow:0 14px 28px rgba(236,64,62,.20);
}
.company-btn[data-id="aerztlicher_notfalldienst"].active{
  background:linear-gradient(135deg,#ef7d79 0%, #ea6a67 45%, #e25a58 100%);
  border-color:#cb605d;
  box-shadow:0 16px 32px rgba(236,64,62,.24);
}
.company-btn[data-id="aerztlicher_notfalldienst"] .company-name,
.company-btn[data-id="aerztlicher_notfalldienst"] .company-meta,
.company-btn[data-id="aerztlicher_notfalldienst"] .company-live-detail{
  color:#ffffff;
}
.company-btn[data-id="aerztlicher_notfalldienst"] .company-live-pill{
  background:rgba(255,255,255,.18);
  color:#ffffff;
  border-color:rgba(255,255,255,.28);
}
.company-list-divider{
  height:0;
  border-top:3px solid #a9bfdc;
  margin:6px 4px 14px;
  opacity:.95;
}

    .company-name{
      display:block;
      font-weight:900;
      font-size:1rem;
      line-height:1.2;
      margin-bottom:4px;
    }

    /* V2.103: Defibrillator-Icon in Firmenliste + Detailkarte */
    .emergency-inline-icon{
      display:inline-block;
      width:18px;
      height:18px;
      margin-right:7px;
      vertical-align:-3px;
      opacity:.96;
      object-fit:contain;
    }

    .defi-inline-icon{
      display:inline-block;
      width:28px;
      height:28px;
      margin-right:8px;
      vertical-align:-7px;
      opacity:.98;
      object-fit:contain;
    }

    .defi-title-icon,
    .emergency-title-icon{
      display:inline-block;
      width:28px;
      height:28px;
      margin-right:10px;
      vertical-align:-6px;
      opacity:.98;
      object-fit:contain;
    }

    .company-meta{
      display:block;
      color:#475569;
      font-size:.92rem;
      line-height:1.35;
      font-weight:700;
    }

    .content{
      display:flex;
      flex-direction:column;
      min-height:100%;
      background:linear-gradient(180deg, #f7faff 0%, #edf4ff 100%);
    }

    .content-head{
      padding:18px 22px 14px;
      border-bottom:1px solid var(--line-strong);
      background:linear-gradient(180deg, #ffffff, #eaf2ff);
    }

    .content-title{
      margin:0;
      font-size:1.35rem;
      font-weight:900;
      letter-spacing:-0.02em;
    }

    .content-sub{
      margin:8px 0 0;
      color:#475569;
      line-height:1.45;
      font-weight:700;
    }

    .cards{
      padding:16px;
      display:grid;
      gap:14px;
      align-content:start;
    }

    .card{
      background:var(--panel-2);
      border:1px solid var(--line-strong);
      border-radius:18px;
      overflow:hidden;
      display:none;
      box-shadow:0 10px 26px rgba(15,23,42,.08);
    }

    .card.active{
      display:block;
    }

    .card-head{
      padding:18px 18px 14px;
      border-bottom:1px solid var(--line);
      background:linear-gradient(180deg, #ffffff, #eef5ff);
    }

    .badge{

      display:inline-flex;
      align-items:center;
      gap:6px;
      min-height:28px;
      padding:0 10px;
      border-radius:999px;
      background:#d9e8ff;
      color:var(--brand-2);
      font-size:.82rem;
      font-weight:900;
      margin-bottom:10px;
      border:1px solid #b6cff7;
    }

    .card h2{
      margin:0;
      font-size:1.25rem;
      line-height:1.2;
      letter-spacing:-0.02em;
    }

    .card p{
      margin:8px 0 0;
      color:#475569;
      line-height:1.45;
      font-weight:600;
    }

    .actions{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:12px;
    }

    .action{
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:40px;
      padding:0 12px;
      border-radius:12px;
      background:#fff;
      border:1px solid var(--line-strong);
      text-decoration:none;
      color:var(--text);
      font-weight:800;
    }


    .hours-link,
    .emergency-link{
      color:#1d4ed8;
      font-weight:900;
      text-decoration:none;
      border-bottom:1px dashed rgba(29,78,216,.35);
      transition:color .16s ease, border-color .16s ease, background-color .16s ease;
      border-radius:4px;
      padding:1px 0;
    }

    .hours-link:hover,
    .emergency-link:hover{
      color:#163ea3;
      border-bottom-color:#163ea3;
      background:rgba(29,78,216,.06);
    }

    .medical-emergency-card{
      padding:14px;
    }

    .medical-emergency-card.emergency-panel-green{
      background:linear-gradient(180deg,#f3fbf6 0%, #e7f7ec 100%);
      border-color:#bfe2cb;
    }

    .medical-emergency-card.emergency-panel-yellow{
      background:linear-gradient(180deg,#fffbee 0%, #fdf3cf 100%);
      border-color:#ead88f;
    }

    .medical-emergency-card.emergency-panel-red{
      background:linear-gradient(180deg,#fff4f3 0%, #fde5e4 100%);
      border-color:#efc0be;
    }

    .medical-emergency-card.emergency-panel-green .medical-emergency-hero{
      background:linear-gradient(180deg,#ffffff,#edf9f1 62%, #f7fdf9 100%);
      border-color:#c7e5d2;
    }

    .medical-emergency-card.emergency-panel-yellow .medical-emergency-hero{
      background:linear-gradient(180deg,#ffffff,#fff7dc 62%, #fffdf3 100%);
      border-color:#ecd999;
    }

    .medical-emergency-card.emergency-panel-red .medical-emergency-hero{
      background:linear-gradient(180deg,#ffffff,#feefee 62%, #fff9f9 100%);
      border-color:#efc7c5;
    }

    .medical-emergency-card.emergency-panel-green .medical-emergency-item{
      background:#fcfffd;
      border-color:#cbe7d5;
    }

    .medical-emergency-card.emergency-panel-yellow .medical-emergency-item{
      background:#fffef9;
      border-color:#ecdca1;
    }

    .medical-emergency-card.emergency-panel-red .medical-emergency-item{
      background:#fffdfd;
      border-color:#efccca;
    }

    .medical-emergency-hero{
      border:1px solid #bfd0e6;
      border-radius:18px;
      background:linear-gradient(180deg,#ffffff,#eef5ff 62%, #f8fbff 100%);
      padding:16px;
      box-shadow:0 10px 24px rgba(15,23,42,.06);
    }

    .medical-emergency-kicker{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 10px;
      border-radius:999px;
      background:#dfeeff;
      color:#1d4ed8;
      border:1px solid #b6cff7;
      font-size:.78rem;
      font-weight:900;
      letter-spacing:.02em;
      text-transform:uppercase;
    }

    .medical-emergency-line{
      margin-top:10px;
      font-size:1.08rem;
      line-height:1.35;
      font-weight:900;
      color:#112033;
    }

    .medical-emergency-sub{
      margin-top:6px;
      color:#4f647f;
      font-size:.95rem;
      line-height:1.5;
      font-weight:700;
    }

    .medical-emergency-grid{
      margin-top:14px;
      display:grid;
      gap:12px;
      grid-template-columns:1fr;
    }

    .medical-emergency-item{
      border:1px solid #bfd0e6;
      border-radius:16px;
      background:#fff;
      padding:14px;
      box-shadow:0 8px 18px rgba(15,23,42,.05);
    }

    .medical-emergency-item h3{
      margin:0 0 6px;
      font-size:1rem;
      line-height:1.3;
      letter-spacing:-0.02em;
    }

    .medical-emergency-item p{
      margin:0;
      color:#4f647f;
      font-size:.93rem;
      line-height:1.5;
      font-weight:700;
    }

    .medical-emergency-call{
      display:flex;
      align-items:center;
      justify-content:center;
      width:100%;
      min-height:42px;
      margin-top:10px;
      padding:10px 12px;
      border-radius:12px;
      background:linear-gradient(135deg,#2563eb,#1d4ed8);
      color:#fff;
      text-decoration:none;
      font-weight:900;
      box-shadow:0 10px 18px rgba(37,99,235,.18);
      text-align:center;
    }

    .medical-emergency-call-row{
      display:flex;
      align-items:stretch;
      gap:8px;
      margin-top:10px;
    }

    .medical-emergency-call-row .medical-emergency-call{
      margin-top:0;
      flex:1;
      min-width:0;
    }

    .medical-emergency-speak{
      width:42px;
      min-width:42px;
      height:42px;
      border:none;
      border-radius:12px;
      background:linear-gradient(135deg,#ffffff,#eef5ff);
      border:1px solid #b6cff7;
      box-shadow:0 10px 18px rgba(37,99,235,.10);
      cursor:pointer;
      position:relative;
      transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
    }

    .medical-emergency-speak:hover{
      transform:translateY(-1px);
      box-shadow:0 14px 22px rgba(37,99,235,.15);
      background:linear-gradient(135deg,#ffffff,#e6f0ff);
    }

    .medical-emergency-speak::before{
      content:"";
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-40%,-50%);
      width:0;
      height:0;
      border-top:7px solid transparent;
      border-bottom:7px solid transparent;
      border-left:11px solid #1d4ed8;
    }

    .medical-emergency-speak.is-speaking::before{
      transform:translate(-50%,-50%);
      width:10px;
      height:10px;
      border:none;
      background:#1d4ed8;
    }

    .medical-emergency-actions{
      display:grid;
      grid-template-columns:1fr;
      gap:8px;
      margin-top:12px;
    }

    .medical-emergency-actions .action{
      display:flex;
      width:100%;
      justify-content:center;
      text-align:center;
      min-height:44px;
    }

    /* ==========================================================
   [14042026 Live-Hintergruende-Neu]
   HINWEIS-LINIE B
   Falls die dünne graue Linie sichtbar ist, hier prüfen:
   -> border-bottom
   -> background
   Nur Orientierung, keine Regel geändert.
   ========================================================== */
.status-line{
      padding:12px 18px;
      border-bottom:1px solid var(--line);
      background:#f7fbff;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }

    .status{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-weight:900;
    }

    .dot{
      width:10px;
      height:10px;
      border-radius:50%;
      display:inline-block;
      background:var(--muted);
    }

    .dot.open{ background:var(--ok); }
    .dot.closed{ background:var(--danger); }
    .dot.info{ background:var(--warn); }

    .next-open{
      color:#475569;
      font-size:.95rem;
      font-weight:800;
    }

    .warning-box{
      margin:14px 14px 16px; /* unten jetzt 14px - Keine Gewähr. An Feiertagen geschlossen bzw. andere Zeiten möglich. */
      padding:12px 14px;
      border:1px solid #efc676;
      background:#fff2cf;
      color:#7a5613;
      border-radius:14px;
      font-size:.92rem;
      line-height:1.45;
      font-weight:700;
    }

    .table-wrap{
      padding:14px;
    }

    table{
      width:100%;
      border-collapse:collapse;
      background:#fff;
      border:1px solid var(--line-strong);
      border-radius:14px;
      overflow:hidden;
    }

    th, td{
      padding:12px 14px;
      border-bottom:1px solid var(--line);
      text-align:left;
      vertical-align:top;
      font-size:.96rem;
    }

    th{
      background:#dfeeff;
      color:#213654;
      font-size:.9rem;
      text-transform:uppercase;
      letter-spacing:.04em;
      font-weight:900;
    }

    tr:last-child td{ border-bottom:none; }

    .today{
      background:#dcebff;
      font-weight:900;
    }

    .empty-state{
      display:grid;
      place-items:center;
      min-height:320px;
      padding:24px;
      text-align:center;
      color:#475569;
      font-weight:700;
    }

    .empty-state strong{
      display:block;
      color:var(--text);
      font-size:1.1rem;
      margin-bottom:6px;
    }

    .empty-state-card{
      width:min(100%, 760px);
      padding:22px;
      border:1px solid var(--line-strong);
      border-radius:22px;
      background:linear-gradient(180deg,#ffffff,#eef5ff);
      box-shadow:0 12px 30px rgba(15,23,42,.08);
    }

    .empty-state-title{
      display:block;
      color:var(--text);
      font-size:1.1rem;
      margin-bottom:8px;
      font-weight:900;
    }

    .empty-state-text{
      margin:0;
      color:#475569;
      line-height:1.6;
      font-weight:700;
    }

    .empty-state-guide{
      margin:14px 0 0;
      padding-left:18px;
      text-align:left;
      display:grid;
      gap:8px;
      color:var(--text);
      line-height:1.55;
      font-weight:700;
    }

    .empty-state-guide strong{
      display:inline;
      margin:0;
      font-size:inherit;
    }

    .empty-state-qr{
      margin-top:18px;
      padding:16px;
      border-radius:18px;
      border:1px solid var(--line-strong);
      background:linear-gradient(180deg,#f8fbff,#ffffff);
      display:grid;
      justify-items:center;
      gap:12px;
    }

    .empty-state-qr img{
      display:block;
      width:min(240px, 100%);
      height:auto;
      border-radius:18px;
      border:1px solid #d7e4f7;
      background:#fff;
      box-shadow:0 12px 24px rgba(15,23,42,.08);
    }

    .empty-state-qr-text{
      margin:0;
      color:#475569;
      line-height:1.5;
      font-weight:700;
    }

    .footer-note{
      padding:0 18px 30px;
      margin-bottom:18px;
      color:#475569;
      font-size:.88rem;
      line-height:1.4;
      font-weight:700;
    }

    @media (max-width: 960px){
      .topbar-inner{
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:8px;
      }
      .brand-wrap{
        width:100%;
        text-align:center;
      }
      .clock-card{
        width:100%;
        justify-content:center;
      }
      .clock-info{
        align-items:center;
      }
      .live-summary{
        width:min(1200px, calc(100% - 24px));
      }
      .app{
        grid-template-columns:1fr;
      }
      .sidebar{
        min-height:auto;
      }
      .company-list{
        min-height:420px;
      }
    }

    @media (max-width: 640px){
      .topbar-inner{
        width:min(100% - 12px, 1200px);
        min-height:auto;
        padding:8px 0 10px;
        gap:6px;
      }
      .live-summary{
        width:min(100% - 12px, 1200px);
        margin:8px auto 0;
        padding:11px 13px;
        border-radius:16px;
        font-size:.95rem;
      }
      .app{
        width:min(100% - 12px, 1200px);
        margin:8px auto 16px;
        gap:12px;
      }
      .sidebar-head,
      .content-head{
        padding:12px 14px;
      }
      .cards{
        padding:12px;
      }
      .control-row{
        flex-direction:column;
      }
      .select,
      .voice-btn{
        width:100%;
      }
      th, td{
        padding:10px 10px;
        font-size:.92rem;
      }
      .brand-title{
        font-size:1.18rem;
        text-align:center;
      }
      .brand-sub{
        font-size:.92rem;
        text-align:center;
        margin-top:2px;
      }
      .clock-card{
        padding:8px 12px;
      }
      .clock-date{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
        text-align:center;
      }
      .clock-time{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
        font-size:1rem;
      }
      .title{
        margin-bottom:8px;
      }
      .hint{
        margin-top:8px;
      }
      .company-list{
        min-height:460px;
        padding:10px;
        background:linear-gradient(180deg, #d3e3f8 0%, #c9dcf5 100%);
        border-top:2px solid #9ebbe3;
      }
      .panel{
        border-radius:18px;
      }
      .empty-state-card{
        padding:16px;
        border-radius:18px;
      }
      .empty-state-guide{
        padding-left:16px;
        font-size:.94rem;
      }
      .empty-state-qr{
        padding:14px;
      }
      .empty-state-qr img{
        width:min(210px, 100%);
        border-radius:16px;
      }
    }
  
.badge-location{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:8px;
  font-size:.75rem;
  cursor:pointer;
  opacity:.85;
}
.badge-location:hover{
  opacity:1;
}

.map-pin[data-category="Markt"]{border-color:rgba(34,197,94,.7);}
.map-pin[data-category="Getränke"]{border-color:rgba(249,115,22,.7);}
.map-pin[data-category="Bank"]{border-color:rgba(59,130,246,.7);}
.map-pin[data-category="Arzt"]{border-color:rgba(239,68,68,.7);}



.scroll-top-btn{
  position:fixed;
  right:18px;
  bottom:18px;
  width:48px;
  height:48px;
  border:none;
  border-radius:999px;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(37,99,235,.30);
  z-index:1200;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px) scale(.96);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease, box-shadow .2s ease;
}

.scroll-top-btn:hover{
  transform:translateY(-2px) scale(1);
  box-shadow:0 16px 34px rgba(37,99,235,.38);
}

.scroll-top-btn.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

.scroll-top-btn svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media (max-width: 640px){
  .scroll-top-btn{
    right:12px;
    bottom:12px;
    width:44px;
    height:44px;
  }
}



.contact-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:2000;
  box-sizing:border-box;
  backdrop-filter:blur(4px);
  background:rgba(17,32,51,.22);
}
.contact-modal.show{
  display:flex;
}
.contact-modal-box{
  background:#fff;
  border-radius:20px;
  padding:22px;
  max-width:520px;
  width:100%;
  max-height:min(88vh, 920px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  box-shadow:0 24px 60px rgba(15,23,42,.24);
  border:1px solid rgba(151,179,216,.45);
}

.manual-list{
  margin:0;
  padding-left:1.2rem;
}

@media (max-width: 640px){
  .contact-modal{
    padding:10px;
    align-items:flex-end;
  }
  .contact-modal-box{
    max-height:88vh;
    padding:18px 16px;
    border-radius:18px;
  }
}



/* V112: Mobile-Infobutton für Sprachsuche */
.voice-action-group{
  display:flex;
  align-items:stretch;
  gap:8px;
  width:100%;
}

.voice-action-group .voice-btn{
  flex:1;
}

.voice-info-btn{
  display:none;
  width:48px;
  min-width:48px;
  min-height:48px;
  border:1px solid #b6cff7;
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff,#eef5ff);
  color:#1d4ed8;
  font-weight:900;
  font-size:1rem;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(37,99,235,.10);
}

.voice-info-btn:hover,
.voice-info-btn:focus-visible{
  background:linear-gradient(180deg,#ffffff,#e6f0ff);
  border-color:#7fa7df;
  outline:none;
}

.voice-info-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:2100;
  background:rgba(17,32,51,.28);
  backdrop-filter:blur(4px);
}

.voice-info-modal.show{
  display:flex;
}

.voice-info-box{
  width:min(520px, 100%);
  background:linear-gradient(180deg,#ffffff,#f4f8ff);
  border:1px solid #bfd0e6;
  border-radius:22px;
  box-shadow:0 24px 60px rgba(15,23,42,.24);
  padding:18px 18px 16px;
}

.voice-info-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.voice-info-title{
  margin:0;
  color:#112033;
  font-size:1.04rem;
  line-height:1.25;
  font-weight:900;
}

.voice-info-close{
  width:36px;
  height:36px;
  border:none;
  border-radius:999px;
  background:#eef4ff;
  color:#284b79;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  font-weight:900;
}

.voice-info-text{
  margin:0;
  color:#27415f;
  font-size:.94rem;
  line-height:1.6;
  font-weight:700;
}

@media (max-width: 640px){
  .voice-info-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .voice-info-modal{
    padding:10px;
    align-items:flex-end;
  }

  .voice-info-box{
    border-radius:18px;
    padding:16px 15px 14px;
  }
}


.voice-preview{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%) translateY(18px);
  min-width:min(320px, calc(100vw - 32px));
  max-width:min(680px, calc(100vw - 32px));
  padding:12px 16px;
  border-radius:16px;
  background:rgba(17,32,51,.94);
  color:#fff;
  box-shadow:0 16px 34px rgba(15,23,42,.28);
  z-index:1600;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  pointer-events:none;
}
.voice-preview.show{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}
.voice-preview-label{
  display:block;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#b9d2ff;
  margin-bottom:4px;
}
.voice-preview-text{
  display:block;
  font-size:.98rem;
  line-height:1.4;
  font-weight:700;
  word-break:break-word;
}

@media (max-width: 640px){
  .voice-preview{
    bottom:12px;
    min-width:calc(100vw - 24px);
    max-width:calc(100vw - 24px);
    padding:11px 14px;
    border-radius:14px;
  }
  .voice-preview-text{
    font-size:.94rem;
  }
}


.manual-desktop,
.manual-mobile{
  display:none;
}

@media (min-width: 961px){
  .manual-desktop{display:block;}
}

@media (max-width: 960px){
  .manual-mobile{display:block;}
}

.card{
  scroll-margin-top:110px;
}

.card-anchor{
  display:block;
  position:relative;
  top:-110px;
  visibility:hidden;
  height:0;
  overflow:hidden;
  pointer-events:none;
}

.map-overlay.zoom-enabled{
  overflow:hidden;
  cursor:zoom-in;
  touch-action:auto;
  overscroll-behavior:contain;
}

.map-overlay.zoom-enabled.is-zoomed{
  cursor:grab;
}

.map-overlay.zoom-enabled.is-dragging{
  cursor:grabbing;
}

@media (min-width: 961px){
  .map-overlay.zoom-enabled .map-preview{
    pointer-events:none;
  }
}

.map-zoom-layer{
  position:relative;
  width:100%;
  transform-origin:center center;
  will-change:transform;
}

.map-zoom-layer .map-preview{
  display:block;
  width:100%;
}

.map-zoom-layer .map-pins{
  position:absolute;
  inset:0;
}

.map-overlay.zoom-enabled .map-preview,
.map-overlay.zoom-enabled .map-pins{
  transform:none !important;
}

.map-zoom-hint{
  margin-top:10px;
  color:#4f647f;
  font-size:.84rem;
  line-height:1.4;
  font-weight:700;
}

@media (max-width: 960px){
  .map-zoom-hint{
    display:none;
  }
}


/* graesslin-sonderfunktion-isoliert: nur für Praxis Dr. Grässlin */
.graesslin-note-wrap{
  margin-top:4px;
}
.graesslin-note-head{
  display:block;
  margin-bottom:8px;
}
.graesslin-note-row{
  margin:6px 0 0;
  padding:8px 10px;
  border-radius:10px;
  line-height:1.45;
  border:1px solid transparent;
}
.graesslin-note-row strong{
  font-weight:900;
}
.graesslin-note-row.graesslin-wed-1{
  background:#e8f0ff;
  color:#1d4ed8;
  border-color:#bfd4ff;
}
.graesslin-note-row.graesslin-wed-2{
  background:#eaf8ea;
  color:#15803d;
  border-color:#bfe7c5;
}
.graesslin-note-row.graesslin-wed-3{
  background:#fff3e8;
  color:#c2410c;
  border-color:#ffd6b8;
}
.graesslin-note-row.graesslin-wed-4{
  background:#fdecec;
  color:#b91c1c;
  border-color:#f6c2c2;
}
.graesslin-note-row.active{
  box-shadow:0 0 0 2px currentColor inset;
  font-weight:900;
}
.graesslin-note-date{
  opacity:.88;
  font-weight:800;
}


/* V2.1: Sichtbarkeits-Flag, Live-Status in Firmenliste, Druck-Button */
.company-live{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  flex-wrap:wrap;
}
.company-live-pill{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 8px;
  border-radius:999px;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.01em;
  border:1px solid transparent;
}
.company-live-pill.open{
  background:#e8f7ef;
  color:#0f9d58;
  border-color:#b8e3c7;
}
.company-live-pill.closed{
  background:#fbeaea;
  color:#dc2626;
  border-color:#f0c2c2;
}
.company-live-pill.info{
  background:#fff4de;
  color:#b45309;
  border-color:#f2d29b;
}
.company-live-pill.soon{
  box-shadow:0 0 0 2px rgba(180,83,9,.12) inset;
}
.company-live-detail{
  color:#475569;
  font-size:.78rem;
  font-weight:800;
}
.action-print{
  cursor:pointer;
}
@media print{
  body *{
    visibility:hidden !important;
  }
  .print-root,
  .print-root *{
    visibility:visible !important;
  }
  .print-root{
    position:absolute;
    inset:0;
    background:#fff;
    padding:0;
    margin:0;
  }
}


/* V2.72: aufklappbarer Einstellungsbereich */
.settings-toggle-btn{
  margin-top:10px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  border:1px solid #c9dbf6;
  border-radius:16px;
  background:linear-gradient(180deg,#f7fbff,#e8f1ff);
  color:#1f3b63;
  font-size:.96rem;
  font-weight:900;
  box-shadow:0 10px 22px rgba(29,78,216,.08);
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.settings-toggle-btn:hover{
  background:linear-gradient(180deg,#ffffff,#edf5ff);
  border-color:#b8cff3;
}
.settings-toggle-btn:focus{
  outline:none;
  border-color:#6ea8ff;
  box-shadow:0 0 0 4px rgba(59,130,246,.15);
}
.settings-toggle-btn[aria-expanded="false"]{
  background:linear-gradient(180deg,#eef4fb,#dfeaf9);
  border-color:#bfd0e6;
  color:#355171;
  box-shadow:0 6px 16px rgba(15,23,42,.05);
}
.settings-toggle-text{
  display:flex;
  align-items:center;
  gap:10px;
}
.settings-toggle-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
}
.settings-toggle-caret{
  font-size:1rem;
  line-height:1;
  font-weight:900;
}
.settings-panel{
  margin-top:10px;
  padding:12px;
  border:1px solid #cddcf2;
  border-radius:18px;
  background:linear-gradient(180deg,#ffffff,#f3f8ff);
  box-shadow:0 12px 26px rgba(15,23,42,.06);
}
.settings-panel.is-collapsed{
  display:none;
}
.settings-panel-open{
  color:#5a7493;
  font-size:.8rem;
  line-height:1.4;
  font-weight:800;
  margin:0 0 10px;
}
.settings-field{
  margin-top:10px;
}
.settings-field:first-child{
  margin-top:0;
}
.settings-field-label{
  display:block;
  margin:0 0 7px;
  color:#294666;
  font-size:.84rem;
  line-height:1.4;
  font-weight:900;
}
.settings-panel[data-state="closed"] + .hint{
  margin-top:10px;
}

/* V2.2: Minuten-Slider + Live-Farblogik */
.threshold-box{
  margin-top:10px;
  padding:12px 14px;
  border:1px solid var(--line-strong);
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff,#eef5ff);
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}
.threshold-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.threshold-title{
  font-size:.9rem;
  font-weight:900;
  color:#213654;
}
.threshold-value{
  min-width:54px;
  text-align:center;
  font-size:.86rem;
  font-weight:900;
  color:#1d4ed8;
  background:#dfeeff;
  border:1px solid #b6cff7;
  border-radius:999px;
  padding:4px 8px;
}
.threshold-slider{
  width:100%;
}
.threshold-help{
  margin-top:8px;
  font-size:.82rem;
  line-height:1.45;
  color:#4f647f;
  font-weight:700;
}
.status-detail-green{
  color:#166534; /* neu important geloescht */
}
.status-detail-orange{
  color:#b45309; /* neu important geloescht */
}
.status-detail-red{
  color:#b91c1c; /* neu important geloescht */
}
.company-live-detail.status-detail-green,
.company-live-detail.status-detail-orange,
.company-live-detail.status-detail-red{
  font-weight:900;
}


/* V2.5: dezente Änderungs-Badges */
.change-badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:8px 0 0;
}

.change-badge{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 8px;
  border-radius:999px;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.01em;
  border:1px solid transparent;
  white-space:nowrap;
  opacity:.9;
}

.change-badge.new{
  background:#eef4ff;
  color:#315ea8;
  border-color:#d7e5ff;
}

.change-badge.hours{
  background:#fff6ee;
  color:#b86428;
  border-color:#ffe3cc;
}

.company-change-badges{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:7px;
}

.company-change-badges .change-badge{
  min-height:20px;
  padding:0 7px;
  font-size:.64rem;
  opacity:.85;
}



/* V2.7: Change-Badge-Infos für Desktop + Smartphone/Tablet */
.change-badges{
  margin-top:10px;
  margin-bottom:8px;
}

.change-badge,
.company-change-badges .change-badge{
  cursor:default;
}

.change-badge-mobile-info{
  display:none;
  width:100%;
  margin-top:6px;
  color:#667b96;
  font-size:.68rem;
  line-height:1.45;
  font-weight:700;
}

.company-change-badges{
  margin-bottom:4px;
}

.company-change-badges .change-badge-mobile-info{
  margin-top:4px;
  font-size:.66rem;
}

@media (hover: none), (pointer: coarse), (max-width: 960px){
  .change-badge-mobile-info{
    display:block;
  }
}



/* V2.13: QR-Code-Button + QR-Code-Modal */
.qr-code-note{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  text-align:center;
  font-size:.9rem;
  line-height:1.4;
  font-weight:800;
  background:linear-gradient(180deg,#ffffff,#eef4ff 56%, #f8fbff 100%);
  color:#1d4ed8;
  padding:12px 14px;
  border-radius:14px;
  cursor:pointer;
  transition:.2s;
  box-shadow:0 10px 20px rgba(37,99,235,.12);
  user-select:none;
  border:1px solid #b6cff7;
  appearance:none;
  -webkit-appearance:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

.qr-code-note:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(37,99,235,.18);
  background:linear-gradient(180deg,#ffffff,#e6f0ff);
}

.qr-code-note:focus-visible{
  outline:none;
  border-color:#6a9cff;
  box-shadow:0 0 0 4px rgba(37,99,235,.12), 0 14px 28px rgba(37,99,235,.18);
}

.qr-modal{
  display:flex; /* neu important geloescht */
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}

.qr-modal.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.qr-modal .contact-modal-box{
  transform:translateY(10px) scale(.985);
  opacity:0;
  transition:transform .22s ease, opacity .22s ease;
}

.qr-modal.show .contact-modal-box{
  transform:translateY(0) scale(1);
  opacity:1;
}

@media (prefers-reduced-motion: reduce){
  .qr-modal,
  .qr-modal .contact-modal-box{
    transition:none;
  }
}

.qr-code-image-wrap{
  margin-top:14px;
  display:flex;
  justify-content:center;
}

.qr-code-image{
  display:block;
  width:clamp(220px, 62vw, 520px);
  max-width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:contain;
  border-radius:20px;
  border:1px solid #d7e4f7;
  background:#fff;
  box-shadow:0 14px 34px rgba(15,23,42,.10);
}

.qr-code-caption{
  margin-top:12px;
  color:#4f647f;
  font-size:.88rem;
  line-height:1.5;
  font-weight:700;
  text-align:center;
}


@media (min-width: 961px){
  .qr-code-image{
    width:min(520px, 42vw);
  }
}

@media (max-width: 960px){
  .qr-code-image{
    width:min(100%, 440px);
  }
}

@media (max-width: 640px){
  .qr-code-image{
    width:min(100%, 320px);
    border-radius:16px;
  }
}



/* VERSION + BESUCHERZÄHLER (IM CONTENT, ULTRA DEZENT + HOVER)
   - Position: unten rechts im <main class="panel content">
   - Standard: 20% Sichtbarkeit
   - Hover: 55% Sichtbarkeit
   - Kein fixed Overlay
*/
.page-version{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin:10px 18px 20px;
  font-size:.7rem;
  color:#6b85a8;
  opacity:0.2;
  transition:opacity .2s ease;
}

.page-version:hover{
  opacity:0.55;
}

.page-version img{
  height:14px;
  width:auto;
  display:block;
}

@media (max-width: 640px){
  .page-version{
    margin:8px 14px 16px;
    font-size:.64rem;
  }

  .page-version img{
    height:13px;
  }
}


.card-logo{
  height:18px;
  width:auto;
  margin-right:8px;
  vertical-align:-3px;
  display:inline-block;
  print-color-adjust:exact;
  -webkit-print-color-adjust:exact;
}

@media print{
  .card-logo{
    display:inline-block !important;
    visibility:visible !important;
  }
}


.card-logo,
.brand-title img,
.print-logo{
  print-color-adjust:exact !important;
  -webkit-print-color-adjust:exact !important;
}

@media print{
  .card-logo,
  .brand-title img,
  .print-logo{
    display:inline-block !important;
    visibility:visible !important;
    opacity:1 !important;
  }
}



/* V2.29 AUSHANG-Designwahl */
.poster-theme-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:2600;
  background:rgba(17,32,51,.34);
  backdrop-filter:blur(5px);
}
.poster-theme-modal.show{
  display:flex;
}
.poster-theme-box{
  width:min(760px, 100%);
  background:linear-gradient(180deg,#ffffff,#eef4ff 56%, #f8fbff 100%);
  border:1px solid #bfd0e6;
  border-radius:28px;
  box-shadow:0 34px 84px rgba(15,23,42,.26);
  padding:24px;
}
.poster-theme-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.poster-theme-title{
  margin:0;
  font-size:1.18rem;
  font-weight:900;
  letter-spacing:-0.02em;
}
.poster-theme-sub{
  margin:6px 0 0;
  color:#4f647f;
  font-size:.95rem;
  line-height:1.45;
  font-weight:700;
}
.poster-theme-close{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid #bfd0e6;
  background:#fff;
  color:#4f647f;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  font-weight:900;
}
.poster-theme-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:12px;
}
.poster-theme-option{
  border:1px solid #bfd0e6;
  background:#fff;
  border-radius:22px;
  padding:14px 13px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow:0 14px 30px rgba(15,23,42,.10);
  text-align:left;
}
.poster-theme-option:hover{
  transform:translateY(-2px);
  border-color:#7fa7df;
  box-shadow:0 16px 34px rgba(37,99,235,.16);
}
.poster-theme-swatch{
  height:68px;
  border-radius:16px;
  border:1px solid rgba(17,32,51,.08);
  margin-bottom:10px;
}
.poster-theme-name{
  display:block;
  font-size:.9rem;
  font-weight:900;
  color:#112033;
}
.poster-theme-meta{
  display:block;
  margin-top:4px;
  color:#4f647f;
  font-size:.78rem;
  line-height:1.35;
  font-weight:700;
}
@media (max-width: 820px){
  .poster-theme-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width: 520px){
  .poster-theme-box{padding:18px; border-radius:20px;}
  .poster-theme-grid{grid-template-columns:1fr;}
}


/* ==========================================================
   05042026-aushang-note-zeile-drucken
   ----------------------------------------------------------
   AUSHANG DRUCK – INFOTEXT / HINWEISZEILE (FINAL / GETRENNTES PADDING)

   Dieser Block steuert die Darstellung der Hinweiszeile im Aushang,
   z. B.:

   "Škoda Service Partner Tuningen / Villingen-Schwenningen"

   ----------------------------------------------------------
   HERKUNFT:
   ----------------------------------------------------------
   Der Text stammt aus dem Datensatz (JavaScript):

   note: "Škoda Service Partner Tuningen / Villingen-Schwenningen"

   und wird dynamisch in den Aushang eingefügt.

   ----------------------------------------------------------
   AUSGABESTRUKTUR:
   ----------------------------------------------------------
   .poster-extra-block
     └── .poster-extra-text

   .poster-extra-block = Container (Linie + Abstand + Layout)
   .poster-extra-text  = eigentliche Textzeile

   Der Block befindet sich im unteren Bereich des Aushangs,
   direkt oberhalb des QR-Codes.

   ----------------------------------------------------------
   WARUM GETRENNTES PADDING:
   ----------------------------------------------------------
   Die Kurzform (z. B. "8px 0 0") hat im Projekt nicht zuverlässig
   funktioniert, da andere Styles oder Vererbungen hineinwirken.

   Deshalb werden die Werte hier explizit getrennt gesetzt:

   - padding-top
   - padding-bottom
   - padding-left
   - padding-right

   → sorgt für stabile und vorhersehbare Darstellung im Druck

   ----------------------------------------------------------
   LOGIK (Graesslin vs. Standard):
   ----------------------------------------------------------
   isGraesslinPoster = Sonderfall (nur 1 spezieller Aushang)

   TRUE  → kompakter Abstand (oben 6px, unten 0px)
   FALSE → normaler Aushang (oben 12px, unten 12px)
   
   05042026-18-43
   padding-top:${isGraesslinPoster ? "6px" : "14px"};
   padding-bottom:${isGraesslinPoster ? "0px" : "1px"};
   
   ----------------------------------------------------------
   VISUELLE WIRKUNG:
   ----------------------------------------------------------
   Standard-Aushang:
   → gleichmäßiger Abstand oben/unten
   → Hinweiszeile wirkt vertikal zentriert
   → ruhiger, moderner Eindruck

   Graesslin-Aushang:
   → bewusst kompakter
   → da zusätzliche Inhalte vorhanden sind

   ----------------------------------------------------------
   FEINJUSTIERUNG:
   ----------------------------------------------------------
   - mehr padding-top     → Text rutscht nach unten
   - mehr padding-bottom  → Text wirkt höher
   - gleiche Werte        → optisch zentriert

   Beispiele:
   padding-top: 10px / padding-bottom: 10px → kompakt & mittig
   padding-top: 14px / padding-bottom: 14px → luftiger Look
   padding-top: 10px / padding-bottom: 14px → leicht nach unten verschoben

   ----------------------------------------------------------
   HINWEIS:
   ----------------------------------------------------------
   Falls sich die Position nicht verändert, zusätzlich prüfen:

   .poster-extra-text{
     margin:0;
     padding:0;
   }

   da innere Abstände ebenfalls Einfluss haben können.

   ========================================================== */

.poster-extra-block{
  position:relative;
  z-index:1;
  margin-top:2px;
  border-top:1px solid rgba(17,24,39,.10);

  padding-top:12px;
  padding-bottom:12px;
  padding-left:0;
  padding-right:0;

  background:transparent;
}

@media print {

  /* Aushang allgemein mittig halten */
  .print-root {
    text-align: center;
  }

  /* untere Hinweis-Zeile vor dem QR-Code */
  .print-root p:last-of-type {
    text-align: center;
    margin-top: 22px;      /* Abstand zur oberen Linie */
    margin-bottom: 8px;   /* Abstand zur unteren Linie */
    line-height: 1.4;
  }

}


.card-qr-box{
  margin:0 14px 14px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:12px;
  border:1px solid #d7e4f7;
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff,#f6faff);
}
.card-qr-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:120px;
  height:120px;
  padding:6px;
  border-radius:14px;
  background:#fff;
  border:1px solid #d7e4f7;
  text-decoration:none;
}
.card-qr-image{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.card-qr-directlink{
  font-size:.82rem;
  line-height:1.35;
  word-break:break-all;
  color:#1d4ed8;
  font-weight:700;
  text-decoration:none;
}
.card-qr-directlink:hover,
.card-qr-directlink:focus-visible{
  text-decoration:underline;
}


.name-memory-box{
  margin-top:10px;
  padding:12px 14px;
  border:1px solid var(--line-strong);
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff,#eef5ff);
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}
.name-memory-label{
  display:block;
  margin-bottom:8px;
  font-size:.88rem;
  font-weight:900;
  color:#213654;
}
.name-memory-input{
  width:100%;
  min-height:46px;
  padding:0 14px;
  border:1px solid var(--line-strong);
  border-radius:12px;
  background:#fff;
  color:var(--text);
  font:inherit;
  font-weight:700;
}
.name-memory-help{
  margin-top:8px;
  color:#4f647f;
  font-size:.8rem;
  line-height:1.45;
  font-weight:700;
}


.speak-action{
  cursor:pointer;
}
.speak-action.is-speaking{
  background:linear-gradient(135deg,#1d4ed8,#2563eb);
  color:#fff;
  border-color:#1d4ed8;
  box-shadow:0 10px 18px rgba(37,99,235,.18);
}

.hours-speak-row{
  cursor:pointer;
  transition:background .16s ease, box-shadow .16s ease;
}
.hours-speak-row:hover td{
  background:#f5f9ff;
}
.hours-speak-row:focus{
  outline:none;
}
.hours-speak-row:focus-visible td{
  box-shadow:inset 0 0 0 2px rgba(37,99,235,.28);
}
.hours-speak-row.is-speaking td{
  background:#e8f1ff;
}
.hours-speak-row td:last-child{
  position:relative;
  padding-right:42px;
}
.hours-speak-row td:last-child::after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:0;
  height:0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:11px solid #1d4ed8;
  opacity:.7;
}

.hours-speak-row.is-speaking td:last-child::after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:12px;
  height:12px;
  border:none;
  background:#1d4ed8;
  opacity:.85;
}
@media (max-width: 640px){
  .hours-speak-row td:last-child{
    padding-right:36px;
  }
  .hours-speak-row td:last-child::after{
    right:10px;
  }
}



/* Nachtmodus-Schalter */
.theme-toggle{
  min-height:48px;
  padding:0 14px;
  border:1px solid var(--line-strong);
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff,#ebf3ff);
  color:var(--text);
  font:inherit;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow:0 8px 20px rgba(15,23,42,.08);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.theme-toggle:hover{
  transform:translateY(-1px);
  border-color:#7fa7df;
  background:linear-gradient(180deg,#ffffff,#f3f8ff);
}

.theme-toggle:focus{
  outline:none;
  border-color:#6a9cff;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

.theme-toggle-icon{
  width:18px;
  height:18px;
  flex-shrink:0;
}

.theme-toggle-label{
  white-space:nowrap;
}

html[data-theme="dark"]{
  color-scheme:dark;
}

html[data-theme="dark"] :root,
html[data-theme="dark"]{
  --bg:#07111f;
  --panel:#0f1b2d;
  --panel-2:#132238;
  --panel-3:#182b45;
  --text:#edf4ff;
  --muted:#a8bdd8;
  --line:#223857;
  --line-strong:#35547f;
  --brand:#60a5fa;
  --brand-2:#93c5fd;
  --ok:#34d399;
  --warn:#f59e0b;
  --danger:#f87171;
  --shadow:0 16px 36px rgba(0,0,0,.34);
}

html[data-theme="dark"] body{
  background:
    radial-gradient(circle at top left, rgba(96,165,250,.14), transparent 32%),
    radial-gradient(circle at top right, rgba(56,189,248,.10), transparent 24%),
    linear-gradient(180deg, #091425 0%, #07111f 100%);
  color:var(--text);
}

html[data-theme="dark"] .topbar{
  background:rgba(8,15,28,.88);
  border-bottom-color:var(--line-strong);
  box-shadow:0 8px 26px rgba(0,0,0,.25);
}

html[data-theme="dark"] .clock-card,
html[data-theme="dark"] .live-summary,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .field,
html[data-theme="dark"] .select,
html[data-theme="dark"] .clear-btn,
html[data-theme="dark"] .action,
html[data-theme="dark"] .voice-info-btn,
html[data-theme="dark"] .map-box,
html[data-theme="dark"] .company-btn,
html[data-theme="dark"] .medical-emergency-hero,
html[data-theme="dark"] .medical-emergency-item,
html[data-theme="dark"] table,
html[data-theme="dark"] .contact-modal-box,
html[data-theme="dark"] .voice-info-box,
html[data-theme="dark"] .poster-theme-box,
html[data-theme="dark"] .settings-panel,
html[data-theme="dark"] .threshold-box,
html[data-theme="dark"] .radio-streams-mini,
html[data-theme="dark"] .qr-code-note,
html[data-theme="dark"] .map-help-note{
  background:linear-gradient(180deg,#12233a,#0f1b2d);
  color:var(--text);
  border-color:var(--line-strong);
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .content,
html[data-theme="dark"] .sidebar-head,
html[data-theme="dark"] .content-head,
html[data-theme="dark"] .card-head,
html[data-theme="dark"] .status-line{
  background:linear-gradient(180deg,#112036,#0d1728);
  color:var(--text);
  border-color:var(--line-strong);
}

html[data-theme="dark"] .company-list{
  background:linear-gradient(180deg,#0b1627 0%, #0a1323 100%);
  border-top-color:rgba(255,255,255,.08);
  scrollbar-color:#4d6f9d #15253d;
}

html[data-theme="dark"] .company-list::-webkit-scrollbar-track{
  background:#15253d;
}

html[data-theme="dark"] .company-list::-webkit-scrollbar-thumb{
  background:#4d6f9d;
  border-color:#15253d;
}

html[data-theme="dark"] .card{
  background:var(--panel-2);
  border-color:var(--line-strong);
}

html[data-theme="dark"] th{
  background:#18304d;
  color:var(--text);
}

html[data-theme="dark"] .today{
  background:#162b44;
}

html[data-theme="dark"] .badge{
  background:#173154;
  color:#cfe4ff;
  border-color:#35547f;
}

html[data-theme="dark"] .company-meta,
html[data-theme="dark"] .content-sub,
html[data-theme="dark"] .hint,
html[data-theme="dark"] .footer-note,
html[data-theme="dark"] .map-box p,
html[data-theme="dark"] .next-open,
html[data-theme="dark"] .warning-box,
html[data-theme="dark"] .threshold-help,
html[data-theme="dark"] .settings-panel-open,
html[data-theme="dark"] .settings-field-label,
html[data-theme="dark"] .page-version,
html[data-theme="dark"] .voice-info-text,
html[data-theme="dark"] .clock-date,
html[data-theme="dark"] .brand-sub,
html[data-theme="dark"] .company-live-detail,
html[data-theme="dark"] .empty-state-text,
html[data-theme="dark"] .empty-state-qr-text{
  color:var(--muted); /* neu important geloescht */
}

html[data-theme="dark"] .warning-box{
  background:#3a2b11;
  border-color:#7c5a18;
}

html[data-theme="dark"] .map-editor-note{
  box-shadow:0 10px 20px rgba(96,165,250,.18);
}

html[data-theme="dark"] .empty-state-card,
html[data-theme="dark"] .empty-state-qr{
  background:linear-gradient(180deg,#12233a,#0f1b2d);
  border-color:var(--line-strong);
  box-shadow:0 18px 34px rgba(0,0,0,.22);
}

html[data-theme="dark"] .empty-state-guide,
html[data-theme="dark"] .empty-state-title{
  color:var(--text);
}

html[data-theme="dark"] .empty-state-qr img{
  border-color:#35547f;
  background:#fff;
}

html[data-theme="dark"] .theme-toggle .theme-toggle-label::after{
  content:"";
}



/* GPT-FIX 2026-04-07: Defibrillator im Nachtmodus komplett lesbar */
html[data-theme="dark"] .company-btn[data-id="defibrillator"],
html[data-theme="dark"] .company-btn.emergency-defibrillator{
  background:linear-gradient(135deg,#3a2f00 0%, #241c00 52%, #171200 100%); /* neu important geloescht */
  border-color:#8f7830; /* neu important geloescht */
  box-shadow:0 12px 26px rgba(0,0,0,.34), 0 0 0 1px rgba(255,214,102,.08) inset; /* neu important geloescht */
}

html[data-theme="dark"] .company-btn[data-id="defibrillator"]:hover,
html[data-theme="dark"] .company-btn.emergency-defibrillator:hover{
  background:linear-gradient(135deg,#4a3b00 0%, #2d2300 52%, #1a1400 100%); /* neu important geloescht */
  border-color:#b59638; /* neu important geloescht */
}

html[data-theme="dark"] .company-btn[data-id="defibrillator"].active,
html[data-theme="dark"] .company-btn.emergency-defibrillator.active{
  background:linear-gradient(135deg,#5a4800 0%, #352900 52%, #1d1600 100%); /* neu important geloescht */
  border-color:#d4af37; /* neu important geloescht */
  box-shadow:0 14px 30px rgba(0,0,0,.42), 0 0 0 1px rgba(255,225,130,.12) inset; /* neu important geloescht */
}

html[data-theme="dark"] .company-btn[data-id="defibrillator"] .company-name,
html[data-theme="dark"] .company-btn[data-id="defibrillator"] .company-meta,
html[data-theme="dark"] .company-btn[data-id="defibrillator"] .company-live-detail,
html[data-theme="dark"] .company-btn.emergency-defibrillator .company-name,
html[data-theme="dark"] .company-btn.emergency-defibrillator .company-meta,
html[data-theme="dark"] .company-btn.emergency-defibrillator .company-live-detail{
  color:#ffffff; /* neu important geloescht */
}

html[data-theme="dark"] .company-btn[data-id="defibrillator"] .company-live-pill,
html[data-theme="dark"] .company-btn.emergency-defibrillator .company-live-pill{
  background:rgba(255,255,255,.12); /* neu important geloescht */
  color:#fff7d1; /* neu important geloescht */
  border-color:rgba(255,255,255,.18); /* neu important geloescht */
}

html[data-theme="dark"] .defi-inline-icon,
html[data-theme="dark"] .defi-title-icon,
html[data-theme="dark"] .emergency-inline-icon,
html[data-theme="dark"] .emergency-title-icon,
html[data-theme="dark"] img[src*="defibrillator"],
html[data-theme="dark"] img[src*="external-defibrillator"],
html[data-theme="dark"] img[src*="aed"],
html[data-theme="dark"] img[src*="notfall"],
html[data-theme="dark"] img[src*="arzt"],
html[data-theme="dark"] img[src*="apotheke"]{
  filter:brightness(0) invert(1) contrast(1.06); /* neu important geloescht */
}


/* =========================================================
   GLOBALER NACHTMODUS – KOMPLETT OPTIMIERT
========================================================= */
html[data-theme="dark"]{
  color-scheme:dark;

  --bg:#0b1220;
  --panel:#121a2b;
  --panel-2:#162033;
  --panel-3:#1b263b;
  --text:#ffffff;
  --muted:#9fb3c8;
  --line:#2a3a55;
  --line-strong:#3a4d6b;
}

/* Texte fixen */
html[data-theme="dark"] .threshold-title,
html[data-theme="dark"] .company-name,
html[data-theme="dark"] .company-meta,
html[data-theme="dark"] .company-live-detail{
  color:#ffffff;
}

/* Input fix */
html[data-theme="dark"] .name-memory-input,
html[data-theme="dark"] .field{
  background:#1a2332;
  color:#ffffff;
  border-color:#3a4d6b;
}

/* Karten & Panels */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .content,
html[data-theme="dark"] .sidebar{
  background:var(--panel);
}

/* Buttons */
html[data-theme="dark"] .company-btn{
  background:linear-gradient(180deg,#1a2332,#121a2b);
  border-color:#3a4d6b;
}

/* Defibrillator extra lesbar */
html[data-theme="dark"] .company-btn[data-id="defibrillator"]{
  background:linear-gradient(135deg,#3a2f00,#1a1600);
}

html[data-theme="dark"] .company-btn[data-id="defibrillator"] .company-name{
  color:#fff3a0;
}

/* Icons weiß */



/* =========================
   AUTO-NACHTMODUS EINSTELLUNGEN
========================= */
.auto-theme-grid{
  display:grid;
  gap:10px;
  margin-top:0;
}

.auto-theme-toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:46px;
  padding:10px 12px;
  border:1px solid var(--line-strong);
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff,#eef5ff);
}

.auto-theme-toggle-label{
  color:#213654;
  font-size:.92rem;
  line-height:1.4;
  font-weight:900;
}

.auto-theme-switch{
  position:relative;
  width:52px;
  height:30px;
  appearance:none;
  -webkit-appearance:none;
  border:none;
  border-radius:999px;
  background:#c6d7ee;
  cursor:pointer;
  transition:background .2s ease;
  box-shadow:inset 0 0 0 1px rgba(17,32,51,.08);
}

.auto-theme-switch::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 4px 10px rgba(15,23,42,.16);
  transition:left .2s ease;
}

.auto-theme-switch:checked{
  background:#2563eb;
}

.auto-theme-switch:checked::after{
  left:25px;
}

.auto-theme-help{
  color:#475569;
  font-size:.82rem;
  line-height:1.5;
  font-weight:700;
}

.auto-theme-time-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.auto-theme-time-label{
  display:block;
  margin:0 0 7px;
  color:#294666;
  font-size:.84rem;
  line-height:1.4;
  font-weight:900;
}

.auto-theme-status{
  min-height:22px;
  color:#315ea8;
  font-size:.8rem;
  line-height:1.45;
  font-weight:800;
}

@media (max-width: 640px){
  .auto-theme-time-grid{
    grid-template-columns:1fr;
  }
}

html[data-theme="dark"] .auto-theme-toggle-row{
  background:linear-gradient(180deg,#121a2b,#182338);
  border-color:var(--line-strong);
}

html[data-theme="dark"] .auto-theme-toggle-label,
html[data-theme="dark"] .auto-theme-time-label{
  color:#ffffff;
}

html[data-theme="dark"] .auto-theme-switch{
  background:#41526d;
}

html[data-theme="dark"] .auto-theme-switch:checked{
  background:#60a5fa;
}

html[data-theme="dark"] .auto-theme-switch::after{
  background:#f8fbff;
}

html[data-theme="dark"] .auto-theme-status{
  color:#b9d2ff;
}


/* =========================
   DARK MODE QR-CODE FIX
   QR-Codes dürfen NICHT invertiert werden
========================= */
html[data-theme="dark"] .qr-code-image,
html[data-theme="dark"] .card-qr-image,
html[data-theme="dark"] img[src*="/qrcode/"],
html[data-theme="dark"] img[src*="qr-"]{
  filter:none; /* neu important geloescht */
  -webkit-filter:none; /* neu important geloescht */
  mix-blend-mode:normal; /* neu important geloescht */
}

html[data-theme="dark"] .qr-code-image,
html[data-theme="dark"] .card-qr-image{
  background:#ffffff; /* neu important geloescht */
}


/* =========================
   DARK MODE ORTSPLAN FIX
   Ortsplan/Bilder im Kartenbereich dürfen NICHT invertiert werden
========================= */
html[data-theme="dark"] .map-preview img,
html[data-theme="dark"] .map-overlay img,
html[data-theme="dark"] .map-zoom-layer img,
html[data-theme="dark"] img[src*="map"],
html[data-theme="dark"] img[src*="ortsplan"]{
  filter:none; /* neu important geloescht */
  -webkit-filter:none; /* neu important geloescht */
  mix-blend-mode:normal; /* neu important geloescht */
}

html[data-theme="dark"] .map-box,
html[data-theme="dark"] .map-overlay,
html[data-theme="dark"] .map-preview{
  background:#ffffff; /* neu important geloescht */
}


html[data-theme="dark"] .live-summary-label{
  color:#93c5fd;
}

html[data-theme="dark"] .live-summary-detail{
  color:#475569;
}


@media (max-width: 640px){
  .live-summary-wrap{
    gap:8px;
  }

  .live-summary{
    padding:11px 13px;
    border-radius:16px;
  }

  .live-summary-info-toggle{
    width:32px;
    height:32px;
    font-size:.95rem;
  }

  .live-summary-info-box{
    right:0;
    width:min(320px, calc(100vw - 28px));
  }
}

/* ==========================================================
   V126 PREMIUM LIVE-ZEILE
   - dezente Premium-Animation bei Statuswechsel
   - Icon-Zustände offen / bald / geschlossen / info
   - aufgeklappt und zuklappbar
   ========================================================== */
.live-summary-wrap{
  align-items:flex-start;
  gap:10px;
}

.live-summary-panel{
  flex:1;
  min-width:0;
  border-radius:22px;
  position:relative;
}

.live-summary-panel::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:24px;
  border:1px solid transparent;
  pointer-events:none;
  opacity:1;
}

.live-summary-panel[data-live-state="open"]::before{ border-color:transparent; }

.live-summary-panel[data-live-state="soon"]::before{ border-color:transparent; }

.live-summary-panel[data-live-state="closed"]::before{ border-color:transparent; }

.live-summary-panel.is-updating{
  animation:liveSummaryBorderFlash 1s ease;
}

@keyframes liveSummaryBorderFlash{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,0), 0 0 0 0 rgba(15,23,42,0); }
  18%{ box-shadow:0 0 0 2px rgba(255,255,255,.95), 0 0 0 5px rgba(71,85,105,.42); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0), 0 0 0 0 rgba(15,23,42,0); }
}

.live-summary-toggle{
  position:relative;
  width:100%;
  min-height:88px;
  padding:0;
  border:none;
  background:transparent;
  display:block;
  cursor:pointer;
  text-align:left;
  z-index:1;
}

.live-summary-toggle:focus-visible{
  outline:none;
}

.live-summary-content{
  flex:1;
  min-width:0;
}

.live-summary{
  display:flex;
  align-items:flex-start;
  gap:14px;
  min-height:88px;
  padding:16px 18px;
  border:1px solid rgba(151,179,216,.72);
  border-radius:22px;
  background:#ffffff;
  box-shadow:0 12px 28px rgba(15,23,42,.10);
}

.live-summary-panel[data-live-state="open"] .live-summary{
  border-color:#4b5563;
}

.live-summary-panel[data-live-state="soon"] .live-summary{
  border-color:#9a6b16;
}

.live-summary-panel[data-live-state="closed"] .live-summary{
  border-color:#94a3b8;
}

.live-summary-icon{
  position:relative;
  width:46px;
  height:46px;
  flex:0 0 46px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#111827;
  background:#f3f4f6;
  border:1px solid #cbd5e1;
  box-shadow:none;
}

.live-summary-panel[data-live-state="open"] .live-summary-icon{
  color:#111827;
  background:#d1d5db;
}

.live-summary-panel[data-live-state="soon"] .live-summary-icon{
  color:#1f2937;
  background:#d1d5db;
}

.live-summary-panel[data-live-state="closed"] .live-summary-icon{
  color:#374151;
  background:#e5e7eb;
}

.live-summary-icon svg{
  width:24px;
  height:24px;
  display:block;
}

.live-summary-pulse{
  position:absolute;
  right:6px;
  top:6px;
  width:9px;
  height:9px;
  border-radius:999px;
  background:currentColor;
  box-shadow:0 0 0 0 currentColor;
  opacity:.92;
  animation:livePulse 1.8s infinite;
}

@keyframes livePulse{
  0%{ box-shadow:0 0 0 0 rgba(37,99,235,.34); }
  70%{ box-shadow:0 0 0 10px rgba(37,99,235,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,99,235,0); }
}

.live-summary-main{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  flex:1;
}

.live-summary-topline{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.live-summary-badge{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(37,99,235,.10);
  color:var(--brand-2);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.live-summary-panel[data-live-state="open"] .live-summary-badge{
  background:#e2e8f0;
  color:#111827;
}

.live-summary-panel[data-live-state="soon"] .live-summary-badge{
  background:#fef3c7;
  color:#92400e;
}

.live-summary-panel[data-live-state="closed"] .live-summary-badge{
  background:#e5e7eb;
  color:#374151;
}

.live-summary-label{
  margin-right:0;
  color:#64748b;
  font-size:.8rem;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.live-summary-title{
  display:block;
  color:var(--text);
  font-size:1.06rem;
  font-weight:950;
  letter-spacing:-.02em;
  line-height:1.28;
}

.live-summary-detail{
  display:block;
  margin-top:1px;
  color:#475569;
  font-size:.93rem;
  font-weight:800;
  line-height:1.45;
}

.live-summary-compact{
  display:none;
}

/* ==========================================================
   [14042026 Live-Hintergruende-Neu]
   live-hintergrund-aendern pos 3 von 4
   Live-Buttons = Caret / Pfeilbutton
   Nur HINTERGRUND / BORDER / border-radius hier anpassen.
   ========================================================== */
.live-summary-caret{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  min-width:42px;
  height:42px;
  margin:0;
  border-radius:999px;
  border:1px solid #cbd5e1;
  background:#ffffff;
  color:#111827;
  font-size:1rem;
  font-weight:900;
  box-shadow:0 10px 22px rgba(15,23,42,.08);
  transition:transform .22s ease, background .18s ease, border-color .18s ease;
}

.live-summary-toggle:hover .live-summary-caret,
.live-summary-toggle:focus-visible .live-summary-caret{
  border-color:#64748b;
  background:#f8fafc;
}

.live-summary-caret-outside{
  flex:0 0 auto;
  margin-top:18px;
  cursor:pointer;
}

.live-summary-caret:hover,
.live-summary-caret:focus-visible{
  border-color:#64748b;
  background:#f8fafc;
  outline:none;
}

.live-summary-panel.is-collapsed .live-summary{
  min-height:62px;
  padding:12px 16px;
}

.live-summary-panel.is-collapsed .live-summary-title,
.live-summary-panel.is-collapsed .live-summary-detail,
.live-summary-panel.is-collapsed .live-summary-topline{
  display:none;
}

.live-summary-panel.is-collapsed .live-summary-main{
  justify-content:center;
}

.live-summary-panel.is-collapsed .live-summary-compact{
  display:block;
  color:var(--text);
  font-size:.96rem;
  font-weight:900;
  line-height:1.28;
}

.live-summary-panel.is-collapsed .live-summary-caret{
  transform:translateY(0);
}

.live-summary-info-toggle{
  width:38px;
  height:38px;
  box-shadow:0 12px 24px rgba(15,23,42,.09);
}

@media (min-width: 761px){
  .live-summary-wrap{
    display:flex;
    align-items:flex-start;
    gap:10px;
  }

  .live-summary-panel{
    flex:1 1 auto;
  }

  .live-summary-caret-outside{
    position:relative;
    top:0;
    right:auto;
  }

  .live-summary-info{
    position:relative;
    top:auto;
    right:auto;
    flex:0 0 auto;
    margin-top:18px;
  }
}

html[data-theme="dark"] .live-summary-panel::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:24px;
  border:1px solid transparent;
  pointer-events:none;
  opacity:1;
}
html[data-theme="dark"] .live-summary{
  background:linear-gradient(180deg, rgba(18,28,45,.96), rgba(14,21,34,.98));
  border-color:rgba(71,100,140,.72);
  box-shadow:0 18px 38px rgba(2,8,23,.36), inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="dark"] .live-summary-label{ color:#9ab3d4; }
html[data-theme="dark"] .live-summary-title{ color:#e8f1ff; }
html[data-theme="dark"] .live-summary-detail{ color:#b4c7e5; }
html[data-theme="dark"] .live-summary-badge{ background:rgba(96,165,250,.14); color:#93c5fd; }
html[data-theme="dark"] .live-summary-panel[data-live-state="open"] .live-summary-badge{ background:rgba(34,197,94,.16); color:#86efac; }
html[data-theme="dark"] .live-summary-panel[data-live-state="soon"] .live-summary-badge{ background:rgba(251,191,36,.18); color:#fde68a; }
html[data-theme="dark"] .live-summary-panel[data-live-state="closed"] .live-summary-badge{ background:rgba(148,163,184,.18); color:#cbd5e1; }

@media (max-width: 760px){
  .live-summary-wrap{
    gap:10px;
  }
  .live-summary-toggle{
    min-height:76px;
  }
  .live-summary{
    min-height:76px;
    padding:14px 14px;
    gap:12px;
    border-radius:18px;
  }
  .live-summary-icon{
    width:40px;
    height:40px;
    flex-basis:40px;
    border-radius:14px;
  }
  .live-summary-title{
    font-size:.98rem;
  }
  .live-summary-detail{
    font-size:.88rem;
  }
  .live-summary-panel.is-collapsed .live-summary{
    min-height:58px;
    padding:10px 14px;
  }
}

@media (prefers-reduced-motion: reduce){
  .live-summary-panel.is-updating,
  .live-summary-pulse,
  .live-summary-caret,
  .live-summary-toggle,
  .live-summary,
  .live-summary-icon{
    animation:none; /* neu important geloescht */
    transition:none; /* neu important geloescht */
  }
}


/* V127: superkompakte gemeinsame 24h-Analysebalken-Zeitleiste */
.live-summary-content{
  display:grid;
  gap:10px;
}

/* ==========================================================
   [14042026 Live-Hintergruende-Neu]
   live-hintergrund-aendern pos 4 von 4
   Timeline-Hintergrund
   Nur HINTERGRUND / BORDER hier anpassen.
   HINWEIS zu B: dünne graue Linie kommt häufig von
   .live-timeline-scale (background / border-bottom)
   oder .status-line (border-bottom).
   NICHT ändern: position, left, width, --live-timeline-now-left
   ========================================================== */
.live-timeline-board{
      /* V154: Abstand der kleinen Uhrzeit über der roten Linie.
         Zum späteren eigenen Anpassen einfach nur diesen Wert ändern.
         Größerer Wert = Anzeige sitzt höher.
         Empfehlung: 34px bis 42px */
      --live-now-mini-offset: 56px;
  display:grid;
  gap:6px;
  padding:2px 0 0;
}

.live-timeline-scale,
.live-timeline-row{
  display:grid;
  grid-template-columns: minmax(150px, 230px) minmax(320px, 1fr) minmax(64px, 108px);
  gap:8px;
  align-items:center;
}

/* ==========================================================
   [14042026 Live-Hintergruende-Neu]
   HINWEIS-LINIE B / Timeline-Kopf
   Dünne Linie oft hier durch border-bottom oder Kontrast im Background.
   Nur Orientierung, keine Regel geändert.
   ========================================================== */
.live-timeline-scale{
  position:sticky;
  top:0;
  z-index:2;
  padding:2px 0 4px;
  background:#e5e7eb;
  border-bottom:1px dashed rgba(151,179,216,.4);
}

.live-timeline-scale-label{
  padding:0 4px;
  color:#5a7493;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.live-timeline-scale-label-right{
  text-align:right;
}

.live-timeline-axis{
  position:relative;
  height:18px;
  border-radius:999px;
  border:1px solid #dbe6f5;
  background:repeating-linear-gradient(to right, rgba(148,163,184,.18) 0, rgba(148,163,184,.18) 1px, transparent 1px, transparent calc(100% / 24)), #f3f4f6;
  overflow:hidden;
}

.live-timeline-ticks{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(24,1fr);
  pointer-events:none;
}

.live-timeline-tick{
  font-size:.58rem;
  color:#6d86a9;
  font-weight:900;
  transform:translateX(-50%);
  padding-top:1px;
}

.live-timeline-tick:first-child{
  transform:none;
  padding-left:2px;
}

.live-timeline-tick:last-child{
  transform:translateX(-100%);
  text-align:right;
  padding-right:2px;
}

.live-timeline-groups{
  position:relative;
  display:grid;
  gap:6px;
}

.live-timeline-groups::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:158px;
  display:none;
}

.live-timeline-group{
  position:relative;
  border:1px solid #dfe8f5;
  border-radius:14px;
  overflow:hidden;
  background:#f9fafb;
}

.live-timeline-group::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:158px;
  width:2px;
  background:#ef4444;
  box-shadow:0 0 0 3px rgba(239,68,68,.10);
  pointer-events:none;
  z-index:1;
}

.live-timeline-group-head{
  min-height:28px;
  padding:0 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:#e5e7eb;
  border-bottom:1px solid #e6eef9;
}

.live-timeline-group-head strong{
  font-size:.74rem;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.live-timeline-group-head span{
  color:#64748b;
  font-size:.69rem;
  font-weight:800;
}

.live-timeline-rows{
  position:relative;
  z-index:2;
}

.live-timeline-row{
  min-height:26px;
  padding:4px 0;
  border-top:1px solid #eef4fb;
}

.live-timeline-row:first-child{
  border-top:none;
}

.live-timeline-name{
  min-width:0;
  padding:0 4px;
  display:flex;
  align-items:center;
  gap:7px;
}

.live-timeline-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  flex-shrink:0;
}

.live-timeline-dot.open{ background:#374151; }
.live-timeline-dot.soon{ background:#6b7280; }
.live-timeline-dot.closed{ background:#9ca3af; }

.live-timeline-firm{
  font-size:.8rem;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.1;
}

.live-timeline-track{
  position:relative;
  height:14px;
  border-radius:999px;
  border:1px solid #dfe8f5;
  background:repeating-linear-gradient(to right, rgba(148,163,184,.14) 0, rgba(148,163,184,.14) 1px, transparent 1px, transparent calc(100% / 24)), #f3f4f6;
  overflow:hidden;
}

.live-timeline-seg{
  position:absolute;
  top:2px;
  height:8px;
  border-radius:999px;
}

.live-timeline-seg.open{ background:#374151; }
.live-timeline-seg.soon{ background:#6b7280; }
.live-timeline-seg.later{ background:#9ca3af; }
.live-timeline-seg.closedlater{ background:#d1d5db; }

.live-timeline-now-dot{
  position:absolute;
  top:3px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#ef4444;
  transform:translateX(-3px);
  z-index:3;
}

.live-timeline-meta{
  min-width:0;
  padding:0 4px 0 0;
  font-size:.72rem;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:right;
}

.live-timeline-meta.open{ color:#0f7a37; }
.live-timeline-meta.soon{ color:#9a5700; }
.live-timeline-meta.closed{ color:#617287; }

.live-timeline-loading,
.live-timeline-empty{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  border:1px dashed #d7e4f7;
  border-radius:14px;
  color:#5a7493;
  background:linear-gradient(180deg,#ffffff,#f6faff);
  font-size:.78rem;
  font-weight:800;
}

.live-summary-panel.is-collapsed .live-timeline-board{
      /* V154: Abstand der kleinen Uhrzeit über der roten Linie.
         Zum späteren eigenen Anpassen einfach nur diesen Wert ändern.
         Größerer Wert = Anzeige sitzt höher.
         Empfehlung: 34px bis 42px */
      --live-now-mini-offset: 56px;
  display:none;
}

html[data-theme="dark"] .live-timeline-axis,
html[data-theme="dark"] .live-timeline-track{
  border-color:#2d4463;
  background:
    repeating-linear-gradient(to right, rgba(148,163,184,.14) 0, rgba(148,163,184,.14) 1px, transparent 1px, transparent calc(100% / 24)),
    linear-gradient(180deg,#15263b,#132236);
}

html[data-theme="dark"] .live-timeline-group{
  background:linear-gradient(180deg,#122338,#0f1d30);
  border-color:#24405f;
}

html[data-theme="dark"] .live-timeline-group-head{
  background:linear-gradient(180deg,#15283f,#102034);
  border-bottom-color:#223c5a;
}

html[data-theme="dark"] .live-timeline-group-head strong{ color:#e8f1ff; }
html[data-theme="dark"] .live-timeline-group-head span,
html[data-theme="dark"] .live-timeline-scale-label,
html[data-theme="dark"] .live-timeline-tick,
html[data-theme="dark"] .live-timeline-empty,
html[data-theme="dark"] .live-timeline-loading{ color:#9ab3d4; }
html[data-theme="dark"] .live-timeline-firm{ color:#e8f1ff; }
html[data-theme="dark"] .live-timeline-loading,
html[data-theme="dark"] .live-timeline-empty{ background:linear-gradient(180deg,#122338,#102034); border-color:#284667; }

@media (max-width: 900px){
  .live-timeline-scale,
  .live-timeline-row{
    grid-template-columns:minmax(120px, 160px) minmax(220px, 1fr) minmax(54px, 80px);
    gap:6px;
  }

  .live-timeline-group::before{
    left:158px;
  }

  .live-timeline-scale-label{ font-size:.62rem; }
  .live-timeline-firm{ font-size:.75rem; }
  .live-timeline-meta{ font-size:.66rem; }
}


/* V128: Feinschliff Zeitstrahl */
.live-timeline-board{
      /* V154: Abstand der kleinen Uhrzeit über der roten Linie.
         Zum späteren eigenen Anpassen einfach nur diesen Wert ändern.
         Größerer Wert = Anzeige sitzt höher.
         Empfehlung: 34px bis 42px */
      --live-now-mini-offset: 56px;
  position:relative;
}

.live-timeline-now-line{
  position:absolute;
  width:2px;
  background:#ef4444;
  box-shadow:0 0 0 3px rgba(239,68,68,.10);
  pointer-events:none;
  z-index:6;
  display:none;
}

.live-timeline-scale--repeat{
  position:relative;
  top:auto;
  z-index:3;
  margin:0 0 2px;
  padding:5px 0 5px;
  border-bottom:1px dashed rgba(151,179,216,.34);
  background:linear-gradient(180deg,rgba(251,253,255,.98),rgba(247,250,255,.96));
}

.live-timeline-axis::before,
.live-timeline-track::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  background:rgba(245,158,11,.38);
  pointer-events:none;
}

.live-timeline-axis::after,
.live-timeline-track::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:50%;
  background:linear-gradient(90deg, rgba(245,158,11,.03), rgba(245,158,11,.10));
  pointer-events:none;
}

.live-timeline-tick.is-midday{
  color:#9a5d00;
  font-size:.62rem;
}

.live-timeline-row,
.live-timeline-group-head{
  position:relative;
  z-index:2;
}

.live-timeline-group::before,
.live-timeline-groups::before{
  display:none;
}

.live-timeline-track{
  height:12px;
}

.live-timeline-seg{
  top:2px;
  height:6px;
}

.live-timeline-now-strip{
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:#ef4444;
  box-shadow:0 0 0 2px rgba(239,68,68,.08);
  z-index:4;
  transform:translateX(-1px);
}

.live-timeline-now-dot{
  display:none;
}



/* V131: Smartphone + Zeitachsen-Korrekturen */
@media (max-width: 640px){
  .topbar-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    text-align:left;
    gap:8px 10px;
    width:min(100% - 12px, 1200px);
    padding:8px 0 10px;
  }

  .topbar-inner > div:last-child{
    display:contents; /* neu important geloescht */
  }

  .brand-wrap{
    grid-column:1;
    grid-row:1;
    width:auto;
    min-width:0;
    text-align:left;
  }

  .brand-title{
    font-size:1.08rem;
    line-height:1.08;
  }

  .brand-sub{
    margin-top:2px;
    font-size:.82rem;
  }

  #themeToggle{
    grid-column:2;
    grid-row:1;
    justify-self:end;
    align-self:center;
    min-height:44px;
    padding:0 12px;
  }

  .theme-toggle-label{
    font-size:.95rem;
  }

  .clock-card{
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    justify-content:center;
    min-height:44px;
    padding:8px 12px;
  }

  .clock-date{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
    font-size:.82rem;
  }

  .clock-time{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
    font-size:1rem;
  }

  .live-summary-wrap{
    position:relative;
    display:block;
  }

  .live-summary-panel{
    width:100%;
  }

  .live-summary-toggle{
    display:block;
    padding-right:48px;
  }

  .live-summary-caret{
    position:absolute;
    top:8px;
    right:8px;
    width:34px;
    min-width:34px;
    height:34px;
    margin:0;
    z-index:8;
  }

  .live-summary-caret-outside{
    margin-top:0;
  }

  .live-summary-info{
    position:absolute;
    top:50px;
    right:8px;
    z-index:9;
  }

  .live-summary-info-toggle{
    width:34px;
    height:34px;
    font-size:.92rem;
  }

  .live-summary{
    padding-right:52px;
  }

  .live-timeline-tick{
    font-size:.54rem;
  }
}


/* V132: Zeitleiste exakt auf Stunden-Grenzen */
.live-timeline-axis,
.live-timeline-track{
  background-size:auto;
}

.live-timeline-ticks{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.live-timeline-tick{
  position:absolute;
  top:1px;
  transform:translateX(-50%);
  font-size:.58rem;
  color:#6d86a9;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}

.live-timeline-tick.is-start{
  transform:none;
  left:0 !important;
}

.live-timeline-tick.is-end{
  transform:translateX(-100%);
  left:100% !important;
  text-align:right;
}

.live-timeline-tick.is-midday{
  color:#9a5d00;
  font-size:.62rem;
}

@media (max-width: 640px){
  .live-timeline-tick{
    font-size:.54rem;
  }
}


/* V136: Live-Zeitleiste in ruhigen Grautönen, ohne Verläufe */
:root{
  --timeline-open-bg: #e5e7eb;
  --timeline-open-border: #9ca3af;
  --timeline-open-shadow: 0 10px 24px rgba(15,23,42,.08);
  --timeline-open-button-bg: #d1d5db;
  --timeline-open-button-border: #9ca3af;
  --timeline-flash: #6b7280;
}

.live-summary-wrap.timeline-open{
  position: relative;
  padding: 10px;
  border: 1px solid var(--timeline-open-border);
  border-radius: 24px;
  background: var(--timeline-open-bg);
  box-shadow: var(--timeline-open-shadow);
}

.live-summary-wrap.timeline-open .live-summary-panel{
  border-radius: 20px;
}

.live-summary-wrap.timeline-open .live-summary-toggle{
  background: transparent;
}

.live-summary-wrap.timeline-open .live-summary-info-toggle,
.live-summary-wrap.timeline-open .live-summary-caret{
  border-color: var(--timeline-open-button-border);
  background: var(--timeline-open-button-bg);
  box-shadow: none;
  color: #374151;
}

.live-summary-wrap.timeline-open .live-summary-info-toggle:hover,
.live-summary-wrap.timeline-open .live-summary-caret:hover{
  background: #cbd5e1;
}

.brand-logo{
  animation: none; /* neu important geloescht */
}

.topbar.status-pulse{
  border-bottom-color: var(--timeline-flash);
  box-shadow:
    0 8px 26px rgba(15, 23, 42, .08),
    0 0 0 3px rgba(240,184,75,.28) inset;
  transition: border-color .22s ease, box-shadow .22s ease;
}

/* Smartphone: geöffneter Timeline-Bereich als eigener Block */
@media (max-width: 640px){
  .live-summary-wrap.timeline-open{
    padding: 8px;
    border-radius: 20px;
  }
}


/* V136 override: Live-Übersicht sachlich wie ein Marktpanel */
.live-summary{
  background:#f3f4f6;
  border:1px solid #9ca3af;
  box-shadow:0 8px 18px rgba(15,23,42,.08);
}
.live-summary-label{
  color:#111827;
  margin-right:0;
}
.live-summary-badge{
  background:#d1d5db;
  color:#111827;
  border:1px solid #9ca3af;
  box-shadow:none;
}
.live-summary-panel[data-live-state="open"] .live-summary-badge,
.live-summary-panel[data-live-state="soon"] .live-summary-badge,
.live-summary-panel[data-live-state="closed"] .live-summary-badge,
.live-summary-panel[data-live-state="info"] .live-summary-badge{
  background:#d1d5db;
  color:#111827;
  border-color:#9ca3af;
}
.live-summary-title:empty,
.live-summary-detail:empty{
  display:none;
}
.live-summary-main{
  justify-content:center;
}
.live-summary-topline{
  gap:10px;
  align-items:center;
}
.live-summary-icon{
  color:#111827;
  background:#d1d5db;
  box-shadow:none;
}
.live-summary-pulse{
  display:none;
}
.live-summary-caret{
  color:#374151;
}
.live-timeline-board,
.live-timeline-group,
.live-timeline-scale,
.live-timeline-scale--repeat{
  /* 15042026*/
  /* background:#f3f4f6; */
  background: transparent;
}
.live-timeline-group{
  border:1px solid #d1d5db;
}
.live-timeline-group-head{
  background:#e5e7eb;
  border-bottom:1px solid #d1d5db;
}
.live-timeline-axis,
.live-timeline-track{
  background:repeating-linear-gradient(to right, rgba(148,163,184,.14) 0, rgba(148,163,184,.14) 1px, transparent 1px, transparent calc(100% / 24)), #f3f4f6;
}
.live-timeline-now-line,
.live-timeline-group::before,
.live-timeline-now-strip{
  background:#111827;
  box-shadow:none;
}
.live-summary-info-toggle{
  background:#d1d5db;
  color:#111827;
  border-color:#9ca3af;
  box-shadow:none;
}
.live-summary-info-box{
  background:#f3f4f6;
  border-color:#9ca3af;
  box-shadow:0 10px 22px rgba(15,23,42,.10);
}

/* V137: harte Neutralisierung – nur kühle Grautöne, keine Verläufe, rote Jetzt-Linie */
:root{
  --timeline-open-bg:#eceff3;
  --timeline-open-border:#b6bec8;
  --timeline-open-shadow:0 10px 24px rgba(15,23,42,.08);
  --timeline-open-button-bg:#123456;
  --timeline-open-button-border:#a9b2bd;
  --timeline-flash:#9aa3ad;
}
/* https://www.ipidca.de/live.html 15042026 */
.live-summary-wrap.timeline-open,
.live-summary-wrap.timeline-open .live-summary-panel,
.live-summary-badge,
.live-summary-icon,
.live-summary-info-toggle,
.live-summary-caret,
.live-summary-wrap.timeline-open .live-summary-info-toggle,
.live-summary-wrap.timeline-open .live-summary-caret{
background: linear-gradient(180deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0) 28%),
    linear-gradient(180deg, rgb(231, 236, 255) 0%, rgb(217, 221, 250) 48%, rgb(210, 215, 246) 100%);
  color:#1f2937; /* neu important geloescht */
  border-color:#a9b2bd; /* neu important geloescht */
  box-shadow:none; /* neu important geloescht */
} 

.live-summary-wrap.timeline-open .live-summary-info-toggle:hover,
.live-summary-wrap.timeline-open .live-summary-caret:hover,
.live-summary-info-toggle:hover{
  background:#cfd6de; /* neu important geloescht */
}

.topbar.status-pulse{
  border-bottom-color:#9aa3ad; /* neu important geloescht */
  box-shadow:0 8px 26px rgba(15,23,42,.08), 0 0 0 2px rgba(154,163,173,.28) inset; /* neu important geloescht */
}

.live-timeline-group-head,
.live-timeline-scale--repeat{
  background:#e3e8ee; /* neu important geloescht */
  background-image:none; /* neu important geloescht */
}

.live-timeline-axis,
.live-timeline-track{
  background:#eef2f6; /* neu important geloescht */
  background-image:none; /* neu important geloescht */
}

.live-timeline-axis::before,
.live-timeline-track::before,
.live-timeline-axis::after,
.live-timeline-track::after{
  display:none; /* neu important geloescht */
}

.live-timeline-ticks{
  background:none; /* neu important geloescht */
}

.live-timeline-tick,
.live-timeline-tick.is-midday,
.live-timeline-scale-label,
.live-timeline-group-head span,
.live-timeline-meta,
.live-timeline-meta.open,
.live-timeline-meta.soon,
.live-timeline-meta.closed,
.live-summary-detail,
.live-summary-label{
  color:#6b7280; /* neu important geloescht */
}

.live-timeline-group-head strong,
.live-timeline-firm,
.live-summary-title,
.live-summary-badge{
  color:#111827; /* neu important geloescht */
}

.live-timeline-dot.open,
.live-timeline-seg.open{
  background:#4b5563; /* neu important geloescht */
}

.live-timeline-dot.soon,
.live-timeline-seg.soon{
  background:#6b7280; /* neu important geloescht */
}

.live-timeline-dot.closed,
.live-timeline-seg.later{
  background:#9ca3af; /* neu important geloescht */
}

.live-timeline-seg.closedlater{
  background:#d1d5db; /* neu important geloescht */
}

.live-timeline-now-line,
.live-timeline-now-strip{
  background:#dc2626; /* neu important geloescht */
  box-shadow:0 0 0 2px rgba(220,38,38,.10); /* neu important geloescht */
}

.live-timeline-loading,
.live-timeline-empty{
  background:#eef2f6; /* neu important geloescht */
  background-image:none; /* neu important geloescht */
  border-color:#c3c9d1; /* neu important geloescht */
  color:#6b7280; /* neu important geloescht */
}


/* V138: klare Kontraste, helle Grau-Basis, farbige Balken, rote Jetzt-Linie */
.live-summary-wrap.timeline-open .live-summary-panel::before,
.live-summary-wrap.timeline-open .live-summary,
.live-summary-wrap.timeline-open .live-summary-content,
.live-summary-wrap.timeline-open .live-timeline-board,
.live-summary-wrap.timeline-open .live-timeline-group,
.live-summary-wrap.timeline-open .live-timeline-group-head,
.live-summary-wrap.timeline-open .live-timeline-scale,
.live-summary-wrap.timeline-open .live-timeline-axis,
.live-summary-wrap.timeline-open .live-summary-panel::before{
  border-color:#cbd5e1;

}

/* 1px Linie finden und entfernen - 15042026 */
/*
.live-summary-wrap.timeline-open .live-summary-panel::before{
  border-right: none;
}
*/

/* 1px Linie finden und entfernen - 15042026 */
/* entfernt das Ding komplett */
.live-summary-wrap.timeline-open .live-summary-panel::before{
  content: none;
}

.live-summary-wrap.timeline-open .live-summary{
  background:#ffffff; /* neu important geloescht */
  border-color:#cbd5e1;
  border: none; /* neu important geloescht */
 }

.live-summary-wrap.timeline-open .live-summary-content{ gap:12px; }
.live-summary-wrap.timeline-open .live-timeline-board{ gap:8px; }

.live-summary-wrap.timeline-open .live-timeline-group{
  background:#f8fafc; /* neu important geloescht */
  border:1px solid #cbd5e1;
  box-shadow:0 8px 18px rgba(15,23,42,.06);
}

.live-summary-wrap.timeline-open .live-timeline-group-head{
  background:#ffffff; /* neu important geloescht */
  border-bottom:1px solid #dbe4ee; /* neu important geloescht */
}

.live-summary-wrap.timeline-open .live-timeline-axis,
.live-summary-wrap.timeline-open .live-timeline-track{
  background-color:#f8fafc; /* neu important geloescht */
  border-color:#cbd5e1; /* neu important geloescht */
}

.live-summary-wrap.timeline-open .live-timeline-scale,
.live-summary-wrap.timeline-open .live-timeline-scale--repeat{
  background:#ffffff; /* neu important geloescht */
  border-bottom:1px dashed #cbd5e1; /* neu important geloescht */
}

.live-summary-wrap.timeline-open .live-timeline-axis::before,
.live-summary-wrap.timeline-open .live-timeline-track::before,
.live-summary-wrap.timeline-open .live-timeline-axis::after,
.live-summary-wrap.timeline-open .live-timeline-track::after{
  display:none; /* neu important geloescht */
}

.live-summary-wrap.timeline-open .live-timeline-tick,
.live-summary-wrap.timeline-open .live-timeline-scale-label,
.live-summary-wrap.timeline-open .live-timeline-group-head span{
  color:#64748b; /* neu important geloescht */
}

.live-summary-wrap.timeline-open .live-timeline-group-head strong,
.live-summary-wrap.timeline-open .live-timeline-firm,
.live-summary-wrap.timeline-open .live-summary-title,
.live-summary-wrap.timeline-open .live-summary-badge{
  color:#0f172a; /* neu important geloescht */
}

.live-summary-wrap.timeline-open .live-timeline-meta,
.live-summary-wrap.timeline-open .live-summary-detail,
.live-summary-wrap.timeline-open .live-summary-label{
  color:#475569; /* neu important geloescht */
}

.live-summary-wrap.timeline-open .live-timeline-dot.open,
.live-summary-wrap.timeline-open .live-timeline-seg.open{ background:#22c55e; /* neu important geloescht */ }
.live-summary-wrap.timeline-open .live-timeline-dot.soon,
.live-summary-wrap.timeline-open .live-timeline-seg.soon{ background:#f59e0b; /* neu important geloescht */ }
.live-summary-wrap.timeline-open .live-timeline-dot.closed,
.live-summary-wrap.timeline-open .live-timeline-seg.later{ background:#3b82f6; /* neu important geloescht */ }
.live-summary-wrap.timeline-open .live-timeline-seg.closedlater{ background:#cbd5e1; /* neu important geloescht */ }

.live-summary-wrap.timeline-open .live-timeline-now-line,
.live-summary-wrap.timeline-open .live-timeline-now-strip{
  background:#dc2626; /* neu important geloescht */
  box-shadow:0 0 0 2px rgba(220,38,38,.14); /* neu important geloescht */
}



/* ===== FIX LOGO HEADER ===== */
.brand-title{
  display:flex;
  align-items:center;
  gap:12px;
}

/* LOGO FIX */
.brand-logo{
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  object-fit:contain;
  display:block;
}

/* schützt vor globalen img-Regeln */
.brand-title img{
  width:36px; /* neu important geloescht */
  height:36px; /* neu important geloescht */
  max-width:36px;
}



/* V141: Timeline-Zeilen öffnen direkt die passende Firmenkarte */
.live-timeline-row[data-company-id]{
  cursor:pointer;
  transition:background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.live-timeline-row[data-company-id]:hover{
  background:rgba(255,255,255,.72);
}

.live-timeline-row[data-company-id]:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(37,99,235,.22) inset;
  background:rgba(255,255,255,.88);
}

.live-timeline-row[data-company-id]:active{
  transform:scale(.998);
}

.card.card-click-highlight{
  box-shadow:0 0 0 2px rgba(239,68,68,.18), 0 16px 34px rgba(15,23,42,.12);
  border-color:#ef4444;
}

.company-btn.timeline-source-highlight{
  box-shadow:0 0 0 2px rgba(239,68,68,.16), 0 12px 28px rgba(15,23,42,.12);
}

/* V141: Logo-Größe stabil */
.brand-title{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-logo{
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  object-fit:contain;
  display:block;
}

.brand-title img{
  width:36px; /* neu important geloescht */
  height:36px; /* neu important geloescht */
  max-width:36px;
}

@media (min-width: 768px){
  .brand-logo,
  .brand-title img{
    width:40px; /* neu important geloescht */
    height:40px; /* neu important geloescht */
    max-width:40px;
  }
}


/* v152: Live-Stand + Mini-Uhrzeit + sichere Timeline-Klicks */
/* margin:-2px 0 2px 10px; links 10px */
/* top right bottom left */
.live-stand{
  margin:-2px 0 2px 10px;
  color:#64748b;
  font-size:.77rem;
  line-height:1.35;
  font-weight:700;
  letter-spacing:.01em;
}

.live-timeline-row{
  cursor:pointer;
}

.live-timeline-row:focus-visible{
  outline:2px solid rgba(220,38,38,.28);
  outline-offset:2px;
  border-radius:12px;
}

/* V154: Kleine Uhrzeit über der roten Linie.
   Die horizontale Position kommt aus JS.
   Die vertikale Höhe wird über --live-now-mini-offset in .live-timeline-board gesteuert. Größerer Wert = Uhrzeit sitzt höher. */
.live-timeline-now-mini{
  position:absolute;
  z-index:6;
  transform:translateX(-50%);
  font-size:.58rem;
  line-height:1;
  font-weight:900;
  color:#dc2626;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(220,38,38,.22);
  border-radius:999px;
  padding:2px 5px;
  box-shadow:0 6px 14px rgba(15,23,42,.08);
  pointer-events:none;
  white-space:nowrap;
}

.card-click-highlight{
  box-shadow:0 0 0 2px rgba(220,38,38,.18), 0 16px 36px rgba(15,23,42,.12); /* neu important geloescht */
  border-color:rgba(220,38,38,.34); /* neu important geloescht */
}

.timeline-source-highlight{
  box-shadow:0 0 0 2px rgba(220,38,38,.18), 0 12px 26px rgba(15,23,42,.10); /* neu important geloescht */
  border-color:rgba(220,38,38,.30); /* neu important geloescht */
}


/* =========================================================
   V164 NACHTMODUS FEINSCHLIFF
   - Logo farbig lassen
   - Live-Text besser lesbar
   - Info-Text kontrastreicher
   - QR-Code-Hintergrund dunkler
   ========================================================= */
html[data-theme="dark"] .brand-logo,
html[data-theme="dark"] .brand-title img,
html[data-theme="dark"] .topbar img[src*="wildrose"],
html[data-theme="dark"] img.brand-logo{
  filter:none; /* neu important geloescht */
  -webkit-filter:none; /* neu important geloescht */
  mix-blend-mode:normal; /* neu important geloescht */
}

html[data-theme="dark"] .brand-title,
html[data-theme="dark"] .brand-title span,
html[data-theme="dark"] #uiTitle{
  color:#f8fbff; /* neu important geloescht */
}

html[data-theme="dark"] .live-summary-label{
  color:#dbeafe; /* neu important geloescht */
}

html[data-theme="dark"] .live-summary-title{
  color:#ffffff; /* neu important geloescht */
  text-shadow:0 1px 0 rgba(0,0,0,.28);
}

html[data-theme="dark"] .live-summary-detail,
html[data-theme="dark"] .live-summary-compact,
html[data-theme="dark"] .live-summary-meta,
html[data-theme="dark"] .live-stand,
html[data-theme="dark"] #liveStand{
  color:#d7e6fb; /* neu important geloescht */
}

html[data-theme="dark"] .live-summary{
  background:linear-gradient(180deg, rgba(19,30,48,.985), rgba(12,20,34,.99)); /* neu important geloescht */
  border-color:rgba(98,129,173,.78); /* neu important geloescht */
}

html[data-theme="dark"] .live-summary-panel[data-live-state="open"] .live-summary-title,
html[data-theme="dark"] .live-summary-panel[data-live-state="open"] .live-summary-detail{
  color:#f8fbff; /* neu important geloescht */
}

html[data-theme="dark"] .qr-code-image-wrap{
  background:linear-gradient(180deg,#111c2c,#0b1523);
  border:1px solid #314866;
  border-radius:24px;
  padding:18px;
}

html[data-theme="dark"] .qr-code-image{
  background:#d7dee8; /* neu important geloescht */
  border-color:#5c728f; /* neu important geloescht */
  box-shadow:0 18px 40px rgba(0,0,0,.34); /* neu important geloescht */
}

html[data-theme="dark"] #qrCodeModalTitle{
  color:#f3f8ff; /* neu important geloescht */
}

html[data-theme="dark"] #qrCodeModalText,
html[data-theme="dark"] #qrCodeCaption{
  color:#d0def3; /* neu important geloescht */
}

html[data-theme="dark"] #qrCodeModal button[onclick="closeQrModal()"]{
  background:#162437; /* neu important geloescht */
  color:#eaf2ff; /* neu important geloescht */
  border:1px solid #3f5b7d;
}


/* =========================================================
   V165 NACHTMODUS + LIVE-LEISTE PC/TABLET
   A: Live-Schrift im Nachtmodus klar lesbar
   B: QR-Bereich im Kartenbereich dunkler
   C: Live-Leiste kuerzer, Pfeil + Info direkt daneben
   ========================================================= */

.live-summary-actions{
  display:flex;
  align-items:flex-start;
  gap:8px;
  flex:0 0 auto;
  margin-top:18px;
}

@media (min-width: 761px){
  .live-summary-wrap{
    align-items:flex-start;
    gap:10px;
  }
  .live-summary-panel{
    flex:0 1 calc(100% - 102px);
    max-width:calc(100% - 102px);
  }
  .live-summary-actions{
    margin-top:18px;
    gap:8px;
  }
  .live-summary-caret-outside,
  .live-summary-info{
    position:relative;
    top:auto;
    right:auto;
    margin-top:0;
  }
}

@media (max-width: 760px){
  .live-summary-actions{
    margin-top:10px;
    gap:8px;
  }
}

html[data-theme="dark"] .brand-logo,
html[data-theme="dark"] .brand-title img,
html[data-theme="dark"] .topbar img[src*="wildrose"],
html[data-theme="dark"] img.brand-logo{
  filter:none; /* neu important geloescht */
  -webkit-filter:none; /* neu important geloescht */
  mix-blend-mode:normal; /* neu important geloescht */
}

html[data-theme="dark"] .live-summary,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-summary{
  background:linear-gradient(180deg, #172334 0%, #0f1826 100%); /* neu important geloescht */
  background-image:none; /* neu important geloescht */
  border-color:#415978; /* neu important geloescht */
  color:#eef4ff; /* neu important geloescht */
  box-shadow:0 16px 34px rgba(0,0,0,.34); /* neu important geloescht */
}

html[data-theme="dark"] .live-summary-panel::before,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-summary-panel::before{
  border-color:#334760; /* neu important geloescht */
}

html[data-theme="dark"] .live-summary-title,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-summary-title{
  color:#f8fbff; /* neu important geloescht */
  text-shadow:none; /* neu important geloescht */
}

html[data-theme="dark"] .live-summary-detail,
html[data-theme="dark"] .live-summary-label,
html[data-theme="dark"] .live-summary-compact,
html[data-theme="dark"] .live-summary-meta,
html[data-theme="dark"] .live-stand,
html[data-theme="dark"] #liveStand,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-summary-detail,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-summary-label{
  color:#d7e5f8; /* neu important geloescht */
}

html[data-theme="dark"] .live-summary-icon,
html[data-theme="dark"] .live-summary-badge,
html[data-theme="dark"] .live-summary-info-toggle,
html[data-theme="dark"] .live-summary-caret,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-summary-info-toggle,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-summary-caret{
  background:linear-gradient(180deg, #223247 0%, #172334 100%); /* neu important geloescht */
  background-image:none; /* neu important geloescht */
  border-color:#415978; /* neu important geloescht */
  color:#eef4ff; /* neu important geloescht */
}

html[data-theme="dark"] .live-summary-wrap.timeline-open,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-summary-panel,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-summary-toggle,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-summary-content,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-timeline-board,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-timeline-group,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-timeline-group-head,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-timeline-scale,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-timeline-scale--repeat,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-timeline-axis,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-timeline-track,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-timeline-loading,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-timeline-empty{
  background:#101927; /* neu important geloescht */
  background-image:none; /* neu important geloescht */
}

html[data-theme="dark"] .live-summary-wrap.timeline-open .live-timeline-group{
  background:#152131; /* neu important geloescht */
  border-color:#334760; /* neu important geloescht */
  box-shadow:0 10px 22px rgba(0,0,0,.28); /* neu important geloescht */
}

html[data-theme="dark"] .live-summary-wrap.timeline-open .live-timeline-group-head,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-timeline-scale,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-timeline-scale--repeat{
  background:#172334; /* neu important geloescht */
  border-color:#334760; /* neu important geloescht */
}

html[data-theme="dark"] .live-summary-wrap.timeline-open .live-timeline-group-head strong,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-timeline-firm,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-summary-badge{
  color:#f8fbff; /* neu important geloescht */
}

html[data-theme="dark"] .live-summary-wrap.timeline-open .live-timeline-meta,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-timeline-group-head span,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-timeline-scale-label,
html[data-theme="dark"] .live-summary-wrap.timeline-open .live-timeline-tick{
  color:#c7d8ee; /* neu important geloescht */
}

html[data-theme="dark"] .card-qr-box{
  background:linear-gradient(180deg, #223247 0%, #172334 100%); /* neu important geloescht */
  border-color:#415978; /* neu important geloescht */
}

html[data-theme="dark"] .card-qr-link{
  background:#dfe7f1; /* neu important geloescht */
  border-color:#6f86a4; /* neu important geloescht */
}




/* V168: saubere Info-Box ohne Transparenz und ohne Mehrfach-Overrides */
.live-summary-info-box{
  background:#f3f4f6;
  border:1px solid #9ca3af;
  box-shadow:0 10px 22px rgba(15,23,42,.10);
  color:#111827;
}

.live-summary-info-box strong,
#liveSummaryInfoTitle{
  color:#1d4ed8;
}

.live-summary-info-box p,
#liveSummaryInfoText{
  color:#475569;
}

html[data-theme="dark"] .live-summary-info-box{
  background:#0b1627;
  border:1px solid #35547f;
  box-shadow:0 18px 34px rgba(0,0,0,.42);
  color:#edf4ff;
}

html[data-theme="dark"] .live-summary-info-box strong,
html[data-theme="dark"] #liveSummaryInfoTitle{
  color:#dbeafe;
}

html[data-theme="dark"] .live-summary-info-box p,
html[data-theme="dark"] #liveSummaryInfoText{
  color:#edf4ff;
}


/* V170: Live-/Simulationsvorschau */
.preview-box{
  margin-top:0;
  padding:14px;
  border:1px solid var(--line-strong);
  border-radius:16px;
  background:linear-gradient(180deg,#ffffff,#eef4ff);
  box-shadow:0 8px 18px rgba(15,23,42,.06);
}
.preview-box-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.preview-box-title{
  font-size:1rem;
  font-weight:900;
  letter-spacing:-0.02em;
  color:var(--text);
}
.preview-box-subtitle{
  margin-top:4px;
  color:#5b6f88;
  font-size:.9rem;
  line-height:1.45;
  font-weight:700;
}
.preview-mode-pill{
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.05em;
  background:#eff6ff;
  color:var(--brand-2);
  white-space:nowrap;
}
.preview-mode-pill.is-simulated{
  background:linear-gradient(180deg,#fee2e2,#fecaca);
  color:#991b1b;
  border-color:#ef4444;
  box-shadow:0 0 0 3px rgba(239,68,68,.18);
}
.preview-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.preview-actions{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
}
.preview-action-btn{
  min-height:44px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(37,99,235,.18);
}
.preview-action-btn.secondary{
  border:1px solid var(--line-strong);
  background:#fff;
  color:var(--text);
  box-shadow:none;
}
.preview-action-btn:hover{
  transform:translateY(-1px);
}
.preview-status-text{
  margin-top:10px;
  color:#445a76;
  font-size:.9rem;
  line-height:1.45;
  font-weight:800;
}
.preview-status-text.is-simulated{
  color:#991b1b;
  font-weight:900;
}
body.preview-simulated .clock-card{
  border-color:#ef4444;
  background:linear-gradient(180deg,#fff1f2,#fee2e2);
  box-shadow:0 0 0 4px rgba(239,68,68,.16), 0 14px 30px rgba(127,29,29,.16);
}
body.preview-simulated .live-summary-wrap .live-summary-badge{
  background:#fff7ed;
  color:#b45309;
}
body.preview-simulated .topbar{
  border-bottom-color:#ef4444;
  box-shadow:0 8px 26px rgba(127,29,29,.16);
}

.preview-autolive-box{
  margin-top:12px;
  padding:12px 14px;
  border:1px solid var(--line-strong);
  border-radius:16px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
}
.preview-autolive-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.preview-autolive-title{
  font-size:.93rem;
  font-weight:900;
  color:var(--text);
  letter-spacing:-0.01em;
}
.preview-autolive-value{
  color:var(--brand-2);
  font-size:.9rem;
  font-weight:900;
}
.preview-autolive-help{
  margin-top:8px;
  color:#445a76;
  font-size:.88rem;
  line-height:1.45;
  font-weight:700;
}
body.preview-simulated #previewBox{
  border-color:#ef4444;
  background:linear-gradient(180deg,#fff7f7,#ffe9e9);
  box-shadow:0 0 0 4px rgba(239,68,68,.14), 0 16px 32px rgba(127,29,29,.12);
}
body.preview-simulated #previewStatusText{
  background:#7f1d1d;
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #ef4444;
}
@media (max-width: 760px){
  .preview-grid,
  .preview-actions{
    grid-template-columns:1fr;
  }
}
@media print{
  .preview-box,
  #settingsToggleButton,
  #voiceButton,
  #voiceInfoButton,
  #searchInput,
  #clearSearchButton{
    display:none; /* neu important geloescht */
  }
}


.simulation-warning-banner{
  display:none;
  width:min(1200px, calc(100% - 24px));
  margin:12px auto 0;
  border:2px solid #dc2626;
  border-radius:18px;
  background:linear-gradient(180deg,#7f1d1d,#991b1b);
  color:#fff;
  box-shadow:0 18px 36px rgba(127,29,29,.28);
}
.simulation-warning-inner{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  flex-wrap:wrap;
}
.simulation-warning-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  background:#fff;
  color:#991b1b;
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.04em;
}
.simulation-warning-text{
  font-size:1rem;
  font-weight:950;
  letter-spacing:.02em;
}
.simulation-warning-detail{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  font-size:.94rem;
  font-weight:800;
  line-height:1.4;
  opacity:.98;
}
body.preview-simulated .simulation-warning-banner{
  display:block;
  animation:none;
  box-shadow:0 18px 36px rgba(127,29,29,.28);
}
@keyframes simulationWarningPulse{
  0%{ box-shadow:0 18px 36px rgba(127,29,29,.28); transform:none; }
  100%{ box-shadow:0 18px 36px rgba(127,29,29,.28); transform:none; }
}
@media (max-width: 760px){
  .simulation-warning-inner{
    align-items:flex-start;
    gap:10px;
  }
  .simulation-warning-text,
  .simulation-warning-detail{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
    width:100%;
  }
}
@media print{
  .simulation-warning-banner{
    display:block; /* neu important geloescht */
    break-inside:avoid;
  }
}





.smart-slogan-bar{
  width:min(1200px, calc(100% - 24px));
  margin:8px auto 0;
  padding:0 2px;
  display:flex;
  align-items:center;
  gap:8px;
}

.smart-slogan-toggle{
  flex:0 0 auto;
  width:18px;
  height:18px;
  border:none;
  border-radius:999px;
  background:transparent;
  color:#6b7f99;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  font-size:.85rem;
  line-height:1;
  opacity:.55;
  transition:opacity .16s ease, transform .16s ease;
  font-family:var(--font-ui);
}

.smart-slogan-toggle:hover,
.smart-slogan-toggle:focus-visible{
  opacity:.95;
  transform:scale(1.05);
  outline:none;
}

.smart-slogan-text{
  display:block;
  color:#6b7f99;
  font-size:.74rem;
  line-height:1.28;
  font-weight:400;
  letter-spacing:.01em;
  opacity:.92;
  font-family:var(--font-ui);
  transition:none;
  will-change:auto;
}

.smart-slogan-text.is-changing{
  opacity:.92;
  filter:none;
  transform:none;
}

.smart-slogan-text b{
  font-weight:700;
  color:#1d4ed8;
}

@media (max-width: 640px){
  .smart-slogan-text{
    font-size:.70rem;
  }
}


.save-hint{
  width:min(1200px, calc(100% - 24px));
  margin:10px auto 0;
  padding:12px 16px;
  border:1px solid #b6cff7;
  border-radius:18px;
  background:linear-gradient(180deg,#ffffff,#eef4ff);
  box-shadow:0 10px 22px rgba(15,23,42,.08);
  color:#1d4ed8;
  font-weight:900;
  line-height:1.4;
  letter-spacing:-0.01em;
}

.save-hint small{
  display:block;
  margin-top:4px;
  color:#4f647f;
  font-size:.88rem;
  font-weight:700;
  letter-spacing:0;
}


/* V184-6 Validator-Fixes */
.live-timeline-groups::before{
  left:158px;
}

.live-timeline-group::before{
  left:158px;
  display:none;
}

@media (max-width: 640px){
  .live-timeline-group::before{
    left:126px;
    display:none;
  }
}

/* =========================================================
   FINALER NACHTMODUS – LIVE-ÜBERSICHT / TIMELINE
   Ganz ans Ende der CSS gesetzt
========================================================= */

/* FINALER NACHTMODUS – helle Timeline-Linien wirklich abdunkeln */

html[data-theme="dark"] .live-timeline-row{
  border-top:1px solid rgba(70, 92, 122, 0.18); /* neu important geloescht */
}

html[data-theme="dark"] .live-timeline-track{
  border:1px solid rgba(70, 92, 122, 0.24); /* neu important geloescht */
  background:
    repeating-linear-gradient(
      to right,
      rgba(148,163,184,.08) 0,
      rgba(148,163,184,.08) 1px,
      transparent 1px,
      transparent calc(100% / 24)
    ),
    linear-gradient(180deg,#132033,#0f1827); /* neu important geloescht */
}

html[data-theme="dark"] .live-timeline-axis{
  border:1px solid rgba(70, 92, 122, 0.22); /* neu important geloescht */
  background:
    repeating-linear-gradient(
      to right,
      rgba(148,163,184,.07) 0,
      rgba(148,163,184,.07) 1px,
      transparent 1px,
      transparent calc(100% / 24)
    ),
    linear-gradient(180deg,#152338,#101a2b); /* neu important geloescht */
}

html[data-theme="dark"] .live-timeline-group{
  border:1px solid rgba(70, 92, 122, 0.22); /* neu important geloescht */
  background:#0f1724; /* neu important geloescht */
}

html[data-theme="dark"] .live-timeline-group-head{
  background:#162130; /* neu important geloescht */
  border-bottom:1px solid rgba(70, 92, 122, 0.18); /* neu important geloescht */
}

html[data-theme="dark"] .live-timeline-scale{
  background:#162130; /* neu important geloescht */
  border-bottom:1px dashed rgba(90, 114, 146, 0.22); /* neu important geloescht */
}

/* ==========================================================
   V187 HEADER FIX – Tuningen nicht mehr verdeckt
   ========================================================== */

@media (max-width: 640px){

  .topbar-inner{
    width:min(100% - 12px, 1200px);
    margin:0 auto;
    padding:10px 0 12px;
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "brand mode"
      "date  date"
      "clock clock";
    column-gap:10px;
    row-gap:8px;
    align-items:center;
  }

  .brand-wrap{
    grid-area:brand;
    min-width:0;
    width:100%;
    max-width:none;
    display:block;
    text-align:left;
  }

  .brand-title{
    margin:0;
    display:block;
    font-size:0.98rem;
    line-height:1.08;
    letter-spacing:-0.02em;
    white-space:normal;
    word-break:break-word;
  }

  .brand-sub{
    display:none;
  }

  .topbar-inner > .mode-toggle,
  .topbar-inner > .nightmode-toggle,
  .topbar-inner > .theme-toggle,
  .topbar-inner > button,
  .topbar-inner > a[role="button"]{
    grid-area:mode;
    justify-self:end;
    align-self:start;
    min-height:42px;
    padding:0 12px;
    font-size:.88rem;
    border-radius:14px;
    white-space:nowrap;
  }

  #topDateLine{
    grid-area:date;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    width:100%;
    margin:0;
    font-size:.82rem;
    line-height:1.2;
    font-weight:800;
    color:#475569;
  }

  #topDateText{
    width:100%;
    text-align:center;
  }

  .clock-card{
    grid-area:clock;
    width:100%;
    max-width:100%;
    margin:0;
    padding:8px 10px;
    gap:10px;
    justify-content:center;
    align-items:center;
    border-radius:16px;
  }

  .clock-info{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .clock-date{
    font-size:.8rem;
    text-align:center;
  }

  .clock-time{
    font-size:.98rem;
    text-align:center;
  }
}
/* ==========================================================
   V189 HEADER-LAYOUT-FIX
   - drei klare Bereiche: Titel | Uhr | Nachtmodus
   - mobile Reihenfolge: Titel + Nachtmodus, darunter Uhr
   ========================================================== */

.topbar-inner{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto auto;
  grid-template-areas:"brand center actions";
  align-items:center;
  gap:14px;
}

.brand-wrap{
  grid-area:brand;
  min-width:0;
  max-width:none;
}

.topbar-center{
  grid-area:center;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}

.topbar-actions{
  grid-area:actions;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:0;
}

.topbar .brand-wrap .brand-title{
  word-break:normal;
  overflow-wrap:normal;
  white-space:normal;
  text-align:left;
}

.topbar .brand-wrap .brand-sub{
  text-align:left;
}

.topbar .clock-card{
  margin:0;
}

.topbar .theme-toggle{
  white-space:nowrap;
}

@media (max-width: 960px){
  .topbar-inner{
    grid-template-columns:minmax(0, 1fr) auto;
    grid-template-areas:
      "brand actions"
      "center center";
    align-items:center;
    text-align:initial;
  }

  .brand-wrap{
    width:auto;
    text-align:left;
  }

  .topbar-center{
    width:100%;
  }

  .topbar .clock-card{
    width:min(720px, 100%);
    justify-content:center;
  }

  .topbar .clock-info{
    align-items:center;
    text-align:center;
  }
}

@media (max-width: 640px){
  .topbar-inner{
    width:min(100% - 12px, 1200px);
    padding:8px 0 10px;
    gap:8px 10px;
  }

  .topbar .brand-wrap .brand-title{
    font-size:1.02rem;
    line-height:1.08;
    letter-spacing:-0.025em;
  }

  .topbar .brand-wrap .brand-sub{
    display:none;
  }

  .topbar .clock-card{
    width:100%;
    padding:8px 10px;
    gap:10px;
    border-radius:16px;
  }

  .topbar .clock-date{
    font-size:.8rem;
    line-height:1.15;
    white-space:normal;
    text-align:center;
  }

  .topbar .clock-time{
    font-size:.98rem;
    line-height:1.08;
    text-align:center;
  }

  .topbar .theme-toggle{
    min-height:42px;
    padding:0 12px;
    border-radius:14px;
    font-size:.88rem;
  }
}

@media (max-width: 420px){
  .topbar-inner{
    width:min(100% - 10px, 1200px);
    gap:7px 8px;
  }

  .topbar .brand-wrap .brand-title{
    font-size:.96rem;
  }

  .topbar .clock-card{
    padding:7px 9px;
    gap:8px;
  }

  .topbar .clock-date{
    font-size:.76rem;
  }

  .topbar .clock-time{
    font-size:.92rem;
  }

  .topbar .theme-toggle{
    min-height:40px;
    padding:0 10px;
    font-size:.84rem;
  }
}


/* ==========================================================
   V194 MOBILE HEADER CLEAN + LIVE FIX
   Basis: stabile v189
   Ziel:
   - Header auf Handy hochkant deutlich ruhiger
   - Datum im Header weg
   - Logo wieder sichtbar
   - Logo links, "Öffnungszeiten Tuningen" rechts daneben
   - wenn sehr eng: Logo kleiner, aber sichtbar
   - Uhr-/Datumsbox darunter bleibt erhalten
   - Live-Timeline mobil scrollbar statt abgeschnitten
   - HTML bleibt unverändert
   ========================================================== */

@media (max-width: 640px){

  html, body{
    overflow-x:hidden;
  }

  .topbar{
    backdrop-filter:blur(10px);
    background:rgba(245,249,255,.96);
    box-shadow:0 6px 16px rgba(15,23,42,.06);
  }

  .topbar-inner{
    width:min(calc(100% - 10px), 1200px);
    gap:8px 8px;
    padding:8px 0 9px;
    align-items:stretch;
  }

  .brand-wrap{
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 11px;
    border:1px solid rgba(151,179,216,.72);
    border-radius:16px;
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,245,255,.94));
    box-shadow:0 4px 12px rgba(15,23,42,.04);
  }

  .brand-sub{
    display:none !important;
  }

  .brand-title{
    margin:0;
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
    font-size:1.02rem;
    line-height:1.05;
    letter-spacing:-0.025em;
    white-space:normal;
    word-break:normal;
    overflow-wrap:anywhere;
  }

  .brand-logo{
    width:28px;
    height:28px;
    flex:0 0 28px;
    display:block !important;
    margin:0;
  }

  .brand-title img,
  .brand-title svg{
    width:28px;
    height:28px;
    display:inline-block !important;
    vertical-align:-5px;
    margin-right:6px;
    flex:none;
  }

  #themeToggle{
    min-height:44px;
    padding:0 12px;
    border-radius:14px;
    font-size:.88rem;
  }

  .clock-card{
    min-height:42px;
    padding:7px 10px;
    border-radius:14px;
    gap:8px;
    justify-content:center;
    box-shadow:0 5px 12px rgba(15,23,42,.05);
  }

  .clock-icon{
    width:18px;
    height:18px;
  }

  .clock-info{
    align-items:center;
    text-align:center;
  }

  .clock-date{
    font-size:.78rem;
    line-height:1.1;
  }

  .clock-time{
    font-size:.96rem;
    line-height:1.06;
  }

  .smart-slogan,
  #smartSloganText,
  #smartSloganToggle{
    display:none !important;
  }

  .live-summary-wrap{
    width:min(calc(100% - 10px), 1200px);
    margin:8px auto 0;
  }

  .live-summary{
    padding:12px 50px 12px 12px;
    border-radius:16px;
    box-shadow:0 6px 14px rgba(15,23,42,.06);
    line-height:1.28;
  }

  .live-summary-caret{
    top:8px;
    right:8px;
    width:32px;
    min-width:32px;
    height:32px;
  }

  .live-summary-info{
    top:46px;
    right:8px;
  }

  .live-summary-info-toggle{
    width:32px;
    height:32px;
    font-size:.9rem;
  }

  .live-summary-info-box{
    width:min(260px, calc(100vw - 24px));
    right:0;
  }

  .live-summary-wrap.timeline-open{
    padding:8px;
    border-radius:20px;
  }

  .live-timeline-board{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    border-radius:14px;
    padding-bottom:6px;
  }

  .live-timeline-axis,
  .live-timeline-groups{
    min-width:620px;
  }

  .live-timeline-board::-webkit-scrollbar{
    height:6px;
  }

  .live-timeline-board::-webkit-scrollbar-thumb{
    background:rgba(37,99,235,.32);
    border-radius:999px;
  }

  .app{
    width:min(calc(100% - 10px), 1200px);
    margin:10px auto 16px;
    gap:12px;
  }

  .panel,
  .card{
    border-radius:18px;
  }

  .sidebar-head{
    padding:12px 12px 10px;
  }

  .title{
    margin:0 0 8px;
    font-size:1.04rem;
  }

  .controls{
    gap:8px;
  }

  .control-row{
    gap:8px;
  }

  .field,
  .select,
  .voice-btn{
    min-height:46px;
    border-radius:14px;
  }

  .content-head{
    padding:14px 14px 12px;
  }

  .content-title{
    font-size:1.14rem;
  }

  .content-sub{
    margin-top:6px;
    font-size:.9rem;
    line-height:1.38;
  }

  .cards{
    padding:12px;
    gap:12px;
  }

  .map-box{
    margin:0 12px 14px;
    padding:12px;
    border-radius:14px;
  }
}

@media (max-width: 420px){

  .topbar-inner{
    width:min(calc(100% - 8px), 1200px);
    gap:7px 7px;
  }

  .brand-wrap{
    padding:8px 9px;
    gap:7px;
  }

  .brand-logo{
    width:25px;
    height:25px;
    flex:0 0 25px;
  }

  .brand-title img,
  .brand-title svg{
    width:25px;
    height:25px;
    margin-right:5px;
    vertical-align:-4px;
  }

  .brand-title{
    font-size:.96rem;
  }

  #themeToggle{
    min-height:40px;
    padding:0 10px;
    font-size:.82rem;
  }

  .clock-card{
    padding:7px 8px;
  }

  .clock-date{
    font-size:.74rem;
  }

  .clock-time{
    font-size:.9rem;
  }

  .live-summary{
    padding:10px 46px 10px 10px;
    font-size:.92rem;
  }

  .live-summary-caret,
  .live-summary-info-toggle{
    width:30px;
    height:30px;
    min-width:30px;
  }

  .live-summary-info{
    top:42px;
    right:6px;
  }

  .live-timeline-axis,
  .live-timeline-groups{
    min-width:580px;
  }
}

@media (max-width: 360px){

  .brand-wrap{
    padding:7px 8px;
    gap:6px;
  }

  .brand-logo{
    width:22px;
    height:22px;
    flex:0 0 22px;
  }

  .brand-title img,
  .brand-title svg{
    width:22px;
    height:22px;
    margin-right:4px;
    vertical-align:-3px;
  }

  .brand-title{
    font-size:.92rem;
  }

  .live-timeline-axis,
  .live-timeline-groups{
    min-width:560px;
  }
}


/* ==========================================================
   V200 MOBILE PORTRAIT TIMELINE WIDTH FIX
   Ziel:
   - Smartphone Hochformat:
     obere Zeitachse und Liste darunter gleich lang
   - große rote Linie passt zu den kleinen roten Strichen
   - nur CSS, keine HTML-/JS-Änderung
   ========================================================== */

@media (max-width: 640px){

  .live-timeline-board{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
  }

  /* Gleiche Mindestbreite für ALLE Timeline-Ebenen */
  .live-timeline-scale,
  .live-timeline-axis,
  .live-timeline-groups,
  .live-timeline-group,
  .live-timeline-rows,
  .live-timeline-row,
  .live-timeline-group-head{
    min-width:620px;
    box-sizing:border-box;
  }

  /* Firmenzeilen im Hochformat konsistent halten */
  .live-timeline-row{
    display:grid;
    grid-template-columns:150px minmax(260px, 1fr) 80px;
    column-gap:8px;
    align-items:center;
  }

  .live-timeline-track{
    min-width:260px;
    width:100%;
  }

  /* Minutenspalte rechts kompakt */
  .live-timeline-right,
  .timeline-right,
  .liveTimelineRight{
    width:80px;
    min-width:80px;
    text-align:right;
    white-space:nowrap;
  }

  /* Namen links dürfen nicht den Balken zusammendrücken */
  .live-timeline-name,
  .timeline-name,
  .liveTimelineName,
  .live-timeline-company,
  .timeline-company{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

@media (max-width: 420px){

  .live-timeline-scale,
  .live-timeline-axis,
  .live-timeline-groups,
  .live-timeline-group,
  .live-timeline-rows,
  .live-timeline-row,
  .live-timeline-group-head{
    min-width:580px;
  }

  .live-timeline-row{
    grid-template-columns:138px minmax(240px, 1fr) 72px;
  }

  .live-timeline-track{
    min-width:240px;
  }

  .live-timeline-right,
  .timeline-right,
  .liveTimelineRight{
    width:72px;
    min-width:72px;
  }
}


/* ==========================================================
   V201 MOBILE PORTRAIT TIMELINE GROUP WIDTH FIX
   Ziel:
   - Im Hochformat soll der gesamte Gruppenblock unten
     genauso breit sein wie die Zeitachse oben
   - große rote Linie trifft die kleinen roten Striche
   ========================================================== */

@media (max-width: 640px){

  .live-timeline-board{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
  }

  /* WICHTIG:
     Der gesamte Inhalt soll eine feste innere Mindestbreite haben,
     nicht nur einzelne Unterelemente. */
  .live-timeline-axis,
  .live-timeline-scale,
  .live-timeline-scale--repeat,
  .live-timeline-group,
  .live-timeline-rows{
    width:max-content;
    min-width:640px;
    box-sizing:border-box;
  }

  /* Der Gruppenblock unten muss wirklich bis zur Achsenbreite aufziehen */
  .live-timeline-group{
    display:block;
  }

  .live-timeline-group-head{
    width:100%;
    min-width:640px;
    box-sizing:border-box;
  }

  /* Jede Zeile bekommt dieselbe Gesamtbreite wie die Achse */
  .live-timeline-row{
    width:100%;
    min-width:640px;
    box-sizing:border-box;
    display:grid;
    grid-template-columns:160px minmax(320px, 1fr) 90px;
    column-gap:10px;
    align-items:center;
  }

  /* Der Balkenbereich muss lang genug sein */
  .live-timeline-track{
    width:100%;
    min-width:320px;
    box-sizing:border-box;
  }

  .live-timeline-meta{
    width:90px;
    min-width:90px;
    text-align:right;
    white-space:nowrap;
  }

  .live-timeline-name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

@media (max-width: 420px){

  .live-timeline-axis,
  .live-timeline-scale,
  .live-timeline-scale--repeat,
  .live-timeline-group,
  .live-timeline-rows,
  .live-timeline-group-head,
  .live-timeline-row{
    min-width:600px;
  }

  .live-timeline-row{
    grid-template-columns:148px minmax(300px, 1fr) 82px;
  }

  .live-timeline-track{
    min-width:300px;
  }

  .live-timeline-meta{
    width:82px;
    min-width:82px;
  }
}


/* ==========================================================
   V202 MOBILE PORTRAIT LIST BOX WIDTH FIX
   Ziel:
   - Im Hochformat muss der komplette weiße Firmen-Listenblock
     dieselbe Breite haben wie die Achse oben
   - große rote Linie trifft die kleinen roten Striche
   ========================================================== */

@media (max-width: 640px){

  .live-timeline-board{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
  }

  /* Obere Achse */
  .live-timeline-axis,
  .live-timeline-scale,
  .live-timeline-scale--repeat{
    width:max-content;
    min-width:640px;
    box-sizing:border-box;
  }

  /* Der gesamte weiße Kasten unten */
  .live-timeline-group{
    width:640px;
    min-width:640px;
    box-sizing:border-box;
  }

  .live-timeline-group-head{
    width:640px;
    min-width:640px;
    box-sizing:border-box;
  }

  .live-timeline-rows{
    width:640px;
    min-width:640px;
    box-sizing:border-box;
  }

  .live-timeline-row{
    width:640px;
    min-width:640px;
    box-sizing:border-box;
    display:grid;
    grid-template-columns:160px 1fr 90px;
    column-gap:10px;
    align-items:center;
  }

  .live-timeline-track{
    width:100%;
    min-width:320px;
    box-sizing:border-box;
  }

  .live-timeline-meta{
    width:90px;
    min-width:90px;
    text-align:right;
    white-space:nowrap;
  }

  .live-timeline-name,
  .timeline-name,
  .liveTimelineName,
  .live-timeline-company,
  .timeline-company{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

@media (max-width: 420px){

  .live-timeline-axis,
  .live-timeline-scale,
  .live-timeline-scale--repeat,
  .live-timeline-group,
  .live-timeline-group-head,
  .live-timeline-rows,
  .live-timeline-row{
    width:600px;
    min-width:600px;
  }

  .live-timeline-row{
    grid-template-columns:148px 1fr 82px;
  }

  .live-timeline-track{
    min-width:300px;
  }

  .live-timeline-meta{
    width:82px;
    min-width:82px;
  }
}


/* ==========================================================
   V203 FINAL FIX – Live-Firmenliste volle Breite im Hochformat
   Ziel:
   - Smartphone hochkant: weißer Live-Listenblock unten soll
     dieselbe nutzbare Breite haben wie die Zeitleiste oben
   - große rote Linie trifft die kleinen roten Marker
   ========================================================== */

@media (max-width: 640px){

  .live-timeline-board{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
  }

  /* Obere Skala / Achse bleibt breit und scrollbar */
  .live-timeline-axis,
  .live-timeline-scale,
  .live-timeline-scale--repeat{
    width:max-content !important;
    min-width:640px !important;
    box-sizing:border-box;
  }

  /* WICHTIG: der untere Listencontainer darf nicht schrumpfen */
  .live-timeline-groups{
    width:max-content !important;
    min-width:640px !important;
    box-sizing:border-box;
    flex-shrink:0 !important;
  }

  /* einzelner weißer Kasten */
  .live-timeline-group{
    width:640px !important;
    min-width:640px !important;
    box-sizing:border-box;
    flex-shrink:0 !important;
    display:block !important;
  }

  /* Kopf im weißen Kasten */
  .live-timeline-group-head{
    width:640px !important;
    min-width:640px !important;
    box-sizing:border-box;
    flex-shrink:0 !important;
  }

  /* Zeilencontainer */
  .live-timeline-rows{
    width:640px !important;
    min-width:640px !important;
    box-sizing:border-box;
    flex-shrink:0 !important;
  }

  /* jede Firmenzeile gleich breit wie der Kasten */
  .live-timeline-row{
    width:640px !important;
    min-width:640px !important;
    box-sizing:border-box;
    flex-shrink:0 !important;
    display:grid;
    grid-template-columns:160px 1fr 90px;
    column-gap:10px;
    align-items:center;
  }

  /* Name links */
  .live-timeline-name,
  .timeline-name,
  .liveTimelineName,
  .live-timeline-company,
  .timeline-company{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* Balkenbereich muss lang genug sein */
  .live-timeline-track{
    width:100% !important;
    min-width:320px !important;
    box-sizing:border-box;
  }

  /* rechte Minutenspalte */
  .live-timeline-meta,
  .live-timeline-right,
  .timeline-right,
  .liveTimelineRight{
    width:90px !important;
    min-width:90px !important;
    text-align:right;
    white-space:nowrap;
    box-sizing:border-box;
    flex-shrink:0 !important;
  }
}

@media (max-width: 420px){

  .live-timeline-axis,
  .live-timeline-scale,
  .live-timeline-scale--repeat,
  .live-timeline-groups,
  .live-timeline-group,
  .live-timeline-group-head,
  .live-timeline-rows,
  .live-timeline-row{
    min-width:600px !important;
  }

  .live-timeline-group,
  .live-timeline-group-head,
  .live-timeline-rows,
  .live-timeline-row{
    width:600px !important;
  }

  .live-timeline-row{
    grid-template-columns:148px 1fr 82px;
  }

  .live-timeline-track{
    min-width:300px !important;
  }

  .live-timeline-meta,
  .live-timeline-right,
  .timeline-right,
  .liveTimelineRight{
    width:82px !important;
    min-width:82px !important;
  }
}


/* ==========================================================
   V204 EXACT LIVE LIST FIX
   Echte Klassen aus der Live-Liste:
   - #liveTimelineGroups.live-timeline-groups
   - .live-timeline-group
   - .live-timeline-group-head
   - .live-timeline-rows
   - .live-timeline-row
   - .live-timeline-name
   - .live-timeline-track
   - .live-timeline-meta
   Ziel:
   - Smartphone Hochformat:
     der untere weiße Listenblock bekommt dieselbe Breite
     wie die obere Zeitachse
   ========================================================== */

@media (max-width: 640px){

  /* Der Scroll-Container bleibt horizontal scrollbar */
  .live-timeline-board{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
  }

  /* Die obere Achse darf breit sein */
  .live-timeline-axis,
  .live-timeline-scale,
  .live-timeline-scale--repeat{
    width:max-content !important;
    min-width:640px !important;
    box-sizing:border-box;
  }

  /* Der echte Container aus deinem HTML */
  #liveTimelineGroups.live-timeline-groups{
    width:640px !important;
    min-width:640px !important;
    display:block !important;
    box-sizing:border-box;
    flex:none !important;
  }

  .live-timeline-group{
    width:640px !important;
    min-width:640px !important;
    display:block !important;
    box-sizing:border-box;
    flex:none !important;
  }

  .live-timeline-group-head{
    width:640px !important;
    min-width:640px !important;
    box-sizing:border-box;
  }

  .live-timeline-rows{
    width:640px !important;
    min-width:640px !important;
    display:block !important;
    box-sizing:border-box;
  }

  .live-timeline-row{
    width:640px !important;
    min-width:640px !important;
    display:grid !important;
    grid-template-columns:160px 1fr 90px !important;
    column-gap:10px !important;
    align-items:center !important;
    box-sizing:border-box;
  }

  .live-timeline-name{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .live-timeline-track{
    width:100% !important;
    min-width:320px !important;
    box-sizing:border-box !important;
  }

  .live-timeline-meta{
    width:90px !important;
    min-width:90px !important;
    text-align:right !important;
    white-space:nowrap !important;
    box-sizing:border-box !important;
  }
}

@media (max-width: 420px){

  .live-timeline-axis,
  .live-timeline-scale,
  .live-timeline-scale--repeat,
  #liveTimelineGroups.live-timeline-groups,
  .live-timeline-group,
  .live-timeline-group-head,
  .live-timeline-rows,
  .live-timeline-row{
    width:600px !important;
    min-width:600px !important;
  }

  .live-timeline-row{
    grid-template-columns:148px 1fr 82px !important;
  }

  .live-timeline-track{
    min-width:300px !important;
  }

  .live-timeline-meta{
    width:82px !important;
    min-width:82px !important;
  }
}


/* ==========================================================
   V205 MOBILE TIMELINE GRID ALIGN FIX
   Ziel:
   - Smartphone Hochformat:
     obere Timeline-Zeile und untere Firmenzeilen nutzen exakt
     dieselben Grid-Spalten
   - große rote Linie trifft die kleinen roten Marker
   ========================================================== */

@media (max-width: 640px){

  .live-timeline-scale,
  .live-timeline-row{
    width:640px !important;
    min-width:640px !important;
    display:grid !important;
    grid-template-columns:160px 1fr 90px !important;
    column-gap:10px !important;
    align-items:center !important;
    box-sizing:border-box !important;
  }

  #liveTimelineGroups.live-timeline-groups,
  .live-timeline-group,
  .live-timeline-group-head,
  .live-timeline-rows{
    width:640px !important;
    min-width:640px !important;
    box-sizing:border-box !important;
  }

  .live-timeline-axis,
  .live-timeline-track{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .live-timeline-meta,
  .live-timeline-scale-label-right{
    width:90px !important;
    min-width:90px !important;
    text-align:right !important;
    white-space:nowrap !important;
    box-sizing:border-box !important;
  }

  .live-timeline-name,
  .live-timeline-scale-label:first-child{
    width:160px !important;
    min-width:160px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    box-sizing:border-box !important;
  }
}

@media (max-width: 420px){

  .live-timeline-scale,
  .live-timeline-row,
  #liveTimelineGroups.live-timeline-groups,
  .live-timeline-group,
  .live-timeline-group-head,
  .live-timeline-rows{
    width:600px !important;
    min-width:600px !important;
  }

  .live-timeline-scale,
  .live-timeline-row{
    grid-template-columns:148px 1fr 82px !important;
  }

  .live-timeline-meta,
  .live-timeline-scale-label-right{
    width:82px !important;
    min-width:82px !important;
  }

  .live-timeline-name,
  .live-timeline-scale-label:first-child{
    width:148px !important;
    min-width:148px !important;
  }
}




/* =========================================================
   DARKMODE FIX – AUTOMATISCH INTEGRIERT
   ========================================================= */

html[data-theme="dark"] .medical-emergency-speak{
  background:linear-gradient(135deg,#1e293b,#0f172a);
  border:1px solid #334155;
  color:#ffffff;
}
html[data-theme="dark"] .medical-emergency-speak::before{
  border-left-color:#ffffff;
}

html[data-theme="dark"] tr.today td{
  background:#dcebff;
  color:#112033;
}
html[data-theme="dark"] tr.today td a{
  color:#163ea3;
}

html[data-theme="dark"] .hours-speak-row:hover td{
  background:#1a2840;
  color:#edf4ff;
}

html[data-theme="dark"] .hours-speak-row.is-speaking td{
  background:#223857;
  color:#ffffff;
}

html[data-theme="dark"] .hours-speak-row.today:hover td{
  background:#2a3c55;
  color:#ffffff;
}

html[data-theme="dark"] .hours-speak-row td:last-child::after{
  border-left-color:#ffffff;
}
html[data-theme="dark"] .hours-speak-row.is-speaking td:last-child::after{
  background:#ffffff;
}




/* =========================================================
   DARKMODE FIX – VORSCHAU / SIMULATION / LIVE-RÜCKSPRUNG
   ========================================================= */

html[data-theme="dark"] #previewBox{
  border-color:#35506f;
  background:linear-gradient(180deg,#182638,#122033);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}

html[data-theme="dark"] .preview-box-title,
html[data-theme="dark"] .preview-box-subtitle,
html[data-theme="dark"] .preview-status-text,
html[data-theme="dark"] .preview-autolive-title,
html[data-theme="dark"] .preview-autolive-help,
html[data-theme="dark"] .settings-field-label{
  color:#edf4ff;
}

html[data-theme="dark"] .preview-mode-pill{
  background:linear-gradient(180deg,#223857,#1a2c44);
  color:#dbeafe;
  border-color:#3b5574;
}

html[data-theme="dark"] .preview-mode-pill.is-simulated{
  background:linear-gradient(180deg,#7f1d1d,#991b1b);
  color:#ffffff;
  border-color:#ef4444;
}

html[data-theme="dark"] .preview-autolive-box{
  border-color:#3b5574;
  background:linear-gradient(180deg,#1b2b40,#152338);
}

html[data-theme="dark"] .preview-autolive-value{
  color:#93c5fd;
}

html[data-theme="dark"] .preview-action-btn.secondary{
  background:linear-gradient(180deg,#223857,#1a2c44);
  color:#edf4ff;
  border:1px solid #3b5574;
}

html[data-theme="dark"] .preview-action-btn.secondary:hover{
  background:linear-gradient(180deg,#294261,#213652);
}

html[data-theme="dark"] #previewModeSelect,
html[data-theme="dark"] #simulatedWeekdaySelect,
html[data-theme="dark"] #simulatedTimeInput{
  background:linear-gradient(180deg,#1c2c42,#152338);
  color:#edf4ff;
  border-color:#3b5574;
}

html[data-theme="dark"] #previewModeSelect option,
html[data-theme="dark"] #simulatedWeekdaySelect option{
  background:#152338;
  color:#edf4ff;
}

html[data-theme="dark"] #previewStatusText{
  color:#dbeafe;
}

html[data-theme="dark"] #previewStatusText.is-simulated,
html[data-theme="dark"] body.preview-simulated #previewStatusText{
  color:#ffffff;
}




/* =========================================================
   FINAL DARKMODE FIX – KOMPLETT
   ========================================================= */

/* ---------- CLOCK ---------- */
html[data-theme="dark"] .clock-card{
  background:linear-gradient(180deg,#1c2c42,#152338);
  border-color:#3b5574;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
html[data-theme="dark"] .clock-date{
  color:#c7d7ee;
}
html[data-theme="dark"] .clock-time{
  color:#ffffff;
}
html[data-theme="dark"] .clock-icon{
  color:#93c5fd;
}

/* ---------- SIMULATION HIGHLIGHT ---------- */
html[data-theme="dark"] body.preview-simulated .clock-card{
  border-color:#ef4444;
  box-shadow:0 0 0 2px rgba(239,68,68,.25);
}

/* ---------- PREVIEW / SIMULATION ---------- */
html[data-theme="dark"] #previewBox{
  border-color:#35506f;
  background:linear-gradient(180deg,#182638,#122033);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}

html[data-theme="dark"] .preview-box-title,
html[data-theme="dark"] .preview-box-subtitle,
html[data-theme="dark"] .preview-status-text,
html[data-theme="dark"] .preview-autolive-title,
html[data-theme="dark"] .preview-autolive-help,
html[data-theme="dark"] .settings-field-label{
  color:#edf4ff;
}

html[data-theme="dark"] .preview-mode-pill{
  background:linear-gradient(180deg,#223857,#1a2c44);
  color:#dbeafe;
  border-color:#3b5574;
}

html[data-theme="dark"] .preview-mode-pill.is-simulated{
  background:linear-gradient(180deg,#7f1d1d,#991b1b);
  color:#ffffff;
  border-color:#ef4444;
}

html[data-theme="dark"] .preview-autolive-box{
  border-color:#3b5574;
  background:linear-gradient(180deg,#1b2b40,#152338);
}

html[data-theme="dark"] .preview-autolive-value{
  color:#93c5fd;
}

html[data-theme="dark"] .preview-action-btn.secondary{
  background:linear-gradient(180deg,#223857,#1a2c44);
  color:#edf4ff;
  border:1px solid #3b5574;
}

html[data-theme="dark"] .preview-action-btn.secondary:hover{
  background:linear-gradient(180deg,#294261,#213652);
}

html[data-theme="dark"] #previewModeSelect,
html[data-theme="dark"] #simulatedWeekdaySelect,
html[data-theme="dark"] #simulatedTimeInput{
  background:linear-gradient(180deg,#1c2c42,#152338);
  color:#edf4ff;
  border-color:#3b5574;
}

html[data-theme="dark"] #previewModeSelect option,
html[data-theme="dark"] #simulatedWeekdaySelect option{
  background:#152338;
  color:#edf4ff;
}

html[data-theme="dark"] #previewStatusText{
  color:#dbeafe;
}

html[data-theme="dark"] #previewStatusText.is-simulated,
html[data-theme="dark"] body.preview-simulated #previewStatusText{
  color:#ffffff;
}




/* =========================================================
   GLOBAL DARKMODE FIX – FORMULARE / BUTTONS / VORSCHAU / UHR
   ========================================================= */

/* ---------- CLOCK ---------- */
html[data-theme="dark"] .clock-card{
  background:linear-gradient(180deg,#1c2c42,#152338);
  border-color:#3b5574;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
html[data-theme="dark"] .clock-date{
  color:#c7d7ee;
}
html[data-theme="dark"] .clock-time{
  color:#ffffff;
}
html[data-theme="dark"] .clock-icon{
  color:#93c5fd;
}
html[data-theme="dark"] body.preview-simulated .clock-card{
  border-color:#ef4444;
  box-shadow:0 0 0 2px rgba(239,68,68,.25);
}

/* ---------- GLOBALE FORMFELDER ---------- */
html[data-theme="dark"] .field,
html[data-theme="dark"] .select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] textarea{
  background:linear-gradient(180deg,#1c2c42,#152338);
  color:#edf4ff;
  border-color:#3b5574;
  caret-color:#edf4ff;
}

html[data-theme="dark"] .field::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
  color:#a9bdd8;
  opacity:1;
}

html[data-theme="dark"] .field:focus,
html[data-theme="dark"] .select:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 4px rgba(96,165,250,.18);
  outline:none;
}

html[data-theme="dark"] .select option,
html[data-theme="dark"] #previewModeSelect option,
html[data-theme="dark"] #simulatedWeekdaySelect option{
  background:#152338;
  color:#edf4ff;
}

/* ---------- SEKUNDÄRE BUTTONS / AKTIONEN ---------- */
html[data-theme="dark"] .action,
html[data-theme="dark"] .preview-action-btn.secondary,
html[data-theme="dark"] .settings-toggle-btn,
html[data-theme="dark"] .voice-info-btn,
html[data-theme="dark"] .clear-btn{
  background:linear-gradient(180deg,#223857,#1a2c44);
  color:#edf4ff;
  border-color:#3b5574;
}

html[data-theme="dark"] .action:hover,
html[data-theme="dark"] .preview-action-btn.secondary:hover,
html[data-theme="dark"] .settings-toggle-btn:hover,
html[data-theme="dark"] .voice-info-btn:hover,
html[data-theme="dark"] .clear-btn:hover{
  background:linear-gradient(180deg,#294261,#213652);
  color:#ffffff;
  border-color:#4c6b90;
}

html[data-theme="dark"] .settings-toggle-btn[aria-expanded="false"]{
  background:linear-gradient(180deg,#1f3148,#17263b);
  color:#dbeafe;
  border-color:#35506f;
}

/* ---------- LABELS / HILFSTEXTE ---------- */
html[data-theme="dark"] .settings-field-label,
html[data-theme="dark"] .settings-panel-open,
html[data-theme="dark"] .hint,
html[data-theme="dark"] .threshold-help,
html[data-theme="dark"] .preview-autolive-help,
html[data-theme="dark"] .preview-status-text,
html[data-theme="dark"] .company-live-detail,
html[data-theme="dark"] .content-sub,
html[data-theme="dark"] .footer-note,
html[data-theme="dark"] .page-version{
  color:#c7d7ee;
}

/* ---------- THRESHOLD / SLIDER BOX ---------- */
html[data-theme="dark"] .threshold-box,
html[data-theme="dark"] .preview-autolive-box,
html[data-theme="dark"] .settings-panel{
  border-color:#35506f;
  background:linear-gradient(180deg,#182638,#122033);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}

html[data-theme="dark"] .threshold-title,
html[data-theme="dark"] .preview-autolive-title,
html[data-theme="dark"] .preview-box-title,
html[data-theme="dark"] .preview-box-subtitle{
  color:#edf4ff;
}

html[data-theme="dark"] .threshold-value,
html[data-theme="dark"] .preview-autolive-value,
html[data-theme="dark"] .preview-mode-pill{
  background:linear-gradient(180deg,#223857,#1a2c44);
  color:#dbeafe;
  border:1px solid #3b5574;
}

html[data-theme="dark"] .preview-mode-pill.is-simulated{
  background:linear-gradient(180deg,#7f1d1d,#991b1b);
  color:#ffffff;
  border-color:#ef4444;
}

/* ---------- PREVIEW BOX ---------- */
html[data-theme="dark"] #previewBox{
  border-color:#35506f;
  background:linear-gradient(180deg,#182638,#122033);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}

html[data-theme="dark"] #previewModeSelect,
html[data-theme="dark"] #simulatedWeekdaySelect,
html[data-theme="dark"] #simulatedTimeInput{
  background:linear-gradient(180deg,#1c2c42,#152338);
  color:#edf4ff;
  border-color:#3b5574;
}

html[data-theme="dark"] #previewStatusText{
  color:#dbeafe;
}
html[data-theme="dark"] #previewStatusText.is-simulated,
html[data-theme="dark"] body.preview-simulated #previewStatusText{
  color:#ffffff;
}

/* ---------- TABELLEN / VORLESEN ---------- */
html[data-theme="dark"] tr.today td{
  background:#dcebff;
  color:#112033;
}
html[data-theme="dark"] tr.today td a{
  color:#163ea3;
}

html[data-theme="dark"] .hours-speak-row:hover td{
  background:#1a2840;
  color:#edf4ff;
}

html[data-theme="dark"] .hours-speak-row.is-speaking td{
  background:#223857;
  color:#ffffff;
}

html[data-theme="dark"] .hours-speak-row.today:hover td{
  background:#2a3c55;
  color:#ffffff;
}

html[data-theme="dark"] .hours-speak-row td:last-child::after{
  border-left-color:#ffffff;
}
html[data-theme="dark"] .hours-speak-row.is-speaking td:last-child::after{
  background:#ffffff;
}

/* ---------- MEDICAL SPEAK BUTTON ---------- */
html[data-theme="dark"] .medical-emergency-speak{
  background:linear-gradient(135deg,#1e293b,#0f172a);
  border:1px solid #334155;
  color:#ffffff;
}
html[data-theme="dark"] .medical-emergency-speak::before{
  border-left-color:#ffffff;
}

/* ---------- OPTIONALE MODALS / BOXEN ---------- */
html[data-theme="dark"] .contact-modal-box,
html[data-theme="dark"] .voice-info-box{
  background:linear-gradient(180deg,#182638,#122033);
  border-color:#35506f;
  color:#edf4ff;
}
html[data-theme="dark"] .voice-info-title,
html[data-theme="dark"] .voice-info-text{
  color:#edf4ff;
}
html[data-theme="dark"] .voice-info-close{
  background:#223857;
  color:#edf4ff;
}

/* ---------- SELEKTIERTER TEXT ---------- */
html[data-theme="dark"] ::selection{
  background:#355b8c;
  color:#ffffff;
}

/* ================================
   CLEAN DARK MODE IMAGE HANDLING
   ================================ */

/* Only invert UI icons */
html[data-theme="dark"] .brand-logo,
html[data-theme="dark"] .settings-toggle-icon,
html[data-theme="dark"] .btn-icon,
html[data-theme="dark"] .action-icon {
  filter: brightness(0) invert(1);
}

/* Ensure real images stay normal */
html[data-theme="dark"] .empty-state-qr img,
html[data-theme="dark"] .qr-code-image,
html[data-theme="dark"] .card-qr-image,
html[data-theme="dark"] .smart-preview-thumb img,
html[data-theme="dark"] .smart-preview-stage img {
  filter: none;
  -webkit-filter: none;
  mix-blend-mode: normal;
  opacity: 1;
}

/* Keep white backgrounds for visual elements */
html[data-theme="dark"] .empty-state-qr,
html[data-theme="dark"] .smart-preview-thumb,
html[data-theme="dark"] .smart-preview-stage {
  background: #ffffff;
}