/* Neuer Stempel 02.09.2026b nach der Infomaniak-Störung: zwingt Browser mit angeschnittenen Cache-Kopien zum Frischladen. */
/* ==================================================================
   PocketStamp — die Hülle der Anwendung
   ------------------------------------------------------------------
   Seitenleiste, Kopfzeile, Karten, Listen: alles, woran man eine
   Fläche als «zur Verwaltung gehörend» erkennt.

   Bis zum 28.08.2026 stand das im style-Block von verwaltung.php, und
   die Demo hatte eine eigene Hülle — oben eine Leiste, unten vier
   Reiter, wie eine Telefon-App. Wer die Demo ausprobierte und sich
   danach anmeldete, kam in etwas anderes hinein. Genau das soll eine
   Demo nicht tun.

   Jetzt liegt die Hülle hier, und beide Seiten laden sie. Sie können
   nicht mehr auseinanderlaufen, weil es nur eine gibt.
   ================================================================== */

/* ==================================================================
   Die Hülle der Verwaltung

   Vorher: eine Leiste aus neun Pillen, die seitlich rollte. Pillen
   tragen bis fünf Einträge; danach sieht man nicht mehr, was es
   überhaupt gibt, und sucht statt zu arbeiten. Eine Anwendung mit
   diesem Umfang braucht eine Seitenleiste mit Gruppen.

   Ab hier gilt ein Mass für alles: --l1 bis --l5 für Abstände,
   --t1 bis --t5 für Schriftgrössen. Vorher entstanden beide je
   Ansicht neu, teils als style-Attribut im JavaScript — das ist der
   Hauptgrund, warum die Oberfläche unfertig wirkte.
   ================================================================== */
:root{
  --l1:6px; --l2:12px; --l3:18px; --l4:26px; --l5:38px;
  --t1:12.5px; --t2:14px; --t3:15.5px; --t4:19px; --t5:26px;
  --seite-breit:236px;
}
body{background:var(--soft)}

.app{display:flex;min-height:100vh;min-height:100svh}

/* ---------- Seitenleiste ---------- */
.seite{
  width:var(--seite-breit);flex:none;position:sticky;top:0;align-self:flex-start;
  height:100vh;height:100svh;display:flex;flex-direction:column;
  background:var(--surface);border-right:1px solid var(--line-2);
  padding:var(--l4) var(--l3) var(--l3);
}
.seite__marke{display:flex;align-items:center;gap:10px;font-size:16.5px;
  font-weight:600;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.seite__nav{margin-top:var(--l4);display:flex;flex-direction:column;gap:2px;
  overflow-y:auto;flex:1;margin-right:calc(var(--l3) * -1);padding-right:var(--l3)}
.seite__nav::-webkit-scrollbar{width:0}
.gruppe{margin-top:var(--l3);padding:0 10px 6px;font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.gruppe:first-child{margin-top:0}
/* «.navpunkt», nicht «.nav»: app.css benutzt «.nav» für die fixierte
   Navigationsleiste der Website, samt position:fixed und
   pointer-events:none. Diese Seite lädt dieselbe Datei — die Knöpfe
   lagen dadurch alle unklickbar oben links übereinander. */
.navpunkt{
  display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;
  border-radius:10px;font-size:var(--t3);color:var(--ink-2);text-align:left;
  transition:background .2s var(--e),color .2s var(--e);
}
.navpunkt svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.navpunkt:hover{background:var(--soft);color:var(--ink)}
.navpunkt.on{background:color-mix(in srgb, var(--brand) 11%, transparent);
  color:var(--brand-ink);font-weight:500}
.navpunkt.on svg{opacity:1}
.seite__fuss{padding-top:var(--l3);border-top:1px solid var(--line-2);
  display:flex;flex-direction:column;gap:8px}
.seite__betrieb{font-size:var(--t2);color:var(--ink-2);padding:0 10px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Der Weg zur Anleitung. Sie öffnet in einem zweiten Fenster: Wer
   nachliest, will danach dort weitermachen, wo er war. */
.seite__hilfe{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;
  font-size:var(--t2);color:var(--ink-2);text-decoration:none;
  transition:background .2s var(--e),color .2s var(--e);
}
.seite__hilfe:hover{background:var(--soft);color:var(--ink)}
.seite__hilfe svg{width:17px;height:17px;flex:none;stroke:currentColor;stroke-width:1.7;
  fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Hauptbereich ---------- */
.haupt{flex:1;min-width:0;display:flex;flex-direction:column}
.leiste{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--l2);
  padding:var(--l3) var(--l4);border-bottom:1px solid var(--line-2);
  background:color-mix(in srgb, var(--soft) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
}
.leiste h1{font-size:var(--t4);letter-spacing:-.025em;margin:0;font-weight:600}
.leiste__rechts{margin-left:auto;display:flex;gap:10px;align-items:center}
.brenner{display:none;width:38px;height:38px;border-radius:10px;
  align-items:center;justify-content:center;border:1px solid var(--line-2);
  background:var(--surface)}
.brenner svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.8;
  stroke-linecap:round}
.vwrap{width:100%;max-width:1080px;padding:var(--l4);margin:0}
.vwrap--breit{max-width:1240px}

/* ---------- Arbeitsfläche: Inhalt und Führung ----------
   Rechts vom Inhalt blieb auf breiten Bildschirmen eine leere Hälfte.
   Ab 1500 Pixel steht dort die Anleitung zum Reiter, und die Fläche
   darf entsprechend breiter werden. Darunter rückt sie unter den
   Inhalt: Wer täglich hier arbeitet, will nicht jedes Mal an einer
   Anleitung vorbeiscrollen, bevor er zum Formular kommt. */
.arbeit{display:grid;gap:var(--l3)}
.arbeit__inhalt{min-width:0}
.fuehrung{min-width:0}
.fuehrung__innen{
  border:1px solid var(--line-2);border-radius:16px;background:var(--surface);
  padding:18px 18px 16px;
}
.fuehrung__dach{
  margin:0 0 6px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand);font-weight:600;
}
.fuehrung h3{margin:0;font-size:var(--t3);letter-spacing:-.02em}
.fuehrung__lead{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--ink-3)}
.fuehrung__liste{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:13px;
  counter-reset:fs}
.fuehrung__liste li{display:grid;grid-template-columns:22px 1fr;gap:11px;
  align-items:start;counter-increment:fs}
.fuehrung__nr{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--soft);color:var(--ink-3);font-size:11.5px;font-weight:600;
  margin-top:1px;font-variant-numeric:tabular-nums;
}
.fuehrung__nr::before{content:counter(fs)}
.fuehrung__liste li.fertig .fuehrung__nr{background:var(--mint-soft);color:var(--mint)}
.fuehrung__liste li.fertig .fuehrung__nr::before{content:none}
.fuehrung__liste b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.fuehrung__liste li.fertig b{color:var(--ink-3)}
.fuehrung__liste li > span:last-child > span{
  display:block;margin-top:2px;font-size:13px;line-height:1.5;color:var(--ink-3);
}
.fuehrung__weiter{margin-top:16px;width:100%;justify-content:center}

@media (min-width:1500px){
  .vwrap{max-width:1440px}
  .vwrap--breit{max-width:1600px}
  .arbeit{grid-template-columns:minmax(0,1fr) 320px;gap:var(--l4);align-items:start}
  /* Die Formulare sind lang. Die Anleitung bleibt beim Scrollen
     stehen, sonst ist sie genau dann weg, wenn man sie braucht. */
  .fuehrung__innen{position:sticky;top:calc(var(--l4) + 76px)}
}
@media (max-width:1499px){
  .arbeit{grid-template-columns:1fr}
  .fuehrung{margin-top:var(--l3)}
  .fuehrung__weiter{display:none}
}

@media (max-width:900px){
  .seite{
    position:fixed;left:0;top:0;bottom:0;z-index:70;height:100%;
    transform:translateX(-100%);transition:transform .34s var(--e-out);
    box-shadow:0 0 60px rgba(8,8,12,.3);
  }
  .app.offen .seite{transform:none}
  .app.offen::after{content:"";position:fixed;inset:0;z-index:60;
    background:rgba(8,8,12,.42);backdrop-filter:blur(2px)}
  .brenner{display:flex}
  .leiste{padding:calc(var(--l2) + env(safe-area-inset-top)) var(--l3) var(--l2);
    background:color-mix(in srgb, var(--soft) 96%, transparent)}
  /* iPhone (viewport-fit=cover): Safari hält die klebende Kopfzeile unter
     der Statusleiste fest und lässt die Seite darunter durchscrollen. Das
     Band deckt diesen Streifen mit derselben Fläche ab. Liegt die Kopfzeile
     selbst schon am oberen Rand, hängt das Band ausserhalb des Bildes. */
  .leiste::before{content:"";position:absolute;left:0;right:0;bottom:100%;
    height:max(env(safe-area-inset-top), 64px);background:var(--soft);pointer-events:none}
  .vwrap{padding:var(--l3)}
}
/* Die Sprachwahl. Sie steht in der Kopfzeile und auf der Anmeldung,
   also gehört sie in die gemeinsame Hülle und nicht in eine der
   beiden Dateien. */
.sprachwahl{
  border:1px solid var(--line-2);border-radius:999px;background:var(--surface);
  font:inherit;font-size:var(--t2);color:var(--ink-2);padding:7px 11px;cursor:pointer;
  max-width:150px;
}
.sprachwahl:hover{color:var(--ink)}
@media (max-width:640px){ .sprachwahl{max-width:118px;padding:6px 8px} }

.karte2{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r3);
        padding:clamp(20px,2.4vw,28px);box-shadow:var(--sh-1);margin-bottom:16px}
.karte2 h3{margin-bottom:4px}
.karte2 > p{color:var(--ink-2);font-size:15px;margin:6px 0 0}
.reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.zahl{padding:18px;border-radius:var(--r2);background:var(--soft);text-align:center}
.zahl b{display:block;font-family:'Geist',sans-serif;font-size:30px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.zahl span{display:block;margin-top:4px;font-size:13px;color:var(--ink-3)}
.liste2{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.zeile{display:flex;gap:14px;align-items:center;padding:13px 16px;border-radius:var(--r1);
       background:var(--soft);font-size:15px}
.zeile b{font-family:'Geist Mono',monospace;letter-spacing:.08em}
.zeile small{color:var(--ink-3);font-size:13px}
.zeile .btn{margin-left:auto}
.zeile .btn + .btn{margin-left:8px}
/* Ein kleiner Hinweis unter einem Bedienelement. Wurde schon
   mehrfach benutzt, war aber nie gestaltet — und sah dadurch aus wie
   ein zweiter Absatz. */
.note-sm{font-size:13px;color:var(--ink-3);line-height:1.5}
.note-sm b{font-family:inherit;font-weight:600;letter-spacing:0;color:var(--ink-2)}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--brand);
      color:#FFF;font-family:'Geist',sans-serif;font-size:11px;font-weight:600;
      letter-spacing:.04em;text-transform:uppercase;vertical-align:2px}
/* ---------- Welche Karte gerade offen ist ----------


/* ---------- Das Protokoll der Meldungen an Apple ----------
   Eine Liste, die man überfliegt: Farbpunkt links, ein Wort fett,
   der Rest klein daneben. Vierzig Zeilen sollen auf einen Blick
   sagen, ob etwas durchging — nicht gelesen werden müssen. */
.prot__l{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:2px;
  max-height:340px;overflow-y:auto}
.prot__z{display:flex;gap:11px;align-items:baseline;padding:7px 10px;
  border-radius:9px;font-size:13.5px}
.prot__z:nth-child(odd){background:var(--soft)}
.prot__p{width:7px;height:7px;border-radius:50%;flex:none;
  transform:translateY(-1px);font-style:normal}
.prot__z b{font-weight:600;color:var(--ink);display:flex;align-items:center;gap:7px}
/* Welcher Dienst gemeint ist, muss man auf einen Blick sehen. Apple und
   Google verhalten sich verschieden, und eine Zeile ohne Absender waere
   im Zweifel die falsche Erklaerung. */
.prot__d{
  font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 6px;border-radius:5px;flex:none;
}
.prot__d--a{background:rgba(8,8,12,.07);color:var(--ink-2)}
.prot__d--g{background:var(--brand-soft);color:var(--brand-ink)}
.prot__t{display:block;margin-top:1px;color:var(--ink-3);font-size:12.5px;
  line-height:1.5}
.prot__c{font-family:'Geist Mono',ui-monospace,monospace;letter-spacing:.06em}
.prot__f{color:#8A1F1F}

/* ---------- Akquise: die eigene Interessentenliste ----------
   Der Stand ist die wichtigste Information in der Zeile, also trägt
   ihn eine farbige Plakette und nicht ein Wort im Kleingedruckten.
   Fünf Farben für sechs Stände: «Geantwortet» und «Termin» sind
   beide gut, und eine sechste Farbe wäre eine Unterscheidung, die
   niemand mehr auseinanderhält. */
.pill.akq--neu   {background:var(--soft);color:var(--ink-2)}
.pill.akq--weg   {background:rgba(8,8,12,.72);color:#FFF}
.pill.akq--gut   {background:var(--brand-soft);color:var(--brand-ink)}
.pill.akq--kunde {background:#0E6E4E;color:#FFF}
.pill.akq--nein  {background:#F2E3E6;color:#8A1F1F}

/* Die Zeile trägt zwei Zeilen Text statt einer, deshalb oben
   ausgerichtet statt mittig — sonst schwimmen die Knöpfe rechts. */
/* Sechs Kacheln, und «auto-fit» legte fünf in die erste Reihe und
   liess die sechste allein stehen. Feste Spalten teilen sie sauber:
   dreimal zwei auf dem Schreibtisch, zweimal drei auf dem Handy. */
.akq__trichter{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
@media (max-width:560px){ .akq__trichter{grid-template-columns:repeat(2,1fr)} }

.akq__z{align-items:flex-start}
.akq__z .btn,.akq__wahl{align-self:center}
/* Eine fällige Wiedervorlage ist das Einzige in dieser Liste, das
   nach Handlung ruft. Ein Streifen links genügt dafür; eine ganze
   eingefärbte Zeile würde die Plakette erschlagen. */
.akq__z--faellig{box-shadow:inset 3px 0 0 var(--brand)}
.akq__wahl{border:1px solid var(--line-2);border-radius:999px;background:var(--surface);
  font:inherit;font-size:13px;color:var(--ink-2);padding:6px 10px;cursor:pointer;flex:none}
.akq__form{background:var(--surface);border:1px solid var(--line-2);align-items:stretch}
.akq__form h3{font-size:17px}
@media (max-width:720px){
  .akq__z{flex-wrap:wrap}
  .akq__z .btn{margin-left:0}
  .akq__z > div:first-child{flex-basis:100%}
  /* Am Finger gemessen, nicht am Auge: Die Standwahl ist auf dem
     Schreibtisch eine schmale Pille, auf dem Handy muss sie so hoch
     sein wie die Knöpfe daneben. */
  .akq__wahl{min-height:44px;font-size:14px;padding:6px 12px}
}

/* ---------- Vereinfachung 14.09.2026 ----------
   Erweiterte Blöcke sind eingeklappt und tragen ein Schild; Gruppen-
   titel ordnen lange Reiter. Der Startblock eines Reiters hebt sich
   leicht ab, damit klar ist, womit man anfängt. */
.vgruppe{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:30px 0 -6px}
.vgruppe--erste{margin-top:0}
.erweitert__chip{flex:none;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;border:1px solid var(--line);color:var(--ink-3);margin-left:auto}
/* Die ganze Zeile ist die Tippfläche, mindestens 44 px hoch. Das Polster
   des zugeklappten Blocks ist dafür klein, die Höhe bleibt gleich. */
.erweitert > summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;min-height:44px}
.erweitert > summary::-webkit-details-marker{display:none}
.erweitert > summary h3{margin:0;flex:1;font-size:16px}
.erweitert > summary::after{content:"";width:8px;height:8px;flex:none;margin:0 4px 0 6px;
  border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .25s ease}
.erweitert[open] > summary::after{transform:rotate(-135deg)}
.erweitert[open] > summary{margin-bottom:10px}
.erweitert:not([open]){padding-top:3px;padding-bottom:3px;background:var(--soft)}
.karte2--start{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.btn--bereit{transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}
.schritt__hinweis{margin-top:auto;font-size:13px;line-height:1.45;color:var(--ink-3)}

/* ---------- Etappe 2 (15.09.2026): Menü und Gerüst ----------
   Gilt nur in der Verwaltung (.app--verwaltung). Die Demo lädt diese
   Datei auch und behält ihre Hülle mit Hamburger und Hilfespalte. */
:root{--unten-h:60px}

/* Konto steht ohne Gruppentitel, eine feine Linie trennt es vom Rest. */
.gruppe--luecke{display:block;height:1px;margin:var(--l2) 10px;padding:0;background:var(--line-2)}
.app--verwaltung .navpunkt{min-height:44px}
.navpunkt__text{flex:1;min-width:0}
/* Der Tarif neben «Konto»: Man sieht ihn, ohne danach zu suchen. */
.navpunkt__schild{flex:none;font-size:11.5px;font-weight:600;letter-spacing:.03em;line-height:1;
  padding:4px 8px;border-radius:999px;border:1px solid var(--line-2);background:var(--soft);color:var(--ink-2)}
.navpunkt.on .navpunkt__schild{background:var(--surface)}
/* Nur Ismail: der Schalter «Als Inhaber ansehen». Der Zustand steht in
   aria-pressed, der Knopf zeigt ihn mit Lage und Farbe. */
.navpunkt--schalter{margin-top:var(--l2)}
.navpunkt__kipp{flex:none;position:relative;width:32px;height:18px;border-radius:999px;
  background:var(--line);transition:background .2s var(--e)}
.navpunkt__kipp::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:#FFF;box-shadow:0 1px 2px rgba(8,8,12,.25);transition:transform .2s var(--e)}
.navpunkt--schalter[aria-pressed="true"] .navpunkt__kipp{background:var(--brand)}
.navpunkt--schalter[aria-pressed="true"] .navpunkt__kipp::after{transform:translateX(14px)}
.leiste__modus{font-size:12px;font-weight:600;letter-spacing:.03em;padding:5px 10px;border-radius:999px;
  background:var(--brand-soft);color:var(--brand-ink);white-space:nowrap}

/* «So geht's»: die Hilfe als eingeklappte Zeile oben auf der Seite
   statt als Spalte rechts. */
.sogehts{margin:0 0 var(--l3);border:1px solid var(--line-2);border-radius:14px;background:var(--surface)}
.sogehts > summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 14px;
  cursor:pointer;list-style:none;font-size:15px}
.sogehts > summary::-webkit-details-marker{display:none}
.sogehts > summary svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--brand);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.sogehts__t{flex:none;font-weight:600;color:var(--ink)}
.sogehts__u{flex:1;min-width:0;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sogehts > summary::after{content:"";width:8px;height:8px;flex:none;margin:0 4px 0 6px;
  border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .25s ease}
.sogehts[open] > summary::after{transform:rotate(-135deg)}
.sogehts__innen{padding:2px 16px 16px}
.sogehts__lead{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.sogehts__liste{margin:12px 0 0;padding:0 0 0 20px;display:grid;gap:10px}
.sogehts__liste b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.sogehts__liste span{display:block;margin-top:2px;font-size:14.5px;line-height:1.5;color:var(--ink-3)}
/* Ohne Hilfespalte bleibt die Seite so schmal wie vorher der Inhalt. */
@media (min-width:1500px){
  .app--verwaltung .arbeit{grid-template-columns:minmax(0,1fr)}
  .app--verwaltung .vwrap:not(.vwrap--breit){max-width:1080px}
}

/* Die Sprachwahl im Konto ist ein Feld wie die anderen. */
.sprachwahl.sprachwahl--feld{display:block;width:100%;max-width:none;min-height:44px;
  border-radius:12px;padding:10px 12px;font-size:16px}

/* Leiste unten, nur am Handy: Start, Karte, Kasse, Kunden und Menü.
   Der aktive Eintrag trägt eine Fläche hinter dem Symbol und fette
   Schrift, nicht nur eine andere Farbe. */
.unten{display:none}
@media (max-width:900px){
  .app--verwaltung .unten{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;
    padding:4px 4px env(safe-area-inset-bottom);
    background:var(--surface);
    border-top:1px solid var(--line-2);
  }
  /* Deckend und nach unten verlängert: Safari setzt feste Elemente oberhalb
     seiner Werkzeugleiste ab und zeigt die Seite darunter durch die Glasfläche.
     Ohne die Verlängerung schwebt die Leiste als Insel über dem Inhalt. */
  .app--verwaltung .unten::after{content:"";position:absolute;top:100%;left:0;right:0;
    height:120px;background:inherit;pointer-events:none}
  .unten__p{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    min-width:44px;min-height:calc(var(--unten-h) - 8px);padding:2px 0;border-radius:12px;
    font-size:12px;line-height:1.2;color:var(--ink-3);background:none;border:0;cursor:pointer}
  .unten__p span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .unten__p svg{width:22px;height:22px;padding:3px 12px;box-sizing:content-box;border-radius:999px;
    fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
    transition:background .2s var(--e)}
  .unten__p.on{color:var(--brand-ink);font-weight:600}
  .unten__p.on svg{background:color-mix(in srgb, var(--brand) 14%, transparent);stroke-width:2}
  .unten__p:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
  .app--verwaltung .haupt{padding-bottom:calc(var(--unten-h) + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion: reduce){
  .app--verwaltung .seite,.navpunkt__kipp,.navpunkt__kipp::after,
  .sogehts > summary::after,.unten__p svg{transition:none}
}