:root{
    --card:#11152A;
    --line:#23284A;
    --ink:#ECEEF7;
    --muted:#9AA0B5;

    --seg-bg:#5F6672;     /* alle Bloecke grau */
    --seg-active:#909aac; /* aktueller Block rot */
    --seg-div:rgba(0,0,0,.22); /* feine Trennlinie zwischen Bloecken */

    --now:#FFD24A;
    --disp:"Space Grotesk", "Inter", system-ui, sans-serif;
    --body:"Inter", system-ui, -apple-system, sans-serif;
  }

  .md-sched{
    box-sizing:border-box;
    width:100%; max-width:940px; margin:20px auto 0;
    background:transparent;   /* gesetzt vom Theme-AJAX (#sched_item) */
    color:var(--ink);
    border-radius:18px;
    padding:clamp(18px,3.2vw,32px);
    font-family:var(--body);
    -webkit-font-smoothing:antialiased;
  }
  .md-sched *{box-sizing:border-box;}

  .md-head{
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:16px; flex-wrap:wrap; margin-bottom:clamp(34px,4vw,44px);
  }
  .md-brand{
    font-family:var(--disp); font-weight:700;
    font-size:clamp(18px,2.7vw,26px); letter-spacing:.06em;
    text-transform:uppercase; line-height:1;
  }
  .md-brand small{
    display:block; font-family:var(--body); font-weight:500;
    font-size:clamp(11px,1.5vw,13px); letter-spacing:.18em;
    color:inherit; opacity:.72; margin-top:8px; text-transform:none;
  }
  .md-right{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
  .md-badge{
    display:none; align-items:center; gap:6px;
    font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.08em;
    text-transform:uppercase; color:#1a1400; background:var(--now);
    padding:5px 9px; border-radius:7px;
  }
  .md-badge.on{display:inline-flex;}
  .md-now{
    display:flex; align-items:center; gap:10px;
    font-size:clamp(12px,1.6vw,14px); white-space:nowrap;
  }
  .md-now .pulse{
    width:9px; height:9px; border-radius:50%;
    background:var(--now); animation:beat 1.4s ease-out infinite;
  }
  .md-now b{font-weight:600;}
  .md-now .t{color:inherit; opacity:.72; font-variant-numeric:tabular-nums;}

  .md-track{
    position:relative;
    display:flex; gap:0;
    height:clamp(78px,12vw,104px);
    overflow:visible;
  }
  .seg{
    position:relative;
    border-radius:0; padding:12px 14px;
    display:flex; flex-direction:column; justify-content:space-between;
    color:#fff; overflow:hidden; min-width:0;
    background:var(--seg-bg);
    transform:translateY(8px);
    transition:background .4s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .md-track.ready .seg{transform:translateY(0);}
  .seg:first-child{border-radius:14px 0 0 14px;}   /* linke Aussenecken */
  .seg.is-last{border-radius:0 14px 14px 0;}        /* rechte Aussenecken */
  .seg + .seg{border-left:1px solid var(--seg-div);} /* Trennlinie */
  .seg.is-active{background:var(--seg-active); color: #000;}
  .seg__sub.is-active{color: rgba(0,0,0,0.82);}
  .seg__name{
    font-family:var(--disp); font-weight:700;
    font-size:clamp(14px,2.2vw,21px); letter-spacing:.02em; line-height:1.05;
    overflow:hidden; text-overflow:ellipsis; display: -webkit-box; line-clamp: 2;
  }
  .seg__sub{
    font-size:clamp(10px,1.4vw,12px); font-weight:500;
    color:rgba(255,255,255,.82); margin-top:3px;
    overflow:hidden; text-overflow:ellipsis; display: -webkit-box; line-clamp: 2;
  }
  .seg__time{
    align-self:flex-end; font-weight:600;
    font-size:clamp(11px,1.7vw,15px); font-variant-numeric:tabular-nums;
    letter-spacing:.04em; text-shadow:0 1px 5px rgba(0,0,0,.3);
  }
  .seg--narrow{padding:10px 8px;}
  .seg--narrow .seg__sub{display:none;}
  .seg--narrow .seg__name{font-size:clamp(11px,1.5vw,13px); white-space:normal;}
  .seg--narrow .seg__time{font-size:clamp(10px,1.3vw,12px);}

  .md-playhead{
    position:absolute; top:-10px; bottom:-10px; left:var(--pos,0);
    width:2px; background:var(--now);
    box-shadow:0 0 12px 1px rgba(255,210,74,.7);
    transform:translateX(-1px);
    transition:left 1s linear, top 1s linear;
    z-index:3; pointer-events:none;
  }
  .md-playhead::before{
    content:""; position:absolute; left:50%; top:-4px;
    width:11px; height:11px; border-radius:50%;
    background:var(--now); transform:translateX(-50%);
    box-shadow:0 0 10px 2px rgba(255,210,74,.8);
    animation:beat 1.4s ease-out infinite;
  }
  .md-ph-time{
    position:absolute; top:-30px; left:50%; transform:translateX(-50%);
    background:var(--now); color:#1a1400;
    font-family:var(--disp); font-weight:700; font-size:12px;
    letter-spacing:.03em; font-variant-numeric:tabular-nums;
    padding:3px 8px; border-radius:7px; white-space:nowrap;
  }
  .md-ph-time::after{
    content:""; position:absolute; left:50%; bottom:-4px; transform:translateX(-50%) rotate(45deg);
    width:8px; height:8px; background:var(--now);
  }

  .md-hours{
    position:relative; height:22px; margin-top:12px;
    color:inherit; opacity:.62; font-size:11px; font-variant-numeric:tabular-nums;
  }
  .md-hours span{position:absolute; transform:translateX(-50%); top:0;}
  .md-hours span:first-child{transform:none;}
  .md-hours span:last-child{transform:translateX(-100%);}

  .md-foot{
    margin-top:14px; color:inherit; opacity:.85;
    font-size:11px; letter-spacing:.04em; line-height:1.6;
  }
  .md-foot .rule{font-weight:600;}

  .md-ns{color:var(--muted); font-size:13px; padding:10px 0;}

  @keyframes beat{
    0%{box-shadow:0 0 0 0 rgba(255,210,74,.55);}
    70%{box-shadow:0 0 0 9px rgba(255,210,74,0);}
    100%{box-shadow:0 0 0 0 rgba(255,210,74,0);}
  }

  @media (max-width:520px){
    .seg__sub{display:none;}
    .seg{padding:10px 11px;}
    .seg__name{white-space:normal;}
  }
  @media (max-width:940px){
    .md-track{flex-direction:column; height:400px; gap:0;}
    .seg__sub{display:block;}                 /* genug Höhe im Stapel */
    .seg{border-radius:0;}
    .seg:first-child{border-radius:14px 14px 0 0;}
    .seg.is-last{border-radius:0 0 14px 14px;}
    .seg + .seg{border-left:none; border-top:1px solid var(--seg-div);}
    .md-hours{display:none;}                   /* Stunden-Achse passt vertikal nicht */
    /* gelbe Linie jetzt horizontal, wandert von oben nach unten */
    .md-playhead{
      left:-10px; right:-10px; top:var(--pos,0); bottom:auto;
      width:auto; height:2px; transform:translateY(-1px);
    }
    .md-playhead::before{top:50%; left:0; transform:translate(-50%,-50%);}
    .md-ph-time{top:50%; left:auto; right:0; transform:translateY(-50%);}
    .md-ph-time::after{display:none;}
  }
  @media (prefers-reduced-motion:reduce){
    .seg{transform:none; transition:opacity .3s ease;}
    .md-playhead{transition:none;}
    .md-now .pulse, .md-playhead::before{animation:none;}
  }