/* ============================================================
   Pflegebereich — eigenes Blatt
   ============================================================

   Bewusst getrennt von style.css: die Website darf sich aendern,
   ohne dass das Formular mitwandert. Uebernommen sind nur die
   Farben und Schriften, damit sich der Bereich zugehoerig anfuehlt.

   Kein style="..." irgendwo: die Sicherheitsrichtlinie in .htaccess
   erlaubt Stile ausschliesslich aus eigenen Dateien.
   ============================================================ */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-variable.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ════════════════════════════════════════════════════════════════
   AB HIER BIS "* { box-sizing }" GEHOERT ALLES DEM PROJEKT

   Was hier steht, sind die Werte von Studio Siemering selbst · die
   Schriften oben und die Palette unten. In einer KUNDENKOPIE gehoert
   an diese Stelle die Palette DES KUNDEN, sonst meldet er sich in
   seinem Pflegebereich an und sieht die Werkstatt.

   Genau das ist bei Hopfen & Schmalz passiert und am 10.08.2026
   aufgefallen: beide Fassungen standen mit Kupfer und Archivo online,
   und weil die Schriftdateien im Projekt gar nicht liegen, holte sich
   der Browser bei jedem Aufruf vier 404er.

   ZU TAUSCHEN SIND DREI DINGE, und mehr nicht:

     1. der @font-face-Block  auf die Schriften, die im Projekt unter
                              assets/fonts/ WIRKLICH liegen
     2. --font-display/-body  auf deren Namen
     3. die neun Farben       aus tokens.css des Projekts

   DIE ROLLEN, UND WAS SIE TRAGEN MUESSEN. Die Zahlen dahinter sind
   die Kontraste dieser Fassung · eine Kundenpalette darf besser sein,
   aber nicht schlechter:

     --paper      Grund des Werkzeugs
     --paper-2/-3 Karten und Linien darauf
     --ink        Schrift auf Papier (14,4:1) UND Grund von Kopf- und
                  Seitenleiste · beides derselbe Wert, das ist Absicht
     --ink-2      Beitext auf Papier          (6,8:1)
     --ink-3      Leises auf Papier           (4,9:1)
     --on-ink     Schrift auf --ink          (13,3:1)
     --copper     Akzent auf --ink · Linien, Fokusrahmen (4,4:1)
     --copper-ink Akzent auf Papier · Beschriftungen, voller Knopf
                  (5,3:1) · und WEISSE Schrift darauf muss auch tragen
     --gut/--schlecht  bleiben, wie sie sind. Gruen heisst gespeichert
                  und Rot heisst Fehler · das ist keine Marke.

   Die haeufigste Falle: die Logofarbe des Kunden fuer BEIDE Akzente
   zu nehmen. Ein Ton, der auf Dunkel traegt, faellt auf Papier durch
   und umgekehrt. Es sind zwei Werte, weil es zwei Gruende sind.
   ════════════════════════════════════════════════════════════════ */

:root {
  --paper:      #f3efe8;
  --paper-2:    #eae4d9;
  --paper-3:    #ded5c7;
  --ink:        #16202b;
  --ink-2:      #46545f;
  --ink-3:      #5e6975;
  --on-ink:     #ece6dc;
  --copper-ink: #8f5522;
  --copper:     #b3763e;

  --gut:        #2f6b45;
  --schlecht:   #8f2f22;

  --font-display: "Archivo", "Segoe UI", Tahoma, sans-serif;
  --font-body:    "Public Sans", "Segoe UI", Tahoma, sans-serif;

  /* Keine Radien — wie auf der Website. Ein Riss hat rechte Winkel. */

  /*
   * Der Rahmen des Werkzeugs.
   *
   * --kopf-hoehe steht hier, weil zwei Stellen sie brauchen: die
   * Kopfleiste selbst und die Seitenleiste, die unter ihr klebt.
   * Zwei getrennte Zahlen waeren die Stelle, an der beim naechsten
   * Anfassen ein Streifen entsteht.
   *
   * --leiste-breite in rem und nicht in Prozent: Die Leiste traegt
   * Woerter. Sie soll bei 1280 und bei 2560 Punkten gleich breit
   * sein, weil "Stellenanzeigen" in beiden Faellen gleich lang ist.
   */
  --kopf-hoehe:     4rem;
  --leiste-breite:  16.5rem;
  --rand:           clamp(1.1rem, 3vw, 2.25rem);

  /* Ab hier steht die Seitenleiste, darunter klappt sie zusammen.
     Als Zahl nur zur Erinnerung — Medienabfragen koennen keine
     Variablen lesen, im Blatt steht 60rem ausgeschrieben. */
  /* --umbruch: 60rem; */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* Die schmale, mittige Bahn. Bleibt fuer pruefung.php, die keine
   Seitenleiste hat und keine braucht. */
.feld {
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
}

/* ── Kopf ────────────────────────────────────────────────── */

.kopf {
  background: var(--ink);
  color: var(--on-ink);
  border-bottom: 2px solid var(--copper);
}

.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--kopf-hoehe);
}

/* Im Pflegebereich laeuft der Kopf ueber die ganze Breite: Er steht
   ueber Leiste UND Inhalt, und eine 44rem breite Insel darin saehe
   aus, als gehoerte sie nur zur einen Haelfte. */
.kopf-innen--breit {
  width: 100%;
  max-width: none;
  padding-inline: var(--rand);
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--on-ink);
  min-width: 0;
}

/* Das Zeichen des Kunden. Der Baustein setzt es von allein, sobald
   eine der gesuchten Dateien im Projekt liegt · siehe admin.php.

   height UND width stehen im Bild-Tag, hier steht width:auto dazu:
   Ohne das rechnet der Browser aus der CSS-Hoehe und der
   Attributbreite ein falsches Verhaeltnis, sobald die Hoehe wie hier
   in rem angegeben ist.

   Die 2rem sind dieselbe Zahl wie $hoehe = 32 in admin.php · wer eine
   aendert, aendert die andere mit. */
.marke__logo {
  display: block;
  height: 2rem;
  width: auto;
  flex: none;
}

.marke__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.marke strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 92%;
  letter-spacing: .01em;
}

/* Der Betriebsname, klein darunter. Er darf abschneiden statt die
   Zeile zu sprengen · lang ist er nur bei langen Betriebsnamen, und
   dann steht er vollstaendig im Fenstertitel. */
.marke__kunde {
  font-size: .78rem;
  opacity: .72;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 30rem) {
  .marke__kunde { display: none; }
}

.kopf-rechts {
  display: flex;
  align-items: center;
  gap: .6rem 1.1rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.kopf-ansehen {
  color: var(--on-ink);
  font-weight: 500;
  font-size: .9rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  padding-bottom: 1px;
}

.kopf-ansehen:hover { border-bottom-color: currentColor; }

.kopf-ansehen:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}

/* Wer angemeldet ist, sein Passwort und das Abmelden stehen nicht
   mehr hier oben, sondern unten in der Seitenleiste · siehe .wer. */

/* Am Telefon traegt der Kopf nur die Marke. "Website ansehen" steht
   dort ohnehin unter jedem Formular und braucht die Zeile nicht ein
   zweites Mal. */
@media (max-width: 40rem) {
  .kopf-ansehen { display: none; }
}

/* ============================================================
   Rahmen: Seitenleiste und Inhaltsfläche
   ============================================================

   Der Pflegebereich ist ein Werkzeug, keine Seite. Deshalb der
   Aufbau, den jedes Redaktionssystem hat: eine schmale Leiste links
   mit allen Bereichen, daneben die Fläche, auf der gearbeitet wird.

   Warum die Leiste dunkel ist, auch bei hellen Kundenpaletten: Sie
   soll nicht wie ein Teil der Website aussehen, sondern wie das,
   was sie ist — der Rand des Werkzeugs. Wer hier tippt, ändert
   etwas, das andere sehen. Dieser Unterschied darf sichtbar sein.
   ============================================================ */

.rahmen { width: 100%; }

@media (min-width: 60rem) {

  .rahmen--leiste {
    display: grid;
    grid-template-columns: var(--leiste-breite) minmax(0, 1fr);
    /* start und nicht stretch: Nur so bleibt der Leiste Raum, unter
       dem Kopf kleben zu bleiben. Bei stretch fuellt sie die ganze
       Reihe aus und hat nichts, worin sie sich bewegen koennte. */
    align-items: start;
  }

  /*
   * Der dunkle Streifen wird vom Rahmen gemalt, nicht von der Leiste.
   *
   * Die Leiste ist nur so hoch wie ihre Eintraege. Bei elf Bereichen
   * und einem langen Formular daneben endete ihr Hintergrund sonst
   * auf halber Hoehe, und darunter stuende die Spalte leer.
   */
  .rahmen--leiste {
    background: linear-gradient(
      to right,
      var(--ink) 0 var(--leiste-breite),
      transparent var(--leiste-breite)
    );
  }

  /*
   * Die Leiste ist so hoch wie das Fenster und teilt sich in zwei
   * Teile: die Bereiche, die scrollen duerfen, und darunter die
   * Person, die stehen bleibt.
   *
   * Deshalb hier volle Hoehe statt max-height, und das Scrollen eine
   * Ebene tiefer bei der Liste. Lag das overflow bei der Leiste
   * selbst, waere sie ein Scroll-Behaelter und wuerde das aufgeklappte
   * Menue am eigenen Rand abschneiden.
   */
  .seitenleiste {
    position: sticky;
    /*
     * Der Kopf steht ueber der Leiste und scrollt weg. Bliebe die
     * Leiste bei top: 0 und 100dvh hoch, ragte sie beim ersten Blick
     * genau um die Kopfhoehe unter den Fensterrand — und unten steht
     * der eigene Name. Er waere ausgerechnet vor dem Scrollen nicht
     * zu sehen, also dann, wenn man ihn sucht.
     *
     * Deshalb klebt sie eine Kopfhoehe unter dem Rand und ist um
     * dasselbe Mass kuerzer. Der dunkle Streifen darueber kommt vom
     * Verlauf des Rahmens · die Spalte sieht durchgehend aus.
     */
    top: var(--kopf-hoehe);
    height: calc(100dvh - var(--kopf-hoehe));
    display: flex;
    flex-direction: column;
    padding-block: 1.25rem 0;
  }
}

.seitenleiste {
  background: var(--ink);
  color: var(--on-ink);
}

/* ── Der Griff: nur am Telefon ───────────────────────────── */

/*
 * Zugeklappt wird mit einem Kaestchen und seiner Beschriftung, nicht
 * mit einem <details> und nicht mit einem Skript.
 *
 * Ein <details> muesste offen ausgeliefert werden — sonst bliebe es
 * ohne Skript zu, und die Navigation waere weg. Das Skript schliesst
 * es dann beim Laden, und man sieht auf dem Telefon bei jedem Aufruf
 * kurz die ganze Liste aufblitzen. Hier entscheidet das Stylesheet,
 * und es ist vom ersten gemalten Bild an richtig.
 */
.bereiche-schalter { /* liegt unter .nurlesbar versteckt */ }

.seitenleiste__griff {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 48px;
  padding: .75rem var(--rand);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--on-ink);
}

.seitenleiste__hier {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .9rem;
  opacity: .7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Der eigene Winkel. Ein Pfeil aus zwei Rahmenkanten, damit kein
   Zeichen aus einer Schriftart mitkommen muss, die es auf dem Geraet
   des Kunden vielleicht nicht gibt. */
.seitenleiste__griff::after {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.15rem) rotate(45deg);
  transition: transform .15s ease;
}

.bereiche-schalter:checked ~ .seitenleiste__griff::after {
  transform: translateY(.1rem) rotate(-135deg);
}

/* Der Fokusrahmen gehoert sichtbar an die Beschriftung · das
   Kaestchen selbst ist einen Punkt gross und liegt weggeklappt. */
.bereiche-schalter:focus-visible ~ .seitenleiste__griff {
  outline: 2px solid var(--copper);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .seitenleiste__griff::after { transition: none; }
}

/* ── Die Liste der Bereiche ──────────────────────────────── */

.seitenleiste__liste {
  display: none;
  padding-bottom: .75rem;
}

.bereiche-schalter:checked ~ .seitenleiste__liste { display: block; }

@media (min-width: 60rem) {
  .seitenleiste__griff { display: none; }
  .seitenleiste__liste {
    display: block;
    /* Nimmt den Platz zwischen Kopf und Person und scrollt, wenn es
       mehr Bereiche gibt als Fensterhoehe. min-height: 0, weil ein
       Rasterelement sonst nicht unter seinen Inhalt schrumpft und die
       Person aus dem Bild schiebt. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 1rem;
  }
}

.seitenleiste__gruppe {
  margin: 1.5rem 0 .3rem;
  padding-inline: var(--rand);
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 700;
  font-stretch: 105%;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}

.seitenleiste__eintrag {
  display: block;
  padding: .55rem var(--rand);
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  font-weight: 500;
  font-size: .95rem;
  line-height: 1.35;
  /* Der Streifen ist immer da, nur meistens durchsichtig · sonst
     ruecken die Woerter um drei Punkte, sobald ein Eintrag der
     aktuelle wird. */
  border-left: 3px solid transparent;
}

.seitenleiste__eintrag:hover {
  background: rgba(255, 255, 255, .07);
  color: #ffffff;
}

.seitenleiste__eintrag.ist-hier {
  background: rgba(255, 255, 255, .11);
  border-left-color: var(--copper);
  color: #ffffff;
  font-weight: 600;
}

.seitenleiste__eintrag:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: -2px;
}

/* ── Die Leiste einklappen ───────────────────────────────── */

/*
 * Nur am Schreibtisch, und nur wo :has() geht.
 *
 * Die Breite steht als --leiste-breite am RAHMEN · dort rechnen die
 * Rasterspalten und der dunkle Verlauf damit. Ein Kaestchen INNEN
 * kann eine Eigenschaft seines Vorfahren nur ueber :has() aendern,
 * und ohne :has() gaebe es einen Knopf, der nichts tut. Dann lieber
 * keinen Knopf · deshalb steht alles in @supports.
 *
 * Eingeklappt bleibt eine Schiene von 2,75rem stehen, breit genug
 * fuer eine Tippflaeche von 44 Punkten. Ganz verschwinden darf die
 * Leiste nicht: Der Weg zurueck waere dann die Adresszeile.
 */
.seitenleiste__klappe { display: none; }

@supports selector(:has(*)) {
  @media (min-width: 60rem) {
    .seitenleiste__klappe {
      display: flex;
      align-items: center;
      gap: .55rem;
      order: 99;                 /* unter den Fuss, ans Ende der Spalte */
      flex: none;
      min-height: 44px;
      padding: .6rem var(--rand);
      border-top: 1px solid rgba(255, 255, 255, .14);
      cursor: pointer;
      font-size: .78rem;
      letter-spacing: .06em;
      color: rgba(255, 255, 255, .45);
    }

    .seitenleiste__klappe:hover { color: rgba(255, 255, 255, .8); }

    .leiste-schalter:focus-visible ~ .seitenleiste__klappe {
      outline: 2px solid var(--copper);
      outline-offset: -2px;
      color: rgba(255, 255, 255, .8);
    }

    /* Der Winkel zeigt, wohin es geht: offen nach links (zumachen),
       eingeklappt nach rechts (aufmachen). */
    .seitenleiste__klappe::before {
      content: "";
      flex: none;
      width: .4rem;
      height: .4rem;
      border-left: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg);
      transition: transform .15s ease;
    }

    .leiste-schalter:checked ~ .seitenleiste__klappe::before {
      transform: rotate(-135deg);
    }

    .rahmen:has(.leiste-schalter:checked) { --leiste-breite: 2.75rem; }

    .leiste-schalter:checked ~ .seitenleiste__liste,
    .leiste-schalter:checked ~ .seitenleiste__fuss { display: none; }

    /* In der Schiene bleibt nur der Winkel · das Wort passt nicht
       mehr hinein und wuerde die Spalte auseinanderdruecken. */
    .leiste-schalter:checked ~ .seitenleiste__klappe {
      justify-content: center;
      padding-inline: 0;
      border-top: 0;
    }

    .leiste-schalter:checked ~ .seitenleiste__klappe .seitenleiste__klappwort {
      /* Nicht display:none · fuer die Vorlesehilfe bleibt das Wort
         die einzige Auskunft, was der Knopf tut. */
      position: absolute;
      width: 1px; height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    /* Oben statt unten: In der Schiene steht sonst ein einzelner
       Winkel am Fensterboden, weit weg von allem. */
    .leiste-schalter:checked ~ .seitenleiste__klappe { order: -1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .seitenleiste__klappe::before { transition: none; }
}

/* ── Oft gebraucht: der Schnellzugriff ───────────────────── */

/*
 * Die drei bis fuenf Stellen, die jede Woche drankommen · sie
 * fuehren nicht auf einen Bereich, sondern mitten hinein.
 *
 * Damit man ihnen ansieht, dass sie etwas anderes sind als die
 * Bereiche darunter, tragen sie einen kupfernen Punkt statt des
 * Streifens links. Der Punkt sitzt IM Innenabstand und schiebt die
 * Schrift nicht · sonst stuenden Schnellzugriff und Bereiche um
 * einen halben Zentimeter versetzt untereinander.
 */
.seitenleiste__eintrag--schnell {
  position: relative;
  padding-left: calc(var(--rand) + .95rem);
}

.seitenleiste__eintrag--schnell::before {
  content: "";
  position: absolute;
  left: var(--rand);
  top: 50%;
  width: .3rem;
  height: .3rem;
  margin-top: -.15rem;
  border-radius: 50%;
  background: var(--copper);
  opacity: .55;
}

.seitenleiste__eintrag--schnell.ist-hier::before { opacity: 1; }

/* ── Die Gruppen: auf und zu ─────────────────────────────── */

/*
 * Sechzehn Bereiche untereinander sind eine Liste, die scrollt.
 * Offen steht deshalb die Gruppe, in der man gerade ist · die
 * anderen sind eine Zeile.
 *
 * Auf und zu macht ein Kaestchen mit seiner Beschriftung, kein
 * Skript und kein <details> · derselbe Grund wie bei der
 * Bereichsliste darueber: Der Server setzt 'checked', und damit
 * stimmt das Bild vom ersten Malen an. Ein <details> muesste offen
 * ausgeliefert und nachtraeglich geschlossen werden, und man saehe
 * bei jedem Aufruf kurz alles.
 */
.navigruppe__schalter { /* liegt unter .nurlesbar versteckt */ }

/* Sieht aus wie die Zwischenzeile darueber (.seitenleiste__gruppe)
   und ist zugleich der Griff · zwei Formen fuer dieselbe Sache
   waeren eine zu viel. */
.navigruppe__griff {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 1.5rem 0 .3rem;
  padding: .25rem var(--rand);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 700;
  font-stretch: 105%;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}

.navigruppe__griff:hover { color: rgba(255, 255, 255, .72); }

/* Der eigene Winkel aus zwei Rahmenkanten · wie am Griff der
   Bereichsliste und an den Abschnitten. Kein Zeichen aus einer
   Schriftart, die es auf dem Geraet vielleicht nicht gibt. */
.navigruppe__griff::after {
  content: "";
  flex: none;
  width: .38rem;
  height: .38rem;
  margin-left: auto;
  margin-right: .1rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.12rem) rotate(-45deg);
  transition: transform .15s ease;
}

.navigruppe__schalter:checked ~ .navigruppe__griff::after {
  transform: translateY(-.05rem) rotate(45deg);
}

.navigruppe__schalter:focus-visible ~ .navigruppe__griff {
  outline: 2px solid var(--copper);
  outline-offset: -2px;
  color: rgba(255, 255, 255, .72);
}

.navigruppe__innen { display: none; }

.navigruppe__schalter:checked ~ .navigruppe__innen { display: block; }

/*
 * Zugeklappt soll man trotzdem sehen, ob man in dieser Gruppe steht.
 *
 * Das kann nur der Griff selbst zeigen · der Eintrag mit .ist-hier
 * liegt ja hinter der Klappe. Ohne das Kuepfer waere eine
 * zugeklappte Gruppe von einer leeren nicht zu unterscheiden.
 */
.navigruppe:has(.ist-hier) .navigruppe__griff { color: rgba(255, 255, 255, .62); }

.navigruppe__schalter:not(:checked) ~ .navigruppe__griff::before {
  content: "";
  flex: none;
  width: .3rem;
  height: .3rem;
  border-radius: 50%;
  background: transparent;
}

.navigruppe:has(.ist-hier) .navigruppe__schalter:not(:checked) ~ .navigruppe__griff::before {
  background: var(--copper);
}

@media (prefers-reduced-motion: reduce) {
  .navigruppe__griff::after { transition: none; }
}

/* ── Wer angemeldet ist: der Fuss der Leiste ─────────────── */

/*
 * Unten links, wie in jedem Werkzeug: der eigene Name, und dahinter
 * das Passwort und der Weg hinaus.
 *
 * Der Trennstrich gehoert an den Fuss und nicht an die Liste: Am
 * Telefon ist die Liste zugeklappt, und ein Strich am unteren Rand
 * von nichts waere eine Linie ohne Anlass.
 */
.seitenleiste__fuss {
  flex: none;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

/* Anker fuer das aufgeklappte Menue · es steht auf dem Schreibtisch
   ueber der Zeile, nicht darunter: unter ihr ist der Bildschirm zu
   Ende. */
.wer { position: relative; }

.wer__griff {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 56px;
  padding: .6rem var(--rand);
  cursor: pointer;
  color: rgba(255, 255, 255, .85);
  /* Derselbe unsichtbare Streifen wie bei den Bereichen: Er haelt den
     Platz frei, damit die Zeile nicht um drei Punkte rueckt, sobald
     sie die aktuelle wird — und er richtet den Anfangsbuchstaben auf
     die Woerter darueber aus. */
  border-left: 3px solid transparent;
  /* Das Dreieck des Browsers faellt weg · der eigene Winkel steht
     rechts und zeigt in die Richtung, in die das Menue aufgeht. */
  list-style: none;
}

.wer__griff::-webkit-details-marker { display: none; }

.wer__griff:hover { background: rgba(255, 255, 255, .07); }

.wer__griff:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: -2px;
}

/* Steht man gerade bei seinem eigenen Zugang, ist die Zeile der
   aktuelle Ort · dieselbe Auszeichnung wie bei den Bereichen. */
.wer__griff.ist-hier {
  background: rgba(255, 255, 255, .11);
  border-left-color: var(--copper);
  color: #ffffff;
}

/*
 * Der Anfangsbuchstabe.
 *
 * Ein Quadrat und kein Kreis: Das Blatt kennt keine Radien, und ein
 * einzelner runder Fleck neben lauter rechten Winkeln saehe aus wie
 * ein Gast aus einem anderen Werkzeug.
 */
.wer__zeichen {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  background: var(--copper);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}

.wer__wer {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  line-height: 1.25;
}

/* Lange Namen brechen die schmale Leiste sonst auf oder schieben den
   Winkel hinaus. */
.wer__name,
.wer__rolle {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wer__name {
  font-weight: 600;
  font-size: .95rem;
}

.wer__rolle {
  font-size: .78rem;
  color: rgba(255, 255, 255, .5);
}

/*
 * Derselbe Winkel wie am Griff der Bereichsliste, aus zwei
 * Rahmenkanten statt aus einem Zeichen.
 *
 * Er zeigt in die Richtung, in die das Menue aufgeht · und die ist
 * nicht ueberall dieselbe: am Telefon klappt es nach unten auf, auf
 * dem Schreibtisch nach oben, weil die Zeile dort am unteren Rand
 * klebt. Deshalb steht hier die Fassung fuers Telefon, und die
 * Medienabfrage weiter unten dreht sie um.
 */
.wer__griff::after {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.15rem) rotate(45deg);
  transition: transform .15s ease;
  opacity: .7;
}

.wer[open] .wer__griff::after {
  transform: translateY(.1rem) rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
  .wer__griff::after { transition: none; }
}

.wer__menue {
  padding-block: .2rem .5rem;
  background: rgba(255, 255, 255, .05);
}

.wer__raus { margin: 0; }

/*
 * Verweis und Knopf sehen gleich aus. Das Abmelden MUSS ein Knopf in
 * einem Formular sein · es traegt den Token, und ein Verweis, der
 * etwas veraendert, koennte von fremder Seite ausgeloest werden.
 */
.wer__eintrag {
  display: block;
  width: 100%;
  padding: .5rem var(--rand);
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .82);
  font-family: inherit;
  font-size: .92rem;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.wer__eintrag:hover {
  background: rgba(255, 255, 255, .09);
  color: #ffffff;
}

.wer__eintrag:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: -2px;
}

@media (min-width: 60rem) {
  /*
   * Auf dem Schreibtisch ein Menue, das ueber der Zeile aufgeht,
   * statt eines Aufklappers, der die Leiste verlaengert: Die Zeile
   * klebt am unteren Rand, nach unten waere kein Platz.
   */
  .wer__menue {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    z-index: 5;
    /* Der Kasten liegt AUF der Leiste und muss sich von ihr abheben:
       die Farbe der Leiste, aufgehellt durch einen Film darueber.
       Ein Schlagschatten allein taete es auf Dunkel nicht. */
    background-color: var(--ink);
    background-image: linear-gradient(
      rgba(255, 255, 255, .08),
      rgba(255, 255, 255, .08)
    );
    border: 1px solid rgba(255, 255, 255, .2);
    border-bottom: 0;
    padding-block: .25rem;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, .45);
  }

  /* Im Menue reicht das kleinere Mass · der Rand der Leiste gilt fuer
     die Liste, nicht fuer einen Kasten, der darauf liegt. */
  .wer__eintrag { padding-inline: 1rem; }

  /* Der Winkel andersherum: hier geht das Menue nach oben auf. */
  .wer__griff::after { transform: translateY(.1rem) rotate(-135deg); }
  .wer[open] .wer__griff::after { transform: translateY(-.15rem) rotate(45deg); }
}

/* ── Inhalt ──────────────────────────────────────────────── */

.inhalt {
  padding-block: clamp(2rem, 6vw, 3.5rem) 4rem;
  /* Ohne diese Zeile sprengt eine breite Preisliste die Rasterspalte,
     statt in ihr zu scrollen. */
  min-width: 0;
}

/*
 * Die Bahn, auf der gearbeitet wird.
 *
 * 72rem und nicht die volle Fensterbreite: Auf einem 27-Zoll-Schirm
 * waere eine Textzeile sonst 1800 Punkte lang, und beim Ruecksprung
 * an den Zeilenanfang verliert das Auge die Spur. 72rem ist breit
 * genug fuer eine Preisliste mit fuenf Spalten und schmal genug zum
 * Lesen.
 *
 * Linksbuendig und nicht mittig: Die Bahn gehoert an die Leiste. In
 * der Mitte der Restflaeche stuende sie auf breiten Schirmen als
 * Insel zwischen zwei Leerraeumen.
 */
.bahn {
  width: 100%;
  max-width: 72rem;
  padding-inline: var(--rand);
}

/* Vor der Anmeldung gibt es keine Leiste, an die sich etwas anlehnen
   koennte · dann steht die Karte mittig. */
.bahn--mitte {
  max-width: 44rem;
  margin-inline: auto;
}

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 88%;
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.15;
  margin: 0 0 .6rem;
}

.vorspann {
  margin: 0 0 1.75rem;
  color: var(--ink-2);
  max-width: 38rem;
}

/*
 * Der Vorspann einer Schnellaktion.
 *
 * Er sagt zwei Dinge: dass hier absichtlich nur ein Ausschnitt
 * steht, und wo der Rest ist. Etwas kleiner als ein gewoehnlicher
 * Vorspann · er erklaert nicht den Inhalt, sondern die Ansicht.
 */
.vorspann--schnell {
  font-size: .92rem;
  max-width: none;
}

.vorspann--schnell a {
  color: var(--copper);
  text-underline-offset: .2em;
}

code {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: .9em;
  background: var(--paper-2);
  padding: .1em .35em;
}

/* ── Meldungen ───────────────────────────────────────────── */

.hinweis {
  margin: 0 0 1.5rem;
  padding: .85rem 1rem;
  border-left: 3px solid currentColor;
  background: var(--paper-2);
  font-weight: 500;
}

.hinweis-gut    { color: var(--gut); }
.hinweis-fehler { color: var(--schlecht); }

/* ── Karte ───────────────────────────────────────────────── */

/* Das Polster steht als Variable da, weil die Speicherleiste unten es
   wieder abziehen muss, um bis an den Kartenrand zu reichen. Zwei
   getrennte clamp()-Angaben wären die Stelle, an der beim nächsten
   Anfassen ein Streifen entsteht. */
.karte {
  --karte-polster: clamp(1.25rem, 4vw, 2rem);
  background: #fbf9f5;
  border: 1px solid var(--paper-3);
  padding: var(--karte-polster);
}

.karte-schmal { max-width: 24rem; }

.feldsatz {
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.feldsatz:last-of-type { margin-bottom: 0; }

label {
  font-weight: 600;
  font-size: .95rem;
}

small {
  color: var(--ink-3);
  font-size: .85rem;
  line-height: 1.5;
}

/* tel, email und url gehoeren ueberall dorthin, wo text steht · sie
   sind dasselbe Feld, nur mit anderer Tastatur auf dem Telefon.
   Vergisst man sie in einer dieser Listen, steht ein Feld ohne
   Rahmen mitten im Formular. */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="date"],
input[type="search"],
select,
textarea {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink-3);
  padding: .6rem .7rem;
  width: 100%;
  border-radius: 0;
}

/* Safari macht aus einem Suchfeld sonst eine Kapsel mit Radien und
   eigener Innenhöhe · das fällt zwischen lauter rechten Winkeln auf. */
input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

textarea {
  resize: vertical;
  min-height: 6rem;
  line-height: 1.55;
}

/*
 * Auf breiten Schirmen bleiben einzelne Felder stehen, wo sie
 * lesbar sind.
 *
 * Die Fläche zieht seit dem 08.08.2026 bis 72rem auf. Ohne diese
 * Deckelung wäre das Feld für eine Jahreszahl 1100 Punkte breit,
 * und ein Textfeld hätte Zeilen, bei denen das Auge beim Rücksprung
 * die Zeile verliert.
 *
 * Nur direkte Kinder eines Feldsatzes. Die Felder in Listenzeilen
 * stehen in einem Raster, das seine Spalten selbst verteilt · dort
 * wäre eine feste Obergrenze eine Lücke am rechten Rand.
 */
.feldsatz > input[type="text"],
.feldsatz > input[type="tel"],
.feldsatz > input[type="email"],
.feldsatz > input[type="url"],
.feldsatz > input[type="password"],
.feldsatz > input[type="search"],
.feldsatz > textarea,
.feldsatz > select { max-width: 44rem; }

/*
 * Einzeilige Felder sind so breit wie die anderen — bis auf die
 * wirklich kurzen.
 *
 * Bis zum 08.08.2026 waren alle 20rem breit. Das stimmte, solange
 * einzeilig "Jahreszahl" hiess; mit den Stammdaten heisst es auch
 * "Meyer & Schliep Immobilien Verwaltung GmbH & Co. KG", und davon
 * war das Ende nicht mehr zu sehen. Welche Felder eng bleiben,
 * entscheidet admin.php an der Hoechstlaenge des Feldes.
 */
.feldsatz > input.einzeilig--eng { max-width: 20rem; }

/* Auch der erklärende Satz unter einem Feld. Er ist der längste Text
   der Seite und liefe sonst als einzelne 1050 Punkte lange Zeile
   quer über die ganze Fläche. */
.feldsatz > small,
fieldset > small { max-width: 46rem; }

input[type="text"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="email"]:focus-visible,
input[type="url"]:focus-visible,
input[type="password"]:focus-visible,
input[type="date"]:focus-visible,
input[type="search"]:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--copper-ink);
  outline-offset: 1px;
  border-color: var(--copper-ink);
}

/* ── Schalter ────────────────────────────────────────────── */

.feldsatz-schalter {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--paper-3);
}

.schalter {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  cursor: pointer;
  font-weight: 600;
}

.schalter input {
  /* Etwas groesser als die Voreinstellung — das Kaestchen ist das
     wichtigste Bedienelement dieser Seite. */
  width: 1.15rem;
  height: 1.15rem;
  margin: .2rem 0 0;
  accent-color: var(--copper-ink);
  flex: none;
}

.schalter input:focus-visible {
  outline: 2px solid var(--copper-ink);
  outline-offset: 2px;
}

/* ── Tasten ──────────────────────────────────────────────── */

.tasten {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1.75rem 0 0;
}

.knopf {
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  padding: .7rem 1.25rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background .15s ease, color .15s ease;
}

.knopf-voll {
  background: var(--ink);
  color: var(--on-ink);
}

.knopf-voll:hover { background: var(--copper-ink); border-color: var(--copper-ink); }

.knopf-leer {
  background: transparent;
  color: inherit;
}

.knopf-leer:hover { background: rgba(0, 0, 0, .07); }

.kopf .knopf-leer {
  border-color: var(--on-ink);
  color: var(--on-ink);
  padding: .4rem .9rem;
}

.kopf .knopf-leer:hover { background: rgba(255, 255, 255, .12); }

.knopf:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}

.fussnote {
  margin: 1.25rem 0 0;
  color: var(--ink-3);
  font-size: .85rem;
}

@media (prefers-reduced-motion: reduce) {
  .knopf { transition: none; }
}

/* ============================================================
   Öffnungszeiten
   ============================================================ */

fieldset {
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
  min-width: 0;          /* sonst sprengt ein breiter Inhalt das Raster */
}

legend {
  padding: 0;
  font-weight: 600;
  font-size: .95rem;
}

fieldset > small { display: block; margin-bottom: .9rem; }

.nurlesbar {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * Der Zeitplan bleibt schmal, auch wenn die Fläche breit ist.
 *
 * Eine Zeile ist "Montag · 09:00 bis 12:00 · Ruhetag". Ließe man sie
 * auf 1150 Punkte aufziehen, stünde das Kästchen "Ruhetag" einen
 * halben Meter vom Wochentag entfernt, und man müsste beim Haken
 * setzen die Zeile mit dem Finger nachfahren.
 */
.zeitplan {
  border: 1px solid var(--paper-3);
  background: var(--paper);
  max-width: 46rem;
}

/* Mit Mittagspause sind es vier Uhrzeiten je Tag statt zwei. */
.zeitplan--pause { max-width: 58rem; }

.zeitzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  padding: .55rem .75rem;
}

.zeitzeile + .zeitzeile { border-top: 1px solid var(--paper-3); }

.zeitzeile__tag {
  flex: 0 0 7rem;
  font-weight: 500;
}

.zeitzeile__zeiten {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .5rem;
  flex: 1 1 auto;
}

/* Ein Zeitraum haelt zusammen: bei Mittagspause stehen zwei davon
   nebeneinander, und beim Umbruch soll die Zeile zwischen den
   Zeitraeumen brechen, nicht mitten in einem. */
.zeitspanne {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.zeitzeile__zu {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .9rem;
  color: var(--ink-2);
  cursor: pointer;
  margin-left: auto;
}

.zeitzeile__zu input {
  width: 1.05rem; height: 1.05rem;
  accent-color: var(--copper-ink);
  flex: none;
}

/* Ein Ruhetag zeigt seine Zeiten blass: sie bleiben gespeichert,
   gelten aber nicht. Ausblenden waere falsch — dann wirkte es, als
   wären sie verloren. */
.zeitzeile.ist-zu .zeitzeile__zeiten { opacity: .45; }
.zeitzeile.ist-zu .zeitzeile__tag { color: var(--ink-3); }

input[type="time"],
input[type="number"] {
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: #fbf9f5;
  border: 1px solid var(--ink-3);
  padding: .35rem .45rem;
  border-radius: 0;
}

input[type="time"]:focus-visible,
input[type="number"]:focus-visible {
  outline: 2px solid var(--copper-ink);
  outline-offset: 1px;
  border-color: var(--copper-ink);
}

.bis { color: var(--ink-3); font-size: .9rem; }

/* ============================================================
   Listen (Speisekarte, Leistungen)
   ============================================================ */

.listenstand {
  margin: 0 0 .9rem;
  color: var(--ink-2);
  font-size: .9rem;
}

.gruppe {
  border: 1px solid var(--paper-3);
  background: var(--paper);
}

.gruppe + .gruppe { margin-top: .5rem; }

.gruppe > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem .85rem;
  cursor: pointer;
  font-weight: 600;
  list-style-position: inside;
}

.gruppe > summary:focus-visible {
  outline: 2px solid var(--copper-ink);
  outline-offset: -2px;
}

.gruppe__zahl {
  font-weight: 400;
  font-size: .85rem;
  color: var(--ink-3);
  white-space: nowrap;
}

.gruppe[open] > summary {
  border-bottom: 1px solid var(--paper-3);
  background: var(--paper-2);
}

.gruppe__innen { padding: .85rem; }

.gruppe__kopf {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  padding-bottom: .85rem;
  margin-bottom: .85rem;
  border-bottom: 1px solid var(--paper-3);
}

.gruppe__kopf .spalte { flex: 1 1 12rem; }

.gruppe__tasten { float: right; margin-left: .5rem; }

/* Die neue, leere Gruppe am Ende hebt sich ab: sie ist ein
   Angebot, kein Bestandteil der Liste. */
.gruppe-neu { border-style: dashed; background: transparent; }
.gruppe-neu > summary { color: var(--ink-2); font-weight: 500; }

/* ── Zeilen ─────────────────────────────────────────────── */

.zeile {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .5rem 0;
}

.zeile + .zeile { border-top: 1px solid var(--paper-2); }

.zeile__felder {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .6rem;
  flex: 1 1 auto;
  min-width: 0;
}

.spalte {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  flex: 1 1 10rem;
  min-width: 0;
}

.spalte-schmal { flex: 0 0 5.5rem; }
.spalte-breit  { flex: 1 1 100%; }

.spalte label {
  font-weight: 400;
  font-size: .72rem;
  color: var(--ink-3);
  line-height: 1.3;
}

.spalte input[type="text"] { padding: .35rem .45rem; }

/* Auswahlfeld. Etwas breiter als ein Textfeld gleicher Bedeutung:
   die Beschriftungen darin sind ganze Wendungen ("ohne Fleisch und
   Fisch"), und abgeschnitten wäre die Auswahl nicht mehr lesbar. */
.spalte-wahl { flex: 1 1 13rem; }
.spalte-wahl select { padding: .3rem .45rem; font-size: .9rem; }

/* Die Zwischenüberschrift gilt ab ihrer Zeile und beginnt einen
   Abschnitt. Deshalb steht sie oben und wird abgesetzt. */
.spalte-titel input { font-weight: 600; }
.spalte-titel label { color: var(--copper-ink); }

.zeile__tasten {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex: none;
  padding-top: 1rem;
}

.zeile-neu { border-top: 1px dashed var(--paper-3); }
.zeile-neu .spalte input { background: transparent; }

/* ── Entfernen ──────────────────────────────────────────── */

.weg {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
}

.weg input {
  width: 1rem; height: 1rem;
  accent-color: var(--schlecht);
  flex: none;
}

/* Das Kästchen der ganzen Gruppe trägt einen Satz statt eines
   Wortes. Ohne diese Zeile gilt das nowrap von .weg auch hier, und
   "Diese Kategorie mit allen Gerichten entfernen" schiebt die Seite
   auf dem Telefon 24 Punkte über den Rand hinaus. */
.weg-gruppe {
  margin-bottom: .85rem;
  white-space: normal;
  align-items: flex-start;
}

/* Solange nicht gespeichert ist, bleibt die Zeile stehen und zeigt
   nur an, was passieren wird. Sofort zu verschwinden wäre schneller,
   aber ein Fehlgriff wäre dann nicht mehr zurückzunehmen. */
.wird-entfernt { opacity: .5; }
.wird-entfernt .spalte input { text-decoration: line-through; }

/* ── Reihenfolge ────────────────────────────────────────── */

.reihe {
  flex: none;
  width: 4rem;
  align-self: center;
}

/* Mit JavaScript übernehmen die Pfeiltasten. Ohne bleibt das
   Zahlenfeld die Bedienung — deshalb steht das Ausblenden hier und
   nicht andersherum. */
.mit-js .reihe {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.pfeil, .fort {
  font: inherit;
  line-height: 1;
  padding: .25rem .4rem;
  border: 1px solid var(--paper-3);
  background: #fbf9f5;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 0;
}

.pfeil:hover, .fort:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

.fort:hover { color: var(--schlecht); border-color: var(--schlecht); }

.pfeil:focus-visible, .fort:focus-visible {
  outline: 2px solid var(--copper-ink);
  outline-offset: 1px;
}

.knopf-dazu {
  margin-top: .75rem;
  padding: .45rem .9rem;
  font-size: .9rem;
}

/* ============================================================
   Bildplätze
   ============================================================ */

.bildplatz {
  border: 1px solid var(--paper-3);
  background: var(--paper);
  padding: .85rem;
}

.bildplatz + .bildplatz { margin-top: .5rem; }

/* Zugeklappt: Miniatur, Name, Maß. Genug, um den Platz zu erkennen,
   ohne alle dreizehn Vorschauen untereinander zu zeigen. */
.bildplatz__kopf {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .7rem;
  cursor: pointer;
  list-style-position: inside;
}

.bildplatz[open] > .bildplatz__kopf {
  border-bottom: 1px solid var(--paper-3);
  background: var(--paper-2);
  margin-bottom: .7rem;
}

.bildplatz__kopf:focus-visible {
  outline: 2px solid var(--copper-ink);
  outline-offset: -2px;
}

.bildplatz__mini {
  width: 3rem;
  height: 2.25rem;
  object-fit: cover;
  border: 1px solid var(--paper-3);
  flex: none;
}

.bildplatz__name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bildplatz__mass {
  font-size: .78rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.bildplatz > small,
.bildplatz > .bildplatz__innen,
.bildplatz > .zuschnitt { margin-inline: .7rem; }

.bildplatz > .zuschnitt { margin-bottom: .7rem; }

.bildplatz__innen {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  margin-top: .7rem;
}

/* Die Vorschau des aktuellen Bildes. Feste Breite, damit die Zeile
   ruhig bleibt, egal welches Seitenverhältnis der Platz hat. */
.bildplatz__jetzt { flex: 0 0 11rem; }

.bildplatz__jetzt img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--paper-3);
  background: var(--paper-2);
}

.bildplatz__marke {
  display: block;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .25rem;
}

.bildplatz__wahl {
  flex: 1 1 12rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
}

/* Das echte Dateifeld ist in jedem Browser anders gestaltet und
   lässt sich kaum bändigen. Deshalb liegt es unsichtbar hinter der
   Beschriftung, die als Knopf auftritt. display:none wäre falsch:
   dann wäre es auch für die Tastatur und für Screenreader weg. */
.dateiwahl {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.bildplatz__waehlen { cursor: pointer; }

.dateiwahl:focus-visible + .bildplatz__waehlen,
.bildplatz__waehlen:hover { background: rgba(0, 0, 0, .07); }

/* ── Ausschnitt ─────────────────────────────────────────── */

.zuschnitt { margin-top: .85rem; }

.zuschnitt[hidden] { display: none; }

.zuschnitt__hinweis {
  margin: 0 0 .5rem;
  font-size: .85rem;
  color: var(--ink-2);
}

/* Der Rahmen trägt das Seitenverhältnis des Zielplatzes. Es kommt
   als CSS-Variable vom Skript, weil es je Platz verschieden ist und
   ein style-Attribut im HTML verboten wäre. */
.zuschnitt__rahmen {
  position: relative;
  width: 100%;
  max-width: 26rem;
  aspect-ratio: var(--verhaeltnis, 1.5);
  overflow: hidden;
  border: 2px solid var(--copper-ink);
  background: var(--ink);
  cursor: grab;
  touch-action: none;      /* sonst scrollt das Telefon statt zu schieben */
  user-select: none;
}

.zuschnitt__rahmen.zieht { cursor: grabbing; }

/*
 * Das Bild liegt frei im Rahmen und wird geschoben, statt in seinem
 * eigenen Kasten per object-position verrutscht zu werden.
 *
 * WARUM NICHT object-fit/object-position
 *
 * Das war der erste Bau, und er hat nur in einer Richtung gestimmt.
 * object-position verschiebt nur dort, wo das Bild seinen Kasten
 * überragt · und das ist bei cover immer genau eine Richtung. Bei
 * einem breiten Rahmen und einem weniger breiten Bild überragt es
 * nur oben und unten: hoch und runter ging, links und rechts nicht.
 * Beim Vergrößern kam der zweite Fehler dazu · der Kasten selbst
 * wuchs über den Rahmen hinaus und wurde von overflow abgeschnitten,
 * immer an derselben Ecke. Das Zugewonnene war unerreichbar, während
 * das Skript im Hintergrund längst Werte schrieb, die eine
 * Verschiebung in beide Richtungen behaupteten.
 *
 * Jetzt rechnet das Skript die Bildgröße in Prozent des Rahmens aus
 * (--bb, --hh; bei 100 % füllt sie ihn genau aus) und gibt die Lage
 * als Faktor zwischen 0 und 1 (--x, --y). Der Rest ist eine
 * Verschiebung des Überstands · dieselbe Rechnung, die auch die
 * Werte fürs Originalbild ergibt.
 */
.zuschnitt__bild {
  display: block;
  position: absolute;
  width:  var(--bb, 100%);
  height: var(--hh, 100%);
  max-width: none;
  left: calc((100% - var(--bb, 100%)) * var(--x, .5));
  top:  calc((100% - var(--hh, 100%)) * var(--y, .5));
  pointer-events: none;    /* der Rahmen fängt das Ziehen ab */
}

.zuschnitt__regler {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .6rem;
  max-width: 26rem;
}

.zuschnitt__regler label {
  font-size: .85rem;
  font-weight: 400;
  color: var(--ink-2);
}

.zoom {
  flex: 1 1 auto;
  accent-color: var(--copper-ink);
}

.zuschnitt__zurueck {
  padding: .35rem .75rem;
  font-size: .85rem;
}

.zuschnitt__warnung {
  margin: .5rem 0 0;
  max-width: 26rem;
  padding: .5rem .65rem;
  background: var(--paper-2);
  border-left: 3px solid var(--schlecht);
  color: var(--schlecht);
  font-size: .85rem;
}

.zuschnitt__warnung[hidden] { display: none; }

/* Die Reiterzeile, die hier stand, ist am 08.08.2026 der
   Seitenleiste gewichen · ihre Regeln stehen jetzt weiter oben
   unter "Rahmen". */

.leerer-bereich {
  padding: 1.5rem;
  background: var(--paper-2);
  color: var(--ink-2);
  margin: 0;
}

/* ============================================================
   Frühere Stände
   ============================================================ */

/* Seit die Stände eine eigene Seite sind, braucht der Block keine
   Abtrennung mehr: die Überschrift steht schon darüber. */
.fassungen { margin-top: 0; }

.staende {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--paper-3);
  background: var(--paper);
}

.stand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  padding: .6rem .8rem;
}

.stand + .stand { border-top: 1px solid var(--paper-3); }

/* Der jüngste Stand ist der, den man nach einem Fehlgriff sucht. */
.stand:first-child { background: var(--paper-2); }

/* Breit genug für "03.08.2026 01:45 Uhr" in einer Zeile. Bricht es
   um, steht "Uhr" allein darunter und die Zeile wird doppelt hoch. */
.stand__wann {
  flex: 0 0 12.5rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stand__uhr {
  color: var(--ink-3);
  font-weight: 400;
  margin-left: .3rem;
}

.stand__umfang {
  flex: 1 1 10rem;
  color: var(--ink-2);
  font-size: .9rem;
}

.stand__tat { margin: 0; flex: none; }

.stand__tat .knopf {
  padding: .35rem .8rem;
  font-size: .85rem;
}

/* ── Speicherleiste ──────────────────────────────────────── */

/*
 * Klebt am unteren Rand des Fensters, solange das Formular zu sehen
 * ist. position: sticky und nicht fixed: fixed nimmt die Leiste aus
 * dem Fluss, und dann liegt sie am Ende der Seite ueber der letzten
 * Zeile statt darunter. Sticky bleibt Teil des Formulars und laesst
 * unten trotzdem los.
 */
.tasten--klebt {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1rem;
  margin: 1.5rem calc(-1 * var(--karte-polster)) calc(-1 * var(--karte-polster));
  padding: .8rem var(--karte-polster);
  background: #fbf9f5;
  border-top: 1px solid var(--paper-3);
  /* Ein flacher Schatten nach oben · sonst ist beim Scrollen nicht zu
     sehen, dass darunter noch Formular weitergeht. */
  box-shadow: 0 -6px 12px -8px rgba(22, 32, 43, .35);
}

/* Solange etwas offen ist, traegt die Leiste die Farbe der Meldung. */
.tasten--klebt.hat-offenes { border-top-color: var(--copper-ink); }

.tasten__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.speicherstand {
  margin: 0;
  flex: 1 1 12rem;
  font-size: .85rem;
  color: var(--ink-3);
}

.speicherstand.ist-offen {
  color: var(--copper-ink);
  font-weight: 600;
}

/* Der liegengebliebene Zettel. Kein Fehler und kein Erfolg, sondern
   eine Frage · deshalb die dritte Farbe. */
.hinweis-zettel {
  color: var(--copper-ink);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1rem;
}

.hinweis__tasten {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.hinweis__tasten .knopf {
  padding: .35rem .8rem;
  font-size: .85rem;
}

/* ── Zeitraum ────────────────────────────────────────────── */

.zeitraum {
  margin-top: .9rem;
  padding: .8rem;
  border: 1px solid var(--paper-3);
  background: var(--paper);
  /* Wie der Zeitplan: der Kasten hört auf, wo die zwei Datumsfelder
     darin aufhören. Auf voller Kartenbreite wäre er ein leerer
     Rahmen mit zwei Feldern in der linken Ecke. */
  max-width: 46rem;
}

.zeitraum__felder {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin: 0;
}

/* Wachsen bis 16rem, dann ist Schluss · ein Datumsfeld braucht Platz
   für "31.12.2026" und keinen Zentimeter mehr. Vorher zog es auf der
   breiten Fläche auf die halbe Kartenbreite auf. */
.zeitraum__feld {
  flex: 0 1 16rem;
  min-width: 11rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.zeitraum__feld label { font-size: .85rem; }

.zeitraum__satz {
  margin: .7rem 0 0;
  font-size: .85rem;
  color: var(--ink-2);
}

/* Eingeschaltet, aber ausserhalb des Zeitraums · das ist der Zustand,
   der sonst wie ein Fehler aussieht. */
.zeitraum__satz--ruht {
  color: var(--copper-ink);
  font-weight: 500;
}

.spalte-datum { flex: 0 0 10rem; }
.spalte-datum input[type="date"] { padding: .35rem .45rem; font-size: .9rem; }

/* ── Bildbeschreibung ────────────────────────────────────── */

.bildplatz__alt {
  margin: .9rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--paper-2);
}

/* ── Suche in langen Listen ──────────────────────────────── */

/*
 * Das Suchfeld erscheint erst, wenn das Skript läuft · gefiltert wird
 * im Browser, ohne Skript könnte es nichts. Ein Eingabefeld, das
 * sichtbar dasteht und auf Tippen nicht reagiert, ist schlechter als
 * keins: Wer nichts findet, sucht den Fehler bei sich und gibt auf.
 *
 * Alles andere im Pflegebereich bleibt auch ohne Skript vollständig
 * bedienbar. Das hier ist die einzige Ausnahme, und sie verschwindet
 * lieber, als zu enttäuschen.
 */
.listensuche { display: none; }

.mit-js .listensuche {
  margin: 0 0 .9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .7rem;
}

.listensuche label { flex: 0 0 auto; }
.listensuche__feld { flex: 1 1 12rem; width: auto; padding: .45rem .6rem; }

.listensuche__stand {
  flex: 0 0 auto;
  font-size: .85rem;
  color: var(--ink-3);
}

/* ── Übersicht ───────────────────────────────────────────── */

/* Nur noch die Kacheln brauchen einen Abstand nach unten hin · die
   beiden Kopfkarten stehen inzwischen nebeneinander in
   .uebersicht__oben und holen ihren Abstand aus dessen gap. Solange
   hier auch .uebersicht__stand + * stand, bekam die zweite Kopfkarte
   20 Punkte Abstand nach oben und hing neben der ersten sichtbar
   durch. */
.uebersicht__kacheln + * { margin-top: 1.25rem; }

.uebersicht__offen { margin-bottom: 1.25rem; }

/*
 * Die beiden Kopfkarten teilen sich die Zeile.
 *
 * "Stand" und "Was ein Datum hat" tragen je zwei Zeilen. Auf 1150
 * Punkten Breite untereinander gestellt sind das zwei fast leere
 * Bänder, und die eigentliche Auskunft steht ganz links in jedem.
 *
 * Kein Raster aus zwei festen Spalten: Die Datumskarte gibt es nur,
 * wenn überhaupt etwas ein Datum trägt. Fehlt sie, stünde neben
 * "Stand" eine leere Hälfte — schlimmer als das Band, das wir
 * loswerden wollten. Mit flex-grow wächst eine einzelne Karte auf
 * die ganze Breite, und zu zweit teilen sie sich.
 *
 * 24rem als Grundbreite: Darunter passt "Zuletzt geändert am
 * 03.08.2026 um 01:45 Uhr von Jonas Bohm" nicht mehr in zwei Zeilen,
 * und die Karten rutschen von selbst untereinander.
 *
 * align-items: start, damit die kürzere nicht auf die Höhe der
 * längeren wächst · eine Karte mit einer Zeile Inhalt und einem
 * Handbreit Luft darunter sieht aus, als fehle etwas.
 */
.uebersicht__oben {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

/* Die Abstände der Karten kommen ausschließlich aus dem gap · eine
   eigene Angabe an einer der beiden würde die andere nach unten
   versetzen, und nebeneinander sieht man das sofort. */
.uebersicht__oben > .karte {
  flex: 1 1 24rem;
  min-width: 0;
  margin: 0;
}

.grossezeile {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  line-height: 1.5;
}

/* Die Ablaufwarnung ist die einzige Karte, die etwas verlangt. */
.uebersicht__achtung {
  border-left: 3px solid var(--copper-ink);
}

.uebersicht__liste {
  list-style: none;
  margin: .4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* Eine zweite Gruppe in derselben Karte braucht Luft nach oben ·
   sonst klebt ihre Zwischenzeile an der Liste darüber und liest sich
   wie deren letzter Eintrag. */
.uebersicht__liste + .fussnote { margin-top: 1.25rem; }

.uebersicht__liste li {
  padding-left: .9rem;
  border-left: 2px solid var(--paper-3);
  font-size: .95rem;
  line-height: 1.5;
}

.uebersicht__liste a { color: var(--copper-ink); }

/*
 * Die Kacheln.
 *
 * auto-fill und nicht auto-fit: bei zwei Bereichen soll die zweite
 * Kachel nicht auf die halbe Seite wachsen, sondern neben der ersten
 * stehen bleiben. Sonst sieht eine kleine Website aus wie eine
 * Baustelle mit zwei riesigen Schaltern.
 */
.uebersicht__kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: .8rem;
  margin-bottom: 1.25rem;
}

.uebersicht__kachel {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .9rem 1rem;
  background: #fbf9f5;
  border: 1px solid var(--paper-3);
  text-decoration: none;
  color: inherit;
}

.uebersicht__kachel:hover {
  border-color: var(--copper-ink);
  background: var(--paper-2);
}

.uebersicht__kachel:focus-visible {
  outline: 2px solid var(--copper-ink);
  outline-offset: 1px;
}

.uebersicht__kachel strong { color: var(--copper-ink); }

.uebersicht__kachelstand {
  font-size: .85rem;
  color: var(--ink-3);
  line-height: 1.45;
}

/* ── Stände: wer, und was ────────────────────────────────── */

.stand__wer {
  display: block;
  color: var(--ink-3);
  font-size: .85rem;
}

/* Der Vergleich bekommt die volle Breite unter der Zeile · in der
   Reihe daneben blieben von einer Änderungsliste zwei Wörter übrig. */
.stand__was {
  flex: 1 1 100%;
  order: 3;
  margin: 0;
  font-size: .85rem;
}

.stand__was > summary {
  cursor: pointer;
  color: var(--copper-ink);
  padding: .2rem 0;
  /* Ohne list-item verschluckt display:flex anderswo das Dreieck ·
     hier steht es ausdrücklich da, damit es beim nächsten Umbau
     nicht aus Versehen verschwindet. */
  display: list-item;
  list-style-position: inside;
}

.stand__was--nichts { color: var(--ink-3); }

.stand__liste {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0 0 0 .9rem;
  border-left: 2px solid var(--paper-3);
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

/* ── Zugänge: Bereichsrechte ─────────────────────────────── */

.zugang__bereiche {
  margin-top: -.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--paper-3);
  background: var(--paper);
}

.zugang__bereiche > summary {
  cursor: pointer;
  padding: .6rem .8rem;
  font-weight: 600;
  font-size: .95rem;
}

.zugang__bereiche > summary:focus-visible {
  outline: 2px solid var(--copper-ink);
  outline-offset: -2px;
}

.zugang__bereiche[open] > summary { border-bottom: 1px solid var(--paper-3); }

.zugang__bereiche .fussnote,
.zugang__bereiche .feldsatz { margin: .8rem; }

.zugang__bereiche .feldsatz-schalter { padding-bottom: .8rem; }

/* ── Mediathek: wo ein Bild hängt ────────────────────────── */

.medienstueck__wo {
  margin: .3rem 0 0;
  font-size: .85rem;
  color: var(--copper-ink);
  font-weight: 500;
}

.medienstueck__wo--frei {
  color: var(--ink-3);
  font-weight: 400;
}

/* ============================================================
   Finger statt Maus
   ============================================================

   Abgefragt wird die Art des Zeigers, nicht die Bildschirmbreite:
   Ein Tablet im Querformat ist breit und wird trotzdem mit dem
   Finger bedient. Bei "coarse" ist die Treffgenauigkeit grob,
   44 Punkte sind die übliche Untergrenze.

   Gemessen am 03.08.2026 an der Speisekarte: 122 Kästchen mit
   16 Punkten Kantenlänge und 244 Pfeiltasten mit 29 × 26. Das ist
   mit dem Finger nicht zu treffen, und danebengegriffen heißt hier:
   die falsche Zeile gelöscht. */

@media (pointer: coarse) {

  /* Kästchen. Das Label darum trägt die Trefferfläche, damit sie
     auch neben dem Kästchen gilt. */
  .schalter input,
  .weg input,
  .zeitzeile__zu input {
    width: 1.5rem;
    height: 1.5rem;
  }

  .schalter,
  .weg,
  .zeitzeile__zu {
    min-height: 44px;
    align-items: center;
  }

  .weg { font-size: .9rem; }

  /* Pfeiltasten und der Verwerfen-Knopf in Listenzeilen. */
  .pfeil,
  .fort {
    min-width: 44px;
    min-height: 44px;
    font-size: 1rem;
  }

  /* Eingabefelder. 39 Punkte waren knapp darunter. */
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="url"],
  input[type="password"],
  input[type="time"],
  select,
  .spalte input[type="text"] {
    min-height: 44px;
  }

  /* Knöpfe. */
  .knopf {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Die Einträge der Seitenleiste sind Verweise, die angetippt
     werden · auf dem Tablet stehen elf davon untereinander, und
     danebengegriffen heißt hier: im falschen Bereich gelandet. */
  .seitenleiste__eintrag {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Dasselbe fuer die zwei Eintraege am eigenen Namen. Sie liegen
     dicht beieinander, und der eine davon meldet ab. */
  .wer__eintrag {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .knopf-dazu,
  .stand__tat .knopf,
  .hinweis__tasten .knopf,
  .zuschnitt__zurueck { min-height: 44px; }

  /* Aufklappbares: die ganze Zeile ist die Trefferfläche. */
  .gruppe > summary,
  .zugang__bereiche > summary,
  .stand__was > summary,
  .bildplatz__kopf { min-height: 48px; }

  /* Die Kacheln der Übersicht sind Verweise, keine Textzeilen · sie
     werden angetippt und brauchen deshalb dieselbe Mindesthöhe. */
  .uebersicht__kachel { min-height: 56px; }

  /*
   * Am Telefon steht die Speicherleiste über der Tastatur.
   *
   * position: sticky rechnet gegen das sichtbare Fenster, und das
   * schrumpft, sobald die Tastatur aufgeht — die Leiste rutscht mit
   * nach oben und verdeckt genau das Feld, in das gerade getippt
   * wird. Deshalb klebt sie an schmalen Geräten nicht, sondern steht
   * am Ende des Formulars.
   */
  .tasten--klebt { position: static; }

  /* Der Größenregler am Ausschnitt. */
  .zoom { height: 44px; }
}

/* ── Schmale Schirme ────────────────────────────────────── */

@media (max-width: 34rem) {
  .zeitzeile__tag { flex-basis: 100%; }
  .zeitzeile__zu { margin-left: 0; }

  /* Mit Mittagspause passen vier Uhrzeitfelder nicht nebeneinander.
     Der zweite Zeitraum rutscht dann unter den ersten, das "und"
     bleibt davor stehen und sagt, dass beide zusammengehoeren. */
  .zeitplan--pause .zeitzeile__zeiten { flex-direction: column; align-items: flex-start; }
  .zeitplan--pause .zeitzeile__zu { flex-basis: 100%; }
  .spalte-schmal { flex: 1 1 6rem; }
  .zeile { flex-wrap: wrap; }
  .zeile__tasten { padding-top: 0; }
  .bildplatz__jetzt { flex: 0 0 7rem; }

  /* Datum und Umfang untereinander, sonst quetscht sich der
     Zurückholen-Knopf an den Rand. */
  .stand__wann { flex-basis: 100%; }
  .stand__umfang { flex: 1 1 auto; }

  /* Der Zuschnittrahmen nimmt die volle Breite. */
  .zuschnitt__rahmen,
  .zuschnitt__regler,
  .zuschnitt__warnung { max-width: none; }
}


/* ── Galerie ────────────────────────────────────────────────
   Beliebig viele Bilder statt fester Plätze.

   Zwei Entscheidungen, die die Bedienung ausmachen:

   1. Das Hinzufügen steht OBEN. Wer bei dreissig Bildern etwas
      anhängen will, soll nicht an dreissig Vorschauen
      vorbeiscrollen.
   2. Ein Stück ist eine Zeile, keine Kachel. Auf dem Telefon
      liegen Vorschau, Platznummer, Unterschrift und das
      Entfernen-Kästchen untereinander und sind jedes für sich
      gross genug zum Antippen. */

.feldsatz-galerie { padding-bottom: 1.25rem; }

.galeriezugabe {
  margin: 1rem 0 1.25rem;
  padding: 1.1rem;
  background: var(--paper-2);
  border: 1px dashed var(--paper-3);
  border-radius: 6px;
}

.galeriezugabe__knopf { margin: 0; }

.galeriezugabe__hilfe {
  margin: .75rem 0 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-3);
}

/* ── Vorschau der gewählten Dateien ─────────────────────────
   Steht zwischen der Wahl und dem Knopf, der sie übernimmt.
   Bewusst klein: Sie beantwortet nur die Frage „ist das
   angekommen, was ich gerade ausgesucht habe", nicht „wie sieht
   es aus". Die Leiste entsteht erst per Skript, deshalb gibt es
   dazu kein Gegenstück im HTML. */

.wahlvorschau {
  list-style: none;
  margin: .85rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.wahlvorschau[hidden] { display: none; }

.wahlvorschau__stueck {
  width: 6.5rem;
  font-size: .74rem;
  line-height: 1.35;
  color: var(--ink-3);
}

.wahlvorschau__bild {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--paper-3);
  border-radius: 4px;
}

/* Ein langer Dateiname darf die Kachel nicht auseinanderziehen. */
.wahlvorschau__name {
  display: block;
  margin-top: .3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wahlvorschau__rest {
  align-self: center;
  font-size: .78rem;
  color: var(--ink-3);
}

.galerieliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}

.galeriestueck {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .75rem;
  background: var(--paper);
  border: 1px solid var(--paper-3);
  border-radius: 6px;
}

.galeriestueck__bild {
  width: 5.5rem;
  height: 5.5rem;
  object-fit: cover;
  border-radius: 4px;
  background: var(--paper-2);
}

.galeriestueck__felder {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: .6rem;
  align-items: end;
}

.galeriestueck__felder label { display: grid; gap: .25rem; }

.galeriestueck__felder span {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.galeriestueck__felder input {
  font: inherit;
  padding: .5rem .6rem;
  border: 1px solid var(--paper-3);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  width: 100%;
  min-height: 2.5rem;
}

/* Das Entfernen-Kästchen der Galerie ist grösser als das der
   Listenzeilen: hier steht es allein in der Zeile und wird
   auch am Rechner mit der Maus getroffen werden müssen. */
.weg--gross { font-size: .85rem; }
.weg--gross input { width: 1.25rem; height: 1.25rem; }

@media (max-width: 40rem) {
  .galeriestueck {
    grid-template-columns: 4.5rem 1fr;
    grid-template-areas:
      "bild felder"
      "weg  weg";
    row-gap: .75rem;
  }
  .galeriestueck__bild { grid-area: bild; width: 4.5rem; height: 4.5rem; }
  .galeriestueck__felder { grid-area: felder; grid-template-columns: 1fr; }
  .weg--gross { grid-area: weg; }
}

@media (pointer: coarse) {
  .galeriestueck__felder input { min-height: 44px; }
  .weg--gross { min-height: 44px; }
  .weg--gross input { width: 1.5rem; height: 1.5rem; }
}

/* ── Personen ───────────────────────────────────────────────
   Team mit Foto je Eintrag (Feldart M4c, 07.08.2026).

   Gebaut auf den Galerie-Klassen, aber ein Eintrag ist eine
   KARTE, keine Zeile: Foto und Fototausch links, die Spalten
   rechts, Platz und Entfernen darunter. Auf dem Telefon
   stapelt sich alles, jede Tippfläche mindestens 44 Punkte. */

.feldsatz-personen { padding-bottom: 1.25rem; }

.personenzugabe {
  margin: 1rem 0 1.25rem;
  background: var(--paper-2);
  border: 1px dashed var(--paper-3);
  border-radius: 6px;
}

.personenzugabe > summary {
  display: inline-block;
  margin: .9rem;
  cursor: pointer;
  list-style: none;
}
.personenzugabe > summary::-webkit-details-marker { display: none; }

.personenzugabe__innen {
  display: grid;
  gap: .75rem;
  padding: 0 1.1rem 1.1rem;
}

.personenzugabe__innen .spalte { display: grid; gap: .25rem; }

.personenzugabe__innen .spalte label,
.personenzugabe__innen .feldsatz label {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.personenzugabe__innen input[type="text"],
.personenzugabe__innen input[type="date"],
.personenzugabe__innen textarea {
  font: inherit;
  padding: .5rem .6rem;
  border: 1px solid var(--paper-3);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  width: 100%;
  min-height: 2.5rem;
}

.personenzugabe__innen .feldsatz { margin: 0; display: grid; gap: .25rem; }

.personenzugabe__foto { display: grid; gap: .5rem; justify-items: start; }
.personenzugabe__foto small { color: var(--ink-3); }

.personenliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}

/* Ein Stück ist ein Formular in klein · über 62rem hinaus stünde
   eine Stellenbezeichnung in einem Feld, das breiter ist als der
   Satz, den es aufnimmt. */
.personenstueck {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1rem;
  padding: .9rem;
  max-width: 62rem;
  background: var(--paper);
  border: 1px solid var(--paper-3);
  border-radius: 6px;
}

.personenstueck__kopf {
  display: grid;
  gap: .5rem;
  align-content: start;
  justify-items: stretch;
}

.personenstueck__bild {
  width: 9rem;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  background: var(--paper-2);
}

.personenstueck__bild--leer {
  display: grid;
  place-content: center;
  text-align: center;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px dashed var(--paper-3);
}

.personenstueck__foto .knopf { width: 100%; margin: 0; }

/* Die Mediathek-Auswahl der Person: letztes Kind der Karte und über
   beide Spalten gespannt. In der 9rem-Fotospalte wäre die Bildliste
   eine gequetschte Einerreihe. */
.personenstueck > .medienwahl { grid-column: 1 / -1; }

/* Hilfe & Kontakt: die zwei direkten Wege nebeneinander. Auf dem
   Telefon brechen sie um, jeder Knopf bleibt fingerbreit. */
.betreuung__wege {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: .75rem 0 0;
}
.betreuung__wege .knopf { margin: 0; }

/*
 * Eine Spalte für alles, ZWEI für die Datumsfelder.
 *
 * "Erst ab" und "Nur bis" gehören nebeneinander: sie sind ein
 * Zeitraum, keine zwei Angaben. Untereinander gestellt liest man sie
 * als zwei unabhängige Felder und übersieht, dass das eine ohne das
 * andere selten Sinn ergibt. Ausserdem sind sie halb so breit wie
 * eine Stellenbezeichnung und lassen sonst die halbe Zeile leer.
 *
 * Umgesetzt über den Trick "alles spannt über beide Spalten, ausser
 * dem, was es nicht soll" · so bleibt die Reihenfolge im Markup die
 * der Feldbeschreibung, und ein neues Feld ordnet sich von selbst
 * richtig ein.
 */
.personenstueck__felder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  align-content: start;
}

.personenstueck__felder > * { grid-column: 1 / -1; }
.personenstueck__felder > .spalte-datum { grid-column: auto; }

@media (max-width: 30rem) {
  .personenstueck__felder > .spalte-datum { grid-column: 1 / -1; }
}

.personenstueck__felder .spalte { display: grid; gap: .25rem; }

.personenstueck__felder .spalte label,
.personenstueck__felder .feldsatz label {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.personenstueck__felder input[type="text"],
.personenstueck__felder input[type="date"],
.personenstueck__felder textarea {
  font: inherit;
  padding: .5rem .6rem;
  border: 1px solid var(--paper-3);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  width: 100%;
  min-height: 2.5rem;
}

.personenstueck__felder .feldsatz { margin: 0; display: grid; gap: .25rem; }

.personenstueck__fuss {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .6rem;
  border-top: 1px solid var(--paper-2);
}

.personenstueck__fuss .galeriestueck__reihe {
  display: grid;
  gap: .25rem;
}

.personenstueck__fuss .galeriestueck__reihe span {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.personenstueck__fuss .galeriestueck__reihe input {
  font: inherit;
  padding: .5rem .6rem;
  border: 1px solid var(--paper-3);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  width: 6rem;
  min-height: 2.5rem;
}

@media (max-width: 40rem) {
  .personenstueck { grid-template-columns: 1fr; }
  .personenstueck__kopf {
    grid-template-columns: 7rem 1fr;
    align-items: end;
  }
  .personenstueck__bild { width: 7rem; }
}

@media (pointer: coarse) {
  .personenstueck__felder input[type="text"],
  .personenstueck__felder input[type="date"],
  .personenstueck__felder textarea,
  .personenzugabe__innen input[type="text"],
  .personenzugabe__innen input[type="date"],
  .personenzugabe__innen textarea,
  .personenstueck__fuss .galeriestueck__reihe input { min-height: 44px; }
}

/* ─── Zugänge ────────────────────────────────────────────────
   Eine Karte je Zugang. Der eigene und ein gesperrter sind auf
   den ersten Blick zu unterscheiden, ohne dass Farbe allein die
   Information trägt · beide tragen zusätzlich ein Wort.
   ──────────────────────────────────────────────────────────── */

.zugaenge {
  display: grid;
  gap: 1.25rem;
  margin: 0 0 2.5rem;
}

.zugang { margin: 0; }

/* Gesperrt: blasser, aber lesbar. Nicht ausgegraut bis zur
   Unkenntlichkeit, denn genau hier klickt man ihn wieder an. */
.zugang-aus { background: var(--paper-2); }

.zugang__kopf {
  margin: 0 0 .25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.zugang__marke {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .02em;
  padding: .1rem .45rem;
  background: var(--paper-2);
  color: var(--ink-2);
  border: 1px solid var(--paper-3);
}

.zugang-aus .zugang__marke { background: #fbf9f5; }

.zugang__marke-aus {
  color: var(--schlecht);
  border-color: currentColor;
  background: transparent;
}

.zugang__passwort {
  margin: 0 0 1.5rem;
  border-top: 1px solid var(--paper-3);
  padding-top: .75rem;
}

/* Aufklappbar, und das muss man sehen: display:flex würde das
   Dreieck des Browsers schlucken, und dann steht dort scheinbar
   nur eine Zeile Text. Die Tippfläche darf zugleich nicht unter
   die Fingerbreite fallen, deshalb die Höhe über padding statt
   über eine Ausrichtung. */
.zugang__passwort summary {
  cursor: pointer;
  font-weight: 500;
  padding: .75rem 0;
  min-height: 2.75rem;
}

.zugang__passwort > small { display: block; color: var(--ink-3); }

/* Das Entfernen steht bewusst AUSSERHALB der Karte und unter ihr:
   ein eigenes Formular, damit ein Klick hier nichts aus der Karte
   mitschickt, und optisch nachgeordnet, weil es der seltene Fall
   ist. */
.zugang__weg {
  margin: -.75rem 0 0;
  padding: 0 0 .5rem;
  text-align: right;
}

.zugang__weg .knopf { color: var(--schlecht); border-color: currentColor; }

.zugang-neu h2,
.zugaenge + .karte h2,
#mein-passwort h2 {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
}

/*
 * Angesprungen von "Passwort ändern" unten in der Leiste.
 *
 * Bei einem Verwalter steht diese Karte unter allen anderen, und nach
 * dem Sprung sieht eine Karte aus wie die nächste. Der Streifen sagt:
 * diese hier war gemeint. Er hängt an :target, verschwindet also von
 * selbst, sobald jemand woandershin geht.
 */
#mein-passwort:target {
  border-left: 3px solid var(--copper);
}


/* ─── Besucher ───────────────────────────────────────────────
   Balkenbreiten stehen als Klasse, nicht als style="…": die
   Sicherheitsrichtlinie verwirft Stile im Markup, und zwar
   lautlos · lokal sieht alles richtig aus, live wären alle Balken
   gleich lang. In 5er-Schritten sind das 21 Regeln.
   ──────────────────────────────────────────────────────────── */

.monatswahl {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0 0 1.5rem;
}

.monatswahl__punkt {
  padding: .5rem .8rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  border: 1px solid var(--paper-3);
  color: var(--ink-2);
  text-decoration: none;
  font-size: .95rem;
}

.monatswahl__punkt.ist-hier {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

/* Die drei grossen Zahlen oben. */
.zahlenband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem;
  margin: 0 0 1.5rem;
}

.grossezahl {
  margin: 0;
  background: #fbf9f5;
  border: 1px solid var(--paper-3);
  padding: 1rem 1.15rem;
}

.grossezahl strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 2.4rem);
  line-height: 1.1;
  color: var(--copper-ink);
}

.grossezahl span {
  display: block;
  margin-top: .2rem;
  font-size: .9rem;
  color: var(--ink-3);
}

/* Ein Balken je Tag des Monats. */
.tagesband {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  list-style: none;
  margin: 0 0 .75rem;
  padding: 0;
  height: 9rem;
  overflow-x: auto;
}

.tagsaeule {
  flex: 1 1 0;
  min-width: .55rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  text-align: center;
}

.tagsaeule__balken {
  display: block;
  width: 100%;
  background: var(--copper);
  min-height: 2px;
}

.tagsaeule__tag {
  font-size: .65rem;
  color: var(--ink-3);
  padding-top: .2rem;
}

/* Rangliste: Name, Balken, Zahl. */
.rangliste { list-style: none; margin: 0; padding: 0; }

.rang {
  display: grid;
  grid-template-columns: minmax(6rem, 11rem) 1fr auto;
  align-items: center;
  gap: .6rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--paper-2);
}

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

.rang__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rang__balken {
  height: .7rem;
  background: var(--copper);
  min-width: 2px;
}

.rang__zahl {
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.karte-hinweis { background: var(--paper-2); }
.karte-hinweis p { margin: 0 0 .75rem; }
.karte-hinweis p:last-child { margin-bottom: 0; }

/* Am Telefon ist für die Namensspalte kein Platz. */
@media (max-width: 30rem) {
  .rang { grid-template-columns: 1fr auto; }
  .rang__balken { grid-column: 1 / -1; }
}

/* Balkenbreiten in 5er-Schritten. */
.balken-0 { width: 0; min-width: 0; }
.balken-5 { width: 5%; }
.balken-10 { width: 10%; }
.balken-15 { width: 15%; }
.balken-20 { width: 20%; }
.balken-25 { width: 25%; }
.balken-30 { width: 30%; }
.balken-35 { width: 35%; }
.balken-40 { width: 40%; }
.balken-45 { width: 45%; }
.balken-50 { width: 50%; }
.balken-55 { width: 55%; }
.balken-60 { width: 60%; }
.balken-65 { width: 65%; }
.balken-70 { width: 70%; }
.balken-75 { width: 75%; }
.balken-80 { width: 80%; }
.balken-85 { width: 85%; }
.balken-90 { width: 90%; }
.balken-95 { width: 95%; }
.balken-100 { width: 100%; }

/* In der Tagesreihe steuert dieselbe Klasse die Höhe. */
.tagsaeule__balken.balken-0 { height: 0; width: 100%; }
.tagsaeule__balken.balken-5 { height: 5%; width: 100%; }
.tagsaeule__balken.balken-10 { height: 10%; width: 100%; }
.tagsaeule__balken.balken-15 { height: 15%; width: 100%; }
.tagsaeule__balken.balken-20 { height: 20%; width: 100%; }
.tagsaeule__balken.balken-25 { height: 25%; width: 100%; }
.tagsaeule__balken.balken-30 { height: 30%; width: 100%; }
.tagsaeule__balken.balken-35 { height: 35%; width: 100%; }
.tagsaeule__balken.balken-40 { height: 40%; width: 100%; }
.tagsaeule__balken.balken-45 { height: 45%; width: 100%; }
.tagsaeule__balken.balken-50 { height: 50%; width: 100%; }
.tagsaeule__balken.balken-55 { height: 55%; width: 100%; }
.tagsaeule__balken.balken-60 { height: 60%; width: 100%; }
.tagsaeule__balken.balken-65 { height: 65%; width: 100%; }
.tagsaeule__balken.balken-70 { height: 70%; width: 100%; }
.tagsaeule__balken.balken-75 { height: 75%; width: 100%; }
.tagsaeule__balken.balken-80 { height: 80%; width: 100%; }
.tagsaeule__balken.balken-85 { height: 85%; width: 100%; }
.tagsaeule__balken.balken-90 { height: 90%; width: 100%; }
.tagsaeule__balken.balken-95 { height: 95%; width: 100%; }
.tagsaeule__balken.balken-100 { height: 100%; width: 100%; }

/* ─── Mediathek ──────────────────────────────────────────────
   Der Bildvorrat. Bilder tragen die Ansicht, nicht Dateinamen ·
   wer ein Foto sucht, erkennt es am Bild.
   ──────────────────────────────────────────────────────────── */

.medienzugabe { margin: 0 0 1.25rem; }

/* ── Liste oder Kacheln ── */

.medienansicht {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.25rem;
}

.medienansicht__wort {
  font-size: .85rem;
  color: var(--ink-3);
  margin-right: .2rem;
}

.medienansicht__wahl {
  padding: .3rem .8rem;
  border: 1px solid var(--paper-3);
  background: var(--paper);
  color: var(--ink-2);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
}

.medienansicht__wahl:hover { border-color: var(--ink-3); color: var(--ink); }

.medienansicht__wahl.ist-hier {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
}

.medienansicht__wahl:focus-visible {
  outline: 2px solid var(--copper-ink);
  outline-offset: 2px;
}

/* ── Ein Ordner, zum Auf- und Zuklappen ── */

/*
 * Ab dem zweiten gefüllten Ordner starten alle zu · dann sind die
 * geschlossenen Zeilen die Übersicht. Bei einem einzigen Fach wäre
 * Zuklappen sinnlos, dort steht der Vorrat offen (siehe $offen in
 * admin.php).
 */
.medienfach { padding-block: 0; }

/* Die Fächer stehen als ein Stapel · der Rahmen zwischen zweien
   soll eine Linie sein und nicht zwei. */
.medienfach + .medienfach { margin-top: -1px; }

.medienfach__griff {
  display: flex;
  align-items: center;
  gap: .6rem;
  /* Das Polster der Karte wieder herausgerechnet, damit die ganze
     Breite der Karte zur Trefferfläche wird und nicht nur die
     Wörter. */
  margin-inline: calc(-1 * var(--karte-polster));
  padding: var(--karte-polster);
  cursor: pointer;
  list-style: none;
}

.medienfach__griff::-webkit-details-marker { display: none; }

.medienfach__titel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
}

/* Der eigene Winkel · dasselbe Bauteil wie an der Seitenleiste. */
.medienfach__griff::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: translateY(-.15rem) rotate(45deg);
}

.medienfach[open] > .medienfach__griff::after {
  transform: translateY(.1rem) rotate(-135deg);
}

.medienfach[open] > .medienfach__griff {
  border-bottom: 1px solid var(--paper-3);
  margin-bottom: var(--karte-polster);
}

.medienfach__griff:focus-visible {
  outline: 2px solid var(--copper-ink);
  outline-offset: -2px;
}

.medienfach > :last-child { margin-bottom: var(--karte-polster); }

.medienfach__zahl {
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-3);
  background: var(--paper-2);
  border: 1px solid var(--paper-3);
  padding: .1rem .45rem;
}

/* ── Die Stücke ── */

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

/* Kacheln: zum Ansehen. Ein Bild gross, alles darunter. */
.medienliste--kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.25rem;
}

/*
 * Liste: zum Wiederfinden. Vorschau links, Felder daneben, der Fuss
 * rechts · eine Zeile je Bild statt einer Karte.
 *
 * Ein Raster und keine Flex-Zeile: Nur so stehen Name und Ordner bei
 * allen Bildern untereinander auf derselben Linie. Mit Flex richtete
 * sich jede Zeile nach ihrem eigenen Inhalt, und die Spalten
 * wanderten von Zeile zu Zeile.
 */
.medienliste--liste {
  display: grid;
  gap: .5rem;
}

.medienstueck {
  border: 1px solid var(--paper-3);
  background: #fbf9f5;
  padding: .75rem;
}

.medienliste--liste .medienstueck {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  align-items: start;
  gap: .9rem;
}

/* Feste Höhe, damit die Kacheln eine Reihe bilden statt zu treppen.
   contain statt cover: in einem Vorrat muss man das GANZE Bild
   sehen, sonst wählt man einen Ausschnitt, den es nicht gibt. */
.medienstueck__bild {
  display: block;
  width: 100%;
  height: 9rem;
  object-fit: contain;
  background: var(--paper-2);
  margin-bottom: .6rem;
}

.medienliste--liste .medienstueck__bild {
  height: 5rem;
  margin-bottom: 0;
}

.medienstueck__felder .feldsatz { margin-bottom: .75rem; }
.medienstueck__felder .feldsatz:last-of-type { margin-bottom: .5rem; }

/* In der Liste stehen Name und Ordner nebeneinander · beide sind
   kurz, und untereinander wäre die Zeile doppelt so hoch. */
.medienliste--liste .medienstueck__felder {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 0 .75rem;
  align-items: start;
}

.medienliste--liste .medienstueck__felder .feldsatz { margin-bottom: .4rem; }
.medienliste--liste .medienstueck__felder > .fussnote,
.medienliste--liste .medienstueck__felder > .medienstueck__wo {
  grid-column: 1 / -1;
  margin: 0;
}

.medienliste--liste .medienstueck__felder label { font-size: .8rem; }
.medienliste--liste .medienstueck__felder input,
.medienliste--liste .medienstueck__felder select {
  padding: .35rem .5rem;
  font-size: .95rem;
}

/*
 * Speichern und Entfernen in EINER Zeile.
 *
 * Vorher stand "Speichern" linksbündig unter dem Formular und
 * "Entfernen" rechtsbündig in der Zeile darunter · zwei Knöpfe, die
 * aussahen, als seien sie verrutscht. Sie gehören zu zwei
 * verschiedenen Formularen und bleiben es auch; der Fuss legt sie
 * nur nebeneinander.
 */
.medienstueck__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
}

.medienliste--kacheln .medienstueck__fuss {
  justify-content: space-between;
}

/* In der Liste steht der Fuss als eigene Spalte rechts · dort
   untereinander, weil die Spalte schmal ist. */
.medienliste--liste .medienstueck__fuss {
  margin-top: 0;
  flex-direction: column;
  align-items: stretch;
}

.medienstueck__fuss .knopf {
  padding: .4rem .9rem;
  font-size: .9rem;
}

.medienstueck__weg { margin: 0; }
.medienstueck__weg .knopf { color: var(--schlecht); border-color: currentColor; }
.medienliste--liste .medienstueck__weg .knopf { width: 100%; }

/* Der Fuss eines Ordners: umbenennen links, entfernen rechts.
   Die beiden gehören auseinander · das eine ist ein Griff, den
   man im Vorbeigehen macht, das andere fragt nach. */
.medienfach__fuss {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--paper-3);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem 1rem;
}

.medienfach__um {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.medienfach__um label {
  font-size: .82rem;
  color: var(--ink-3);
}

.medienfach__um input[type="text"] {
  width: 12rem;
  margin: 0;
}

.medienfach__weg { text-align: right; }

/* Am Telefon nebeneinander zu klein · dann untereinander, und das
   Namensfeld nimmt die ganze Breite. */
@media (max-width: 40rem) {
  .medienfach__fuss { flex-direction: column; align-items: stretch; }
  .medienfach__um input[type="text"] { width: 100%; }
  .medienfach__weg { text-align: left; }
}

/* Am Telefon ist für drei Spalten kein Platz · dann wieder
   untereinander, mit der Vorschau über den Feldern. */
@media (max-width: 46rem) {
  .medienliste--liste .medienstueck {
    grid-template-columns: 5rem minmax(0, 1fr);
  }
  .medienliste--liste .medienstueck__felder {
    grid-template-columns: minmax(0, 1fr);
  }
  .medienliste--liste .medienstueck__fuss {
    grid-column: 1 / -1;
    flex-direction: row;
    margin-top: .5rem;
  }
  .medienliste--liste .medienstueck__weg .knopf { width: auto; }
}

/* ── Auswahl direkt am Bildplatz ── */

.medienwahl {
  margin-top: .75rem;
  border-top: 1px solid var(--paper-3);
}

.medienwahl summary {
  cursor: pointer;
  font-weight: 500;
  padding: .75rem 0;
  min-height: 2.75rem;
}

.medienwahl__liste {
  list-style: none;
  margin: 0 0 .5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: .6rem;
  max-height: 22rem;
  overflow-y: auto;
}

.medienwahl__stueck {
  display: block;
  cursor: pointer;
  border: 2px solid var(--paper-3);
  padding: .3rem;
  background: #fbf9f5;
}

.medienwahl__stueck img {
  display: block;
  width: 100%;
  height: 4.5rem;
  object-fit: contain;
  background: var(--paper-2);
}

.medienwahl__stueck span {
  display: block;
  font-size: .75rem;
  color: var(--ink-3);
  margin-top: .25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Das Radiofeld bleibt sichtbar und bedienbar · es ist die
   Tastaturbedienung. Die Umrandung ist nur die Zugabe fuer die Maus. */
.medienwahl__stueck input { margin-bottom: .25rem; }
.medienwahl__stueck:has(input:checked) {
  border-color: var(--copper);
  background: var(--paper-2);
}
.medienwahl__stueck:has(input:focus-visible) { outline: 2px solid var(--ink); }

/* Die Ordner der Mediathek, als Klappfaecher auch in der Auswahl.
   Nur ab zwei vollen Faechern · sonst bleibt es die flache Liste. */
.medienwahl__fach {
  border: 1px solid var(--paper-3);
  margin-bottom: -1px;
}

/* Mit summary davor: Die aeltere Regel ".medienwahl summary" setzt
   ihr Padding auf ".75rem 0" und ist spezifischer als eine Klasse
   allein — ohne das Element im Selektor klebten Titel und Pfeil an
   den Raendern des Fachs. */
summary.medienwahl__fachgriff {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .55rem .9rem;
  min-height: 2.5rem;
  font-weight: 500;
  list-style: none;
}

.medienwahl__fachgriff::-webkit-details-marker { display: none; }

.medienwahl__fachgriff::after {
  content: "";
  flex: 0 0 auto;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform .15s ease;
}

.medienwahl__fach[open] > .medienwahl__fachgriff::after {
  transform: rotate(225deg);
}

.medienwahl__fachgriff:focus-visible { outline: 2px solid var(--ink); }

.medienwahl__zahl {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-3);
  background: var(--paper-2);
  border: 1px solid var(--paper-3);
  padding: .1rem .45rem;
}

.medienwahl__fach .medienwahl__liste {
  margin: 0;
  padding: .5rem .9rem .75rem;
}

/* ============================================================
   Die Vorschau
   ============================================================

   Die Website neben dem Formular, in einem Rahmen. Das Formular
   scrollt, die Vorschau bleibt stehen · deshalb klebt sie, so wie
   die Seitenleiste, eine Kopfhöhe unter dem Fensterrand.

   Drei Breiten, drei Anordnungen:

     unter 60rem   Leiste, Formular und Vorschau untereinander.
                   Die Vorschau bekommt eine feste Höhe, sonst
                   wäre sie so lang wie die ganze Website.
     60 bis 78rem  zwei Spalten wie bisher, die Vorschau darunter
                   über die volle Breite.
     ab 78rem      drei Spalten: Leiste, Formular, Vorschau.

   78rem sind 1248 Punkte · die Grenze liegt bewusst knapp unter
   den 1280 eines gewöhnlichen Notebooks. Bei 90rem, wo sie zuerst
   stand, bekam genau dieses Notebook die Vorschau unter dem
   Formular zu sehen und damit gar nicht: Wer den Schalter drückt
   und nichts passieren sieht, drückt ihn nicht wieder.

   Darunter reicht der Platz nicht. Das Formular braucht seine
   Breite für Preiszeilen mit fünf Feldern, und eine Website in
   einer 20rem-Spalte zeigt nichts, was man wiedererkennt.
   ============================================================ */

.vorschau {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--ink);
  color: var(--on-ink);
}

@media (max-width: 77.999rem) {
  /* Untereinander: Ohne feste Höhe stünde hier die ganze Website
     als endlose Bahn, und der Fuß des Formulars wäre unerreichbar. */
  .vorschau { height: 80vh; }
}

@media (min-width: 60rem) {
  /* In der zweispaltigen Anordnung nimmt sie die ganze Zeile unter
     Leiste und Formular ein. Ohne diese Zeile setzte das Raster sie
     in die Spalte der Seitenleiste, also auf 16.5rem Breite. */
  .rahmen--vorschau .vorschau { grid-column: 1 / -1; }
}

@media (min-width: 78rem) {
  .rahmen--vorschau {
    grid-template-columns:
      var(--leiste-breite)
      minmax(0, 1fr)
      minmax(22rem, 36%);
  }

  .rahmen--vorschau .vorschau {
    grid-column: auto;
    position: sticky;
    top: var(--kopf-hoehe);
    height: calc(100dvh - var(--kopf-hoehe));
  }
}

/* ── Die Leiste über der Vorschau ────────────────────────── */

.vorschau__leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem .75rem;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

/* Der Dateiname der Seite, die gerade im Rahmen steht. Er ändert
   sich, sobald jemand in der Vorschau weiterblättert · das ist die
   einzige Stelle, an der man sieht, wo man ist. */
.vorschau__wo {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .8rem;
  opacity: .85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vorschau__breiten {
  display: flex;
  flex: none;
  gap: .25rem;
}

.vorschau__breite {
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .78rem;
  line-height: 1;
  padding: .35rem .7rem;
  cursor: pointer;
}

.vorschau__breite:hover { background: rgba(255, 255, 255, .1); }

.vorschau__breite.ist-an {
  background: var(--on-ink);
  color: var(--ink);
  border-color: var(--on-ink);
}

/* ── Die Bühne ───────────────────────────────────────────── */

/*
 * Der Rahmen steht auf einer eigenen Fläche, damit die Website in
 * der Telefonbreite nicht im Nichts hängt. Grau und nicht schwarz:
 * Eine dunkle Kundenseite verschwände sonst in ihrem Untergrund.
 */
.vorschau__buehne {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  background: #4a4a4a;
  padding: 0;
}

.vorschau__seite {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  display: block;
}

/*
 * Telefonbreite.
 *
 * 24rem sind rund 384 Punkte · das ist die Breite, in der die
 * meisten Kundenseiten gelesen werden. Am Schreibtisch gebaut, am
 * Telefon gelesen: Wer eine Überschrift ändert, soll hier sehen,
 * ob sie dort noch in eine Zeile passt.
 */
.vorschau__buehne.ist-telefon { padding: .75rem; }
.vorschau__buehne.ist-telefon .vorschau__seite {
  max-width: 24rem;
  border-radius: .5rem;
}

/* ── Der Satz darunter ───────────────────────────────────── */

.vorschau__fuss {
  margin: 0;
  padding: .55rem .75rem;
  font-size: .8rem;
  line-height: 1.4;
  opacity: .8;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

/* ── Der Schalter im Kopf ────────────────────────────────── */

.kopf-ansehen--schalter.ist-an {
  border-bottom-color: currentColor;
  font-weight: 600;
}

/* ── Der Feldsatz, um den es gerade geht ─────────────────────
   Gesetzt vom Skript nach einem Klick in der Vorschau. Ein Strich
   am linken Rand und nichts weiter: Ein farbiger Kasten um ein
   Formularfeld sähe nach einem Fehler aus. */

.feldsatz.ist-gemeint,
.bildplatz.ist-gemeint {
  position: relative;
}

.feldsatz.ist-gemeint::before,
.bildplatz.ist-gemeint::before {
  content: "";
  position: absolute;
  inset-block: -.35rem;
  inset-inline-start: calc(var(--rand) * -.5);
  width: 3px;
  border-radius: 3px;
  background: var(--copper);
}

/* ── Fokus: nur das angeklickte Feld ────────────────────────
   Gesetzt vom Skript nach einem Klick in der Vorschau. Der
   Streifen sagt, was offen ist, und holt das ganze Formular
   zurück.

   Ausgeblendet wird mit einer Klasse und nicht mit dem
   hidden-Attribut: Ein Feldsatz ist mal ein <p>, mal ein
   <fieldset>, mal ein <div>, und jeder hat hier seine eigene
   Anzeigeart. Eine Klasse, die nur display: none setzt, nimmt
   man wieder weg, ohne die richtige zu kennen. */

.ist-weg { display: none; }

/* Das display unten schluege sonst das hidden-Attribut · dasselbe
   Muster wie beim Zuschnitt und der Wahlvorschau. */
.fokus[hidden] { display: none; }

.fokus {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  margin-bottom: 1.75rem;
  padding: .85rem 1rem;
  border-radius: .5rem;
  background: var(--paper-2);
  border-left: 3px solid var(--copper);
}

.fokus__wo {
  margin: 0;
  flex: 1 1 14rem;
  min-width: 0;
}

/* Kleiner und ruhiger als der Feldname dahinter: Die Zeile sagt
   zweierlei, und nur eines davon ist die Auskunft. */
.fokus__wort {
  display: block;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.fokus__wo strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  font-stretch: 88%;
}

/* Wie viele Änderungen unsichtbar mitwarten. Steht in derselben
   Zeile und nicht als Hinweis darüber: Es ist eine Fußnote zum
   Speichern, keine Warnung. */
.fokus__rest {
  margin: 0;
  flex: 1 1 100%;
  font-size: .85rem;
  color: var(--copper-ink);
}

.fokus__raus { flex: none; }

/* Am Telefon steht der Knopf unter der Zeile statt daneben ·
   nebeneinander bleiben von beidem zwei Wörter übrig. */
@media (max-width: 34rem) {
  .fokus { flex-direction: column; align-items: stretch; }
  .fokus__raus { width: 100%; }
}

/* ── Ausrichtung: die drei Knöpfe am Textfeld ───────────────
   Klein und unauffällig unter der Hilfe: Sie sind eine
   Stellschraube, kein zweites Feld. Wer sie nicht braucht,
   soll über sie hinweglesen können. */

.ausrichtung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin-top: .5rem;
}

.ausrichtung__wort {
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: .35rem;
}

.ausrichtung__wahl { position: relative; }

/* Das Radiofeld selbst wird nicht versteckt, sondern über die
   Beschriftung gelegt: So bleibt es für die Tastatur erreichbar
   und der Fokusring sitzt an der sichtbaren Fläche. */
.ausrichtung__wahl input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.ausrichtung__text {
  display: block;
  padding: .3rem .7rem;
  border: 1px solid var(--paper-3);
  border-radius: 999px;
  font-size: .82rem;
  line-height: 1.3;
  color: var(--ink-2);
  background: var(--paper);
}

/* Das Zeichen gehoert der Direkt-Ansicht; in den Formularen stehen
   die Woerter. Beide liegen im selben Etikett, das Stylesheet
   entscheidet — so gibt es nur EIN Markup fuer beide Welten. */
.ausrichtung__zeichen { display: none; }

.ausrichtung__wahl:hover .ausrichtung__text { border-color: var(--ink-3); }

.ausrichtung__wahl input:checked ~ .ausrichtung__text {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

.ausrichtung__wahl input:focus-visible ~ .ausrichtung__text,
.ausrichtung__wahl input:focus-visible ~ .ausrichtung__zeichen {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}

/* ============================================================
   Direkt bearbeiten
   ============================================================

   Der eigene Punkt oben in der Leiste: rechts die Website, in der
   Mitte ein ziehbarer Teiler, links immer nur EIN Feld — die
   kleinste Einheit, die fuer sich stehen kann. Beschriftet wird
   dort fast nichts: die schmale Titelzeile der Huelle sagt, was
   man erwischt hat, alles Erklaerende wohnt weiter in den
   Formularen der Bereiche.

   Ein Schreibtisch-Werkzeug. Unter 78rem (der erprobten Grenze,
   unter der keine Vorschau neben etwas passt) verschwindet der
   Eintrag aus der Leiste; wer die Ansicht trotzdem oeffnet,
   bekommt einen Satz dazu und darunter das nackte Formular.
   ============================================================ */

@media (max-width: 77.999rem) {
  .seitenleiste__eintrag--direkt { display: none; }

  /* Ohne Platz keine Vorschau, kein Teiler, kein Ruhezustand ·
     uebrig bleibt ein gewoehnliches Formular mit allen Feldern. */
  .rahmen--direkt .vorschau,
  .rahmen--direkt .teiler,
  .rahmen--direkt .ruhe { display: none; }
}

@media (min-width: 78rem) {
  .direkt-schmal { display: none; }

  /*
   * Die Karte nimmt sich, was da ist · nicht mehr feste 30rem.
   *
   * Gemessen am 09.08.2026 an den Telefonzeiten von Meyer & Schliep
   * (Zeitplan mit Mittagspause, vier Uhrzeiten je Tag). Die
   * Tageszeile bricht nicht allmaehlich um, sondern in Stufen:
   *
   *     Spalte    Zeilenhoehe   ganzer Plan
   *     bis  640     170 Punkte     1199
   *     ab   700     123             869
   *     ab   820      89             634
   *     ab   940      58             417
   *
   * Daran scheitert jede feste Voreinstellung: 30rem (480) und
   * 38rem (608) liegen in derselben Stufe, die Erhoehung haette gar
   * nichts gebracht. Gebraucht werden 940, und die sind auf einem
   * 1280er Bildschirm nicht immer da.
   *
   * Deshalb darf die Karte bis 52rem wachsen, und die Vorschau
   * nimmt den Rest · gebremst nur durch ihre eigene Untergrenze von
   * 22rem. Wo es eng wird, schiebt diese Untergrenze die Karte
   * wieder zurueck, statt dass etwas ueberlaeuft:
   *
   *     Fenster  Leiste     Karte   Vorschau   Zeilenhoehe
   *     1512     zu          832       624       89 (vorher 170)
   *     1512     offen       832       404       89
   *     1280     zu          832       392       89
   *
   * Ein Verhaeltnis (3fr zu 2fr) waere naheliegender gewesen und
   * gibt hier das falsche Ergebnis: Bei minmax(20rem, 3fr) zaehlt
   * die Untergrenze als Grundgroesse, und die Vorschau bekam am
   * Ende MEHR statt weniger. Nachgemessen, nicht vermutet.
   *
   * Die letzte Stufe (58 Punkte, alles in einer Zeile) braucht 940
   * und damit eine Vorschau unter 22rem · die waere dann keine
   * Seitenansicht mehr, sondern ein Streifen. Wer sie trotzdem
   * will, zieht am Teiler; das Skript setzt dann --direkt-links,
   * und die Vorschau bekommt schlicht den Rest.
   */
  .rahmen--direkt {
    grid-template-columns:
      var(--leiste-breite)
      minmax(20rem, var(--direkt-links, 52rem))
      .75rem
      minmax(22rem, 1fr);
  }

  .rahmen--direkt .vorschau,
  /*
   * Der Teiler bekommt dieselbe Hoehe wie die Vorschau daneben.
   *
   * Ohne sie war er so hoch wie sein Inhalt · und sein Inhalt ist
   * nichts. Die Linie (inset-block: 0) war damit null Punkte hoch,
   * also unsichtbar, und der Griff sass oben am Kopf statt auf
   * halber Hoehe. Ziehen ging trotzdem, wenn man die 12 Punkte
   * breite Spalte zufaellig traf. Gefunden am 09.08.2026 beim
   * Nachsehen, warum niemand den Teiler benutzt.
   *
   * align-items: start kommt von .rahmen--leiste und gilt hier
   * weiter · deshalb muss die Hoehe an beiden Spalten stehen.
   */
  .rahmen--direkt .teiler {
    grid-column: auto;
    position: sticky;
    top: var(--kopf-hoehe);
    height: calc(100dvh - var(--kopf-hoehe));
  }

  /* Solange nichts angeklickt ist, zeigt die Spalte nur den
     Ruhezustand. Die Karten sind da (und stehen ohne JavaScript
     ganz normal untereinander), nur eben nicht zu sehen. */
  .rahmen--direkt .ist-ruhe [data-feldsatz] { display: none; }
}

/* ── Der Teiler ──────────────────────────────────────────── */

.teiler {
  display: none;
  cursor: col-resize;
  touch-action: none;
  position: relative;
}

@media (min-width: 78rem) {
  .teiler { display: block; }
}

/* Die sichtbare Linie ist schmaler als die Grifffläche. */
.teiler::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(50% - 1px);
  width: 2px;
  background: var(--paper-3);
}

.teiler:hover::before,
.teiler.zieht::before { background: var(--copper); }

/*
 * Der Griff · drei Punkte auf halber Hoehe.
 *
 * Die Linie allein war unsichtbar als Bedienelement: Sie sieht aus
 * wie eine Trennlinie, und niemand zieht an einer Trennlinie. Wer
 * die Spalte breiter haben will, muss sehen, dass er das darf.
 *
 * Gemalt aus einem wiederholten Farbverlauf statt aus drei
 * Elementen · ein Pseudoelement hat nur ein ::before und ein
 * ::after, und ::before ist die Linie.
 */
.teiler::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: calc(50% - 2px);
  width: 4px;
  height: 1.75rem;
  margin-top: -.875rem;
  border-radius: 2px;
  background:
    repeating-linear-gradient(
      to bottom,
      var(--ink-3) 0 3px,
      transparent 3px 7px
    );
}

.teiler:hover::after,
.teiler.zieht::after {
  background:
    repeating-linear-gradient(
      to bottom,
      var(--copper) 0 3px,
      transparent 3px 7px
    );
}

/* ── Der Ruhezustand ─────────────────────────────────────── */

.ruhe { margin-bottom: 1.5rem; }

.ruhe__satz {
  margin: 0 0 1.25rem;
  padding: .85rem 1rem;
  border-radius: .5rem;
  background: var(--paper-2);
  color: var(--ink-2);
  line-height: 1.5;
}

/*
 * Der Griff der Restliste · zugeklappt ist er alles, was man sieht.
 *
 * Nicht mehr in Grossbuchstaben: Als Ueberschrift ueber einer
 * dastehenden Liste war das richtig, als anklickbare Zeile ist es
 * ein Knopf und soll wie einer lesbar sein.
 *
 * list-style: none samt ::-webkit-details-marker, weil das eigene
 * Dreieck danebensteht · sonst stuenden zwei da. Und display muss
 * mit, sonst schluckt flex den Marker ganz (siehe .wer__griff).
 */
.ruhe__titel {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .5rem 0;
  cursor: pointer;
  font-size: .88rem;
  color: var(--ink-2);
  list-style: none;
}

.ruhe__titel::-webkit-details-marker { display: none; }

.ruhe__titel:hover { color: var(--ink); }

.ruhe__titel::before {
  content: "";
  flex: none;
  width: .4rem;
  height: .4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.1rem) rotate(-45deg);
  transition: transform .15s ease;
}

.ruhe__rest[open] .ruhe__titel::before {
  transform: translateY(-.05rem) rotate(45deg);
}

.ruhe__rest[open] .ruhe__titel { margin-bottom: .5rem; }

@media (prefers-reduced-motion: reduce) {
  .ruhe__titel::before { transition: none; }
}

.restliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .4rem;
}

/*
 * Zugeklappt heisst zugeklappt.
 *
 * Ein <details> verbirgt seinen Inhalt ueber eine Regel des
 * Browsers · und die verliert gegen jede Regel aus dieser Datei.
 * Weil .restliste oben display: grid setzt, stand die Liste beim
 * Zuklappen weiter da: der Griff drehte seinen Winkel, darunter
 * aenderte sich nichts. Gemessen am 09.08.2026 · 2005 Punkte
 * Listenhoehe, offen wie zu.
 *
 * Wer einem Kind eines <details> ein display gibt, muss den
 * geschlossenen Fall selbst mitschreiben.
 */
.ruhe__rest:not([open]) .restliste { display: none; }

.restliste__knopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .6rem;
  width: 100%;
  min-height: 44px;
  padding: .55rem .8rem;
  border: 1px solid var(--paper-3);
  border-radius: .5rem;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.restliste__knopf:hover { border-color: var(--ink-3); }

.restliste__titel { font-weight: 600; }

.restliste__stand {
  font-size: .82rem;
  color: var(--ink-3);
}

/* ── Die Huelle um das angeklickte Feld ──────────────────── */

/*
 * In der Direkt-Ansicht wird der Fokusstreifen zur Kopfzeile der
 * Karte: Titel links, Handlungen rechts, darunter erst bei Bedarf
 * der Zeichenzaehler und die Zeile ueber mitwartende Aenderungen.
 * Er klebt oben, damit die Handlungen auch bei einer langen Karte
 * (Wochenplan, Galerie) erreichbar bleiben.
 */
.rahmen--direkt .fokus {
  position: sticky;
  top: calc(var(--kopf-hoehe) + .5rem);
  z-index: 5;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--paper-3);
  border-left: 3px solid var(--copper);
  box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .07);
}

.fokus__tasten {
  display: flex;
  flex: none;
  gap: .3rem;
  margin-left: auto;
}

/* Steht .fokus__tasten mit margin-left auto in der Zeile, braucht
   der Titel die Erlaubnis zu schrumpfen. */
.rahmen--direkt .fokus__wo { flex: 0 1 auto; }

.fokus__taste,
.fokus__zu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--paper-3);
  border-radius: .45rem;
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
}

.fokus__taste:hover,
.fokus__zu:hover { border-color: var(--ink-3); color: var(--ink); }

.fokus__zu { flex: none; }

/* Der Papierkorb im gedrueckten Zustand: die Zeile ist zum
   Entfernen vorgemerkt. */
.fokus__taste--weg.ist-an {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

.fokus__zaehler {
  margin: 0;
  flex: 1 1 100%;
  font-size: .82rem;
  color: var(--ink-3);
}

.fokus__zaehler.ist-voll { color: var(--copper-ink); font-weight: 600; }

/* ── Die nackte Karte ────────────────────────────────────── */

/*
 * Beschriftungen und Hilfetexte gehoeren den Formularen. Hier
 * traegt die Huelle den Titel, und was uebrig bleibt, ist das
 * Feld selbst. Die Spaltenbeschriftungen in Listenzeilen bleiben
 * stehen — ohne sie raete man, welches der kurzen Felder der
 * Preis ist. Auch die Woerter am Schalter und an den Kaestchen
 * bleiben: sie SIND der Wert.
 */
.rahmen--direkt #pflegeformular > .feldsatz > label:not(.schalter),
.rahmen--direkt .feldsatz > small,
.rahmen--direkt fieldset.feldsatz > legend,
.rahmen--direkt fieldset.feldsatz > small,
.rahmen--direkt .bildplatz > small,
.rahmen--direkt .listenstand {
  display: none;
}

/* Der Bereichstitel haelt sich zurueck · die Spalte gehoert der
   Karte. */
.rahmen--direkt h1 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

/* ── Zeilenfokus: nur die eine Zeile ─────────────────────── */

.ist-weg-zeile { display: none !important; }

/* Rund um eine fokussierte Zeile verschwindet das Drumherum der
   Liste: Suche, die Vorlagen zum Anlegen, das Entfernen der
   ganzen Gruppe. Das Plus an der Huelle uebernimmt das Anlegen. */
.hat-zeilenfokus .listensuche,
.hat-zeilenfokus .gruppe-neu,
.hat-zeilenfokus .knopf-dazu,
.hat-zeilenfokus .weg-gruppe,
.feldsatz-personen.hat-zeilenfokus .personenzugabe:not([open]) { display: none; }

/* Das Entfernen-Kaestchen der fokussierten Zeile wandert als
   Papierkorb in die Huelle. Das Kaestchen bleibt im Formular (es
   traegt den Wert), nur eben unsichtbar. */
.rahmen--direkt .hat-zeilenfokus .zeile__tasten .weg,
.rahmen--direkt .hat-zeilenfokus .personenstueck__fuss .weg { display: none; }

/* Die aufgeklappte Gruppe um die eine Zeile: nur noch Rahmenwerk,
   kein eigener Griff. */
.rahmen--direkt .hat-zeilenfokus .gruppe > summary { pointer-events: none; }

/* ── Ausrichtung als Zeichen ─────────────────────────────── */

.rahmen--direkt .ausrichtung__zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--paper-3);
  border-radius: .45rem;
  background: var(--paper);
  color: var(--ink-2);
}

.rahmen--direkt .ausrichtung__wahl:hover .ausrichtung__zeichen {
  border-color: var(--ink-3);
}

.rahmen--direkt .ausrichtung__wahl input:checked ~ .ausrichtung__zeichen {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

/* Das Wort bleibt fuer Vorleser da, nur nicht auf dem Schirm. */
.rahmen--direkt .ausrichtung__text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rahmen--direkt .ausrichtung__wort { display: none; }

/* ── Der Seitenwechsler ueber der Vorschau ───────────────── */

.vorschau__seitenwahl {
  min-width: 0;
  flex: 0 1 auto;
  padding: .35rem .5rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: .4rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .82rem;
}

.vorschau__seitenwahl option { color: #111; }

/* ============================================================
   Abschnitte: Zwischenueberschriften im Formular
   ============================================================

   Ein Feld mit 'abschnitt' beginnt einen Abschnitt. Auf dem
   Schreibtisch sind das Ueberschriften mit einer Sprungleiste
   darueber; am Telefon wird jeder Abschnitt zur Aufklappgruppe —
   dasselbe Kaestchen-Muster wie bei der Seitenleiste, das
   Stylesheet entscheidet je Breite, ohne Skript und ohne Blitzen.
   ============================================================ */

.abschnitte {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.75rem;
}

.abschnitte__punkt {
  padding: .35rem .8rem;
  border: 1px solid var(--paper-3);
  border-radius: 999px;
  font-size: .82rem;
  color: var(--ink-2);
  text-decoration: none;
  background: var(--paper);
}

.abschnitte__punkt:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

.abschnitt {
  margin-block: 2.25rem;
  scroll-margin-top: calc(var(--kopf-hoehe) + 1.5rem);
}

.abschnitt:first-of-type { margin-top: 1.5rem; }

/*
 * Die Sprungmarke vor jedem Feld · Ziel von #f-<feldname> aus dem
 * Schnellzugriff.
 *
 * Nimmt keine Hoehe ein und ist nirgends zu sehen; sie steht nur
 * da, damit der Browser eine Stelle zum Anspringen hat. Der
 * Abstand nach oben ist derselbe wie bei den Abschnitten · der Kopf
 * klebt fest, und ohne die Reserve landet die Ueberschrift des
 * Feldes darunter.
 */
.feldmarke {
  display: block;
  height: 0;
  scroll-margin-top: calc(var(--kopf-hoehe) + 1.5rem);
}

.abschnitt__griff {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  font-stretch: 88%;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--paper-3);
  margin-bottom: 1.25rem;
}

@media (min-width: 60rem) {
  /* Auf dem Schreibtisch ist der Griff eine Ueberschrift und kein
     Schalter · immer offen, nichts zum Danebenklicken. */
  .abschnitt__griff { pointer-events: none; }
}

@media (max-width: 59.999rem) {
  .abschnitte { display: none; }

  .abschnitt { margin-block: 1rem; }

  .abschnitt__griff {
    cursor: pointer;
    min-height: 48px;
    padding: .6rem .2rem;
    margin-bottom: 0;
  }

  /* Der eigene Winkel, wie an der Seitenleiste. */
  .abschnitt__griff::after {
    content: "";
    flex: none;
    margin-left: auto;
    width: .5rem;
    height: .5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-.15rem) rotate(45deg);
    transition: transform .15s ease;
  }

  .abschnitt-schalter:checked ~ .abschnitt__griff::after {
    transform: translateY(.1rem) rotate(-135deg);
  }

  .abschnitt-schalter:focus-visible ~ .abschnitt__griff {
    outline: 2px solid var(--copper);
    outline-offset: -2px;
  }

  .abschnitt__innen { display: none; }

  .abschnitt-schalter:checked ~ .abschnitt__innen { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .abschnitt__griff::after { transition: none; }
}

/* ============================================================
   VORFUEHRBETRIEB · Abweichungen vom Baustein
   ============================================================

   Diese Installation ist die offene Vorfuehrung unter
   studio-siemering.de/arbeiten/trattoria/. Ueber dem Kopf steht
   dort das Musterband von Studio Siemering · gestaltet in
   ../../../muster.css, hier steht nur, was es fuer die
   Oberflaeche bedeutet.

   Und das ist genau eine Sache: Es nimmt oben Hoehe weg.

   Seitenleiste und Vorschau kleben eine Kopfhoehe unter dem
   Fensterrand und sind um dasselbe Mass kuerzer als das Fenster
   · so passt die Spalte beim ersten Blick genau hinein, und
   unten bleibt der eigene Name sichtbar. Steht ueber dem Kopf
   noch ein Band, beginnen beide Spalten um dessen Hoehe tiefer
   und ragen um dieselbe Hoehe unter den Fensterrand. Sichtbar
   waere davon ausgerechnet das, was unten steht: der Name in der
   Leiste und der Fuss der Vorschau.

   GEMESSEN, NICHT GERATEN. In Chrome bei geladener Schrift:

     unter  46rem   60 Punkte   Satz faellt weg, Marke und Taste
     46 bis 90rem   96 Punkte   Satz umgebrochen auf zwei Zeilen
     ab     90rem   60 Punkte   alles in einer Zeile

   ZU VIEL IST HIER BESSER ALS ZU WENIG. Ist der Wert zu klein,
   ragt die Leiste unter den Fensterrand und unten fehlt genau
   das, was man sucht. Ist er zu gross, beginnt sie ein Stueck
   tiefer · und der Streifen darueber ist unsichtbar, weil der
   Rahmen dort denselben dunklen Ton malt.

   DESHALB WECHSELT DIE ZWEITE STUFE ERST BEI 90REM, obwohl der
   Satz schon ab rund 82rem in eine Zeile passt. Der Grund steht
   im Messfehler, der beim ersten Anlauf drinstand: Gemessen
   wurde, bevor die Schrift geladen war. Die Ersatzschrift ist
   schmaler, der Umbruch fiel damit 10rem zu frueh, und der Wert
   waere auf jedem Rechner zu klein gewesen, der die richtige
   Schrift hat. Der Abstand zur gemessenen Kante ist Absicht.
   ============================================================ */

:root { --musterband-hoehe: 3.75rem; }

@media (min-width: 46rem) {
  :root { --musterband-hoehe: 6rem; }
}

@media (min-width: 90rem) {
  :root { --musterband-hoehe: 3.75rem; }
}

@media (min-width: 60rem) {
  .seitenleiste {
    top: calc(var(--kopf-hoehe) + var(--musterband-hoehe));
    height: calc(100dvh - var(--kopf-hoehe) - var(--musterband-hoehe));
  }
}

@media (min-width: 78rem) {
  .rahmen--vorschau .vorschau {
    top: calc(var(--kopf-hoehe) + var(--musterband-hoehe));
    height: calc(100dvh - var(--kopf-hoehe) - var(--musterband-hoehe));
  }
}

/* Die Karte "worum es gerade geht" beim direkten Bearbeiten haengt
   an derselben Kante. */
.rahmen--direkt .fokus {
  top: calc(var(--kopf-hoehe) + var(--musterband-hoehe) + .5rem);
}