/* loewe-ui.css – gemeinsame Stildatei der Löwe-Apps (Inventar, Formular-Manager)
   Stand: 2026-10-14 · Vorlage: Klickentwurf „Löwe Forms“ (Forms/docs/design-entwurf),
   Token-Werte: Toolbox V5 (Tools/Tools.pyw, CSS ab ca. Zeile 4436).
   NUR Familien-Bausteine (lf-*). Nichts App-Spezifisches hier eintragen.
   Änderungen immer in BEIDEN Apps nachziehen – der Stand-Vermerk oben zeigt, ob die Kopien gleich sind. */

/* ── Schrift: Barlow, selbst ausgeliefert (SIL OFL, fonts/OFL.txt) ── */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-latin-400-normal.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:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-latin-500-normal.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:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-latin-600-normal.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:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-latin-700-normal.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:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── Tokens ── */
:root{
  color-scheme:light;
  --grund:#E8ECF4;
  --ink:#16181D; --ink2:#3A4358; --ink3:#525B70;
  --akzent:#2660C9; --akzent-dunkel:#1D4EA6;
  --ok:#1E6B41; --warn:#7E4A07; --fehler:#A8381F;
  --linie:rgba(24,34,68,.07);
  /* Glas, Stufe „Klar“ */
  --g-chrome:rgba(255,255,255,.24);
  --g-knopf:rgba(255,255,255,.62);
  --g-karte:rgba(255,255,255,.86);
  --g-feld:rgba(255,255,255,.78);
  --g-blur:16px; --g-sat:180%;
  --g-kante:rgba(24,34,68,.16);
  --g-glanz:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 6px rgba(255,255,255,.45);
  --g-schatten-1:0 1px 2px rgba(24,34,68,.06),0 4px 12px rgba(24,34,68,.06);
  --g-schatten-2:0 2px 6px rgba(24,34,68,.06),0 14px 36px rgba(24,34,68,.10);
  --g-schatten-3:0 4px 12px rgba(24,34,68,.10),0 24px 56px rgba(24,34,68,.18);
  --aus:cubic-bezier(.23,1,.32,1);
  --schrift:'Barlow','Segoe UI Variable Display','Segoe UI',-apple-system,system-ui,sans-serif;
}

/* ── Grundlage ── */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--grund);-webkit-text-size-adjust:100%;text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent}  /* kein grauer Tipp-Blitz; jedes Bedienelement hat eigenes :active */
body{margin:0;min-height:100vh;min-height:100dvh;background:transparent;color:var(--ink);
  font-family:var(--schrift);font-size:15px;line-height:22px;
  font-kerning:none;word-spacing:.06em;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,figure{margin:0}
a{color:var(--akzent)}
@media (hover:hover) and (pointer:fine){a:hover{color:var(--akzent-dunkel)}}
/* Touch: kein 300-ms-Warten auf Doppeltipp, keine Textauswahl/Callouts auf Bedienelementen */
a,button,summary,label,select,input[type=checkbox],[role=button]{touch-action:manipulation}
.lf-btn,.lf-tab,.lf-seg,.lf-kapsel,.lf-konto,.lf-marke{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
::selection{background:rgba(38,96,201,.22)}
:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
button,input,select,textarea{font:inherit;color:inherit}
.lf-zahl{font-variant-numeric:tabular-nums}
.lf-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Farbfeld hinter dem Glas: ruhig, fest stehend. Werte exakt wie Toolbox V5. */
.lf-feldgrund::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vw 55vh at 6% -6%,rgba(0,102,153,.32),transparent 70%),
    radial-gradient(48vw 50vh at 96% 4%,rgba(153,51,102,.24),transparent 70%),
    radial-gradient(52vw 60vh at -4% 74%,rgba(0,102,153,.16),transparent 70%),
    radial-gradient(56vw 60vh at 104% 104%,rgba(153,51,102,.18),transparent 70%),
    radial-gradient(40vw 40vh at 55% 48%,rgba(255,255,255,.55),transparent 75%),
    var(--grund)}
/* Auf dem Handy dieselben Verläufe in festen Maßen (wie „Ausfüllen“), sonst werden sie zu schmal */
@media (max-width:640px){
  .lf-feldgrund::before{background:
    radial-gradient(420px 460px at 0% -8%,rgba(0,102,153,.32),transparent 70%),
    radial-gradient(360px 420px at 100% 6%,rgba(153,51,102,.24),transparent 70%),
    radial-gradient(380px 500px at -6% 76%,rgba(0,102,153,.16),transparent 70%),
    radial-gradient(420px 500px at 104% 104%,rgba(153,51,102,.18),transparent 70%),
    radial-gradient(300px 340px at 55% 48%,rgba(255,255,255,.55),transparent 75%),
    var(--grund)}
}

/* ── Seite ── */
/* Seitenränder halten Abstand zu Notch/Home-Indikator (viewport-fit=cover im Layout) */
.lf-seite{max-width:1360px;margin:0 auto;display:flex;flex-direction:column;gap:24px;
  padding:20px max(24px,env(safe-area-inset-right)) calc(64px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}
.lf-seite.lf-schmal{max-width:600px}
@media (max-width:640px){.lf-seite{gap:18px;padding:12px max(16px,env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}}

/* ── Kopf: Marke links, Kapseln rechts, darunter die Reiterleiste ── */
.lf-kopf{display:flex;flex-direction:column;gap:18px}
.lf-kopfzeile{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.lf-marke{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.lf-marke:hover,.lf-marke:active{color:var(--ink)}
.lf-marke:active .lf-zeichen{transform:scale(.94)}
.lf-zeichen{transition:transform .14s var(--aus)}
.lf-zeichen{width:36px;height:36px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#3B78DE,#2660C9);color:#fff;font-weight:700;font-size:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 4px 12px rgba(24,34,68,.16)}
/* Variante mit Logo-Bild: weiße Kachel */
.lf-zeichen.lf-bild{background:#fff;box-shadow:0 0 0 .5px var(--g-kante),0 4px 12px rgba(24,34,68,.16)}
.lf-zeichen.lf-bild img{width:26px;height:26px;display:block}
/* Marke groß, Seitentitel klein (Entscheidung des Inhabers 14.10.2026: Größen von Marke und Titel getauscht) */
.lf-markenname{font-weight:500;font-size:32px;line-height:36px;letter-spacing:-.02em}
.lf-kopf-ende{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.lf-plakette{font-size:12px;line-height:16px;color:var(--ink3);padding:3px 9px;border-radius:999px;
  background:rgba(255,255,255,.6);box-shadow:0 0 0 .5px var(--g-kante)}
.lf-kapsel{display:inline-flex;align-items:center;gap:7px;min-height:36px;font-size:13px;font-weight:600;line-height:18px;
  color:var(--ink2);background:var(--g-knopf);border-radius:999px;padding:8px 14px;text-decoration:none;
  box-shadow:0 0 0 .5px var(--g-kante)}
@media (hover:hover) and (pointer:fine){a.lf-kapsel:hover{background:rgba(255,255,255,.9);color:var(--ink)}}
.lf-kapsel,.lf-konto{transition:background-color .2s var(--aus),transform .14s var(--aus)}
a.lf-kapsel:active,.lf-konto:active{transform:scale(.97)}
a.lf-kapsel:active{background:rgba(255,255,255,.95)}
.lf-kapsel svg{flex-shrink:0}
/* Glocke: Kapsel bleibt weiß, nur Zahl, Text und Glocke werden rot, solange Versorgungen ohne Meldung sind
   (Wunsch des Inhabers 14.10.2026; #B53C25 auf der hellen Kapsel ≥ 5:1) */
.lf-kapsel.lf-kapsel-rot{color:#B53C25}
@media (hover:hover) and (pointer:fine){a.lf-kapsel.lf-kapsel-rot:hover{color:#93301C}}
.lf-konto{display:inline-flex;align-items:center;gap:10px;background:rgba(22,24,29,.88);color:#fff;border-radius:999px;
  padding:5px 15px 5px 5px;min-height:40px;font-size:14px;font-weight:600;line-height:18px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 14px rgba(22,24,29,.20)}
.lf-konto-kuerzel{width:30px;height:30px;border-radius:999px;background:rgba(255,255,255,.18);
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
/* Einstellungen: runder Glasknopf mit Zahnrad, gleiche Familie wie die Kapsel daneben */
.lf-einst{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:999px;cursor:pointer;color:var(--ink2);
  background:var(--g-knopf);box-shadow:0 0 0 .5px var(--g-kante);
  transition:background-color .2s var(--aus),color .2s var(--aus),transform .14s var(--aus)}
@media (hover:hover) and (pointer:fine){.lf-einst:hover{background:rgba(255,255,255,.9);color:var(--ink)}}
.lf-einst:active{transform:scale(.95)}
.lf-einst svg{transition:transform .3s var(--aus)}
[open]>.lf-einst{background:rgba(255,255,255,.95);color:var(--akzent)}
[open]>.lf-einst svg{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.lf-einst svg{transition:none}}
@media (pointer:coarse){.lf-einst{width:44px;height:44px}}

/* ── Reiterleiste: Glaskapsel mit Blur, aktiver Reiter als helle Linse ── */
.lf-tabs{position:relative;align-self:flex-start;display:inline-flex;flex-wrap:wrap;gap:2px;padding:4px;border-radius:999px;
  background:var(--g-chrome);
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
  box-shadow:0 0 0 .5px var(--g-kante),inset 0 0 6px rgba(255,255,255,.35),var(--g-schatten-2)}
.lf-tab{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:40px;padding:0 20px;border-radius:999px;
  color:var(--ink2);text-decoration:none;font-size:14px;line-height:18px;font-weight:600;transition:color .2s var(--aus),transform .14s var(--aus)}
@media (hover:hover) and (pointer:fine){.lf-tab:hover{color:var(--ink)}}
.lf-tab:active,.lf-seg:active{transform:scale(.97)}
.lf-tab.on,.lf-tab[aria-current="page"]{background:rgba(255,255,255,.94);color:var(--akzent);
  box-shadow:var(--g-glanz),0 0 0 .5px rgba(24,34,68,.07),0 1px 3px rgba(24,34,68,.10),0 6px 16px rgba(24,34,68,.10)}
@media (pointer:coarse){.lf-tab{min-height:44px}.lf-kapsel,.lf-konto,.lf-marke{min-height:44px}}

/* ── Handy-Kopf: Marke und Kapseln in EINER Zeile, Reiterleiste über die volle Breite (wie ein
   iOS-Segmented-Control). Texte der Kapseln werden zu Zahl/Kürzel, das aria-label trägt den Satz. ── */
.lf-nur-breit{display:inline}
@media (max-width:640px){
  .lf-kopf{gap:14px}
  .lf-kopfzeile{flex-wrap:nowrap}
  .lf-marke{min-width:0}
  /* „Medizinische Hilfsmittel“ passt neben Glocke und Zahnrad nicht in eine Zeile: zweizeilig statt abgeschnitten */
  .lf-markenname{font-size:19px;line-height:21px;letter-spacing:-.015em;text-wrap:balance;overflow-wrap:normal}
  .lf-kopf-ende{flex-wrap:nowrap;flex-shrink:0;gap:8px}
  .lf-kapsel{padding:0 12px}
  .lf-konto{padding:5px}
  .lf-konto-kuerzel{width:34px;height:34px;font-size:12px}
  .lf-nur-breit{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .lf-tabs{align-self:stretch;display:flex;flex-wrap:nowrap}
  .lf-tab{flex:1 1 0;justify-content:center;padding:0 8px;font-size:14px}
}

/* ── Titelzeile: Großtitel direkt auf dem Farbfeld (nur --ink/--ink2!) ── */
.lf-titel{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.lf-titel-text{display:flex;flex-direction:column;gap:6px;min-width:0}
/* Seitentitel in Markengröße von vorher (getauscht 14.10.2026) */
.lf-grosstitel{font-size:19px;line-height:24px;font-weight:600;letter-spacing:-.012em}
.lf-unterzeile{font-size:16px;line-height:22px;color:var(--ink2);text-wrap:pretty}
@media (max-width:640px){.lf-grosstitel{font-size:18px;line-height:22px}.lf-unterzeile{font-size:15px;line-height:20px}}
.lf-nw{white-space:nowrap}
.lf-ueberzeile{font-size:17px;line-height:22px;color:var(--ink2)}
.lf-werkzeug{display:flex;flex-wrap:wrap;align-items:center;gap:10px}

/* ── Karte: fast deckend, Lichtkante innen, dunkle Außenkante ── */
.lf-karte{position:relative;background:var(--g-karte);border-radius:26px;
  box-shadow:0 0 0 .5px var(--g-kante),var(--g-schatten-2)}
.lf-karte::before,.lf-sec::before,.lf-leiste::before,.lf-tabs::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(255,255,255,.2) 34%,rgba(255,255,255,0) 62%,rgba(255,255,255,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.lf-karte>*{position:relative}
.lf-innen{padding:24px}
.lf-innen-gross{padding:28px}
@media (max-width:640px){.lf-karte{border-radius:22px}.lf-innen,.lf-innen-gross{padding:18px 20px}}
.lf-kartenkopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px}
@media (max-width:640px){.lf-kartenkopf{padding:16px 20px}}

/* Label / Kartentitel: 12 px versal */
.lf-label{font-size:12px;line-height:16px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink3)}
.lf-label.lf-mit-punkt{display:flex;align-items:center;gap:8px}
/* Kartentitel: echte Überschrift (17/600, Satzschreibung) – das Versal-Etikett bleibt für Kennzahlen und Spaltenköpfe */
h2.lf-label{font-size:17px;line-height:22px;font-weight:600;letter-spacing:-.012em;text-transform:none;color:var(--ink)}
.lf-punkt{width:8px;height:8px;border-radius:999px;flex-shrink:0;background:#8A93A8}
.lf-punkt.blau{background:#2660C9}.lf-punkt.amber{background:#D98A1E}.lf-punkt.gruen{background:#237A4B}

/* ── Kennzahlkarten ── */
.lf-kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.lf-kennzahl{padding:20px 24px;display:flex;flex-direction:column;gap:4px}
.lf-kennzahl-wert{font-size:40px;line-height:44px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink2)}
.lf-kennzahl-wert.blau{color:#2660C9}.lf-kennzahl-wert.amber{color:#A3600F}.lf-kennzahl-wert.gruen{color:#237A4B}
.lf-kennzahl-zeile{font-size:14px;line-height:20px;color:var(--ink3)}
@media (max-width:640px){.lf-kennzahlen{grid-template-columns:1fr 1fr;gap:12px}.lf-kennzahl{padding:16px 18px}.lf-kennzahl-wert{font-size:34px;line-height:38px}}

/* ── Hinweiskarte ── */
.lf-hinweis{display:flex;align-items:flex-start;gap:12px;padding:14px 20px;border-radius:18px;font-size:15px;line-height:22px;color:var(--ink2)}
.lf-hinweis svg{flex-shrink:0;margin-top:2px}
.lf-hinweis.warn{background:rgba(255,248,236,.9);color:#6E4209}
.lf-hinweis.ok{background:rgba(236,248,241,.92);color:#1E6B41}
.lf-hinweis.fehler{background:rgba(253,240,237,.94);color:#A8381F}
.lf-hinweis.info{background:rgba(238,244,253,.92);color:#1F55B5}

/* ── Knöpfe ── */
.lf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:0;border-radius:999px;
  font-family:inherit;font-size:15px;line-height:20px;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .2s var(--aus),box-shadow .2s var(--aus),transform .14s var(--aus)}
.lf-btn:active:not(:disabled){transform:scale(.97)}
.lf-btn:disabled{opacity:.5;cursor:default}
.lf-pri{background:linear-gradient(180deg,#3B78DE,#2660C9);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(10,30,80,.18),0 0 0 .5px rgba(10,30,80,.25),0 2px 6px rgba(24,34,68,.14),0 8px 20px rgba(24,34,68,.12)}
@media (hover:hover) and (pointer:fine){.lf-pri:hover:not(:disabled){background:linear-gradient(180deg,#4884E4,#2C68D2);color:#fff}}
.lf-pri:focus-visible{outline-color:#1A4A9F}
.lf-sec{position:relative;background:var(--g-knopf);color:var(--ink);
  box-shadow:0 0 0 .5px var(--g-kante),inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(24,34,68,.06),0 4px 12px rgba(24,34,68,.06)}
@media (hover:hover) and (pointer:fine){.lf-sec:hover:not(:disabled){background:rgba(255,255,255,.92);color:var(--ink)}}
.lf-gefahr,.lf-gefahr:hover:not(:disabled){color:var(--fehler)}
.lf-klein{min-height:40px;padding:0 15px;font-size:14px}
.lf-gross{min-height:48px;padding:0 24px}
@media (pointer:coarse){.lf-klein{min-height:44px}}

/* ── Filter-/Auswahl-Kapsel ── */
.lf-segs{display:flex;flex-wrap:wrap;gap:6px}
.lf-seg{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:0;border-radius:999px;
  background:rgba(255,255,255,.5);color:var(--ink2);font-family:inherit;font-size:14px;line-height:18px;font-weight:600;
  text-decoration:none;cursor:pointer;box-shadow:0 0 0 .5px var(--g-kante);transition:background-color .2s var(--aus),color .2s var(--aus),box-shadow .2s var(--aus),transform .14s var(--aus)}
@media (hover:hover) and (pointer:fine){.lf-seg:hover{background:rgba(255,255,255,.8);color:var(--ink)}}
.lf-seg[aria-pressed="true"],.lf-seg[aria-current]{background:#fff;color:var(--akzent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 .5px rgba(24,34,68,.10),0 1px 3px rgba(24,34,68,.10),0 6px 14px rgba(24,34,68,.08)}
.lf-seg-zahl{font-size:12px;font-variant-numeric:tabular-nums;opacity:.75}
@media (pointer:coarse){.lf-seg{min-height:44px}}

/* ── Felder ── */
.lf-feldgruppe{display:flex;flex-direction:column;gap:7px}
.lf-feldlabel{font-size:15px;line-height:20px;font-weight:600;color:var(--ink2)}
.lf-feld{width:100%;height:48px;padding:0 15px;border:1px solid rgba(24,34,68,.5);border-radius:13px;background-color:var(--g-feld);
  color:var(--ink);font-family:inherit;font-size:16px;box-shadow:inset 0 1px 2px rgba(24,34,68,.06);
  transition:background-color .2s var(--aus),border-color .2s var(--aus),box-shadow .2s var(--aus)}
@media (hover:hover) and (pointer:fine){.lf-feld:hover:not(:focus){background-color:rgba(255,255,255,.9)}}
.lf-feld:focus{background-color:#fff;border-color:var(--akzent);outline:none;box-shadow:0 0 0 4px rgba(38,96,201,.22)}
.lf-feld::placeholder{color:#6B7385}
.lf-feld[aria-invalid="true"]{border-color:var(--fehler);box-shadow:0 0 0 4px rgba(194,69,46,.16)}
.lf-feldhinweis{font-size:14px;line-height:20px;color:var(--ink3)}
.lf-feldfehler{font-size:15px;line-height:21px;color:var(--fehler)}
/* Auswahlfeld: eigener Pfeil statt Systempfeil – gleich in Safari, Chrome, Edge. Aus zwei Verläufen
   gezeichnet, weil die CSP keine data:-Bilder erlaubt. */
select.lf-feld{-webkit-appearance:none;appearance:none;padding-right:34px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink3) 50%),linear-gradient(135deg,var(--ink3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select.lf-feld::-ms-expand{display:none}

/* Leises Feld für Tabellen (lf-inline): ruht als getönte Fläche mit Haarlinie, wird beim Zeigen
   deutlicher und beim Fokus zum normalen Feld. Spart Höhe und nimmt der Tabelle das Kastenmuster. */
.lf-feld.lf-inline{height:36px;padding:0 10px;border-color:rgba(24,34,68,.14);border-radius:10px;
  background-color:rgba(38,60,120,.04);box-shadow:none;font-size:16px}
select.lf-feld.lf-inline{padding-right:28px;background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%}
@media (hover:hover) and (pointer:fine){.lf-feld.lf-inline:hover:not(:focus){background-color:rgba(255,255,255,.95);border-color:rgba(24,34,68,.34)}}
.lf-feld.lf-inline:focus{background-color:#fff;border-color:var(--akzent);box-shadow:0 0 0 3px rgba(38,96,201,.2)}
.lf-feld.lf-inline::placeholder{color:#8A93A8}
@media (pointer:coarse){.lf-feld.lf-inline{height:44px}}

/* ── Tabelle (Kopfband + Zeilen mit Haarlinie) ── */
.lf-tabelle{width:100%;border-collapse:collapse;font-size:15px;line-height:22px}
.lf-tabelle th{padding:10px 16px;background:rgba(38,60,120,.045);border-top:1px solid rgba(24,34,68,.08);border-bottom:1px solid rgba(24,34,68,.08);
  font-size:12px;line-height:16px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink3);text-align:left;white-space:nowrap}
.lf-tabelle td{padding:14px 16px;border-bottom:1px solid var(--linie);vertical-align:middle}
.lf-tabelle th:first-child,.lf-tabelle td:first-child{padding-left:24px}
.lf-tabelle th:last-child,.lf-tabelle td:last-child{padding-right:24px}
.lf-tabelle .lf-rechts{text-align:right}
.lf-name{display:block;font-weight:600;font-size:16px;line-height:20px;color:var(--ink)}
a.lf-name{text-decoration:none}
@media (hover:hover) and (pointer:fine){a.lf-name:hover{color:var(--akzent);text-decoration:underline}}
.lf-zweitzeile{display:block;font-size:14px;line-height:20px;color:var(--ink3)}
.lf-aktionen{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.lf-leer{padding:40px 24px;text-align:center;font-size:16px;line-height:22px;color:var(--ink3)}

/* ── Status-Plakette ── */
.lf-pille{display:inline-flex;align-items:center;border-radius:999px;padding:4px 12px;font-size:13px;line-height:18px;font-weight:600;white-space:nowrap;
  background:rgba(24,34,68,.07);color:var(--ink2)}
.lf-pille.ok{background:rgba(35,122,75,.13);color:#1E6B41}
.lf-pille.warn{background:rgba(217,138,30,.16);color:#7E4A07}
.lf-pille.fehler{background:rgba(194,69,46,.12);color:#A8381F}
.lf-pille.info{background:rgba(38,96,201,.12);color:#1F55B5}

/* ── Glasleiste (Handy-Kopf, Absenden) ── */
.lf-leiste{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:999px;
  padding:8px 16px 8px 8px;background:var(--g-chrome);
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
  box-shadow:0 0 0 .5px var(--g-kante),0 2px 6px rgba(24,34,68,.06),0 10px 24px rgba(24,34,68,.08)}

/* ── Kartenfuß ── */
.lf-fuss{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:16px 24px;font-size:13.5px;line-height:19px;color:var(--ink3)}

/* ── Handy-Maße (Vorlage „Ausfüllen“): größere Knöpfe und Felder ── */
.lf-handy .lf-btn{min-height:54px;font-size:17px}
.lf-handy .lf-feld{height:52px;font-size:17px}
.lf-handy{font-size:17px;line-height:24px}

/* ═════ Fallbacks (stehen zuletzt, gewinnen also) ═════ */
@media (prefers-reduced-transparency:reduce){
  :root{--g-chrome:#F3F5F9;--g-knopf:#FFFFFF;--g-karte:#FFFFFF;--g-feld:#F7F8FB}
  *,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .lf-feldgrund::before{opacity:.35}
}
@media (prefers-contrast:more){
  :root{--g-chrome:#FFFFFF;--g-knopf:#FFFFFF;--g-karte:#FFFFFF;--g-feld:#FFFFFF;--g-kante:#6B7489;--ink3:#2E3546}
  *,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .lf-karte::before,.lf-sec::before,.lf-leiste::before,.lf-tabs::before{display:none}
  .lf-karte,.lf-tabs,.lf-leiste,.lf-sec,.lf-seg,.lf-kapsel,.lf-feld{box-shadow:0 0 0 1px #6B7489!important}
  .lf-feld.lf-inline{border-color:#6B7489;background-color:#fff}
  .lf-seg[aria-pressed="true"],.lf-seg[aria-current],.lf-tab.on,.lf-tab[aria-current="page"]{box-shadow:inset 0 0 0 2px var(--akzent)!important}
  .lf-feldgrund::before{opacity:.2}
}
@media (forced-colors:active){
  .lf-karte,.lf-tabs,.lf-btn,.lf-seg,.lf-leiste,.lf-kapsel,.lf-pille{border:1px solid CanvasText}
  .lf-karte::before,.lf-sec::before,.lf-leiste::before,.lf-tabs::before,.lf-feldgrund::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-property:color,background-color,opacity,border-color,box-shadow!important;
    transition-duration:.15s!important;animation-duration:.15s!important}
  .lf-btn:active:not(:disabled),.lf-tab:active,.lf-seg:active{transform:none}
}
@media print{
  .lf-feldgrund::before{display:none}
  html,body{background:#fff}
  .lf-karte{box-shadow:none;border:.5px solid #999;background:#fff}
  .lf-karte::before{display:none}
}