:root {
      --blue: #0b2f63;
      --blue-light: #1f5fa8;
      --yellow: #f6b600;
      --green: #2ea66f;
      --text: #243244;
      --muted: #6b7889;
      --line: #dce5ee;
      --card: rgba(255, 255, 255, 0.95);
      --shadow: 0 22px 60px rgba(17, 48, 87, 0.15);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: "Segoe UI", Arial, Helvetica, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 12% 10%, rgba(246, 182, 0, 0.18), transparent 23%),
        radial-gradient(circle at 88% 9%, rgba(31, 95, 168, 0.14), transparent 26%),
        linear-gradient(160deg, #eef5fb, #dfeaf5);
    }

    .page {
      width: min(1180px, calc(100% - 24px));
      margin: 0 auto;
      padding: 24px 0;
    }

    .hero {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 18px;
    }

    h1 {
      margin: 0 0 7px;
      color: var(--blue);
      font-size: clamp(2.1rem, 5vw, 4rem);
      line-height: 1;
      letter-spacing: -0.045em;
    }

    .subtitle {
      margin: 0;
      color: var(--muted);
      line-height: 1.55;
    }

    .time-box {
      min-width: 225px;
      padding: 13px 15px;
      border-radius: 15px;
      background: rgba(255, 255, 255, 0.84);
      box-shadow: 0 12px 30px rgba(17, 48, 87, 0.10);
    }

    .time-box strong {
      display: block;
      margin-bottom: 5px;
      color: var(--blue);
      font-size: 0.9rem;
    }

    .time-box span {
      color: var(--muted);
      font-size: 0.88rem;
    }

    .navigation {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 22px;
    }

    .nav-card {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 52px;
      padding: 11px 14px;
      border-radius: 14px;
      text-decoration: none;
      color: var(--blue);
      background: rgba(255, 255, 255, 0.88);
      border: 1px solid rgba(255, 255, 255, 0.9);
      box-shadow: 0 10px 24px rgba(17, 48, 87, 0.09);
      font-weight: 800;
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .nav-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(17, 48, 87, 0.14);
    }

    .nav-card.active {
      color: white;
      background: linear-gradient(145deg, var(--blue-light), var(--blue));
    }

    .nav-card.sterio {
      background: linear-gradient(145deg, #ffd34d, var(--yellow));
    }

    .nav-icon {
      font-size: 1.05rem;
    }

    .section-title {
      margin: 0 0 12px;
      color: var(--blue);
      font-size: 1.2rem;
    }

    .metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .metric {
      min-width: 0;
      padding: 14px;
      border-radius: 17px;
      background: var(--card);
      box-shadow: 0 12px 34px rgba(17, 48, 87, 0.12);
      text-align: center;
    }

    .metric h2 {
      margin: 0 0 10px;
      color: var(--blue);
      font-size: 0.92rem;
    }

    .donut {
      --value: 0;
      --color: var(--blue-light);
      position: relative;
      width: 100px;
      height: 100px;
      margin: 0 auto 9px;
      border-radius: 50%;
      background:
        conic-gradient(
          var(--color) calc(var(--value) * 1%),
          #e8eef5 0
        );
      transition: background 0.4s ease;
    }

    .donut::before {
      content: "";
      position: absolute;
      inset: 10px;
      border-radius: 50%;
      background: white;
    }

    .donut-content {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: grid;
      place-content: center;
    }

    .donut-value {
      color: var(--blue);
      font-size: 1.35rem;
      line-height: 1;
      font-weight: 850;
    }

    .donut-label {
      margin-top: 3px;
      color: var(--muted);
      font-size: 0.67rem;
    }

    .detail {
      min-height: 34px;
      color: var(--muted);
      font-size: 0.76rem;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .uptime-value {
      display: grid;
      place-content: center;
      min-height: 100px;
      margin-bottom: 9px;
      padding: 0 4px;
      color: var(--blue);
      font-size: 1.08rem;
      line-height: 1.3;
      font-weight: 850;
    }

    .status {
      margin-top: 14px;
      color: var(--muted);
      text-align: center;
      font-size: 0.8rem;
    }

    .warning {
      display: none;
      margin-top: 12px;
      padding: 10px 12px;
      border-radius: 11px;
      background: #fff3e3;
      color: #8a5513;
      text-align: center;
      font-size: 0.85rem;
    }

    .warning.visible {
      display: block;
    }

    @media (max-width: 1000px) {
      .navigation {
        grid-template-columns: repeat(3, 1fr);
      }

      .metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 700px) {
      .hero {
        flex-direction: column;
      }

      .time-box {
        width: 100%;
      }
    }

    @media (max-width: 520px) {
      .page {
        width: min(100% - 12px, 1180px);
        padding-top: 14px;
      }

      h1 {
        font-size: 1.9rem;
      }

      .subtitle {
        font-size: 0.86rem;
      }

      .navigation {
        grid-template-columns: repeat(3, 1fr);
        gap: 7px;
        margin-bottom: 12px;
      }

      .nav-card {
        min-height: 40px;
        padding: 7px 6px;
        border-radius: 10px;
        font-size: 0.75rem;
      }

      .metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .metric {
        padding: 11px 8px;
        border-radius: 14px;
      }

      .metric h2 {
        margin-bottom: 7px;
        font-size: .82rem;
      }

      .donut {
        width: 78px;
        height: 78px;
        margin-bottom: 7px;
      }

      .donut::before {
        inset: 8px;
      }

      .donut-value {
        font-size: 1.05rem;
      }

      .donut-label {
        font-size: .58rem;
      }

      .detail {
        min-height: 30px;
        font-size: .68rem;
      }

      .uptime-value {
        min-height: 78px;
        margin-bottom: 7px;
        font-size: .9rem;
      }
    }
  
    .theme-toggle{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:44px;
      padding:9px 13px;
      border:1px solid rgba(0,0,0,.12);
      border-radius:14px;
      background:rgba(255,255,255,.84);
      color:#243244;
      font:inherit;
      font-weight:800;
      cursor:pointer;
      box-shadow:0 10px 24px rgba(17,48,87,.10)
    }

    .theme-toggle-icon{font-size:1rem}

    .top-controls{
      display:flex;
      align-items:stretch;
      justify-content:flex-end;
      gap:10px;
      flex-wrap:wrap
    }

    html[data-theme="dark"] body{
      color:#ececf1;
      background:#212121;
    }

    html[data-theme="dark"] .page{
      color:#ececf1;
    }

    html[data-theme="dark"] h1,
    html[data-theme="dark"] .section-title,
    html[data-theme="dark"] .metric h2,
    html[data-theme="dark"] .donut-value,
    html[data-theme="dark"] .uptime-value,
    html[data-theme="dark"] .time-box strong{
      color:#ececf1;
    }

    html[data-theme="dark"] .subtitle,
    html[data-theme="dark"] .time-box span,
    html[data-theme="dark"] .detail,
    html[data-theme="dark"] .donut-label,
    html[data-theme="dark"] .status{
      color:#b4b4b4;
    }

    html[data-theme="dark"] .time-box,
    html[data-theme="dark"] .metric,
    html[data-theme="dark"] .nav-card,
    html[data-theme="dark"] .theme-toggle{
      background:#2f2f2f;
      color:#ececf1;
      border-color:#424242;
      box-shadow:0 14px 34px rgba(0,0,0,.30);
    }

    html[data-theme="dark"] .nav-card.sterio{
      background:#3a3a3a;
      color:#ececf1;
    }

    html[data-theme="dark"] .donut{
      background:
        conic-gradient(
          var(--color) calc(var(--value) * 1%),
          #4a4a4a 0
        );
    }

    html[data-theme="dark"] .donut::before{
      background:#2f2f2f;
    }

    html[data-theme="dark"] .warning{
      background:#3a2f20;
      color:#ffd79a;
    }

    @media(max-width:520px){
      .top-controls{width:100%;justify-content:space-between}
      .time-box{flex:1;min-width:0}
      .theme-toggle{min-width:88px;padding:8px 10px;font-size:.78rem}
    }

/* Erzwungene Desktop-Vorschau auf schmalen Bildschirmen */
html[data-view="desktop"] body{min-width:1100px}
html[data-view="desktop"] .page{width:1100px;max-width:none}
html[data-view="desktop"] .hero{flex-direction:row}
html[data-view="desktop"] .top-controls{width:auto;justify-content:flex-end}
html[data-view="desktop"] .navigation{grid-template-columns:repeat(3,minmax(0,1fr))}
html[data-view="desktop"] .metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
html[data-view="desktop"] .metric{padding:14px;border-radius:17px}
html[data-view="desktop"] .donut{width:100px;height:100px}
html[data-view="desktop"] .donut::before{inset:10px}
html[data-view="desktop"] .donut-value{font-size:1.35rem}