/* Stelen-Verwaltung.

   Fuer das Handy gebaut, weil Karl davor sitzt, wenn er nachsieht, und nicht
   am Schreibtisch. Grosse Schaltflaechen, eine Spalte, wenig Farbe. Farbe
   traegt hier Bedeutung, deshalb wird sie sonst gespart. */

:root {
  --grund: #f4f6f8;
  --karte: #ffffff;
  --text: #1b2430;
  --gedaempft: #5d6b7a;
  --linie: #e0e5eb;
  --akzent: #b8491c;
  --akzent-hell: #fbeee8;

  --gruen: #2c8a4d;
  --gelb: #a97a09;
  --rot: #b6382a;
  --grau: #8494a3;

  --rundung: 10px;
  --schatten: 0 1px 2px rgba(20, 32, 46, .06), 0 4px 14px rgba(20, 32, 46, .05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--akzent); }

/* ------------------------------------------------------------------- Kopf */

.kopf {
  background: #14202e;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.kopf-innen {
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.marke {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
}

.marke small {
  font-weight: 400;
  font-size: 12px;
  color: #9fb0c2;
}

.kopf-menue {
  display: flex;
  gap: 14px;
  margin-left: auto;
  flex-wrap: wrap;
}

.kopf-menue a,
.abmelden {
  color: #cfdae5;
  text-decoration: none;
  font-size: 14px;
  padding: 6px 0;
}

.kopf-menue a:hover,
.abmelden:hover { color: #fff; }

.abmelden { font-size: 13px; color: #7f8fa0; }

.kundenwahl select {
  background: #22303f;
  color: #fff;
  border: 1px solid #33475b;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 14px;
}

/* ------------------------------------------------------------------ Seite */

.seite {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

/* Nur die Uebersicht laeuft breiter. Dort stehen Karten nebeneinander, auf
   den Formularseiten waeren lange Eingabezeilen schlechter lesbar. */
.seite--weit { max-width: 1180px; }


h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 28px 0 10px; }

.unterzeile {
  color: var(--gedaempft);
  margin: 0 0 20px;
  font-size: 15px;
}

.hinweis-balken {
  background: var(--akzent-hell);
  border: 1px solid #f0d6c9;
  border-radius: var(--rundung);
  padding: 10px 14px;
  margin: 0 0 18px;
  font-size: 15px;
}

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  box-shadow: var(--schatten);
  padding: 16px;
  margin-bottom: 16px;
}

.leer {
  text-align: center;
  color: var(--gedaempft);
  padding: 40px 20px;
}

/* --------------------------------------------------------------- Zustand */

.zustand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}

.punkt {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--grau);
}

.zustand--gruen .punkt { background: var(--gruen); }
.zustand--gelb  .punkt { background: var(--gelb); }
.zustand--rot   .punkt { background: var(--rot); }
.zustand--grau  .punkt { background: var(--grau); }

.zustand--gruen { color: var(--gruen); }
.zustand--gelb  { color: var(--gelb); }
.zustand--rot   { color: var(--rot); }
.zustand--grau  { color: var(--grau); }

.zustand-lang,
.zustand-warnung {
  font-size: 14px;
  color: var(--gedaempft);
  margin: 8px 0 0;
}

.zustand-warnung {
  background: #fdf6e3;
  border-left: 3px solid var(--gelb);
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
  color: #6b5a20;
}

/* ---------------------------------------------------------- Stelenkarten */

.stelen-raster {
  display: grid;
  /* 340 px ergibt bei der breiten Seite drei Spalten, darunter zwei, am
     Handy eine. Eine Karte ist damit rund 370 px breit, die Vorschau also
     etwa 370 mal 208 Pixel. Das reicht, um zu erkennen was laeuft, und
     genau dafuer ist sie da. */
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;

  /* Alle Karten gleich hoch, auch ueber mehrere Zeilen hinweg. Ohne das
     richtet sich jede Karte nach ihrem eigenen Inhalt, und eine Stele ohne
     Warnhinweis steht dann deutlich kuerzer neben einer mit. */
  grid-auto-rows: 1fr;
}

.stele-karte {
  padding: 0;
  overflow: hidden;
  margin-bottom: 0;   /* den Abstand macht das Raster */

  /* Spalte, damit sich der Zustandsblock dehnen und die Fusszeile unten
     ankleben kann. Sonst haette eine gestreckte Karte unten eine Luecke
     zwischen Inhalt und Rand. */
  display: flex;
  flex-direction: column;
}

/* Der Block, der die Hoehenunterschiede aufnimmt. Hier steht der
   Zustandspunkt, und hier haengen die Warnhinweise, die es je nach Stele
   gibt oder nicht. */
.stele-zustand {
  padding: 0 16px 14px;
  flex: 1 1 auto;
}

/* Der Rahmen ist die Flaeche, in der eine Vorschau sitzt. In der Uebersicht
   hat er bei allen Karten dieselbe Hoehe, damit die Zeile nicht ausfranst:
   ohne das ist eine hochkante Karte deutlich hoeher als eine quere und die
   Karte daneben steht in einem leeren Feld.

   Was der Inhalt nicht ausfuellt, bleibt in der dunklen Rahmenfarbe stehen
   und liest sich dadurch als Bildschirmumrandung. Der Preis ist, dass eine
   hochkante Vorschau schmaler wird als sie sein koennte. Das ist die
   bewusste Abwaegung: Ruhe in der Zeile gegen ein paar Pixel Vorschau. */
.vorschau-rahmen {
  position: relative;
  background: #0c1116;
  overflow: hidden;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Auf der Seite einer Stele ist die Vorschau der Hauptgegenstand. Dort gibt
   es keine Nachbarkarte, an der etwas ausfransen koennte, also darf sie so
   gross werden wie der Platz hergibt.

   Der Rahmen schrumpft dort auf den Inhalt. Bei einer hochkanten Stele
   stuenden sonst ueber die halbe Seitenbreite schwarze Flaeche, und das
   sieht nach Fehler aus statt nach Absicht. */
.vorschau-rahmen--gross {
  height: auto;
  max-height: 62vh;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

/* Die Flaeche traegt das Seitenverhaeltnis der Stele. Alles darin bezieht
   sich auf sie, nie auf das Fenster. Merksatz aus dem Signage-Projekt: ein
   Mass am Fenster ist in diesem Projekt fast immer falsch. */
.vorschau-flaeche {
  position: relative;
  overflow: hidden;
  background: #0c1116;
}

/* Das Seitenverhaeltnis steht als Stil am Element und kommt aus den echten
   Pixelmassen der Stele. Fest 16 zu 9 waere geraten: ein Bildschirm mit
   1280 mal 1024 ist keins von beidem, und dann saesse die Vorschau daneben. */

/* Welche Kante fuehrt, wird je Format gesagt und nicht dem Browser
   ueberlassen. Beide Grenzen anzugeben und auf die automatische Loesung zu
   hoffen reicht nicht: Chromium rechnet die Breite nicht aus einer
   begrenzten Hoehe zurueck, und die hochkante Flaeche bleibt dann in voller
   Breite stehen, also gestreckt.

   Das faellt spaet auf: das Standbild sitzt bei gestreckter Flaeche mittig,
   der Spieler aber oben, und beim Einblenden springt das Bild. */
.vorschau-rahmen .vorschau-flaeche {
  flex: 0 0 auto;
}

/* Quer: die Breite fuehrt, die Hoehe folgt aus dem Verhaeltnis. */
.vorschau-rahmen .vorschau-flaeche--quer {
  width: 100%;
  height: auto;
  max-height: 100%;
}

/* Hoch: die Hoehe fuehrt. */
.vorschau-rahmen .vorschau-flaeche--hoch {
  height: 100%;
  width: auto;
  max-width: 100%;
}

/* Auf der Stelenseite umgekehrt: die Breite gibt den Ton an. */
.vorschau-rahmen--gross .vorschau-flaeche {
  width: 100%;
  height: auto;
  max-height: 62vh;
}

.vorschau-rahmen--gross .vorschau-flaeche--hoch {
  width: auto;
  height: 62vh;
}

.vorschau-flaeche iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  transform-origin: top left;
  transition: opacity .4s ease;
}

.vorschau-standbild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vorschau-leer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64798f;
  font-size: 14px;
  text-align: center;
  padding: 20px;
}

.stele-kopf {
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.stele-kopf h3 { margin: 0 0 2px; font-size: 17px; }
.stele-kopf h3 a { color: var(--text); text-decoration: none; }
.stele-kopf h3 a:hover { color: var(--akzent); }

.stele-ort { color: var(--gedaempft); font-size: 14px; margin: 0; }

.stele-fuss {
  margin-top: auto;   /* klebt am unteren Rand, auch bei gestreckter Karte */
  border-top: 1px solid var(--linie);
  padding: 12px 16px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--gedaempft);
}

.stele-fuss b { color: var(--text); font-weight: 600; }

/* Ein Verweis, der eine Leerstelle benennt. Er soll lesbar sein, aber nicht
   so aussehen wie der Verweis auf ein vorhandenes Foto: sonst klickt man
   ihn in der Erwartung, ein Bild zu sehen. */
.verweis-still {
  color: var(--gedaempft);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.verweis-still:hover { color: var(--akzent); }

.marke-format {
  display: inline-block;
  font-size: 12px;
  background: #eef1f5;
  color: var(--gedaempft);
  border-radius: 4px;
  padding: 2px 7px;
}

/* -------------------------------------------------------------- Motivliste */

.motivliste { list-style: none; margin: 0; padding: 0; }

.motiv {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linie);
}

.motiv:last-child { border-bottom: 0; }

.motiv-bild {
  width: 84px;
  height: 48px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 5px;
  background: #dde3ea;
}

.motiv-bild--hoch { width: 48px; height: 84px; }

.motiv-text { flex: 1 1 auto; min-width: 0; }
.motiv-text b { display: block; font-weight: 600; }

.motiv-detail { font-size: 13px; color: var(--gedaempft); }

.motiv-aus { opacity: .45; }

.motiv-fuellung .motiv-detail { color: var(--akzent); }

.motiv-knoepfe { display: flex; gap: 6px; flex: 0 0 auto; }

/* ------------------------------------------------------------- Bedienung */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}

.knopf:hover { border-color: #c7d0da; }

.knopf--stark {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
}

.knopf--klein { min-height: 34px; padding: 5px 10px; font-size: 14px; }

.knopf--gefahr { color: var(--rot); }

label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin: 14px 0 5px;
}

input[type=text], input[type=password], input[type=date],
input[type=number], input[type=file], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  font: inherit;
  background: #fff;
  color: var(--text);
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
}

.feldhinweis {
  font-size: 13px;
  color: var(--gedaempft);
  margin: 5px 0 0;
}

.feldpaar { display: flex; gap: 12px; flex-wrap: wrap; }
.feldpaar > div { flex: 1 1 160px; }

table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linie); }
th { font-size: 13px; color: var(--gedaempft); font-weight: 600; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }

.tabellenrahmen { overflow-x: auto; }

/* ------------------------------------------------------------- Anmeldung */

.anmelde-kasten { max-width: 380px; margin: 60px auto; }

@media (max-width: 560px) {
  .kopf-menue { width: 100%; margin-left: 0; order: 3; }
  .stele-fuss { gap: 12px; }
}

/* --------------------------------------------------- Fotos vom Aufstellort

   Nicht das laufende Bild, sondern der Ort: wo die Stele steht, wie sie
   montiert ist, wo der Anschluss sitzt. Deshalb ein eigener Abschnitt und
   nicht in der Vorschau, die beiden verwechselt man sonst.

   contain und nicht cover: ein Foto vom Anschluss hinter der Stele hat sein
   Wesentliches selten in der Mitte. */

.ortsfotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

.ortsfoto {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.ortsfoto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #0c1116;
  border-radius: 6px;
  display: block;
}

.ortsfoto figcaption {
  font-size: 13px;
  line-height: 1.4;
}

.ortsfoto figcaption .motiv-detail { display: block; font-size: 12px; }

/* ------------------------------------------------------- Laufzeit je Motiv

   Entweder dauerhaft oder ein Zeitraum. Beides nebeneinander, damit man
   sieht, welche der beiden Moeglichkeiten gerade gilt, statt es aus einem
   leeren Feld schliessen zu muessen. */

.laufzeit {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.laufzeit label {
  margin: 0;
  font-weight: 400;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.laufzeit input[type=checkbox] { width: auto; }

.laufzeit input[type=date] {
  width: auto;
  padding: 4px 7px;
  font-size: 13px;
}

.laufzeit__spanne {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  transition: opacity .15s ease;
}

/* Ausgegraut UND gesperrt. Die Felder tragen zusaetzlich disabled, siehe
   die Begruendung in skript.js. */
.laufzeit__spanne--aus {
  opacity: .4;
  pointer-events: none;
}

/* ------------------------------------------------------- Motiv aufnehmen

   Die Auswahl, welche Motive auf eine Stele kommen, sitzt hier und nicht
   beim Motiv. Entschieden am 26.08.2026: gedacht wird von der Stele aus,
   also "was haengt an dieser Wand", nicht vom Spot aus. Beim Motiv steht die
   Zuordnung nur noch zum Nachlesen.

   Mit Vorschaubild statt Ausklappliste, weil sich Werbemotive ueber ihren
   Namen kaum unterscheiden lassen. "Autohaus Herbst 2" sagt nichts. */

.motivwahl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

.motivwahl__eintrag {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.motivwahl__eintrag b { font-size: 14px; line-height: 1.3; }
.motivwahl__eintrag .motiv-detail { font-size: 12px; }
.motivwahl__eintrag .knopf { margin-top: 6px; }

/* contain, nicht cover, und im Seitenverhaeltnis der Stele. Ein
   angeschnittenes Vorschaubild wuerde verschweigen, dass ein Motiv im
   falschen Format ist, und genau das soll hier auffallen. */
.motivwahl__bild {
  width: 100%;
  object-fit: contain;
  border-radius: 6px;
  background: #0c1116;
}

.motivwahl--quer .motivwahl__bild { aspect-ratio: 16 / 9; }
.motivwahl--hoch .motivwahl__bild { aspect-ratio: 9 / 16; }

.motivwahl--hoch { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

.motivwahl__warnung {
  font-size: 12px;
  color: var(--gelb);
  line-height: 1.35;
}