/* ===== Theme variables (Light default, Dark via prefers-color-scheme) ===== */
    :root{
      /* INDAMED-ish */
      --brandRed:  #D51E2D;
      --brandRed2: #B91522;
      --ink:       #14161b;
      --ink2:      #2B2F36;
      --muted:     #6b7280;

      /* Status */
      --good:  #2FBF71;
      --warn:  #F0B429;
      --bad:   #D64545;

      /* Epic card neutral */
      --epicBg: #ffffff;
      --epicBg2:#f6f7f9;
      --epicText: #14161b;
      --epicMeta: rgba(20,22,27,.70);

  /* LIGHT (default) */
  --pageBg: #f6f7f9;
  --pageBg2:#ffffff;

      --topbarBg: rgba(255,255,255,.96);
      --topbarText: #0f172a;

  --panelBg: #ffffff;
  --panelBg2: #f3f4f6;

      --border: rgba(15, 23, 42, .10);
      --shadow: 0 10px 28px rgba(15,23,42,.08);

      --timelineBg: rgba(255,255,255,.98);
      --timelineTrack: rgba(15,23,42,.08);

      --btnBg: rgba(15,23,42,.03);
      --btnBorder: rgba(15,23,42,.12);
      --btnText: rgba(15,23,42,.92);

      --subtitle: rgba(15,23,42,.62);
      --appText: rgba(15,23,42,.92);
    }

    @media (prefers-color-scheme: dark){
      :root{
        --pageBg: #0b0f15;
        --pageBg2:#0f141c;

        --topbarBg: rgba(20,22,27,.90);
        --topbarText: #e9edf7;

        --panelBg: rgba(43,47,54,.52);
        --panelBg2: rgba(20,22,27,.48);

        --border: rgba(255,255,255,.10);
        --shadow: 0 14px 38px rgba(0,0,0,.35);

        --timelineBg: rgba(11,15,21,.92);
        --timelineTrack: rgba(0,0,0,.20);

        --btnBg: rgba(255,255,255,.06);
        --btnBorder: rgba(255,255,255,.14);
        --btnText: #e7e9ee;

        --subtitle: rgba(233,237,247,.68);
        --appText: #e9edf7;

        --epicBg: #141a25;
        --epicBg2:#0f141c;
        --epicText:#e9edf7;
        --epicMeta: rgba(233,237,247,.70);
      }
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      overflow:hidden;

      background: linear-gradient(180deg, var(--pageBg), var(--pageBg2));
      color: var(--appText);
    }

    .app{ height:100vh; width:100vw; display:flex; flex-direction:column; }

    /* Better truncation without magic max-width */
    .storyLeft{ flex:1 1 auto; min-width:0; }
    .storyTitle{ max-width: unset; }

    /* Visible focus for keyboard */
    :focus-visible{
      outline: 3px solid color-mix(in srgb, var(--brandRed) 35%, transparent);
      outline-offset: 2px;
      border-radius: 8px;
    }
    .epic{ outline:none; }
    .epic:focus-visible{
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brandRed) 22%, transparent), var(--shadow);
      border-color: color-mix(in srgb, var(--brandRed) 55%, var(--border));
    }

    /* ===== Top Bar ===== */
    .toolbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding: 14px 16px 10px;
      background: var(--topbarBg);
      border-bottom: 1px solid var(--border);
      backdrop-filter: blur(8px);
      color: var(--topbarText);
    }

    .toolbarLeft{ display:flex; flex-direction:column; gap:4px; min-width:0; }

    .titleRow{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }

    .brandIcon{
      height:34px;
      width:100px;
      flex:0 0 auto;
      object-position: 92% center;
      display:block;
    }

    .title{
      font-weight:950;
      font-size:14px;
      letter-spacing:.2px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      min-width:0;
    }
    .title .medical{ color: var(--brandRed); font-weight:1000; }
    .title .mo{ color: var(--topbarText); font-weight:950; }

    .subtitle{
      font-size:11px;
      color: var(--subtitle);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .filters{
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:10px;
    }
    .filterRow{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      justify-content:flex-end;
      align-items:center;
    }

    .searchRow{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:8px;
      width:100%;
    }
    .searchInput{
      width: min(360px, 100%);
      border: 1px solid var(--btnBorder);
      background: var(--btnBg);
      color: var(--appText);
      border-radius: 999px;
      padding: 6px 12px;
      font-size: 11px;
      outline: none;
    }
    .searchInput::placeholder{ color: color-mix(in srgb, var(--subtitle) 75%, transparent); }
    .searchInput:focus-visible{
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brandRed) 22%, transparent);
      border-color: color-mix(in srgb, var(--brandRed) 55%, var(--btnBorder));
    }

    .statusLegend{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:6px;
      align-items:center;
      justify-content:flex-start;
    }
    .legendItem{
      display:flex;
      align-items:center;
      gap:6px;
      font-size:11px;
      color: var(--subtitle);
      white-space:nowrap;
    }
    .legendBadge{
      width:22px;
      height:22px;
      border-radius:7px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:11px;
      font-weight:1000;
      color:#fff;
      border:1px solid rgba(255,255,255,.18);
    }
    .legendBadge.good{ background: var(--good); border-color: rgba(47,191,113,.35); }
    .legendBadge.warn{ background: var(--warn); border-color: rgba(240,180,41,.35); color: #5b3c00; }
    .legendBadge.bad{  background: var(--bad);  border-color: rgba(214,69,69,.35); }

    .btn{
      font-size:11px;
      padding:6px 10px;
      border-radius: 999px;
      border: 1px solid var(--btnBorder);
      background: var(--btnBg);
      color: var(--btnText);
      cursor:pointer;
      user-select:none;
      transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
    }
    .btn:hover{ background: color-mix(in srgb, var(--btnBg) 70%, white); }
    .btn.active{
      border-color: color-mix(in srgb, var(--brandRed) 75%, var(--btnBorder));
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brandRed) 20%, transparent);
      background: color-mix(in srgb, var(--brandRed) 14%, var(--btnBg));
    }

    /* Team-colored filter buttons */
    .btn.team{
      border-color: color-mix(in srgb, var(--teamColor) 55%, var(--btnBorder));
      background: color-mix(in srgb, var(--teamColor) 10%, var(--btnBg));
    }
    .btn.team:hover{
      background: color-mix(in srgb, var(--teamColor) 14%, var(--btnBg));
    }
    .btn.team.active{
      border-color: color-mix(in srgb, var(--teamColor) 80%, var(--btnBorder));
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--teamColor) 24%, transparent);
      background: color-mix(in srgb, var(--teamColor) 16%, var(--btnBg));
    }

    /* Release buttons */
    .btn.rel{
      border-color: color-mix(in srgb, var(--relColor) 55%, var(--btnBorder));
      background: color-mix(in srgb, var(--relColor) 10%, var(--btnBg));
    }
    .btn.rel:hover{
      background: color-mix(in srgb, var(--relColor) 14%, var(--btnBg));
    }
    .btn.rel.active{
      border-color: color-mix(in srgb, var(--relColor) 80%, var(--btnBorder));
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--relColor) 24%, transparent);
      background: color-mix(in srgb, var(--relColor) 16%, var(--btnBg));
    }

    /* ===== Release Bar ===== */
    .releaseBar{
      display:flex;
      gap:10px;
      padding: 10px 14px 0;
      flex: 0 0 auto;
    }
    .releaseCard{
      flex: 1 1 0;
      min-width: 240px;
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 10px 22px rgba(15,23,42,.08);
      background: linear-gradient(180deg, var(--panelBg), var(--panelBg2));
      padding: 10px 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .releaseCard.selectable{
      cursor:pointer;
      transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
    }
    .releaseCard.selectable:hover{
      transform: translateY(-1px);
      box-shadow: 0 14px 26px rgba(0,0,0,.14);
    }
    .releaseCard.selectable.selected{
      border-color: color-mix(in srgb, var(--brandRed) 55%, var(--border));
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brandRed) 18%, transparent), 0 10px 22px rgba(15,23,42,.10);
    }
    .releaseLeft{ min-width:0; }
    .releaseTitle{
      font-size:12px;
      font-weight:1000;
      color: var(--topbarText);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .releaseMeta{
      margin-top:2px;
      font-size:10px;
      color: var(--subtitle);
      display:flex;
      gap:8px;
      flex-wrap:wrap;
    }
    .releaseRight{
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:6px;
      flex:0 0 auto;
    }
    .phasePill{
      font-size:10px;
      padding:3px 8px;
      border-radius:999px;
      border:1px solid var(--border);
      background: var(--btnBg);
      color: var(--btnText);
      white-space:nowrap;
      font-weight:900;
    }
    .phasePill.good{ border-color: rgba(47,191,113,.35); background: rgba(47,191,113,.12); }
    .phasePill.warn{ border-color: rgba(240,180,41,.35); background: rgba(240,180,41,.12); }
    .phasePill.bad{  border-color: rgba(214,69,69,.35);  background: rgba(214,69,69,.12); }
    .phasePill.feature{ border-color: rgba(14,165,233,.35); background: rgba(14,165,233,.12); }
    .phasePill.bugfix{ border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.12); }

    /* ===== Release-Progress (in den Versions-Karten) ===== */
    .relProgressWrap{
      width: 120px;
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:4px;
    }
    .relProgressBar{
      width: 120px;
      height: 7px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--border) 18%, transparent);
      border: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
      overflow:hidden;
    }
    .relProgressFill{
      height:100%;
      width:0%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--brandRed), color-mix(in srgb, var(--brandRed) 55%, transparent));
    }

    /* ===== Board ===== */
    .boardWrap{ flex: 1 1 auto; min-height:0; padding: 12px 14px 0; }

    .board{
      height: 100%;
      min-height:0;
      overflow:auto;
      padding: 12px;
      border-radius: 12px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      background:
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
        linear-gradient(180deg, var(--panelBg), var(--panelBg2));
    }

    .grid{
      display:flex;
      flex-direction:column;
      gap:12px;
      align-content:stretch;
      padding-bottom: 18px;
    }

    .prioLane{
      border:1px solid var(--border);
      border-radius:12px;
      background: color-mix(in srgb, var(--panelBg) 86%, transparent);
      padding:10px;
    }
    .laneHeader{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
    }
    .laneTitle{
      display:flex;
      align-items:center;
      gap:8px;
      font-size:11px;
      font-weight:1000;
      color: var(--topbarText);
      letter-spacing:.2px;
      white-space:nowrap;
    }
    .laneBullet{
      width:10px;
      height:10px;
      border-radius:999px;
      border:1px solid var(--border);
      flex:0 0 auto;
    }
    .laneMeta{
      font-size:10px;
      color: var(--subtitle);
      white-space:nowrap;
    }

    .prioLane.p1 .laneBullet{ background:#D64545; border-color: rgba(214,69,69,.45); }
    .prioLane.p2 .laneBullet{ background:#F0B429; border-color: rgba(240,180,41,.45); }
    .prioLane.p3 .laneBullet{ background:#0EA5E9; border-color: rgba(14,165,233,.45); }
    .prioLane.p4 .laneBullet{ background:#2FBF71; border-color: rgba(47,191,113,.45); }
    .prioLane.unknown .laneBullet{ background: var(--btnBorder); border-color: var(--border); }

    .laneGrid{
      display:grid;
      /* Fixed card columns: cards no longer stretch to fill free space */
      grid-template-columns: repeat(auto-fill, 240px);
      gap:10px;
      align-content:start;
      justify-content:start;
    }

    /* ===== Epic card ===== */
    .epic{
      position:relative;
      --epicProgress: 0%;
      isolation: isolate;
      border-radius: 8px;
      min-height: 92px;
      padding: 9px 10px 10px;
      cursor:pointer;
      overflow:hidden;
      border: 1px solid var(--border);
      box-shadow: 0 1px 0 rgba(0,0,0,.06);
      color: var(--epicText);
      transition: transform .08s ease, box-shadow .12s ease;
      background:
        linear-gradient(180deg, var(--epicBg), var(--epicBg2));
    }

    /* Dezenter Fortschritts-Akzent statt flächigem Karten-Rosa */
    .epic::before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      bottom:0;
      width: var(--epicProgress);
      background: color-mix(in srgb, var(--brandRed2) 8%, transparent);
      pointer-events:none;
      z-index:0;
      border-radius: 8px 0 0 8px;
    }
    .epicContent, .corner, .statusIcon{ position:relative; z-index:1; }
    .epic:hover{
      transform: translateY(-1px);
      box-shadow: 0 14px 26px rgba(0,0,0,.18);
    }

    .epicContent{
      display:flex;
      flex-direction:column;
      gap:14px;
    }

    .corner{
      position:absolute;
      right:0; top:0;
      width: 0; height: 0;
      border-left: 18px solid transparent;
      border-bottom: 18px solid rgba(0,0,0,.10);
      opacity:.45;
    }
    @media (prefers-color-scheme: dark){
    .marker.override .markerLine{ width:2px; height:18px; }
    .marker.override.feature .markerLine{ background:#0EA5E9; }
    .marker.override.freeze .markerLine{ background:#D51E2D; }
    .marker.override.delivery .markerLine{ background:#16A34A; }
    .marker.override .markerText{
      font-size:11px;
      color:var(--subtitle);
      background: var(--timelineBg);
      border: 1px solid var(--border);
      padding:2px 6px;
      border-radius:6px;
    }
    .marker.override.feature .markerText{
      background: var(--timelineBg);
      border: 1px solid rgba(14,165,233,.30);
    }
    .marker.override.freeze .markerText{
      background: var(--timelineBg);
      border: 1px solid rgba(213,30,45,.30);
    }
    .marker.override.delivery .markerText{
      background: var(--timelineBg);
      border: 1px solid rgba(22,163,74,.30);
    }
    /* legend removed - markers now self-describing via hover/tooltips */
      .corner{ border-bottom-color: rgba(255,255,255,.10); }
    }

    /* Title with ellipsis (2 lines) */
    .epicTitle{
      font-size:11px;
      font-weight:950;
      line-height:1.3;
      display:-webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      overflow:hidden;
      text-overflow: ellipsis;
    }

    .epicMeta{
      font-size:10px;
      color: var(--epicMeta);
      margin-top: 6px;
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      align-items:center;
    }

  .teamsPills{ display:flex; gap:8px; flex-wrap:wrap; }

    .teamPill{
      font-size:9px;
      padding:2px 6px;
      border-radius:999px;
      border: 1px solid color-mix(in srgb, var(--teamColor) 55%, var(--border));
      background: color-mix(in srgb, var(--teamColor) 12%, white);
      color: var(--epicText);
      font-weight:950;
    }
    .priorityPill{
      font-size:9px;
      padding:2px 6px;
      border-radius:999px;
      border:1px solid var(--border);
      color: var(--epicText);
      font-weight:950;
      white-space:nowrap;
    }
    .priorityPill.p1{ background: rgba(214,69,69,.15); border-color: rgba(214,69,69,.35); }
    .priorityPill.p2{ background: rgba(240,180,41,.18); border-color: rgba(240,180,41,.38); }
    .priorityPill.p3{ background: rgba(14,165,233,.14); border-color: rgba(14,165,233,.34); }
    .priorityPill.p4{ background: rgba(47,191,113,.14); border-color: rgba(47,191,113,.34); }
    .priorityPill.unknown{ background: var(--btnBg); border-color: var(--border); color: var(--subtitle); }
    @media (prefers-color-scheme: dark){
      .teamPill{
        background: color-mix(in srgb, var(--teamColor) 16%, #0b0f15);
        border-color: color-mix(in srgb, var(--teamColor) 55%, rgba(255,255,255,.18));
      }
    }


    .statusIcon{
      position:absolute;
      right:7px;
      bottom:7px;
      width: 36px;
      height: 36px;
      border-radius: 999px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:900;
      font-size: 11px;
      line-height: 1;
      color: #fff;
      box-shadow: 0 4px 12px rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.22);
    }
    .statusIcon.good{ background: var(--good); }
    .statusIcon.warn{ background: var(--warn); }
    .statusIcon.bad{  background: var(--bad); }

    /* ===== Bottom timeline (sticky) ===== */
    .timelineBar{
      position: sticky;
      bottom: 0;
      z-index: 10;
      padding: 8px 12px 10px;
      background: linear-gradient(180deg, color-mix(in srgb, var(--pageBg) 40%, transparent), var(--pageBg));
      border-top: 1px solid var(--border);
      backdrop-filter: blur(8px);
    }

    .timeline{
      background: var(--timelineBg);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 8px 10px 10px;
      box-shadow: var(--shadow);
    }

    .timelineTop{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      margin-bottom:6px;
    }

    .timelineTop .label{
      font-size:11px;
      font-weight:950;
      color: var(--topbarText);
    }

    .timelineTop .range{
      font-size:10px;
      color: var(--subtitle);
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      line-height:1.15;
    }
    .timelineTop .range .rangeDates{
      white-space:nowrap;
    }
    .timelineTop .range .timelineProgressLine{
      font-size:10px;
      color: var(--subtitle);
      margin-top:3px;
      white-space:nowrap;
    }

    .timelineTop .dates{
      font-size:11px;
      color: var(--subtitle);
    }
    .releaseDates{ font-size:11px; color: var(--subtitle); margin-top:6px; }
    .track{
      position:relative;
      height: 14px;
      border-radius: 10px;
      background: var(--timelineTrack);
      border: 1px solid var(--border);
      overflow: visible;
      padding: 0;
    }

    .trackFill{
      position:absolute;
      inset:0;
      width:0%;
      /* Ruhiger, einheitlicher Fill (weniger „komischer“ Gradient) */
      background: color-mix(in srgb, var(--brandRed) 8%, transparent);
      border-radius: 10px;
    }
    .marker{
      position:absolute;
      top: 1px;
      transform: translateX(-50%);
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:3px;
      pointer-events:auto;
      cursor:default;
    }


    /* Ensure the Today marker sits above other markers so its label remains readable */
    #todayMarker{ z-index:3000; }
    #todayMarker .markerText{
      display:block !important;
      position:absolute;
      left:50%;
      top: calc(100% + 8px);
      bottom:auto;
      transform: translateX(-50%);
      z-index:3001;
      font-size:12px;
      color:var(--appText);
      background:var(--timelineBg);
      border:1px solid var(--border);
      padding:6px 8px;
      border-radius:6px;
      box-shadow:var(--shadow);
      white-space:nowrap;
    }
    .markerLine{
      width:2px;
      height:12px;
      background: color-mix(in srgb, var(--topbarText) 60%, transparent);
      border-radius: 999px;
    }
    .markerText{
      font-size:9px;
      padding: 2px 6px;
      border-radius: 999px;
      /* Neutraler Hintergrund (kein Rosa-Teint), Typ-Farben nur über Border */
      background: var(--timelineBg);
      border: 1px solid var(--border);
      white-space:nowrap;
      color: var(--topbarText);
    }
    /* hide inline labels to avoid overlap; show on hover as tooltip */
    .marker.extra .markerText{ display:none; }
    /* Use bottom-based absolute positioning so the tooltip floats above the
       marker regardless of surrounding layout. Give it a high z-index so it
       won't be hidden behind other stacking contexts. */
    .marker.extra:hover .markerText{
      display:block;
      position:absolute;
      left:50%;
      bottom: calc(100% + 8px);
      transform: translateX(-50%);
      white-space:nowrap;
      font-size:12px;
      color:var(--appText);
      background: var(--timelineBg);
      border:1px solid var(--border);
      padding:6px 8px;
      border-radius:6px;
      box-shadow:var(--shadow);
      z-index:2000;
    }

    /* Marker am linken Rand */
    .marker.edge-left:hover .markerText{
      left:0;
      transform:none;
    }

    /* Marker am rechten Rand */
    .marker.edge-right:hover .markerText{
      left:auto;
      right:0;
      transform:none;
    }

  .marker.override.feature .markerLine{ background:#0EA5E9; }
  .marker.override.freeze .markerLine{ background:#D51E2D; }
  .marker.override.delivery .markerLine{ background:#16A34A; }
  /* clamped markers (outside visible range) get subtle styling */
  .marker.clamped-left .markerLine, .marker.clamped-right .markerLine{ opacity:0.6; border:1px dashed rgba(0,0,0,0.12); }
  .marker.clamped-left .markerLine{ transform: translateX(-2px); }
  .marker.clamped-right .markerLine{ transform: translateX(2px); }
  /* small badge under marker for quick identification (F/Fr/A) */
  .markerBadge{ margin-top:2px; display:inline-flex; align-items:center; justify-content:center; width:20px; height:18px; border-radius:6px; font-size:11px; color:var(--appText); background: rgba(0,0,0,0.04); border:1px solid var(--border); }
  .marker.override.feature .markerBadge{ background:#0EA5E9; color:white; }
  .marker.override.freeze .markerBadge{ background:#D51E2D; color:white; }
  .marker.override.delivery .markerBadge{ background:#16A34A; color:white; }

    /* Grouped marker styles (used when multiple clamped markers are collapsed) */
  .marker.group{ display:flex; flex-direction:column; align-items:center; transform:none; }
  .marker.group .groupLine{ width:2px; height:18px; opacity:0.7; }
    .markerDots{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }
    .markerDot{ width:14px; height:14px; border-radius:6px; border:1px solid var(--border); box-sizing:border-box; }
    .markerDot.feature{ background:#0EA5E9; }
    .markerDot.freeze{ background:#D51E2D; }
    .markerDot.delivery{ background:#16A34A; }
    /* position the dot-stack a little to the right for left-clamped, left for right-clamped */
    .marker.group.clamped-left .markerDots{ margin-left:12px; }
    .marker.group.clamped-right .markerDots{ margin-right:12px; }

   /* leave more vertical space between the track and the ticks/labels so
     badges (F/Fr/A) and today's label don't collide */
   .ticks{
      margin-top:8px;
      display:flex;
      justify-content:space-between;
      font-size:9px;
      color: var(--subtitle);
      gap:8px;
    }

    /* ===== Modal ===== */
    .backdrop{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,.58);
      display:none;
      align-items:center;
      justify-content:center;
      padding: 18px;
      z-index: 50;
    }
    .backdrop.open{ display:flex; }

    .modal{
      width: min(980px, 96vw);
      max-height: 86vh;
      overflow:hidden;
      border-radius: 14px;
      background: color-mix(in srgb, var(--pageBg) 92%, #0b0f15);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      color: var(--appText);
      display:flex;
      flex-direction:column;
    }
    @media (prefers-color-scheme: dark){
      .modal{ background: #111722; color: #e9ecf6; border-color: rgba(255,255,255,.12); }
    }

    .modalHeader{
      padding: 12px 14px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(90deg, color-mix(in srgb, var(--brandRed) 18%, transparent), rgba(255,255,255,.04));
    }
    .modalTitle{ display:flex; flex-direction:column; gap:4px; min-width:0; }
    .modalTitle .h{
      font-size:14px;
      font-weight:1000;
      line-height:1.2;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .modalTitle .m{ font-size:11px; color: var(--subtitle); display:flex; flex-wrap:wrap; gap:8px; }
    @media (prefers-color-scheme: dark){
      .modalTitle .m{ color: rgba(233,237,247,.72); }
    }

    .closeBtn{
      border: 1px solid var(--btnBorder);
      background: var(--btnBg);
      color: var(--btnText);
      border-radius: 10px;
      padding: 8px 10px;
      cursor:pointer;
      font-size:12px;
      flex:0 0 auto;
    }
    .closeBtn:hover{ background: color-mix(in srgb, var(--btnBg) 70%, white); }

    .modalBody{ padding: 12px 14px 14px; overflow:auto; }
    .sectionTitle{ font-size:11px; font-weight:950; letter-spacing:.2px; margin: 0 0 10px; color: var(--topbarText); }

    .stories{ display:flex; flex-direction:column; gap:8px; }
    .story{
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--panelBg) 70%, transparent);
      border-radius: 12px;
      padding: 10px 10px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    @media (prefers-color-scheme: dark){
      .story{ border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.03); }
    }
    .storyLeft{ display:flex; align-items:center; gap:10px; min-width:0; }
    .dot{
      width:10px; height:10px;
      border-radius:999px;
      background: color-mix(in srgb, var(--brandRed) 85%, white);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brandRed) 14%, transparent);
      flex:0 0 auto;
    }
    .storyTitle{
      font-size:12px;
      font-weight:900;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .storyRight{ display:flex; align-items:center; gap:8px; flex:0 0 auto; color: var(--subtitle); font-size:11px; }

    .pill{
      padding:3px 8px;
      border-radius:999px;
      border:1px solid var(--border);
      background: var(--btnBg);
      white-space:nowrap;
      color: var(--btnText);
    }
    .pill.good{ border-color: rgba(47,191,113,.35); background: rgba(47,191,113,.12); color:#1f7a49; }
    .pill.warn{ border-color: rgba(240,180,41,.35); background: rgba(240,180,41,.12); color:#8a5b00; }
    .pill.bad{  border-color: rgba(214,69,69,.35);  background: rgba(214,69,69,.12);  color:#8a1f1f; }
    .pill.adoStatePill{
      font-weight: 950;
      border-width: 1px;
      border-style: solid;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
    }
    /* Statusfarben nur hier (kein DevOps-API, keine Inline-Farben) — Keys müssen zu resolveStateBadgeKey passen */
    .pill.adoStatePill.stateBadge-new{
      background-color: #64748b !important;
      color: #ffffff !important;
      border-color: #475569 !important;
    }
    .pill.adoStatePill.stateBadge-approved{
      background-color: #ca8a04 !important;
      color: #111111 !important;
      border-color: #a16207 !important;
    }
    /* Committed + In Progress (Alias → gleiche Klasse „committed“ im JS) */
    .pill.adoStatePill.stateBadge-committed{
      background-color: #2563eb !important;
      color: #ffffff !important;
      border-color: #1d4ed8 !important;
    }
    .pill.adoStatePill.stateBadge-done{
      background-color: #16a34a !important;
      color: #ffffff !important;
      border-color: #15803d !important;
    }
    .pill.adoStatePill.stateBadge-removed{
      background-color: #78716c !important;
      color: #ffffff !important;
      border-color: #57534e !important;
    }
    @media (prefers-color-scheme: dark){
      .pill.good{ color:#c9f6dd; }
      .pill.warn{ color:#ffe6b0; }
      .pill.bad{  color:#ffc3c3; }
      .pill.adoStatePill{ box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
    }

    /* ==========================================================
       ===== Mobile fixes (added) =====
       ========================================================== */
    html, body{
      width: 100%;
      overflow-x: hidden;
    }

    /* Release-Karten dürfen auf kleinen Screens schrumpfen */
    .releaseCard{
      min-width: 0; /* überschreibt min-width:240px */
      width: 100%;
    }

    @media (max-width: 720px){
      .app{
        overflow:auto;
        -webkit-overflow-scrolling: touch;
      }
      .toolbar{
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      }
      .filters{
        align-items: stretch;
      }
      .filterRow{
        justify-content: flex-start;
      }
      .btn{
        padding: 8px 12px;
      }

      .releaseBar{
        flex-direction: column;
        padding: 10px 12px 0;
      }
      .releaseRight{
        align-items: flex-start;
      }
      .relProgressWrap,
      .relProgressBar{
        width: 100%;
      }

      .boardWrap{
        padding: 10px 12px 0;
        flex: 0 0 auto;
        min-height: auto;
      }
      .board{
        padding: 10px;
        height: auto;
        min-height: 0;
        overflow: visible;
      }

      .timelineBar{
        position: static;
        z-index: auto;
        padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
        background: transparent;
        border-top: none;
        backdrop-filter: none;
      }
      .timeline{
        border-radius: 10px;
        padding: 8px 10px;
      }
      .timelineTop{
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 8px;
      }
      .timelineTop .range{
        align-items: flex-start;
      }
      .timelineTop .dates{
        line-height: 1.25;
      }
      .track{
        height: 12px;
      }
      #todayMarker .markerText{
        font-size: 11px;
        padding: 4px 6px;
      }
    }

    @media (max-width: 520px){
      .timeline{
        padding: 8px 10px;
      }

      .timelineTop .dates{
        display:none;
      }

      .ticks{
        display:none;
      }
    }

    @media (max-width: 720px){
      .backdrop{ padding: 10px; }
      .modal{
        width: 100%;
        max-height: 92vh;
      }
      .modalHeader{
        position: sticky;
        top: 0;
        z-index: 1;
      }
      .modalTitle .h{
        white-space: normal;
      }
      .story{
        align-items: flex-start;
      }
      .storyTitle{
        white-space: normal;
      }
      .storyRight{
        flex-wrap: wrap;
        justify-content: flex-end;
      }
    }
  

    /* ===== Azure DevOps prototype controls ===== */
    .configPanel{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      align-items:center;
      justify-content:flex-end;
      padding: 8px 14px 0;
    }
    .cfgField{
      display:flex;
      align-items:center;
      gap:6px;
      min-width:min(100%, 360px);
      padding:8px 10px;
      border:1px solid var(--border);
      border-radius:12px;
      background: var(--panelBg);
      box-shadow: var(--shadow);
      backdrop-filter: blur(8px);
    }
    .cfgLabel{
      font-size:11px;
      color: var(--subtitle);
      white-space:nowrap;
    }
    .cfgInput{
      flex:1 1 auto;
      min-width:0;
      border:none;
      background:transparent;
      color: var(--appText);
      font-size:12px;
      outline:none;
    }
    .cfgActions{ display:flex; flex-wrap:wrap; gap:8px; }
    .statusLine{
      flex:1 1 100%;
      font-size:11px;
      color: var(--subtitle);
      min-height:16px;
    }
    .statusLine.ok{ color: var(--good); }
    .statusLine.warn{ color: var(--warn); }
    .statusLine.bad{ color: var(--bad); }
    .hintCard{
      border:1px dashed var(--border);
      border-radius:16px;
      padding:18px;
      background: color-mix(in srgb, var(--panelBg) 86%, transparent);
      color: var(--subtitle);
      line-height:1.45;
    }
    .detailList{ display:grid; gap:10px; }
    .detailRow{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
    .detailRow:last-child{ border-bottom:none; }
    .detailKey{ font-size:11px; color: var(--subtitle); min-width:120px; }
    .detailVal{ text-align:right; word-break:break-word; }
    .inlineLink{ color: var(--brandRed); text-decoration:none; font-weight:700; }
    .inlineLink:hover{ text-decoration:underline; }
    .metaPills{ display:flex; flex-wrap:wrap; gap:8px; }

    @media (max-width: 720px){
      .configPanel{ align-items:stretch; }
      .cfgField{ min-width:100%; }
      .cfgActions{ width:100%; }
      .cfgActions .btn{ flex:1 1 auto; }
      .detailRow{ flex-direction:column; }
      .detailVal{ text-align:left; }
    }

    /* Small loading spinner shown next to the Load button while fetching data */
    .spinner{
      display:inline-block;
      width:16px;
      height:16px;
      border:2px solid rgba(0,0,0,0.12);
      border-top-color:var(--brandRed);
      border-radius:50%;
      animation:spin 1s linear infinite;
      margin-left:8px;
      vertical-align:middle;
    }
    .spinner.hidden{ display:none; }
    @keyframes spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
    /* Fullscreen busy backdrop with centered spinner */
    .busyBackdrop{
      position:fixed;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      background: rgba(11,15,21,0.36);
      z-index: 80;
    }
    .busyBackdrop.hidden{ display:none; }
    .busyContent{
      display:flex;
      align-items:center;
      gap:12px;
      padding:14px 18px;
      border-radius:12px;
      background: linear-gradient(180deg, var(--panelBg), var(--panelBg2));
      box-shadow: var(--shadow);
      border: 1px solid var(--border);
      color: var(--appText);
      font-weight:700;
    }
    .busyContent .spinner{ width:22px; height:22px; border-width:3px; }
    /* counts block for epic card: show PBIs/Bugs on separate lines */
    .countsBlock{
      display:block;
      margin:0;
      font-size:11px;
      color: var(--subtitle);
      line-height:1.1;
    }
    .countsBlock div{ line-height:1.1; }
    .epicCounts{ margin-top:8px; }