/* ============================================================
   Noch Gut by ManniMindset: was diese App eigen macht.

   Die Basis (/app/basis.css) liefert Farben, Kopfzeile, Knoepfe, Karten,
   Liste, Werbebanner, Begruessung. Hier steht nur, was Noch Gut von den
   Geschwistern unterscheidet:

     1. das Zeilenraster (jede App hat andere Kinder)
     2. die Kategoriereihe
     3. die Anzeigenkarte mit Vorschaubild
     4. Formularfelder, denn Noch Gut ist die erste App der Familie, in die
        jemand etwas HINEIN schreibt

   FARBEN: eigene Namen mit Praefix ff-, damit sie nie mit der Basis kollidieren.
   Wird doch ein Token der Basis ueberschrieben, dann ZWINGEND paarweise, also
   auch im eigenen @media (prefers-color-scheme: dark).
   ============================================================ */

:root {
  --ng-gruen:  #17864a;   /* noch zu haben */
  --ng-gelb:   #b26a00;   /* reserviert */
  --ng-flaeche:#eef1f5;   /* Platzhalter, wo ein Bild fehlt */
}

@media (prefers-color-scheme: dark) {
  :root {
    --ng-gruen:  #3ddc84;
    --ng-gelb:   #e5a53a;
    --ng-flaeche:#20262e;
  }
}

/* ---------- Der Helligkeitsschalter ----------

   Bis zum 31.07.2026 folgte die App ausschliesslich der Einstellung des
   Geraetes. Das ist meistens richtig und manchmal falsch: wer abends im Bett
   stoebert, will dunkel, auch wenn das Handy tagsueber auf hell steht.

   Umgesetzt ueber ein Attribut am html-Element, das app.js setzt. Beide
   Stellungen tragen den VOLLSTAENDIGEN Farbsatz, auch die Werte, die sich
   nicht unterscheiden: eine halbe Liste waere genau der Fehler, vor dem die
   Basis oben warnt.

   Warum das ueber der Geraeteeinstellung liegt: html[data-thema="…"] ist ein
   Element plus Attribut und damit spezifischer als das blosse :root aus
   @media (prefers-color-scheme). Ein @media erhoeht die Spezifitaet nicht.
   Seit dem 31.07.2026 gibt es nur noch die zwei Stellungen hell und dunkel,
   das Attribut steht deshalb immer. Die Geraeteeinstellung entscheidet nur
   noch die Vorbelegung beim allerersten Start (start() in app.js); die
   @media-Regeln oben bleiben als Rueckfall fuer die Zeit vor dem ersten
   Skriptlauf stehen.

   color-scheme gehoert dazu: ohne die Zeile bleiben Auswahlfelder,
   Bildlaufleisten und die Tastatur des Geraetes in der alten Stimmung
   stehen, und im erzwungenen Dunkelmodus leuchtet der Umkreis-Auswahlkasten
   weiss auf. */

html[data-thema="hell"] {
  color-scheme: light;

  --gruen:  #17864a;
  --bg:     #f4f5f7;
  --karte:  #ffffff;
  --text:   #10131a;
  --leise:  #5b6472;
  --linie:  #d9dde4;
  --gedimmt:#8a93a1;
  --warn:     #c02626;
  --auf-warn: #ffffff;

  --ng-gruen:  #17864a;
  --ng-gelb:   #b26a00;
  --ng-flaeche:#eef1f5;
}

html[data-thema="dunkel"] {
  color-scheme: dark;

  --gruen:  #3ddc84;
  --bg:     #0b0d10;
  --karte:  #171b21;
  --text:   #f2f4f7;
  --leise:  #98a2b3;
  --linie:  #2a3038;
  --gedimmt:#6b7480;
  --warn:     #ff6b6b;
  --auf-warn: #10131a;

  --ng-gruen:  #3ddc84;
  --ng-gelb:   #e5a53a;
  --ng-flaeche:#20262e;
}

/* ---------- Das Zeilenraster ----------
   Sieben Kinder: Kopf, Ortzeile, Kategorien, Werkzeugleiste, Liste,
   Verschenken-Knopf, Werbung. Nur die Liste darf wachsen, alles andere ist so
   hoch wie sein Inhalt. minmax(0, 1fr) statt 1fr, sonst schiebt eine lange
   Karte die Liste ueber den Bildschirmrand hinaus.

   Die vierte Zeile ist am 31.07.2026 dazugekommen (Ansicht und Helligkeit).
   Wer hier ein Kind ergaenzt, muss auch diese Reihe verlaengern, sonst
   bekommt das letzte Kind eine automatisch erzeugte Zeile und die Liste
   verliert ihren Vorrang beim Wachsen. */
.app {
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto;
}

/* PFLICHT, und beim Bauen zunaechst vergessen: ohne display:grid ist .liste
   ein gewoehnlicher Block ohne Hoehenbegrenzung. Sie waechst dann ueber ihren
   Rahmen hinaus, statt in sich zu scrollen, und schiebt sich bei vier Karten
   auf 640 px Hoehe ueber den Verschenken-Knopf. Gemessen: Rahmen 321 px,
   Liste 375 px. Tanken, Parken und Abfall setzen es aus demselben Grund. */
/* position: relative traegt die Zieh-Anzeige (CSS aus /app/basis.css). */
.listenraum { display: grid; position: relative; }

/* ---------- Ortzeile ----------

   Seit dem 31.07.2026 farbig hinterlegt (Manni: "die adresse oben ist mir
   noch nicht sichtbar genug, hinterlege die pille farbig"). Die Zeile ist DER
   Filter-Anker der ganzen Liste und soll als solcher ins Auge springen,
   deshalb voll in Patock-Blau mit weisser Schrift statt im Kartengrau der
   uebrigen Knoepfe. Das Blau (--blau aus der Basis) ist in beiden
   Farbstimmungen dasselbe, weiss darauf traegt hell wie dunkel. */

.ortzeile {
  width: 100%;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 14px;
  font-size: 18px;
  background: var(--blau);
  border-color: var(--blau);
  color: #fff;
}
.ort-zeichen { font-size: 24px; flex: none; }
.ortzeile .knopf-text { align-items: flex-start; text-align: left; flex: 1; min-width: 0; }
.ort-text {
  font-size: 18px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Der Radius steht in der zweiten Zeile des Knopfes, auf eigener Flaeche.
   Er aendert sich von selbst (Aufweitung), und was sich von selbst aendert,
   muss sichtbar sein. Auf dem blauen Grund: dunkle Auflage mit hellem Blau
   als Schrift, dieselbe Bauart wie .btn-stand in der Basis, denn weiss pur
   auf PIG-Blau kaeme bei 13 px nicht auf den noetigen Kontrast. */
.ortzeile .btn-stand { background: rgba(0, 0, 0, .28); color: #cdeaf6; }

/* ---------- Kategoriereihe ----------
   Waagerecht schiebbar. Eine zweite Zeile kostet 44 px, und die fehlen unten
   in der Liste. Die Bildlaufleiste ist ausgeblendet, der Verlauf am rechten
   Rand zeigt trotzdem, dass es weitergeht. */

.chipreihe {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 2px 3px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.chipreihe::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 0 14px;
  border: 2px solid var(--linie);
  border-radius: 999px;
  background: var(--karte);
  color: var(--leise);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.chip[aria-pressed="true"] {
  background: var(--blau);
  border-color: var(--blau);
  color: #fff;
}
.chip-zeichen { font-size: 16px; }

/* Die Trefferzahl steht IN der Pille, nicht daneben: daneben waere sie ein
   zweites Element, das mitgescrollt und mitgetippt werden will.
   Grau statt bunt (127er-Grau mit Deckkraft), damit derselbe Wert in beiden
   Farbstimmungen sitzt: ein schwarzer Schleier verschwindet im Dunkeln, ein
   weisser im Hellen. */
.chip-zahl {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(127, 127, 127, .22);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
/* Vor dem ersten Laden weiss die App keine Zahl. Dann soll dort auch kein
   leerer Kreis stehen. */
.chip-zahl:empty { display: none; }
.chip[aria-pressed="true"] .chip-zahl { background: rgba(0, 0, 0, .28); }

/* Kategorien ohne Treffer bleiben stehen und werden nur blasser. Wer sie
   ausblendet, aendert bei jedem Laden die Breite der Reihe, und der Daumen
   trifft dann das Falsche. */
.chip-leer { opacity: .45; }

/* ---------- Werkzeugleiste ----------
   Links die Darstellung, rechts die Helligkeit. Klein gehalten: beides ist
   Geschmack und wird einmal eingestellt, nicht bei jedem Besuch. */

.werkzeugleiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
}

.schalter {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--karte);
}

.schalt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--leise);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.schalt[aria-pressed="true"] { background: var(--blau); color: #fff; }

/* Die zwei Helligkeits-Knoepfe sind seit dem 31.07.2026 reine Icon-Knoepfe
   (Manni: nur Sonne und Mond, ohne Wort). Kompakt und mittig statt textbreit;
   die Mindestbreite haelt die Trefferflaeche, gekuerzt wird nie am Ziel.
   Die fruehere 380px-Regel, die auf schmalen Geraeten nur die WORTE der
   Helligkeit ausblendete, ist damit ueberfluessig und entfallen. */
.schalt-icon {
  min-width: 36px;
  padding: 0 8px;
  justify-content: center;
  font-size: 16px;
}

/* ---------- Pillen ----------
   Kategorie und Zustand stehen auf Karte und im Fenster als Pille. Der
   Zustand war frueher ein Wort im Fliesstext und ging dort unter, obwohl er
   die Entscheidung traegt: "Defekt" muss auffallen, bevor jemand quer durch
   den Landkreis faehrt. */

.pille {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.65;
  letter-spacing: .2px;
  white-space: nowrap;
}
.pille-zeichen { font-size: 13px; }

.pille-kat { background: rgba(0, 145, 200, .14); color: var(--blau); }

/* Neutrales Grau ueber 127er-Grau: derselbe Wert traegt hell wie dunkel. */
.pille-zustand { background: rgba(127, 127, 127, .18); color: var(--leise); }
.pille-zustand.z-neuwertig { background: rgba(23, 134, 74, .16); color: var(--ng-gruen); }
.pille-zustand.z-defekt    { background: rgba(178, 106, 0, .18); color: var(--ng-gelb); }

.pille-res { background: rgba(178, 106, 0, .18); color: var(--ng-gelb); }

/* ---------- Anzeigenkarte ----------
   Bild links, Text rechts. Das Bild ist quadratisch und fest 84 px: eine
   Reihe gleich hoher Karten liest sich schneller als eine, in der jede Karte
   der Bildgroesse folgt. */

/* align-items: start statt center. Seit die Karte Pillen, Anriss und
   Miniaturen traegt, ist der Text fast immer hoeher als das Bild. Zentriert
   haengt das Bild dann in der Mitte und die Karte wirkt schief. */
.az {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 12px 10px 10px;
  align-items: start;
}

.az-bild {
  width: 84px;
  height: 84px;
  border-radius: 10px;
  background: var(--ng-flaeche);
  object-fit: cover;
  display: block;
}
/* Kein Foto? Dann ein ruhiges Feld mit dem Kategoriezeichen statt eines
   kaputten Bildsymbols. */
.az-kein-bild {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}

.az-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.az-titel {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  /* Zwei Zeilen, dann Schluss. Sonst reisst ein langer Titel die Karte auf
     und die Liste fasst nur noch drei Eintraege. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.az-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--leise);
  min-width: 0;
}
.az-ort { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.az-km { flex: none; font-weight: 800; color: var(--text); }
/* "heute", "gestern", "vor 3 Tagen". Steht am Ende der Zeile, weil es die
   Frage beantwortet, die man sich zuletzt stellt: ist das noch aktuell? */
.az-alter { flex: none; margin-left: auto; }

.az-pillen { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }

/* Zwei Zeilen Anriss. Mehr braucht es nicht: wer weiterlesen will, tippt die
   Karte an, und dort steht der ganze Text. */
.az-anriss {
  font-size: 14px;
  line-height: 1.35;
  color: var(--leise);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Bis zu drei weitere Bilder als Streifen unter dem Text. Es sind die Bilder
   ZWEI bis VIER: das erste steht schon gross links daneben. Auf der letzten
   Miniatur liegt "+N", wenn es noch mehr gibt. */
.az-minis { display: flex; gap: 5px; margin-top: 2px; }
.az-mini { position: relative; flex: none; width: 38px; height: 38px; }
.az-mini img {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--ng-flaeche);
  object-fit: cover;
  display: block;
}
.az-mini-mehr {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.az-marke {
  align-self: flex-start;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .2px;
}
.az-marke.frei { background: rgba(23, 134, 74, .14); color: var(--ng-gruen); }
.az-marke.res  { background: rgba(178, 106, 0, .16); color: var(--ng-gelb); }

/* ---------- Kachelansicht ----------
   Zwei Spalten, grosses Bild oben. Fuer das Stoebern: man erkennt eine
   Kommode schneller am Foto als am Wort. Wer vergleichen will (Zustand,
   Entfernung, Text), schaltet zurueck auf Liste, deshalb steht hier bewusst
   weniger und nicht dasselbe in klein. */

.liste.kacheln { grid-template-columns: 1fr 1fr; gap: 6px; }

.az-kachel { display: block; padding: 0 0 9px; }
.az-kachelbild { position: relative; display: block; }

.az-kachel .az-bild {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 14px 14px 0 0;
}
.az-kachel .az-text { padding: 7px 9px 0; }
.az-kachel .az-titel { font-size: 15.5px; }
.az-kachel .az-zeile { font-size: 13px; gap: 6px; }
.az-kachel .az-alter { margin-left: 0; font-size: 12.5px; color: var(--gedimmt); }

/* Die Marke liegt auf dem Foto und braucht deshalb einen eigenen Untergrund.
   Das durchscheinende Gelb der Listenansicht ist auf einem bunten Bild nicht
   lesbar, ein dunkler Schleier mit weisser Schrift immer. */
.az-kachel .az-marke {
  position: absolute;
  left: 8px;
  top: 8px;
}
.az-kachel .az-marke.res { background: rgba(0, 0, 0, .62); color: #fff; }

/* ---------- Das Fenster mit einer Anzeige ---------- */

.kasten-anzeige { max-width: 520px; width: 100%; max-height: 88vh; overflow-y: auto; }

.zu {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .10);
  color: var(--text);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.kasten { position: relative; }

.detail-bild {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--ng-flaeche);
  display: block;
  margin-bottom: 12px;
}

/* Mehrere Fotos: waagerecht schiebbar. Kein Karussell mit Punkten und
   Pfeilen, das ist Bedienung fuer ein Problem, das bei zehn Bildern keines
   ist. Die Huelle traegt Zaehler und Hauptbild-Pille, deshalb position:
   relative. */
.detail-galerie { position: relative; margin-bottom: 12px; }

.detail-bilder {
  display: flex;
  gap: 8px;                     /* BILD_ABSTAND in app.js rechnet damit */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.detail-bilder::-webkit-scrollbar { display: none; }

/* 86 Prozent statt 100, und das ist der ganze Punkt: das naechste Bild wird
   ANGESCHNITTEN. Bei voller Breite endet der Streifen genau an der Kante,
   sieht aus wie das Ende und niemand wischt weiter. Der Anschnitt ist die
   einzige Einladung, die es dafuer braucht.
   scroll-snap-align: start, nicht center: bei center rutscht das
   angeschnittene Bild aus dem Bild heraus und der Hinweis waere wieder weg. */
.detail-bild-huelle {
  position: relative;
  flex: none;
  width: 86%;
  scroll-snap-align: start;
}
.detail-bilder img {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--ng-flaeche);
  display: block;
}

/* Die schraege Pille, genau wie GRATIS auf /apps: ein Aufkleber, der ein
   bisschen uebersteht. Sie beantwortet die Frage, die beim Einstellen
   aufkommt ("welches Bild sehen die anderen zuerst?"), dort, wo man sie
   sich stellt. */
.bild-marke {
  position: absolute;
  left: 12px;
  bottom: 12px;
  transform: rotate(-11deg);
  transform-origin: left bottom;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--blau);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  pointer-events: none;
}

/* "1 von 5". Auf dem Bild und nicht darunter: eine eigene Zeile kostet
   Hoehe, und im Fenster ist die genauso knapp wie in der Liste. */
.bild-zaehler {
  position: absolute;
  right: 12px;
  top: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  pointer-events: none;
}

.detail-titel { margin: 0 0 8px; font-size: 24px; line-height: 1.25; }
.detail-pillen { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.detail-zeile { margin: 0 0 10px; font-size: 15px; color: var(--leise); }

/* Wer verschenkt. NUR der Vorname, mehr liefert die Schnittstelle nicht.
   Ein Name macht aus einer Anzeige einen Nachbarn. */
.detail-von { margin: 0 0 12px; font-size: 15px; color: var(--leise); }
.detail-von strong { color: var(--text); }

/* Eingestellt am, laeuft bis, noch X Tage. Klein und unter dem Text: es ist
   die Auskunft, die man beim Zoegern sucht, nicht beim Entdecken.
   :empty, weil laeuft_ab_am NULL sein kann und dann nichts dasteht. */
.detail-fristen { margin: 0 0 16px; font-size: 13.5px; color: var(--gedimmt); }
.detail-fristen:empty { display: none; }

.detail-text {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.5;
  /* Fremder Text. Ein einzelnes langes Wort (Link, Seriennummer) sprengt
     sonst die Breite des Fensters. */
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.detail-knoepfe { display: flex; flex-direction: column; gap: 8px; }

/* Melden steht bewusst klein und unten: es ist wichtig, dass es da ist, aber
   es ist nicht die Handlung, wegen der jemand die Anzeige oeffnet. */
.melden-zeile {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13.5px;
}
.melden-zeile button {
  border: 0;
  background: none;
  color: var(--leise);
  font-family: inherit;
  font-size: 13.5px;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px;
}

/* ---------- Formularfelder ----------
   Noch Gut ist die erste App der Familie, in die jemand etwas hineinschreibt.
   Die Basis kennt deshalb keine Felder. */

.feld-titel {
  display: block;
  margin: 14px 0 5px;
  font-size: 14px;
  font-weight: 700;
  color: var(--leise);
}
.feld-titel .leise { font-weight: 400; }

.feld {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--linie);
  border-radius: 12px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  /* Unter 16 px zoomt iOS beim Antippen in das Feld hinein und der Nutzer
     sitzt danach in einer verschobenen Seite fest. */
  font-size: 17px;
  font-weight: 400;
}
.feld:focus { outline: none; border-color: var(--blau); }
textarea.feld { resize: vertical; min-height: 90px; line-height: 1.45; }

/* Der Honigtopf. Nicht display:none: manche Automaten ueberspringen genau
   das. So steht er im Weg, ist aber fuer Menschen unsichtbar und fuer
   Vorleseprogramme ausgeblendet (aria-hidden im HTML). */
.honig {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.hinweis-klein { margin: 12px 0 0; font-size: 13.5px; color: var(--leise); line-height: 1.45; }
.fehlerzeile {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--warn);
  color: var(--auf-warn);
  font-size: 15px;
  font-weight: 700;
}

/* ---------- Die Knopfzeile im Kontaktfenster ----------

   Der Sendeknopf traegt hier laengere Beschriftungen als in jedem anderen
   Fenster: "Schick meine Nummer!" und, solange die Sperre laeuft, den Zaehler
   "Wieder in 3 Std. 12 Min.". In zwei gleich breiten Spalten waeren das auf
   einem iPhone SE 139 px je Knopf, und .knopf aus der Basis bricht nicht um,
   sondern schneidet ab (white-space: nowrap, overflow: hidden). Der Text waere
   also mitten im Wort zu Ende.

   Zwei Aenderungen, beide nur hier: "Abbrechen" bekommt nur so viel Platz, wie
   es braucht, der Rest gehoert dem Sendeknopf. Und der darf umbrechen. Zwei
   Zeilen zu 17 px bleiben unter den 54 px Mindesthoehe, das Fenster wird also
   kein Stueck hoeher. */
#formKontakt .gruss-knoepfe { grid-template-columns: auto minmax(0, 1fr); }

#btnKontaktSenden {
  font-size: 17px;
  white-space: normal;
  line-height: 1.15;
  padding: 0 10px;
}

/* Der gesperrte Sendeknopf, waehrend die 24 Stunden ablaufen.

   Die Basis blendet jeden gesperrten Knopf auf halbe Deckkraft, und ein halb
   durchsichtiger blauer Knopf sieht nach Fehler aus. Hier bekommt er
   stattdessen eine ruhige, volle Farbe: das ist kein kaputter Knopf, sondern
   eine Wartezeit, und die soll man lesen koennen. Die Ziffern laufen auf
   fester Breite, sonst zappelt der Text bei jedem Sekundenschritt. */
#btnKontaktSenden:disabled {
  opacity: 1;
  background: var(--gedimmt);
  border-color: var(--gedimmt);
  color: #fff;
  font-variant-numeric: tabular-nums;
  cursor: default;
}

.oder {
  margin: 14px 0 4px;
  text-align: center;
  font-size: 14px;
  color: var(--gedimmt);
  font-weight: 700;
}

/* Der ALLE-Knopf im Ort-Fenster: volle Breite wie die beiden anderen Wege,
   aber im Kartengrau statt in Blau. Blau sind hier die Handlungen, die einen
   Ort SETZEN (Standort, Uebernehmen); ALLE nimmt den Ort bewusst weg und darf
   deshalb anders aussehen, ohne unterzugehen. */
.knopf-alle { width: 100%; font-size: 18px; }

.kasten h2 { margin-right: 44px; }   /* Platz fuer den Schliessen-Knopf */

/* ---------- Kleine Bildschirme ----------
   Gekuerzt wird an Luft, nie an der Trefferflaeche. */

@media (max-height: 700px) {
  .az { padding: 8px 10px 8px 8px; gap: 10px; grid-template-columns: 72px minmax(0, 1fr); }
  /* Muss hier wiederholt werden: die Regel eine Zeile darueber steht spaeter
     in der Datei als .az-kachel und wuerde der Kachel sonst einen Rand geben,
     obwohl ihr Bild bis an die Kante laufen soll. */
  .az-kachel { padding: 0 0 8px; }
  .az-bild { width: 72px; height: 72px; }
  .az-titel { font-size: 17px; }
  .az-anriss { -webkit-line-clamp: 1; }
  .chip { min-height: 34px; font-size: 14px; }
  .schalt { min-height: 27px; font-size: 12.5px; padding: 0 9px; }
  .ortzeile { font-size: 17px; }
}