.cs-neu *, .cs-neu *::before, .cs-neu *::after { box-sizing: border-box; }

.cs-neu {
  margin: 0;
  font-family: var(--cs-schrift-ui);
  font-size: var(--cs-schrift-normal);
  line-height: 1.5;
  color: var(--cs-text);
  background: var(--cs-flaeche-leise);
  -webkit-text-size-adjust: 100%;
  /* clip statt hidden. Beides schneidet waagerechten Ueberlauf ab, aber
     hidden macht den Body zum ROLLBEREICH - und darin verliert jedes
     position: sticky seine Wirkung. Gemessen am Kalender: das Raster
     sollte beim Rollen stehenbleiben, wanderte aber mit (Oberkante nach
     700px Rollen bei -352 statt bei 56).

     clip erzeugt keinen Rollbereich; sticky funktioniert wieder, und der
     Ueberlauf wird weiterhin abgeschnitten. Verfuegbar ab Safari 16, was
     der Mindestbrowser dieses Projekts ist. */
  overflow-x: clip;
}

/* Formularfelder: 16px verhindert das Hineinzoomen unter iOS */
.cs-neu input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.cs-neu select,
.cs-neu textarea {
  font-size: var(--cs-schrift-feld);
  min-height: var(--cs-ziel);
  padding: var(--cs-abstand-2) var(--cs-abstand-3);
  border: 1px solid var(--cs-linie);
  border-radius: var(--cs-radius);
  background: var(--cs-flaeche);
  max-width: 100%;
}

.cs-neu input[type=checkbox], .cs-neu input[type=radio] {
  width: 22px;
  height: 22px;
}

.cs-neu a, .cs-neu button, .cs-neu [onclick] { touch-action: manipulation; }

.cs-neu button,
.cs-neu input[type=submit],
.cs-neu input[type=button] {
  min-height: var(--cs-ziel);
  min-width: var(--cs-ziel);
  font-size: var(--cs-schrift-normal);
  border-radius: var(--cs-radius);
  cursor: pointer;
}

/* Bilder, die als Schaltflaeche dienen: Trefferflaeche vergroessern,
   ohne das Markup anzufassen. Die semantische Ersetzung durch echte
   Schaltflaechen erfolgt spaeter je View. */
.cs-neu img[onclick] {
  box-sizing: content-box;
  min-width: 24px;
  min-height: 24px;
  padding: 10px;
  cursor: pointer;
  vertical-align: middle;
}

.cs-neu img { max-width: 100%; height: auto; }

.cs-neu table { border-collapse: collapse; }

/* Icon-Schaltflaechen ohne Text: <a onclick><i class="far fa-..."></i></a>
   Das haeufigste Bedienelement im Admin - auf /touren 86 von 138 zu kleinen
   Zielen. :has() ist ab Safari 15.4 verfuegbar, unsere Untergrenze ist iOS 16.

   :not(.cs-kachel) ist noetig, weil eine Kachel ebenfalls ein <a> mit einem
   fa-Symbol ist - aber keine Symbol-Schaltflaeche, sondern eine Flaeche mit
   Symbol UND Beschriftung. Ohne den Ausschluss gewinnt diese Regel: ihre
   Spezifitaet ist (0,2,2) - :has() zaehlt sein Argument i[class*="fa-"] mit -
   und schlaegt damit .cs-neu .cs-kachel (0,2,0). Die Kachel bekam dadurch
   min-height: 44px statt der gewuenschten 96px und blieb 74px hoch. */
.cs-neu a:not(.cs-kachel):has(> i[class*="fa-"]),
.cs-neu button:has(> i[class*="fa-"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--cs-ziel);
  min-height: var(--cs-ziel);
  text-decoration: none;
}

/* Checkboxen bleiben bewusst 22px - eine 44px grosse Checkbox sieht falsch aus.
   Stattdessen Abstand, damit man danebengreifen kann ohne Nachbarn zu treffen. */
.cs-neu input[type=checkbox], .cs-neu input[type=radio] {
  margin: 11px;
}

/* Hausschrift nur fuer Ueberschriften - die Arbeitsflaeche bleibt Systemschrift. */
.cs-neu h1, .cs-neu h2, .cs-neu h3 {
  font-family: var(--cs-schrift-marke);
  font-weight: 500;
  color: var(--cs-text);
}

/* screen.css:51 setzt h1 auf weiss - passend zu einem dunklen Kopfbild, das
   nicht im Repo liegt. Weiss auf #f4f5f2 ergibt 1,05:1 Kontrast, die
   Seitenueberschrift war auf JEDER Seite unsichtbar. Groesse und Abstand
   kommen gleich mit, weil 20pt aus derselben veralteten Regel stammen. */
.cs-neu h1 {
  font-size: var(--cs-schrift-gross);
  line-height: 1.3;
  margin: 0 0 var(--cs-abstand-4);
}

/* Nur fuer Screenreader - sichtbar verborgen, aber vorgelesen.
   Fuer Spaltenkoepfe, die optisch nichts brauchen, akustisch aber Zuordnung. */
.cs-nur-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Auswahlfelder: eigener Pfeil mit Abstand ---------------------------
   Der native Pfeil klebt am rechten Rand - padding-right verschiebt bei
   appearance: auto nur den TEXT, nicht den Pfeil. Vom Betreiber gemeldet:
   "ueberall bei selects ist der pfeil zu nah rechts am rand".

   Darum eigener Pfeil als SVG im Hintergrund, 12px vom Rand, und rechts
   34px Innenabstand, damit langer Text nicht darunter laeuft.

   Nicht fuer Mehrfachauswahl und nicht fuer size>1 - dort gibt es keinen
   Pfeil, das Bild wuerde nur im Kasten stehen. */
.cs-neu select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* ---- Debug-Ausgabe der Entwicklungsumgebung ----------------------------
   layout.phtml gibt bei APPLICATION_ENV beginnend mit "dev" einen Abzug von
   $this->params, $_REQUEST und $_SESSION aus. Die Zeilen darin sind lang und
   brechen nicht - gemessen bei 390px Geraetebreite: die Seite wurde dadurch
   472px breit.

   Produktiv gibt es den Block nicht, es ist also kein Fehler dort. Aber er
   verfaelscht JEDE Ueberlaufmessung an dieser Umgebung - genau das hat mich
   heute auf der Galerieseite eine Weile suchen lassen. Der Abzug rollt darum
   in sich selbst, statt die Seite aufzuweiten. */
.cs-neu .devinfo,
.cs-neu .applicationParams {
  max-width: 100%;
  overflow-x: auto;
}
.cs-neu .devinfo pre,
.cs-neu .applicationParams pre {
  margin: 0;
  white-space: pre;
}

/* ==========================================================================
   Ladeanzeige
   ==========================================================================
   Betreiber zum Kalender: "es gibt noch einen alten spinner, den könnten wir
   auch mal schön platzieren und moderner darstellen".

   Vorher ein 16px grosses GIF, per style auf 32px hochgezogen (also unscharf)
   und hinter den Text gehaengt. Dazu stand die Meldung in einem <h2> - eine
   Ladeanzeige ist aber keine Ueberschrift.

   Jetzt ein Kreisel aus CSS: keine Datei, jede Groesse scharf, Farbe aus den
   Token. Er steht VOR dem Text und beide zusammen mittig im Behaelter, damit
   das Auge nicht am linken Rand suchen muss.

   role="status" in der Ansicht: Vorleseprogramme sagen die Meldung an, ohne
   dass der Fokus springt. Alle Angaben in PIXELN. */
.cs-neu .cs-laedt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cs-abstand-3);
  min-height: 120px;
  margin: 0;
  padding: var(--cs-abstand-4);
  color: var(--cs-text-leise);
  font-size: var(--cs-schrift-normal);
}

.cs-neu .cs-laedt__kreisel {
  flex: none;
  width: 28px;
  height: 28px;
  border: 3px solid var(--cs-linie);
  border-top-color: var(--cs-gruen-hell);
  border-radius: 50%;
  animation: cs-dreht 900ms linear infinite;
}

@keyframes cs-dreht {
  to { transform: rotate(360deg); }
}

/* Wer keine Bewegung will, bekommt den Ring ohne Drehung - die Meldung
   daneben sagt ohnehin, was geschieht. */
@media (prefers-reduced-motion: reduce) {
  .cs-neu .cs-laedt__kreisel { animation: none; }
}