/* Sport-Dashboard: Bildschirmgestaltung. Druck und Monitor bleiben eigenständig. */
@media screen {
  :root {
    --ink: #20272e;
    --ink-2: #14212a;
    --ink-3: #586772;
    --concrete: #f2f4f6;
    --line: #d5dde3;
    --line-2: #e1e5e8;
    --signal: #ed641f;
    --signal-ink: #a84017;
    --muted: #64727d;
    --radius: 12px;
    --wrap: 1240px;
  }
  .kopf { background: #14212a; padding: 25px 32px; }
  .kopf__innen { padding: 0 24px; }
  .kopf .marke__name { font-size: 25px; }
  .kopf .marke__zusatz, .kopf__konto { color: #b4c0ca; }
  .kopf__konto { font-family: var(--font-ui); letter-spacing: 0; font-size: 12px; overflow-wrap: anywhere; }
  .kopf__konto a { text-transform: none; letter-spacing: 0; }
  .inhalt { padding: 36px 56px 60px; }
  .dashboard-hero { position: relative; display: flex; align-items: center; overflow: hidden; min-height: 245px; margin-bottom: 32px; padding: 36px; border-radius: 20px; background: #e5eaf0; }
  .dashboard-hero__text { position: relative; z-index: 1; max-width: 60%; }
  .dashboard-hero .eyebrow { color: var(--signal-ink); font-weight: 700; }
  .dashboard-hero h1 { font-size: clamp(32px,4vw,46px); line-height: 1.07; letter-spacing: -.045em; margin: 14px 0; }
  .dashboard-hero p { font-size: 14px; color: #53606c; margin-bottom: 0; max-width: 370px; }
  .dashboard-hero__bild { position: absolute; inset: 0 0 0 auto; width: 43%; background: var(--stadionmotiv, url('images/stadion.jpg')) center 75% / cover; }
  .dashboard-hero__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,#e5eaf0,transparent 50%); }
  .dashboard-hero__bild--spiele { background: linear-gradient(135deg, #e5eaf0, #ccd9e1); }
  .dashboard-hero__motiv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 75%; opacity: 0; transition: opacity 3000ms ease-in-out; }
  .dashboard-hero__motiv.ist-aktiv { opacity: 1; }
  .dashboard-bereiche { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(290px,1fr); gap: 30px; align-items: start; }
  .dashboard-bereiche > .bereich { min-width: 0; order: 1; }
  .dashboard-bereiche > .bereich--spiele { order: 0; }
  .dashboard-bereiche > .leer { grid-column: 1 / -1; }
  .bereich { margin-bottom: 12px; }
  .bereich__titel { border: 0; padding: 0; margin-bottom: 20px; font-weight: 700; font-size: 22px; }
  .eyebrow { font-family: var(--font-ui); font-size: 10px; font-weight: 650; }
  .gruppe > .eyebrow { border: 0; margin-bottom: 12px; padding: 0; }
  .gruppe { margin-bottom: 26px; }
  .dispo-karte { border: 1px solid var(--line-2); border-radius: 14px; min-height: 116px; }
  .dispo-karte:hover { transform: none; border-color: #9cabb5; box-shadow: 0 5px 18px #14212a0a; }
  .dispo-karte--aktiv { border-left-color: var(--line-2); }
  .stub { flex-basis: 70px; padding: 14px 8px; background: #f8fafb; border-right: 1px solid #e8edf0; font-family: var(--font-ui); }
  .dispo-karte--aktiv .stub { background: #fff4ec; color: var(--signal-ink); border-right-color: #f1e6de; }
  .dispo-karte--aktiv .stub__tag, .dispo-karte--aktiv .stub__zeit { color: var(--signal-ink); }
  .stub__datum { font-size: 18px; }
  .karte__text { padding: 18px 16px; }
  .karte__titel { font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
  .karte__zeile { font-size: 12px; margin-top: 7px; }
  .karte__pfeil { color: var(--signal-ink); padding-right: 14px; }
  .marker, .marker--kommend { border: 0; background: #fff0e6; color: var(--signal-ink); font-family: var(--font-ui); font-size: 10px; letter-spacing: 0; text-transform: none; font-weight: 700; padding: 4px 8px; border-radius: 5px; margin-bottom: 9px; }
  .eintrag { margin-bottom: 14px; }
  .eintrag__zeile--bild { gap: 0; background: white; border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; }
  .eintrag__zeile--bild > .dispo-karte { border: 0; border-radius: 0; min-height: 164px; }
  .eintrag__zeile--bild .stub { display: none; }
  .eintrag__zeile--bild .karte__text { padding: 20px; }
  .eintrag__zeile--bild .karte__titel { font-size: 18px; letter-spacing: -.025em; }
  .eintrag__zeile--bild .stadion { order: -1; flex-basis: 145px; border: 0; border-radius: 0; }
  .bereich--spiele .dispo-karte { transition: background-color 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
  .bereich--spiele .dispo-karte:is(:hover, :focus-visible) { background: #fff1e6; border-color: var(--signal); box-shadow: inset 4px 0 0 var(--signal); }
  .bereich--spiele .dispo-karte:is(:hover, :focus-visible) .karte__titel { color: var(--signal-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .bereich--spiele .eintrag__zeile--bild { transition: border-color 180ms ease, box-shadow 180ms ease; }
  .bereich--spiele .eintrag__zeile--bild:has(.dispo-karte:is(:hover, :focus-visible)) { border-color: var(--signal); box-shadow: 0 6px 20px #a8401720; }
  .stadion:hover { transform: none; }
  .stadion:focus-visible { outline-offset: -4px; }
  .stadion__bild { background-size: auto 150%; background-position: center 73%; }
  .stadion__bild--ganz { background-size: cover; background-position: center; }
  .stadion__name { left: 8px; right: 8px; bottom: 8px; padding: 5px; font-family: var(--font-ui); text-transform: none; font-size: 10px; border-radius: 5px; background: #14212ae8; }
  .stadion--platz { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(125deg,transparent 0 28px,#ffffff0d 29px 30px),linear-gradient(135deg,#1f4654,#0d242d); }
  .stadion__ersatz { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: #c4d7df; }
  .original { margin-left: 12px; padding-top: 9px; font-family: var(--font-ui); color: var(--ink-3); }
  .tag-karte { padding: 14px 16px; border-style: solid; border-radius: 10px; color: #42545f; }
  .tag-karte__text { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0; }
  details.archiv > summary { font-family: var(--font-ui); text-transform: none; letter-spacing: 0; font-size: 13px; padding: 12px 0; }
  .leer { border-style: solid; font-size: 14px; }
  .login { background: #f2f4f6; min-height: 100%; height: auto; padding: 40px 24px; }
  .login__karte { position: relative; max-width: 900px; min-height: 540px; padding: 42px 42px 36px; border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 65px #14212a0c; }
  .login__karte > * { position: relative; margin-left: 50%; }
  .login__karte::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 46%; background: var(--stadionmotiv, url('images/stadion.jpg')) center 73% / auto 115%; }
  .login__intro { margin-top: 28px; }
  .login__intro h2 { font-size: 22px; letter-spacing: -.03em; margin: 0; }
  .login__intro p { font-size: 13px; color: var(--ink-3); margin: 8px 0 0; }
  .feld label { font-family: var(--font-ui); font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 600; }
  .feld input { background: #f8fafb; border-radius: 8px; }
  .knopf { background: #192d38; font-family: var(--font-ui); font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 650; border-radius: 8px; }
  .login__fuss { line-height: 1.6; }
  body:not(.monitor) .leiste { background: #14212a; padding: 14px 20px; gap: 12px; flex-wrap: wrap; }
  .leiste__knopf { font-family: var(--font-ui); letter-spacing: 0; text-transform: none; font-size: 12px; border-radius: 8px; padding: 9px 12px; }
  .leiste__datum { color: #b4c0ca; }
  body:not(.monitor) .blatt__kopf { background: #192d38; padding: 15px 18px; }
  body:not(.monitor) .blatt__einzeln { color: #bccad3; }
  body:not(.monitor) .blatt__zeit, body:not(.monitor) .blatt__zaehler { color: #ffbb8c; }
  body:not(.monitor) .blatt { scroll-margin-top: 120px; }
  .tagnav__zeit { color: var(--signal-ink); }
  .tagnav__liste a { padding: 10px 14px; }
}
@media screen and (max-width: 960px) {
  .dashboard-bereiche { grid-template-columns: 1fr; }
  .inhalt { padding: 28px 24px 48px; }
  .kopf__innen { padding: 0; }
  .login__karte { max-width: 780px; padding-left: 28px; padding-right: 28px; }
  .login__karte > * { margin-left: 46%; }
  .login__karte::before { width: 42%; }
}
@media screen and (max-width: 560px) {
  .kopf { padding: 20px 18px; }
  .kopf__konto { max-width: 110px; }
  .kopf .marke__zusatz { font-size: 8px; letter-spacing: .1em; }
  .inhalt { padding: 22px 16px 44px; }
  .dashboard-hero { min-height: 240px; padding: 26px 22px; }
  .dashboard-hero__text { max-width: 100%; }
  .dashboard-hero__bild { width: 100%; opacity: .14; }
  .dashboard-hero__bild::after { display: none; }
  .eintrag__zeile--bild .stadion { flex-basis: 88px; }
  .eintrag__zeile--bild .karte__text { padding: 16px 13px; }
  .eintrag__zeile--bild .karte__titel { font-size: 16px; }
  .stadion__ersatz { font-size: 8px; letter-spacing: 1px; }
  .stadion__name { font-size: 8px; left: 3px; right: 3px; }
  .login { padding: 20px 16px; }
  .login__karte { padding: 170px 24px 24px; min-height: 0; }
  .login__karte > * { margin-left: 0; }
  .login__karte::before { width: 100%; height: 140px; background-size: cover; background-position: center 64%; }
  body:not(.monitor) .leiste { gap: 8px; padding: 10px 12px; }
  .leiste__datum { flex-basis: 100%; order: 5; white-space: normal; font-size: 10px; }
}
@media print {
  .dashboard-hero { display: none; }
}