/* =========================================================================
   CROWN MX — Desktop

   Gilt erst ab 1080 px. Darunter ist diese Datei komplett still: das Handy
   und alles bis zum hochkanten Tablet behält die App, die es kennt — inklusive
   des Geräterahmens, in dem sie am großen Bildschirm bisher stand.

   Farben, Abstände und Radien kommen aus tokens.css. Hier steht nichts, was
   dort nicht schon definiert wäre.
   ========================================================================= */

@media (min-width: 1080px) {

  /* Der Geräterahmen aus app.css hat hier ausgedient. */
  body { display: block; padding: 0; }
  .app {
    /* Overlays und Sheet liegen absolut — sie sollen sich am Fenster
       ausrichten, nicht am Dokument. */
    position: relative;
    width: 100%;
    max-width: none;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }

  /* ---------- Grundgerüst ------------------------------------------- */

  .dk {
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    height: 100dvh;
    background: var(--bg);
  }

  /* ---------- Seitenleiste ------------------------------------------ */

  .dkside {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 22px 14px 14px;
    border-right: 1px solid var(--border-1);
    background: var(--ink-800);
  }

  .dkside__brand {
    display: flex; align-items: center; gap: 10px;
    padding: 0 8px 22px;
  }
  .dkside__brand img { height: 20px; width: auto; display: block; }
  .dkside__brand span {
    font: 700 14px/1 var(--font-display);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--fg-1);
  }

  .dknav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }

  .dknav__item {
    display: flex; align-items: center; gap: 11px;
    width: 100%;
    padding: 10px 11px;
    border-radius: var(--r-3);
    font: 500 13.5px/1 var(--font-sans);
    letter-spacing: 0.01em;
    color: var(--fg-3);
    text-align: left;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
  }
  .dknav__item svg { flex: none; opacity: 0.85; }
  .dknav__item span { flex: 1; }
  .dknav__item:hover { background: var(--bg-elev-2); color: var(--fg-1); }
  .dknav__item[aria-current="page"] {
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: var(--ring-gold);
  }
  .dknav__badge {
    flex: none;
    min-width: 19px; padding: 2px 6px;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--crown-black);
    font: 700 11px/1.35 var(--font-mono);
    text-align: center;
  }

  .dkside__foot { margin-top: auto; padding-top: 14px; }

  .dkuser {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 9px 10px;
    border-radius: var(--r-3);
    text-align: left;
    transition: background var(--dur-fast) var(--ease-out);
  }
  .dkuser:hover { background: var(--bg-elev-2); }
  .dkuser__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .dkuser__name {
    font: 600 13px/1.2 var(--font-sans); color: var(--fg-1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .dkuser__role {
    font: 400 11px/1.2 var(--font-sans); color: var(--fg-4);
    letter-spacing: 0.03em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .dkoffline {
    margin-top: 10px; padding: 8px 10px;
    border-radius: var(--r-3);
    background: rgba(242, 169, 0, 0.12);
    color: var(--signal-amber);
    font: 500 11px/1.4 var(--font-sans);
  }

  /* ---------- Kopfzeile und Inhalt ---------------------------------- */

  .dkmain { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

  .dktop {
    flex: none;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 20px 30px 17px;
    border-bottom: 1px solid var(--border-1);
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(16px);
  }
  .dktop__title {
    font: 700 25px/1.05 var(--font-display);
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
    color: var(--fg-1);
  }
  .dktop__meta {
    margin-top: 5px;
    font: 400 12px/1.3 var(--font-sans);
    letter-spacing: 0.03em;
    color: var(--fg-4);
  }
  .dktop__right { display: flex; align-items: center; gap: 16px; }

  .dkseg {
    display: flex; gap: 2px;
    padding: 3px;
    border-radius: var(--r-pill);
    background: var(--bg-elev-1);
    box-shadow: var(--ring-1);
  }
  .dkseg__btn {
    padding: 7px 15px;
    border-radius: var(--r-pill);
    font: 600 12.5px/1 var(--font-sans);
    letter-spacing: 0.02em;
    color: var(--fg-3);
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
  }
  .dkseg__btn:hover { color: var(--fg-1); }
  .dkseg__btn[aria-current="true"] {
    background: var(--accent);
    color: var(--crown-black);
  }

  .dkbody { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 30px 60px; }

  /* Die Handy-Bildschirme bekommen hier nur mehr Luft und eine Breite,
     bei der Text nicht quer über den Monitor läuft. */
  .dkscreen { max-width: 900px; }
  .dkscreen > .wrap,
  .dkscreen > * { padding-left: 0; padding-right: 0; }

  /* ---------- Karten ------------------------------------------------- */

  .dkgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
    max-width: 1560px;
  }
  .dkcard {
    padding: 20px 22px 22px;
    border-radius: var(--r-4);
    background: var(--bg-elev-1);
    box-shadow: var(--ring-1);
  }
  .dkcard--wide { grid-column: 1 / -1; }
  .dkcard__label {
    font: 600 10.5px/1 var(--font-sans);
    letter-spacing: var(--tracking-mega);
    text-transform: uppercase;
    color: var(--fg-4);
  }
  .dkcard__head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-bottom: 14px;
  }

  .dkempty {
    padding: 22px 4px;
    font: 400 13.5px/1.55 var(--font-sans);
    color: var(--fg-4);
  }
  .dkmuted { color: var(--fg-4); font: 400 12.5px/1.5 var(--font-sans); }
  .dkfoot {
    margin-top: 14px;
    font: 400 12px/1.5 var(--font-sans);
    color: var(--fg-4);
  }

  .dkwarn {
    border-left: 3px solid var(--signal-amber);
    background: rgba(242, 169, 0, 0.07);
  }
  .dkwarn .dkcard__label { color: var(--signal-amber); }
  .dkwarn code {
    padding: 1px 5px;
    border-radius: var(--r-2);
    background: var(--bg-elev-3);
    font: 500 12px/1.4 var(--font-mono);
    color: var(--fg-2);
  }

  .dkbtn { padding: 8px 14px; font-size: 12.5px; white-space: nowrap; }
  .dkbtn svg { margin-right: 5px; vertical-align: -1px; }

  /* ---------- Nächster Termin ---------------------------------------- */

  .dknext { border-left: 3px solid var(--type, var(--accent)); }
  .dknext__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-1);
  }
  .dknext__title {
    margin-top: 7px;
    font: 700 30px/1.05 var(--font-display);
    letter-spacing: var(--tracking-tight);
    color: var(--fg-1);
  }
  .dknext__meta {
    margin-top: 7px;
    font: 400 13px/1.4 var(--font-sans);
    color: var(--fg-3);
  }
  .dknext__count { flex: none; text-align: right; }
  .dknext__num {
    display: block;
    font: 700 46px/1 var(--font-display);
    letter-spacing: var(--tracking-tight);
    color: var(--accent);
  }
  .dknext__unit {
    font: 600 10.5px/1 var(--font-sans);
    letter-spacing: var(--tracking-mega);
    text-transform: uppercase;
    color: var(--fg-4);
  }

  .dknext__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    padding-top: 20px;
  }
  .dknext__col { min-width: 0; }
  .dknext__big {
    margin: 9px 0 11px;
    font: 700 27px/1 var(--font-display);
    color: var(--fg-1);
  }
  .dknext__big span { font: 400 14px/1 var(--font-sans); color: var(--fg-4); }

  /* ---------- Balken und Legende -------------------------------------- */

  .dkbar {
    display: flex; overflow: hidden;
    height: 7px;
    border-radius: var(--r-pill);
    background: var(--bg-elev-3);
  }
  .dkbar span { display: block; height: 100%; }
  .dkbar__yes  { background: var(--signal-green); }
  .dkbar__no   { background: var(--signal-red); }
  .dkbar__open { background: var(--ink-400); }
  .dkbar--empty { opacity: 0.4; }

  .dklegend {
    display: flex; flex-wrap: wrap; gap: 6px 16px;
    margin-top: 11px;
    font: 400 11.5px/1.3 var(--font-sans);
    color: var(--fg-4);
  }
  .dklegend span { display: flex; align-items: center; gap: 6px; }
  .dklegend i {
    width: 8px; height: 8px; flex: none;
    border-radius: 2px;
    background: var(--ink-400);
  }
  .dklegend i.is-yes { background: var(--signal-green); }
  .dklegend i.is-no { background: var(--signal-red); }
  .dklegend i.is-open { background: var(--ink-400); }
  .dklegend i.is-clash { background: var(--signal-red); box-shadow: 0 0 0 2px rgba(225,29,42,0.3); }
  .dklegend--types { margin-top: 16px; }

  /* ---------- Kennzahl-Kacheln ---------------------------------------- */

  .dktiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 12px;
    margin-top: 14px;
  }
  .dktile {
    padding: 15px 16px 16px;
    border-radius: var(--r-3);
    background: var(--bg-elev-2);
    box-shadow: var(--ring-1);
  }
  .dktile__label {
    font: 600 10px/1 var(--font-sans);
    letter-spacing: var(--tracking-mega);
    text-transform: uppercase;
    color: var(--fg-4);
  }
  .dktile__value {
    margin-top: 10px;
    font: 700 27px/1 var(--font-display);
    color: var(--fg-1);
  }
  .dktile__sub {
    margin-top: 6px;
    font: 400 11.5px/1.35 var(--font-sans);
    color: var(--fg-4);
  }
  .dktile.is-warn .dktile__value { color: var(--signal-amber); }
  .dktile.is-good .dktile__value { color: var(--fg-1); }

  /* ---------- Tabellen ------------------------------------------------- */

  .dktable-wrap { overflow-x: auto; margin-top: 14px; }
  .dktable {
    width: 100%;
    border-collapse: collapse;
    font: 400 13px/1.4 var(--font-sans);
  }
  .dktable th {
    padding: 9px 11px;
    border-bottom: 1px solid var(--border-2);
    font: 600 10px/1 var(--font-sans);
    letter-spacing: var(--tracking-mega);
    text-transform: uppercase;
    color: var(--fg-4);
    text-align: left;
    white-space: nowrap;
  }
  .dktable th.num, .dktable td.num { text-align: right; }
  .dktable td {
    padding: 10px 11px;
    border-bottom: 1px solid var(--border-1);
    color: var(--fg-2);
    white-space: nowrap;
  }
  .dktable tbody tr:hover td { background: var(--bg-elev-2); }
  .dktable tbody tr:last-child td { border-bottom: 0; }
  .dktable--tight th, .dktable--tight td { padding: 6px 8px; font-size: 12px; }
  .dktable td.has-ev { color: var(--accent); font-weight: 600; }
  .dktable .is-warn { color: var(--signal-amber); font-weight: 600; }
  .dkrow--muted td { opacity: 0.62; }
  .dkrow--wait td { background: rgba(205, 164, 74, 0.06); }

  .dktable th.sortable { cursor: pointer; user-select: none; }
  .dktable th.sortable:hover { color: var(--fg-2); }
  .dktable th.is-on { color: var(--accent); }
  .dkcaret { margin-left: 4px; font-size: 8px; }

  .dkname { max-width: 260px; }
  .dkwait {
    margin-left: 6px;
    font: 500 10px/1 var(--font-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    font-style: normal;
  }

  .dklink { color: var(--fg-2); text-align: left; }
  .dklink:hover { color: var(--accent); }
  .dklink--strong {
    display: flex; align-items: center; gap: 9px;
    font-weight: 600; color: var(--fg-1);
  }

  .dkquote { font-variant-numeric: tabular-nums; }
  .dkquote.is-good { color: var(--signal-green); }
  .dkquote.is-warn { color: var(--signal-amber); }

  /* ---------- Werkzeugleiste ------------------------------------------- */

  .dkbarrow {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-bottom: 4px;
  }
  .dksearch, .dksel {
    height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--r-3);
    background: var(--bg-elev-2);
    box-shadow: var(--ring-1);
    font: 400 13px/1 var(--font-sans);
    color: var(--fg-1);
  }
  .dksearch { flex: 1; min-width: 220px; }
  .dksearch::placeholder { color: var(--fg-4); }
  .dksearch:focus, .dksel:focus { outline: 0; box-shadow: var(--ring-gold); }
  .dksel { cursor: pointer; }
  .dksel option { background: var(--ink-600); color: var(--fg-1); }

  .dkcount {
    font: 400 12px/1 var(--font-sans);
    letter-spacing: 0.04em;
    color: var(--fg-4);
    white-space: nowrap;
  }
  .dkyear {
    font: 700 20px/1 var(--font-display);
    color: var(--fg-1);
    min-width: 62px; text-align: center;
  }

  /* ---------- Gesichter ------------------------------------------------- */

  .dkfaces { display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0 14px; }
  .dkface {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: none;
    border-radius: var(--r-pill);
    background: var(--bg-elev-3) center/cover no-repeat;
    box-shadow: var(--ring-2);
    font: 600 10.5px/1 var(--font-sans);
    letter-spacing: 0.04em;
    color: var(--fg-2);
  }
  .dkface--sm { width: 24px; height: 24px; font-size: 9.5px; }
  .dkface--more { background: transparent; color: var(--fg-4); }
  button.dkface { transition: box-shadow var(--dur-fast) var(--ease-out); }
  button.dkface:hover { box-shadow: var(--ring-gold); }

  .dkreg {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    box-shadow: var(--ring-gold);
    font: 600 10.5px/1.3 var(--font-sans);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .dkreg--none {
    background: transparent;
    box-shadow: var(--ring-1);
    color: var(--fg-4);
  }

  /* ---------- Listen ---------------------------------------------------- */

  .dklist { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
  .dkitem {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 11px 12px;
    border-radius: var(--r-3);
    text-align: left;
    transition: background var(--dur-fast) var(--ease-out);
  }
  .dkitem:hover { background: var(--bg-elev-2); }
  .dkitem--ev { border-left: 3px solid var(--type, var(--accent)); }
  .dkitem__tag {
    flex: none; min-width: 74px;
    font: 600 10px/1 var(--font-sans);
    letter-spacing: var(--tracking-mega);
    text-transform: uppercase;
    color: var(--fg-4);
  }
  .dkitem__tag.is-new { color: var(--accent); }
  .dkitem__text {
    flex: 1; min-width: 0;
    font: 400 13px/1.4 var(--font-sans);
    color: var(--fg-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .dkitem__text strong { color: var(--fg-1); font-weight: 600; }
  .dkitem__num {
    flex: none;
    font: 600 12px/1 var(--font-mono);
    color: var(--fg-3);
  }
  .dkitem__chev { flex: none; color: var(--fg-4); display: flex; }

  /* ---------- Jahresraster ---------------------------------------------- */

  .dkyeargrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
  }
  .dkmonth {
    padding: 12px 12px 13px;
    border-radius: var(--r-3);
    background: var(--bg-elev-2);
    box-shadow: var(--ring-1);
  }
  .dkmonth__name {
    margin-bottom: 9px;
    font: 600 10.5px/1 var(--font-sans);
    letter-spacing: var(--tracking-mega);
    text-transform: uppercase;
    color: var(--fg-3);
  }
  .dkmonth__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
  }
  .dkmonth__wd {
    padding-bottom: 4px;
    font: 600 9px/1 var(--font-sans);
    color: var(--fg-4);
    text-align: center;
  }
  .dkmonth__wd.is-we { color: var(--ink-500); }

  .dkday {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1;
    border-radius: var(--r-2);
    font: 400 10.5px/1 var(--font-mono);
    color: var(--fg-4);
  }
  .dkday--pad { visibility: hidden; }
  .dkday.is-we { color: var(--ink-500); }
  .dkday.is-today { box-shadow: var(--ring-2); color: var(--fg-1); }
  button.dkday {
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .dkday.has-ev {
    background: var(--type, var(--accent));
    color: var(--crown-black);
    font-weight: 700;
  }
  .dkday.is-clash {
    box-shadow: 0 0 0 2px var(--signal-red);
  }
  .dkday.is-sel { box-shadow: 0 0 0 2px var(--crown-white); }
  button.dkday:hover { transform: scale(1.16); }

  /* ---------- Overlays und Sheet ---------------------------------------- */

  /* Die Overlays aus der Handy-App bleiben, bekommen aber die Breite eines
     Dokuments statt die eines Telefons: sie legen sich als Spalte über die
     rechte Seite, der Rest des Dashboards bleibt sichtbar. */
  .overlay {
    left: auto; right: 0;
    width: min(720px, 100vw);
    border-left: 1px solid var(--border-2);
    box-shadow: var(--shadow-3);
  }

  /* Das Bottom-Sheet wird zum Dialog in der Mitte. `.sheet` ist eine
     Flex-Spalte mit `justify-content: flex-end` — hier wird daraus
     mittig, statt mit `position` und `transform` gegen die Animation
     anzukämpfen, die den Panel-Transform ohnehin überschreibt. */
  .sheet { justify-content: center; align-items: center; }
  .sheet__panel {
    width: min(560px, 92vw);
    max-height: min(84dvh, 860px);
    border-radius: var(--r-4);
    padding: 20px 22px 24px;
    box-shadow: var(--shadow-3), var(--ring-2);
  }
  .sheet__grab { display: none; }
  .sheet__actions { padding-bottom: 0; }

  /* ---------- Renntag -------------------------------------------------- */

  .dkgrid--race { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .dkrace__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
    border-left: 3px solid var(--type, var(--accent));
  }
  .dkrace__tools { display: flex; align-items: center; gap: 10px; flex: none; }
  .dkclock {
    font: 600 13px/1 var(--font-mono);
    letter-spacing: 0.06em; color: var(--fg-3);
  }

  /* Die Vorstart-Kachel. Drei Zustände, drei Farben — im Zelt muss man
     das aus fünf Metern erkennen, ohne zu lesen. */
  .dkgate {
    display: flex; flex-direction: column;
    border-left: 3px solid var(--tone, var(--ink-400));
    --tone: var(--ink-400);
  }
  .dkgate.is-ok   { --tone: var(--signal-green); }
  .dkgate.is-soon { --tone: var(--signal-amber); }
  .dkgate.is-now  { --tone: var(--signal-red); }
  .dkgate.is-late { --tone: var(--ink-400); }
  .dkgate__big {
    margin: 12px 0 4px;
    font: 700 clamp(38px, 4.4vw, 62px)/0.94 var(--font-display);
    letter-spacing: var(--tracking-tight);
    color: var(--tone);
    font-variant-numeric: tabular-nums;
  }
  .dkgate.is-now .dkgate__big { animation: crwn-pulse 1.6s ease-in-out infinite; }
  .dkgate__what { margin-top: 6px; }
  .dkgate__what strong {
    display: block;
    font: 700 19px/1.1 var(--font-display);
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase; color: var(--fg-1);
  }
  .dkgate__what span { display: block; margin-top: 4px; font: 400 12.5px/1.4 var(--font-sans); color: var(--fg-4); }
  .dkgate__rule {
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--border-1);
    font: 400 12.5px/1.6 var(--font-sans); color: var(--fg-3);
  }
  .dkgate__rule strong { color: var(--fg-1); font-variant-numeric: tabular-nums; }
  .dkgate__none { margin-top: 12px; font: 400 13px/1.5 var(--font-sans); color: var(--fg-4); }

  /* Zeitplan */
  .dksched { list-style: none; margin-top: 12px; }
  .dksched__row {
    display: grid; grid-template-columns: 62px minmax(0, 1fr) auto;
    align-items: center; gap: 12px;
    padding: 9px 10px;
    border-radius: var(--r-2);
    border-left: 2px solid transparent;
  }
  .dksched__t {
    font: 600 13px/1 var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--fg-3);
  }
  .dksched__l { font: 400 13.5px/1.35 var(--font-sans); color: var(--fg-2); }
  .dksched__tag {
    font: 600 9px/1 var(--font-sans);
    letter-spacing: var(--tracking-mega); text-transform: uppercase; color: var(--fg-4);
  }
  .dksched__row.is-race .dksched__l { color: var(--fg-1); font-weight: 600; }
  .dksched__row.is-past { opacity: 0.4; }
  .dksched__row.is-past .dksched__l { text-decoration: line-through; }
  .dksched__row.is-now {
    background: var(--accent-soft);
    border-left-color: var(--accent);
  }
  .dksched__row.is-now .dksched__t,
  .dksched__row.is-now .dksched__l,
  .dksched__row.is-now .dksched__tag { color: var(--accent); }
  .dksched__row.is-next { border-left-color: var(--border-strong); }

  /* Eingebettete Zeitnahme */
  .dkframe { position: relative; margin-top: 14px; }
  .dkframe iframe {
    width: 100%; height: 460px;
    border: 0; border-radius: var(--r-3);
    background: var(--bg-elev-2);
    box-shadow: var(--ring-1);
  }
  .dkframe__fallback {
    margin-top: 9px;
    font: 400 11.5px/1.5 var(--font-sans); color: var(--fg-4);
  }

  /* Besprechung */
  .dkbrief__map { margin: 14px 0 16px; max-width: 620px; }
  .dkbrief__meta {
    margin: 12px 0 4px;
    font: 600 10px/1 var(--font-sans);
    letter-spacing: var(--tracking-mega); text-transform: uppercase; color: var(--fg-4);
  }
  .dkbrief { list-style: none; }
  .dkbrief__item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border-1);
  }
  .dkbrief__item:last-child { border-bottom: 0; }
  .dkbrief__tick {
    flex: none;
    width: 22px; height: 22px; margin-top: 1px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-2);
    box-shadow: var(--ring-2);
    color: var(--crown-black);
    transition: all var(--dur-fast) var(--ease-out);
  }
  .dkbrief__tick[aria-pressed="true"] { background: var(--accent); box-shadow: none; }
  .dkbrief__text { flex: 1; font: 400 14px/1.45 var(--font-sans); color: var(--fg-1); }
  .dkbrief__note { display: block; margin-top: 3px; font-size: 12px; color: var(--fg-4); }
  .dkbrief__item.is-done .dkbrief__text { color: var(--fg-4); text-decoration: line-through; }

  /* ---------- Sponsoren-Dashboard -------------------------------------- */

  .dktier { border-left: 3px solid var(--tier, var(--accent)); }

  /* Leistungen als Spalten. Die Überschriften stehen hochkant, sonst wird
     die Tabelle bei fünf Leistungen unlesbar breit. */
  .dkperks__h { height: 132px; vertical-align: bottom; padding-bottom: 10px; }
  .dkperks__h span {
    display: block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    max-height: 118px; overflow: hidden;
    text-align: left;
    letter-spacing: 0.1em;
  }
  .dktick {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-2);
    box-shadow: var(--ring-2);
    color: var(--crown-black);
    transition: all var(--dur-fast) var(--ease-out);
  }
  button.dktick:hover { box-shadow: var(--ring-gold); }
  .dktick.is-on { background: var(--signal-green); box-shadow: none; }
  .dktick.is-read { opacity: 0.75; }

  /* ---------- Bühnenmodus ----------------------------------------------
     Für den Fernseher im Zelt. Alles groß, nichts blinkt außer dem, was
     wirklich dringend ist.
     --------------------------------------------------------------------- */

  .dkstage {
    position: fixed; inset: 0; z-index: 300;
    display: flex; flex-direction: column;
    background: var(--crown-black);
    animation: crwn-fade var(--dur-base) var(--ease-out) both;
  }
  .dkstage__bar {
    flex: none;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 22px 34px;
    border-bottom: 1px solid var(--border-1);
  }
  .dkstage__title {
    font: 700 clamp(22px, 2.2vw, 34px)/1 var(--font-display);
    letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--fg-1);
  }
  .dkstage__meta { margin-top: 7px; font: 400 clamp(12px, 1vw, 15px)/1.3 var(--font-sans); color: var(--fg-4); }
  .dkstage__right { display: flex; align-items: center; gap: 14px; }
  .dkstage__clock {
    font: 700 clamp(22px, 2vw, 32px)/1 var(--font-mono);
    font-variant-numeric: tabular-nums; color: var(--fg-2);
  }
  .dkstage__seg {
    padding: 9px 16px;
    border-radius: var(--r-pill);
    box-shadow: var(--ring-2);
    font: 600 12px/1 var(--font-sans);
    letter-spacing: 0.08em; color: var(--fg-3);
  }
  .dkstage__seg[aria-current="true"] { background: var(--accent); color: #000; box-shadow: none; }
  .dkstage__close { color: var(--fg-3); display: flex; padding: 6px; }
  .dkstage__close:hover { color: var(--fg-1); }

  .dkstage__body { flex: 1; min-height: 0; padding: 26px 34px 34px; overflow-y: auto; }
  .dkstage__cols {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 34px; height: 100%;
  }
  .dkstage__cols--sched { grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.3fr); }
  .dkstage__sched { overflow-y: auto; }
  .dkstage__map { display: flex; align-items: flex-start; }
  .dkstage__map .tmap { width: 100%; }

  /* Der Zeitplan auf der Bühne: aus fünf Metern lesbar. */
  .dksched--big .dksched__row {
    grid-template-columns: 110px minmax(0, 1fr) auto;
    padding: 13px 14px;
    gap: 18px;
  }
  .dksched--big .dksched__t { font-size: clamp(18px, 1.7vw, 26px); }
  .dksched--big .dksched__l { font-size: clamp(17px, 1.6vw, 25px); }
  .dksched--big .dksched__tag { font-size: 11px; }

  .dkstage .dkgate { padding: 26px 28px 28px; }
  .dkstage .dkgate__big { font-size: clamp(56px, 7vw, 116px); }
  .dkstage .dkgate__what strong { font-size: clamp(22px, 2.4vw, 38px); }
  .dkstage .dkgate__rule { font-size: clamp(14px, 1.1vw, 18px); }

  .dkstage__list { list-style: none; overflow-y: auto; }
  .dkstage__list li { border-bottom: 1px solid var(--border-1); }
  .dkstage__list button {
    display: flex; align-items: flex-start; gap: 16px; width: 100%; text-align: left;
    padding: 16px 6px;
    font: 400 clamp(17px, 1.6vw, 26px)/1.35 var(--font-sans);
    color: var(--fg-1);
  }
  .dkstage__tick {
    flex: none;
    width: 30px; height: 30px; margin-top: 2px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-2);
    box-shadow: var(--ring-2);
    color: var(--crown-black);
  }
  .dkstage__list li.is-done button { color: var(--fg-4); text-decoration: line-through; }
  .dkstage__list li.is-done .dkstage__tick { background: var(--accent); box-shadow: none; }
}

/* Ganz breite Bildschirme: das Dashboard darf dreispaltig werden, die
   Seitenleiste ein Stück mehr Luft bekommen. */
@media (min-width: 1560px) {
  .dk { grid-template-columns: 268px minmax(0, 1fr); }
  .dkbody { padding: 30px 40px 70px; }
  .dkgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dkyeargrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}