/* ==========================================================================
   Adminbereich — eigene Oberfläche, aber dieselben Design-Tokens wie
   die Website (tokens.css). Bewusst schlicht: Hier wird gearbeitet, nicht
   repräsentiert. Alles muss auf einen Blick auffindbar sein, auch für
   jemanden, der die Seite alle paar Wochen einmal öffnet.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

body {
  font-family: var(--schrift-text);
  font-size: var(--text-md);
  line-height: var(--zeilenhoehe);
  color: var(--farbe-text);
  background: var(--grau-50);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }

:where(h1, h2, h3) {
  font-family: var(--schrift-display);
  font-weight: var(--gewicht-kopf);
  line-height: var(--zeilenhoehe-kopf);
  letter-spacing: var(--laufweite-kopf);
}

:focus-visible {
  outline: 3px solid var(--farbe-akzent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.huelle {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--raum-5);
}
.huelle--schmal { max-width: 720px; }

/* --------------------------------------------------------------------------
   Kopfleiste

   Zwei Spalten, zwei Zeilen. Links die Marke, rechts oben der Kontobereich,
   rechts unten die Navigation.

   ALLES BEGINNT AN DERSELBEN KANTE, direkt neben dem Logo. Die linke Spalte
   ist genau so breit wie die Marke, die rechte nimmt den Rest -- Kontobereich
   und Navigation stehen darin linksbündig und damit exakt untereinander.

   Zwei Anläufe brauchte das: Erst stand die Marke über beide Zeilen, dann
   rückte die Navigation um 200 Pixel nach rechts und stand nicht mehr über
   der Überschrift darunter. Danach dehnte eine 1fr-Spalte die Marke über den
   freien Platz und schob Menü und Kontobereich an den rechten Rand -- mit
   einer Lücke von gut 300 Pixeln dazwischen.
   -------------------------------------------------------------------------- */

.kopfleiste {
  background: var(--grau-0);
  border-bottom: 1px solid var(--farbe-rand);
  margin-bottom: var(--raum-8);
}

.kopfleiste__raster {
  display: grid;
  /* auto 1fr, nicht 1fr auto: Die Marke bekommt genau ihre Breite, alles
     Weitere schliesst direkt daneben an. Andersherum dehnte sich die erste
     Spalte über den freien Platz und schob Kontobereich und Navigation an
     den rechten Rand -- zwischen Logo und Menü klaffte dann eine Lücke von
     gut 300 Pixeln. */
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "marke  konto"
    "marke  menue";
  column-gap: var(--raum-6);
  align-items: center;
  padding-block: var(--raum-4) 0;
}

/* --- Marke --- */

.kopfleiste__marke {
  grid-area: marke;
  display: flex;
  align-items: center;
  justify-self: start;
  align-self: center;
  padding-bottom: var(--raum-4);
}
.kopfleiste__marke img { height: 3.5rem; width: auto; }

/* --- Kontobereich --- */

.kopfleiste__konto {
  grid-area: konto;
  /* start: beginnt an derselben Kante wie die Navigation darunter. */
  justify-self: start;
  display: flex;
  align-items: center;
  gap: var(--raum-4);
  flex-wrap: wrap;
  /* Eine Stufe kleiner als die Navigation: Passwort und Abmelden braucht man
     ein-, zweimal im Monat, die Navigation bei jedem Klick. */
  font-size: var(--text-sm);
  padding-bottom: var(--raum-3);
}
.kopfleiste__konto .knopf { padding-block: var(--raum-1); font-size: var(--text-sm); }

/* Wer ist angemeldet. Der Strich links trennt die beiden Wege hinaus von
   der Person -- Passwort und Website sind Ziele, Miriam ist ein Zustand. */
.kopfleiste__wer {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  font-weight: 600;
  color: var(--farbe-akzent);
  padding-left: var(--raum-4);
  border-left: 1px solid var(--farbe-rand);
}
.kopfleiste__wer::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;   /* „du bist drin" */
}

/* --- Navigation --- */

.hauptmenue {
  grid-area: menue;
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1) var(--raum-5);
  border-top: 1px solid var(--farbe-rand);
}

.hauptmenue a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-block: var(--raum-4);
  font-weight: 500;
  color: var(--farbe-text-leise);
  transition: color 150ms ease;
}
.hauptmenue a:hover { color: var(--farbe-text); }

/* DER MARKER FÜR DIE AKTUELLE SEITE.
 *
 * Ein kurzer, abgerundeter Balken unter der Mitte des Wortes -- nicht eine
 * Linie über die ganze Breite. Die zog sich vorher bei langen Namen wie
 * „Kundenstimmen" über zehn Zeichen und im Raster der schmalen Ansicht sogar
 * über die ganze Spalte; das sah nach Unterstreichung im Textverarbeitungs-
 * programm aus, nicht nach einem Wegweiser.
 *
 * Feste Breite heisst: Der Marker sieht bei „Blog" genauso aus wie bei
 * „Kundenstimmen" -- und in der aufgeklappten Ansicht muss er gar nicht
 * erst umgebaut werden. */
.hauptmenue a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0.35rem;
  width: 1.5rem;
  height: 3px;
  border-radius: 999px;
  background: var(--farbe-akzent);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 200ms cubic-bezier(0.34, 1.35, 0.64, 1);
}
.hauptmenue a[aria-current='page'] {
  color: var(--farbe-akzent);
  font-weight: 600;
}
.hauptmenue a[aria-current='page']::after { transform: translateX(-50%) scaleX(1); }


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

/* Zähler. Klein, rund, und nur da, wenn etwas offen ist. */
.hauptmenue .zaehler {
  display: inline-block;
  margin-left: var(--raum-2);
  min-width: 1.25rem;
  padding: 0 5px;
  border-radius: var(--radius-rund);
  background: var(--blau-600);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
  vertical-align: 1px;
}

/* --- Aufklappknopf --- */

.adminburger {
  grid-area: burger;
  display: none;             /* breit nicht gebraucht */
  justify-self: end;
  align-self: center;
  flex-direction: column;
  gap: 5px;
  padding: var(--raum-3);
  margin-right: calc(var(--raum-3) * -1);
  border-radius: var(--radius);
}
.adminburger:hover { background: var(--grau-100); }
.adminburger__strich {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--farbe-text);
  transition: transform 220ms var(--easing-hupf, ease), opacity 160ms ease;
}
/* Offen wird aus den drei Strichen ein Kreuz -- der Knopf sagt damit, was
   ein weiterer Klick tut, statt nur, was er einmal getan hat. */
.adminburger[aria-expanded='true'] .adminburger__strich:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.adminburger[aria-expanded='true'] .adminburger__strich:nth-child(2) { opacity: 0; }
.adminburger[aria-expanded='true'] .adminburger__strich:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

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

/* --------------------------------------------------------------------------
   Schmale Fenster: Navigation klappt auf

   DER UMSCHALTPUNKT IST GEMESSEN, NICHT GESCHÄTZT. Die sieben Menüpunkte
   brauchen zusammen 670 Pixel, dazu das Logo mit 177, der Spaltenabstand mit
   40 und die Polsterung mit 48 -- macht 935 Pixel Fensterbreite, ab denen
   alles nebeneinander passt. Ein erster Versuch mit 780 lag deutlich
   darunter: Bei 781 Pixeln fiel „Besucher" prompt in eine zweite Zeile, also
   genau der ausgefranste Umbruch, den der Knopf verhindern soll. 1000 Pixel
   lassen zusätzlich Luft für Systeme mit etwas breiteren Schriften.

   Unterhalb davon klappt die Navigation hinter einen Knopf -- so wie auf der
   Website selbst, damit sich beides gleich anfühlt.

   Der Kontobereich bleibt sichtbar. Passwort und Abmelden hinter zwei Klicks
   zu verstecken wäre ausgerechnet auf dem Telefon verkehrt.
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .kopfleiste { margin-bottom: var(--raum-6); }

  .kopfleiste__raster {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "marke  burger"
      "konto  konto"
      "menue  menue";
    row-gap: 0;
    padding-block: var(--raum-3) 0;
  }
  .kopfleiste__marke { padding-bottom: var(--raum-3); }
  .kopfleiste__marke img { height: 2.5rem; }

  .adminburger { display: flex; }

  /* Der enge Abstand ist gerechnet: Die vier Teile brauchen zusammen rund
     300 px, verfügbar sind bei 375 px Bildschirmbreite 343. */
  .kopfleiste__konto {
    /* stretch, sonst schrumpft der Bereich auf seine Inhaltsbreite und die
       Trennlinie darüber hört mitten in der Zeile auf. */
    justify-self: stretch;
    gap: var(--raum-2);
    border-top: 1px solid var(--farbe-rand);
    padding-block: var(--raum-3);
  }
  .kopfleiste__wer { padding-left: var(--raum-2); }
  .kopfleiste__konto .knopf { padding-inline: 0; }

  /* Aufgeklappt eine senkrechte Liste mit grossen Zielflächen.

     OHNE JAVASCRIPT bleibt die Liste offen -- eine lange Liste ist immer
     noch besser als ein Menü, das sich nicht öffnen lässt. Deshalb hängt
     das Zuklappen an der Klasse .js, die ganz oben im Dokument gesetzt
     wird, und nicht am data-Attribut allein: Sonst stünde das Menü beim
     Laden kurz offen und klappte erst zusammen, wenn admin.js gelaufen
     ist. */
  .hauptmenue {
    display: block;
    border-top: 1px solid var(--farbe-rand);
    margin-inline: calc(var(--raum-5) * -1);
    padding-inline: var(--raum-5);
  }
  .js .hauptmenue { display: none; }
  .js .hauptmenue[data-offen='true'] { display: block; }

  .hauptmenue a {
    display: flex;
    padding-block: var(--raum-4);
    font-size: var(--text-md);
  }
  .hauptmenue a + a { border-top: 1px solid var(--farbe-rand); }

  /* Senkrecht ergibt ein Balken unter dem Wort keinen Sinn -- hier steht er
     als kurzer Strich links davor. */
  .hauptmenue a::after {
    left: calc(var(--raum-5) * -1);
    bottom: auto;
    top: 50%;
    width: 3px;
    height: 1.35rem;
    transform: translateY(-50%) scaleY(0);
  }
  .hauptmenue a[aria-current='page']::after { transform: translateY(-50%) scaleY(1); }

}

.leise { font-size: var(--text-sm); color: var(--farbe-text-leise); }
.leise:hover { color: var(--farbe-akzent); }

/* --------------------------------------------------------------------------
   Meldungen
   -------------------------------------------------------------------------- */

.meldung {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-4) var(--raum-5);
  border-radius: var(--radius);
  border-left: 4px solid;
  margin-bottom: var(--raum-6);
  /* Kurz aufhüpfen, dann stehen: Die Meldung erscheint nach einem Neuladen
     der Seite und würde sonst leicht übersehen. Der Ausschlag ist klein --
     sie soll den Blick holen, nicht um Aufmerksamkeit betteln. */
  animation: meldung-rein 420ms cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
}
.meldung--gut     { background: #ecfdf5; border-color: #059669; color: #064e3b; }
.meldung--fehler  { background: #fef2f2; border-color: #dc2626; color: #7f1d1d; }
.meldung--hinweis { background: #eff6ff; border-color: #2563eb; color: #1e3a5f; }

@keyframes meldung-rein {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* Der Haken zeichnet sich selbst. Eine Bestätigung, die im Moment des
   Hinsehens entsteht, wird geglaubt -- ein fertiges Symbol übersieht man. */
.meldung__haken {
  flex-shrink: 0;
  color: #059669;
}
.meldung__haken path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: haken-ziehen 460ms cubic-bezier(0.65, 0, 0.35, 1) 180ms forwards;
}
@keyframes haken-ziehen { to { stroke-dashoffset: 0; } }

/* --------------------------------------------------------------------------
   Seitenkopf und Karten
   -------------------------------------------------------------------------- */

.seitenkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-4);
  flex-wrap: wrap;
  margin-bottom: var(--raum-6);
}
.seitenkopf h1 { font-size: var(--text-2xl); }
.seitenkopf p { color: var(--farbe-text-leise); font-size: var(--text-sm); }

.tafel {
  background: var(--grau-0);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-lg);
  padding: var(--raum-6);
}
.tafel + .tafel { margin-top: var(--raum-5); }

.kachelreihe {
  display: grid;
  gap: var(--raum-5);
  /* 200 statt 260: Bei rund 540 Pixeln Fensterbreite -- der Grösse, auf die
     ein halbierter Bildschirm hinausläuft -- reichte es vorher nicht für
     zwei Spalten, und die drei Kacheln standen als hohe, fast leere Blöcke
     untereinander. Mit 200 passen zwei nebeneinander. */
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

.kachel {
  display: block;
  background: var(--grau-0);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-lg);
  padding: var(--raum-6);
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.kachel:hover {
  border-color: var(--farbe-akzent);
  transform: translateY(-2px);
  box-shadow: var(--schatten);
}
.kachel__zahl {
  font-family: var(--schrift-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--farbe-akzent);
  line-height: 1;
}
.kachel__text { margin-top: var(--raum-2); color: var(--grau-700); }

/* Ganz schmal -- Telefon -- steht die Zahl NEBEN dem Text statt darüber.
   Untereinander ergibt eine Kachel dort gut 280 Pixel Höhe für eine Ziffer
   und zwei Zeilen; man scrollt an drei fast leeren Karten vorbei. Neben-
   einander sind es 90. */
@media (max-width: 460px) {
  .kachel {
    display: flex;
    align-items: baseline;
    gap: var(--raum-4);
    padding: var(--raum-5);
  }
  .kachel__zahl { font-size: var(--text-2xl); }
  .kachel__text { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   Listen
   -------------------------------------------------------------------------- */

.liste { background: var(--grau-0); border: 1px solid var(--farbe-rand); border-radius: var(--radius-lg); }
.liste__zeile {
  display: flex;
  align-items: center;
  gap: var(--raum-4);
  padding: var(--raum-4) var(--raum-5);
  flex-wrap: wrap;
}
.liste__zeile + .liste__zeile { border-top: 1px solid var(--farbe-rand); }
.liste__zeile:hover { background: var(--grau-50); }

.liste__haupt { flex: 1 1 20rem; min-width: 0; }
.liste__titel { font-weight: 600; }
.liste__meta { font-size: var(--text-sm); color: var(--farbe-text-leise); margin-top: 2px; }
/* flex-wrap ist hier kein Feinschliff, sondern eine Reparatur: Ohne das
   bildeten die vier Knopfgruppen eine einzige unteilbare Zeile und ragten
   auf dem Telefon 93 Pixel über die Karte hinaus -- „Löschen" war zur
   Hälfte abgeschnitten und nicht mehr sicher zu treffen. Betrifft alle
   Listen, nicht nur die neuen. Nachgemessen bei 375 px Breite. */
.liste__aktionen {
  display: flex;
  gap: var(--raum-2);
  align-items: center;
  flex-wrap: wrap;
}

.leer {
  padding: var(--raum-10) var(--raum-5);
  text-align: center;
  color: var(--farbe-text-leise);
}

/* --------------------------------------------------------------------------
   Formulare
   -------------------------------------------------------------------------- */

.feld { margin-bottom: var(--raum-5); }
.feld label { display: block; font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--raum-2); }
.feld input, .feld textarea, .feld select {
  width: 100%;
  padding: var(--raum-3) var(--raum-4);
  border: 1.5px solid var(--farbe-rand);
  border-radius: var(--radius);
  background: var(--grau-0);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* Gleiche Höhe für Eingabefelder und Auswahllisten.
 *
 * Ohne diese Regel standen „Datum" und „Wer hat's geschrieben?" nebeneinander
 * unterschiedlich hoch: 57 gegen 50 Pixel. Die Ursache liegt nicht in der
 * Polsterung -- die ist bei beiden gleich --, sondern in der Zeilenhöhe:
 * Browser erzwingen bei <select> `line-height: normal` und ignorieren einen
 * eigenen Wert. Eine feste Mindesthöhe umgeht das, ohne gegen den Browser
 * zu arbeiten.
 *
 * Die Auswahl der Felder ist dabei ausdrücklich und nicht per Ausschluss
 * formuliert. Ein erster Versuch schrieb `input:not([type='file'])` und traf
 * damit auch die Auswahlknöpfe im Feld „Wer soll das sehen?" -- aus zwei
 * Punkten wurden zwei 56 Pixel hohe Kästen, und der ganze Block fiel
 * auseinander. Was hier gemeint ist, sind Textfelder; die zählt die Liste
 * jetzt einzeln auf. */
.feld input[type='text'],
.feld input[type='date'],
.feld input[type='password'],
.feld input[type='email'],
.feld input[type='tel'],
.feld input[type='url'],
.feld input[type='number'],
.feld select {
  min-height: 3.5rem;
}
.feld input:focus, .feld textarea:focus, .feld select:focus {
  outline: none;
  border-color: var(--farbe-akzent);
  box-shadow: 0 0 0 3px rgb(0 90 150 / 0.12);
}
.feld textarea { resize: vertical; min-height: 18rem; line-height: 1.7; }
.feld__hinweis { font-size: var(--text-xs); color: var(--farbe-text-leise); margin-top: var(--raum-2); }

.feldpaar {
  display: grid;
  gap: var(--raum-5);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.formularfuss {
  display: flex;
  gap: var(--raum-3);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--raum-6);
  padding-top: var(--raum-6);
  border-top: 1px solid var(--farbe-rand);
}

/* --------------------------------------------------------------------------
   Schaltflächen
   -------------------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  padding: var(--raum-3) var(--raum-5);
  border-radius: var(--radius-rund);
  font-weight: 600;
  font-size: var(--text-sm);
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.knopf--voll { background: var(--farbe-akzent); color: var(--grau-0); }
.knopf--voll:hover { background: var(--farbe-akzent-hover); }
.knopf--rand { border: 1.5px solid var(--farbe-rand); color: var(--grau-700); background: var(--grau-0); }
.knopf--rand:hover { border-color: var(--farbe-akzent); color: var(--farbe-akzent); }
.knopf--leise { color: var(--farbe-text-leise); padding-inline: var(--raum-3); }
.knopf--leise:hover { color: var(--farbe-akzent); }
.knopf--gefahr { color: #b91c1c; padding-inline: var(--raum-3); }
.knopf--gefahr:hover { background: #fef2f2; }

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

.anmeldung {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--raum-5);
}
.anmeldung__tafel {
  width: 100%;
  max-width: 24rem;
  background: var(--grau-0);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-lg);
  padding: var(--raum-8);
  box-shadow: var(--schatten-lg);
}
.anmeldung__marke { text-align: center; margin-bottom: var(--raum-7); }
.anmeldung__marke img { height: 3rem; width: auto; margin: 0 auto var(--raum-4); }
.anmeldung__marke h1 { font-size: var(--text-xl); }
.anmeldung__marke p { font-size: var(--text-sm); color: var(--farbe-text-leise); margin-top: var(--raum-1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------------
   Besucherzahlen
   -------------------------------------------------------------------------- */

.balken {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 10rem;
  overflow-x: auto;
  padding-bottom: var(--raum-5);
}
.balken__tag {
  flex: 1 0 14px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
}
.balken__saeule {
  background: var(--farbe-akzent);
  border-radius: 3px 3px 0 0;
  transition: background 150ms ease;
  /* Grundhöhe für den Fall, dass kein JavaScript läuft: Die eigentliche
     Höhe setzt admin.js aus dem data-Attribut. Ohne diese Zeile wäre das
     Diagramm dann leer statt nur gleichförmig. */
  height: 2%;
}
.balken__tag:hover .balken__saeule { background: var(--marke-gelb); }
.balken__datum {
  position: absolute;
  bottom: -1.4rem;
  left: 50%;
  translate: -50% 0;
  font-size: 10px;
  color: var(--farbe-text-leise);
}

.rangliste li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--raum-4);
  padding-block: var(--raum-3);
  border-bottom: 1px solid var(--farbe-rand);
}
.rangliste li:last-child { border-bottom: none; }
.rangliste li > :first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--grau-700);
}
.rangliste li > :last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.rangliste a:hover { color: var(--farbe-akzent); }

/* --------------------------------------------------------------------------
   Bildauswahl im Beitragsformular
   -------------------------------------------------------------------------- */

.bildwahl { border: 1.5px solid var(--farbe-rand); border-radius: var(--radius); padding: var(--raum-5); }
.bildwahl legend { font-weight: 600; font-size: var(--text-sm); padding-inline: var(--raum-2); }

.bildwahl__vorschau {
  width: 100%;
  max-width: 18rem;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--farbe-rand);
  margin-bottom: var(--raum-3);
}

.bildwahl__zeile {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-3);
  padding: var(--raum-3);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 150ms ease;
}
.bildwahl__zeile:hover { background: var(--grau-50); }
.bildwahl__zeile input { width: auto; margin-top: 3px; flex-shrink: 0; }
.bildwahl__zeile small { display: block; color: var(--farbe-text-leise); font-size: var(--text-xs); margin-top: 2px; }

.bildwahl__datei {
  margin-top: var(--raum-3);
  padding-top: var(--raum-4);
  border-top: 1px solid var(--farbe-rand);
}
.bildwahl__datei input[type='file'] {
  margin-top: var(--raum-2);
  padding: var(--raum-3);
  border: 1.5px dashed var(--farbe-rand);
  border-radius: var(--radius);
  background: var(--grau-50);
  cursor: pointer;
}

/* Reihenfolge ändern */
.sortierform { display: flex; gap: 2px; }
.sortierknopf {
  padding: var(--raum-2);
  min-width: 2rem;
  justify-content: center;
  font-size: var(--text-md);
  line-height: 1;
}
.sortierknopf[disabled] { opacity: 0.25; cursor: not-allowed; }
.sortierknopf:not([disabled]):hover { background: var(--grau-100); }

.bildwahl__vorschau--logo {
  aspect-ratio: auto;
  max-height: 5rem;
  width: auto;
  object-fit: contain;
  background: var(--grau-50);
  padding: var(--raum-3);
}

/* Statuskennzeichnung in Listen */
.marke {
  display: inline-block;
  margin-left: var(--raum-2);
  padding: 2px var(--raum-3);
  border-radius: var(--radius-rund);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.marke--entwurf { background: #fef3c7; color: #78350f; }
.marke--neu     { background: #dbeafe; color: #1e3a8a; }
.marke--fehler  { background: #fee2e2; color: #991b1b; }
/* Normale Schreibweise wie bei „ohne Logo": Die beiden stehen in derselben
   Zeile derselben Liste, und eine Versalie neben einem Kleinbuchstaben-Etikett
   sieht aus wie zwei verschiedene Systeme. */
.marke--vorne   { background: #dcfce7; color: #14532d; text-transform: none; }

/* Ein Kästchen mit Erklärung darunter. Anders als ein nacktes Häkchen mit
   Beschriftung beantwortet es gleich die Frage, die es auslöst: Was passiert,
   wenn ich das anhake? */
.haken {
  display: flex;
  gap: var(--raum-3);
  align-items: flex-start;
  margin-bottom: var(--raum-5);
  padding: var(--raum-4) var(--raum-5);
  background: var(--grau-50);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}
.haken:hover { border-color: var(--blau-600); }
.haken:has(input:checked) { background: var(--blau-50); border-color: #93c5fd; }
.haken input { margin-top: 3px; flex-shrink: 0; width: 1.1rem; height: 1.1rem; }
.haken strong { display: block; }
.haken small {
  display: block;
  margin-top: 2px;
  color: var(--farbe-text-leise);
  font-size: var(--text-sm);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Anfragen

   Anders als Beiträge und Stimmen wird eine Anfrage nicht bearbeitet,
   sondern gelesen. Der Text gehört deshalb in die Zeile und nicht hinter
   einen Klick -- wer hier hereinschaut, will wissen, worum es geht, ohne
   erst etwas aufklappen zu müssen.
   -------------------------------------------------------------------------- */

.anfrage { align-items: flex-start; }

/* Zähler in der Kopfleiste. Klein, rund, und nur da, wenn etwas offen ist. */
.hauptmenue .zaehler {
  display: inline-block;
  margin-left: var(--raum-2);
  min-width: 1.25rem;
  padding: 0 5px;
  border-radius: var(--radius-rund);
  background: var(--blau-600);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
  vertical-align: 1px;
}

/* Ungelesene bekommen eine Kante. Kein Farbblock: Die Liste soll ruhig
   bleiben, auch wenn zwanzig Anfragen offen sind. */
.anfrage--neu { box-shadow: inset 3px 0 0 var(--blau-600); }

.anfrage__text {
  margin-top: var(--raum-3);
  color: var(--farbe-text);
  font-size: var(--text-sm);
  line-height: 1.65;
  white-space: pre-line;
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   Startseite

   Wer hier arbeitet, kommt nicht wegen der Zahlen, sondern um etwas zu
   schreiben. Die Seite führt deshalb zuerst zu den zwei Wegen, die fast
   immer gemeint sind -- alles andere ist Beiwerk.
   -------------------------------------------------------------------------- */

.seitenkopf--start { margin-bottom: var(--raum-7); }
.seitenkopf--start h1 { font-size: var(--text-3xl); letter-spacing: -0.02em; }
.seitenkopf--start p {
  font-size: var(--text-md);
  margin-top: var(--raum-2);
}

/* Der Name in der Kopfleiste. Kein Zierrat: Er beantwortet die Frage,
   als wer man gerade angemeldet ist, ohne dass man danach suchen muss. */
.kopfleiste__wer {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--farbe-akzent);
  padding-left: var(--raum-3);
  border-left: 1px solid var(--farbe-rand);
}
.kopfleiste__wer::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;   /* „du bist drin" */
}

/* Hinweis auf liegengebliebene Entwürfe. Taucht nur auf, wenn es welche
   gibt -- ein Kasten, der immer da ist, wird nach drei Tagen nicht mehr
   gelesen. */
.notiz {
  display: flex;
  gap: var(--raum-3);
  align-items: flex-start;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: var(--radius);
  padding: var(--raum-4) var(--raum-5);
  margin-bottom: var(--raum-6);
  color: #78350f;
}
.notiz__zeichen { flex-shrink: 0; color: #d97706; margin-top: 1px; }
.notiz a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.notiz a:hover { color: #92400e; }

/* Offene Anfragen in Blau statt Bernstein: Bernstein heisst hier „liegt
   herum", Blau heisst „jemand wartet". Zwei verschiedene Dinge sollen auch
   verschieden aussehen, sonst gewöhnt man sich an beide gleichzeitig ab. */
.notiz--anfrage {
  background: var(--blau-50);
  border-color: #93c5fd;
  color: #1e3a8a;
}
.notiz--anfrage .notiz__zeichen { color: var(--blau-600); }
.notiz--anfrage a:hover { color: var(--blau-700); }

.tafel h2 {
  font-size: var(--text-lg);
  margin-bottom: var(--raum-5);
}
.tafel--los { margin-top: var(--raum-6); }

/* Fliesstext in einer Tafel. Kurze Zeilen, damit es sich nicht wie eine
   Bedienungsanleitung liest. */
/* Fliesstext in einer Tafel -- exakt dieselbe Anmutung wie die Liste in
   „Damit du beruhigt arbeiten kannst" (.beruhigung). Vorher war er eine
   Stufe grösser und dunkler, und zwei Tafeln direkt untereinander sahen aus,
   als kämen sie aus zwei verschiedenen Oberflächen. */
.tafeltext {
  margin-top: var(--raum-3);
  max-width: 62ch;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--grau-700);
}
.tafeltext strong { color: var(--farbe-text); }
.tafeltext.leise { color: var(--farbe-text-leise); }
.tafelknopf { margin-top: var(--raum-5); }

.loswege {
  display: grid;
  gap: var(--raum-3);
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}

.losweg {
  display: flex;
  align-items: center;
  gap: var(--raum-4);
  padding: var(--raum-4);
  border: 1.5px solid var(--farbe-rand);
  border-radius: var(--radius);
  background: var(--grau-0);
  transition: border-color 180ms ease, transform 260ms cubic-bezier(0.34, 1.4, 0.64, 1),
              box-shadow 180ms ease;
}
.losweg:hover {
  border-color: var(--farbe-akzent);
  transform: translateY(-3px);
  box-shadow: var(--schatten);
}
.losweg strong { display: block; font-size: var(--text-sm); }
.losweg small {
  display: block;
  color: var(--farbe-text-leise);
  font-size: var(--text-xs);
  margin-top: 2px;
}

.losweg__zeichen {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  background: var(--blau-50);
  color: var(--farbe-akzent);
  transition: transform 320ms cubic-bezier(0.34, 1.5, 0.64, 1);
}
.losweg:hover .losweg__zeichen { transform: scale(1.08) rotate(-4deg); }

.beruhigung {
  display: grid;
  gap: var(--raum-4);
  color: var(--grau-700);
  font-size: var(--text-sm);
  line-height: 1.65;
}
.beruhigung strong { color: var(--farbe-text); }

/* Kachelzahlen zählen beim Erscheinen kurz hoch -- nur ein Aufblenden,
   keine Zählanimation: Die Zahl soll sofort lesbar sein. */
.kachel { animation: kachel-rein 500ms cubic-bezier(0.34, 1.35, 0.64, 1) backwards; }
.kachel:nth-child(2) { animation-delay: 80ms; }
@keyframes kachel-rein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Kleinteile
   -------------------------------------------------------------------------- */

.marke--offen { background: var(--grau-100); color: var(--grau-700); text-transform: none; }

.fussnotiz {
  margin-top: var(--raum-5);
  color: var(--farbe-text-leise);
  font-size: var(--text-sm);
  line-height: 1.6;
  max-width: 62ch;
}

.leer strong { display: inline-block; font-size: var(--text-md); color: var(--farbe-text); }

/* Die Fusszeile ist entfallen; der Abstand nach unten kommt jetzt vom
   Inhaltsbereich selbst, damit die Seite nicht bündig abbricht. */
main.huelle { padding-bottom: var(--raum-10); }

.anmeldung__fuss {
  margin-top: var(--raum-6);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--farbe-text-leise);
}

.seitenkopf code {
  font-size: 0.92em;
  background: var(--grau-100);
  padding: 1px var(--raum-2);
  border-radius: 4px;
}

/* Wer Bewegung abbestellt hat, bekommt keine -- die Regel oben deckt nur
   Übergänge ab, hier kommen die Animationen dazu. */
@media (prefers-reduced-motion: reduce) {
  .meldung, .kachel { animation: none; }
  .meldung__haken path { stroke-dashoffset: 0; animation: none; }
}

/* --------------------------------------------------------------------------
   Systemprüfung
   -------------------------------------------------------------------------- */

.pruefliste { display: grid; gap: var(--raum-3); }
.pruefzeile {
  display: flex;
  gap: var(--raum-4);
  align-items: flex-start;
  padding: var(--raum-4);
  border-radius: var(--radius);
  border: 1px solid var(--farbe-rand);
}
.pruefzeile strong { display: block; font-size: var(--text-sm); }
.pruefzeile small {
  display: block;
  color: var(--farbe-text-leise);
  font-size: var(--text-xs);
  margin-top: 2px;
  line-height: 1.5;
}
.pruefzeile__zeichen {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
}
.pruefzeile--gut     { background: #f0fdf4; border-color: #bbf7d0; }
.pruefzeile--gut     .pruefzeile__zeichen { background: #dcfce7; color: #15803d; }
.pruefzeile--warnung { background: #fffbeb; border-color: #fde68a; }
/* Weder gut noch schlecht: eine Angabe, die man kennen muss, um sie
   einzuordnen -- etwa das Datum, an dem der Inhaltsbestand angelegt wurde. */
.pruefzeile--hinweis .pruefzeile__zeichen { background: var(--blau-50); color: var(--blau-600); }
.pruefzeile--warnung .pruefzeile__zeichen { background: #fef3c7; color: #b45309; }
.pruefzeile--fehler  { background: #fef2f2; border-color: #fecaca; }
.pruefzeile--fehler  .pruefzeile__zeichen { background: #fee2e2; color: #b91c1c; }

.fussnotiz code {
  background: var(--grau-100);
  padding: 1px var(--raum-2);
  border-radius: 4px;
  font-size: 0.92em;
}

/* Die Zeichen der Auszeichnung im Hinweistext hervorheben */
.feld__hinweis code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.95em;
  background: var(--grau-100);
  color: var(--farbe-text);
  padding: 1px var(--raum-2);
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Leistungen und Team
   -------------------------------------------------------------------------- */

/* Die Nummer vor dem Titel spiegelt die 01/02/03 auf der Website -- so ist
   auf einen Blick klar, dass die Reihenfolge hier die dort ist. */
.liste__nummer {
  display: inline-block;
  min-width: 1.75rem;
  color: var(--farbe-text-leise);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Kleines Vorschaubild in der Teamliste. */
.personbild {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  flex-shrink: 0;
  background: var(--grau-100);
}

.bildwahl__vorschau--portraet {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
}

/* Ein Wert, den man sehen, aber nicht ändern kann -- die Adresse einer
   Leistungsseite. Sieht bewusst nicht wie ein Eingabefeld aus, damit
   niemand hineinzuklicken versucht. */
.feld__fest {
  margin-top: var(--raum-2);
  padding: var(--raum-3) var(--raum-4);
  background: var(--grau-50);
  border: 1px dashed var(--farbe-rand);
  border-radius: var(--radius);
  color: var(--farbe-text-leise);
  font-size: var(--text-sm);
  word-break: break-all;
}
.feld__fest strong { color: var(--farbe-text); }

/* --------------------------------------------------------------------------
   Hilfsklassen statt style-Attributen

   Solange irgendwo ein style="…" steht, muss die Sicherheitsrichtlinie
   style-src 'unsafe-inline' erlauben -- und damit auch jedes eingeschleuste.
   Diese Klassen ersetzen die letzten davon.
   -------------------------------------------------------------------------- */

/* Abstände nach oben und unten in den Stufen, die die Vorlagen brauchen. */
.abstand-oben-5 { margin-top: var(--raum-5); }
.abstand-unten-2 { margin-bottom: var(--raum-2); }
.abstand-unten-3 { margin-bottom: var(--raum-3); }
.abstand-unten-4 { margin-bottom: var(--raum-4); }

/* Textfelder in den Höhen, die zum jeweiligen Inhalt passen: ein Zitat
   braucht mehr Platz als ein Einzeiler, ein Werdegang mehr als beides. */
.hoch-6  { min-height: 6rem; }
.hoch-10 { min-height: 10rem; }
.hoch-12 { min-height: 12rem; }
.hoch-14 { min-height: 14rem; }
.hoch-18 { min-height: 18rem; }

/* Knopf über die volle Breite -- auf der Anmeldeseite. */
.knopf--breit { width: 100%; justify-content: center; }

/* Auswahlfeld im selben Stil wie die Eingabefelder. */
.auswahl {
  padding: var(--raum-2) var(--raum-4);
  border: 1.5px solid var(--farbe-rand);
  border-radius: var(--radius);
}

/* Zusatz in einer Zeile, leiser als der Rest. */
.leiser { color: var(--farbe-text-leise); font-weight: 400; }

/* Absatz in der Grundfarbe des Fliesstexts. */
.textfarbe { color: var(--grau-700); }