@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root{
  --bg: #000;              /* Hintergrund schwarz */
  --tile: #1a1a1a;         /* Kacheln dunkelgrau */
  --tile2: #141414;        /* noch dunkler für Innenkacheln */
  --text: #fff;
  --muted: #cfcfcf;

  /* PPT-Farben für Icon-Badges */
  --badge-aktuell: #B7C8B6; /* aus PPT */
  --badge-mensa:   #D78771; /* aus PPT */
  --badge-bilder: #9EA3A7;

  --gap: 18px;
  --radius: 4px;           /* deutlich weniger Rundung */
}

*{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}

/* =========================
   PAGE: oben, unten Rest
   ========================= */
.page{
  height: 100vh;
  padding: 16px;
  display: grid;
  gap: var(--gap);

  grid-template-rows: auto 1fr;

  grid-template-areas:
    "top"
    "plan";
}

/* TOP Container */
.top{
  grid-area: top;

  display: grid;
  gap: var(--gap);

  grid-template-columns: auto 2fr 1.1fr 1.1fr;
  grid-template-areas:
    "left middle bilder right";
  align-items: stretch;
}

/* LEFT: Logo + Info */
.left{
  grid-area: left;

  display: grid;
  gap: var(--gap);

  grid-template-rows: auto 1fr;
  grid-template-areas:
    "logo"
    "info";
}

.top-logo{
  grid-area: logo;
  display: flex;
  align-items: flex-start;
}

.logo{
  height: 52px;
  max-height: 52px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* MID / BILDER / RIGHT */
.top-middle{ grid-area: middle; }
.top-bilder{ grid-area: bilder; }
.top-right{ grid-area: right; }

/* =========================
   Bottom / Plan
   ========================= */
.bottom{
  grid-area: plan;
  display: flex;
}

.bottom > .tile-plan{
  flex: 1;
}

.tile-plan{
  background: var(--tile);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
}

.tile-plan iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

/* =========================
   Kacheln
   ========================= */
.tile{
  background: var(--tile);
  border-radius: var(--radius);
  padding: 14px;
}

/* Info-Kachel */
.tile-info{
  grid-area: info;
  display: grid;
  gap: 14px;
}

.info-row{
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 12px;
}

.info-icon{
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.info-big{
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.05;
}

.info-small{
  margin-top: 4px;
  font-size: 1.15rem;
  color: var(--muted);
}

/* Icon Header */
.tile-icon-header{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 10px;
}

.icon-badge{
  width: 58px;
  height: 58px;
  border-radius: 6px;
  display: grid;
  place-items: center;
}

.icon-badge img{
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.icon-badge-bilder{
  background: var(--badge-bilder);
}

.icon-badge-aktuell{ background: var(--badge-aktuell); }
.icon-badge-mensa{ background: var(--badge-mensa); }
.icon-badge-bilder{ background: var(--badge-bilder); }

/* Icon-Reihe für Verkehrsmittel-Symbole im Abfahrten-Tile */
.tile-icon-header-row{
  align-items: center;
  height: 58px;
  gap: 5px;
  position: relative;
  z-index: 1;
}

.mode-icon{
  width: 48px;
  height: 48px;
  display: block;
  flex-shrink: 0;
}

.mode-icon svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* Aktuelles */
.news-cards{
  display: grid;
  gap: 10px;
}

.news-card{
  background: var(--tile2);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 400;
}
.news-card.news-gross{ font-size: 1.7rem; }
.news-card.news-sehr-gross{ font-size: 2.2rem; }

/* Mensa */
.mensa-box{
  display: grid;
  gap: 10px;
  margin-top: 6px;

  min-height: 0; /* CHANGED: verhindert, dass Grid-Inhalte die Kachel aufblähen */
}

.mensa-line{
  background: var(--tile2);
  border-radius: 4px;
  padding: 10px 12px;

  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;

  font-size: 1.2rem;

  height: 56px;      /* CHANGED: feste Zeilenhöhe -> Mensa wächst nicht */
  overflow: hidden;  /* CHANGED */
}

.mensa-line span:last-child{
  font-size: clamp(0.75rem, 0.9vw, 1.1rem);
  line-height: 1.15;
  white-space: normal;
  word-break: break-word;
}

.mensa-day{
  font-weight: 400;
}

/* =========================
   Stretch oben
   ========================= */
.top-middle,
.top-right{
  display: flex;
  flex-direction: column;
}

.top-middle > .tile-aktuell,
.top-right > .tile-mensa{
  flex: 1;
}

/* CHANGED: sorgt dafür, dass Mensa-Inhalt nicht die Kachel-Höhe vergrößert */
.tile-mensa{
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* CHANGED: Mensa-Box nutzt verfügbaren Platz, ohne zu wachsen */
.tile-mensa .mensa-box{
  flex: 1;
  min-height: 0;
}

/* NEU: Bilder-Spalte strecken wie die anderen */
.top-bilder{
  display: flex;
  flex-direction: column;
}

.top-bilder > .tile-bilder,
.top-bilder > .tile-departures{
  flex: 1;
}

/* =========================
   Linke Spalte
   ========================= */
.top-left{
  grid-area: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.top-left .top-logo{
  flex: 0 0 auto;
}

.top-left .tile-info{
  flex: 1;
}

/* =========================
   ABFAHRTEN (MVG)
   ========================= */
.tile-departures{
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
}

.departures-station{
  position: absolute;
  top: 82px;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.departures-station.is-active{
  opacity: 1;
  pointer-events: auto;
}

.departures-divider{
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 4px 0;
  flex: 0 0 auto;
}

.station-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px 2px 2px;
  flex: 0 0 auto;
}

.station-name-block{
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.station-name{
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.2px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 3px 10px;
  border-radius: 6px;
  align-self: flex-start;
}

.station-walk{
  font-size: 0.85rem;
  color: var(--muted);
  opacity: 0.9;
  margin-top: 3px;
}

.station-meta{
  font-size: 0.75rem;
  color: var(--muted);
  opacity: 0.7;
}

.departures-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
}

.departure-row{
  background: var(--tile2);
  border-radius: 4px;
  padding: 5px 10px;

  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 10px;
  align-items: center;

  font-size: 1rem;
  line-height: 1.1;
}

.dep-line{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 28px;
  padding: 0 8px;
  border-radius: 3px;
  background: #0d5c75;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
}

.dep-destination{
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.95rem;
}

.dep-times{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

.dep-minutes{
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.1;
}

.dep-minutes .dep-delay{
  display: inline-block;
  margin-left: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #FF6B6B;
}

.dep-leave{
  font-size: 0.7rem;
  font-weight: 600;
  color: #6BCB77;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.dep-leave.is-now{
  color: #FF6B6B;
  font-weight: 700;
}

.dep-placeholder{
  background: var(--tile2);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 0.9rem;
  color: var(--muted);
  opacity: 0.8;
}

.dep-error{
  background: var(--tile2);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 0.9rem;
  color: #FF6B6B;
}

/* =========================
   Bilder in "Aktuelles"
   ========================= */
.aktuell-content{
  display: block;
}

.aktuell-images{
  background: var(--tile);          /* immer gleiche graue Fläche */
  border-radius: var(--radius);
  padding: 14px;                    /* wie .tile */
  height: auto;                     /* nicht auf 160px begrenzen */
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

#newsImages img{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* Bild vollständig sichtbar */
  display: block;
}

/* NEU: Titel "Bilder" unsichtbar */
.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

#newsImages img{
  opacity: 1;
  transition: opacity 0.8s ease-in-out;
}

#newsImages img.is-fading{
  opacity: 0;
}

/* ========== GLOBAL OVERLAY ========== */

.global-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;                 /* über allem */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Standard: KEINE Abdunklung */
  background: rgba(0,0,0,0);     

  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease, background 300ms ease;
}

/* Nur WENN das Bild gezeigt wird: dann dimmen */
.global-overlay.show{
  opacity: 1;
  background: rgba(0,0,0,0.25);
}

/* Bild in der Mitte – ca. 60 % der Anzeige */
.global-overlay img{
  width: 60vw;
  height: 60vh;
  object-fit: contain;
}

.news-cancel {
  color: #FF6B6B;
}

/* ========== STANDBY (außerhalb der Servicezeiten) ========== */
.standby-screen{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background: #0d1b2a;
  color: #e0e6ed;
}
.standby-screen.show{ display: flex; }
.standby-logo{ width: 18vw; max-width: 240px; opacity: .9; }
.standby-text{ font-size: 2rem; font-weight: 600; letter-spacing: .02em; }