/*
  Gestaltung des Info-Monitors.

  Die Werte sind an der laufenden Webseite gemessen und nicht geraten. Blocksy
  liefert dort:
    --theme-palette-color-1  #E5A53E   Gold, Akzent und Verlinkung
    --theme-palette-color-2  #A06B16   dunkleres Gold, kleine Versalien
    --theme-palette-color-3  #1F2659   Marineblau, Text und Ueberschriften
    --theme-palette-color-5  #DDE0E8   Linien
    --theme-palette-color-6  #F4F5F8   Flaechen
  Fliesstext ist Inter, Ueberschriften sind Bitter 700.

  Die Groessen sind fuer 1920x1080 auf zwei bis drei Metern Abstand gesetzt.
  Wer ein anderes Display haengt, dreht --grundgroesse und sonst nichts.
*/

:root{
  --navy:#1F2659;
  --navy-hell:#3A4177;
  --gold:#E5A53E;
  --gold-dunkel:#A06B16;
  --linie:#DDE0E8;
  --flaeche:#F4F5F8;
  --karte:#FFFFFF;
  --gedaempft:#6B7290;
  --schrift-kopf:"Bitter",Georgia,"Times New Roman",serif;
  --schrift-text:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --grundgroesse:17px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{height:100%;margin:0;overflow:hidden}
body{
  background:var(--flaeche);
  color:var(--navy);
  font-family:var(--schrift-text);
  font-size:var(--grundgroesse);
  display:flex;
  flex-direction:column;
  /* Auf einem Touch-Display soll nichts markierbar sein: Ein Finger, der
     liegen bleibt, waehlt sonst Text aus und die Seite sieht kaputt aus. */
  user-select:none;
  -webkit-user-select:none;
}

/* ---------- Kopfzeile ---------- */
/* Die Kopfzeile ist hell wie auf der Webseite, weil das Logo dort in
   Marineblau und Gold gesetzt ist und auf dunklem Grund verschwaende. */
.kopf{
  flex:0 0 104px;height:104px;background:#fff;color:var(--navy);
  border-bottom:1px solid var(--linie);
  display:flex;align-items:center;justify-content:space-between;padding:0 44px;
}
.wortmarke{display:flex;align-items:center}
.wortmarke .logo{height:58px;width:auto;display:block}
.ersatzmarke{font-family:var(--schrift-kopf);font-weight:700;font-size:38px;color:var(--navy)}
.uhr{display:flex;align-items:baseline;gap:26px}
.uhr .datum{font-size:22px;color:var(--gedaempft);font-weight:500}
.uhr .zeit{font-family:var(--schrift-kopf);font-weight:700;font-size:44px;color:var(--gold-dunkel);line-height:1;font-variant-numeric:tabular-nums}

/* ---------- Zwei Haelften ---------- */
.buehne{flex:1;display:grid;grid-template-columns:1fr 1fr;min-height:0}
.spalte{padding:34px 40px 0 40px;min-height:0;display:flex;flex-direction:column;position:relative}
.spalte.rechts{background:#fff;border-left:1px solid var(--linie)}

.spaltenkopf{
  flex:0 0 auto;display:flex;align-items:flex-end;justify-content:space-between;
  padding-bottom:14px;border-bottom:3px solid var(--gold);margin-bottom:22px;
}
.spaltenkopf h2{font-family:var(--schrift-kopf);font-weight:700;font-size:34px;margin:0}
.spaltenkopf .zusatz{font-size:16px;color:var(--gedaempft);font-weight:500;text-transform:uppercase;letter-spacing:1.4px}

/* Scrollen mit dem Finger. Die Leiste bleibt sichtbar und breit genug,
   damit man sie als Hinweis versteht, dass es weitergeht. */
.scroller{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  overscroll-behavior:contain;
  padding-right:14px;padding-bottom:34px;
}
.scroller::-webkit-scrollbar{width:10px}
.scroller::-webkit-scrollbar-track{background:transparent}
.scroller::-webkit-scrollbar-thumb{background:var(--linie);border-radius:5px}
.scroller.laeuft-ueber::-webkit-scrollbar-thumb{background:var(--gold)}

.liste{display:flex;flex-direction:column;gap:16px}
.listenende{padding:22px 0 6px;text-align:center;font-size:15px;color:var(--gedaempft);letter-spacing:.4px}

/* Weicher Auslauf am unteren Rand, damit ein angeschnittener Eintrag nicht
   wie ein Anzeigefehler aussieht. */
.verlauf{
  position:absolute;left:0;right:0;bottom:0;height:56px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(244,245,248,0),var(--flaeche));
  opacity:0;transition:opacity .25s;
}
.spalte.rechts .verlauf{background:linear-gradient(to bottom,rgba(255,255,255,0),#fff)}
.verlauf.sichtbar{opacity:1}

/* ---------- Termine ---------- */
.termin{
  display:grid;grid-template-columns:104px 1fr;gap:22px;align-items:center;
  background:var(--karte);border:1px solid var(--linie);border-left:6px solid var(--gold);
  padding:18px 22px;box-shadow:0 1px 2px rgba(31,38,89,.05);
}
.termin.naechster{border-left-color:var(--navy);background:#FFFCF5}
.datumsblock{text-align:center;line-height:1}
.datumsblock .wochentag{font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-dunkel);font-weight:700}
.datumsblock .tag{font-family:var(--schrift-kopf);font-weight:700;font-size:50px;margin:5px 0 3px;color:var(--navy)}
.datumsblock .monat{font-size:15px;color:var(--gedaempft);font-weight:600}
.termin h3{font-family:var(--schrift-kopf);font-weight:700;font-size:27px;margin:0 0 7px;line-height:1.2}
.terminzeile{display:flex;gap:22px;align-items:center;font-size:18px;color:var(--gedaempft);font-weight:500}
.terminzeile .zeitangabe{color:var(--navy);font-weight:600}
.termin p{margin:8px 0 0;font-size:17px;color:var(--gedaempft);line-height:1.45}

/* ---------- Beitraege ---------- */
/* Die Bildspalte ist auto, nicht fest: Ein Hochformat wird schmal und gibt
   den gewonnenen Platz dem Text, statt eine leere Flaeche neben sich zu
   lassen. Fest waeren 210px auch dann belegt, wenn das Bild nur 95 braucht. */
.beitrag{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;padding-bottom:18px;border-bottom:1px solid var(--linie)}
.beitrag:last-child{border-bottom:0}
/* Das Bild wird proportional verkleinert, bis es in BEIDE Grenzen passt.
   Weder Breite noch Hoehe sind vorgeschrieben, nur ein Hoechstmass:
     Querformat 768x512   -> die Breite begrenzt -> 210 x 140
     Hochformat 768x1214  -> die Hoehe begrenzt  ->  95 x 150
   Beides unbeschnitten, beides ohne Balken, und die Zeilen bleiben gleich
   hoch, weil kein Bild ueber 150 hinauskommt.

   Zwei Anlaeufe davor am 04.09.2026, beide daneben:
   fester Kasten mit object-fit cover schnitt oben und unten ab; derselbe
   Kasten mit contain liess ein Hochformat als schmalen Streifen zwischen
   zwei blauen Balken stehen. Der dritte Anlauf, nur die Breite fest und die
   Hoehe frei bis 300, machte die Zeile eines Hochformats doppelt so hoch wie
   den Text daneben. Was fehlte, war die Hoehengrenze. */
.vorschau{position:relative}
.vorschau img{max-width:210px;max-height:150px;width:auto;height:auto;display:block}
/* Nur der Platzhalter braucht eigene Masse, er hat kein Bild, das welche
   vorgibt. */
.vorschau.leer{width:210px;height:150px;background:var(--navy)}
.vorschau.leer::after{
  content:"\2724";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:44px;
}
.beitrag h3{font-family:var(--schrift-kopf);font-weight:700;font-size:25px;margin:0 0 8px;line-height:1.22}
.beitrag p{margin:0;font-size:17.5px;line-height:1.5;color:#4A5170}
.marke{display:inline-block;font-size:13px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;color:var(--gold-dunkel);margin-bottom:7px}

/* Antippbares reagiert sichtbar, sonst weiss niemand, dass es geht. */
.tippbar{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.tippbar:active{transform:scale(.985);box-shadow:0 2px 10px rgba(31,38,89,.12)}

/* ---------- Fusszeile ---------- */
.fuss{
  flex:0 0 78px;height:78px;background:var(--navy);color:#C7CCE0;
  display:flex;align-items:center;justify-content:space-between;padding:0 44px;font-size:18px;
}
.fuss b{color:#fff;font-weight:600}
.regelmaessig{display:flex;gap:34px;align-items:center}
.regelmaessig span::before{content:"\25CF";color:var(--gold);font-size:10px;vertical-align:middle;margin-right:10px}
.fuss .stand{font-size:15px;color:#8890B0;text-align:right}

/* ---------- Detailansicht ---------- */
.ueberlagerung{
  position:fixed;inset:0;background:rgba(15,19,48,.62);
  display:flex;align-items:center;justify-content:center;padding:70px;z-index:20;
}
.ueberlagerung[hidden]{display:none}
.blatt{
  background:#fff;width:min(1180px,100%);max-height:100%;
  display:flex;flex-direction:column;position:relative;
  box-shadow:0 24px 60px rgba(10,14,40,.35);
}
.blatt-inhalt{padding:52px 60px 30px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.blatt-inhalt h2{font-family:var(--schrift-kopf);font-weight:700;font-size:44px;margin:0 0 8px;line-height:1.15}
.blatt-inhalt .beiwerk{font-size:19px;color:var(--gedaempft);margin:0 0 26px;padding-bottom:22px;border-bottom:3px solid var(--gold)}
/* Ebenfalls einpassen statt beschneiden. Statt fester 340px begrenzt jetzt
   die Bildschirmhoehe: Auf dem grossen Monitor darf das Bild groesser werden,
   auf dem Telefon draengt es den Text nicht weg. width auto laesst ein
   Hochformat schmal bleiben, statt es auf volle Breite zu ziehen. */
.blatt-inhalt .blattbild{
  display:block;margin:0 auto 28px;
  max-width:100%;max-height:46vh;width:auto;height:auto;object-fit:contain;
}
.blatt-inhalt p{font-size:22px;line-height:1.6;margin:0 0 20px}
.blatt-fuss{padding:18px 60px;border-top:1px solid var(--linie);font-size:16px;color:var(--gedaempft);background:var(--flaeche)}
.schliessen{
  position:absolute;top:-26px;right:-26px;width:66px;height:66px;border-radius:50%;
  border:0;background:var(--gold);color:#fff;font-size:38px;line-height:1;cursor:pointer;
  box-shadow:0 4px 14px rgba(10,14,40,.3);
}
.schliessen:active{background:var(--gold-dunkel)}

/* ---------- Stoerungshinweis ---------- */
.stoerung{
  position:fixed;left:44px;bottom:96px;z-index:30;
  background:#7A2020;color:#fff;padding:12px 20px;font-size:16px;font-weight:500;
  box-shadow:0 4px 14px rgba(10,14,40,.3);
}
.stoerung[hidden]{display:none}

/* ---------- Leerer Zustand ---------- */
.leerhinweis{
  padding:44px 30px;text-align:center;color:var(--gedaempft);font-size:20px;line-height:1.5;
  border:1px dashed var(--linie);
}