:root{
      --komd-primary:#1873B3;       /* KOMD Logo-Blau */
      --komd-primary-900:#0B3B63;

      --bg:#F4F8FC;
      --surface:#FFFFFF;
      --surface-2:#EEF5FB;
      --border:#D7E6F4;

      --text:#0F172A;
      --muted:#475569;

      --radius:18px;
      --shadow:0 10px 30px rgba(2, 18, 39, 0.08);
    }

    body{ background: var(--bg); color: var(--text); }

    .school-header{
      background: linear-gradient(135deg, var(--komd-primary-900), var(--komd-primary));
      color:#fff;
    }
    .school-header .subline{ color: rgba(255,255,255,0.85); }

    .badge-komd{
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.28);
      color:#fff;
      font-weight:600;
    }

    .shell{
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: calc(var(--radius) + 8px);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .podcast-item{
      position: relative;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 1rem 1.1rem 1rem 1.35rem;
      text-align: left;
      width: 100%;
      transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
    }
    .podcast-item::before{
      content:"";
      position:absolute;
      left:0; top:0;
      height:100%;
      width: 8px;
      border-radius: var(--radius) 0 0 var(--radius);
      background: var(--komd-primary);
    }
    .podcast-item:hover{
      transform: translateY(-2px);
      box-shadow: var(--shadow);
      border-color: rgba(24,115,179,0.35);
    }

    .kicker{ color: var(--muted); font-size: .9rem; }

    .btn-komd{
      --bs-btn-bg: var(--komd-primary);
      --bs-btn-border-color: var(--komd-primary);
      --bs-btn-hover-bg: var(--komd-primary-900);
      --bs-btn-hover-border-color: var(--komd-primary-900);
      --bs-btn-color: #fff;
      --bs-btn-hover-color:#fff;
      border-radius: 999px;
      font-weight: 600;
    }

    .modal-content{
      border: 1px solid var(--border);
      border-radius: calc(var(--radius) + 6px);
      overflow: hidden;
    }
    .modal-header{
      background: var(--surface);
      border-bottom: 1px solid var(--border);
    }

    .hero-img{
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      display: block;
      background: var(--surface-2);
    }

    .audio-box{
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 1rem;
    }

    .school-footer{
      background: var(--komd-primary-900);
      color: rgba(255,255,255,0.88);
    }
    .school-footer a{ color:#fff; text-decoration: underline; }

    .divider{ height:1px; background: var(--border); margin:.75rem 0; }