/* ============================================================
   Noch Gut by ManniMindset: Ergaenzungen fuer das Einstellen-Formular.

   Baut auf seite.css auf (Farben, Felder, Knoepfe, Blattbreite). Hier steht
   nur, was es auf den anderen Nebenseiten nicht gibt: Zeichenzaehler,
   Fotoauswahl mit Vorschau, Auswahlfelder und die Erfolgsmeldung.
   ============================================================ */

/* ---------- Kopfzeile mit Ausgang (31.07.2026) ----------

   Manni kam aus dem Formular nicht mehr heraus: unten in der Fusszeile stand
   zwar ein Rueckweg, aber nach acht Feldern sieht man den nicht, und
   installiert laeuft die App im Vollbild ohne Zurueck-Taste. Der Ausgang sitzt
   jetzt dort, wo er in jedem Fenster dieser App sitzt: oben rechts. */

.seitenkopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;
}
.seitenkopf .marke { flex: 1; min-width: 0; margin: 0; }

.seite-zu {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44 px, die Mindestgroesse fuer einen Daumen. Kleiner trifft man nicht. */
  width: 44px;
  height: 44px;
  border: 2px solid var(--linie);
  border-radius: 50%;
  background: var(--karte);
  color: var(--leise);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
}
.seite-zu:hover { border-color: var(--blau); color: var(--blau); }
.seite-zu:active { transform: scale(.94); }

/* ---------- Fortschritt und Toast ----------

   Beides gab es auf dieser Seite nicht, und beides fehlte an genau der Stelle,
   an der die App am laengsten schweigt: beim Verkleinern und beim Hochladen
   der Fotos. */

.fortschritt {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  height: 4px;
  background: rgba(0, 145, 200, .16);
  transition: opacity .3s ease;
}
.fortschritt.weg { opacity: 0; pointer-events: none; }
.fortschritt .balken {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--blau), #00b4d8);
  transition: width .25s ease;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Siehe basis.css: ohne width max-content bleibt ein fixiertes Element bei
     left 50 Prozent auf der halben Bildschirmbreite stehen. */
  width: max-content;
  max-width: min(92vw, 420px);
  padding: 10px 16px 10px 10px;
  border-radius: 999px;
  background: #11151a;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
}
/* Das Zeichen der App im Toast (Manni, 31.07.2026). Auf weisser Scheibe, weil
   das Zeichen selbst freigestellt ist und auf dem dunklen Band sonst in seinen
   eigenen dunkelblauen Flaechen verschwindet. */
.toast-zeichen {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 3px;
  border-radius: 50%;
  background: #fff;
}
.toast-text { min-width: 0; }

/* ---------- Zeichenzaehler ----------
   Rechtsbuendig unter dem Feld, leise gesetzt. Er ist eine Auskunft, keine
   Ermahnung, und wird erst laut, wenn es wirklich eng wird. */

.zaehler {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  color: var(--gedimmt, #8a93a1);
  text-align: right;
}
.zaehler.knapp { color: var(--warn); font-weight: 700; }
/* Der Ortsname unter der Postleitzahl: linksbuendig, denn er gehoert zur
   Eingabe und nicht zur Zaehlung. */
.zaehler.gut {
  color: #17864a;
  font-weight: 700;
  text-align: left;
}

@media (prefers-color-scheme: dark) {
  .zaehler.gut { color: #3ddc84; }
}

/* ---------- Zwei Regeln, die hier gefehlt haben (30.07.2026) ----------

   Beide standen nur in styles.css, und die laedt diese Seite nicht. Sie bindet
   allein seite.css und formular.css ein. Folgen, beide von aussen unsichtbar:

   1. Der Honigtopf gegen Automaten (Feld "hinweis_kopie" unter den Regeln) wurde
      von der allgemeinen Feldregel in seite.css erwischt und stand als
      vollbreites, 52 px hohes Eingabefeld OHNE Beschriftung auf dem Schirm.
      Genau danach hat Manni gefragt. Das war nicht nur haesslich: wer dort aus
      Neugier etwas hineintippt, bekommt eine Erfolgsmeldung, waehrend die
      Anzeige stillschweigend weggeworfen wird (api/einstellen.php prueft das
      Feld und antwortet mit ok, ohne zu speichern).

   2. Ohne .hidden bewirkt verstecken() in einstellen.js nichts. Eine einmal
      gezeigte Fehlermeldung blieb fuer immer stehen.

   Bewusst hierher kopiert und nicht styles.css zusaetzlich eingebunden: die
   zoege die ganze Listenansicht mit, die auf dieser Seite nichts zu suchen hat. */

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

.hidden { display: none !important; }

.fehlerzeile {
  margin: 0;
  padding: 10px 14px;
  border-left: 4px solid var(--rot, #c0392b);
  border-radius: 10px;
  background: rgba(192, 57, 43, .1);
  color: var(--rot, #c0392b);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

/* ---------- Auswahl (Einwilligung) ----------
   Die Regeln fuer fieldset.zustand sind weg: der Zustand ist seit dem
   30.07.2026 ein Auswahlfeld und braucht keinen eigenen Kasten mehr. */

/* Die ganze Zeile ist die Trefferflaeche, nicht nur der kleine Kreis. Ein
   Radioknopf ist 20 px gross, ein Daumen 45. */
.wahl {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 6px 0;
  font-size: 17px;
  font-weight: 400;
  color: var(--text);
  cursor: pointer;
}
.wahl input {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: var(--blau);
}
.wahl span { line-height: 1.45; }

.einwilligung {
  padding: 14px 16px;
  border: 2px solid var(--linie);
  border-radius: 12px;
  font-size: 15.5px;
}
.einwilligung a { font-weight: 700; }

/* ---------- Fotos ---------- */

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

.feldname { font-size: 15px; font-weight: 700; color: var(--leise); }
.feldname .leise { font-weight: 400; }

/* Ein Label als Knopf, weil das echte Dateifeld auf jedem System anders und
   ueberall haesslich aussieht. Es liegt versteckt daneben und wird vom Label
   ausgeloest. */
.fotoknopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  border: 2px dashed var(--linie);
  border-radius: 12px;
  background: var(--karte);
  color: var(--blau);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.fotoknopf:active { transform: scale(.99); }
.fk-zeichen { font-size: 24px; }

/* 10px oben, damit das Band "Hauptbild" der zweiten Reihe nicht auf der ersten
   klebt. */
.vorschauen { display: flex; flex-wrap: wrap; gap: 10px 8px; padding-top: 4px; }
/* Huelle um das Bild, damit der Loeschknopf in der Ecke sitzen kann. Der Knopf
   ist noetig, seit die Auswahl sammelt statt zu ersetzen (30.07.2026): vorher
   wurde man ein falsches Foto los, indem man einfach neu waehlte. */
.vorschau-huelle { position: relative; display: inline-block; line-height: 0; }

/* Das Bild ist seit 31.07.2026 ein Knopf: antippen macht es zum Hauptbild.
   Der Knopf traegt keinerlei eigenes Aussehen, damit die Reihe aussieht wie
   vorher und nicht wie eine Werkzeugleiste. */
.vorschau-knopf {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
  touch-action: manipulation;
}
.vorschau-knopf:active { transform: scale(.96); }

.vorschau {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--linie);
  /* Durchsichtiger Rand bei allen: sonst springt das Hauptbild beim Wechseln
     um zwei Pixel, weil nur IHM ein Rand waechst. */
  border: 2px solid transparent;
}
.vorschau-huelle.haupt .vorschau {
  border-color: var(--blau);
  box-shadow: 0 0 0 3px rgba(0, 145, 200, .18);
}

/* Das Band sagt, WELCHES das Hauptbild ist. Ohne Beschriftung waere der blaue
   Rand nur eine Farbe, und Farbe allein erklaert nichts. */
/* Linksbuendig am Bild, nicht mittig darueber: mittig ragte das Band beim
   ersten Foto ueber den linken Rand der Reihe hinaus und wurde angeschnitten. */
.vorschau-haupt {
  position: absolute;
  left: 0;
  top: -8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blau);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
}
/* 28 px sind kleiner als die 44 px, die eine Trefferflaeche sonst haben muss.
   Hier ist das Absicht: der Knopf liegt AUF dem Bild, und ein groesserer
   verdeckte es. Dafuer steht er weit in der Ecke, wo kein Daumen zufaellig
   landet, und ein Fehlgriff kostet nur eine erneute Auswahl. */
.vorschau-weg {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--bg, #fff);
  border-radius: 50%;
  background: #1a1d21;
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.vorschau-weg:active { transform: scale(.92); }

/* ---------- Hinweise ---------- */

.kasten-hinweis {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--karte);
  border-left: 4px solid var(--blau);
}

.mitte-text { text-align: center; }

/* Der eine Satz auf fertig.html, den jeder lesen muss: die Anzeige ist noch
   nicht online. Orange und nicht rot: es ist kein Fehler, sondern ein
   fehlender Schritt. */
.warnkasten {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-left: 4px solid #FF7D0F;
  border-radius: 12px;
  background: rgba(255, 125, 15, .12);
  font-size: 16px;
  line-height: 1.45;
  text-align: left;
}

/* ---------- Nach dem Absenden (fertig.html) ---------- */

.haken { font-size: 56px; margin: 0 0 10px; line-height: 1; }

/* Die Sammlung der haeufigsten Frage: "Es ist nichts angekommen." Steht als
   eigener Kasten und nicht im Fliesstext, damit man sie findet, ohne zu
   lesen. Linksbuendig, obwohl die Seite mittig ist: eine Liste in der Mitte
   liest sich schlecht. */
.hinweis-kasten {
  margin: 22px 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--bg);
  text-align: left;
  font-size: 15.5px;
}
.hinweis-kasten p { margin: 0 0 8px; }
.hinweis-kasten ul { margin: 0; padding-left: 20px; }
.hinweis-kasten li { margin-bottom: 6px; color: var(--leise); }

@media (prefers-reduced-motion: reduce) {
  .fotoknopf:active { transform: none; }
  .vorschau-knopf:active, .seite-zu:active { transform: none; }
  .fortschritt .balken { transition: none; }
}