/*
 * Das Stilblatt des Backends und aller dynamischen Seiten.
 *
 * Ausgelagert aus vorlagen/geruest.php (03.10.2026): 55 KB, die vorher in jeder
 * Antwort mitkamen, liegen jetzt einmal im Browserzwischenspeicher. Die Farben
 * und Schriften eines Mandanten bleiben im Gerüst – sie wechseln je Seite.
 * Eingebunden mit ?v=<Änderungszeit>, damit eine neue Fassung sofort ankommt.
 */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--papier);color:var(--tinte);font:400 17px/1.55 var(--schrift);
     -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;min-height:100dvh}
a{color:var(--blau)}
.eyebrow{font-family:var(--schmal);font-weight:600;text-transform:uppercase;
         letter-spacing:var(--spur);font-size:12.5px;color:var(--gedaempft)}
.marke{background:var(--blau);color:#fff;padding:calc(env(safe-area-inset-top) + 16px) 24px 16px;
       display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.marke b{font-size:18px;font-weight:800;letter-spacing:-.01em}
.marke .rechts{display:flex;align-items:center;gap:16px;font-size:14px}
.marke .rechts span{opacity:.85}
/* -------------------------------------------------------- Sprachwahl
   Wie bei Booking.com: runde Flagge im Knopf, die Liste als weisse Karte
   darunter. Der Knopf erbt die Schriftfarbe seiner Umgebung – hell auf der
   blauen Kopfleiste, dunkel auf Papier –, die Liste ist immer dieselbe. */
.sprachwahl{position:relative;display:inline-block}
.sprachwahl>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  gap:7px;padding:5px 9px 5px 6px;border-radius:999px;color:inherit;
  font:600 13px/1 var(--schmal);letter-spacing:.06em;user-select:none;
  border:1px solid currentColor;border-color:rgba(127,127,127,.35)}
.sprachwahl>summary::-webkit-details-marker{display:none}
.sprachwahl>summary:hover{background:rgba(127,127,127,.14)}
.sprachwahl>summary:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.sprachwahl[open]>summary{background:rgba(127,127,127,.18)}
.sprachwahl .kuerzel{min-width:1.6em;text-align:left}
.flaggenrund{display:inline-block;width:20px;height:20px;border-radius:50%;overflow:hidden;
  flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.flaggenrund .flagge{display:block;width:20px;height:20px}
.sprachliste{list-style:none;margin:0;padding:6px;position:absolute;right:0;top:calc(100% + 6px);
  z-index:50;min-width:190px;background:#fff;color:var(--tinte);border-radius:12px;
  box-shadow:0 10px 30px rgba(12,26,51,.18),0 0 0 1px var(--linie);text-align:left}
.sprachwahl .sprachliste a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;
  color:var(--tinte);text-decoration:none;font:500 15px/1.2 var(--schrift);letter-spacing:0;
  text-transform:none}
.sprachwahl .sprachliste a:hover,.sprachwahl .sprachliste a:focus-visible{background:var(--papier)}
.sprachwahl .sprachliste a.an{font-weight:700;color:var(--blau)}
/* Der Kopf färbt seine Links weiß (.wortmarke a) und dämpft seine Spans – in
   der weißen Liste wäre beides unsichtbar. Deshalb zwei Klassen tief. */
.marke .rechts .sprachliste span{opacity:1}
.sprachliste .haekchen{margin-left:auto;color:var(--blau)}
.anmeldekopf .sprachwahl{position:absolute;top:calc(env(safe-area-inset-top) + 10px);right:14px}
.bfuss .sprachwahl .sprachliste{top:auto;bottom:calc(100% + 6px)}
.uebernahme{background:var(--achtung-flaeche);color:var(--achtung);padding:11px 24px;
            font-size:14.5px;font-weight:600;display:flex;gap:14px;align-items:center;
            border-bottom:1px solid rgba(138,88,0,.25)}
main{max-width:1000px;margin:0 auto;padding:32px 24px 72px}
h1{font-size:clamp(26px,4vw,34px);font-weight:800;letter-spacing:-.018em;text-wrap:balance}
h2{font-size:19px;font-weight:800;margin:34px 0 14px}
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:22px 24px}
.knopf{display:inline-block;border:0;border-radius:10px;padding:14px 24px;
       font:800 16px var(--schrift);background:var(--blau);color:#fff;cursor:pointer;text-decoration:none}
.knopf.mint{background:var(--mint);color:var(--blau)}
.knopf.umriss{background:transparent;color:var(--blau);box-shadow:inset 0 0 0 2px var(--linie);font-weight:600}
.knopf.klein{padding:8px 14px;font-size:14px}
label{display:block;font-weight:600;font-size:14.5px;margin-bottom:6px}
/* Nicht die Feldarten aufzählen, sondern die ausnehmen, die anders aussehen
   sollen: Beim Aufzählen fehlte prompt „tel", und das Telefonfeld stand als
   nackter Browserkasten im Formular. Dasselbe wäre bei „url" und „search"
   passiert. */
/* Farbfelder gehoeren ausdruecklich nicht dazu: Mit 13px Innenabstand quetscht
   der Browser die Farbflaeche zu einem Strich zusammen – das Feld sah aus wie
   ein leeres Textfeld und zeigte die Farbe nicht, um die es geht. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=color]),
textarea,select{width:100%;padding:13px 14px;font:400 17px var(--schrift);
  border:1px solid var(--linie);border-radius:10px;background:var(--karte);color:var(--tinte)}
textarea{line-height:1.5;resize:vertical}
input:focus-visible,.knopf:focus-visible,a
/* ------------------------------------------------------------------------
   Hilfsklassen statt style-Attribute.
   Grund: Die eigene Content-Security-Policy verwirft Stilattribute – Nonces
   gelten nur für <style>-Blöcke, nicht für Attribute. 64 Inline-Styles waren
   deshalb wirkungslos, und niemand hat es gemerkt, weil nichts kaputtging:
   Der Abmelden-Knopf stand nur blau auf blau da.
   ------------------------------------------------------------------------ */
.ab-1{margin-top:8px}   .ab-2{margin-top:16px}  .ab-3{margin-top:20px}
.ab-4{margin-top:26px}  .ab-0{margin-top:4px}
.unten-1{margin-bottom:10px} .unten-2{margin-bottom:18px}
.eng{max-width:430px} .mittel{max-width:520px} .breit{max-width:720px} .schmal-feld{max-width:340px}
.inline{display:inline}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vier{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:620px){.zwei,.vier{grid-template-columns:1fr}}
.gestapelt{display:grid;gap:10px}
.suchreihe{display:flex;gap:10px;max-width:460px;margin:20px 0 6px;flex-wrap:wrap}
.suchreihe input{flex:1 1 220px;width:auto}
.voll{width:100%} .rechtsbuendig{text-align:right} .linksbuendig{text-align:left}
.auto-links{margin-left:auto}
.blass{opacity:.45} .leiser{font-weight:400;color:var(--gedaempft)}
.warnend{color:var(--kritisch);font-weight:600}
.gross{font-size:30px;font-weight:800;color:var(--blau);line-height:1.1;margin-top:2px}
.zwischen{font-size:13px;font-family:var(--schmal);text-transform:uppercase;
  letter-spacing:var(--spur);color:var(--gedaempft);margin:26px 0 14px}
.aufklapp{cursor:pointer;font-weight:600;font-size:14.5px}
.wortmarke a{color:#fff;text-decoration:none}
.knopf.hell{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.probe-blau{background:var(--blau)} .probe-linie{background:var(--linie)}
.probe-papier{background:var(--papier)} .probe-kritisch{background:var(--kritisch)}
/* --- Einlass: für ein Tablet am Empfang, große Ziele, wenig Text ------- */
.einlasskopf{background:var(--blau);color:#fff;padding:16px 20px;display:flex;
  align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.einlasskopf h1{font-size:19px;font-weight:800;margin-top:2px}
.einlasskopf .eyebrow{color:rgba(255,255,255,.8)}
.zaehlwerk{text-align:right;line-height:1.05}
.zaehlwerk b{display:block;font-size:38px;font-weight:800}
.zaehlwerk span{font-family:var(--schmal);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--spur);font-size:11.5px;opacity:.85}
.suchleiste{position:sticky;top:0;z-index:20;background:var(--blau);padding:0 20px 14px}
.suchleiste input{width:100%;padding:15px 42px 15px 16px;font:400 19px var(--schrift);
  border:0;border-radius:11px;background:rgba(255,255,255,.16);color:#fff}
.suchleiste input::placeholder{color:rgba(255,255,255,.7)}
.suchleiste #clr{position:absolute;right:26px;top:9px;border:0;background:none;color:#fff;
  font-size:24px;padding:6px 10px;opacity:0;pointer-events:none;cursor:pointer}
.suchleiste #clr.an{opacity:.85;pointer-events:auto}
.siebe{display:flex;gap:8px;background:var(--blau);padding:0 20px 14px}
.sieb{font-family:var(--schmal);font-weight:600;font-size:12.5px;text-transform:uppercase;
  letter-spacing:var(--spur);padding:9px 15px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background:transparent;color:rgba(255,255,255,.85)}
.sieb.an{background:#fff;color:var(--blau);border-color:#fff}
.gast:focus-visible{outline:3px solid var(--blau);outline-offset:-3px}
.netzhinweis{background:var(--achtung-flaeche);color:var(--achtung);margin:0;
  padding:11px 20px;font-size:14.5px;font-weight:600}
main.einlass{max-width:760px;margin:0 auto;padding:14px 20px 60px}
main.einlass ul{list-style:none}
.gast{display:flex;align-items:center;gap:14px;background:var(--karte);
  border-bottom:1px solid var(--linie);padding:14px 16px;cursor:pointer;font-size:18px}
.gast:first-child{border-radius:12px 12px 0 0}
.gast:last-child{border-radius:0 0 12px 12px;border-bottom:0}
.gast .haken{width:32px;height:32px;flex:0 0 auto;border-radius:9px;border:2px solid var(--linie);
  background:var(--karte);cursor:pointer}
.gast.da{background:var(--gut-flaeche)}
.gast.da .haken{background:var(--gut);border-color:var(--gut);position:relative}
.gast.da .haken::after{content:"\2713";position:absolute;inset:0;display:grid;place-items:center;
  color:#fff;font-size:19px;font-weight:800}
.gast .wer{flex:1 1 auto;min-width:0;line-height:1.25}
.gast .wer b{font-weight:700}
.gast .dazu{display:block;font-size:13.5px;color:var(--gedaempft);margin-top:2px}
/* Der Bedarf faellt auf, ohne zu schreien: Der Empfang liest ihn im
   Vorbeigehen, waehrend er jemandem die Hand gibt. */
.gast .braucht{display:block;margin-top:4px;padding:3px 9px;border-radius:7px;
  background:var(--achtung-flaeche);color:var(--achtung);font-size:13px;
  font-weight:600}
/* Am Einlass ist „zum ersten Mal" die wichtigste Auskunft – sie steht neben
   dem Namen und nicht in der Nebenzeile, weil sie den Empfang zum Handeln
   bringt und nicht nur informiert. */
.gast .wer .marke{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;
  font-family:var(--schmal);font-weight:600;font-size:12px;letter-spacing:.04em;
  vertical-align:2px;white-space:nowrap}
.gast .wer .marke.neu{background:var(--mint);color:var(--blau)}
.gast .wer .marke.wieder,.gast .wer .marke.bronze,.gast .wer .marke.silber{
  background:var(--papier);color:var(--gedaempft)}
.gast .wer .marke.stamm,.gast .wer .marke.jubilaeum,.gast .wer .marke.gold{
  background:var(--gut-flaeche);color:var(--gut)}
.gast .wann{font-family:var(--schmal);font-size:14px;color:var(--gut);font-weight:600}
.gast[hidden]{display:none}

/* Die Buehne: aus zwanzig Metern lesbar, sonst nichts. */
.buehne{position:fixed;inset:0;background:var(--blau);color:#fff;display:flex;
  flex-direction:column;padding:3vh 4vw;transition:background .4s}
.buehne.knapp{background:var(--achtung)}
/* Die letzte Minute warnt, das Rundenende fordert auf. Gruen hiesse „alles gut,
   sitzen bleiben" – gemeint ist das Gegenteil. */
.buehne.aus{background:var(--mint);color:var(--blau)}
.buehne.aus .haus,.buehne.aus .event,.buehne.aus .wort,.buehne.aus .von,
.buehne.aus .naechst,.buehne.aus .jetzt{color:rgba(0,53,148,.72)}
.buehne header{display:flex;justify-content:space-between;align-items:baseline;gap:3vw;
  flex-wrap:wrap}
.buehne .haus,.buehne .event{font-family:var(--schmal);font-weight:600;
  font-size:clamp(14px,2.2vw,34px);text-transform:uppercase;letter-spacing:.1em;
  color:rgba(255,255,255,.78)}
.buehne main{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;min-height:0}
.buehne .wort{font-family:var(--schmal);font-weight:600;
  font-size:min(4vw,6vh);text-transform:uppercase;letter-spacing:.2em;
  color:rgba(255,255,255,.8)}
/* Die Ziffer richtet sich nach der kleineren Kante: Auf einem breiten Beamer
   waere sie sonst hoeher als der Platz zwischen Kopf- und Fusszeile. */
.buehne .zahl{font-weight:800;font-size:min(26vw,38vh);line-height:.85;
  letter-spacing:-.04em}
.buehne .zahl:empty{display:none}
.buehne .willkommen{margin-top:6vh;font-size:clamp(20px,3.2vw,40px);line-height:1.3;
  text-align:center;max-width:24ch;color:rgba(255,255,255,.9)}
.buehne .willkommen b{color:var(--mint);font-weight:800}
.buehne .von{font-family:var(--schmal);font-weight:600;
  font-size:min(2.6vw,4vh);text-transform:uppercase;letter-spacing:.16em;
  color:rgba(255,255,255,.7);margin-top:.5vh}
.buehne .uhr{font-weight:800;font-size:min(10vw,15vh);line-height:1;
  font-variant-numeric:tabular-nums;margin-top:2vh}
.buehne footer{display:flex;justify-content:space-between;align-items:baseline;gap:3vw}
.buehne .naechst,.buehne .jetzt{font-family:var(--schmal);font-weight:600;
  font-size:clamp(14px,2.4vw,38px);text-transform:uppercase;letter-spacing:.1em;
  color:rgba(255,255,255,.78);font-variant-numeric:tabular-nums}
/* Erklärender Text unter einem Feld. Er gehört zum Feld darüber, steht aber
   zurück – gleiche Größe wie der Fließtext machte ihn zur Ansage. */
.knopfreihe{display:flex;gap:10px;flex-wrap:wrap}
.rrunde{margin-top:26px}
.rrunde h2{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:18px;font-weight:800;color:var(--blau);margin-bottom:10px}
.rrunde .rtisch{font-family:var(--schmal);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:var(--spur);color:var(--gedaempft)}
.lperson.knapp{background:var(--papier);box-shadow:none}
.listenleute{list-style:none;display:grid;gap:14px;margin-top:4px}
.lperson{background:var(--karte);border:1px solid var(--linie);border-radius:14px;padding:18px}
.lperson[hidden]{display:none}
.lkopf{display:flex;gap:14px;align-items:center}
.lfoto{width:54px;height:54px;border-radius:14px;object-fit:cover;flex:0 0 auto;
  border:1px solid var(--linie)}
.lfoto.leer{display:grid;place-items:center;background:var(--blau);color:#fff;
  font-family:var(--schmal);font-weight:700;font-size:19px;letter-spacing:.04em;border:0}
.lwer{min-width:0}
.lwer b{font-weight:700;font-size:17.5px;color:var(--blau)}
.lwer .dazu{display:block;font-size:14.5px;color:var(--gedaempft);margin-top:2px}
.lwer .marke{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;
  font-family:var(--schmal);font-weight:600;font-size:11.5px;letter-spacing:.04em;
  vertical-align:2px;white-space:nowrap}
.lwer .marke.neu{background:var(--mint);color:var(--blau)}
.lwer .marke.wieder,.lwer .marke.bronze,.lwer .marke.silber{
  background:var(--papier);color:var(--gedaempft)}
.lwer .marke.stamm,.lwer .marke.jubilaeum,.lwer .marke.gold{
  background:var(--gut-flaeche);color:var(--gut)}
.lueber{margin-top:14px;line-height:1.5;font-size:15.5px}
.lzeile{margin-top:10px;font-size:15.5px;line-height:1.5}
.lzeile .wort{display:inline-block;font-family:var(--schmal);font-weight:600;font-size:11.5px;
  text-transform:uppercase;letter-spacing:var(--spur);color:var(--blau);
  background:var(--mint-hell);padding:3px 8px;border-radius:6px;margin-right:8px;
  vertical-align:1px}
.lwege{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.lwege a{font-family:var(--schmal);font-weight:600;font-size:12.5px;text-transform:uppercase;
  letter-spacing:var(--spur);padding:7px 13px;border-radius:999px;text-decoration:none;
  color:var(--blau);border:1px solid var(--linie);background:var(--papier)}
.profilfoto{margin:0 0 12px}
.profilfoto img{width:96px;height:96px;object-fit:cover;border-radius:14px;display:block;
  border:1px solid var(--linie)}
main.anmeldung h2.zwischen{margin-top:26px}
/* Zwischenüberschriften in der Statistik sind Überschriften, keine
   Feldbeschriftungen – anders als das kleine .zwischen in Formularen. */
main .stat-h{font-size:19px;font-weight:800;color:var(--blau);margin:30px 0 4px}
main .stat-h:first-of-type{margin-top:22px}
main h3.stat-h{font-size:16px;margin-top:24px}
table.raumtabelle{width:100%;border-collapse:collapse;font-size:15px}
table.raumtabelle th{text-align:left;font-family:var(--schmal);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:var(--spur);color:var(--gedaempft);
  padding:0 8px 8px;border-bottom:1px solid var(--linie)}
table.raumtabelle td{padding:7px 8px;border-bottom:1px solid var(--linie);vertical-align:middle}
table.raumtabelle tr:last-child td{border-bottom:0}
table.raumtabelle .nr{width:64px}
table.raumtabelle .nr b{font-size:17px;font-weight:800;color:var(--blau)}
table.raumtabelle .wg{width:100px}
table.raumtabelle input,table.raumtabelle select{padding:9px 11px;font-size:15px}
ul.mitliste{list-style:none;margin-top:12px}
ul.mitliste li{padding:7px 0 7px 24px;position:relative;font-size:15.5px;
  border-bottom:1px solid var(--linie)}
ul.mitliste li:last-child{border-bottom:0}
ul.mitliste li::before{content:"\2713";position:absolute;left:0;color:var(--gut);font-weight:800}
ul.mitliste.ohne li::before{content:"\2013";color:var(--gedaempft)}
.balken{display:grid;gap:9px}
.balkenzeile{display:grid;grid-template-columns:minmax(120px,1fr) 3fr auto;gap:14px;
  align-items:center;font-size:15px}
.balkenzeile .stab{height:14px;border-radius:999px;background:var(--papier);overflow:hidden}
.balkenzeile .fuellung{display:block;height:100%;background:var(--blau);border-radius:999px}
.balkenzeile .zahl{font-weight:700;font-variant-numeric:tabular-nums;min-width:42px;
  text-align:right}
@media(max-width:560px){.balkenzeile{grid-template-columns:1fr auto;gap:6px}
  .balkenzeile .stab{grid-column:1 / -1}}
table.ausgabentabelle{width:100%;border-collapse:collapse;font-size:15px}
table.ausgabentabelle th{text-align:left;font-family:var(--schmal);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:var(--spur);color:var(--gedaempft);
  padding:0 10px 8px;border-bottom:1px solid var(--linie)}
table.ausgabentabelle td{padding:11px 10px;border-bottom:1px solid var(--linie)}
table.ausgabentabelle th.re,table.ausgabentabelle td.re{text-align:right}
table.ausgabentabelle tr.an td{background:var(--mint-hell);font-weight:600}
.textkopf{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  flex-wrap:wrap;margin-bottom:14px}
.textkopf h2{font-size:18px;font-weight:800;color:var(--blau)}
.textkopf .hilfe{margin-top:2px}
pre.textblock{background:var(--papier);border:1px solid var(--linie);border-radius:11px;
  padding:16px 18px;font:400 14.5px/1.6 var(--schrift);white-space:pre-wrap;
  overflow-wrap:anywhere;color:var(--tinte);margin:0}
.adressgruppe h2{font-size:19px;font-weight:800;color:var(--blau);margin-bottom:6px}
.adresse-karte{display:flex;gap:20px;align-items:flex-start;background:var(--karte);
  border:1px solid var(--linie);border-radius:14px;padding:20px;margin-top:14px}
.adresse-karte .wortlaut{flex:1 1 auto;min-width:0}
.adresse-karte h3{font-size:16.5px;font-weight:700}
.adresszeile{margin-top:10px}
.adresszeile code{display:block;padding:10px 12px;background:var(--papier);
  border:1px solid var(--linie);border-radius:9px;font-size:13.5px;word-break:break-all;
  line-height:1.45}
.adresse-karte .knoepfe{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.adressqr{flex:0 0 auto;text-align:center}
.adressqr p{font-family:var(--schmal);font-weight:600;font-size:11px;
  text-transform:uppercase;letter-spacing:var(--spur);color:var(--gedaempft);margin-top:6px}
@media(max-width:620px){.adresse-karte{flex-direction:column-reverse;align-items:stretch}
  .adressqr{align-self:flex-start}}
.hilfe{margin-top:8px;color:var(--gedaempft);font-size:14px;line-height:1.5}
.hilfe + .hilfe{margin-top:4px}
table + .hilfe,.tabellenhuelle + .hilfe{margin-top:16px}
/* Was direkt auf einen Erklaertext folgt, bringt selten einen eigenen Abstand
   mit: Ein <form> hat keinen, ein <button> auch nicht. Ohne diese Zeile klebt
   der Knopf am Satz, der ihn erklaert – und genau das ist zweimal passiert. */
.hilfe + form,.hilfe + button,.hilfe + .knopf,.hilfe + .knopfreihe{margin-top:16px}
form + .hilfe{margin-top:14px}
/* Ein Absende-Knopf steht am Ende eines Formulars und braucht Luft nach oben –
   ganz gleich, was davor kam: ein Erklaertext, ein Hinweiskasten, eine Tabelle.
   Das paarweise nachzupflegen ging zweimal schief; deshalb hier einmal fuer
   alle. Ausgenommen sind die knappen Formulare in Tabellenzellen. */
form:not(.knapp) > .knopf,form:not(.knapp) > button{margin-top:16px}
form:not(.knapp) > .knopf:first-child,form:not(.knapp) > button:first-child{margin-top:0}
.knopfpaar form > .knopf,.knopfpaar form > button{margin-top:0}

/* Programmtabelle: Uhrzeit, Titel mit Zusatzzeile, Dauer, Löschen. */
table.programmtabelle{width:100%;border-collapse:collapse;font-size:15px}
table.programmtabelle th{text-align:left;font-family:var(--schmal);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:var(--spur);color:var(--gedaempft);
  padding:0 8px 8px;border-bottom:1px solid var(--linie)}
table.programmtabelle td{padding:9px 8px;border-bottom:1px solid var(--linie);
  vertical-align:middle}
table.programmtabelle tr:last-child td{border-bottom:0}
table.programmtabelle .zt{width:130px}
table.programmtabelle .dr{width:110px}
table.programmtabelle .wg{width:104px;text-align:center}
table.programmtabelle input.zusatz{margin-top:6px;font-size:15px;color:var(--gedaempft)}
label.weg{display:inline-flex;align-items:center;gap:7px;margin:0;
  font-family:var(--schmal);font-weight:600;font-size:11.5px;text-transform:uppercase;
  letter-spacing:var(--spur);color:var(--gedaempft);cursor:pointer}
label.weg input{width:19px;height:19px;flex:0 0 auto}
.eng-paar{gap:10px}
.eng-paar .schmal-feld{flex:0 0 92px}

/* Ein Auswahlfeld in einer Tabellenzelle darf nicht auf Zellenbreite schrumpfen –
   sonst steht dort „M“ statt „Mitveranstalter“. */
/* Ein Auswahlfeld in einer Tabellenzelle darf nicht auf Zellenbreite schrumpfen –
   sonst steht dort „M“ statt „Mitveranstalter“. Breiter als nötig aber auch nicht. */
table select{min-width:0;width:auto;max-width:100%}
table.partnertabelle select{min-width:150px}

.schalter{display:flex;align-items:center;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--linie)}
.schalter:last-child{border-bottom:0}
.schalter>label{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:12px;margin:0}
.schalter label.ankreuz{margin:0}
.schalter .was{flex:1 1 auto}
.schalter select,.schalter input[type=number],.schalter input[type=text]{flex:0 0 auto;
  width:auto;min-width:190px;padding:9px 11px;font-size:15px}
.woher{flex:0 0 auto;font-family:var(--schmal);font-weight:600;font-size:11px;
  text-transform:uppercase;letter-spacing:var(--spur);padding:4px 9px;border-radius:999px;
  background:var(--papier);color:var(--gedaempft);white-space:nowrap}
.woher.event{background:var(--mint);color:var(--blau)}
.woher.organisation{background:var(--gut-flaeche);color:var(--gut)}
table.partnertabelle{width:100%;border-collapse:collapse;font-size:15px}
table.partnertabelle th{text-align:left;font-family:var(--schmal);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:var(--spur);color:var(--gedaempft);
  padding:0 8px 8px;border-bottom:1px solid var(--linie)}
table.partnertabelle th.mi,table.partnertabelle td.mi{text-align:center;width:58px}
table.partnertabelle td{padding:10px 8px;border-bottom:1px solid var(--linie);vertical-align:middle}
table.partnertabelle td.lg{width:52px}
table.partnertabelle .dazu{display:block;font-size:13.5px;color:var(--gedaempft);margin-top:2px}
table.partnertabelle input[type=checkbox]{width:20px;height:20px}
/* Zugaenge fuer Mitveranstalter */
table.zugangstabelle{width:100%;border-collapse:collapse;font-size:15px}
table.zugangstabelle th{text-align:left;font-family:var(--schmal);font-weight:600;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gedaempft);
  padding:0 8px 8px;border-bottom:1px solid var(--linie)}
table.zugangstabelle td{padding:12px 8px;border-bottom:1px solid var(--linie);vertical-align:top}
table.zugangstabelle select{min-width:130px}
table.zugangstabelle form.knapp{margin:0 0 6px}
table.zugangstabelle form.knapp:last-child{margin-bottom:0}
.wofuer{margin:6px 0 0;line-height:1.55}
.wofuer-rolle{display:block;margin-top:8px;color:var(--gedaempft);font-size:13.5px}
/* Brotkrumen: wo bin ich, und wie komme ich eine Ebene zurueck. */
nav.krumen{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:11px 24px;background:var(--papier);
  border-bottom:1px solid var(--linie);font-size:14px}
nav.krumen a{color:var(--blau);text-decoration:none}
nav.krumen a:hover{text-decoration:underline}
nav.krumen b{color:var(--tinte);font-weight:600}
nav.krumen span{color:var(--gedaempft)}


a.kopfweg{color:#fff;text-decoration:none;font-size:14px;opacity:.85}
a.kopfweg:hover{opacity:1;text-decoration:underline}

/* Module des Mandanten */
.modulzeile{display:flex;gap:18px;align-items:center;justify-content:space-between;
  padding:12px 0;border-top:1px solid var(--linie);flex-wrap:wrap}
.modulzeile:first-of-type{border-top:0}
.modulzeile.fest{border-left:3px solid var(--blau);padding-left:12px;margin-left:-15px}
.modulwort{flex:1 1 300px;min-width:0}
.modulwort label{display:block;font-weight:600;font-size:15.5px}
.modulwort .dazu{display:block;font-size:13px;color:var(--gedaempft);margin-top:3px}
.modulzeile select{flex:0 0 auto;width:auto;min-width:210px;padding:9px 12px;font-size:15px}

span.chip.an{background:var(--gut-flaeche);color:var(--gut)}
span.chip.aus{background:var(--papier);color:var(--gedaempft)}
table.zugangstabelle .dazu{display:block;font-size:12.5px;color:var(--gedaempft);margin-top:3px}

span.woher.unfertig{background:var(--achtung-flaeche);color:var(--achtung)}

span.chip.treue{margin-left:8px;font-size:10.5px;vertical-align:1px}
span.chip.treue.neu{background:var(--mint-hell);color:var(--blau)}
span.chip.treue.stamm,span.chip.treue.jubilaeum,span.chip.treue.gold{
  background:var(--gut-flaeche);color:var(--gut)}
span.chip.treue.wieder,span.chip.treue.silber,span.chip.treue.bronze{
  background:var(--papier);color:var(--gedaempft)}

/* Freiwillige Angaben stehen zusammen in einem Kasten: Wer sie ueberspringt,
   soll sehen, dass er einen Block ueberspringt und nicht drei Pflichtfelder. */
fieldset.feldgruppe{border:1px solid var(--linie);border-radius:var(--radius);
  padding:16px 18px;margin-top:18px}
fieldset.feldgruppe legend{padding:0 8px;font-weight:600;font-size:15px}
fieldset.feldgruppe .feld:first-of-type{margin-top:10px}

.wahlreihe{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.wahlreihe .wahl{margin:0}

.bericht .band.zweit{margin-top:14px}

a.schlicht{color:inherit;text-decoration:none}
a.schlicht:hover{text-decoration:underline}

/* Texte der Anwendung */
.sprachstand{display:flex;gap:12px;flex-wrap:wrap}
.standkachel{flex:1 1 150px;padding:14px 16px;border:1px solid var(--linie);
  border-radius:var(--radius);text-decoration:none;color:var(--tinte);background:var(--papier)}
.standkachel.an{border-color:var(--blau);background:var(--mint-hell)}
.standkachel b{display:block;font-size:16px}
.standkachel span{display:block;font-size:13px;color:var(--gedaempft);margin-top:3px}
.standkachel .dazu{color:var(--blau);font-weight:600}
.suchreihe{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.suchreihe .feld{flex:1 1 220px;margin:0}
.textzeile{padding:14px 0;border-top:1px solid var(--linie);position:relative}
.textzeile:first-of-type{border-top:0}
.textzeile.fehlt{border-left:3px solid var(--achtung);padding-left:12px;margin-left:-15px}
.textzeile.geaendert{border-left:3px solid var(--blau);padding-left:12px;margin-left:-15px}
.textzeile .quelle{font-size:14.5px;line-height:1.45;color:var(--gedaempft);margin-bottom:6px}
.textzeile textarea{width:100%;padding:9px 11px;font:inherit;font-size:15px;
  border:1px solid var(--linie);border-radius:8px;background:var(--papier);
  color:var(--tinte);resize:vertical}
.textzeile .herkunft{position:absolute;top:14px;right:0;font-family:var(--schmal);
  font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--gedaempft)}
nav.blaetter{display:flex;gap:4px;flex-wrap:wrap}
nav.blaetter a{padding:6px 11px;border:1px solid var(--linie);border-radius:7px;
  text-decoration:none;color:var(--tinte);font-size:14px}
nav.blaetter a.an{background:var(--blau);color:#fff;border-color:var(--blau)}

/* Der Weg zum Abend */
.strecke{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
  padding:22px 24px}
.streckenkopf{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  flex-wrap:wrap;margin-bottom:6px}
.streckenkopf h2{margin:0}
.streckenkopf span{font-size:14px;color:var(--gedaempft)}
.etappe{margin-top:18px}
.etappe.jetzt .etappenwort{color:var(--blau)}
.etappenwort{font-family:var(--schmal);font-weight:600;font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gedaempft);margin-bottom:6px}
ol.schritte{list-style:none}
ol.schritte li{display:flex;gap:14px;align-items:center;justify-content:space-between;
  padding:11px 0 11px 30px;border-top:1px solid var(--linie);position:relative}
ol.schritte li:first-child{border-top:0}
ol.schritte li::before{position:absolute;left:0;top:12px;width:20px;text-align:center;
  font-weight:700}
ol.schritte li.fertig::before{content:"\2713";color:var(--gut)}
ol.schritte li.offen::before{content:"\25CB";color:var(--linie)}
ol.schritte li.dran::before{content:"\25CF";color:var(--blau)}
ol.schritte li.fertig b{color:var(--gedaempft);font-weight:600}
ol.schritte li.dran{background:var(--mint-hell);margin:0 -12px;padding-left:42px;
  padding-right:12px;border-radius:10px;border-top-color:transparent}
ol.schritte li.dran + li{border-top-color:transparent}
.schrittwort{min-width:0}
.schrittwort b{font-size:15.5px}
.schrittwort .stand{display:inline-block;margin-left:8px;font-size:13px;color:var(--gedaempft)}
.schrittwort .satz{display:block;font-size:14px;color:var(--tinte);margin-top:4px;
  line-height:1.45;max-width:52ch}

/* Betrieb */
ul.zustandsliste,ul.anstehliste,ul.faelligliste{list-style:none;margin-top:16px}
ul.zustandsliste li{padding:11px 0 11px 26px;border-top:1px solid var(--linie);position:relative}
ul.zustandsliste li:first-child{border-top:0}
ul.zustandsliste li::before{position:absolute;left:0;top:11px;font-weight:700}
ul.zustandsliste li.z-gut::before{content:"\2713";color:var(--gut)}
ul.zustandsliste li.z-achtung::before{content:"!";color:var(--achtung)}
ul.zustandsliste li.z-schlimm::before{content:"\2715";color:var(--kritisch)}
ul.zustandsliste b{display:inline-block;min-width:180px}
ul.zustandsliste span{color:var(--gedaempft);font-size:14.5px}
ul.anstehliste li,ul.faelligliste li{display:flex;gap:18px;align-items:flex-start;
  padding:14px 0;border-top:1px solid var(--linie)}
ul.anstehliste li:first-child,ul.faelligliste li:first-child{border-top:0}
ul.faelligliste li{justify-content:space-between}
.anstehliste .wann{flex:0 0 92px}
.anstehliste .wann b{display:block;font-size:16px}
.anstehliste .wann span{font-size:13px;color:var(--gedaempft)}
.anstehliste .wer a,.faelligliste .wer a{font-weight:700;text-decoration:none;color:var(--tinte)}
.anstehliste .dazu,.faelligliste .dazu{display:block;font-size:13.5px;color:var(--gedaempft);
  margin-top:3px}
ul.luecken{list-style:none;margin-top:7px}
ul.luecken li{padding:3px 0 3px 16px;border:0;position:relative;font-size:14px;
  color:var(--achtung)}
ul.luecken li::before{content:"\2192";position:absolute;left:0}
.knopf.warnend{color:var(--kritisch);box-shadow:inset 0 0 0 2px var(--kritisch)}

/* Mandanteneinstellungen */
h3.zwischen{margin-top:26px;font-size:17px}
.logopaar{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;
  margin-top:14px}
.logokasten .wort{font-family:var(--schmal);font-weight:600;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gedaempft);margin-bottom:7px}
.logoprobe{display:flex;align-items:center;justify-content:center;min-height:88px;
  padding:14px;border:1px solid var(--linie);border-radius:10px}
.logoprobe.hell{background:var(--papier)}
.logoprobe.dunkel{background:var(--blau)}
.logoprobe img{max-height:56px;max-width:100%;object-fit:contain}
.logoprobe span{font-size:13.5px;color:var(--gedaempft)}
.logoprobe.dunkel span{color:#ffffffaa}
.logokasten input[type=file]{font-size:14px;width:100%}
.logokasten form{margin-top:10px}
.verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
.knopfpaar{display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
ul.mangelliste{margin:12px 0 0 18px;font-size:14.5px;line-height:1.5}
ul.mangelliste li{margin-bottom:7px}
.farbgitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;
  margin-bottom:18px}
.farbfeld{display:flex;flex-direction:column;gap:5px}
.farbfeld label{font-family:var(--schmal);font-weight:600;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gedaempft)}
.farbfeld input[type=color]{width:100%;height:52px;padding:0;border:1px solid var(--linie);
  border-radius:10px;background:transparent;cursor:pointer;display:block}
/* Der Browser zeichnet die Flaeche in einen eigenen Rahmen mit Innenabstand.
   Ohne diese beiden Zeilen bleibt aussen ein weisser Rand stehen, und bei
   einer hellen Farbe sieht das Feld leer aus. */
.farbfeld input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.farbfeld input[type=color]::-webkit-color-swatch{border:0;border-radius:9px}
.farbfeld input[type=color]::-moz-color-swatch{border:0;border-radius:9px}
.farbfeld code{font-size:12.5px;color:var(--gedaempft);font-variant-numeric:tabular-nums;
  letter-spacing:.02em}
ul.reihenliste{list-style:none;margin:14px 0}
ul.reihenliste li{padding:10px 0;border-top:1px solid var(--linie)}
ul.reihenliste li:first-child{border-top:0}
ul.reihenliste span{display:block;font-size:13.5px;color:var(--gedaempft);margin-top:2px}
details.lauf{border-top:1px solid var(--linie);padding:10px 0}
details.lauf:first-of-type{border-top:0}
details.lauf summary{cursor:pointer;font-size:14.5px}
pre.laufbericht{margin-top:10px;padding:12px 14px;background:var(--papier);
  border:1px solid var(--linie);border-radius:8px;font-size:13px;line-height:1.5;
  max-height:300px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.zuganglink{margin-top:10px;padding:12px 14px;background:var(--papier);
  border:1px solid var(--linie);border-radius:8px;overflow-wrap:anywhere}
.zuganglink code{font-size:13.5px}
.partnerlogo{max-width:56px;max-height:36px;object-fit:contain;display:block}
.freiname{flex:1 1 auto;font-weight:600}
.reihe{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding:10px 0;border-bottom:1px solid var(--linie)}
.reihe:last-child{border-bottom:0}
.eingangkopf{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  flex-wrap:wrap;margin-bottom:16px}
.eingangkopf h2{font-size:19px;font-weight:800;color:var(--blau)}
.eingangkopf .art{font-family:var(--schmal);font-size:13px;color:var(--gedaempft);margin-top:3px}
.eingang .adresse{margin:6px 0 14px}
.eingang .adresse code{display:block;padding:11px 13px;background:var(--papier);
  border:1px solid var(--linie);border-radius:9px;font-size:13.5px;word-break:break-all}
table.zuordnung{width:100%;border-collapse:collapse;font-size:15px}
table.zuordnung th{text-align:left;font-family:var(--schmal);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:var(--spur);color:var(--gedaempft);
  padding:0 8px 8px;border-bottom:1px solid var(--linie)}
table.zuordnung td{padding:8px;border-bottom:1px solid var(--linie);vertical-align:middle}
table.zuordnung code{font-size:13px;word-break:break-all}
table.zuordnung .probe{color:var(--gedaempft);font-size:14px}
table.zuordnung select{min-width:170px}
ul.eingangprotokoll{list-style:none;font-size:14.5px}
ul.eingangprotokoll li{display:flex;gap:10px;align-items:baseline;padding:7px 0;
  border-bottom:1px solid var(--linie);flex-wrap:wrap}
ul.eingangprotokoll li:last-child{border-bottom:0}
.ergebnis{font-family:var(--schmal);font-weight:600;font-size:11.5px;text-transform:uppercase;
  letter-spacing:var(--spur);padding:3px 9px;border-radius:999px;
  background:var(--gut-flaeche);color:var(--gut)}
.ergebnis.abgelehnt{background:var(--achtung-flaeche);color:var(--achtung)}
.ergebnis.wartet,.ergebnis.dublette{background:var(--papier);color:var(--gedaempft)}
ul.eingangprotokoll .wann{font-family:var(--schmal);font-size:13px;color:var(--gedaempft)}
.anmeldekopf{background:var(--blau);color:#fff;padding:32px 24px 30px;text-align:center;
  position:relative}
.anmeldekopf .eyebrow{color:rgba(255,255,255,.8)}
.anmeldekopf h1{font-size:29px;font-weight:800;line-height:1.1;margin-top:6px;color:#fff}
.anmeldekopf .wann{margin-top:10px;font-family:var(--schmal);font-weight:600;font-size:14px;
  text-transform:uppercase;letter-spacing:var(--spur);color:rgba(255,255,255,.85)}
main.anmeldung{padding:22px 20px 60px}
main.anmeldung .karte{margin-bottom:16px}
main.anmeldung .einfuehrung p{margin-bottom:10px;line-height:1.55}
main.anmeldung .einfuehrung p:last-child{margin-bottom:0}
.quittung{text-align:center}
.quittung .haken{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:var(--gut);color:#fff;font-size:26px;font-weight:800;margin-bottom:14px}
.quittung h2{font-size:22px;font-weight:800;color:var(--blau);margin-bottom:10px}
.quittung p{margin-bottom:14px;line-height:1.55}
.quittung .knopf{margin:4px 0 6px}
.ankreuz{display:flex;gap:12px;align-items:flex-start;margin:4px 0 18px}
.ankreuz input{margin-top:4px;width:20px;height:20px;flex:0 0 auto}
/* Sichtbar für Formularroboter, unsichtbar für Menschen – und für
   Vorleseprogramme ausgeblendet, sonst wäre es eine Falle für die Falschen. */
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.druckstuecke{display:grid;gap:18px;margin-top:22px}
.stueck{background:var(--karte);border:1px solid var(--linie);border-radius:14px;padding:22px}
.stueck .was{margin:12px 0;font-size:16px}
.stueck .was b{font-weight:700}
.stueck .reihe{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:16px 0 10px}
.stueck .reihe label{font-family:var(--schmal);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:var(--spur);color:var(--gedaempft)}
.stueck .reihe select,.stueck .reihe input{display:block;margin-top:5px;padding:11px 12px;
  font:400 16px var(--schrift);color:var(--tinte);background:var(--papier);
  border:1px solid var(--linie);border-radius:9px}
.stueck .reihe input[type=number]{width:96px}
.suchleiste.hell{background:transparent;padding:0 0 14px;position:relative;top:auto}
.suchleiste.hell input{background:var(--karte);color:var(--tinte);border:1px solid var(--linie)}
.suchleiste.hell input::placeholder{color:var(--gedaempft)}
.suchleiste.hell #clr{right:6px;top:5px;color:var(--gedaempft)}
.netzhinweis.gut{background:var(--gut-flaeche);color:var(--gut)}
.verdichten{background:var(--achtung-flaeche);border-radius:14px;padding:22px;margin-bottom:20px}
.verdichten h2{font-size:17px;font-weight:800;margin-bottom:12px}
.aenderungen{list-style:none;margin-bottom:18px}
.aenderungen li{padding:7px 0;border-bottom:1px solid rgba(0,0,0,.07);font-size:15.5px}
.aenderungen li:last-child{border-bottom:0}
.verdichten .fuss{margin-top:12px}
.rechnet{font-weight:600;color:var(--achtung)}
.gast .lage{font-family:var(--schmal);font-size:13px;color:var(--gedaempft);
  text-align:right;min-width:120px}
.gast.geht{background:var(--achtung-flaeche)}
.gast.geht .lage{color:var(--achtung);font-weight:600}
.gast .tun{font-family:var(--schmal);font-weight:600;font-size:12.5px;text-transform:uppercase;
  letter-spacing:var(--spur);padding:10px 15px;border-radius:9px;cursor:pointer;
  border:1px solid var(--linie);background:var(--karte);color:var(--tinte);flex:0 0 auto}
.gast .tun.zurueck{display:none}
.gast.geht .tun[data-was="geht"]{display:none}
.gast.geht .tun.zurueck{display:block}
.nachtragen{background:var(--karte);border:1px solid var(--linie);border-radius:14px;
  padding:22px;margin-top:18px}
.nachtragen h2{font-size:17px;font-weight:800;margin-bottom:6px}
.nachtragen>p{color:var(--gedaempft);font-size:14.5px;margin-bottom:16px}
.nachtragen label{display:block;font-family:var(--schmal);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:var(--spur);color:var(--gedaempft);margin-bottom:12px}
.nachtragen input,.nachtragen select{display:block;width:100%;margin-top:5px;padding:12px 13px;
  font:400 17px var(--schrift);color:var(--tinte);background:var(--papier);
  border:1px solid var(--linie);border-radius:9px}
.nachtragen .paar{display:flex;gap:12px}
.nachtragen .paar label{flex:1 1 0;min-width:0}
.nachtragen .freiwillig{font-weight:400;text-transform:none;letter-spacing:0;opacity:.7}
.knopf.voll{width:100%;padding:15px;font-size:17px;margin-top:4px;text-align:center}
.nmeldung{margin-top:12px;padding:11px 14px;border-radius:9px;font-size:15px;font-weight:600;
  background:var(--gut-flaeche);color:var(--gut)}
.nmeldung.schlecht{background:var(--achtung-flaeche);color:var(--achtung)}

/* Aus der Teilnehmerseite übernommen, damit die Vorschau genauso aussieht. */
.jetztzeile{font-size:15px;color:var(--blau);font-weight:600}
.jetztzeile i{font-style:normal;background:var(--mint);border-radius:5px;padding:2px 8px;font-weight:800}
.folge{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}
.folge i{font-style:normal;background:var(--blau);color:#fff;border-radius:8px;
  padding:5px 11px 7px;display:flex;flex-direction:column;align-items:center;
  font-family:var(--schmal);letter-spacing:.04em;min-width:44px}
.folge i u{text-decoration:none;font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.72}
.folge i s{text-decoration:none;font-size:17px;font-weight:800;line-height:1.1}
.folge i.an{background:var(--mint);color:var(--blau)}
.folge i.ohne{background:var(--linie);color:var(--gedaempft)}
.runden{display:flex;flex-direction:column;gap:12px}
.runde{background:var(--karte);border-radius:14px;padding:16px 18px;display:flex;align-items:center;gap:16px}
.runde.live{outline:2px solid var(--mint);outline-offset:-2px}
.runde .nr{font-family:var(--schmal);font-size:12px;letter-spacing:var(--spur);text-transform:uppercase;
  color:var(--gedaempft);writing-mode:vertical-rl;transform:rotate(180deg);flex:0 0 auto}
.runde .mitte{flex:1 1 auto;min-width:0}
.runde .marker{display:inline-block;background:var(--blau);color:#fff;font-family:var(--schmal);
  font-size:11px;letter-spacing:var(--spur);text-transform:uppercase;border-radius:5px;padding:2px 7px;margin-bottom:7px}
.tischwort{font-family:var(--schmal);font-size:13px;letter-spacing:var(--spur);text-transform:uppercase;
  color:var(--blau);display:block;margin-bottom:5px}
.tischchip{display:inline-block;background:var(--mint);color:var(--blau);font-weight:800;
  font-size:34px;line-height:1.05;border-radius:10px;padding:2px 14px}
.mit{margin-top:11px;font-size:14.5px;color:var(--gedaempft);line-height:1.4}
.mit b{color:var(--tinte);font-weight:600}

/* Die Hierarchieleiste: wo bin ich, als wer arbeite ich, wie komme ich zurück. */
.pfad{background:var(--blau);color:#fff;padding:9px 24px 11px;
  border-bottom:3px solid var(--mint)}
.pfad.lesend{border-bottom-color:var(--achtung)}
.pfad nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pfad form{display:inline;margin:0}
.pfad .stufe{font-family:var(--schmal);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--spur);font-size:11.5px;color:#fff;background:none;border:0;
  padding:3px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.45)}
.pfad .stufe.hier{text-decoration:none;cursor:default;
  background:rgba(255,255,255,.16);border-radius:99px;padding:3px 11px}
.pfad .stufe:not(.hier):hover{text-decoration-color:#fff}
.pfad .trenner{opacity:.5;font-size:13px}
.pfad .satz{margin:5px 0 0;font-size:13px;opacity:.9}
.pfad.lesend .satz{color:#fff}
:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.feld{margin-bottom:16px}
.warnung{background:var(--kritisch-flaeche);color:var(--kritisch);border-radius:10px;
         padding:13px 16px;font-size:15px;margin-bottom:18px}
/* Breite Inhalte scrollen in ihrem eigenen Kasten – der Seitenkörper nie. */
.tabellenhuelle{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:20px}
table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:520px}
.tabellenhuelle table{margin-top:0}
th{text-align:left;font-family:var(--schmal);font-weight:600;text-transform:uppercase;
   letter-spacing:var(--spur);font-size:11.5px;color:var(--gedaempft);padding:0 14px 10px 0}
td{padding:14px 14px 14px 0;border-top:1px solid var(--linie);vertical-align:top}
.chip{display:inline-block;border-radius:99px;padding:3px 10px;font-family:var(--schmal);
      font-weight:600;text-transform:uppercase;letter-spacing:var(--spur);font-size:10.5px}
.chip.entwurf{background:var(--linie);color:var(--gedaempft)}
.chip.laufend{background:var(--mint);color:var(--blau)}
.chip.anmeldung,.chip.gedruckt{background:var(--mint-hell);color:var(--blau)}
.chip.geschlossen{background:var(--linie);color:var(--tinte)}
.chip.archiviert,.chip.beendet,.chip.abgesagt{background:transparent;color:var(--gedaempft);box-shadow:inset 0 0 0 1px var(--linie)}
.leer{color:var(--gedaempft);font-size:15.5px;line-height:1.6}
input[type=file]{width:100%;padding:12px;border:1px dashed var(--linie);
  border-radius:10px;background:var(--papier);font:400 15px var(--schrift)}
button[disabled]{opacity:.45}
select{width:100%;padding:13px 14px;font:400 17px var(--schrift);border:1px solid var(--linie);
  border-radius:10px;background:var(--karte);color:var(--tinte)}
.chip.angemeldet{background:var(--linie);color:var(--gedaempft)}
.chip.eingecheckt{background:var(--gut-flaeche);color:var(--gut)}
.chip.warteliste{background:var(--achtung-flaeche);color:var(--achtung)}
.chip.abgemeldet,.chip.storniert,.chip.nicht_erschienen{background:var(--kritisch-flaeche);color:var(--kritisch)}
/* Auskunft nach Art. 15 DSGVO */
.auskunftsliste{display:grid;grid-template-columns:minmax(120px,34%) 1fr;gap:4px 16px;margin:8px 0 14px;font-size:15px}
.auskunftsliste dt{color:var(--gedaempft)}
.auskunftsliste dd{overflow-wrap:anywhere}
.auskunft h3.zwischen{margin-top:16px}
@media print{
  header.marke,nav.krumen,nav.wege,.nicht-drucken{display:none !important}
  body{background:#fff}
  .auskunft .karte{box-shadow:none;border:1px solid #ccc;break-inside:avoid-page}
}
/* Zwei-Faktor-Anmeldung einrichten (Mein Konto) */
ol.einrichten{padding-left:20px;line-height:1.5}
ol.einrichten li{margin:0 0 14px}
.qrfeld{display:inline-block;background:#fff;border-radius:10px;padding:8px;line-height:0}
.qrfeld svg{display:block;width:200px;height:200px}
.codeliste{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin-top:14px}
.codeliste code{font-size:16px;letter-spacing:.04em}
/* Die Reiterleiste scrollt in sich, statt die ganze Seite breitzuziehen. */
/* Auf dem Handy scrollt die Leiste, auf einem breiten Fenster bricht sie um:
   Elf Reiter passen sonst nicht, und die letzten waren unauffindbar. */
nav.wege{background:var(--karte);border-bottom:1px solid var(--linie);padding:0 24px;
  display:flex;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
@media(min-width:900px){nav.wege{flex-wrap:wrap;overflow-x:visible;padding-bottom:0}}
nav.wege::-webkit-scrollbar{display:none}
nav.wege a{white-space:nowrap}
nav.wege a{padding:14px 16px;text-decoration:none;font-weight:600;font-size:15px;
  color:var(--gedaempft);border-bottom:3px solid transparent}
nav.wege a.an{color:var(--blau);border-bottom-color:var(--blau)}
.melde{border-radius:10px;padding:13px 16px;font-size:15px;margin:18px 0 0;line-height:1.5}
.melde.gut{background:var(--gut-flaeche);color:var(--gut)}
.melde.kritisch{background:var(--kritisch-flaeche);color:var(--kritisch)}
.melde.achtung{background:var(--achtung-flaeche);color:var(--achtung)}
.melde.hinweis{background:var(--karte);color:var(--gedaempft);border:1px solid var(--linie)}
/* So viele Spalten wie Kacheln, höchstens vier: Bei drei Kacheln blieb sonst
   ein grauer Rest stehen, wo die vierte gefehlt hat. */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--linie);border:1px solid var(--linie);border-radius:var(--radius);
  overflow:hidden;margin-top:16px}
.kachel{background:var(--karte);padding:20px 22px}
.kachel b{display:block;font-size:30px;font-weight:800;color:var(--blau);line-height:1}
.kachel.klein b{font-size:24px;color:var(--tinte)}
.kachel span{display:block;margin-top:6px;font-family:var(--schmal);font-weight:600;
  text-transform:uppercase;letter-spacing:var(--spur);font-size:11px;color:var(--gedaempft)}
.bericht{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden}
.bericht .band{background:var(--blau);color:#fff;padding:13px 20px;display:flex;
  align-items:baseline;justify-content:space-between;gap:16px}
.bericht .band b{font-size:16px;font-weight:800}
.bericht .band span{font-family:var(--schmal);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--spur);font-size:11.5px;opacity:.85}
.kennzahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linie)}
.kz{background:var(--karte);padding:16px 20px}
.kz b{display:block;font-size:25px;font-weight:800;line-height:1}
.kz b.gut{color:var(--gut)} .kz b.schlecht{color:var(--kritisch)}
.kz span{display:block;margin-top:6px;font-family:var(--schmal);font-weight:600;
  text-transform:uppercase;letter-spacing:var(--spur);font-size:10.5px;color:var(--gedaempft)}
@media(max-width:760px){.kacheln,.kennzahlen{grid-template-columns:repeat(2,1fr)}}
.rundenwahl{display:flex;gap:8px;margin:20px 0 0;flex-wrap:wrap}
.rw{padding:9px 17px;border-radius:9px;background:var(--karte);border:1px solid var(--linie);
    font-weight:600;font-size:14.5px;text-decoration:none;color:var(--tinte)}
.rw.an{background:var(--blau);color:#fff;border-color:var(--blau)}
.raum{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;margin-top:16px}
@media(max-width:900px){.raum{grid-template-columns:repeat(3,1fr)}}
.tisch{background:var(--karte);border:1px solid var(--linie);border-radius:11px;padding:13px 14px;min-height:110px}
.tisch .nr{width:29px;height:29px;border-radius:8px;background:var(--blau);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:15px;margin-bottom:10px}
.tisch ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.tisch li{font-size:13.5px;line-height:1.3}
.tisch.duenn,.tisch.frei{border-style:dashed}
.tisch.duenn .nr,.tisch.frei .nr{background:var(--achtung)}
.tisch .hinweis{margin-top:8px;font-size:12px;color:var(--achtung);font-weight:600}
.matrixblock{display:grid;grid-template-columns:auto 1fr;gap:28px;margin-top:16px;
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:22px 24px}
@media(max-width:900px){.matrixblock{grid-template-columns:1fr}}
#matrix{border:1px solid var(--linie);border-radius:8px;image-rendering:pixelated;max-width:100%;height:auto}
.legende p{margin:0 0 14px;font-size:15px;line-height:1.6;max-width:46ch}
.lgd{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.lgd div{display:flex;align-items:center;gap:11px;font-size:14px}
.lgd i{width:15px;height:15px;border-radius:3px;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(12,26,51,.14)}
.freigabe{display:flex;align-items:center;gap:13px;padding:15px 20px;
  border-top:1px solid var(--linie);background:var(--gut-flaeche)}
.freigabe.warn{background:var(--achtung-flaeche)}
.freigabe p{margin:0;font-size:14.5px;line-height:1.45}
.haken{width:24px;height:24px;border-radius:6px;background:var(--gut);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:14px;flex:0 0 auto}
.haken.warn{background:var(--achtung)}
.machbar{border-radius:11px;padding:16px 18px;margin:6px 0 4px;
        background:var(--gut-flaeche);border:1px solid rgba(11,110,85,.28)}
.machbar .kopfzeile{display:flex;align-items:center;gap:9px;font-family:var(--schmal);
  font-weight:600;text-transform:uppercase;letter-spacing:var(--spur);font-size:11.5px;color:var(--gut)}
.machbar .kopfzeile::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gut)}
.machbar b{display:block;font-size:22px;font-weight:800;margin:9px 0 3px;color:var(--tinte)}
.machbar p{margin:0;font-size:14px;color:var(--gedaempft);line-height:1.5}
.machbar.warn{background:var(--achtung-flaeche);border-color:rgba(138,88,0,.3)}
.machbar.warn .kopfzeile{color:var(--achtung)}
.machbar.warn .kopfzeile::before{background:var(--achtung)}
.wahl{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border:1px solid var(--linie);
      border-radius:10px;margin-bottom:9px;cursor:pointer;font-weight:400}
.wahl:has(input:checked){border-color:var(--blau);box-shadow:inset 0 0 0 1px var(--blau)}
.wahl input{margin-top:4px;flex:0 0 auto}
.wahl b{font-weight:800;font-size:15.5px}

.fuss{border-top:1px solid var(--linie);margin-top:48px;padding-top:20px;
      color:var(--gedaempft);font-size:13.5px}

/* --------------------------------------------------- Baustelle und Recht */
/* Die oeffentlichen Seiten. Sie teilen das Farbwerk der Anwendung, bekommen
   aber mehr Luft: Hier liest jemand zum ersten Mal, waehrend im Backend
   jemand arbeitet, der die Seite schon kennt. */
main.baustelle{max-width:none;padding:0;display:flex;flex-direction:column;
  min-height:100dvh;background:var(--blau);color:#fff}
main.baustelle .bmitte{flex:1 1 auto;display:flex;flex-direction:column;
  justify-content:center;max-width:720px;width:100%;margin:0 auto;
  padding:72px 24px 48px}
main.baustelle .eyebrow{color:var(--mint)}
main.baustelle h1{font-size:clamp(30px,6vw,46px);font-weight:800;line-height:1.08;
  letter-spacing:-.02em;margin:14px 0 20px;color:#fff}
main.baustelle .blead{font-size:clamp(17px,2.3vw,20px);line-height:1.5;
  color:rgba(255,255,255,.86);max-width:36em}
main.baustelle .bpunkte{list-style:none;margin:34px 0 0;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
main.baustelle .bpunkte li{border-top:2px solid var(--mint);padding-top:12px;
  font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.78)}
main.baustelle .bpunkte b{display:block;color:#fff;font-size:14px;
  font-family:var(--schmal);text-transform:uppercase;letter-spacing:var(--spur);
  margin-bottom:5px}
main.baustelle .bstand{margin-top:38px;font-size:15.5px;color:rgba(255,255,255,.72)}
main.baustelle .bknopf{margin-top:18px;display:flex;align-items:center;
  gap:22px;flex-wrap:wrap}
main.baustelle .bknopf .knopf{background:var(--mint);color:var(--blau_tief);
  border-color:var(--mint);font-weight:800}
main.baustelle .bfon{color:rgba(255,255,255,.8);font-family:var(--schmal);
  font-weight:600;text-decoration:none}
main.baustelle .bfon:hover{color:#fff}
.bfuss{flex:0 0 auto;border-top:1px solid rgba(255,255,255,.16);
  padding:18px 24px calc(env(safe-area-inset-bottom) + 18px);
  display:flex;gap:22px;flex-wrap:wrap;justify-content:center;
  font-size:13.5px}
.bfuss a{color:rgba(255,255,255,.7);text-decoration:none}
.bfuss a:hover{color:#fff;text-decoration:underline}

main.recht{max-width:760px}
main.recht h1{font-size:30px;font-weight:800;margin:6px 0 24px}
main.recht h2{font-size:17px;font-weight:800;color:var(--blau);
  margin:30px 0 8px;padding-top:14px;border-top:2px solid var(--mint)}
main.recht p{margin-bottom:10px;line-height:1.6}
main.recht .zurueck{margin-top:44px;border-top:1px solid var(--linie);
  padding-top:20px;font-size:14px}

/* Startseite: nächster Abend, was anliegt, Ampel des Betriebs (03.10.2026) */
.startkopf{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.ampel{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;
  font-size:14px;font-weight:600;text-decoration:none;background:var(--karte);color:var(--tinte);
  box-shadow:inset 0 0 0 1px var(--linie);margin-bottom:6px}
.ampel span{width:10px;height:10px;border-radius:50%;background:var(--gut)}
.ampel.gelb span{background:var(--achtung)}
.ampel.rot{color:var(--kritisch);box-shadow:inset 0 0 0 1px var(--kritisch)}
.ampel.rot span{background:var(--kritisch)}
.ampel:hover{text-decoration:underline}
.naechster h2{margin-top:2px}
.naechster h2 a{color:var(--blau);text-decoration:none}
.naechster h2 a:hover{text-decoration:underline}
.naechster .kacheln{border-radius:10px;overflow:hidden}
.kachel b small{font-size:.55em;font-weight:600;color:var(--gedaempft)}
.liegtan{list-style:none;margin-top:8px}
.liegtan li{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:10px 0;border-top:1px solid var(--linie);font-size:15px}
.liegtan li:first-child{border-top:0}
.liegtan b{margin-right:6px}
.neu7{color:var(--gut);font-size:14px;font-weight:600}

/* Globale Suche: Lupe im Kopf und Trefferseite */
.kopfsuche{display:flex;align-items:center;position:relative;background:rgba(255,255,255,.12);border-radius:99px;
  padding:2px 4px 2px 12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.kopfsuche:focus-within{background:#fff;box-shadow:0 0 0 2px var(--mint)}
#kopfsuche{background:transparent;border:0;box-shadow:none;color:#fff;font:500 14px/1.2 var(--schrift);
  width:120px;min-height:0;padding:6px 0;margin:0;outline:0;border-radius:0;transition:width .15s}
#kopfsuche:focus-visible{outline:0}
#kopfsuche::placeholder{color:rgba(255,255,255,.75)}
.kopfsuche:focus-within #kopfsuche{color:var(--tinte);width:220px}
.kopfsuche:focus-within #kopfsuche::placeholder{color:var(--gedaempft)}
.kopfsuche button{background:transparent;border:0;color:inherit;display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;cursor:pointer;color:#fff}
.kopfsuche:focus-within button{color:var(--blau)}
#kopfsuche::-webkit-search-cancel-button{display:none}
@media (max-width:760px){
  .kopfsuche{padding:2px}
  #kopfsuche{width:0}
  .kopfsuche:focus-within #kopfsuche{width:150px;padding-left:10px}
}
.suchzeile{display:flex;gap:10px}
.suchzeile input{flex:1}
.treffer{list-style:none;margin-top:6px}
.treffer li{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 0;border-top:1px solid var(--linie)}
.treffer li:first-child{border-top:0}
.treffer a{text-decoration:none;color:var(--tinte);display:flex;flex-direction:column;gap:2px;min-width:0}
.treffer a b{color:var(--blau)}
.treffer a:hover b{text-decoration:underline}
.treffer a span{color:var(--gedaempft);font-size:14px;overflow-wrap:anywhere}
/* Vorschläge beim Tippen */
.suchvorschlag{position:absolute;top:calc(100% + 8px);left:0;width:min(420px,calc(100vw - 32px));max-height:70vh;
  overflow:auto;z-index:60;background:#fff;border-radius:12px;padding:6px;text-align:left;
  box-shadow:0 12px 34px rgba(12,26,51,.22),0 0 0 1px var(--linie)}
.suchvorschlag a{display:grid;grid-template-columns:1fr;gap:1px;padding:9px 12px;border-radius:8px;
  color:var(--tinte);text-decoration:none;font-size:14px;line-height:1.35}
.suchvorschlag a small{font-family:var(--schmal);font-weight:600;font-size:10.5px;letter-spacing:var(--spur);
  text-transform:uppercase;color:var(--gedaempft)}
.suchvorschlag a b{color:var(--blau);font-size:15px}
.suchvorschlag a span{color:var(--gedaempft);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suchvorschlag a:hover,.suchvorschlag a.an{background:var(--papier)}
.suchvorschlag a.alle{border-top:1px solid var(--linie);border-radius:0 0 8px 8px;margin-top:4px;
  color:var(--blau);font-weight:600}
.suchvorschlag p{padding:10px 12px;color:var(--gedaempft);font-size:14px}
@media (max-width:760px){
  .suchvorschlag{position:fixed;top:58px;left:16px;right:16px;width:auto}
}

/* Logo des Mandanten oben links (eigenes Design) */
.kopflogo{display:flex;align-items:center;line-height:0}
.kopflogo img{height:30px;width:auto;max-width:180px;object-fit:contain;display:block}
.kopflogo img.weiss{filter:brightness(0) invert(1)}

/* Passkeys: Trenner auf der Anmeldeseite */
.oder{display:flex;align-items:center;gap:12px;margin:16px 0 0;color:var(--gedaempft);font-size:13px}
.oder::before,.oder::after{content:"";flex:1;height:1px;background:var(--linie)}
.oder + .knopf{margin-top:12px}
.passkeyneu .feld{max-width:340px}
/* Sicherheit: Verlauf der Anmeldungen */
.verlauf svg{display:block;width:100%;height:auto}
.verlauf rect.grund{fill:var(--linie);opacity:.35}
.verlauf rect.balken-ok{fill:var(--gut)}
.verlauf rect.balken-fehl{fill:var(--kritisch)}
.verlauf text{font-size:10px;fill:var(--gedaempft);font-family:var(--schmal)}
.legende{font-size:13px;color:var(--gedaempft);margin-top:8px}
.legende .punkt{display:inline-block;width:10px;height:10px;border-radius:3px;margin:0 5px 0 10px;vertical-align:-1px}
.legende .punkt:first-child{margin-left:0}
.legende .punkt.ok{background:var(--gut)} .legende .punkt.fehl{background:var(--kritisch)}
.kacheln.drei{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.kacheln.drei{grid-template-columns:repeat(2,1fr)}}
/* Auf dem Telefon bricht die Kopfleiste um, statt die Seite seitlich zu
   verschieben – der Verwalter hat dort sieben Wege nebeneinander. */
@media(max-width:760px){.marke .rechts{flex-wrap:wrap;gap:10px 14px;row-gap:10px}}