/* Uhl IT Kundenportal - styles.
   Built from docs/portal/mockups/portal.css (the design specification), cleaned for production:
   self-hosted fonts instead of Google Fonts, colours as custom properties per theme on
   html[data-theme] (hell, dunkel, kontrast), every inline style of the mockups turned into a class,
   plus focus outlines, a skip link, a visually hidden utility and 44 px targets.
   Contrast of every text/background token pair is listed in docs/REPORT-PORTAL-1.md (Unit A). */

/* 1  Fonts (copies of public/fonts, OFL licences next to them) --------------------------------- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/space-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/space-grotesk-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2')}

/* 2  Themes -------------------------------------------------------------------------------------
   The server sends data-theme="hell" (customer area) or "dunkel" (admin area); assets/theme.js
   replaces it before the first paint with the stored choice or the system preference.
   Page tokens: --bg page, --card/--card2 surfaces, --line rules, --tx/--tx2/--tx3 text,
   --acc buttons, --lbl labels, --link links, --soft/--sel tinted surfaces, --field inputs,
   --platzhalter placeholders (its own tone in kontrast, as on the website: otherwise an empty
   field reads as filled in).
   Ink tokens (--ink-*): the dark header, bands and admin sidebar, which stay dark in every theme. */
:root,
html[data-theme="hell"]{
  --bg:#F6F5F2;--card:#FFFFFF;--card2:#ECEAE4;--line:#E3E1DA;
  --tx:#10141F;--tx2:#3C4254;--tx3:#5B6172;--platzhalter:#5B6172;
  --acc:#6D28D9;--acc-h:#5B21B6;--acc-tx:#FFFFFF;--lbl:#6D28D9;--link:#6D28D9;
  --soft:#EFE9FC;--soft-r:#D9CCF3;--sel:#F3EEFF;--field:#FBFAF8;--field-r:#8A8F9C;
  --over:#10141F;--over2:#3C4254;--tab-on:#6D28D9;--tag-on-tx:#5B21B6;--seg-rand:#7D828F;
  --fokus:#6D28D9;--schatten:0 1px 2px rgba(16,20,31,.04),0 12px 32px rgba(16,20,31,.06);
  --ok-tx:#067647;--warn-tx:#93370D;--err-tx:#B42318;
  --ok-bg:#ECFDF3;--ok-rand:#ABEFC6;--ok-chip:#054F31;
  --warn-bg:#FFFAEB;--warn-rand:#FEDF89;--warn-chip:#93370D;
  --err-bg:#FEF3F2;--err-rand:#FECDCA;--err-chip:#B42318;--err-note:#7A271A;
  --v-bg:#EFE9FC;--v-rand:#D9CCF3;--v-chip:#5B21B6;
  --chip-ink-bg:#10141F;--chip-ink-tx:#FFFFFF;
  --av-bg:#E2D9F6;--av-tx:#231448;--av-d-bg:#25154D;--av-d-tx:#EDE6FF;--av-rand:transparent;
  --ink:#0B0E18;--ink-tief:#070A12;--ink-linie:#161C2B;--ink-rand:#262E45;--ink-karte:#141A2B;--ink-karte2:#1E2437;
  --ink-feld:#0F1422;--ink-feld-rand:#6B7390;--ink-tx:#FFFFFF;--ink-tx2:#C3C8D8;--ink-nav:#D5D8E4;--ink-tx3:#9AA3B8;--ink-platzhalter:#9AA3B8;
  --ink-grp:#717B95;--ink-lbl:#C4B5FD;--ink-akzent:#8B5CF6;--ink-akzent-tx:#A78BFA;--ink-chip-rand:#39415C;
  --ink-ghost-rand:#6B7390;--ink-soft:#1A1438;--ink-soft-r:#3B2C78;--ink-knopf:#7C3AED;--ink-knopf-tx:#FFFFFF;
  --seg-an-bg:#7C3AED;--seg-an-tx:#FFFFFF;--side-an-schatten:inset 3px 0 0 #8B5CF6;
  --marke:#8B5CF6;--waben:#8B5CF6;--punkt:#A78BFA;--fokus-ink:#C4B5FD;
  color-scheme:light;
}
html[data-theme="dunkel"]{
  --bg:#0B0E18;--card:#141A2B;--card2:#1E2437;--line:#262E45;
  --tx:#FFFFFF;--tx2:#C3C8D8;--tx3:#9AA3B8;--platzhalter:#9AA3B8;
  --acc:#7C3AED;--acc-h:#6D28D9;--acc-tx:#FFFFFF;--lbl:#C4B5FD;--link:#C4B5FD;
  --soft:#1A1438;--soft-r:#3B2C78;--sel:#1A1438;--field:#0F1422;--field-r:#6B7390;
  --over:#C4B5FD;--over2:#7C3AED;--tab-on:#8B5CF6;--tag-on-tx:#FFFFFF;--seg-rand:#6B7390;
  --fokus:#C4B5FD;--schatten:0 1px 2px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.35);
  --ok-tx:#75E0A7;--warn-tx:#FEC84B;--err-tx:#FDA29B;
  --ok-bg:rgba(18,183,106,.12);--ok-rand:rgba(117,224,167,.35);--ok-chip:#75E0A7;
  --warn-bg:rgba(247,144,9,.12);--warn-rand:rgba(254,200,75,.35);--warn-chip:#FEC84B;
  --err-bg:rgba(240,68,56,.12);--err-rand:rgba(253,162,155,.35);--err-chip:#FDA29B;--err-note:#FECDCA;
  --v-bg:#1A1438;--v-rand:#3B2C78;--v-chip:#C4B5FD;
  --chip-ink-bg:#FFFFFF;--chip-ink-tx:#0B0E18;
  --av-bg:#E2D9F6;--av-tx:#231448;--av-d-bg:#25154D;--av-d-tx:#EDE6FF;--av-rand:transparent;
  --ink:#0B0E18;--ink-tief:#070A12;--ink-linie:#161C2B;--ink-rand:#262E45;--ink-karte:#141A2B;--ink-karte2:#1E2437;
  --ink-feld:#0F1422;--ink-feld-rand:#6B7390;--ink-tx:#FFFFFF;--ink-tx2:#C3C8D8;--ink-nav:#D5D8E4;--ink-tx3:#9AA3B8;--ink-platzhalter:#9AA3B8;
  --ink-grp:#717B95;--ink-lbl:#C4B5FD;--ink-akzent:#8B5CF6;--ink-akzent-tx:#A78BFA;--ink-chip-rand:#39415C;
  --ink-ghost-rand:#6B7390;--ink-soft:#1A1438;--ink-soft-r:#3B2C78;--ink-knopf:#7C3AED;--ink-knopf-tx:#FFFFFF;
  --seg-an-bg:#7C3AED;--seg-an-tx:#FFFFFF;--side-an-schatten:inset 3px 0 0 #8B5CF6;
  --marke:#8B5CF6;--waben:#8B5CF6;--punkt:#A78BFA;--fokus-ink:#C4B5FD;
  color-scheme:dark;
}
/* Hoher Kontrast (the website's tokens): black ground, cyan and yellow accents, borders at 30 % white. */
html[data-theme="kontrast"]{
  --bg:#000000;--card:#000000;--card2:#000000;--line:rgba(255,255,255,.3);
  --tx:#FFFFFF;--tx2:#FFFFFF;--tx3:#E6E6E6;--platzhalter:#ABABAB;
  --acc:#00FFFF;--acc-h:#FFFF00;--acc-tx:#000000;--lbl:#00FFFF;--link:#00FFFF;
  --soft:#000000;--soft-r:#FFFF00;--sel:#000000;--field:#000000;--field-r:#FFFFFF;
  --over:#FFFF00;--over2:#000000;--tab-on:#FFFF00;--tag-on-tx:#00FFFF;--seg-rand:#FFFFFF;
  --fokus:#FFFF00;--schatten:none;
  --ok-tx:#FFFFFF;--warn-tx:#FFFF00;--err-tx:#FFFF00;
  --ok-bg:#000000;--ok-rand:#FFFFFF;--ok-chip:#FFFFFF;
  --warn-bg:#000000;--warn-rand:#FFFF00;--warn-chip:#FFFF00;
  --err-bg:#000000;--err-rand:#FFFF00;--err-chip:#FFFF00;--err-note:#FFFFFF;
  --v-bg:#000000;--v-rand:#00FFFF;--v-chip:#00FFFF;
  --chip-ink-bg:#FFFFFF;--chip-ink-tx:#000000;
  --av-bg:#000000;--av-tx:#FFFFFF;--av-d-bg:#000000;--av-d-tx:#FFFFFF;--av-rand:#FFFFFF;
  --ink:#000000;--ink-tief:#000000;--ink-linie:rgba(255,255,255,.3);--ink-rand:rgba(255,255,255,.3);--ink-karte:#000000;--ink-karte2:#000000;
  --ink-feld:#000000;--ink-feld-rand:#FFFFFF;--ink-tx:#FFFFFF;--ink-tx2:#FFFFFF;--ink-nav:#FFFFFF;--ink-tx3:#E6E6E6;--ink-platzhalter:#ABABAB;
  --ink-grp:#E6E6E6;--ink-lbl:#00FFFF;--ink-akzent:#FFFF00;--ink-akzent-tx:#FFFF00;--ink-chip-rand:rgba(255,255,255,.3);
  --ink-ghost-rand:#FFFFFF;--ink-soft:#000000;--ink-soft-r:#00FFFF;--ink-knopf:#00FFFF;--ink-knopf-tx:#000000;
  --seg-an-bg:#FFFF00;--seg-an-tx:#000000;--side-an-schatten:inset 0 0 0 2px #00FFFF;
  --marke:#00FFFF;--waben:transparent;--punkt:#FFFF00;--fokus-ink:#FFFF00;
  color-scheme:dark;
}

/* Without JavaScript theme.js does not run (it is also what sets html.js), so the system preference
   applies through CSS: the dunkel and kontrast blocks once more for html:not(.js). The admin area
   is dark already. Test A16 keeps these copies identical to the blocks above. */
@media (prefers-color-scheme: dark){
  html:not(.js)[data-bereich="kunde"]{
    --bg:#0B0E18;--card:#141A2B;--card2:#1E2437;--line:#262E45;
    --tx:#FFFFFF;--tx2:#C3C8D8;--tx3:#9AA3B8;--platzhalter:#9AA3B8;
    --acc:#7C3AED;--acc-h:#6D28D9;--acc-tx:#FFFFFF;--lbl:#C4B5FD;--link:#C4B5FD;
    --soft:#1A1438;--soft-r:#3B2C78;--sel:#1A1438;--field:#0F1422;--field-r:#6B7390;
    --over:#C4B5FD;--over2:#7C3AED;--tab-on:#8B5CF6;--tag-on-tx:#FFFFFF;--seg-rand:#6B7390;
    --fokus:#C4B5FD;--schatten:0 1px 2px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.35);
    --ok-tx:#75E0A7;--warn-tx:#FEC84B;--err-tx:#FDA29B;
    --ok-bg:rgba(18,183,106,.12);--ok-rand:rgba(117,224,167,.35);--ok-chip:#75E0A7;
    --warn-bg:rgba(247,144,9,.12);--warn-rand:rgba(254,200,75,.35);--warn-chip:#FEC84B;
    --err-bg:rgba(240,68,56,.12);--err-rand:rgba(253,162,155,.35);--err-chip:#FDA29B;--err-note:#FECDCA;
    --v-bg:#1A1438;--v-rand:#3B2C78;--v-chip:#C4B5FD;
    --chip-ink-bg:#FFFFFF;--chip-ink-tx:#0B0E18;
    --av-bg:#E2D9F6;--av-tx:#231448;--av-d-bg:#25154D;--av-d-tx:#EDE6FF;--av-rand:transparent;
    --ink:#0B0E18;--ink-tief:#070A12;--ink-linie:#161C2B;--ink-rand:#262E45;--ink-karte:#141A2B;--ink-karte2:#1E2437;
    --ink-feld:#0F1422;--ink-feld-rand:#6B7390;--ink-tx:#FFFFFF;--ink-tx2:#C3C8D8;--ink-nav:#D5D8E4;--ink-tx3:#9AA3B8;--ink-platzhalter:#9AA3B8;
    --ink-grp:#717B95;--ink-lbl:#C4B5FD;--ink-akzent:#8B5CF6;--ink-akzent-tx:#A78BFA;--ink-chip-rand:#39415C;
    --ink-ghost-rand:#6B7390;--ink-soft:#1A1438;--ink-soft-r:#3B2C78;--ink-knopf:#7C3AED;--ink-knopf-tx:#FFFFFF;
    --seg-an-bg:#7C3AED;--seg-an-tx:#FFFFFF;--side-an-schatten:inset 3px 0 0 #8B5CF6;
    --marke:#8B5CF6;--waben:#8B5CF6;--punkt:#A78BFA;--fokus-ink:#C4B5FD;
    color-scheme:dark;
  }
}
@media (prefers-contrast: more){
  html:not(.js)[data-bereich]{
    --bg:#000000;--card:#000000;--card2:#000000;--line:rgba(255,255,255,.3);
    --tx:#FFFFFF;--tx2:#FFFFFF;--tx3:#E6E6E6;--platzhalter:#ABABAB;
    --acc:#00FFFF;--acc-h:#FFFF00;--acc-tx:#000000;--lbl:#00FFFF;--link:#00FFFF;
    --soft:#000000;--soft-r:#FFFF00;--sel:#000000;--field:#000000;--field-r:#FFFFFF;
    --over:#FFFF00;--over2:#000000;--tab-on:#FFFF00;--tag-on-tx:#00FFFF;--seg-rand:#FFFFFF;
    --fokus:#FFFF00;--schatten:none;
    --ok-tx:#FFFFFF;--warn-tx:#FFFF00;--err-tx:#FFFF00;
    --ok-bg:#000000;--ok-rand:#FFFFFF;--ok-chip:#FFFFFF;
    --warn-bg:#000000;--warn-rand:#FFFF00;--warn-chip:#FFFF00;
    --err-bg:#000000;--err-rand:#FFFF00;--err-chip:#FFFF00;--err-note:#FFFFFF;
    --v-bg:#000000;--v-rand:#00FFFF;--v-chip:#00FFFF;
    --chip-ink-bg:#FFFFFF;--chip-ink-tx:#000000;
    --av-bg:#000000;--av-tx:#FFFFFF;--av-d-bg:#000000;--av-d-tx:#FFFFFF;--av-rand:#FFFFFF;
    --ink:#000000;--ink-tief:#000000;--ink-linie:rgba(255,255,255,.3);--ink-rand:rgba(255,255,255,.3);--ink-karte:#000000;--ink-karte2:#000000;
    --ink-feld:#000000;--ink-feld-rand:#FFFFFF;--ink-tx:#FFFFFF;--ink-tx2:#FFFFFF;--ink-nav:#FFFFFF;--ink-tx3:#E6E6E6;--ink-platzhalter:#ABABAB;
    --ink-grp:#E6E6E6;--ink-lbl:#00FFFF;--ink-akzent:#FFFF00;--ink-akzent-tx:#FFFF00;--ink-chip-rand:rgba(255,255,255,.3);
    --ink-ghost-rand:#FFFFFF;--ink-soft:#000000;--ink-soft-r:#00FFFF;--ink-knopf:#00FFFF;--ink-knopf-tx:#000000;
    --seg-an-bg:#FFFF00;--seg-an-tx:#000000;--side-an-schatten:inset 0 0 0 2px #00FFFF;
    --marke:#00FFFF;--waben:transparent;--punkt:#FFFF00;--fokus-ink:#FFFF00;
    color-scheme:dark;
  }
  html:not(.js) .lnk,html:not(.js) .rechtlich a{text-decoration:underline}
  html:not(.js) .waben{display:none}
}

/* 3  Base --------------------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;font-family:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;font-size:15px;line-height:1.55;color:var(--tx);background:var(--bg)}
a{color:var(--link);text-underline-offset:2px}
p{margin:0}
button,input,select,textarea{font:inherit}
svg{flex:none}
[hidden]{display:none !important}
html[data-theme="kontrast"] .lnk,
html[data-theme="kontrast"] .rechtlich a{text-decoration:underline}

/* Focus: one visible outline everywhere; dark areas switch to their own focus colour. */
:focus-visible{outline:3px solid var(--fokus-aktiv,var(--fokus));outline-offset:2px}
.top,.band,.side,.atop,.card.ink,.auth-band,.minimal-kopf{--fokus-aktiv:var(--fokus-ink)}
.menue-panel{--fokus-aktiv:var(--fokus)}
.in:focus-visible{outline-offset:1px;border-color:var(--acc)}

/* Visually hidden, still read by screen readers. */
.vh{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Skip link: first focusable element of every page. */
.skip{position:absolute;left:16px;top:12px;z-index:100;transform:translateY(-200%);background:var(--card);color:var(--tx);border:2px solid var(--fokus);border-radius:10px;padding:0 16px;min-height:44px;display:inline-flex;align-items:center;font-weight:600;text-decoration:none}
.skip:focus{transform:none}
main:focus{outline:none}

/* Elements only useful with JavaScript (theme switch); html.js is set by theme.js. */
html:not(.js) .nur-js{display:none !important}

/* 4  Type ---------------------------------------------------------------------------------------- */
.h1,.h2,.h3,.big,.num{font-family:'Space Grotesk','Segoe UI',system-ui,sans-serif;font-weight:700;letter-spacing:-.015em;margin:0}
.h1{font-size:42px;line-height:1.08}
.h2{font-size:28px;line-height:1.15}
.h3{font-size:20px;line-height:1.25}
.big{font-size:36px;line-height:1}
.h4{font-weight:600;font-size:16px;margin:0}
.lbl{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--lbl)}
.mono{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-size:13px}
.muted{color:var(--tx2)}
.faint{color:var(--tx3);font-size:13px}
.sm{font-size:14px}
.lead{font-size:18px}
.fett{font-weight:600}
.zentriert{text-align:center}
.ok-tx{color:var(--ok-tx)}
.warn-tx{color:var(--warn-tx)}
.err-tx{color:var(--err-tx)}
.mt6{margin-top:6px}
.mt8{margin-top:8px}

/* 5  Layout -------------------------------------------------------------------------------------- */
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row.eng{gap:10px}
.between{justify-content:space-between}
.unten{align-items:flex-end}
.col{display:flex;flex-direction:column;gap:12px}
.col.eng{gap:6px}
.g{display:grid;gap:20px}
.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.c12{grid-template-columns:repeat(12,minmax(0,1fr))}
.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:span 12}
.sep{height:1px;background:var(--line);margin:16px 0;border:0}
.grow{flex:1 1 auto;min-width:0}
.main2{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.main2>.m{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:20px}
.main2>.s{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:20px}
.seite-inhalt{padding-top:28px;padding-bottom:48px;display:flex;flex-direction:column;gap:20px}

/* 6  Customer header ----------------------------------------------------------------------------- */
.top{background:var(--ink);color:var(--ink-tx);border-bottom:1px solid var(--ink-linie)}
.top .bar1{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink-tx);text-decoration:none;min-height:44px}
.brand b{font-family:'Space Grotesk',sans-serif;font-size:20px;letter-spacing:-.01em}
.brand .lbl{color:var(--ink-lbl)}
.brand svg path{fill:none;stroke:var(--marke);stroke-width:3.2;stroke-linejoin:round}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{color:var(--ink-nav);text-decoration:none;padding:0 14px;min-height:44px;display:inline-flex;align-items:center;font-size:14px;font-weight:500;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink-tx)}
.nav a[aria-current="page"]{color:var(--ink-tx);border-bottom-color:var(--ink-akzent)}
.ibtn{width:44px;height:44px;border-radius:10px;border:1px solid var(--ink-rand);background:transparent;color:var(--ink-tx2);display:inline-grid;place-items:center;position:relative;cursor:pointer}
.ibtn .dotb{position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--punkt);box-shadow:0 0 0 2px var(--ink)}
.av{width:36px;height:36px;border-radius:50%;background:var(--av-bg);color:var(--av-tx);box-shadow:inset 0 0 0 1px var(--av-rand);display:inline-grid;place-items:center;font-weight:600;font-size:13px;flex:none}
.av.d{background:var(--av-d-bg);color:var(--av-d-tx)}

/* Theme switch: on a page surface by default, inside the dark header and admin top bar ink-coloured. */
.seg{display:inline-flex;border:1px solid var(--seg-rand);border-radius:10px;overflow:hidden}
.seg button{background:transparent;border:0;color:var(--tx2);font-size:13px;padding:0 12px;min-height:44px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--tx);color:var(--bg)}
/* The focus ring sits inside the button; on the pressed (filled) button it takes the button's own
   text colour, so it keeps the text contrast against the fill (>= 4.5:1) in every theme. */
.seg button:focus-visible{outline-offset:-3px}
.seg button[aria-pressed="true"]:focus-visible{outline-color:currentColor}
.top .seg,.atop .seg{border-color:var(--ink-ghost-rand)}
.top .seg button,.atop .seg button{color:var(--ink-tx2)}
.top .seg button[aria-pressed="true"],.atop .seg button[aria-pressed="true"]{background:var(--seg-an-bg);color:var(--seg-an-tx)}

/* Account menu: a button that opens a panel (portal.js); without JavaScript the panel is shown in place. */
.menue{position:relative}
.konto-knopf{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 6px;background:transparent;border:0;border-radius:10px;color:inherit;cursor:pointer;text-align:left}
.konto-knopf .pfeil{color:var(--ink-tx3)}
/* As wide as its longest line, but never wider than a phone screen: a long address wraps instead
   of pushing the panel's left edge off the screen (break-word keeps the wider panel elsewhere). */
.menue-panel{margin-top:8px;min-width:250px;max-width:calc(100vw - 32px);background:var(--card);color:var(--tx);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:var(--schatten);display:flex;flex-direction:column;gap:2px}
.js .menue-panel{position:absolute;right:0;top:100%;z-index:30}
.js .menue-panel:not(.offen){display:none}
.menue-kopf{padding:8px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;display:flex;flex-direction:column;gap:2px;overflow-wrap:break-word}
.menue-panel a,.menue-panel button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--tx);text-decoration:none;text-align:left;font-size:14px;font-weight:500;cursor:pointer}
.menue-panel a:hover,.menue-panel button:hover{background:var(--sel)}
.menue-panel form{margin:0}

/* 7  Bands and honeycomb ------------------------------------------------------------------------- */
.band{position:relative;background:var(--ink);color:var(--ink-tx);overflow:hidden}
.band>*{position:relative}
.band>.waben{position:absolute}
.waben{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.waben path{fill:none;stroke:var(--waben);stroke-opacity:.6;stroke-width:1}
html[data-theme="kontrast"] .waben{display:none}
.band .muted{color:var(--ink-tx2)}
.band .faint{color:var(--ink-tx3)}
.band .lbl{color:var(--ink-lbl)}
.band a:not(.btn):not(.brand){color:var(--ink-lbl)}
.akzent-tx{color:var(--ink-akzent-tx)}
.gruss{padding:40px 0 44px}
.gruss-inhalt{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-end;justify-content:space-between}
.gruss-text{display:flex;flex-direction:column;gap:14px;flex:1 1 520px}

/* 8  Cards --------------------------------------------------------------------------------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;min-width:0}
.card.soft{background:var(--soft);border-color:var(--soft-r)}
.card.stone{background:var(--card2)}
.card.ink{background:var(--ink);border-color:var(--ink-rand);color:var(--ink-tx)}
.card.ink .muted{color:var(--ink-tx2)}.card.ink .faint{color:var(--ink-tx3)}.card.ink .lbl{color:var(--ink-lbl)}
.card.edge{border-top:3px solid var(--acc)}
.card.edge2{border-top:3px solid var(--tx)}
.card.stapel{display:flex;flex-direction:column;gap:14px}
.ch{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.ch .t{display:flex;align-items:center;gap:10px}
.ico{width:36px;height:36px;border-radius:10px;background:var(--soft);color:var(--lbl);display:inline-grid;place-items:center;flex:none}
.lnk{color:var(--link);font-weight:600;text-decoration:none;font-size:14px;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.lnk:hover{text-decoration:underline}

/* 9  Buttons ------------------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:10px;background:var(--acc);color:var(--acc-tx);font-weight:600;font-size:15px;border:1px solid transparent;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--acc-h)}
.btn.ghost{background:transparent;color:var(--tx);border-color:var(--field-r)}
.btn.ghost:hover{background:var(--sel)}
.btn.white{background:#FFFFFF;color:#10141F}
.btn.dark{background:var(--tx);color:var(--bg)}
.btn.danger{background:transparent;color:var(--err-tx);border-color:var(--err-tx)}
.btn.small{padding:0 14px;font-size:14px}
.btn.wide{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.band .btn.ghost,.top .btn.ghost,.card.ink .btn.ghost{color:var(--ink-tx);border-color:var(--ink-ghost-rand)}
.band .btn.ghost:hover,.top .btn.ghost:hover,.card.ink .btn.ghost:hover{background:var(--ink-karte2)}

/* 10 Chips and tags ------------------------------------------------------------------------------ */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--tx2);font-weight:500;white-space:nowrap;line-height:1.5}
.chip.ok{background:var(--ok-bg);border-color:var(--ok-rand);color:var(--ok-chip)}
.chip.warn{background:var(--warn-bg);border-color:var(--warn-rand);color:var(--warn-chip)}
.chip.err{background:var(--err-bg);border-color:var(--err-rand);color:var(--err-chip)}
.chip.v{background:var(--v-bg);border-color:var(--v-rand);color:var(--v-chip)}
.chip.ink{background:var(--chip-ink-bg);border-color:var(--chip-ink-bg);color:var(--chip-ink-tx)}
.band .chip,.top .chip,.card.ink .chip{border-color:var(--ink-chip-rand);color:var(--ink-tx2)}
.band .chip.v,.top .chip.v{background:var(--ink-soft);border-color:var(--ink-soft-r);color:var(--ink-lbl)}
.tag{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font-size:14px;font-weight:500;color:var(--tx);cursor:pointer}
.tag.on,.tag[aria-pressed="true"],.tag[aria-current="page"]{border-color:var(--acc);background:var(--sel);color:var(--tag-on-tx);font-weight:600}

/* 11 Meter --------------------------------------------------------------------------------------- */
.bar{height:12px;border-radius:99px;background:var(--card2);overflow:hidden;display:flex}
.bar i{display:block;height:100%;background:var(--acc)}
.bar i.over{background:repeating-linear-gradient(135deg,var(--over) 0 5px,var(--over2) 5px 10px)}
.bar i.warn{background:#DC6803}
.bar.thin{height:8px}

/* 12 Tables -------------------------------------------------------------------------------------- */
.scroll{overflow-x:auto;width:100%}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);font-weight:500;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .r{text-align:right}
.tbl td.r{font-variant-numeric:tabular-nums}

/* 13 Forms --------------------------------------------------------------------------------------- */
.formular{display:flex;flex-direction:column;gap:20px}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f label,.flbl{font-weight:600;font-size:14px}
.f .opt-l{font-weight:400;color:var(--tx3)}
.f-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.in{min-height:46px;border:1px solid var(--field-r);border-radius:10px;background:var(--field);padding:0 14px;color:var(--tx);width:100%}
.in::placeholder{color:var(--platzhalter);opacity:1}
.in[aria-invalid="true"]{border:2px solid var(--err-tx)}
.in[readonly]{background:var(--card2)}
textarea.in{padding:12px 14px;min-height:100px;resize:vertical}
select.in{appearance:auto}
.hint{font-size:13px;color:var(--tx3)}
.feld-fehler{display:flex;gap:6px;align-items:flex-start;font-size:13px;font-weight:600;color:var(--err-tx)}
.feld-fehler svg{margin-top:1px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--acc);flex:none}
.check-feld{display:flex;flex-direction:column;gap:6px}
.check-feld .hint,.check-feld .feld-fehler{padding-left:32px}
fieldset.gruppe{border:0;padding:0;margin:0;min-width:0;display:flex;flex-direction:column;gap:14px}
fieldset.gruppe>legend{padding:0;margin-bottom:14px}
.pw{height:6px;border-radius:9px;background:var(--card2);display:flex;gap:4px;overflow:hidden}
.pw i{flex:1;background:var(--card2)}
.pw i.on{background:var(--ok-tx)}
.oder{display:flex;align-items:center;gap:12px;color:var(--tx3);font-size:13px}
.oder::before,.oder::after{content:"";flex:1;height:1px;background:var(--line)}

/* Error summary at the top of a form */
.fehlerliste{border:2px solid var(--err-tx);background:var(--err-bg);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;color:var(--tx)}
.fehlerliste h2{display:flex;gap:8px;align-items:center;margin:0;font-size:15px;font-weight:600;color:var(--err-note)}
.fehlerliste h2:focus{outline:none}
.fehlerliste h2:focus-visible{outline:3px solid var(--fokus);outline-offset:2px}
.fehlerliste ul{margin:0;padding-left:28px;display:flex;flex-direction:column;gap:0}
.fehlerliste a{color:var(--err-note);font-weight:600;min-height:44px;display:inline-flex;align-items:center}

/* 14 Selectable option cards --------------------------------------------------------------------- */
.opt{border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--card);display:flex;gap:12px;align-items:flex-start;cursor:pointer;text-align:left;color:inherit;width:100%;min-height:44px}
.opt.on{border-color:var(--acc);background:var(--sel);box-shadow:inset 0 0 0 1px var(--acc)}
.radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--field-r);flex:none;margin-top:2px;display:grid;place-items:center}
.opt.on .radio{border-color:var(--acc)}
.opt.on .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--acc)}

/* 15 Stepper ------------------------------------------------------------------------------------- */
.steps{display:flex;align-items:flex-start;overflow-x:auto;padding-bottom:4px}
.step{flex:1 0 110px;display:flex;flex-direction:column;gap:8px;position:relative;padding-right:8px}
.step .dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);background:var(--card);display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--tx3);position:relative;z-index:1}
.step.done .dot{background:var(--acc);border-color:var(--acc);color:var(--acc-tx)}
.step.now .dot{border-color:var(--acc);color:var(--lbl);box-shadow:0 0 0 5px var(--soft)}
.step:not(:last-child)::after{content:"";position:absolute;top:13px;left:30px;right:2px;height:2px;background:var(--line)}
.step.done:not(:last-child)::after{background:var(--acc)}
.step .t{font-size:13px;font-weight:600;line-height:1.3}
.step .s{font-size:12px;color:var(--tx3);line-height:1.3}

/* 16 Misc ---------------------------------------------------------------------------------------- */
.slot{min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--card);font-weight:600;font-size:14px;cursor:pointer;color:var(--tx);width:100%}
.slot.on{background:var(--acc);color:var(--acc-tx);border-color:var(--acc)}
.slot.off{background:transparent;color:var(--tx3);border-style:dashed;font-weight:400;cursor:default;text-decoration:line-through}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px;font-size:14px;margin:0}
.kv dt{color:var(--tx3)}
.kv dd{margin:0;font-weight:500}
.list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.li{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.li:last-child{border-bottom:0}
.thumb{width:72px;height:56px;border-radius:8px;background:var(--card2);border:1px solid var(--line);display:grid;place-items:center;color:var(--tx3);flex:none}
.drop{border:1.5px dashed var(--field-r);border-radius:12px;padding:22px;text-align:center;background:var(--field)}
.note{border-radius:12px;padding:14px 16px;font-size:14px;display:flex;gap:12px;align-items:flex-start}
.note.klein{font-size:13px}
.note svg{margin-top:1px}
.note.v{background:var(--soft);border:1px solid var(--soft-r)}
.note.v svg{color:var(--lbl)}
.note.ok{background:var(--ok-bg);border:1px solid var(--ok-rand);color:var(--ok-chip)}
.note.warn{background:var(--warn-bg);border:1px solid var(--warn-rand);color:var(--warn-chip)}
.note.err{background:var(--err-bg);border:1px solid var(--err-rand);color:var(--err-note)}
.note a{color:inherit;font-weight:600}
.msg{border-radius:12px;padding:12px 14px;font-size:14px;max-width:82%}
.msg.them{background:var(--card2)}
.msg.me{background:var(--soft);border:1px solid var(--soft-r);margin-left:auto}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabs button,.tabs a{background:transparent;border:0;border-bottom:2px solid transparent;font-weight:600;font-size:14px;color:var(--tx2);padding:0 14px;min-height:46px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.tabs .on,.tabs [aria-current="page"],.tabs [aria-selected="true"]{color:var(--tx);border-bottom-color:var(--tab-on)}
.tabs a:focus-visible,.tabs button:focus-visible{outline-offset:-3px}
.qr{width:132px;height:132px;flex:none;background:#FFFFFF;border:1px solid var(--line);border-radius:8px;padding:8px}

/* 17 Footer and legal links ---------------------------------------------------------------------- */
.fuss{border-top:1px solid var(--line)}
.fuss-inhalt{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 18px;padding-top:18px;padding-bottom:22px;font-size:13px}
.rechtlich{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 20px;font-size:13px}
.rechtlich a{color:var(--tx2);min-height:44px;display:inline-flex;align-items:center}
.fuss .rechtlich{justify-content:flex-start;gap:0 18px}

/* 18 Split screen for login, registration and second factor (Main.dc.html) ---------------------- */
.auth{display:flex;flex-wrap:wrap;min-height:100vh}
.auth-band{flex:1 1 520px;display:flex;flex-direction:column;justify-content:space-between;padding:40px 56px;gap:48px}
.auth-claim{max-width:520px;display:flex;flex-direction:column;gap:22px}
.auth-claim .h1{font-size:52px}
.auth-merkmale{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:8px 0 0;padding:0;list-style:none}
.auth-merkmal{background:var(--ink-karte);border:1px solid var(--ink-rand);border-radius:14px;padding:16px}
.auth-merkmal p{margin-top:6px;font-size:14px;color:var(--ink-tx2)}
.auth-fuss{font-size:13px;color:var(--ink-tx3)}
.auth-seite{flex:1 1 520px;display:flex;flex-direction:column;padding:28px 56px 32px;gap:24px;min-width:0}
.auth-mitte{flex:1;display:flex;align-items:center;justify-content:center}
.auth-karte{width:100%;max-width:460px;padding:32px;display:flex;flex-direction:column;gap:20px;box-shadow:var(--schatten);overflow-wrap:anywhere}
.auth-karte.breit{max-width:720px}

/* 19 Minimal pages (errors, maintenance, links from mails) --------------------------------------- */
.minimal-kopf{background:var(--ink);border-bottom:1px solid var(--ink-linie)}
.minimal-kopf .wrap{display:flex;align-items:center;min-height:68px}
.minimal{display:flex;justify-content:center;padding:48px 16px 64px}
.minimal-karte{width:100%;max-width:560px;padding:32px;display:flex;flex-direction:column;gap:16px;overflow-wrap:anywhere}

/* 20 Admin shell --------------------------------------------------------------------------------- */
.shell{display:flex;flex-wrap:wrap;min-height:100vh;align-items:stretch}
.side{flex:1 1 240px;background:var(--ink-tief);color:var(--ink-tx);border-right:1px solid var(--ink-linie);padding:20px 14px;display:flex;flex-direction:column;gap:2px}
.side .brand{padding:4px 10px 18px}
.side-nav{display:flex;flex-direction:column;gap:2px}
.side .grp{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-grp);padding:16px 12px 6px;margin:0}
.side a.it{display:flex;align-items:center;gap:12px;color:var(--ink-tx2);text-decoration:none;padding:0 12px;border-radius:10px;font-size:14px;font-weight:500;min-height:44px}
.side a.it:hover{color:var(--ink-tx)}
.side a.it[aria-current="page"]{background:var(--ink-soft);color:var(--ink-tx);box-shadow:var(--side-an-schatten)}
.side a.it .n{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:11px;background:var(--ink-rand);color:var(--ink-tx);border-radius:99px;padding:1px 8px}
.side a.it[aria-current="page"] .n{background:var(--ink-knopf);color:var(--ink-knopf-tx)}
.side .platz{flex:1;min-height:24px}
.side-konto{border-top:1px solid var(--ink-linie);margin-top:8px;padding-top:8px}
.side-konto .konto-knopf{width:100%;padding:6px 10px}
.konto-text{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.side-konto .rolle{font-size:12px;color:var(--ink-tx3)}
.side-konto .name{font-size:14px;font-weight:600;color:var(--ink-tx)}
.js .side .menue-panel{top:auto;bottom:100%;left:0;right:auto;margin:0 0 8px}
.content{flex:999 1 640px;min-width:0;display:flex;flex-direction:column}
.atop{display:flex;align-items:center;gap:12px;padding:14px 28px;border-bottom:1px solid var(--ink-linie);flex-wrap:wrap;background:var(--ink);color:var(--ink-tx)}
.search{flex:1 1 280px;min-height:44px;border:1px solid var(--ink-feld-rand);border-radius:10px;background:var(--ink-feld);display:flex;align-items:center;gap:10px;padding:0 14px;color:var(--ink-tx3);font-size:14px;margin:0}
.search:focus-within{outline:3px solid var(--fokus-ink);outline-offset:2px}
.search input{flex:1;min-width:0;min-height:42px;border:0;background:transparent;color:var(--ink-tx);font-size:14px;padding:0}
.search input::placeholder{color:var(--ink-platzhalter);opacity:1}
.search input:focus-visible{outline:none}
.kbd{font-family:'IBM Plex Mono',monospace;font-size:11px;border:1px solid var(--ink-chip-rand);border-radius:6px;padding:1px 6px;color:var(--ink-tx2);margin-left:auto}
.timer{display:inline-flex;align-items:center;gap:10px;background:var(--ink-soft);border:1px solid var(--ink-soft-r);border-radius:999px;padding:4px 4px 4px 14px;color:var(--ink-tx);font-size:14px;min-height:44px}
.timer b{font-family:'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums;font-size:16px}
.timer .live{width:8px;height:8px;border-radius:50%;background:#FDA29B;box-shadow:0 0 0 3px rgba(253,162,155,.2)}
.timer button{width:36px;height:36px;border-radius:50%;border:0;background:var(--ink-knopf);color:var(--ink-knopf-tx);display:grid;place-items:center;cursor:pointer}
.apage{padding:28px;display:flex;flex-direction:column;gap:22px}
.apage .h1{font-size:36px}
.kpi .big{font-size:32px}
.kan{display:grid;grid-template-columns:repeat(5,minmax(230px,1fr));gap:14px;overflow-x:auto;align-items:start}
.kcol{background:var(--field);border:1px solid var(--card2);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}
.kcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px;font-size:14px}
.kcard.sel{border-color:var(--tab-on);box-shadow:0 0 0 1px var(--tab-on)}
.cal{display:grid;grid-template-columns:56px repeat(7,minmax(110px,1fr));min-width:900px}
.cal .hd{padding:10px 8px;border-bottom:1px solid var(--line);font-size:13px;color:var(--tx2)}
.cal .hd b{display:block;font-family:'Space Grotesk',sans-serif;font-size:20px;color:var(--tx)}
.cal .hd.today b{color:var(--lbl)}
.cal .hrs{position:relative;height:600px;border-right:1px solid var(--card2)}
.cal .hrs span{position:absolute;right:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--tx3);transform:translateY(-7px)}
.cal .day{position:relative;height:600px;border-right:1px solid var(--card2);background-image:repeating-linear-gradient(to bottom,var(--card2) 0 1px,transparent 1px 60px)}
.cal .avail{position:absolute;left:0;right:0;background:rgba(124,58,237,.10);border-top:1px dashed var(--soft-r);border-bottom:1px dashed var(--soft-r)}
.cal .ev{position:absolute;left:6px;right:6px;border-radius:8px;padding:6px 8px;font-size:12px;line-height:1.35;background:var(--acc);color:var(--acc-tx);overflow:hidden}
.cal .ev.req{background:transparent;border:1.5px dashed var(--lbl);color:var(--tx)}
.cal .ev.busy{background:var(--line);color:var(--tx2)}
.cal .ev b{display:block;font-size:12.5px}
.chart{display:flex;align-items:flex-end;gap:14px;height:180px;padding-top:10px;position:relative}
.chart .c{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.chart .c i{display:block;width:100%;max-width:44px;border-radius:6px 6px 0 0;background:var(--soft-r)}
.chart .c i.cur{background:var(--acc)}
.chart .lim{position:absolute;left:0;right:0;border-top:2px dashed var(--tx3)}
.chart .lim span{position:absolute;right:0;top:-22px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--tx3);background:var(--card);padding:0 4px}
.editor{background:#FFFFFF;color:#10141F;border-radius:14px;border:1px solid var(--line);padding:40px 56px;font-size:17px;line-height:1.7}
.editor .blk{position:relative;border-radius:8px;padding:6px 10px;margin:0 -10px}
.editor .blk.on{box-shadow:inset 0 0 0 1.5px #8B5CF6;background:#FBFAFF}
.editor .tip{background:#EFE9FC;border:1px solid #D9CCF3;border-radius:12px;padding:16px 18px;font-size:15px}
.serp{background:#FFFFFF;border-radius:10px;padding:14px 16px;color:#202124;font-family:Arial,sans-serif}
.serp .u{font-size:12px;color:#4D5156}
.serp .t{font-size:18px;color:#1A0DAB;line-height:1.3;margin:2px 0}
.serp .d{font-size:13px;color:#4D5156;line-height:1.5}

/* 21 Narrow screens ------------------------------------------------------------------------------ */
@media (max-width:900px){
  .c2,.c3,.c4,.c12{grid-template-columns:minmax(0,1fr)}
  .s3,.s4,.s5,.s6,.s7,.s8,.s12{grid-column:auto}
  .wrap{padding:0 16px}
  .h1{font-size:32px}
  .auth-band{padding:28px 24px;gap:28px}
  .auth-seite{padding:24px 24px 28px}
  .apage{padding:20px 16px}
  .atop{padding:12px 16px}
  /* Avatar and arrow only (the name stays for screen readers): with the name the customer header
     row (brand, chip, theme switch, menu) wraps below about 745 px, e.g. on landscape phones. */
  .konto-knopf .konto-name{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:640px){
  .auth-band{padding:20px 16px;gap:20px}
  .auth-claim .h1{font-size:30px}
  .auth-claim .lead,.auth-merkmale{display:none}
  .auth-seite{padding:16px 16px 24px}
  .auth-karte{padding:22px}
  .minimal-karte{padding:22px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto !important;transition:none !important}}

/* 22 Registration, inbox and link pages (Unit B) ------------------------------------------------ */
.sep.eng{margin:0}
.tx{color:var(--tx)}
.selbst-start{align-self:flex-start}
.ico.gross{width:52px;height:52px;border-radius:14px}
.registrierung fieldset.gruppe{gap:18px}
.registrierung .g{gap:18px}
.plz-ort{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.zustimmungen{gap:14px}
/* A region switched by a checkbox (data-zeigt): hidden only with JavaScript, so it stays usable without. */
html.js .umschaltbar[data-zu]{display:none}
.code-feld .in{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-size:16px;letter-spacing:.08em}
.code-ok{display:flex;gap:6px;align-items:center}
.pw-staerke{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.pw i.on.schwach{background:var(--err-tx)}
.pw i.on.mittel{background:var(--warn-tx)}
/* Status colours on a hint (.hint comes later than .ok-tx and would win): the strength word and
   "Code gültig". */
.hint.ok-tx{color:var(--ok-tx)}
.hint.warn-tx{color:var(--warn-tx)}
.hint.err-tx{color:var(--err-tx)}
.reg-absenden{gap:16px}
/* Registrieren.dc.html: 26 px between the form's groups, a wider "Konto erstellen". */
.formular.registrierung{gap:26px}
.reg-absenden>.btn{padding:0 28px}
.spamschutz{display:flex;flex-direction:column;gap:8px;flex:1 1 280px;max-width:440px}
.spamschutz-zeile{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;padding:8px 14px;background:var(--field)}
.spamschutz-zeile svg{color:var(--tx2)}
.hcaptcha-box{min-height:78px}
/* "So geht's weiter" in the dark band of layout-auth (Registrieren.dc.html). */
.auth-schritte{display:flex;flex-direction:column;gap:16px}
.auth-schritte ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:18px}
.auth-schritte li{display:flex;gap:14px;align-items:flex-start;font-size:14px;color:var(--ink-tx2)}
.auth-schritte .num{font-size:26px;line-height:1;color:var(--ink-akzent-tx);width:24px;flex:none}
.auth-schritte b{color:var(--ink-tx)}
/* Phones: the band's lead is hidden there, so the steps stay (compact) - they say that the account
   exists only after the link click, for 24 hours, with two-factor protection. */
@media (max-width:640px){
  .auth-schritte{gap:10px}
  .auth-schritte ol{gap:10px}
  .auth-schritte li{gap:10px;font-size:13px}
  .auth-schritte .num{font-size:18px;width:14px}
}

/* 23 Login, second factor, passkeys and recovery codes (Unit C) --------------------------------- */
/* Shown only without JavaScript (passkeys need it); html.js is set by theme.js before paint. */
html.js .nur-ohne-js{display:none !important}
/* A form button that reads as a link ("Code erneut senden", "Abbrechen und abmelden"). */
.knopf-link{background:none;border:0;padding:0;min-height:44px;font:inherit;font-size:14px;font-weight:600;color:var(--link);cursor:pointer;text-decoration:none}
.knopf-link:hover:not(:disabled){text-decoration:underline}
.knopf-link:disabled{color:var(--tx3);cursor:default}
html[data-theme="kontrast"] .knopf-link:not(:disabled){text-decoration:underline}
@media (prefers-contrast:more){html:not(.js) .knopf-link:not(:disabled){text-decoration:underline}}
/* One input for the whole code (mockup: six boxes), large and monospaced. */
.code-eingabe .in{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-size:24px;letter-spacing:.25em;min-height:56px;text-align:center}
.methoden{list-style:none;margin:0;padding:0}
a.opt{text-decoration:none}
a.opt:hover b{text-decoration:underline}
.schmal{max-width:760px}
.schritte-liste{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.totp-qr{align-items:flex-start;gap:20px}
.schluessel{font-size:16px;letter-spacing:.06em;overflow-wrap:anywhere}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 32px;margin:0;padding-left:28px;font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-size:16px}
@media (max-width:640px){.codes{grid-template-columns:minmax(0,1fr)}}

/* 24 Account page (Unit D) ---------------------------------------------------------------------- */
.konto-kopf .h1{font-size:36px}
.konto-karte{padding:26px}
.konto-karte-kopf{margin-bottom:8px}
.konto-karte .formular{gap:16px}
.konto-speichern{justify-content:flex-end}
.konto-schmal{max-width:860px}
.konto-unter{margin:4px 0 0;font-size:14px;font-weight:600}
.konto-abstand{margin-top:6px}
.konto-aktionen{justify-content:flex-end}
.card.gefahr{border-color:var(--err-rand)}
/* Disclosure that works without JavaScript: <details class="aufklapp"><summary class="btn …">. */
.aufklapp>summary{list-style:none}
.aufklapp>summary::-webkit-details-marker{display:none}
.aufklapp>summary::marker{content:""}
.aufklapp[open]>summary{margin-bottom:12px}
.aufklapp>form+form{margin-top:12px}
/* Real checkboxes drawn as switches (Benachrichtigungen); the whole row is the label. */
.schalter-zeile{display:flex;align-items:center;gap:14px;width:100%;min-height:44px;cursor:pointer}
.schalter{appearance:none;-webkit-appearance:none;margin:0;width:46px;height:26px;border-radius:99px;background:var(--card2);border:1px solid var(--field-r);position:relative;flex:none;cursor:pointer}
.schalter::before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.schalter:checked{background:var(--acc);border-color:var(--acc)}
.schalter:checked::before{left:23px}
/* Hoher Kontrast: a white knob on the cyan track would be 1.25:1; black is 16.75:1. */
html[data-theme="kontrast"] .schalter:checked::before{background:#000000}
@media (prefers-contrast:more){html:not(.js) .schalter:checked::before{background:#000000}}
.schalter:disabled{opacity:.5;cursor:not-allowed}
.schalter-zeile:has(.schalter:disabled){cursor:default}
/* "Letzte Anmeldungen": time column and line */
.verlauf{align-items:flex-start}
.verlauf-zeit{flex:none;min-width:128px;color:var(--tx3)}
/* An e-mail address is one unbreakable word: inside the account cards' rows it breaks anywhere,
   so a long address cannot widen the page at 360 px (tables keep scrolling inside .scroll). */
.konto-karte .col,.konto-karte .kv dd{overflow-wrap:anywhere}
/* "darf Rechnungen sehen" in the team disclosures: a 44 px target (single-line labels only). */
.konto-karte .aufklapp .check{min-height:44px;align-items:center}
.konto-karte .aufklapp .check input{margin:0}
/* Spacing of Konto.dc.html: page 32/56 px with 22 px gaps; Persönliche Daten 28 px (fields 16 px,
   PLZ/Ort 12 px), Team and the side card of Sicherheit 24 px; the e-mail box is one row. */
.seite-inhalt.konto-seite{padding-top:32px;padding-bottom:56px;gap:22px}
.konto-karte.konto-profil{padding:28px;gap:18px}
.konto-profil .g{gap:16px}
.konto-profil .g.plz-ort{gap:12px}
.konto-karte.konto-team{padding:24px;gap:10px}
.konto-karte.konto-seitlich{padding:24px}
.konto-email{padding:18px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.konto-email>.aufklapp[open]{flex:1 1 100%}
@media (max-width:640px){
  .konto-kopf .h1{font-size:30px}
  .konto-karte,.konto-karte.konto-profil,.konto-karte.konto-team,.konto-karte.konto-seitlich{padding:20px}
  .verlauf{flex-direction:column;gap:2px}
}

/* 25 Dashboard widgets and the phone layout (Unit E) -------------------------------------------- */
/* Widget cards (Portal\Widgets) keep their own height in the 12-column grid; the card head sits
   directly in the stack, as in Dashboard.dc.html. */
.widgets{align-items:start}
.widgets .card.stapel>.ch{margin-bottom:0}
.widget-code{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.widget-code .f{width:100%;max-width:340px}
/* A label and its chip share a row while both fit; at 360 px "Wiederherstellungscodes" next to
   "10 von 10 übrig" does not, so the chip moves to a line of its own instead of covering the word. */
.widgets .li{flex-wrap:wrap;row-gap:4px}
/* "Konto aktiviert" band after the first login (Bestaetigen.dc.html): check mark, text, buttons. */
.band.aktiviert{border-radius:16px;padding:28px 32px}
.aktiviert-inhalt{gap:24px}
.aktiviert-text{display:flex;gap:18px;align-items:center;flex:1 1 360px;min-width:0}
.aktiviert-text .col{gap:4px;min-width:0}
.aktiviert-haken{width:52px;height:52px;border-radius:50%;background:var(--ink-knopf);color:var(--ink-knopf-tx);display:grid;place-items:center;flex:none}
/* Dashboard date line: the long form of Dashboard.dc.html, on phones the short one of Mobil.dc.html
   (display:none, so a screen reader hears only the one on screen). */
.datum-kurz{display:none}
/* Theme switch in the footer: only on phones, where the one-row header has no room for it. */
.fuss-modus{display:none;align-items:center;gap:12px;flex-wrap:wrap}
/* Phone bottom bar (Mobil.dc.html): the registry entries of the header navigation, icon above the
   label, the current one in the accent colour with a bar on top. Hidden above 640 px. */
.leiste{display:none}
.leiste-link{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:0 2px;border-radius:10px;color:var(--tx2);text-decoration:none;font-size:11px;line-height:1.3;text-align:center;cursor:pointer}
.leiste-link span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leiste-link[aria-current="page"],.leiste-link.aktiv{color:var(--lbl);font-weight:600}
.leiste-link[aria-current="page"]::before,.leiste-link.aktiv::before{content:"";position:absolute;top:-6px;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--tab-on)}
.leiste-link:focus-visible{outline-offset:-3px}
.leiste-mehr{position:relative;display:flex;flex-direction:column}
.leiste-mehr>summary{list-style:none}
.leiste-mehr>summary::-webkit-details-marker{display:none}
.leiste-mehr>summary::marker{content:""}
.leiste-panel{position:absolute;right:0;bottom:calc(100% + 12px);min-width:230px;margin:0;padding:6px;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--schatten);display:flex;flex-direction:column;gap:2px}
.leiste-panel a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:8px;color:var(--tx);text-decoration:none;font-size:14px;font-weight:500}
.leiste-panel a:hover{background:var(--sel)}
.leiste-panel a[aria-current="page"]{color:var(--lbl);font-weight:600;box-shadow:inset 3px 0 0 var(--tab-on)}
/* viewport-fit=cover (layout-kunde): keep the content out of a landscape notch at every width
   (landscape phones reach 932 px); without cover the insets are 0 and nothing changes. */
.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}
@media (max-width:900px){
  .wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
}
@media (max-width:640px){
  /* One header row as in Mobil.dc.html: brand (24 px hexagon, 18 px wordmark) and the account menu. */
  .kopf-nav,.top .brand .lbl,.top .bar1 .chip,.top .bar1 .seg,.datum-lang{display:none}
  .top .bar1{min-height:64px}
  .top .brand svg{width:24px;height:24px}
  .top .brand b{font-size:18px}
  .datum-kurz{display:inline}
  .fuss-modus{display:flex}
  .gruss{padding:22px 0 24px}
  .gruss-text{gap:12px}
  .gruss .h1{font-size:30px}
  .band.aktiviert{padding:22px 20px}
  .aktiviert-text{align-items:flex-start}
  /* Dashboard spacing of Mobil.dc.html: 16 px below the band, 14 px between cards, 16 px inside. */
  .gruss+.seite-inhalt{padding-top:16px;gap:14px}
  .widgets{gap:14px}
  .widgets>.card{padding:16px}
  /* The bar is 1 + 6 + 52 px plus its bottom padding: the mockup's 14 px, or the home indicator's
     inset where that is larger. The body keeps that much free; scroll-padding keeps an element
     that gets keyboard focus 8 px above the bar instead of behind it (WCAG 2.4.11). */
  .mit-leiste{padding-bottom:calc(59px + max(14px,env(safe-area-inset-bottom,0px)))}
  html:has(.mit-leiste){scroll-padding-bottom:calc(67px + max(14px,env(safe-area-inset-bottom,0px)))}
  .leiste{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--card);border-top:1px solid var(--line);padding:6px max(4px,env(safe-area-inset-right,0px)) max(14px,env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px))}
}

/* 26 Admin area: customers, access, read-only view, settings (Unit F) ---------------------------- */
.col.dicht{gap:0}
/* Banner of a read-only view: opaque (the warn tint over the page ground), stays at the top. */
.ansicht-banner{position:sticky;top:0;z-index:60;background:linear-gradient(var(--warn-bg),var(--warn-bg)),var(--bg);color:var(--warn-chip);border-bottom:1px solid var(--warn-rand);font-size:14px}
.ansicht-inhalt{display:flex;flex-wrap:wrap;gap:0 16px;align-items:center;justify-content:space-between;min-height:44px}
.ansicht-banner a{color:inherit;font-weight:600;text-decoration:underline;min-height:44px;display:inline-flex;align-items:center}
.ansicht-zusatz{font-size:13px}
.menue-hinweis{padding:4px 12px 8px;margin:0}
/* Customer list (Admin-Kunde.dc.html, left column) */
.kunden-suche{flex-wrap:nowrap}
.filter-tags{gap:6px}
.filter-tags .tag{text-decoration:none}
.kunde-link{text-decoration:none;color:inherit;padding:12px;border-radius:10px;border-bottom:0}
.kunde-link:hover{background:var(--sel)}
.kundenliste .list li{border-bottom:1px solid var(--line)}
.kundenliste .list li:last-child{border-bottom:0}
.seiten{margin-top:4px}
/* Customer page head */
.av.gross{width:56px;height:56px;font-size:18px}
.kunde-kopf-zeile{align-items:flex-start}
.kunde-name{flex-wrap:nowrap;gap:16px;align-items:flex-start;min-width:0}
.kunde-aktionen{align-items:flex-start}
.ansehen[open]{flex:1 1 280px;max-width:420px}
.code-gross{font-size:20px;letter-spacing:.08em;font-weight:600}
.notiz-text{overflow-wrap:anywhere}
.umbruch{overflow-wrap:anywhere;word-break:break-all}
/* "Zugriff verwalten": a row's disclosure takes the full width once open. */
.li.mit-aufklapp{flex-wrap:wrap;row-gap:8px}
.li.mit-aufklapp>details[open]{flex:1 1 100%}
.li.mit-aufklapp .voll{flex:1 1 100%}
.faktor-form{border-top:1px solid var(--line);padding-top:14px}
/* A person's name or address in a button, legend or row can be longer than a phone's card: the
   per-login buttons wrap, addresses break anywhere (otherwise the page scrolls sideways at 360 px). */
.zugriff form .btn{white-space:normal;text-align:center;padding-top:6px;padding-bottom:6px}
.einladungen .grow,.zugriff form .faint,.faktor-form legend{overflow-wrap:anywhere}
/* Spacing of Admin-Kunde.dc.html: head and cards 24 px, 16 px between the head's rows (the
   Übersicht's form keeps the account page's .konto-karte spacing). */
.card.kunde-kopf{padding:24px;gap:16px}
.kunde-kopf~.card:not(.konto-karte),.kunde-kopf~.g>.card{padding:24px}
/* "Person einladen" in the Logins card head: the open form takes the full width below the title. */
.ch.umbrechend{flex-wrap:wrap}
.ch>.einladen{text-align:right}
.ch>.einladen[open]{flex:1 1 100%;text-align:left}
.einladungen{margin-top:8px}
.zugang-aktionen{text-align:left}
.zugang-aktionen[open]{min-width:260px}
.klein-feld{width:auto;min-height:44px}
/* Global log filters */
.protokoll-filter{align-items:end}
.s4-ganz{grid-column:1/-1}
/* Task rows (cockpit "Zu erledigen", open data requests): long words and addresses break inside the
   text column; on a phone the button moves below the text instead of squeezing it. */
.li.aufgabe>.col.grow{overflow-wrap:anywhere}
.li.aufgabe>.btn,.li.aufgabe>form{margin-left:auto}
@media (max-width:640px){
  .card.kunde-kopf,.kunde-kopf~.card:not(.konto-karte),.kunde-kopf~.g>.card{padding:20px}
  .kunden-suche{flex-wrap:wrap}
  .kunde-name{flex-wrap:wrap}
  .li.aufgabe{flex-wrap:wrap;row-gap:8px}
  .li.aufgabe>.col.grow{flex:1 1 calc(100% - 140px)}
}

/* 18 Pass 2: shared partials (optionen, tags, dateien-feld, stufen, meter, geld-zeile) ----------- */
/* Choice cards and chips are real inputs: the input sits invisibly inside its label, the label is
   the target (44 px), the checked state is drawn with :has() (the server also sets .on). */
.opt-raster{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.opt-raster.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.opt-raster.s3{grid-template-columns:repeat(3,minmax(0,1fr))}
.opt-raster.s4{grid-template-columns:repeat(4,minmax(0,1fr))}
.opt,.tag{position:relative}
.opt>input,.tag>input{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0}
.opt:has(input:checked){border-color:var(--acc);background:var(--sel);box-shadow:inset 0 0 0 1px var(--acc)}
.opt:has(input:checked) .radio{border-color:var(--acc)}
.opt:has(input:checked) .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--acc)}
.opt:not(:has(input:checked)).on{border-color:var(--line);background:var(--card);box-shadow:none}
.opt:not(:has(input:checked)).on .radio::after{content:none}
.kasten{width:20px;height:20px;border-radius:5px;border:2px solid var(--field-r);flex:none;margin-top:2px;display:grid;place-items:center}
.opt:has(input:checked) .kasten{border-color:var(--acc);background:var(--acc)}
.opt:has(input:checked) .kasten::after{content:"";width:6px;height:10px;border:solid var(--acc-tx);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.opt:has(input:focus-visible),.tag:has(input:focus-visible){outline:3px solid var(--fokus);outline-offset:2px}
.opt.aus,.opt:has(input:disabled){opacity:.65;cursor:not-allowed}
.opt-text{gap:2px;min-width:0}
.opt-grund{font-style:italic}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag:has(input:checked){border-color:var(--acc);background:var(--sel);color:var(--tag-on-tx);font-weight:600}
.tag:not(:has(input:checked)).on{border-color:var(--line);background:var(--card);color:var(--tx);font-weight:500}
.datei-in{padding:10px 14px;min-height:46px}
.datei-fehler{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.datei-fehler li{display:flex;gap:6px;align-items:flex-start}
ol.steps{list-style:none;margin:0;padding:0 0 4px}
.steps.mini .step{flex-basis:70px}
.steps.mini .step .dot{width:20px;height:20px;font-size:11px}
.steps.mini .step:not(:last-child)::after{top:9px;left:22px}
.meter{display:flex;flex-direction:column;gap:8px}
.bar.gross{height:18px}
.meter-skala{position:relative;height:18px;font-size:12px;color:var(--tx3)}
.meter-skala span{position:absolute;top:0;white-space:nowrap}
.meter-skala .links{left:0}
.meter-skala .mitte{transform:translateX(-50%)}
.meter-skala .rechts{right:0}
.geld-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;padding:6px 0}
.geld-zeile .geld-label{display:flex;flex-direction:column;gap:2px;min-width:0}
.geld-zeile .betrag{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;font-weight:500}
.geld-zeile.summe{border-top:1px solid var(--line);margin-top:4px;padding-top:12px;font-weight:600}
.geld-zeile.summe .betrag{font-weight:700}
.geld-zeile.klein{font-size:13px}
.geld-zeile.faint{color:var(--tx3)}
.geld-unter{font-size:12px;font-weight:400}
/* The admin top bar's "Neu" menu (a <details>, works without JavaScript). */
.neu-menue{position:relative}
.neu-menue>summary{list-style:none}
.neu-menue>summary::-webkit-details-marker{display:none}
.neu-menue>summary::marker{content:""}
.neu-panel{--fokus-aktiv:var(--fokus);position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:220px;max-width:calc(100vw - 32px);background:var(--card);color:var(--tx);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:var(--schatten);display:flex;flex-direction:column;gap:2px}
.neu-panel a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;color:var(--tx);text-decoration:none;font-size:14px;font-weight:500}
.neu-panel a:hover{background:var(--sel)}
/* Dashboard band of Pass 2: action buttons and "Wartet auf dich" (the most urgent item); on phones
   the band item gives way to the list "Braucht dich" (Mobil.dc.html). */
.aktionen-band{margin-top:6px}
.wartet-band{flex:0 1 440px;display:flex;gap:16px;align-items:center;text-decoration:none;background:var(--soft);border:1px solid var(--soft-r);border-radius:16px;padding:20px 22px;color:var(--tx);min-height:44px}
.wartet-band .lbl{color:var(--lbl)}
.wartet-band .sm{color:var(--tx2)}
.wartet-band:hover b{text-decoration:underline}
.wartet-ico{width:44px;height:44px;border-radius:12px;background:var(--acc);color:var(--acc-tx);display:grid;place-items:center;flex:none}
.wartet-liste{display:none;flex-direction:column;gap:12px}
.wartet-karte{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;padding:16px}
.wartet-karte.warn{border-color:var(--warn-rand);background:var(--warn-bg)}
.wartet-karte .btn{align-self:flex-start}
@media (max-width:640px){
  .wartet-band{display:none}
  .wartet-liste{display:flex}
}
/* Dashboard widgets of Pass 2. */
.widget-problem{position:relative;overflow:hidden;display:flex;flex-direction:column}
.widget-problem>svg{position:absolute;right:-20px;bottom:-20px;pointer-events:none}
.widget-problem-inhalt{position:relative;display:flex;flex-direction:column;gap:14px;height:100%}
.widget-problem .h2{color:var(--ink-tx)}
.widget-problem .btn{align-self:flex-start}
.widget-nachricht{display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:inherit}
.widget-nachricht:hover b{text-decoration:underline}
.widgets .stapel>.btn.small{align-self:flex-start}
/* Cockpit of Pass 2: tiles, the request forms in "Zu erledigen", the day panel, quota bars. */
.cockpit-kacheln{margin-bottom:20px}
.cockpit-kacheln .big{margin-top:8px}
.cockpit-ablehnen{position:relative}
.cockpit-ablehnen[open]{flex-basis:100%}
.cockpit-termin{flex-wrap:nowrap;gap:14px;align-items:flex-start}
.cockpit-termin .mono{width:48px;flex:none;color:var(--tx3)}
.cockpit-termin.vorbei{opacity:.65}
.cockpit-kontingent{text-decoration:none;color:inherit;gap:6px}
.cockpit-kontingent:hover b{text-decoration:underline}
select.in.klein{min-height:44px;width:auto}
/* Dashboard card "Aufträge & Lieferzeit": one linked card per open order. */
.auftrag-kachel{display:flex;flex-direction:column;gap:10px;padding:16px;text-decoration:none;color:inherit}
.auftrag-kachel.warten{border-color:var(--warn-rand);background:var(--warn-bg)}
.auftrag-kachel:hover b{text-decoration:underline}
/* Dashboard: below 900 px a card with something waiting moves to the top (Pflichtenheft F070). */
@media (max-width:899px){
  .widgets>.dringend{order:-1}
}
@media (max-width:640px){
  .opt-raster.s2,.opt-raster.s3,.opt-raster.s4{grid-template-columns:minmax(0,1fr)}
  .neu-panel{right:auto;left:0}
}

/* 27 Pass 3, Unit W: the band "Hinweis von Emma" and the cards Rechnungen and Neuigkeiten (the
   cockpit's reminder form sits in .li.aufgabe like the other row forms). ----------------------- */
.hinweis-emma{display:flex;gap:10px;align-items:flex-start;flex-wrap:nowrap}
.hinweis-emma .chip{flex:none}
.hinweis-emma p{margin:0;flex:1 1 auto;min-width:0;overflow-wrap:anywhere;padding-top:2px}
.hinweis-emma .lnk{color:var(--ink-lbl)}
.hinweis-emma-zu{flex:none;margin:-10px -6px 0 0}
.hinweis-emma-zu .btn{min-width:44px;min-height:44px;padding:0;color:var(--ink-tx2);border-color:transparent;background:transparent;font-size:22px;line-height:1}
.hinweis-emma-zu .btn:hover{color:var(--ink-tx)}
.widget-rechnung-offen{align-items:flex-end}
.widget-rechnung-offen .big{line-height:1.1}
#widget-neuigkeiten .neuigkeit{text-decoration:none;color:inherit;align-items:flex-start}
#widget-neuigkeiten .neuigkeit:hover b{text-decoration:underline}
#widget-neuigkeiten .neuigkeit>.col{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
#widget-neuigkeiten .art-tipp .thumb{background:var(--ink);border-color:var(--ink-rand);color:var(--ink-lbl)}
#widget-neuigkeiten .art-ankuendigung .thumb{background:var(--soft);border-color:var(--soft-r);color:var(--lbl)}
/* Phones (Mobil.dc.html): the notice as a plain line next to the close button; the chip stays for
   screen readers only. */
@media (max-width:640px){
  .hinweis-emma .chip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .hinweis-emma p{font-size:14px}
}