/*!
 * admin.css — Verwaltungsseite
 * Version 1.22.16 · 2026-08-08
 * Ergaenzt style.css. Nuechtern gehalten: hier wird gearbeitet, nicht gefeiert.
 */
.verwaltung{background:#f4f5f6; font-family:var(--schrift-ui); font-size:15px}
.v-kopf{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding:16px 24px; background:#2f3a34; color:#fff;
}
.v-kopf h1{margin:0; font-size:1.15rem; font-weight:600; letter-spacing:.04em}
.v-nav{display:flex; gap:16px}
.v-nav a{color:#cfe0d4; font-size:14px}
.v-inhalt{max-width:1080px; margin:0 auto; padding:24px 20px 60px}
.v-block{background:#fff; border:1px solid #dcdfe1; border-radius:8px; padding:24px; margin-bottom:22px}
.v-block h2{margin:0 0 18px; font-size:1.05rem; color:#2f3a34; text-align:left; font-weight:600}
.v-block h2::after{display:none}
.v-schmal{max-width:440px}
.v-formular{max-width:100%}
.v-raster{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
.v-zeile{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; margin-bottom:8px}
.v-zeile-drei{grid-template-columns:100px 1fr 1fr}
.v-zeile-menue{grid-template-columns:160px 1fr 110px; align-items:center}
.v-zeile-ort{grid-template-columns:1fr 1fr 110px 1.2fr 1.4fr 1.2fr}
.schalter{
  display:flex; align-items:center; gap:10px; min-height:44px; margin:0;
  text-transform:none; letter-spacing:0; font-size:15px; color:var(--text);
}
.schalter input{width:20px; height:20px; accent-color:#2f3a34}
.v-zahlen{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:20px}
.v-zahl{
  flex:1 1 110px; padding:14px; text-align:center;
  background:#f4f5f6; border:1px solid #dcdfe1; border-radius:8px;
}
.v-zahl .wert{display:block; font-size:1.7rem; font-weight:600; line-height:1.1}
.v-zahl .bez{display:block; font-size:12px; letter-spacing:.06em; opacity:.7; margin-top:4px}
.v-zahl.gut .wert{color:#33723f}
.v-zahl.schlecht .wert{color:#a8442a}
.v-zahl.klein .wert{font-size:1.2rem}
.v-suchleiste{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:18px}
.v-suchleiste input[type=search]{flex:1 1 200px; width:auto}
.v-suchleiste select{flex:0 0 150px; width:auto}
.tabelle-rollt{overflow-x:auto; -webkit-overflow-scrolling:touch}
/* --- Antwortliste: EINE ZEILE JE PERSON ---
   Umgebaut 2026-08-06 auf Wunsch des Betreibers. Vorher stand je
   Rueckmeldung eine Zeile und die Begleitpersonen steckten als Liste in
   einer Zelle — fuer Tischplan und Kueche die falsche Form.
   Die gemeinsamen Angaben (Nummer, Antwort, Telefon, Mail, Nachricht)
   stehen ueber rowspan einmal je Gruppe. */
/* Hoehengrenze: Die Liste darf nicht einen Meter hoch werden. Sie
   scrollt in sich, der Spaltenkopf bleibt dabei stehen (position:sticky
   wirkt in diesem Kasten). Gemeldet 2026-08-07. */
.v-tabelle-huelle{overflow:auto; -webkit-overflow-scrolling:touch;
  border:1px solid #e6e8ea; border-radius:8px;
  max-height:min(60vh, 620px)}
.v-tabelle{width:100%; min-width:1100px; border-collapse:collapse;
  font-size:14px; table-layout:fixed}
.v-tabelle th,.v-tabelle td{padding:9px 11px; text-align:left;
  vertical-align:top; border-bottom:1px solid #e6e8ea;
  overflow-wrap:anywhere}
/* Der Spaltenkopf bleibt beim Scrollen stehen. z-index MUSS gesetzt
   sein: ohne ihn schieben sich Zellinhalte darueber — auf dem Telefon
   war der Kopf teilweise verdeckt (gemeldet 2026-08-06). */
.v-tabelle thead th{position:sticky; top:0; z-index:2;
  background:#eef0f1; font-weight:600; white-space:nowrap;
  font-size:12px; letter-spacing:.05em; box-shadow:0 1px 0 #d8dcdf}
.v-tabelle tbody td{background:#fff}
.zeile-absage td{background:#fcfbfa}
/* Die Gruppe sichtbar zusammenhalten: eine kraeftigere Linie beginnt
   jede neue Gaestenummer. */
.v-tabelle tr.gruppe-anfang > td{border-top:2px solid #d3d8d4}
.v-gastnummer{display:inline-block; min-width:26px; padding:2px 7px;
  border-radius:12px; background:#e7ece7; color:#41603f;
  font-weight:600; text-align:center}
/* Spaltenbreiten */
.v-tabelle .s-nr{width:58px}
.v-tabelle .s-antwort{width:96px}
.v-tabelle .s-person{width:170px}
.v-tabelle .s-rolle{width:96px}
.v-tabelle .s-essen{width:110px}
.v-tabelle .s-allergien{width:150px}
.v-tabelle .s-telefon{width:130px; white-space:nowrap}
.v-tabelle .s-mail{width:180px}
.v-tabelle .s-nachricht{width:210px}
.v-tabelle .s-zeit{width:118px; white-space:nowrap}
.v-tabelle .s-weg{width:104px}

/* --- Umschalter einzeilig / alles zeigen ---
   Ohne JavaScript: ein Kontrollkaestchen schaltet die Tabelle um.
   VORGABE ist die gekuerzte Ansicht — sie haelt die Zeilen gleich hoch,
   und genau das Verrutschen durch lange Inhalte war die Beschwerde. */
.v-schalter-kasten{position:absolute; opacity:0; pointer-events:none}
.v-schalter-knopf{display:inline-block; padding:9px 16px; min-height:44px;
  box-sizing:border-box; border:1px solid #b9c2b9; border-radius:8px;
  background:#fff; cursor:pointer; font-size:.9rem; line-height:1.4}
.v-schalter-knopf:hover{background:#f2f5f2}
.v-schalter-kasten:focus-visible + .v-schalter-knopf{outline:2px solid #6f8a70; outline-offset:2px}
.v-schalter-knopf .wenn-an{display:none}
.v-schalter-kasten:checked + .v-schalter-knopf .wenn-an{display:inline}
.v-schalter-kasten:checked + .v-schalter-knopf .wenn-aus{display:none}
.v-tabellenschalter{margin:0 0 12px}
.v-tabellenschalter > .hilfe{display:block; margin:6px 0 10px}
/* Gekuerzt: jede Zelle genau eine Zeile, Rest mit Auslassungspunkten.
   Der volle Inhalt steht im title-Attribut und damit im Mauszeigertext. */
.v-tabellenschalter .v-tabelle td{white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; max-width:0}
.v-tabellenschalter .v-tabelle td.s-nr,
.v-tabellenschalter .v-tabelle td.s-antwort,
.v-tabellenschalter .v-tabelle td.s-weg{overflow:visible; max-width:none}
/* Alles zeigen: Umbruch erlaubt, Zeilen duerfen wachsen. */
.v-schalter-kasten:checked ~ .v-tabelle-huelle .v-tabelle td{
  white-space:normal; overflow:visible; text-overflow:clip; max-width:none}

.v-personen{list-style:none; margin:6px 0 0; padding:0; font-size:13px; opacity:.85}
.v-personen li::before{content:"+ "; color:#8a9a8f}
.marke-ja,.marke-nein{
  display:inline-block; padding:3px 10px; border-radius:20px;
  font-size:12px; font-weight:600; white-space:nowrap;
}
.marke-ja{background:#e0efe2; color:#33723f}
.marke-nein{background:#f7e6e1; color:#a8442a}
.zeile-absage{opacity:.75}
@media (max-width:640px){
  .v-zeile-drei,.v-zeile-menue,.v-zeile-ort{grid-template-columns:1fr}
  .v-inhalt{padding:16px 12px 48px}
  .v-block{padding:16px}
}

/* --- Bilderverwaltung --- */
.v-bilder{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px}
.v-bild{display:flex; gap:14px; padding:14px; background:#f4f5f6; border:1px solid #dcdfe1; border-radius:8px}
.v-bild-vorschau{
  flex:0 0 110px; height:110px; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #e6e8ea; border-radius:6px; overflow:hidden;
  background-image:linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%),
                   linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%);
  background-size:14px 14px; background-position:0 0,7px 7px;
}
.v-bild-vorschau img{max-width:100%; max-height:100%; width:auto; height:auto}
.v-bild-text{flex:1; min-width:0}
.v-bild-name{margin:0 0 2px}
.v-bild-formular{margin-top:8px; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.v-bild-formular input[type=file]{flex:1 1 160px; font-size:13px; width:auto; padding:6px}
@media (max-width:640px){
  .v-bild{flex-direction:column}
  .v-bild-vorschau{flex:0 0 auto; width:100%; height:130px}
}

/* --- Entfernen, Rueckgaengig, Papierkorb --- */
.v-inline-form{display:inline; margin-left:8px}
.v-knopf-weg{background:#b5533f; color:#fff; border:none; border-radius:6px;
  padding:6px 12px; font:inherit; font-size:.85rem; cursor:pointer; min-height:32px}
.v-knopf-weg:hover{background:#8f4132}
.v-knopf-zurueck{background:transparent; border:1px solid currentColor;
  border-radius:6px; padding:4px 10px; font:inherit; font-size:.85rem;
  cursor:pointer; min-height:32px}
.v-papierkorb{margin-top:24px; padding:16px; border:1px dashed #c9bfae; border-radius:8px}
/* Hoehengrenze wie bei der Gaesteliste: nach einer Feier mit 200
   Gaesten liegen schnell Dutzende Rueckmeldungen im Papierkorb, und
   die Seite wuchs unten ins Endlose — der Knopf zum Leeren rutschte
   ausser Sicht. Die Liste rollt jetzt in sich.
   Das Mass ist kleiner als bei der Gaesteliste (60vh), weil der
   Papierkorb Beiwerk ist und nicht den Bildschirm fuellen soll. */
/* Der Rahmen macht sichtbar, dass hier etwas rollt — sonst sieht eine
   abgeschnittene Liste nach einer vollstaendigen aus. */
.v-korbliste{list-style:none; margin:8px 0; padding:4px 10px;
  max-height:min(38vh, 340px); overflow:auto; -webkit-overflow-scrolling:touch;
  border:1px solid #eee5d8; border-radius:6px; background:#fffdf9}
.v-korbliste li{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:6px 0; border-bottom:1px solid #eee5d8}
.v-korbliste li:last-child{border-bottom:none}
@media (pointer:coarse){
  .v-knopf-weg,.v-knopf-zurueck{min-height:44px; padding-left:16px; padding-right:16px}
}

/* --- Erklaerung in Alltagssprache, zugeklappt --- */
.v-hilfe{margin:0 0 16px; border:1px solid #d9cdb8; border-radius:8px;
  background:#fdfaf4}
.v-hilfe summary{padding:12px 16px; cursor:pointer; font-weight:600;
  min-height:44px; box-sizing:border-box; display:flex; align-items:center}
.v-hilfe-inhalt{padding:0 16px 14px; font-size:.92rem; line-height:1.55}
.v-hilfe-inhalt ul{margin:8px 0; padding-left:20px}
.v-hilfe-inhalt li{margin-bottom:6px}
.v-lead{margin:4px 0 10px; font-size:.9rem; color:#6b6154}
.v-untertitel{margin:20px 0 2px; font-size:1rem}
.v-lage{margin:10px 0 14px; font-size:.9rem}
.v-spalte-weg{font-size:.8rem}
/* Anklickbare Zahlen: als Flaeche erkennbar, aktiv hervorgehoben */
a.v-zahl{text-decoration:none; color:inherit; transition:transform .12s}
a.v-zahl:hover, a.v-zahl:focus-visible{transform:translateY(-2px)}
a.v-zahl.aktiv{outline:2px solid #8c7a5c; outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  a.v-zahl:hover, a.v-zahl:focus-visible{transform:none}
}

.v-kuerzel{font-size:.78rem; color:#8a7f6f; align-self:center}

.v-protokoll{margin-top:20px}
.v-protokollliste{list-style:none; margin:8px 0 0; padding:0; font-size:.82rem;
  max-height:280px; overflow:auto}
.v-protokollliste li{padding:4px 0; border-bottom:1px solid #eee5d8;
  font-family:ui-monospace, Menlo, Consolas, monospace}
.v-protokollliste li:last-child{border-bottom:none}

/* Verworfene Eingaben muessen sich vom blossen Hinweis unterscheiden:
   gleiche Optik wie ein Hinweis waere hier eine Verharmlosung. */
.meldung-verworfen{border-left:4px solid #b5533f; background:#fbf1ee}
.meldung-verworfen strong{color:#8f4132}

/* Zustand der Benachrichtigung: gehoert neben die Antworten, nicht
   versteckt in die Einstellungen. */
.v-mailstand{margin:0 0 12px; padding:10px 14px; border-radius:8px; font-size:.92rem}
.v-mailstand.gut{background:#eef5ee; border-left:4px solid #6f8a70}
.v-mailstand.schlecht{background:#fbf1ee; border-left:4px solid #b5533f}

/* --- Kleine Bildschirme: Durchsicht 2026-08-06 ---
   Geprueft wurde jede Stelle, an der die Verwaltung breiter wird als das
   Geraet. Die Tabelle scrollt in ihrer Huelle; alles andere muss ohne
   waagrechtes Scrollen auskommen. */
@media (max-width:640px){
  /* Die Tabelle bleibt breit und scrollt — aber nur SIE, nicht die Seite. */
  .v-inhalt{overflow-x:hidden}
  .v-tabelle-huelle{margin-inline:-12px; border-radius:0;
    border-left:none; border-right:none}
  .v-tabelle{font-size:13px; min-width:940px}
  .v-tabelle th,.v-tabelle td{padding:8px 9px}
  /* Der klebende Kopf braucht auf kleinen Geraeten denselben Vorrang. */
  .v-tabelle thead th{z-index:3}
  /* Suchleiste und Schalter untereinander statt gequetscht nebeneinander. */
  .v-suchleiste{flex-direction:column; align-items:stretch; gap:10px}
  .v-suchleiste input,.v-suchleiste select,.v-suchleiste button,
  .v-suchleiste .knopf-schlicht{width:100%; box-sizing:border-box}
  .v-schalter-knopf{display:block; width:100%; text-align:center}
  /* Zwei Felder nebeneinander werden zu einem je Zeile. */
  .v-raster,.v-zeile-drei,.v-zeile-menue,.v-zeile-ort{grid-template-columns:1fr}
  /* Lange Adressen und Kennungen sprengen sonst die Kachel. */
  .v-korbliste li{flex-direction:column; align-items:flex-start; gap:4px}
  textarea,input[type="text"]{max-width:100%; box-sizing:border-box}
}
@media (max-width:400px){
  /* Die schmalsten verbreiteten Geraete. Die Tabelle scrollt weiterhin,
     der Rest bleibt einspaltig und ohne Ueberlauf. */
  .v-tabelle{min-width:880px}
  .v-kuerzel{display:block; margin-top:4px}
}

/* --- Farben: sehen, was eingestellt ist ---
   Vorher stand nur ein Farbkaestchen mit dem internen Schluessel daneben.
   Jetzt: Feld, Klartextname, wo die Farbe wirkt, der Wert, und ob er von
   der Vorgabe abweicht. Umgebaut 2026-08-06. */
.v-farbliste{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:14px; margin:6px 0 12px}
.v-farbe{display:flex; align-items:flex-start; gap:12px; padding:10px 12px;
  border:1px solid #e2e5e7; border-radius:8px; background:#fff}
.v-farbwahl{width:52px; height:52px; min-width:52px; max-width:52px; aspect-ratio:1/1;
  padding:0; border:1px solid #cfd4d7; border-radius:8px; background:none; cursor:pointer;
  /* GEFUNDEN 2026-08-08, gemeldet vom Betreiber (Bild: das Feld fuer
     "Hintergrund" wirkte wie ein breiter Balken statt eines Quadrats).
     URSACHE: input[type=color] traegt in mehreren Browsern eine eigene,
     natuerliche Erscheinung samt innerem Muster-Element; width/height
     allein reichen dort nicht — der Browser haelt intern an seiner
     eigenen Mindestbreite fest. appearance:none nimmt dem Feld diese
     eingebaute Erscheinung, danach greifen unsere eigenen Masse
     zuverlaessig. overflow:hidden faengt zusaetzlich jeden Rest ab, der
     trotzdem ueber die 52px hinausragen wollte. */
  -webkit-appearance:none; -moz-appearance:none; appearance:none; overflow:hidden}
/* Das innere "Muster"-Element jedes Browsers traegt eigene Aussenmasse
   und einen eigenen Rand — beides einzeln auf null gesetzt, sonst bleibt
   trotz appearance:none ein Rest sichtbar. */
.v-farbwahl::-webkit-color-swatch-wrapper{padding:0}
.v-farbwahl::-webkit-color-swatch{border:none; border-radius:6px}
.v-farbwahl::-moz-color-swatch{border:none; border-radius:6px}
.v-farbtext{display:flex; flex-direction:column; gap:2px; min-width:0}
.v-farbtext label{margin:0}
.v-farbwert{font-family:ui-monospace, Menlo, Consolas, monospace;
  font-size:.82rem; color:#6b7075; overflow-wrap:anywhere}
.v-farbab{color:#8f6b32}
@media (pointer:coarse){ .v-farbwahl{width:60px; height:60px; min-width:60px; max-width:60px} }

/* --- Noch nicht ausgefuellte Zeilen ---
   Hellblau, durchscheinend. BLAU und nicht rot oder orange: hier ist
   nichts falsch, es ist ein Hinweis. In der Kennzeichnungslehre
   (ISO 3864 / IEC 60073) ist Rot Gefahr, Gelb Warnung, Blau Gebot oder
   Information — dieselbe Zuordnung passt hier.
   FARBE ALLEIN GENUEGT NICHT: WCAG 1.4.1 und ISO 9241-112 verlangen
   Redundanz. Deshalb steht neben der Faerbung das Wort "noch leer" —
   wer Farben nicht unterscheidet oder im Kontrastmodus arbeitet, liest
   es trotzdem. Ergaenzt 2026-08-06 auf Wunsch des Betreibers. */
.v-neu{background:rgba(120, 170, 210, .09);
  border:1px solid rgba(90, 140, 185, .35); border-radius:8px;
  padding:10px 12px; position:relative}
.v-neu-marke{display:inline-block; margin-left:8px; padding:2px 9px;
  border-radius:12px; background:rgba(90, 140, 185, .18);
  color:#2f5a7d; font-size:.74rem; font-weight:600;
  letter-spacing:.03em; vertical-align:middle; white-space:nowrap}
.v-neu-marke-zeile{position:absolute; top:8px; right:10px}
.v-zeile.v-neu{padding-top:30px}
/* Im Kontrastmodus traegt die Faerbung nichts mehr — der Rahmen und das
   Wort bleiben und uebernehmen die Aufgabe allein. */
@media (forced-colors: active){
  .v-neu{background:none; border:2px dashed}
  .v-neu-marke{background:none; border:1px solid}
}

/* --- Einstellungen in aufklappbaren Bereichen ---
   Die Verwaltung war eine einzige lange Seite; man musste scrollen, um
   zu wissen, was es ueberhaupt gibt. Jetzt eine Liste von Bereichen,
   von denen nur der erste offen ist. Wer etwas sucht, liest zuerst die
   Ueberschriften. Gewuenscht 2026-08-07, gebaut 2026-08-08. */
.v-gruppe{border:1px solid #e2e5e7; border-radius:10px; background:#fff;
  margin:0 0 12px; overflow:hidden}
.v-gruppe > summary{padding:14px 18px; cursor:pointer; font-weight:600;
  font-size:1.02rem; min-height:52px; display:flex; align-items:center;
  background:#f7f8f8; list-style:none}
.v-gruppe > summary::-webkit-details-marker{display:none}
.v-gruppe > summary::before{content:"▸"; margin-right:10px; color:#7d8f6e;
  transition:transform .15s}
.v-gruppe[open] > summary::before{transform:rotate(90deg)}
.v-gruppe[open] > summary{border-bottom:1px solid #e2e5e7}
.v-gruppe > summary:hover{background:#eef1ef}
.v-gruppe > summary:focus-visible{outline:2px solid #6f8a70; outline-offset:-2px}
/* Das fieldset traegt drinnen keinen eigenen Rahmen mehr — sonst
   Rahmen im Rahmen. Die Legende ist jetzt die Zusammenfassung oben. */
.v-gruppe .feldgruppe{border:none; margin:0; padding:16px 18px 20px}
.v-gruppe .feldgruppe > legend{position:absolute; left:-9999px}
@media (prefers-reduced-motion:reduce){
  .v-gruppe > summary::before{transition:none}
}

/* --- Gestaltungsvarianten (Ränder, Fussbild, Aussehen der Blöcke) ---
   Drei bzw. zwei fertige Möglichkeiten je Frage, als Auswahl nebeneinander.
   BEWUSST RADIOS UND KEIN AUSWAHLFELD: Bei zwei oder drei Möglichkeiten
   sind alle gleichzeitig sichtbar. Ein Auswahlfeld verbirgt sie hinter
   einer Bedienhandlung und lässt den Betreiber raten, was es sonst noch
   gäbe — bei über fünf Einträgen wäre die Rechnung umgekehrt. */
.v-varianten{
  border:1px solid #e2e5e7; border-radius:8px;
  margin:10px 0 0; padding:10px 12px;
  display:flex; flex-wrap:wrap; gap:8px 18px;
}
.v-varianten > legend{
  position:absolute; left:-9999px;
}
.v-eingerueckt{margin-left:30px}
.v-variante{
  display:flex; align-items:center; gap:8px; min-height:44px; margin:0;
  text-transform:none; letter-spacing:0; font-size:15px; color:var(--text);
  cursor:pointer;
}
.v-variante input{width:20px; height:20px; accent-color:#2f3a34; margin:0}
.v-variante:focus-within{outline:2px solid #6f8a70; outline-offset:2px; border-radius:6px}
/* Beschriftung über einer Gruppe, die kein einzelnes Eingabefeld hat und
   deshalb kein <label> tragen darf — ein label ohne Ziel ist für ein
   Vorlesegerät eine Sackgasse. Die Gruppe selbst trägt ihre legend. */
.beschriftung{
  margin:0 0 2px; font-size:13px; font-weight:600; color:#5a6b60;
  text-transform:uppercase; letter-spacing:.06em;
}
@media (max-width:560px){
  .v-varianten{flex-direction:column; gap:0}
  .v-eingerueckt{margin-left:0}
}


/* --- Gestaltungsregler unter einem Textfeld (Schrift/Groesse/Farbe) ---
   VERSCHOBEN 2026-08-08 aus style.css: Diese Stile gehoeren zur
   VERWALTUNG; auf der Gaesteseite waeren sie totes Gewicht, das jeder
   Gast laedt und nie sieht.
   Der Titel ist SICHTBAR (gemeldet: die Regler standen ohne erkennbare
   Zuordnung im Raster — bei den Namensfeldern war nicht zu sehen, was
   die drei Auswahlfelder verstellen). */
.v-textgestalt{border:1px solid #e2e5e7; border-radius:8px; margin:10px 0 0; padding:10px 12px}
.v-tg-titel{
  padding:0 4px; margin-left:-4px;
  font-size:12px; font-weight:600; color:#5a6b60;
  text-transform:uppercase; letter-spacing:.06em;
}
.v-textgestalt-reihe{display:flex; flex-wrap:wrap; gap:10px}
.v-tg-feld{display:flex; flex-direction:column; gap:4px; flex:1 1 150px; margin:0;
  font-size:13px; text-transform:none; letter-spacing:0}
.v-tg-feld select{min-height:44px}

/* Vorschau der vorgegebenen Rechtstexte in der Verwaltung. */
.v-vorschau-recht{background:#f7f9f7; border-radius:8px; padding:12px 14px; margin:8px 0 0}
.v-vorschau-recht p{margin:0 0 10px; font-size:14px; line-height:1.6}
.v-vorschau-titel{font-weight:600; color:#3f5344; margin-bottom:2px}

/* HIDDEN GEWINNT IMMER — die Klassenregel zum dritten Auftreten desselben
   Fehlers (2026-08-08): Ein per JavaScript gesetztes hidden-Attribut
   wirkt ueber das Browser-Stylesheet ([hidden]{display:none}), und JEDE
   eigene display-Angabe einer Klasse (.v-zeile{display:grid}) schlaegt
   es. Die Programm- und Ortszeilen blieben deshalb trotz hidden sichtbar
   — das Skript lief fehlerfrei, seine Wirkung wurde verschluckt.
   Fuer die Begleitzeilen der Gaeste war das schon einmal geloest
   (.begleitzeile[hidden] in style.css), aber als EINZELFALL. Diese Regel
   loest die Klasse: hidden heisst verborgen, ausnahmslos. */
[hidden]{display:none !important}

/* Knopf, der EINE Farbe auf die Vorgabe zurueckstellt. Klein und
   unaufdringlich — er steht neben dem Hinweis "geaendert, Vorgabe: ...",
   ist also immer im Blick, wenn er gebraucht wird. */
.v-farbzurueck{
  align-self:flex-start; margin-top:4px; min-height:32px;
  padding:4px 10px; font-size:12px; font-family:inherit;
  color:#5a6b60; background:#f3f5f3;
  border:1px solid #cfd6cf; border-radius:6px; cursor:pointer;
}
.v-farbzurueck:hover{background:#e9ede9}
.v-farbzurueck:focus-visible{outline:2px solid #6f8a70; outline-offset:2px}
.v-farbzurueck[disabled]{opacity:.65; cursor:default}
/* Auf Touch-Geraeten die geforderte Mindestgroesse (WCAG 2.5.5). */
@media (pointer:coarse){ .v-farbzurueck{min-height:44px; padding:8px 14px} }

/* --- Vorschau der Einladung als Einblendung ---
   Der Knopf schwebt unten rechts und bleibt beim Scrollen stehen: Er
   wird gebraucht, NACHDEM man etwas geaendert hat — also an einer
   beliebigen Stelle der Seite, nicht nur oben. */
.v-vorschau-knopf{
  position:fixed; right:18px; bottom:18px; z-index:40;
  min-height:44px; padding:12px 22px;
  font-family:inherit; font-size:15px; font-weight:600;
  color:#fff; background:#3f5344;
  border:none; border-radius:24px; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.v-vorschau-knopf:hover{background:#4d654f}
.v-vorschau-knopf:focus-visible{outline:3px solid #6f8a70; outline-offset:3px}

.v-vorschau-fenster{
  width:min(96vw, 1100px); height:min(92vh, 900px);
  padding:0; border:none; border-radius:12px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.v-vorschau-fenster::backdrop{background:rgba(20,26,22,.55)}
.v-vorschau-kopf{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 14px; background:#f3f5f3; border-bottom:1px solid #dfe4df;
}
.v-vorschau-hinweis{font-size:13px; color:#5a6b60; line-height:1.4}
/* Der Rahmen fuellt den Rest — ohne feste Hoehe bliebe er auf der
   Vorgabe von 150px stehen und zeigte nur einen Streifen. */
.v-vorschau-rahmen{
  display:block; width:100%; height:calc(100% - 58px); border:none; background:#fff;
}
@media (max-width:560px){
  .v-vorschau-knopf{right:12px; bottom:12px; padding:12px 18px}
  .v-vorschau-fenster{width:100vw; height:100vh; max-width:none; border-radius:0}
  .v-vorschau-kopf{flex-direction:column; align-items:stretch}
}
/* Kein Aufblenden fuer alle, die darauf empfindlich reagieren. */
@media (prefers-reduced-motion:reduce){
  .v-vorschau-fenster{animation:none}
}


/* Ueberlaufschutz in der Antwortliste: Gaeste tragen E-Mail-Adressen und
   Nachrichten ein, die kein Leerzeichen enthalten muessen. Ohne das
   sprengt eine einzige lange Adresse die Tabellenbreite. */
.v-tabelle td, .v-tabelle th{overflow-wrap:anywhere}
.v-kopierfeld{overflow-wrap:anywhere}

/* Hinweis auf fehlende Schriftdateien.
   NACHGETRAGEN 2026-08-18: Eine Schriftwahl, deren Datei fehlt, wirkt
   nicht und meldet nichts. Farben und Randstaerke wie bei
   .v-mailstand.schlecht — kein neues Aussehen fuer denselben Zweck.
   Kontrast #6d3325 gegen #fbf1ee liegt ueber 4.5:1 (WCAG AA). */
.v-warnung{margin:0 0 6px; padding:12px 16px; background:#fbf1ee;
  border-left:4px solid #b5533f; border-radius:6px; font-size:.92rem;
  line-height:1.55; color:#6d3325}
.v-warnung-liste{margin:0 0 16px; padding:0 16px 12px 38px; background:#fbf1ee;
  border-left:4px solid #b5533f; border-radius:0 0 6px 6px; font-size:.92rem;
  line-height:1.7; color:#6d3325}
.v-warnung-liste code{background:#f3e3dd; padding:1px 5px; border-radius:4px}