/* SeeTor Concierge — Statusseite. Farben und Schriften aus dem Brand Design Package. */
:root {
  --midnight: #0B1728; --navy: #152742; --see: #1A4F7A; --horizon: #4A8DB5; --mist: #A8C8DC; --foam: #E8F4F9;
  --gold: #C8A96E; --gold-light: #E8D5A8; --gold-dark: #A88B52;
  --warm: #F7F3EE; --cream: #F0EDE8; --sand-300: #E2DBD1; --sand-400: #C9BFB1; --steel: #8A9BB0;
  --zu: #9B3B2E; --zu-bg: #F8E9E5; --abw: #8A6A2B; --abw-bg: #F6EEDC;

  --bg: var(--warm); --fg: var(--midnight); --fg-2: #4A5668; --fg-3: var(--steel);
  --karte: #FFFFFF; --linie: var(--sand-300); --kopf-bg: var(--midnight); --kopf-fg: var(--warm);
  --heute-bg: #FFFFFF; --akzent: var(--gold);
  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1B2E; --fg: var(--warm); --fg-2: #C9D3DF; --fg-3: #8A9BB0; --karte: #152742; --linie: #24395A;
    --heute-bg: #152742; --zu: #F2B8AE; --zu-bg: #3A1F1B; --abw: #E8D5A8; --abw-bg: #3A2F18;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1B2E; --fg: var(--warm); --fg-2: #C9D3DF; --fg-3: #8A9BB0; --karte: #152742; --linie: #24395A;
  --heute-bg: #152742; --zu: #F2B8AE; --zu-bg: #3A1F1B; --abw: #E8D5A8; --abw-bg: #3A2F18;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-weight: 300; line-height: 1.45; font-size: 17px; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── Kopf ─────────────────────────────────────────────────────────────── */
.kopf { background: var(--kopf-bg); color: var(--kopf-fg); padding: 22px 16px 26px; }
.kopf__innen { max-width: 640px; margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.marke { font-family: var(--display); font-weight: 300; font-size: 34px; letter-spacing: .04em; line-height: 1; }
.marke b { font-weight: 300; color: var(--gold); }
.marke__concierge { font-weight: 300; color: var(--warm); white-space: nowrap; }
.marke { text-wrap: balance; }
.kopf__titel { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(247,243,238,.7); text-align: right; }
.kopf__rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.sprache { font: inherit; font-size: 12px; letter-spacing: .14em; padding: 4px 10px; border: 1px solid rgba(200,169,110,.6); color: var(--gold); background: transparent; cursor: pointer; min-height: 32px; }
.sprache:hover { background: rgba(200,169,110,.12); }

/* ── Inhalt ────────────────────────────────────────────────────────────── */
.inhalt { max-width: 640px; margin: 0 auto; padding: 20px 16px 48px; display: grid; gap: 22px; }
.abschnitt__titel { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: .02em; margin-bottom: 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.abschnitt__titel small { font-family: var(--sans); font-size: 13px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.karte { background: var(--karte); border: 1px solid var(--linie); }

/* Heute */
.heute { background: var(--heute-bg); border: 1px solid var(--linie); border-top: 4px solid var(--akzent); padding: 20px 20px 22px; }
.heute--zu { border-top-color: var(--zu); }
.heute__datum { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.heute__lage { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.1; margin-top: 8px; }
.heute__lage--zu { color: var(--zu); }
.heute__lage--unbekannt { color: var(--fg-2); }
.heute__zeit { font-family: var(--display); font-weight: 600; font-size: 44px; line-height: 1.05; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.heute__grund { margin-top: 10px; font-size: 16px; color: var(--fg-2); }
.heute--abweichung .heute__grund { color: var(--abw); font-weight: 400; }

/* Tagesliste */
.tag { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; padding: 11px 16px; border-top: 1px solid var(--linie); }
.tag:first-child { border-top: 0; }
.tag__kopf { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.tag__name { font-weight: 400; white-space: nowrap; }
.tag__kopf { flex-wrap: wrap; }
.tag__datum { font-size: 13px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.tag__marke { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.tag--gestern .tag__marke { color: var(--fg-3); }
.tag__zeit { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 400; }
.tag--zu .tag__zeit { color: var(--zu); }
.tag__grund { grid-column: 1 / -1; font-size: 14px; color: var(--abw); }
.tag--abweichung { background: var(--abw-bg); }
.tag--abweichung.tag--zu { background: var(--zu-bg); }
.tag--abweichung.tag--zu .tag__grund { color: var(--zu); }
.tag--heute .tag__name { font-weight: 600; }
.tag--heute { box-shadow: inset 3px 0 0 var(--gold); }
.tag--gestern { opacity: .55; }
.leer-hinweis { padding: 12px 16px; font-size: 15px; color: var(--fg-2); margin: 0; }
.abw--laeuft .abw__zeitraum::after { content: ' · läuft'; color: var(--fg-3); font-weight: 300; }

/* Abweichungen, regulär, Kontakt */
.abw { display: grid; gap: 2px; padding: 12px 16px; border-top: 1px solid var(--linie); }
.abw:first-child { border-top: 0; }
.abw__zeitraum { font-weight: 500; }
.abw__art { color: var(--abw); }
.abw__grund { font-size: 14px; color: var(--fg-2); }
.reg { display: flex; justify-content: space-between; gap: 12px; padding: 9px 16px; border-top: 1px solid var(--linie); font-variant-numeric: tabular-nums; }
.reg:first-child { border-top: 0; }
.reg__tage { color: var(--fg-2); }
.kontakt { padding: 14px 16px; display: grid; gap: 6px; }
.kontakt a { text-decoration: none; font-weight: 400; }
.kontakt a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.kontakt__hinweis { font-size: 14px; color: var(--fg-2); }

/* Fuß */
.fuss { max-width: 640px; margin: 0 auto; padding: 0 16px 40px; font-size: 13px; color: var(--fg-3); display: grid; gap: 4px; }
.fuss__stand { font-variant-numeric: tabular-nums; }
.ist-veraltet .fuss__stand { color: var(--zu); font-weight: 400; }
.veraltet-hinweis { display: none; }
.ist-veraltet .veraltet-hinweis { display: block; background: var(--zu-bg); color: var(--zu); padding: 10px 16px; font-size: 14px; }
.fehler-hinweis { display: none; background: var(--zu-bg); color: var(--zu); padding: 12px 16px; }
.fehler .fehler-hinweis { display: block; }
.fehler .nur-geladen { display: none; }
html:not(.geladen) .nur-geladen { visibility: hidden; }

/* ── Board (Yodeck, 16:9) ──────────────────────────────────────────────── */
.board { background: var(--midnight); color: var(--warm); height: 100vh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; font-size: 2.1vh; }
.board .kopf { background: transparent; padding: 3.2vh 4.5vw 1.5vh; border-bottom: 1px solid rgba(200,169,110,.35); }
.board .kopf__innen { max-width: none; }
.board .marke { font-size: 6vh; }
.board .kopf__titel { font-size: 2vh; }
.board__raster { display: grid; grid-template-columns: 4fr 8fr; gap: 0; min-height: 0; }
.board__heute { padding: 4vh 4.5vw; border-right: 1px solid rgba(200,169,110,.35); display: grid; grid-template-rows: 1fr auto; align-items: center; min-height: 0; }
.board__qr { display: flex; align-items: center; gap: 2vw; padding-top: 3vh; border-top: 1px solid rgba(200,169,110,.25); font-size: 2.2vh; color: var(--mist); line-height: 1.5; }
.board__qr img { width: 16vh; height: 16vh; background: #fff; padding: .8vh; flex-shrink: 0; }
.board__qr-titel { font-family: var(--display); font-size: 3.2vh; color: var(--warm); }
.board__qr-sub { font-size: 1.8vh; color: var(--steel); }
.board .heute { background: transparent; border: 0; padding: 0; }
.board .heute__datum { font-size: 2.2vh; color: var(--mist); }
.board .heute__lage { font-size: 6.5vh; margin-top: 2vh; }
.board .heute__lage--zu { color: #F2B8AE; }
.board .heute__zeit { font-size: 12vh; color: var(--gold); margin-top: 1vh; }
.board .heute__grund { font-size: 3vh; color: var(--mist); margin-top: 2vh; }
.board .heute--abweichung .heute__grund { color: var(--gold-light); }
.board__raster { overflow: hidden; }
.board__wochen { padding: 3vh 4.5vw; display: grid; grid-template-rows: auto auto; align-content: start; gap: 3vh; min-height: 0; overflow: hidden; }
.board__woche { min-width: 0; }
.board .abschnitt__titel { font-size: 3vh; color: var(--gold-light); margin-bottom: .5vh; }
.board .abschnitt__titel small { font-size: 2vh; color: var(--mist); }
.board .karte { background: transparent; border: 0; }
.board .tag { padding: 1.5vh 1vw; border-top-color: rgba(168,200,220,.18); grid-template-columns: minmax(0, 1fr) auto; font-size: 2.4vh; }
.board .tag__name { white-space: nowrap; }
.board .tag__datum { color: var(--mist); font-size: 2.1vh; }
.board .tag__marke { font-size: 1.7vh; }
.board .tag--zu .tag__zeit { color: #F2B8AE; }
.board .tag--abweichung { background: rgba(200,169,110,.14); }
.board .tag--abweichung.tag--zu { background: rgba(155,59,46,.28); }
.board .tag__grund { color: var(--gold-light); font-size: 2.1vh; }
.board .tag--abweichung.tag--zu .tag__grund { color: #F2B8AE; }
.board .tag--heute { box-shadow: inset .4vw 0 0 var(--gold); }
.board .abw { padding: 1.5vh 1vw; border-top-color: rgba(168,200,220,.18); font-size: 2.4vh; }
.board .abw__art { color: var(--gold-light); }
.board .abw__grund { color: var(--mist); font-size: 2vh; }
.board .leer-hinweis { color: var(--mist); font-size: 2.4vh; padding: 1.5vh 1vw; }
.board__fuss { display: flex; justify-content: space-between; align-items: center; gap: 2vw; padding: 1.8vh 4.5vw 2.6vh; border-top: 1px solid rgba(200,169,110,.35); font-size: 2.1vh; color: var(--mist); }
.board__fuss .kontakt { padding: 0; display: flex; gap: 2.5vw; }
.board__fuss .kontakt a { color: var(--warm); }
.board__uhr { font-family: var(--display); font-size: 4vh; color: var(--gold); font-variant-numeric: tabular-nums; }
.board .ist-veraltet .fuss__stand, .ist-veraltet .board__fuss .fuss__stand { color: #F2B8AE; }
.board .fehler-hinweis { background: rgba(155,59,46,.4); color: #F2B8AE; font-size: 3vh; margin: 2vh 4.5vw; }

/* ── Woche (TRMNL 800×480, 1-bit) ─────────────────────────────────────── */
.woche { background: #FFFFFF; color: #000000; width: 800px; height: 480px; overflow: hidden; margin: 0; font-family: var(--sans); font-weight: 400; display: grid; grid-template-rows: auto 1fr auto; }
.woche .kopf { background: #000; color: #fff; padding: 10px 22px 12px; }
.woche .kopf__innen { max-width: none; }
.woche .marke { font-size: 30px; color: #fff; }
.woche .marke b { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.woche .marke__concierge, .woche .kopf__titel { color: #fff; }
.woche__raster { display: grid; grid-template-columns: 300px 1fr; min-height: 0; }
.woche__heute { padding: 16px 22px; border-right: 3px solid #000; display: flex; flex-direction: column; justify-content: center; }
.woche .heute { background: transparent; border: 0; padding: 0; }
.woche .heute__datum { font-size: 14px; color: #000; letter-spacing: .1em; }
.woche .heute__lage { font-size: 28px; font-weight: 600; color: #000; font-family: var(--sans); }
.woche .heute__zeit { font-size: 46px; font-weight: 700; font-family: var(--sans); letter-spacing: -.01em; }
.woche .heute__grund { font-size: 17px; color: #000; font-weight: 600; }
.woche .heute--zu .heute__lage { background: #000; color: #fff; display: inline-block; padding: 2px 8px; }
.woche__liste { padding: 10px 18px; }
.woche .abschnitt__titel { font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.woche .abschnitt__titel small { color: #000; font-weight: 400; }
.woche .karte { border: 0; background: transparent; }
.woche .tag { padding: 5px 8px; border-top: 1px solid #000; grid-template-columns: 1fr auto; font-size: 19px; }
.woche .tag__datum { color: #000; font-size: 15px; }
.woche .tag__marke { color: #000; font-size: 12px; font-weight: 700; }
.woche .tag--abweichung .tag__marke { color: #fff; }
.woche .tag__zeit { font-weight: 600; }
.woche .tag--zu .tag__zeit { color: #000; font-weight: 400; font-style: italic; }
.woche .tag__grund { font-size: 14px; color: #000; font-weight: 600; }
.woche .tag--abweichung { background: #000; color: #fff; }
.woche .tag--abweichung .tag__zeit, .woche .tag--abweichung .tag__datum, .woche .tag--abweichung .tag__grund, .woche .tag--abweichung.tag--zu .tag__zeit { color: #fff; }
.woche .tag--heute { box-shadow: inset 6px 0 0 #000; }
.woche .tag--gestern { opacity: 1; }
.woche .tag--gestern .tag__name, .woche .tag--gestern .tag__zeit { font-weight: 400; }
.woche .tag--heute.tag--abweichung { box-shadow: inset 6px 0 0 #fff, inset 8px 0 0 #000; }
.woche__fuss { display: flex; justify-content: space-between; gap: 16px; padding: 6px 22px 10px; border-top: 3px solid #000; font-size: 14px; }
.woche__fuss .kontakt { padding: 0; display: flex; gap: 18px; }
.woche__fuss .kontakt a { text-decoration: none; }
.woche .fehler-hinweis { background: #000; color: #fff; font-size: 22px; margin: 12px 22px; }