/* Flaytex Web Host 2 – Designsystem.
   Farben, Abstände und Radien nur über Tokens. Dunkel ist Standard, hell über [data-theme="hell"]. */

/* ------------------------------------------------------------------ Schriften */
@font-face {
  font-family: "DM Sans Variable"; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url(../fonts/dm-sans.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans Variable"; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url(../fonts/dm-sans-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: "JetBrains Mono Variable"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url(../fonts/jetbrains-mono.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono Variable"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url(../fonts/jetbrains-mono-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: dark;
  --grund: #13100D;
  --grund-2: #171310;
  --flaeche: #1C1814;
  --flaeche-2: #241F1A;
  --flaeche-3: #2E2822;
  --linie: rgba(247, 242, 236, .08);
  --linie-stark: rgba(247, 242, 236, .16);
  --text: #F7F2EC;
  --text-2: rgba(247, 242, 236, .68);
  --text-3: rgba(247, 242, 236, .52);
  --akzent: #FC7F03;
  --akzent-hover: #FF9631;
  --akzent-text: #FF9F45;
  --akzent-weich: rgba(252, 127, 3, .12);
  --akzent-glanz: rgba(252, 127, 3, .28);
  --auf-akzent: #13100D;
  --ok: #8CCB97;      --ok-weich: rgba(140, 203, 151, .12);
  --warn: #E6B657;    --warn-weich: rgba(230, 182, 87, .12);
  --fehler: #F08A7B;  --fehler-weich: rgba(240, 138, 123, .12);
  --info: #9DB7E0;    --info-weich: rgba(157, 183, 224, .12);
  --schatten-gross: 0 24px 80px -16px rgba(0, 0, 0, .75);
  --r: 8px;
  --raster-punkt: rgba(247, 242, 236, .07);
  --abstand: 24px;
  --schrift: "DM Sans Variable", "DM Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, Menlo, monospace;
  --leiste: 264px;
  --cm-schluessel: #FF9F45; --cm-text: #8CCB97; --cm-zahl: #E6B657; --cm-kommentar: rgba(247, 242, 236, .56);
  --cm-tag: #9DB7E0; --cm-attribut: #E8C08A;
  --tempo: 180ms cubic-bezier(.2, .7, .2, 1);
}

:root[data-theme="hell"] {
  color-scheme: light;
  --grund: #F5F0E9;
  --grund-2: #EFE8DF;
  --flaeche: #FFFFFF;
  --flaeche-2: #F7F2EC;
  --flaeche-3: #EDE5DB;
  --linie: rgba(28, 24, 20, .09);
  --linie-stark: rgba(28, 24, 20, .18);
  --text: #1C1814;
  --text-2: rgba(28, 24, 20, .68);
  --text-3: rgba(28, 24, 20, .62);
  --akzent: #F27500;
  --akzent-hover: #DB6800;
  --akzent-text: #9E4800;
  --akzent-weich: rgba(242, 117, 0, .10);
  --akzent-glanz: rgba(242, 117, 0, .22);
  --auf-akzent: #1C1814;
  --ok: #2F7D46;      --ok-weich: rgba(47, 125, 70, .10);
  --warn: #9A6400;    --warn-weich: rgba(154, 100, 0, .10);
  --fehler: #B83A28;  --fehler-weich: rgba(184, 58, 40, .09);
  --info: #3C64A0;    --info-weich: rgba(60, 100, 160, .10);
  --schatten-gross: 0 24px 64px -16px rgba(28, 24, 20, .30);
  --raster-punkt: rgba(28, 24, 20, .10);
  --cm-schluessel: #9E4800; --cm-text: #2B6E3E; --cm-zahl: #7E5200; --cm-kommentar: rgba(28, 24, 20, .64);
  --cm-tag: #345A92; --cm-attribut: #7A4A12;
}

/* ------------------------------------------------------------------ Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Hintergrund: feines Punktraster auf allen Seiten, Flächen liegen ruhig darauf */
body {
  margin: 0; min-height: 100dvh;
  background-color: var(--grund); color: var(--text);
  background-image: radial-gradient(circle at 1px 1px, var(--raster-punkt) 1px, transparent 1.5px);
  background-size: 24px 24px; background-attachment: fixed;
  font: 400 16px/1.55 var(--schrift);
  -webkit-font-smoothing: antialiased; font-feature-settings: "ss01";
}
a { color: var(--akzent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -.015em; font-weight: 650; text-wrap: balance; }
h1 { font-size: 1.75rem; letter-spacing: -.025em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0; text-wrap: pretty; }
code, .mono { font-family: var(--mono); font-size: .92em; }
::selection { background: var(--akzent-glanz); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: var(--r); }
[hidden] { display: none !important; }
.versteckt { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.leise { color: var(--text-2); }
.blass { color: var(--text-3); }
.klein { font-size: .875rem; }

/* ------------------------------------------------------------------ Rahmen: Seitenleiste + Inhalt */
.rahmen { display: grid; grid-template-columns: var(--leiste) minmax(0, 1fr); min-height: 100dvh; }

.leiste {
  position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 6px;
  padding: 20px 14px 14px; background: var(--grund-2); border-right: 1px solid var(--linie);
  overflow-y: auto;
}
.marke { display: flex; align-items: center; gap: 11px; padding: 4px 10px 14px; color: var(--text); }
.marke:hover { text-decoration: none; }
.marke img { width: 30px; height: 30px; border-radius: var(--r); }
.marke-text { display: grid; line-height: 1.05; }
.marke-text b { font-size: 1.02rem; font-weight: 750; letter-spacing: .14em; }
.marke-text span { font-size: .66rem; font-weight: 600; letter-spacing: .32em; color: var(--akzent-text); text-transform: uppercase; margin-top: 3px; }

.nav-gruppe { margin: 10px 0 2px; padding: 0 12px; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.nav-punkt {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--r);
  color: var(--text-2); font-weight: 500; transition: background var(--tempo), color var(--tempo);
}
.nav-punkt:hover { background: var(--flaeche); color: var(--text); text-decoration: none; }
.nav-punkt.aktiv { background: var(--akzent-weich); color: var(--text); }
.nav-punkt.aktiv .icon { color: var(--akzent-text); }
/* Noch nicht gebaute Bereiche: gedämpft, ohne Etikett */
.nav-punkt.gedaempft { color: var(--text-3); }

.leiste-fuss { margin-top: auto; display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--linie); }
.thema-wahl { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; gap: 2px; border-radius: var(--r); background: var(--flaeche); border: 1px solid var(--linie); }
.thema-wahl button { display: grid; place-items: center; min-height: 38px; border: 0; border-radius: 6px; background: none; color: var(--text-3); cursor: pointer; transition: background var(--tempo), color var(--tempo); }
.thema-wahl button:hover { color: var(--text); }
.thema-wahl button[aria-pressed="true"] { background: var(--flaeche-3); color: var(--text); }
.thema-wahl .icon { width: 16px; height: 16px; }
.server-karte { display: flex; align-items: center; gap: 10px; padding: 8px 2px 2px 10px; }
.server-karte div { min-width: 0; flex: 1; line-height: 1.3; }
.server-karte b { display: block; font-size: .86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.server-karte span { font-size: .78rem; color: var(--text-3); }
.server-karte .knopf { width: 44px; padding: 0; }

/* Inhalt: volle Breite, volle Höhe – die letzte Reihe füllt bis unten (.fuellen) */
.inhalt { min-width: 0; padding: var(--abstand) 32px; }
.innen { display: flex; flex-direction: column; gap: var(--abstand); min-height: calc(100dvh - 2 * var(--abstand)); max-width: 1680px; margin: 0 auto; }
.fuellen { flex: 1; min-height: 0; }
/* Feste Höhe (am PC): die Seite scrollt nicht, lange Listen scrollen in ihrer Fläche (.rollen) */
@media (min-width: 901px) {
  .innen.fest { height: calc(100dvh - 2 * var(--abstand)); min-height: 0; }
  .innen.fest > .raster-2.fuellen { grid-template-rows: minmax(0, 1fr); }
  .innen.fest .tafel.fuellen, .innen.fest .raster-2 > .tafel { min-height: 0; }
}
.rollen { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }

/* ------------------------------------------------------------------ Seitenkopf (jede Seite gleich) */
.seitenkopf { display: flex; align-items: center; justify-content: space-between; gap: 16px var(--abstand); min-height: 64px; }
.seitenkopf p { margin-top: 4px; color: var(--text-2); }
.seitenkopf .aktionen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.seitenkopf .aktionen form { display: contents; }

/* ------------------------------------------------------------------ Bausteine */
.raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand); }
@media (min-width: 901px) {
  .innen.fest > .raster-2.zwei-reihen { grid-template-rows: repeat(2, minmax(0, 1fr)); }
}
.zwei-reihen > .tafel { min-height: 0; }
.tafel-kopf .kopf-link { border: 0; background: none; padding: 0; font: inherit; font-size: .9rem; color: var(--akzent-text); cursor: pointer; position: relative; }
.tafel-kopf .kopf-link::after { content: ""; position: absolute; inset: -12px -6px; }
.tafel-kopf .kopf-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.raster-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--abstand); }
@media (min-width: 901px) {
  .innen.fest > .raster-4.fuellen { grid-template-rows: minmax(0, 1fr); }
}
/* Kachel in der Übersicht: Titel, großer Wert, ein Satz, wenige Zeilen */
.kachel { min-height: 0; overflow: hidden; }
.kachel-titel { color: inherit; }
.kachel .tafel-kopf form { display: contents; }
.kachel-wert { margin-top: 4px; font-size: 1.75rem; font-weight: 650; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kachel-wert.warn { color: var(--warn); }
.kachel-satz { margin: 4px 0 12px; color: var(--text-2); font-size: .9rem; min-height: 1.4em; }
.kachel .zeilen { border-top: 1px solid var(--linie); }
.kachel .zeile:first-child { border-top: 0; }
.kachel a.zeile-name { color: var(--text); }
.kachel a.zeile-name:hover { text-decoration: none; }
.kachel a.zeile-name:hover .mono, .kachel a.zeile-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.kachel a.zeile-wert { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -12px; color: var(--text-2); }
.kachel a.zeile-wert:hover { color: var(--text); }
.kachel .zeile.mehr { min-height: 44px; font-size: .9rem; }
.kachel .zeile-leer { font-size: .9rem; }
.dialog.breit-mittel { width: min(860px, calc(100vw - 32px)); }
.dialog-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 20px; }
.dialog-spalten .tafel-kopf { margin-bottom: 0; }
.dialog .tafel-kopf h2 { font-size: .9rem; letter-spacing: 0; }
.raster-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--abstand); }
.zustand { color: var(--text-2); font-size: .9rem; }
.zustand-fehler { color: var(--fehler) !important; font-weight: 600; }

/* Tafel: die eine Fläche auf dem Raster – kein Schatten, keine Kästen darin */
.tafel { display: flex; flex-direction: column; min-width: 0; padding: var(--abstand); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); }
.tafel-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 28px; margin-bottom: 8px; }
.tafel-kopf h2, .messwert h2 { font-size: .9rem; font-weight: 600; letter-spacing: 0; color: var(--text-2); }
.tafel-kopf a { font-size: .9rem; }
.tafel .mitte { flex: 1; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 32px 0; }
.tafel .mitte p { color: var(--text-2); }

/* Zeile: links Bezeichnung, rechts Wert oder Aktion – überall gleich */
.zeilen { list-style: none; margin: 0; padding: 0; }
.zeile { display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 4px 0; line-height: 1.3; border-top: 1px solid var(--linie); }
.zeilen > .zeile:first-child, .tafel-kopf + .zeile, .tafel-kopf + details > .zeile { border-top: 0; }
.zeile-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile-name small { display: block; color: var(--text-2); font-size: .86rem; overflow: hidden; text-overflow: ellipsis; }
.zeile-wert { min-width: 0; max-width: 68%; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zeile .knopf, .zeile form { flex: none; }
/* Gruppen in einer Tafel: gleicher Kopf wie die Tafel, eine Reihe Abstand dazwischen */
.gruppe + .gruppe { margin-top: var(--abstand); }
.zeile-leer { color: var(--text-2); padding: 14px 0; }
.tafel-fuss { margin-top: auto; padding-top: 12px; color: var(--text-2); font-size: .875rem; }

/* Knöpfe: orange (einmal pro Seite), umrandet, Textlink – eine Größe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: var(--r); border: 1px solid var(--linie-stark); background: transparent; color: var(--text);
  font: 600 .94rem/1 var(--schrift); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--tempo), border-color var(--tempo);
}
.knopf:hover { background: var(--flaeche-2); text-decoration: none; }
.knopf.primaer { background: var(--akzent); border-color: transparent; color: var(--auf-akzent); }
.knopf.primaer:hover { background: var(--akzent-hover); }
.knopf.geist { border-color: transparent; color: var(--text-2); }
.knopf.geist:hover { background: var(--flaeche-2); color: var(--text); }
.knopf.gefahr { border-color: color-mix(in srgb, var(--fehler) 50%, transparent); color: var(--fehler); }
.knopf.breit { width: 100%; }
.knopf .icon { width: 16px; height: 16px; }
.knopf[disabled] { opacity: .5; cursor: not-allowed; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* Aktion in einer Zeile oder Liste: ruhiger, unterstrichener Textlink in Textfarbe, 44 px Klickfläche */
.aktion {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0; background: none; flex: none;
  color: var(--text); font: 500 .94rem/1 var(--schrift); white-space: nowrap; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--linie-stark); text-decoration-thickness: 1px; text-underline-offset: 5px;
  transition: text-decoration-color var(--tempo);
}
.aktion:hover { text-decoration: underline; text-decoration-color: currentColor; }
.aktion.leise { color: var(--text-2); }
.textknopf { position: relative; border: 0; background: none; padding: 0; font: inherit; color: var(--akzent-text); cursor: pointer; }
.textknopf::after { content: ""; position: absolute; inset: -12px -6px; }
.textknopf:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Formulare */
.feld { display: grid; gap: 7px; }
.feld + .feld { margin-top: 14px; }
.feld label { font-size: .9rem; font-weight: 600; color: var(--text-2); }
.feld small { color: var(--text-2); font-size: .84rem; }
.eingabe {
  width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--r); border: 1px solid var(--linie-stark);
  background: var(--grund); color: var(--text); font: inherit; transition: border-color var(--tempo), box-shadow var(--tempo);
}
.eingabe:hover { border-color: var(--text-3); }
.eingabe:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-weich); }
.passwort-feld { position: relative; }
.passwort-feld .eingabe { padding-right: 52px; min-height: 48px; }
.passwort-feld button { position: absolute; right: 2px; top: 50%; width: 44px; height: 44px; transform: translateY(-50%); border: 0; border-radius: var(--r); background: none; color: var(--text-3); cursor: pointer; display: grid; place-items: center; }
.passwort-feld button:hover { color: var(--text); background: var(--flaeche-2); }
.formular-raster { display: grid; gap: 14px; max-width: 440px; padding: 8px 0 16px; }
details.ausklapp summary { cursor: pointer; list-style: none; }
details.ausklapp summary::-webkit-details-marker { display: none; }

/* Dialog: Titel, ein Satz, Felder, unten rechts Abbrechen + eine Hauptaktion */
.dialog {
  width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 28px; overflow: auto;
  border: 1px solid var(--linie-stark); border-radius: var(--r); background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-gross);
}
.dialog::backdrop { background: rgba(10, 8, 6, .62); }
.dialog h2 { font-size: 1.3rem; letter-spacing: -.02em; }
.dialog p { margin-top: 6px; color: var(--text-2); overflow-wrap: anywhere; }
.dialog p:empty { display: none; }
.dialog-felder { display: grid; gap: 18px; margin-top: 24px; }
.dialog-felder .feld + .feld { margin-top: 0; }
.dialog-fuss { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.umschalter { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; padding: 3px; border-radius: var(--r); background: var(--grund); border: 1px solid var(--linie-stark); }
.umschalter label { position: relative; }
.umschalter input { position: absolute; opacity: 0; inset: 0; }
.umschalter span { display: grid; place-items: center; min-height: 38px; border-radius: 6px; color: var(--text-2); font-weight: 600; cursor: pointer; transition: background var(--tempo), color var(--tempo); }
.umschalter input:checked + span { background: var(--flaeche-3); color: var(--text); }
.umschalter input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }
.haken { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--akzent); }
.haken input { width: 18px; height: 18px; margin: 0; }

/* Eingabe für 6-stellige Codes */
.code-eingabe {
  width: 100%; height: 64px; text-align: center; font: 600 1.9rem/1 var(--mono); letter-spacing: .5em; padding-left: .5em;
  border-radius: var(--r); border: 1px solid var(--linie-stark); background: var(--grund); color: var(--text);
  font-variant-numeric: tabular-nums; transition: border-color var(--tempo), box-shadow var(--tempo);
}
.code-eingabe::placeholder { color: var(--text-3); letter-spacing: .5em; }
.code-eingabe:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 5px var(--akzent-weich); }
.code-eingabe.notfall { letter-spacing: .12em; font-size: 1.3rem; padding-left: .12em; }

/* Code-Abfrage (Terminal, Bestätigen): mittig, gleiche Spalte wie die Anmeldung */
.code-abfrage { display: grid; justify-items: center; gap: 12px; width: min(360px, 100%); text-align: center; }
.code-abfrage h2 { font-size: 1.5rem; letter-spacing: -.025em; }
.code-abfrage p { color: var(--text-2); }
.code-abfrage form { width: 100%; display: grid; gap: 12px; margin: 8px 0 12px; }

/* Hinweis: Linie links statt farbiger Kasten */
.hinweis { padding: 4px 0 4px 14px; border-left: 2px solid var(--info); color: var(--text); font-size: .94rem; }
.hinweis.warn { border-left-color: var(--warn); }
.hinweis.fehler { border-left-color: var(--fehler); }
.hinweis .icon { display: none; }

/* Meldungen (Toasts) */
.toasts { position: fixed; z-index: 60; right: 20px; bottom: 20px; display: grid; gap: 10px; width: min(420px, calc(100vw - 32px)); }
.toast {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 14px 16px; border-radius: var(--r);
  background: var(--flaeche-2); border: 1px solid var(--linie-stark); box-shadow: var(--schatten-gross);
  animation: rein .32s cubic-bezier(.2, .8, .2, 1) both;
}
.toast > div { flex: 1; padding-top: 1px; }
.toast .icon { margin-top: 2px; }
.toast.ok .icon:first-child { color: var(--ok); }
.toast.warn .icon:first-child { color: var(--warn); }
.toast.fehler { border-color: color-mix(in srgb, var(--fehler) 40%, transparent); }
.toast.fehler .icon:first-child { color: var(--fehler); }
.toast button { border: 0; background: none; color: var(--text-3); cursor: pointer; padding: 2px; border-radius: var(--r); display: grid; }
.toast button:hover { color: var(--text); }
.toast.weg { animation: raus .25s ease-in both; }
@keyframes rein { from { opacity: 0; transform: translateY(12px); } }
@keyframes raus { to { opacity: 0; transform: translateY(8px); } }

/* ------------------------------------------------------------------ Anmeldung: eine Achse, Logo über dem Formular */
.anmeldung { display: grid; place-items: center; min-height: 100dvh; padding: 48px 20px; font-size: 17px; line-height: 1.6; }
.anmeldung .feld label { font-size: 15px; }
.anmeldung .knopf { font-size: 16px; }
.anmeldung .textknopf.klein, .anmeldung .anmeldung-fuss { font-size: 15px; }
.anmeldung-spalte { display: grid; justify-items: center; gap: 40px; width: min(360px, 100%); }
.anmeldung-spalte > .marke { padding: 0; }
.anmeldung-karte { width: 100%; text-align: center; }
.anmeldung-karte .feld { text-align: left; }
.anmeldung-karte .qr { margin: 0 auto 14px; }
.anmeldung-karte .ausklapp { margin-bottom: 20px; }
.anmeldung-karte .geheimnis { justify-content: center; margin-top: 10px; }
.anmeldung-karte .knopfreihe { justify-content: center; }
.anmeldung-karte h2 { font-size: 1.75rem; letter-spacing: -.025em; margin-bottom: 22px; }
.anmeldung-karte h2:has(+ p) { margin-bottom: 0; }
.anmeldung-karte > p { margin: 6px 0 22px; color: var(--text-2); }
.anmeldung-fuss { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 18px; row-gap: 8px; color: var(--text-2); }

.qr { width: 188px; height: 188px; padding: 10px; border-radius: var(--r); background: #fff; }
.qr svg { width: 100%; height: 100%; display: block; }
.qr svg path { fill: #13100D; }
.geheimnis { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.geheimnis code { padding: 6px 10px; border-radius: var(--r); background: var(--flaeche-2); font-size: .8rem; letter-spacing: .04em; word-break: break-all; }

.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 18px 0; padding: 18px; border-radius: var(--r); background: var(--flaeche); border: 1px solid var(--linie); }
.codes code { font-size: 1.02rem; text-align: center; padding: 6px; letter-spacing: .06em; }

/* ------------------------------------------------------------------ Übersicht */
/* Leistung: eine Tafel, vier gleiche Spalten mit Haarlinien dazwischen */
.leistung { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; }
.messwert { display: grid; align-content: start; gap: 4px; min-width: 0; padding: var(--abstand); border-left: 1px solid var(--linie); }
.messwert:first-child { border-left: 0; }
.messwert .wert { margin-top: 8px; font-size: 2rem; font-weight: 650; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.messwert .unter { color: var(--text-2); font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.messwert svg { display: block; width: 100%; height: 64px; margin-top: 14px; overflow: visible; }
.messwert polyline { fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.messwert polygon { fill: var(--text); opacity: .06; stroke: none; }
.messwert { position: relative; }
.messwert .skala { position: absolute; right: var(--abstand); top: calc(var(--abstand) + 3px); color: var(--text-3); font-size: .75rem; font-variant-numeric: tabular-nums; }
.messwert .grundlinie { stroke: var(--linie); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* ------------------------------------------------------------------ Terminal */
.terminal-rahmen { display: flex; min-height: 420px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--linie-stark); background: #13100D; }
.terminal-rahmen iframe { flex: 1; width: 100%; border: 0; background: #13100D; }
.terminal-rahmen:fullscreen { border-radius: 0; }

/* ------------------------------------------------------------------ Dateien */
/* Orte: sechs gleiche Felder mit Haarlinien – wie die Leistung auf der Übersicht */
.orte { display: grid; grid-template-columns: repeat(var(--spalten, 6), minmax(0, 1fr)); padding: 0; overflow: hidden; }
.orte a { display: grid; align-content: center; gap: 2px; min-width: 0; min-height: 64px; padding: 10px 20px; border-left: 1px solid var(--linie); color: var(--text); transition: background var(--tempo); }
.orte a:first-child { border-left: 0; }
.orte a:hover { background: var(--flaeche-2); text-decoration: none; }
.orte a.aktiv { background: var(--akzent-weich); }
.orte b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orte span { font-size: .84rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dateien { position: relative; }
.dateien-kopf { display: flex; align-items: center; gap: 16px; min-height: 44px; margin: -8px 0 8px; }
.krumen { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; overflow: hidden; white-space: nowrap; font-weight: 500; }
.krumen a, .krumen span { padding: 11px 4px; overflow: hidden; text-overflow: ellipsis; }
.krumen a { color: var(--text-2); flex: none; max-width: 40%; }
.krumen a:first-child { padding-left: 0; }
.krumen span { color: var(--text); }
.krumen i { font-style: normal; color: var(--text-3); }
.schutz { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text-2); font-size: .9rem; white-space: nowrap; }
.schutz .icon { width: 16px; height: 16px; }
a.schutz:hover { color: var(--text); }
.filter { width: 220px; flex: none; }
.auswahl-leiste { display: flex; align-items: center; gap: 4px 20px; flex-wrap: wrap; min-height: 44px; margin-bottom: 8px; padding: 0 12px; border-radius: var(--r); background: var(--flaeche-2); }
.auswahl-leiste > span { margin-right: auto; color: var(--text-2); }
.auswahl-leiste b { color: var(--text); font-variant-numeric: tabular-nums; }

/* Liste: eine Zeile = Auswahl | Name | Größe | Geändert | Rechte | … */
.dliste { margin: 0 -8px; padding: 0 8px; }
.dzeile { display: grid; grid-template-columns: 44px minmax(0, 1fr) 100px 170px 150px 44px; align-items: center; column-gap: 12px; min-height: 52px; border-top: 1px solid var(--linie); }
.dliste.korb .dzeile { grid-template-columns: minmax(0, 1fr) 100px 170px 260px; }
.dliste.ohne-rechte .dzeile { grid-template-columns: 44px minmax(0, 1fr) 100px 170px 44px; }
.dkopf { position: sticky; top: 0; z-index: 2; min-height: 44px; border-top: 0; border-bottom: 1px solid var(--linie); background: var(--flaeche); color: var(--text-2); font-size: .9rem; font-weight: 600; }
.dkopf + .dzeile { border-top: 0; }
.dkopf a { color: var(--text-2); display: inline-block; padding: 12px 0; }
.dkopf a.aktiv { color: var(--text); }
.dkopf i { font-style: normal; margin-left: 4px; }
.dzeile:not(.dkopf):hover, .dzeile.gewaehlt { background: color-mix(in srgb, var(--flaeche-2) 70%, transparent); }
.wahl { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.wahl input { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.dname { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 52px; color: var(--text); }
.dliste.korb .dname { padding-left: 12px; }
.dname:hover { text-decoration: none; }
.dname:hover > span { text-decoration: underline; text-underline-offset: 3px; }
.dname > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.dname > span small { display: block; color: var(--text-2); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; }
.dname > small { color: var(--text-2); font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dname .icon { color: var(--text-2); }
.dname em { display: none; }
.zahl { color: var(--text-2); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rechte-spalte { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .84rem; padding-left: 16px; }
.dkopf .rechte-spalte { font-size: inherit; }
.menue-knopf { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r); background: none; color: var(--text-2); cursor: pointer; }
.menue-knopf:hover, .menue-knopf[aria-expanded="true"] { background: var(--flaeche-3); color: var(--text); }
.korb-aktionen { display: flex; justify-content: flex-end; gap: 20px; padding-right: 4px; }
.dleer { padding: 32px 0; color: var(--text-2); text-align: center; }
.dateien-fuss, .hochladen-stand { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linie); color: var(--text-2); font-size: .9rem; }
.balken { flex: 1; max-width: 360px; height: 4px; border-radius: 2px; background: var(--flaeche-3); overflow: hidden; }
.balken i { display: block; width: 0; height: 100%; background: var(--text); transition: width .2s linear; }
.ablegen {
  position: absolute; inset: 0; z-index: 5; display: none; place-items: center; text-align: center; padding: 24px; pointer-events: none;
  border: 2px dashed var(--akzent); border-radius: var(--r); background: color-mix(in srgb, var(--flaeche) 90%, transparent); font-size: 1.1rem;
}
.dateien.ziehen .ablegen { display: grid; }

/* Stern im Pfad: Ordner als Lesezeichen */
.stern-form { display: contents; }
.stern { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: var(--r); background: none; color: var(--text-3); cursor: pointer; }
.stern:hover { color: var(--text); background: var(--flaeche-2); }
.stern[aria-pressed="true"] { color: var(--akzent-text); }
.stern[aria-pressed="true"] .icon { fill: currentColor; }
.suche-hinweis { margin: -4px 0 8px; color: var(--text-2); font-size: .88rem; text-align: right; }

/* Ablage und Ziehen */
.dzeile.ausgeschnitten, .dzeile.gezogen { opacity: .5; }
.ablage-ziel { outline: 2px dashed var(--akzent); outline-offset: -2px; background: var(--akzent-weich) !important; border-radius: var(--r); }

/* Suchergebnisse */
.treffer-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; border-bottom: 1px solid var(--linie); color: var(--text-2); font-size: .9rem; }
.treffer-kopf + .treffer-zeile { border-top: 0; }
.dzeile.treffer-zeile { grid-template-columns: minmax(0, 1fr) 110px; padding: 0 4px 0 12px; color: var(--text); }
.treffer-zeile:hover { text-decoration: none; }
.treffer-zeile:hover b { text-decoration: underline; text-underline-offset: 3px; }
.treffer-zeile b { font-weight: 500; }
.treffer-zeile small { font-family: var(--mono); font-size: .8rem; }
mark { background: var(--akzent-glanz); color: inherit; border-radius: 2px; }

/* Hochladen: Auswahl bei vorhandenen Dateien, Fehlerliste */
.wahl-liste { gap: 8px; }
.wahl-knopf { display: grid; gap: 2px; width: 100%; padding: 12px 16px; border: 1px solid var(--linie-stark); border-radius: var(--r); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background var(--tempo); }
.wahl-knopf:first-child { border-color: var(--akzent); }
.wahl-knopf:hover { background: var(--flaeche-2); }
.wahl-knopf b { font-weight: 600; }
.wahl-knopf span { color: var(--text-2); font-size: .88rem; }
.fehler-liste { list-style: none; margin: 16px 0 0; padding: 0; max-height: 40vh; overflow: auto; }
.fehler-liste li { display: grid; padding: 8px 0; border-top: 1px solid var(--linie); }
.fehler-liste li:first-child { border-top: 0; }
.fehler-liste b { font-weight: 500; overflow-wrap: anywhere; }
.fehler-liste span { color: var(--text-2); font-size: .88rem; }

/* Ordnerwahl im Dialog */
.ordnerwahl { border: 1px solid var(--linie-stark); border-radius: var(--r); overflow: hidden; }
.ordnerwahl-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 12px; border-bottom: 1px solid var(--linie); background: var(--grund); }
.ordnerwahl-kopf span { color: var(--text-2); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ordnerwahl-kopf .aktion[disabled] { opacity: .4; cursor: default; }
.ordnerwahl-liste { list-style: none; margin: 0; padding: 4px; height: 220px; overflow: auto; }
.ordnerwahl-liste li.blass { padding: 12px; }
.ordnerwahl-punkt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ordnerwahl-punkt:hover { background: var(--flaeche-2); }
.ordnerwahl-punkt .icon { color: var(--text-2); }

/* Rechte als Häkchen */
.rechte-raster { width: 100%; border-collapse: collapse; }
.rechte-raster th { font-size: .88rem; font-weight: 600; color: var(--text-2); text-align: center; padding: 0 0 4px; }
.rechte-raster th[scope="row"] { text-align: left; color: var(--text); font-weight: 500; font-size: .94rem; }
.rechte-raster td { text-align: center; border-top: 1px solid var(--linie); }
.rechte-raster tr:first-child td { border-top: 0; }
.rechte-raster .wahl { margin: 0 auto; }

/* Versionen: links Liste, rechts Vergleich */
.dialog.breit { width: min(1100px, calc(100vw - 32px)); }
.versionen { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; height: min(58vh, 560px); margin-top: 20px; }
.versionen-liste { list-style: none; margin: 0; padding: 0; overflow: auto; }
.versions-knopf { display: grid; gap: 2px; width: 100%; min-height: 52px; padding: 8px 12px; border: 0; border-radius: var(--r); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.versions-knopf:hover { background: var(--flaeche-2); }
.versions-knopf.aktiv { background: var(--akzent-weich); }
.versions-knopf b { font-weight: 500; }
.versions-knopf span { color: var(--text-2); font-size: .86rem; }
.vergleich { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--linie); border-radius: var(--r); overflow: hidden; }
.vergleich-kopf { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--linie); font-size: .9rem; }
.vergleich-zeilen { flex: 1; overflow: auto; padding: 6px 0; font-size: 13px; line-height: 1.6; }
.vz { display: grid; grid-template-columns: 52px minmax(0, 1fr); }
.vz-nr { padding-right: 12px; color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }
.vz-text { white-space: pre-wrap; overflow-wrap: anywhere; padding-right: 12px; }
.vz.plus { box-shadow: inset 3px 0 var(--ok); }
.vz.minus { box-shadow: inset 3px 0 var(--fehler); color: var(--text-2); }
.vz.luecke { color: var(--text-3); font-style: italic; font-family: var(--schrift); padding: 4px 0; }
.cm-fundstelle { background: var(--akzent-weich); }

/* Meldung mit Aktion („Rückgängig“) */
.toast.mit-aktion { align-items: center; }
.toast.mit-aktion > form { display: flex; }
.toast.mit-aktion .aktion { min-height: 32px; }

/* ------------------------------------------------------------------ Kunden */
.zahlen .messwert { padding-bottom: calc(var(--abstand) + 4px); }
.dzeile .zahl small, .kzelle small { display: block; color: var(--text-2); font-size: .82rem; }
.dliste.kliste .dzeile { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 120px minmax(0, 1.4fr) 150px; column-gap: 24px; padding-left: 12px; }
.kzelle.stand > span, .kzelle.stand small { display: block; overflow: hidden; text-overflow: ellipsis; }
.kzelle.stand small { font-weight: 600; }
.dliste.kliste .dkopf { padding-left: 12px; }
.kliste .dname > span { line-height: 1.3; }
.kliste .dname > span small { display: block; color: var(--text-2); font-size: .82rem; }
.kzelle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.kzelle.mono { font-size: .86rem; }
.kaktion { display: flex; justify-content: flex-end; padding-right: 4px; }
.kliste-trenner { margin-top: 16px; }
.dzeile.beendet .dname, .dzeile.beendet .kzelle, .dzeile.beendet .zahl { opacity: .62; }
.fuss-aktionen { display: flex; gap: 20px; flex-wrap: wrap; }
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feld .label { font-size: .9rem; font-weight: 600; color: var(--text-2); }
textarea.eingabe { resize: vertical; min-height: 88px; line-height: 1.5; }
.aktion.gefahr-text { color: var(--fehler); }
.zeile.kuenftig .zeile-name { color: var(--text-2); }
.zeile.notiz .zeile-name, .zeile.notiz .zeile-name small { white-space: pre-wrap; }
.zeile.notiz { padding: 10px 0; }
.kunde-hinweis { margin-bottom: var(--abstand); }

/* Zugangsdaten für Kunden */
.zugangsdaten { display: grid; gap: 2px; margin-top: 20px; padding: 6px 16px; border-radius: var(--r); background: var(--grund); border: 1px solid var(--linie); }
.zugangsdaten div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; }
.zugangsdaten div + div { border-top: 1px solid var(--linie); }
.zugangsdaten span { color: var(--text-2); }
.zugangsdaten code { font-size: .9rem; overflow-wrap: anywhere; text-align: right; }

/* Backups */
.zeilen-aktionen { display: flex; gap: 20px; flex: none; }
.auswahl-knoepfe { display: flex; gap: 14px; }
.aktion.gewaehlt { font-weight: 700; text-decoration-color: currentColor; }
.wahl-radio { position: relative; padding-left: 44px; }
.wahl-radio input { position: absolute; left: 16px; top: 15px; width: 16px; height: 16px; margin: 0; }
.wahl-radio:has(input:checked) { border-color: var(--akzent); }
.wahl-knopf.wahl-radio:first-child { border-color: var(--linie-stark); }
.wahl-knopf.wahl-radio:first-child:has(input:checked) { border-color: var(--akzent); }
.zeilen > li.mitte { list-style: none; }

/* Kontextmenü */
.menue-liste {
  position: fixed; z-index: 70; display: grid; min-width: 220px; padding: 6px;
  border: 1px solid var(--linie-stark); border-radius: var(--r); background: var(--flaeche-2); box-shadow: var(--schatten-gross);
}
.menue-liste button, .menue-liste a { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 6px; background: none; color: var(--text); font: 500 .94rem/1 var(--schrift); text-align: left; cursor: pointer; }
.menue-liste button:hover, .menue-liste a:hover, .menue-liste :focus-visible { background: var(--flaeche-3); text-decoration: none; outline: none; }
.menue-liste hr { width: 100%; margin: 6px 0; border: 0; border-top: 1px solid var(--linie); }
.menue-liste .gefahr { color: var(--fehler); }
.menue-liste kbd { color: var(--text-3); font: 500 .78rem var(--mono); }

/* Ansicht einer Datei */
.editor-stand { color: var(--text-2); font-size: .9rem; white-space: nowrap; }
.editor-stand.offen { color: var(--warn); }
.editor-fehler { margin-bottom: 12px; overflow-wrap: anywhere; }
.editor { position: relative; display: flex; border: 1px solid var(--linie); border-radius: var(--r); overflow: hidden; background: var(--flaeche); }
.editor textarea { flex: 1; width: 100%; padding: 8px 12px; resize: none; border: 0; background: var(--flaeche); color: var(--text); font: 14px/1.6 var(--mono); tab-size: 4; }
.editor textarea:focus { outline: none; }
.editor .CodeMirror { position: absolute; inset: 0; height: auto; background: var(--flaeche); color: var(--text); font: 14px/1.6 var(--mono); }
.CodeMirror-gutters { background: var(--flaeche); border-right: 1px solid var(--linie); }
.CodeMirror-linenumber { color: var(--text-3); padding: 0 10px 0 6px; }
.CodeMirror-lines { padding: 8px 0; }
.CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like { padding: 0 12px; }
.CodeMirror-cursor { border-left: 2px solid var(--akzent); }
.CodeMirror-selected { background: var(--flaeche-3); }
.CodeMirror-focused .CodeMirror-selected, .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: var(--akzent-glanz); }
.CodeMirror-activeline-background { background: var(--flaeche-2); }
.CodeMirror-activeline .CodeMirror-gutter-elt { color: var(--text); }
.CodeMirror-matchingbracket { color: var(--text) !important; outline: 1px solid var(--text-3); }
.CodeMirror-dialog { background: var(--flaeche-2); color: var(--text); border-bottom: 1px solid var(--linie) !important; padding: 8px 12px; font: 500 .9rem var(--schrift); }
.CodeMirror-dialog input { color: var(--text); font: 14px var(--mono); }
.cm-s-flaytex .cm-keyword, .cm-s-flaytex .cm-builtin, .cm-s-flaytex .cm-meta, .cm-s-flaytex .cm-qualifier { color: var(--cm-schluessel); }
.cm-s-flaytex .cm-string, .cm-s-flaytex .cm-string-2 { color: var(--cm-text); }
.cm-s-flaytex .cm-number, .cm-s-flaytex .cm-atom { color: var(--cm-zahl); }
.cm-s-flaytex .cm-comment { color: var(--cm-kommentar); font-style: italic; }
.cm-s-flaytex .cm-tag, .cm-s-flaytex .cm-def, .cm-s-flaytex .cm-variable-2, .cm-s-flaytex .cm-header { color: var(--cm-tag); }
.cm-s-flaytex .cm-attribute, .cm-s-flaytex .cm-property, .cm-s-flaytex .cm-type, .cm-s-flaytex .cm-variable-3 { color: var(--cm-attribut); }
.cm-s-flaytex .cm-header { font-weight: 650; }
.cm-s-flaytex .cm-error { color: var(--fehler); }
.vorschau img { max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; border-radius: var(--r); background: repeating-conic-gradient(var(--flaeche-2) 0 25%, var(--flaeche) 0 50%) 0 0 / 16px 16px; }
.ansicht .mitte { min-height: 0; }
.ansicht .mitte > .icon { width: 32px; height: 32px; color: var(--text-3); }

/* Fehlerseite */
.fehlerseite { display: grid; place-items: center; min-height: 60dvh; text-align: center; }
.fehlerseite h1 { margin-bottom: 8px; }
.fehlerseite p { color: var(--text-2); margin-bottom: 24px; }

/* ------------------------------------------------------------------ Handy */
.unten-leiste, .mobil-kopf { display: none; }
@media (max-width: 1100px) {
  .raster-3, .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster-3 > :last-child { grid-column: 1 / -1; }
  .dzeile { grid-template-columns: 44px minmax(0, 1fr) 90px 150px 44px; }
  .dzeile > .rechte-spalte { display: none; }
  .orte span { display: none; }
  .leistung { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .messwert:nth-child(3) { border-left: 0; }
  .messwert:nth-child(n + 3) { border-top: 1px solid var(--linie); }
}
@media (max-width: 900px) {
  :root { --abstand: 16px; }
  .rahmen { grid-template-columns: 1fr; }
  .leiste {
    position: fixed; z-index: 50; inset: 0 auto 0 0; width: min(300px, 86vw); transform: translateX(-102%);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1);
  }
  body.menue-offen .leiste { transform: none; box-shadow: var(--schatten-gross); }
  body.menue-offen::after { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(10, 8, 6, .5); }
  .mobil-kopf {
    display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30; padding: 10px 16px;
    background: var(--grund); border-bottom: 1px solid var(--linie);
  }
  .mobil-kopf .marke { padding: 0; flex: 1; }
  .mobil-kopf .marke img { width: 26px; height: 26px; }
  .runder-knopf { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); cursor: pointer; }
  .inhalt { padding: 20px 16px 104px; }
  .innen { min-height: 0; }
  .seitenkopf { flex-direction: column; align-items: stretch; text-align: center; }
  /* Zwei umrandete Knöpfe nebeneinander, der orange (oder ein einzelner) über die volle Breite */
  .seitenkopf .aktionen { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .seitenkopf .aktionen > * { width: 100%; }
  .seitenkopf .aktionen > :only-child, .seitenkopf .aktionen > .primaer, .seitenkopf .aktionen > form:has(.primaer),
  .seitenkopf .aktionen > :first-child:nth-last-child(2):has(+ .primaer),
  .seitenkopf .aktionen > :first-child:nth-last-child(2):has(+ form > .primaer) { grid-column: 1 / -1; }
  .seitenkopf .aktionen form { display: block; }
  .seitenkopf .aktionen form .knopf { width: 100%; }
  .raster-2, .raster-3, .raster-4, .dialog-spalten { grid-template-columns: 1fr; }
  .zeile-name, .zeile-name small { white-space: normal; }
  .messwert { padding: 16px; }
  .messwert .skala { right: 16px; top: 19px; }
  .messwert .wert { font-size: 1.6rem; }
  #verlauf { max-height: 34rem; }
  .dliste.kliste .dzeile { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 0 8px 4px; row-gap: 2px; }
  .dliste.kliste .dkopf { display: none; }
  .kliste .dzeile > .kzelle.mono, .kliste .dzeile > .zahl { display: none; }
  .kliste .dzeile > .kzelle:not(.mono) { grid-column: 1; grid-row: 2; padding-left: 0; font-size: .86rem; }
  .kliste .kaktion { grid-column: 2; grid-row: 1 / span 2; }
  .feld-reihe { grid-template-columns: 1fr; }
  .versionen { grid-template-columns: 1fr; grid-template-rows: 150px minmax(0, 1fr); height: 70vh; }
  .suche-hinweis { text-align: left; }
  .dzeile.treffer-zeile { grid-template-columns: minmax(0, 1fr); }
  .treffer-zeile .zahl { display: none; }
  .zeile:has(.zeilen-aktionen) { flex-wrap: wrap; padding: 8px 0; }
  .zeile .zeilen-aktionen { width: 100%; margin-top: -6px; }
  .orte { grid-template-columns: repeat(var(--spalten, 6), minmax(132px, 1fr)); overflow-x: auto; overscroll-behavior-x: contain; }
  .orte a { padding: 10px 16px; }
  .dateien-kopf { flex-wrap: wrap; gap: 4px 8px; margin-top: -4px; }
  .krumen { flex-basis: 100%; }
  .dateien-kopf > .aktion { display: none; }  /* „Im Browser öffnen“ steckt am Handy im Menü jeder Zeile */
  .stern-form + .filter, .dateien-kopf .filter { order: 1; }
  .stern { order: 2; }
  .filter { width: auto; flex: 1; }
  .dzeile, .dliste.ohne-rechte .dzeile { grid-template-columns: 44px minmax(0, 1fr) 44px; column-gap: 4px; }
  .dzeile > .zahl, .dzeile > .rechte-spalte { display: none; }
  .dliste.korb .dzeile { grid-template-columns: minmax(0, 1fr); padding: 8px 0; }
  .dliste.korb .dkopf { display: none; }
  .korb-aktionen { justify-content: flex-start; padding-left: 42px; }
  .dname { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; column-gap: 12px; padding: 6px 0; }
  .dname .icon { grid-row: span 2; }
  .dname > small { display: none; }
  .dname em { display: block; grid-column: 2; font-style: normal; font-size: .82rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dateien-fuss { flex-wrap: wrap; }
  .editor { min-height: calc(100dvh - 330px); }
  .terminal-rahmen { height: calc(100dvh - 300px); }
  .unten-leiste {
    display: grid; grid-template-columns: repeat(var(--punkte, 5), 1fr); position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--grund-2); border-top: 1px solid var(--linie);
  }
  .unten-leiste a, .unten-leiste button { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 52px; border: 0; border-radius: var(--r); background: none; color: var(--text-2); font: 600 .72rem var(--schrift); cursor: pointer; }
  .unten-leiste a:hover { text-decoration: none; }
  .unten-leiste .aktiv { color: var(--text); background: var(--akzent-weich); }
  .unten-leiste .aktiv .icon { color: var(--akzent-text); }
  .toasts { bottom: 84px; right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}