/* ===========================================================================
   Website-Verwaltung kummertoni.at

   Eigenes Stylesheet, nicht das der Website: hier zählt Bedienbarkeit. Farben
   und Schriften stammen trotzdem von der Website, damit sich beides zugehörig
   anfühlt – Petrona für Überschriften, Manrope für alles andere.
   =========================================================================== */

@font-face{font-family:'Petrona';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/assets/fonts/petrona.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/assets/fonts/manrope.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --tanne:#159a47; --tanne-btn:#0f7f39; --tanne-dk:#0b6c31; --tanne-lt:#4fc17a; --tanne-hell:#8fe3ab;
  /* --tanne-btn nur fuer Flaechen mit weisser Schrift: 5,1:1 statt 3,66:1 - wie auf der Website */
  --rot:#d33230; --rot-dk:#a81e1b;
  --moos:#0e2a1a; --moos-2:#15381f;
  --creme:#fbf7f0; --sand:#f0e7d6;
  --text:#1b2b20; --muted:#59685d; --rand:rgba(14,42,26,.13);
  --ff-d:'Petrona',Georgia,serif;
  --ff-t:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r:14px; --r-s:10px;
  --ease:cubic-bezier(.22,.68,.28,1);
  --schatten:0 10px 30px rgba(14,42,26,.07);
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; color:var(--text); font-family:var(--ff-t);
  font-size:16px; line-height:1.65; font-weight:450;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 500px at 88% -10%, rgba(21,154,71,.07), transparent 60%),
    var(--creme);
}
h1,h2,h3{font-family:var(--ff-d); letter-spacing:-.018em; line-height:1.2; margin:0}
h1{font-size:1.7rem; font-weight:600}
h2{font-size:1.45rem; font-weight:650; color:var(--moos); display:flex; align-items:center; gap:.75rem}
a{color:var(--tanne-dk)}
img{max-width:100%; height:auto; display:block}
svg{flex:none}
/* <small> und <code> ohne eigene Größe: nie unter 13 px (Hausregel, Prüfung A3 25.10.2026) */
small{font-size:max(13px,.83em)}
code{font-size:max(13px,.9em)}
::selection{background:rgba(21,154,71,.22)}
:focus-visible{outline:3px solid var(--tanne); outline-offset:2px; border-radius:6px}

/* ------------------------------------------------------------------ Kopf -- */
.a-kopf{
  position:sticky; top:0; z-index:30; color:#fff;
  background:linear-gradient(103deg,var(--moos) 0%,var(--moos-2) 62%,#1d4527 100%);
  box-shadow:0 2px 20px rgba(14,42,26,.22);
}
.a-kopf::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--tanne) 22%,var(--tanne-lt) 52%,var(--rot) 82%,transparent);
}
.a-kopf__in{
  width:min(100% - 2rem,1240px); margin-inline:auto; min-height:70px;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding-block:.7rem;
}
.a-kopfmarke{display:flex; align-items:center; gap:.8rem; color:#fff; margin-right:auto}
.a-kopfmarke img{flex:none; height:44px; width:auto; background:#fff; border-radius:10px; padding:4px}
.a-kopfmarke b{display:block; font-family:var(--ff-d); font-size:1.12rem; font-weight:650; line-height:1.15}
.a-kopfmarke small{
  display:block; font-size:.8125rem; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--tanne-lt);
}
.a-kopf__rechts{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
/* Abmelden ist seit 15.09.2026 ein Formular (POST mit CSRF, Befund W16); der
   Knopf soll in der Kopfleiste stehen wie vorher der Link. */
.a-abmelden{display:contents}
.a-wer{
  display:inline-flex; align-items:center; gap:.5rem; padding:.42rem .9rem;
  border-radius:99px; background:rgba(255,255,255,.1); font-size:.85rem; font-weight:650;
}
.a-wer__punkt{width:7px; height:7px; border-radius:50%; background:var(--tanne-lt); flex:none}

/* ---------------------------------------------------------------- Layout -- */
/* ------------------------------------------------------------ Anmeldung -- */
/* Zweigeteilt: links erklaert eine Markenspalte, worum es hier geht, rechts
   steht das Formular. Vorher stand nur eine kleine Box auf leerer Flaeche. */
body.a-anmeldung .a-kopf{display:none}
.a-login{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); min-height:100vh;
}
.a-login__marke{
  position:relative; overflow:hidden; color:#fff; display:flex; align-items:center;
  padding:clamp(2.4rem,5vw,4rem) clamp(1.6rem,4vw,3.4rem);
  background:linear-gradient(155deg,var(--moos) 0%,var(--moos-2) 55%,#1d4527 100%);
}
.a-login__girlande{
  position:absolute; left:0; right:0; top:0; height:96px; z-index:1; pointer-events:none;
  background:url('/assets/img/girlande-schmal.svg') repeat-x top center; background-size:auto 96px;
  filter:saturate(.7) brightness(.82); opacity:.75;
}
.a-login__baumreihe{
  position:absolute; left:0; right:0; bottom:0; height:70px; z-index:1; pointer-events:none;
  background:url('/assets/img/baumreihe.svg') repeat-x bottom center; background-size:auto 70px;
  opacity:.5;
}
.a-login__inhalt{position:relative; z-index:2; max-width:34rem; margin-inline:auto; padding-block:2.4rem}
.a-login__logo{
  width:84px; height:auto; margin-bottom:1.6rem; background:#fff;
  border-radius:16px; padding:8px;
}
.a-login__kicker{
  display:inline-flex; align-items:center; gap:.55rem; margin:0 0 .7rem;
  font-size:.8125rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:var(--tanne-hell);
}
.a-login__kicker::before{
  content:""; width:11px; height:10px; background:currentColor;
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.a-login__marke h1{
  font-size:clamp(2.1rem,4vw,3rem); font-weight:600; color:#fff; margin:0 0 .6rem;
  letter-spacing:-.022em;
}
.a-login__sub{margin:0 0 2rem; color:rgba(255,255,255,.78); font-size:1.02rem; line-height:1.7; max-width:44ch}
.a-login__punkte{list-style:none; margin:0; padding:0; display:grid; gap:.7rem}
.a-login__punkte li{
  display:grid; grid-template-columns:42px 1fr; align-items:center;
  gap:.15rem .95rem; padding:.75rem .95rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-s);
}
.a-login__punkte span{
  grid-row:1 / 3; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:rgba(79,193,122,.18); color:var(--tanne-hell);
}
.a-login__punkte span svg{width:19px; height:19px}
.a-login__punkte b{font-size:.98rem; font-weight:700; line-height:1.3}
.a-login__punkte small{font-size:.84rem; color:rgba(255,255,255,.62); line-height:1.45}

.a-login__form{display:grid; place-items:center; padding:clamp(2rem,5vw,3rem) clamp(1.2rem,4vw,2.6rem)}
.a-login__box{width:min(100%,26rem)}
.a-login__box h2{font-size:1.75rem; display:block}
.a-login__ziel{
  display:flex; align-items:center; gap:.55rem; margin:0 0 1.1rem; padding:.7rem .9rem;
  background:rgba(21,154,71,.09); border:1px solid rgba(21,154,71,.24); border-radius:var(--r-s);
  font-size:.88rem; color:#0a5227;
}
.a-login__ziel svg{width:16px; height:16px; flex:none}
.a-login__ziel b{font-weight:700; overflow:hidden; text-overflow:ellipsis}
.a-login__fuss{margin:1.2rem 0 0; font-size:.85rem; line-height:1.6; color:var(--muted)}
.a-btn--voll{width:100%; padding:.85rem 1.35rem; font-size:1rem}
@media (max-width:900px){
  .a-login{grid-template-columns:1fr; min-height:0}
  .a-login__marke{padding:2.6rem 1.4rem 3.6rem}
  .a-login__inhalt{padding-block:1.4rem 0}
  .a-login__logo{width:64px; margin-bottom:1.1rem}
  .a-login__sub{margin-bottom:1.5rem; font-size:.96rem}
  .a-login__punkte{grid-template-columns:1fr 1fr}
  .a-login__baumreihe{height:48px; background-size:auto 48px}
  .a-login__girlande{height:70px; background-size:auto 70px}
}
/* Handy: Das Wichtigste ist das Eingabefeld. Die Markenspalte wird zum schmalen
   Kopfband - Logo links, Kicker und Titel rechts daneben, Stichpunkte entfallen.
   Genau dieselbe Fassung wie in den drei Apps (apps/app-basis.css). */
@media (max-width:620px){
  .a-login__marke{padding:1.15rem 1.1rem 1.5rem}
  .a-login__inhalt{
    padding-block:1.5rem 0; width:100%;     /* nicht im Flex zusammenschrumpfen */
    display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center;
    column-gap:.9rem; row-gap:.1rem;
  }
  .a-login__logo{grid-row:1 / 3; width:52px; margin:0; border-radius:13px; padding:6px}
  .a-login__kicker{grid-column:2; margin:0 0 .15rem; font-size:.8125rem; letter-spacing:.18em}
  .a-login__marke h1{grid-column:2; font-size:1.55rem; margin:0}
  .a-login__sub{grid-column:1 / -1; margin:.75rem 0 0; font-size:.92rem; line-height:1.55}
  .a-login__punkte{display:none}
  .a-login__baumreihe{height:34px; background-size:auto 34px; opacity:.42}
  .a-login__girlande{height:44px; background-size:auto 44px; opacity:.6}
  .a-login__form{padding:1.5rem 1.1rem 2.4rem}
  .a-login__box{width:100%}
  .a-login-ic{width:44px; height:44px; border-radius:13px; margin-bottom:.8rem}
  .a-login-ic svg{width:21px; height:21px}
  .a-login__box h2{font-size:1.5rem}
  /* Grosse Tippflaechen fuer Handschuhe und kalte Finger */
  .a-feld input{min-height:52px}
  .a-btn--voll{min-height:52px; font-size:1.02rem}
}
@media (max-width:380px){
  .a-login__sub{display:none}
  .a-login__marke h1{font-size:1.4rem}
}

/* Zwei Spalten: links die Seitenleiste, rechts alles andere untereinander.
   Ohne die feste Spaltenzuweisung landen die Karten abwechselnd links und
   rechts – ein Rasterkind belegt sonst einfach die naechste freie Zelle. */
.a-inhalt{
  width:min(100% - 2rem,1240px); margin-inline:auto; padding-block:1.8rem 3.5rem;
  display:grid; grid-template-columns:264px minmax(0,1fr); gap:1.8rem; align-items:start;
}
/* Genau zwei Rasterkinder: Seitenleiste und rechte Spalte. Frueher lagen die
   Karten einzeln im Raster - dann dehnte die Seitenleiste die erste Zeile auf
   ihre Hoehe und zwischen Ueberblick und erster Karte klaffte eine Luecke. */
.a-spalte{min-width:0}
@media (max-width:900px){.a-inhalt{grid-template-columns:1fr; gap:1.1rem}}

/* Seitenleiste */
.a-nav{
  display:flex; flex-direction:column; gap:.35rem; position:sticky; top:88px;
  background:#fff; border:1px solid var(--rand); border-radius:var(--r);
  padding:.6rem; box-shadow:var(--schatten);
}
.a-nav a{
  display:flex; align-items:center; gap:.75rem; padding:.7rem .8rem; border-radius:var(--r-s);
  text-decoration:none; color:var(--text);
  transition:background-color .22s ease, transform .28s var(--ease);
}
.a-nav a:hover{background:rgba(21,154,71,.08); transform:translateX(2px)}
.a-nav__ic{
  flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:rgba(21,154,71,.12); color:var(--tanne-dk);
}
.a-nav__ic svg{width:18px; height:18px}
.a-nav b{display:block; font-size:.94rem; font-weight:700; line-height:1.25}
.a-nav small{display:block; font-size:.8125rem; color:var(--muted)}
@media (max-width:900px){
  .a-nav{position:static; flex-direction:row; overflow-x:auto; padding:.5rem}
  .a-nav a{flex:0 0 auto}
  .a-nav small{display:none}
}

/* ------------------------------------------------------------- Überblick -- */
.a-ueberblick{
  color:#fff; border-radius:var(--r); overflow:hidden; margin-bottom:1.4rem;
  background:linear-gradient(120deg,var(--moos) 0%,var(--moos-2) 60%,#1d4527 100%);
  box-shadow:0 12px 34px rgba(14,42,26,.16);
}
.a-ueberblick__kopf{padding:1.3rem clamp(1.2rem,3vw,1.8rem) .2rem}
.a-ueberblick__titel{font-size:1.4rem; font-weight:650; color:#fff; display:block}
.a-ueberblick__kopf p{margin:.25rem 0 0; font-size:.9rem; color:rgba(255,255,255,.66)}
.a-ueberblick__zahlen{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:1px;
  padding:1.2rem clamp(1.2rem,3vw,1.8rem) 1.4rem;
}
.a-ueberblick__zahlen > div{position:relative; padding-left:1rem}
.a-ueberblick__zahlen > div::before{
  content:""; position:absolute; left:0; top:.3rem; bottom:.3rem; width:3px; border-radius:3px;
  background:linear-gradient(180deg,var(--tanne-lt),transparent);
}
.a-ueberblick__zahlen b{
  display:block; font-family:var(--ff-d); font-size:1.9rem; font-weight:600; line-height:1;
  color:var(--tanne-hell); letter-spacing:-.02em;
}
.a-ueberblick__zahlen span{
  display:block; margin-top:.3rem; font-size:.8125rem; font-weight:600; color:rgba(255,255,255,.62);
}
.a-ueberblick__hinweis b{font-size:1.35rem!important}
.a-ueberblick__hinweis--an b{color:#fff}
.a-ueberblick__hinweis--an::before{background:linear-gradient(180deg,var(--rot),transparent)!important}
/* Warnung im dunklen Begrüßungsfeld (Prüfung A1, 25.10.2026): helles Kästchen mit dunkelroter Schrift –
   vorher Dunkelrot direkt auf Dunkelgrün, nur 1,8 : 1 Kontrast. */
.a-ueberblick .a-status{
  display:flex; align-items:flex-start; margin:.8rem clamp(1.2rem,3vw,1.8rem) 0; border-radius:var(--r-s);
  padding:.6rem .9rem; line-height:1.5; font-size:.9rem;
}
.a-ueberblick .a-status::before{margin-top:.45rem}
.a-ueberblick .a-status--rot{background:#fff1ee; color:#8c1a17; border:1px solid #f3c3bc}

/* ----------------------------------------------------------------- Karte -- */
.a-karte{
  background:#fff; border:1px solid var(--rand); border-radius:var(--r);
  padding:clamp(1.2rem,3vw,2rem); margin-bottom:1.4rem; scroll-margin-top:92px;
  box-shadow:var(--schatten);
}
.a-karte:last-of-type{margin-bottom:0}
.a-karte__ic{
  flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(140deg,rgba(21,154,71,.2),rgba(21,154,71,.08)); color:var(--tanne-dk);
}
.a-karte__ic svg{width:20px; height:20px}
.a-login-ic{
  display:grid; place-items:center; width:52px; height:52px; border-radius:16px; margin-bottom:1.1rem;
  background:rgba(21,154,71,.14); color:var(--tanne-dk);
}
.a-login-ic svg{width:24px; height:24px}
.a-hilfe{font-size:.92rem; color:var(--muted); margin:.55rem 0 1.3rem; max-width:74ch}
.a-fuss{font-size:.82rem; color:var(--muted); text-align:center; margin:2.4rem 0 0}

/* --------------------------------------------------------------- Meldung -- */
.a-meldung{
  display:flex; gap:.6rem; padding:.85rem 1.05rem; border-radius:var(--r-s);
  font-size:.93rem; font-weight:550; margin:0 0 1.2rem; border:1px solid transparent;
  scroll-margin-top:92px;   /* bekommt nach dem Laden den Fokus: nicht unter der Kopfleiste landen */
}
.a-meldung:focus{outline:3px solid currentColor; outline-offset:3px}
.a-meldung--ok{background:rgba(21,154,71,.11); border-color:rgba(21,154,71,.32); color:#0a5227}
.a-meldung--fehler{background:rgba(211,50,48,.08); border-color:rgba(211,50,48,.3); color:var(--rot-dk)}
.a-status{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:700;
  padding:.4rem .9rem; border-radius:99px; margin:0 0 1.3rem;
}
.a-status::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor; flex:none}
.a-status--gruen{background:rgba(21,154,71,.12); color:#0a5227}
.a-status--rot{background:rgba(211,50,48,.09); color:var(--rot-dk)}
.a-status--grau{background:rgba(14,42,26,.06); color:var(--muted)}
.a-vermerk{
  font-size:.8125rem; color:var(--muted); margin:1rem 0 0; padding-top:.9rem;
  border-top:1px solid var(--rand);
}

/* -------------------------------------------------------------- Formular -- */
.a-form{margin:0}
.a-feld{margin-bottom:1rem; flex:1 1 220px; min-width:0}
.a-feld--schmal{flex:0 1 170px}
.a-feld--breit{flex:2 1 320px}
.a-feld label,.a-untertitel{
  display:block; font-size:.8125rem; font-weight:700; margin-bottom:.35rem; color:var(--moos);
}
.a-untertitel{
  margin:1.2rem 0 .5rem; font-size:.8125rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}
.a-opt{font-weight:500; color:var(--muted)}
.a-feld input,.a-feld select,.a-feld textarea,.a-zeit input{
  width:100%; padding:.68rem .85rem; font:inherit; font-size:16px; color:var(--text);
  background:var(--creme); border:1.5px solid var(--rand); border-radius:var(--r-s);
  transition:border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.a-feld textarea{line-height:1.6; resize:vertical}
.a-feld input:hover,.a-feld textarea:hover,.a-zeit input:hover{border-color:rgba(14,42,26,.24)}
.a-feld input:focus,.a-feld select:focus,.a-feld textarea:focus,.a-zeit input:focus{
  outline:0; border-color:var(--tanne); background:#fff; box-shadow:0 0 0 3.5px rgba(21,154,71,.15);
}
.a-code{
  font-size:1.7rem!important; letter-spacing:.42em; text-align:center; font-weight:700;
  font-family:ui-monospace,Menlo,Consolas,monospace; padding-left:.42em!important;
}
.a-reihe{display:flex; gap:.9rem; flex-wrap:wrap; align-items:flex-end}
.a-schalter{
  display:flex; gap:.7rem; align-items:center; margin-bottom:1.1rem; cursor:pointer;
  padding:.75rem .95rem; border:1.5px solid var(--rand); border-radius:var(--r-s);
  background:var(--creme); font-size:.95rem; font-weight:600;
  transition:border-color .22s ease, background-color .22s ease;
}
.a-schalter:hover{border-color:rgba(21,154,71,.4)}
.a-schalter:has(input:checked){border-color:var(--tanne); background:rgba(21,154,71,.07)}
.a-schalter input{width:21px; height:21px; accent-color:var(--tanne); flex:none}
.a-hp{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden}
.a-aktionen{
  display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.4rem; padding-top:1.3rem;
  border-top:1px solid var(--rand);
}

/* --------------------------------------------------------------- Knöpfe -- */
.a-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.72rem 1.35rem; border:1.5px solid var(--tanne-btn); border-radius:99px; cursor:pointer;
  background:var(--tanne-btn); color:#fff; font:inherit; font-weight:700; font-size:.93rem;
  text-decoration:none; box-shadow:0 6px 18px rgba(11,108,49,.2);
  transition:background-color .22s, border-color .22s, color .22s, transform .28s var(--ease), box-shadow .28s;
}
.a-btn svg{width:16px; height:16px}
.a-btn:hover{background:var(--tanne-dk); border-color:var(--tanne-dk); transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(11,108,49,.26)}
.a-btn--geist{background:transparent; color:var(--tanne-dk); box-shadow:none}
.a-btn--geist:hover{background:rgba(21,154,71,.1); color:var(--tanne-dk); box-shadow:none}
.a-btn--hell{background:#fff; color:var(--moos); border-color:#fff; box-shadow:none}
.a-btn--hell:hover{background:var(--sand); border-color:var(--sand); color:var(--moos)}
.a-btn--klein{padding:.46rem .9rem; font-size:.84rem}
.a-kopf .a-btn--geist{border-color:rgba(255,255,255,.34); color:#fff}
/* Kopf-Knöpfe (Apps öffnen, Website ansehen, Abmelden): Tippfläche mindestens 44 px (Prüfung A3, 25.10.2026) */
.a-kopf__in .a-btn{min-height:44px}
.a-kopf .a-btn--geist:hover{background:rgba(255,255,255,.15); color:#fff}

.a-weg{
  flex:none; align-self:flex-end; margin-bottom:1rem;
  padding:.5rem .9rem; border:1.5px solid rgba(211,50,48,.3); border-radius:99px;
  background:#fff; color:var(--rot-dk); font:inherit; font-size:.8125rem; font-weight:700; cursor:pointer;
  transition:background-color .2s, border-color .2s;
}
.a-weg:hover{background:rgba(211,50,48,.08); border-color:var(--rot)}
.a-weg--klein{
  /* mindestens 44 x 44 px (Tippflaeche am Handy), in der Hoehe wie das Feld daneben */
  padding:0; width:44px; min-height:44px; height:auto; display:grid; place-items:center;
  font-size:1.25rem; line-height:1; margin-bottom:0; align-self:stretch;
}

/* ---------------------------------------------------------------- Listen -- */
.a-block{
  border:1.5px solid var(--rand); border-radius:var(--r); padding:1.1rem 1.2rem 1.3rem;
  margin:0 0 1.1rem; background:var(--creme);
  /* fieldset bekommt vom Browser min-inline-size:min-content und schrumpft
     deshalb am Handy nicht mit - ohne diese Zeile ragen die Verkaufsplaetze
     ueber den Bildschirmrand hinaus. */
  min-inline-size:0; min-width:0;
}
.a-block legend{
  font-size:.8125rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tanne-dk); padding:.15rem .6rem; background:#fff;
  border:1px solid rgba(21,154,71,.25); border-radius:99px;
}
.a-ort{
  background:#fff; border:1px solid var(--rand); border-radius:var(--r-s);
  padding:1rem 1.1rem 1.1rem; margin-bottom:.9rem;
}
.a-liste--zeiten{margin-bottom:.7rem}
.a-zeit{display:flex; gap:.5rem; align-items:center; margin-bottom:.5rem}
.a-zeit input{flex:1 1 140px}

@media (max-width:700px){
  /* Kopfzeile am Handy kompakt: eine Zeile Marke, eine Zeile Knoepfe */
  .a-kopf__in{min-height:auto; gap:.5rem}
  .a-kopfmarke{width:100%}
  .a-kopfmarke img{height:38px}
  .a-kopfmarke b{font-size:1.02rem}
  .a-kopf__rechts{width:100%; gap:.45rem}
  .a-wer{
    flex:1 1 100%; justify-content:center; padding:.3rem .7rem; font-size:.8125rem;
    background:rgba(255,255,255,.09);
  }
  .a-kopf__rechts .a-btn{flex:1 1 0; padding:.45rem .7rem; font-size:.8125rem}
  .a-nav a{padding:.6rem .7rem}
  .a-nav b{font-size:.88rem}
}
@media (max-width:640px){
  .a-reihe{gap:.6rem}
  .a-weg{width:100%; min-height:44px; margin-bottom:.7rem}
  .a-weg--klein{width:44px; margin-bottom:0}   /* sonst erbt der x-Knopf den Abstand von .a-weg und wird nicht so hoch wie das Feld */
  /* Zeitzeile: Zeitraum in der ersten Zeile, Uhrzeit und x-Knopf darunter -
     statt eines zufaelligen Umbruchs mit dem Knopf allein in der dritten Zeile. */
  .a-zeit{display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:.45rem .5rem; margin-bottom:.8rem}
  .a-zeit input{width:100%; min-width:0}
  .a-zeit input:first-child{grid-column:1 / -1}
  .a-aktionen .a-btn{flex:1 1 100%}

  /* Kopfleiste: nicht mehr klebend (195 px waeren ein Viertel des Bildschirms)
     und zweizeilig - Marke mit Namen daneben, darunter die drei Knoepfe. */
  .a-kopf{position:relative}
  .a-kopf__in{gap:.55rem .5rem; padding-block:.55rem}
  .a-kopf__rechts{display:contents}
  .a-kopfmarke{width:auto; flex:1 1 auto; min-width:0; margin-right:auto; gap:.6rem}
  .a-kopfmarke img{height:34px}
  .a-kopfmarke b{font-size:.98rem}
  .a-kopfmarke small{font-size:.8125rem; letter-spacing:.06em}
  .a-wer{flex:0 1 auto; max-width:46%; padding:.28rem .6rem; font-size:.8125rem}
  .a-wer{white-space:nowrap; overflow:hidden}
  .a-kopf__in .a-btn{flex:1 1 auto; min-height:44px; justify-content:center; padding:.4rem .5rem; font-size:.8125rem; white-space:nowrap}
  .a-kopf__in .a-btn svg{display:none}   /* drei Knoepfe nebeneinander: nur der Text passt */
  .a-apps{position:static; flex:1 1 0}
  .a-apps > summary{width:100%}
  .a-apps__liste{left:.75rem; right:.75rem; top:calc(100% + .25rem); min-width:0}
  .a-karte,.a-meldung{scroll-margin-top:1rem}

}

/* --------------------------------------------------------- Formularschutz -- */
.a-meldung--warn{background:rgba(214,142,20,.10); border-color:rgba(214,142,20,.34); color:#8a5605}
.a-leer{
  font-size:.92rem; color:var(--muted); background:rgba(14,42,26,.035);
  border:1px dashed var(--rand); border-radius:var(--r-s); padding:1.1rem 1.2rem; margin:0;
}
.a-unter{
  font-size:.8125rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:1.6rem 0 .7rem;
}
.a-schutz{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:.7rem; margin:0;
}
.a-schutz__zahl{
  background:rgba(14,42,26,.04); border:1px solid var(--rand); border-radius:var(--r-s);
  padding:.9rem 1rem; border-left:3px solid var(--rand);
}
.a-schutz__zahl b{
  display:block; font-family:var(--ff-d); font-size:1.75rem; font-weight:600; line-height:1;
  color:var(--moos); letter-spacing:-.02em;
}
.a-schutz__zahl span{display:block; margin-top:.35rem; font-size:.8125rem; font-weight:600; color:var(--muted)}
.a-schutz__zahl--gut{border-left-color:var(--tanne)}
.a-schutz__zahl--gut b{color:var(--tanne-dk)}
.a-schutz__zahl--warn{border-left-color:#d68e14}
.a-schutz__zahl--warn b{color:#8a5605}
.a-schutz__zahl--stopp{border-left-color:var(--rot)}
.a-schutz__zahl--stopp b{color:var(--rot-dk)}
.a-gruende{list-style:none; margin:0; padding:0; display:grid; gap:.4rem}
.a-gruende li{
  display:flex; gap:.65rem; align-items:baseline; font-size:.9rem; color:var(--moos);
  padding:.5rem .8rem; background:rgba(14,42,26,.035); border-radius:var(--r-s);
}
.a-gruende b{
  flex:none; min-width:2.6em; font-variant-numeric:tabular-nums; font-weight:700; color:var(--muted);
}
.a-karte code{
  font-size:max(13px,.92em); background:rgba(14,42,26,.07); padding:.1em .4em; border-radius:4px;
}

/* --------------------------------------------------- Bereiche als Reiter -- */
/* Die Navigation schaltet zwischen den Bereichen um (siehe admin.js). Sichtbar
   ist immer nur einer - vorher lagen alle untereinander auf einer Seite. */
.a-nav a.ist-aktiv{
  background:linear-gradient(120deg,var(--moos) 0%,var(--moos-2) 100%);
  color:#fff; box-shadow:0 8px 20px rgba(14,42,26,.2);
}
.a-nav a.ist-aktiv:hover{transform:none}
.a-nav a.ist-aktiv small{color:rgba(255,255,255,.66)}
.a-nav a.ist-aktiv .a-nav__ic{background:rgba(255,255,255,.16); color:var(--tanne-hell)}
/* Im Reiterbetrieb steht nur eine Karte auf der Seite - der Abstand nach unten
   darf dann weg, sonst haengt die Seite in der Luft. */
body.a-reiter-an .a-karte{margin-bottom:0}
body.a-reiter-an .a-fuss{margin-top:1.8rem}

/* -------------------------------------------------- Verkaufsplatz klappen -- */
/* Sieben Plaetze mit allen Feldern ergaben eine Wand von 4.760 Pixeln. Jetzt
   steht jeder Platz zugeklappt in einer Zeile und wird zum Bearbeiten geoeffnet. */
details.a-ort > summary{
  display:flex; align-items:center; gap:.75rem; cursor:pointer; list-style:none;
  padding:.72rem .9rem; border-radius:var(--r-s); margin:-.2rem;
  transition:background-color .2s ease;
}
details.a-ort > summary::-webkit-details-marker{display:none}
details.a-ort > summary:hover{background:rgba(21,154,71,.07)}
details.a-ort > summary::before{
  content:""; flex:none; width:9px; height:9px; margin-left:.15rem;
  border-right:2px solid var(--tanne); border-bottom:2px solid var(--tanne);
  transform:rotate(-45deg); transition:transform .25s var(--ease);
}
details.a-ort[open] > summary::before{transform:rotate(45deg)}
.a-ort__name{font-weight:700; font-size:.97rem; color:var(--moos)}
.a-ort__adr{font-size:.83rem; color:var(--muted); flex:1 1 12rem; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.a-ort__zahl{
  flex:none; font-size:.8125rem; font-weight:700; letter-spacing:.04em; color:var(--muted);
  background:rgba(14,42,26,.06); border-radius:99px; padding:.2rem .6rem;
}
details.a-ort[open] > summary{
  background:rgba(21,154,71,.07); margin-bottom:.5rem;
}
@media (max-width:640px){
  /* Vier ineinander liegende Raender (Karte, Gruppe, Platz, Kopfzeile) liessen
     der Kopfzeile am Handy nur 226 px - etwas schmaler gefasst sind es 275 px. */
  .a-karte{padding:1.1rem .85rem 1.2rem}
  .a-block{padding:.9rem .65rem 1rem}
  .a-ort{padding:.8rem .65rem .9rem}
  /* Zugeklappter Verkaufsplatz: Name in der ersten Zeile mit voller Breite,
     Adresse darunter, Abzeichen klein in eigener Zeile - vorher stand der Name
     in einer 88 px schmalen Spalte und die Adresse hatte keinen Platz (0 px). */
  details.a-ort > summary{flex-wrap:wrap; gap:.2rem .55rem; padding:.65rem .6rem; margin:-.15rem}
  .a-ort__name{flex:1 1 0; min-width:0; overflow-wrap:anywhere; line-height:1.3}
  .a-ort__adr{flex:0 0 100%; white-space:normal; padding-left:calc(9px + .15rem + .55rem); line-height:1.35}
  .a-ort__zahl{margin-left:calc(9px + .15rem + .55rem); font-size:.8125rem; padding:.12rem .45rem; letter-spacing:.02em}
}

/* ===================================================== Zugänge und Apps === */
.a-btn--warn{
  background:#fff; color:var(--rot-dk); border-color:rgba(211,50,48,.35); box-shadow:none;
}
.a-btn--warn:hover{background:rgba(211,50,48,.08); border-color:var(--rot); color:var(--rot-dk)}

.a-zug-zahlen{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.6rem;
  margin:1rem 0 1.4rem;
}
.a-zug-zahlen div{
  background:rgba(21,154,71,.07); border-radius:14px; padding:.75rem .9rem; text-align:center;
}
.a-zug-zahlen b{display:block; font-size:1.5rem; font-weight:700; color:var(--moos); line-height:1.1}
.a-zug-zahlen span{font-size:.8125rem; color:var(--muted)}

.a-zug-liste{display:grid; gap:.55rem}
.a-zug{
  border:1px solid rgba(14,42,26,.12); border-radius:14px; background:#fff; overflow:hidden;
}
.a-zug[data-gesperrt]{background:rgba(211,50,48,.04); border-color:rgba(211,50,48,.2)}
.a-zug > summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.85rem 1rem; cursor:pointer; list-style:none;
}
.a-zug > summary::-webkit-details-marker{display:none}
.a-zug > summary:hover{background:rgba(21,154,71,.05)}
.a-zug[open] > summary{border-bottom:1px solid rgba(14,42,26,.1)}
.a-zug__name{display:flex; flex-direction:column; min-width:0}
.a-zug__name b{font-size:1rem; color:var(--moos)}
.a-zug__name small{font-size:.82rem; color:var(--muted)}
.a-zug__marken{display:flex; flex-wrap:wrap; gap:.35rem; align-items:center}
.a-marke{
  display:inline-flex; align-items:center; gap:.35rem; font-size:.8125rem; font-weight:700;
  background:rgba(14,42,26,.06); color:var(--muted); border-radius:99px; padding:.22rem .65rem;
}
.a-marke i{width:7px; height:7px; border-radius:50%; background:var(--tanne); display:inline-block}
.a-marke--admin{background:rgba(21,154,71,.15); color:var(--tanne-dk)}
.a-marke--sperre{background:rgba(211,50,48,.12); color:var(--rot-dk)}
.a-zug__form{padding:1rem}
.a-zug__titel{margin:1rem 0 .4rem; font-size:.8125rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted)}
.a-zug__apps{display:grid; gap:.4rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.a-zug__apps .a-schalter{align-items:flex-start}
.a-zug__apps .a-schalter small{display:block; font-weight:500; font-size:.8125rem; color:var(--muted)}
.a-zug__geraete{list-style:none; margin:0; padding:0; display:grid; gap:.35rem}
.a-zug__geraete li{
  display:flex; flex-wrap:wrap; gap:.3rem .7rem; align-items:baseline;
  background:rgba(21,154,71,.06); border-radius:10px; padding:.45rem .7rem; font-size:.85rem;
}
.a-zug__geraete b{color:var(--tanne-dk)}
.a-zug__geraete span{color:var(--muted); overflow:hidden; text-overflow:ellipsis}
.a-zug__geraete small{margin-left:auto; color:var(--muted); font-size:.8125rem}
.a-zug__leer{font-size:.85rem; color:var(--muted); margin:.6rem 0 0}
.a-zug__knoepfe{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem}
.a-zug--neu{border-style:dashed}
.a-zug--log .a-zug__log{list-style:none; margin:0; padding:1rem; display:grid; gap:.3rem}
.a-zug__log li{display:flex; flex-wrap:wrap; gap:.2rem .6rem; align-items:baseline;
  font-size:.84rem; border-bottom:1px solid rgba(14,42,26,.07); padding-bottom:.3rem}
.a-zug__log time{color:var(--muted); font-variant-numeric:tabular-nums; min-width:5.5em}
.a-zug__log b{color:var(--moos)}
.a-zug__log span{color:var(--muted)}
.a-zug__log small{width:100%; color:var(--muted); font-size:.8125rem}

.a-zug-werkzeug{
  display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid rgba(14,42,26,.1);
}
.a-zug-werkzeug > div{background:rgba(14,42,26,.03); border-radius:14px; padding:.9rem 1rem}
.a-zug-werkzeug b{display:block; color:var(--moos); margin-bottom:.2rem}
.a-zug-werkzeug .a-hilfe{margin:.2rem 0 .7rem; font-size:.82rem}
.a-zug-hoch{display:grid; gap:.5rem}
.a-zug-hoch input[type=file]{font-size:.82rem}
@media (max-width:640px){
  .a-zug > summary{padding:.75rem .8rem}
  .a-zug__form{padding:.8rem}
  .a-zug__knoepfe .a-btn{flex:1 1 100%}
}

/* ------------------------------------------------------------ Sicherungen -- */
.a-sich-scroll{overflow-x:auto; margin:0 0 .6rem}
.a-sich{width:100%; border-collapse:collapse; font-size:.9rem; min-width:640px}
.a-sich th,.a-sich td{padding:.65rem .55rem; border-bottom:1px solid rgba(14,42,26,.08); text-align:left; vertical-align:top}
.a-sich th{font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700}
.a-sich td b{color:var(--moos)}
.a-sich small{display:block; color:var(--muted); font-size:.8125rem; line-height:1.4}
.a-sich select,.a-sich input[type=number]{
  padding:.42rem .55rem; border:1.5px solid var(--rand); border-radius:9px; font:inherit; font-size:.88rem;
  background:#fff; color:var(--moos);
}
.a-sich input[type=number]{width:5.6em}
.a-sich input[type=checkbox]{width:21px; height:21px; accent-color:var(--tanne); margin-top:.15rem}
.a-sich .a-sich__aus td{color:var(--muted)}
.a-sich__zustand{font-weight:600}
.a-sich__zustand--gut{color:var(--tanne-dk)}
.a-sich__zustand--warn{color:#8a5605}
.a-sich__zustand--stopp{color:var(--rot-dk)}
.a-sich-adresse{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin:.4rem 0 .6rem}
.a-sich-adresse input{
  flex:1 1 300px; min-width:0; font-family:Consolas,"Courier New",monospace; font-size:.8125rem;
  padding:.5rem .6rem; border:1.5px solid var(--rand); border-radius:9px; background:rgba(14,42,26,.03); color:var(--moos);
}
.a-sich-ordner code,.a-zug-werkzeug code{overflow-wrap:anywhere; word-break:break-all}
@media (max-width:640px){
  /* Am Handy je App eine Karte statt einer breiten Tabelle - nichts wird abgeschnitten. */
  .a-sich-scroll{overflow:visible}
  .a-sich{min-width:0; font-size:.88rem; display:block}
  .a-sich thead{display:none}
  .a-sich tbody,.a-sich tr{display:block}
  .a-sich tr{border:1px solid rgba(14,42,26,.12); border-radius:12px; padding:.5rem .8rem .7rem; margin:0 0 .7rem; background:#fff}
  .a-sich td{display:flex; align-items:flex-start; gap:.8rem; border:0; padding:.35rem 0}
  .a-sich td::before{content:attr(data-label); flex:0 0 5.2rem; font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; padding-top:.25rem}
  .a-sich td[data-label="App"]{display:block; padding-bottom:.45rem; border-bottom:1px solid rgba(14,42,26,.08); margin-bottom:.2rem}
  .a-sich td[data-label="App"]::before{display:none}
  .a-sich td[data-label="Stand"]{display:block}
  .a-sich td[data-label="Stand"]::before{display:block; margin-bottom:.15rem}
  .a-sich select{width:100%; max-width:14rem}
}

/* ------------------------------------------------------- Apps öffnen -- */
/* Kopfleiste: aufklappbares Menü; Bereich „Zugänge und Apps": drei Karten.
   Jeder Knopf ist ein POST-Formular (CSRF) und wechselt im selben Tab. */
.a-apps{position:relative}
.a-apps > summary{list-style:none; cursor:pointer; user-select:none}
.a-apps > summary::-webkit-details-marker{display:none}
.a-apps[open] > summary{background:var(--sand); border-color:var(--sand)}
.a-apps__liste{
  position:absolute; right:0; top:calc(100% + .5rem); z-index:30; min-width:280px;
  background:#fff; color:var(--text); border-radius:16px; padding:.5rem;
  box-shadow:0 18px 44px rgba(14,42,26,.22); border:1px solid rgba(14,42,26,.1);
  display:grid; gap:.25rem;
}
.a-apps__form{display:contents}
.a-apps__k{
  display:flex; flex-direction:column; align-items:flex-start; gap:.1rem; width:100%;
  padding:.6rem .8rem; border:0; border-radius:11px; background:transparent; color:var(--text);
  font:inherit; text-align:left; cursor:pointer; transition:background-color .18s;
}
.a-apps__k b{font-weight:700; color:var(--moos)}
.a-apps__k small{font-size:.8125rem; color:var(--muted); line-height:1.35}
.a-apps__k:hover{background:rgba(21,154,71,.1)}
.a-apps__k--aus{cursor:not-allowed; opacity:.55}
.a-apps__k--aus:hover{background:transparent}
.a-apps__k--aus small{color:var(--rot-dk)}
.a-apps__hilfe{margin:.35rem .8rem .4rem; font-size:.8125rem; color:var(--muted)}

.a-apps-kasten{
  margin:0 0 1.3rem; padding:1rem 1.1rem; border-radius:16px;
  background:rgba(21,154,71,.07); border:1px solid rgba(21,154,71,.22);
}
.a-apps-kasten__titel{display:flex; align-items:center; gap:.5rem; color:var(--moos); font-size:1rem}
.a-apps-kasten__titel svg{width:18px; height:18px; color:var(--tanne-dk)}
.a-apps-kasten .a-hilfe{margin:.35rem 0 .8rem}
.a-apps-kasten__reihe{display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.a-apps-kasten__reihe .a-apps__form{display:block}
.a-apps__k--karte{
  background:#fff; border:1.5px solid rgba(21,154,71,.3); border-radius:14px; padding:.75rem .9rem;
  min-height:64px; box-shadow:0 6px 18px rgba(14,42,26,.05);
}
.a-apps__k--karte:hover{background:#fff; border-color:var(--tanne); transform:translateY(-1px)}
.a-apps__k--karte.a-apps__k--aus{border-style:dashed; box-shadow:none}
.a-apps__k--karte.a-apps__k--aus:hover{transform:none; border-color:rgba(21,154,71,.3)}
/* Handy-Fassung des Menues: siehe Kopfleisten-Block bei max-width:640px oben
   (Liste haengt an der ganzen Kopfleiste, nicht am Knopf). */

/* ------------------------------------------- Freigaben per Hackerl (24.10.2026) -- */
[data-frg-ohne-skript][hidden]{display:none!important}   /* .a-btn setzt sonst display und hebt hidden auf */
.a-frg-admin{margin:.2rem 0 1rem; padding:.7rem .95rem; border-radius:var(--r-s); background:rgba(21,154,71,.07); font-weight:600}
.a-frg-block{margin:.4rem 0 1rem}
.a-frg-alle{display:inline-flex; gap:.4rem; margin-left:.4rem; flex-wrap:wrap; vertical-align:middle}
.a-frg-gruppe{border:1px solid var(--rand); border-radius:var(--r-s); padding:.6rem .7rem .2rem; margin-bottom:.8rem}
.a-frg-gruppe > b{display:block; margin-bottom:.45rem; font-size:.92rem}
.a-frg-zeile{display:flex; flex-wrap:wrap; gap:.3rem .7rem; align-items:center; margin-bottom:.5rem}
.a-frg-schalter{flex:1 1 15rem; margin-bottom:0; min-height:44px}
.a-frg-schalter small{display:block; font-weight:500; color:var(--muted); font-size:.8125rem}
.a-frg-zeile--bald .a-frg-schalter{border-color:rgba(214,142,20,.6); background:rgba(214,142,20,.08)}
.a-frg-zeile--ab .a-frg-schalter{border-style:dashed; opacity:.8}
.a-frg-bis{display:flex; flex-direction:column; gap:.15rem; font-size:.8125rem; color:var(--muted)}
.a-frg-bis input{min-height:44px; font-size:16px; padding:.35rem .5rem; border:1.5px solid var(--rand); border-radius:var(--r-s); background:#fff}
.a-frg-sperre{display:flex; gap:.45rem; align-items:center; font-size:.85rem; min-height:44px; cursor:pointer}
.a-frg-sperre input{width:21px; height:21px; accent-color:var(--rot)}
.a-frg-sperre small{display:block; color:var(--muted)}
.a-frg-umschalter{display:flex; gap:.5rem; flex-wrap:wrap; margin:.4rem 0 .9rem}
.a-frg-filter{display:flex; flex-wrap:wrap; gap:.6rem .8rem; align-items:flex-end; margin-bottom:.9rem}
.a-frg-filter .a-feld{margin-bottom:0; min-width:10rem; flex:1 1 10rem}
.a-frg-mini{margin-bottom:0; padding:.5rem .75rem; min-height:44px}
.a-frg-zahl{font-size:.85rem; color:var(--muted); margin:.2rem 0 .4rem}
/* Matrix: nur der Tabellenbereich scrollt seitlich, erste Spalte und Kopf bleiben stehen */
.a-frg-scroll{overflow:auto; max-width:100%; max-height:70vh; border:1px solid var(--rand); border-radius:var(--r-s); background:#fff; -webkit-overflow-scrolling:touch}
.a-frg-scroll:focus-visible{outline:3px solid rgba(21,154,71,.4); outline-offset:2px}
.a-frg-matrix{border-collapse:separate; border-spacing:0; min-width:100%; font-size:.9rem}
.a-frg-matrix th,.a-frg-matrix td{padding:.25rem .35rem; border-bottom:1px solid var(--rand); text-align:center; vertical-align:middle}
.a-frg-matrix thead th{position:sticky; top:0; z-index:2; background:var(--sand); font-size:.82rem; line-height:1.2; min-width:5.2rem}
.a-frg-matrix thead th small{display:block; font-weight:500; color:var(--muted)}
.a-frg-matrix .a-frg-name{position:sticky; left:0; z-index:1; background:#fff; text-align:left; min-width:10.5rem; max-width:15rem; border-right:1px solid var(--rand)}
.a-frg-matrix thead .a-frg-name{z-index:3; background:var(--sand)}
.a-frg-name{display:table-cell}
.a-frg-name span{display:inline-block; vertical-align:middle; max-width:calc(100% - 48px)}
.a-frg-name small{display:block; font-weight:500; color:var(--muted); font-size:.8125rem; overflow-wrap:anywhere}
.a-frg-wahl{display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; vertical-align:middle; cursor:pointer}
.a-frg-wahl input{width:20px; height:20px; accent-color:var(--tanne)}
.a-frg-z label{display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:44px; min-height:44px; cursor:pointer}
.a-frg-z input{width:22px; height:22px; accent-color:var(--tanne); margin:0}
.a-frg-info{font-size:.8125rem; line-height:1.1; color:var(--muted); min-height:.8rem}
.a-frg-z--gesperrt{background:rgba(211,50,48,.08)} .a-frg-z--gesperrt .a-frg-info{color:var(--rot-dk); font-weight:700}
.a-frg-z--standard{background:rgba(21,154,71,.05)}
.a-frg-z--abgelaufen .a-frg-info{color:var(--rot-dk)}
.a-frg-z--bald{background:rgba(214,142,20,.12)} .a-frg-z--bald .a-frg-info{color:#8a5605; font-weight:700}
.a-frg-z--laeuft{opacity:.5}
.a-frg-alles{color:var(--muted); font-style:italic; text-align:left!important}
.a-frg-gesperrt .a-frg-name b{text-decoration:line-through}
.a-frg-std{display:block; font-size:.8125rem; color:var(--tanne-dk); font-weight:700}
.a-frg-auswahl{display:inline-flex; flex-wrap:wrap; gap:.4rem; align-items:center; font-size:.9rem}
.a-frg-auswahl select{min-height:44px; font-size:16px; border:1.5px solid var(--rand); border-radius:var(--r-s); padding:.3rem .5rem; background:#fff}
.a-frg-rueck{min-height:1.4rem; font-size:.9rem; margin:.4rem 0 0}
.a-frg-rueck--fehler{color:var(--rot-dk); font-weight:700}
.a-frg-befristet{list-style:none; padding:0; margin:.5rem 0}
.a-frg-befristet li{display:flex; flex-wrap:wrap; gap:.4rem .8rem; justify-content:space-between; align-items:center; padding:.5rem 0; border-bottom:1px solid var(--rand)}
.a-frg-befristet small{display:block; color:var(--muted)}
.a-frg-befristet .a-frg-bald small{color:#8a5605; font-weight:700}
.a-frg-befristet .a-frg-ab small{color:var(--rot-dk); font-weight:700}
.a-frg-verl{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center}
.a-frg-verl input[type=date]{min-height:44px; font-size:16px; border:1.5px solid var(--rand); border-radius:var(--r-s); padding:.3rem .5rem}
.a-frg-orte{list-style:none; padding:0; margin:.4rem 0 1rem}
.a-frg-orte li{border-bottom:1px solid var(--rand); padding:.5rem 0}
.a-frg-ort--aus{opacity:.65}
.a-frg-ortform{display:flex; flex-wrap:wrap; gap:.5rem .7rem; align-items:flex-end}
.a-frg-ortform .a-feld{margin-bottom:0; flex:1 1 14rem}
.a-frg-vorschau{border:2px solid var(--tanne); border-radius:var(--r); padding:.9rem 1rem; margin:.6rem 0 1.2rem; background:rgba(21,154,71,.04)}
.a-frg-vorschau h3{margin:0 0 .4rem}
.a-frg-wirkung{padding-left:1.1rem} .a-frg-wirkung li{margin:.3rem 0} .a-frg-wirkung small{color:var(--muted)}
@media (max-width:600px){
  .a-frg-matrix .a-frg-name{min-width:8.5rem; max-width:10rem}
  .a-frg-matrix thead th{min-width:4.4rem}
}

/* --------------------------------- Zwei-Faktor-Anmeldung (24.10.2026) -- */
.a-zf-schritte{margin:.4rem 0 .8rem 1.1rem; padding:0; line-height:1.5}
.a-zf-schritte li{margin:.25rem 0}
.a-zf-qr{display:flex; justify-content:center; margin:.6rem 0 1rem}
.a-zf-qr canvas{width:220px; height:220px; image-rendering:pixelated; border-radius:var(--r-s); box-shadow:var(--schatten)}
.a-zf-manuell{margin:.4rem 0 1rem; font-size:.95rem}
.a-zf-manuell summary{cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:600; color:var(--tanne-dk)}
.a-zf-schluessel{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:1.05rem; letter-spacing:.06em; word-break:break-all;
  background:var(--sand); padding:.6rem .8rem; border-radius:var(--r-s); user-select:all}
.a-zf-abbrechen{margin-top:.9rem; text-align:center}
.a-zf-liste{columns:2; column-gap:1.4rem; padding-left:1.4rem; margin:.6rem 0 1rem}
.a-zf-liste li{margin:.25rem 0; break-inside:avoid}
.a-zf-liste code{font-size:1.1rem; letter-spacing:.06em}
.a-zf-codes__fuss{font-size:.8125rem; color:var(--muted)}
.a-zf-block{border-top:1px solid var(--rand); margin-top:.6rem; padding-top:.6rem}
.a-zf-aktion{display:flex; flex-wrap:wrap; gap:.5rem .7rem; align-items:flex-end}
.a-zf-aktion label{display:flex; flex-direction:column; font-size:.82rem; color:var(--muted); gap:.2rem}
.a-zf-klein{width:9rem; min-height:44px; font-size:16px; padding:.35rem .6rem; border:1.5px solid var(--rand); border-radius:var(--r-s); letter-spacing:.15em}
.a-zf-wenig{margin:0 0 1rem}
@media (max-width:480px){ .a-zf-liste{columns:1} }
@media print{
  body *{visibility:hidden}
  .a-zf-codes, .a-zf-codes *{visibility:visible}
  .a-zf-codes{position:absolute; left:0; top:0; box-shadow:none}
  .a-zf-codes button, .a-zf-codes form{display:none}
}

/* ------------------------- Zugänge: Formular-Regeln (bis 25.10.2026 als <style> in zugaenge.php) -- */
/* Der Haken "Website-Verwaltung" gehoert nur zu Rolle Verwaltung (Admin):
   er erscheint erst, wenn die Rolle im selben Formular so eingestellt ist.
   Ohne Skript, nur ueber :has(). */
.a-zug__form .a-schalter--nur-admin{display:none}
.a-zug__form:has(select[name="zug_rolle"] option[value="admin"]:checked) .a-schalter--nur-admin{display:flex}
.a-zug__form .a-schalter--nur-admin.a-schalter--fest{display:flex}
.a-zug__schutz{font-size:.85rem; color:var(--muted); margin:.2rem 0 .6rem; max-width:74ch}
.a-zug__form input:disabled,.a-zug__form select:disabled{opacity:.6; cursor:not-allowed}
.a-schalter:has(input:disabled){opacity:.7; cursor:not-allowed}
/* Zusatz-Haken (Manager) erscheint eingerückt erst, wenn seine App angehakt ist (seit 24.10.2026) */
.a-zug__form .a-schalter--zusatz{display:none}
.a-zug__form:has(input[data-app="auslieferung"]:checked) .a-schalter--zusatz-auslieferung,
.a-zug__form:has(select[name="zug_rolle"] option[value="admin"]:checked) .a-schalter--zusatz-auslieferung{display:flex}

/* ------------------- Frischer Authenticator-Code bei heiklen Aktionen (Befund V2, 25.10.2026) -- */
.a-zf-frisch{max-width:30rem; margin:.9rem 0 .2rem}
.a-zf-frisch label{font-weight:700}
.a-zf-frisch .a-zf-klein{width:11rem; max-width:100%; font-size:16px; letter-spacing:.2em}
/* im Formular „Neuer Zugang“ nur bei Rolle Verwaltung (Admin) */
.a-zug__form .a-zf-frisch--nur-admin{display:none}
.a-zug__form:has(select[name="zug_rolle"] option[value="admin"]:checked) .a-zf-frisch--nur-admin{display:block}
.a-sich-schluessel-neu{display:flex; flex-wrap:wrap; gap:.5rem .8rem; align-items:flex-end}
.a-sich-schluessel-neu .a-zf-frisch{margin:0}

/* ------------------------- Alte Einträge löschen (90 Tage, Befund V8, 25.10.2026) -- */
.a-zug-alt{margin-top:1.2rem; padding:.9rem 1rem; border-radius:14px; background:rgba(14,42,26,.03); scroll-margin-top:92px}
.a-zug-alt > b{display:block; color:var(--moos); margin-bottom:.2rem}
.a-zug-alt .a-hilfe{margin:.2rem 0 .8rem}
.a-zug-alt__zahlen{display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.a-zug-alt__zahl{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  border:1px solid var(--rand); border-radius:var(--r-s); background:#fff; padding:.6rem .8rem .6rem 2.8rem; min-height:44px; cursor:pointer;
}
.a-zug-alt__zahl input{position:absolute; left:.85rem; top:50%; transform:translateY(-50%); width:22px; height:22px; margin:0; accent-color:var(--tanne-btn)}
.a-zug-alt__zahl b{font-size:1.5rem; line-height:1.15; color:var(--moos)}
.a-zug-alt__zahl span{font-size:.95rem; color:var(--muted); line-height:1.35}

/* Schutz und Abmeldung je Admin (26.10.2026) */
.a-schutz__haken{display:flex; flex-direction:row !important; align-items:center; gap:.5rem; min-height:44px; font-size:1rem !important; color:var(--text, inherit) !important; font-weight:600}
.a-schutz__haken input{width:1.3rem; height:1.3rem}
.a-schutz__code{display:inline-flex; flex-wrap:wrap; gap:.5rem .7rem; align-items:flex-end}
.a-schutz__code[hidden]{display:none}
.a-schutz__hinweis{flex:1 1 100%; color:var(--muted); font-size:.85rem}
.a-leerlauf{margin-top:.6rem}
.a-leerlauf__wahl{min-height:44px; font-size:1rem}
/* Knöpfe im Bereich Zugänge mindestens 44 px hoch (Hausregel Tippflächen, Befund N8, 26.10.2026) */
#zugaenge .a-btn--klein{min-height:44px}
/* Mehrere Mitarbeiter löschen (26.10.2026) */
.a-zug--sammel{border-style:dashed}
.a-sammel__alle{margin:.2rem 0 .6rem; font-weight:700; font-size:1rem; min-height:44px}
.a-sammel__liste .a-schalter{min-height:44px; font-size:1rem}