/* mareas Empfangs-/Info-Screen — screen.baukopf.ch
   Ruhiges, hochwertiges Vollbild-Layout in mareas-Blau. Optimiert für 16:9
   1920×1080, skaliert über vh von 1366×768 bis 3840×2160. Keine Navigation,
   kein Scrollbalken (width:100vw / height:100vh / overflow:hidden). Kein externer
   Font, keine externen Assets. Alle Grössen relativ zur Bildschirmhöhe. */

:root {
  --navy:      #123a68;   /* Dunkelblau */
  --navy2:     #1c4e8a;
  --blau:      #2f9be0;   /* mareas-Blau */
  --blau-tief: #1f7ec2;
  --blau-hell: #7fc0ef;
  --text:      #23405f;
  --text-mut:  #6c819a;
  --karte:     #ffffff;
  --karte-rand:#e2ebf4;
  --pille:     #e8f2fb;

  /* Grundgrösse skaliert mit der Bildschirmhöhe; enge untere Schranke, damit
     auch 1366×768 dieselbe Anordnung nur kleiner zeigt (nichts abgeschnitten). */
  font-size: clamp(8px, 1.16vh, 26px);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100vw; height: 100vh; overflow: hidden;
  background: linear-gradient(160deg, #eef4fb 0%, #e2ecf7 55%, #d6e4f3 100%);
}
svg { fill: none; }
/* Icon-Sprite unsichtbar halten (per Klasse statt Inline-Style — CSP-konform). */
.sprite { display: none; }

.buehne {
  width: 100vw; height: 100vh;
  display: grid;
  grid-template-columns: 1.34fr 1fr;
  /* minmax(0, 1fr): die mittlere Zeile darf unter ihre Min-Content-Höhe schrumpfen,
     damit die Fussleiste nie aus dem 100vh-Fenster gedrängt wird. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "kopf   kopf"
    "links  rechts"
    "fuss   fuss";
  gap: 1.1rem 1.3rem;
  padding: 1.1rem 1.5rem;
  animation: rein 0.9s ease both;
}
@keyframes rein { from { opacity: 0; } to { opacity: 1; } }

/* ── Karten allgemein ────────────────────────────────────────────────────── */
.karte {
  background: var(--karte);
  border: 1px solid var(--karte-rand);
  border-radius: 1rem;
  padding: 0.9rem 1.2rem;
  box-shadow: 0 0.5rem 1.4rem rgba(18, 58, 104, 0.07);
  min-width: 0; min-height: 0;
}
.karte-titel {
  font-size: 1.15rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--navy); margin-bottom: 0.7rem;
}

/* ── Kopfzeile ───────────────────────────────────────────────────────────── */
.kopf {
  grid-area: kopf; display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
.logo { height: 4.4rem; width: auto; max-width: 46vw; object-fit: contain; }
.kopf-rechts { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; }
.gruss { font-size: 1.9rem; font-weight: 800; color: var(--blau-tief); line-height: 1.05; }
.datumzeit { display: flex; align-items: baseline; gap: 1.2rem; color: var(--text-mut); }
.datum { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 1.25rem; font-weight: 600; }
.dz-icon { width: 1.4rem; height: 1.4rem; color: var(--blau); }
.dz-icon use { stroke: currentColor; }
.uhr { font-size: 1.7rem; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }

/* ── Links: Slogan · Hero · Apéro ────────────────────────────────────────── */
.links { grid-area: links; display: flex; flex-direction: column; gap: 1rem; min-width: 0; min-height: 0; overflow: hidden; }

.slogan { flex: 0 0 auto; }
.slogan-haupt { font-size: 3.9rem; font-weight: 900; line-height: 1.02; color: var(--navy); letter-spacing: -0.015em; }
.slogan-unter { margin-top: 0.5rem; font-size: 1.85rem; font-weight: 500; color: var(--blau-tief); }

/* Rotierendes Hero-Bild, zwei überlagerte Ebenen für weiches Überblenden.
   flex-basis 0 + min-height 0: das Bild füllt den Rest der Spalte und schrumpft
   bei engen Höhen, statt Apéro/Fussleiste aus dem Bild zu drängen. */
.hero { position: relative; flex: 1 1 0; min-height: 0; border-radius: 1.1rem;
  overflow: hidden; border: 1px solid var(--karte-rand);
  box-shadow: 0 0.7rem 1.8rem rgba(18, 58, 104, 0.12); background: var(--navy); }
.hero-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.1s ease; }
.hero-bild.sichtbar { opacity: 1; }
.hero-label { position: absolute; left: 1.3rem; bottom: 1.1rem; z-index: 2;
  font-size: 1.45rem; font-weight: 800; color: #fff; letter-spacing: 0.02em;
  text-shadow: 0 0.15rem 0.6rem rgba(0,0,0,0.55); }

/* Wetter + Sponsor behalten ihre Inhaltshöhe; nur die Arbeiten-Karte wächst/schrumpft. */
.karte-wetter, .karte-sponsor { flex: 0 0 auto; }
.slogan { flex: 0 0 auto; }

/* Apéro-Kasten (dunkelblau) */
.apero { flex: 0 0 auto; display: flex; align-items: center; gap: 1.1rem;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%);
  border-radius: 1rem; padding: 0.9rem 1.3rem; color: #fff; }
.apero-icon svg { width: 3rem; height: 3rem; color: var(--blau-hell); flex: 0 0 auto; }
.apero-icon use { stroke: currentColor; }
.apero-kicker { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blau-hell); }
.apero-titel { font-size: 1.55rem; font-weight: 800; line-height: 1.12; margin-top: 0.1rem; }
.apero-unter { font-size: 1.2rem; color: #d6e6f5; margin-top: 0.1rem; }
.apero-zeit { font-size: 1.2rem; font-weight: 700; color: #fff; margin-top: 0.35rem; }

/* ── Rechts: Wetter · Arbeiten · Sponsor ─────────────────────────────────── */
.rechts { grid-area: rechts; display: flex; flex-direction: column; gap: 1rem; min-width: 0; min-height: 0; overflow: hidden; }

/* Wetter */
.karte-wetter .karte-titel { margin-bottom: 0.5rem; }
.wetter-jetzt { display: flex; align-items: center; gap: 1rem; }
.wetter-symbol svg { width: 3.2rem; height: 3.2rem; display: block; }
.wetter-block { display: flex; flex-direction: column; }
.wetter-temp { font-size: 2.5rem; font-weight: 800; color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums; }
.wetter-lage { font-size: 1.15rem; color: var(--text-mut); }
.wetter-vorschau { display: flex; gap: 0.9rem; margin-left: auto; }
.wetter-tag { text-align: center; }
.wetter-tag .t-name { font-size: 1rem; font-weight: 700; color: var(--text); }
.wetter-tag svg { width: 1.9rem; height: 1.9rem; display: block; margin: 0.1rem auto; }
.wetter-tag .t-grad { font-size: 1.05rem; font-weight: 700; color: var(--navy); }
.wetter-hinweis { font-size: 1.25rem; color: var(--blau-tief); font-weight: 600; margin-top: 0.4rem; }

/* Arbeitsgattungen — nimmt den verfügbaren Platz ein (basis 0, schrumpfbar) */
.karte-arbeiten { flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.arbeiten { display: flex; flex-direction: column; gap: 0.7rem; }
.arbeit { display: flex; align-items: flex-start; gap: 0.85rem; }
.arbeit-icon { flex: 0 0 auto; width: 2.9rem; height: 2.9rem; border-radius: 0.7rem; background: var(--pille);
  display: flex; align-items: center; justify-content: center; }
.arbeit-icon svg { width: 1.7rem; height: 1.7rem; color: var(--blau-tief); }
.arbeit-icon use { stroke: currentColor; }
.arbeit-text { min-width: 0; }
.arbeit-name { font-size: 1.3rem; font-weight: 800; color: var(--navy); line-height: 1.1; }
.arbeit-punkte { font-size: 1.05rem; color: var(--text-mut); line-height: 1.25; margin-top: 0.05rem; }

/* Sponsoring + QR */
.karte-sponsor { display: flex; gap: 1.2rem; align-items: center;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%); border: none; color: #fff; }
.karte-sponsor .sponsor-text { flex: 1 1 auto; min-width: 0; }
.sponsor-kicker { font-size: 1rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blau-hell); }
.sponsor-haupt { font-size: 1.4rem; font-weight: 800; line-height: 1.15; margin-top: 0.2rem; }
.sponsor-name { font-size: 1.2rem; font-weight: 700; color: #fff; margin-top: 0.25rem; }
.sponsor-claim { font-size: 1.05rem; color: #cfe0f2; line-height: 1.25; margin-top: 0.2rem; }
.sponsor-medien { flex: 0 0 auto; display: flex; align-items: center; gap: 1.1rem; }
.sponsor-portraet { width: 5.4rem; height: 5.4rem; border-radius: 0.9rem; background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; }
.sponsor-portraet img { width: 100%; height: 100%; object-fit: cover; }
.sponsor-icon { width: 3.2rem; height: 3.2rem; color: var(--blau-hell); }
.sponsor-icon use { stroke: currentColor; }
.sponsor-qr { text-align: center; }
.sponsor-qr .qr { width: 6rem; height: 6rem; background: #fff; border-radius: 0.6rem; padding: 0.35rem; display: block; }
.qr-label { font-size: 0.95rem; font-weight: 700; color: #fff; margin-top: 0.3rem; }
.qr-web { font-size: 0.95rem; color: var(--blau-hell); font-weight: 700; }

/* ── Fussleiste ──────────────────────────────────────────────────────────── */
.fuss { grid-area: fuss; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%);
  color: #fff; padding: 0.75rem 1.4rem; border-radius: 1rem; flex-wrap: nowrap; }
.fuss-kontakt { display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap; }
.k-block { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.2rem; }
.k-icon { width: 1.5rem; height: 1.5rem; color: var(--blau-hell); flex: 0 0 auto; }
.k-icon use { stroke: currentColor; }
.k-web { color: var(--blau-hell); font-weight: 700; }

.fuss-sicher { display: flex; align-items: center; gap: 1.3rem; flex: 1 1 auto; justify-content: center; }
.sicher-item { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 1.05rem; color: #dceaf7; }
.sicher-icon { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sicher-icon svg { width: 1.2rem; height: 1.2rem; color: #fff; }
.sicher-icon use { stroke: currentColor; }

.fuss-mark { display: inline-flex; align-items: center; gap: 0.7rem; flex: 0 0 auto; }
.flagge { width: 1.6rem; height: 1.6rem; border-radius: 0.25rem; background: #d8232a; position: relative; flex: 0 0 auto; }
.flagge::before, .flagge::after { content: ""; position: absolute; background: #fff; }
.flagge::before { left: 42%; top: 22%; width: 16%; height: 56%; }
.flagge::after { left: 22%; top: 42%; width: 56%; height: 16%; }
.fuss-qualitaet { font-size: 1.1rem; font-weight: 600; color: #dceaf7; }
.fuss-dialekt { font-size: 1.5rem; font-style: italic; color: var(--blau-hell);
  font-family: "Segoe Script", "Brush Script MT", "Comic Sans MS", cursive; }

/* Bewegung respektieren. */
@media (prefers-reduced-motion: reduce) {
  .buehne { animation: none; }
  .hero-bild { transition: none; }
}

/* Sehr grosse Schirme (4K): grosszügiger. */
@media (min-width: 2400px) { .buehne { padding: 2.4rem 3rem; gap: 2rem 2.4rem; } }