/* Second Brain – Gestaltung
   Aufbau: 1 Tokens · 2 Grundlagen · 3 Layout · 4 Bausteine · 5 Seiten
   Konventionen: Buttons und Felder 40 px (klein 32 px), Abstände nur --a1 … --a7, Radien --r1/--r2.
   Die sechs Hauptfarben kommen aus /theme.css (Admin → Branding), alles andere wird hier abgeleitet. */

/* ===== 1 Tokens ========================================================== */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/statisch/schrift/plex-sans.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Hauptfarben (Rohfassung, überschrieben von /theme.css) */
  --primaer: #2b5c8f;
  --akzent: #0f8b8d;
  --seitenleiste: #14202e;
  --hintergrund: #f4f6f9;
  --flaeche: #ffffff;
  --text: #1b2532;
  --auf-primaer: #ffffff;
  --auf-akzent: #ffffff;
  --auf-seitenleiste: #ffffff;

  /* Statusfarben (fest) */
  --erfolg: #15773a;
  --warnung: #a35607;  /* dunkler als zuvor: Kontrast mind. 4,5 : 1 auch auf Badges */
  --fehler: #c0262d;

  /* Abstände, Radien, Höhen, Schrift */
  --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 24px; --a6: 32px; --a7: 48px;
  --r1: 6px; --r2: 10px;
  --hoehe: 40px; --hoehe-klein: 32px;
  --f-xs: 12px; --f-s: 14px; --f-m: 16px; --f-l: 20px; --f-xl: 24px; --f-xxl: 30px;
  --schrift: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: Consolas, "Cascadia Mono", "SF Mono", Menlo, "DejaVu Sans Mono", monospace;
  --leiste-breite: 256px;

  /* Abgeleitet */
  --text-2: color-mix(in srgb, var(--text) 70%, var(--hintergrund));
  --text-3: color-mix(in srgb, var(--text) 64%, var(--hintergrund));  /* 64 %: Kontrast mind. 4,5 : 1 (WCAG AA, Vor-Review) */
  --rand: color-mix(in srgb, var(--text) 11%, var(--flaeche));
  --rand-stark: color-mix(in srgb, var(--text) 22%, var(--flaeche));
  --flaeche-2: color-mix(in srgb, var(--text) 3.5%, var(--flaeche));
  --primaer-hover: color-mix(in srgb, var(--primaer) 85%, #000);
  --primaer-zart: color-mix(in srgb, var(--primaer) 9%, var(--flaeche));
  --akzent-zart: color-mix(in srgb, var(--akzent) 12%, var(--flaeche));
  --link: var(--primaer);
  --fokus: color-mix(in srgb, var(--akzent) 45%, transparent);
  --leiste-text: color-mix(in srgb, var(--auf-seitenleiste) 70%, var(--seitenleiste));
  --leiste-leise: color-mix(in srgb, var(--auf-seitenleiste) 62%, var(--seitenleiste));
  --leiste-hover: color-mix(in srgb, var(--auf-seitenleiste) 7%, var(--seitenleiste));
  --leiste-aktiv: color-mix(in srgb, var(--auf-seitenleiste) 12%, var(--seitenleiste));
  --leiste-rand: color-mix(in srgb, var(--auf-seitenleiste) 10%, var(--seitenleiste));
  --schatten: 0 1px 2px rgb(16 24 40 / .04), 0 1px 3px rgb(16 24 40 / .06);
  --schatten-hoch: 0 12px 32px rgb(16 24 40 / .12), 0 2px 6px rgb(16 24 40 / .06);
  color-scheme: light;
}

/* Dunkel: die neutralen Farben setzt theme.css (Branding, PlanEdit_16), hier nur Abgeleitetes. */
:root[data-darstellung="dunkel"] {
  --link: color-mix(in srgb, var(--primaer) 55%, #fff);
  --primaer-zart: color-mix(in srgb, var(--primaer) 22%, var(--flaeche));
  --akzent-zart: color-mix(in srgb, var(--akzent) 22%, var(--flaeche));
  --schatten: 0 1px 2px rgb(0 0 0 / .3); --schatten-hoch: 0 12px 32px rgb(0 0 0 / .5);
  --erfolg: #3fb96a; --warnung: #e0913e; --fehler: #f06a6f;  /* Statusfarben aufgehellt, sonst zu wenig Kontrast */
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-darstellung="auto"] {
    --link: color-mix(in srgb, var(--primaer) 55%, #fff);
    --primaer-zart: color-mix(in srgb, var(--primaer) 22%, var(--flaeche));
    --akzent-zart: color-mix(in srgb, var(--akzent) 22%, var(--flaeche));
    --schatten: 0 1px 2px rgb(0 0 0 / .3); --schatten-hoch: 0 12px 32px rgb(0 0 0 / .5);
    --erfolg: #3fb96a; --warnung: #e0913e; --fehler: #f06a6f;  /* Statusfarben aufgehellt, sonst zu wenig Kontrast */
    color-scheme: dark;
  }
}

/* ===== 2 Grundlagen ====================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  font: 400 var(--f-s)/1.55 var(--schrift);
  color: var(--text); background: var(--hintergrund);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 600; letter-spacing: 0; }
h1 { letter-spacing: -0.01em; }
h1 { font-size: var(--f-xl); }
h2 { font-size: var(--f-m); }
h3 { font-size: var(--f-s); }
p { margin: 0 0 var(--a3); }
a { color: var(--link); text-decoration: none; }
::selection { background: color-mix(in srgb, var(--primaer) 22%, transparent); }
html { scrollbar-color: var(--rand-stark) transparent; }
input, textarea, select { caret-color: var(--primaer); }
input[type=checkbox], input[type=radio] { accent-color: var(--primaer); }
td, .kennzahl strong, .nav-zahl { font-variant-numeric: tabular-nums; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Links im Fließtext auch ohne Farbe erkennbar (WCAG 1.4.1) */
p a:not(.btn), dt a:not(.btn), dd a:not(.btn), li a:not(.btn):not(.nav-punkt), .karte-fuss > a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
code, pre, kbd { font-family: var(--mono); font-size: .92em; }
code { background: var(--flaeche-2); border: 1px solid var(--rand); border-radius: 4px; padding: .05em .35em; }
pre { background: var(--flaeche-2); border: 1px solid var(--rand); border-radius: var(--r1); padding: var(--a3) var(--a4); overflow-x: auto; }
pre code { background: none; border: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--rand); margin: var(--a5) 0; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.sym { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sym-klein { width: 16px; height: 16px; }
.sym-gross { width: 22px; height: 22px; }
.leise { color: var(--text-3); }
.mono { font-family: var(--mono); }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== 3 Layout ========================================================== */

.rahmen { display: flex; min-height: 100vh; min-height: 100dvh; }

/* Seitenleiste */
.leiste {
  position: sticky; top: 0; height: 100vh; height: 100dvh; width: var(--leiste-breite); flex: none;
  display: flex; flex-direction: column;
  background: var(--seitenleiste); color: var(--leiste-text);
  border-right: 1px solid var(--leiste-rand);
}
.leiste-marke {
  display: flex; align-items: center; gap: var(--a3);
  min-height: 72px; padding: var(--a4) var(--a5);
  color: var(--auf-seitenleiste); text-decoration: none !important;
  border-bottom: 1px solid var(--leiste-rand);
}
.leiste-marke img.breit { max-height: 72px; width: 100%; object-fit: contain; object-position: left center; }
.marke-logo { display: grid; gap: var(--a2); min-width: 0; width: 100%; }
.marke-logo strong { font-size: var(--f-s); font-weight: 650; color: var(--auf-seitenleiste); }
.leiste-marke img.quadrat { width: 34px; height: 34px; object-fit: contain; border-radius: var(--r1); }
.marke-zeichen {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: var(--r1); background: var(--primaer); color: var(--auf-primaer);
}
.marke-text { display: grid; line-height: 1.2; min-width: 0; }
.marke-text strong { font-size: var(--f-s); font-weight: 650; color: var(--auf-seitenleiste); }
.marke-text span { font-size: var(--f-xs); color: var(--leiste-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.leiste-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--a4) var(--a3); display: grid; align-content: start; gap: 2px; }
.nav-titel {
  margin: var(--a5) var(--a3) var(--a2); font-size: var(--f-xs); font-weight: 600; color: var(--leiste-leise);
}
.nav-titel:first-child { margin-top: var(--a1); }
.nav-punkt {
  display: flex; align-items: center; gap: var(--a3);
  height: 36px; padding: 0 var(--a3); border-radius: var(--r1);
  color: var(--leiste-text); font-weight: 500; text-decoration: none !important;
  transition: background .12s, color .12s;
}
.nav-punkt:hover { background: var(--leiste-hover); color: var(--auf-seitenleiste); }
.nav-punkt.aktiv { background: var(--leiste-aktiv); color: var(--auf-seitenleiste); }
.nav-punkt.aktiv .sym { color: var(--akzent); }

.leiste-fuss { display: flex; align-items: center; gap: var(--a3); padding: var(--a4) var(--a4); border-top: 1px solid var(--leiste-rand); }
.leiste-fuss .wer { display: grid; line-height: 1.25; min-width: 0; flex: 1; }
.leiste-fuss .wer strong { color: var(--auf-seitenleiste); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leiste-fuss .wer span { font-size: var(--f-xs); color: var(--leiste-leise); }
.leiste-fuss form { margin: 0; }
.leiste-knopf {
  display: grid; place-items: center; width: var(--hoehe-klein); height: var(--hoehe-klein);
  border: 0; border-radius: var(--r1); background: none; color: var(--leiste-text); cursor: pointer;
}
.leiste-knopf:hover { background: var(--leiste-hover); color: var(--auf-seitenleiste); }

.avatar {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--primaer); color: var(--auf-primaer); font-size: var(--f-xs); font-weight: 650; letter-spacing: .02em;
}

/* Hauptbereich */
.haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.inhalt { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: var(--a6) var(--a6) var(--a7); }
.inhalt.schmal, .kopfzeile.schmal .kopfzeile-innen { max-width: calc(880px + 2 * var(--a6)); }  /* schmale Seiten mittig, Titel bündig mit den Karten */

.kopf-mobil { display: none; }
.schleier { display: none; }

/* Fußzeile: dezent */
.fuss {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--a2) var(--a5);
  width: 100%; padding: var(--a3) var(--a6) var(--a2);
  font-size: var(--f-xs); color: var(--text-3);
}
.fuss a { color: inherit; }
.fuss a:hover { color: var(--text-2); }
.fuss .trenner { opacity: .6; margin: 0 var(--a1); }
.fuss .version { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .leiste {
    position: fixed; left: 0; top: 0; z-index: 30; box-shadow: var(--schatten-hoch);
    transform: translateX(-100%); transition: transform .2s ease;
  }
  body[data-leiste="offen"] .leiste { transform: none; }
  body[data-leiste="offen"] .schleier { display: block; position: fixed; inset: 0; z-index: 20; background: rgb(0 0 0 / .35); }
  .kopf-mobil {
    display: flex; align-items: center; gap: var(--a3); position: sticky; top: 0; z-index: 10;
    height: 56px; padding: 0 var(--a4); background: var(--seitenleiste); color: var(--auf-seitenleiste);
  }
  .kopf-mobil .leiste-knopf { color: var(--auf-seitenleiste); }
  .kopf-mobil .marke-text strong { color: var(--auf-seitenleiste); }
  .kopf-mobil img.quadrat { width: 28px; height: 28px; object-fit: contain; border-radius: var(--r1); }
  .kopf-mobil .marke-zeichen { width: 28px; height: 28px; }
  .inhalt { padding: var(--a5) var(--a4); }
  .fuss { padding: var(--a3) var(--a4) var(--a2); flex-direction: column; }
}

/* Kopfzeile (Muster, E217): Titel oben in eigener Leiste, Erklärung hinter „i“, Zurück immer links vom Titel */
.kopfzeile { position: sticky; top: 0; z-index: 8; background: var(--flaeche); border-bottom: 1px solid var(--rand); }
.kopfzeile-innen { display: flex; align-items: center; gap: var(--a3); max-width: 1180px; margin: 0 auto; min-height: 76px; padding: var(--a3) var(--a6); }
.kopf-titel { flex: 1; min-width: 0; display: grid; gap: 2px; }
.kopf-titel .brotkrumen { margin: 0; font-size: var(--f-xs); }
.kopf-pfad, .kopf-titel > .kopf-zurueck, .kopf-platz { height: 20px; }  /* Zeile über dem Titel: feste Höhe (kein Springen) */
.kopf-titel-zeile { display: flex; align-items: center; gap: var(--a1); min-width: 0; }
.kopf-unterzeile { flex: 0 100 auto; min-width: 0; margin-left: var(--a2); font-size: var(--f-xs); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopfzeile h1 { flex: 0 1 auto; min-width: 0; font-size: var(--f-l); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf-info {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--r1);
  background: transparent; color: var(--text-2); cursor: pointer;
}
.kopf-zurueck { display: inline-flex; align-items: center; gap: var(--a1); justify-self: start; font-size: var(--f-xs); color: var(--text-2); }
.kopf-zurueck .sym { width: 14px; height: 14px; }
.kopf-zurueck.nur-mobil { display: none; }
.kopf-info { width: 28px; height: 28px; margin-left: var(--a1); color: var(--text-3); }
.kopf-info .sym { width: 18px; height: 18px; }
.kopf-info:hover { background: var(--flaeche-2); color: var(--text); }
dialog:focus { outline: none; }
.karte-kopf h2 .kopf-info { display: inline-grid; vertical-align: middle; width: 24px; height: 24px; }
.info-blase {
  margin: 0; inset: auto; position: fixed; max-width: min(420px, calc(100vw - 32px)); padding: var(--a3) var(--a4);
  border: 1px solid var(--rand); border-radius: var(--r2); background: var(--flaeche); color: var(--text-2);
  font-size: var(--f-s); line-height: 1.5; box-shadow: 0 8px 24px rgb(0 0 0 / .12);
}
@media (max-width: 900px) {
  .kopfzeile { top: calc(56px + env(safe-area-inset-top)); }  /* klebt unter der dunklen Leiste */
  .kopfzeile-innen { min-height: 56px; padding: var(--a2) var(--a4); flex-wrap: wrap; }
  .kopf-titel .brotkrumen, .kopf-platz { display: none; }
  .kopf-zurueck.nur-mobil { display: inline-flex; }
  /* Handy: eine Zeile, Titel mittig in der Höhe: ← links neben dem Titel (nur Pfeil, Ziel im aria-label), Knöpfe rechts daneben.
     Passt es nicht (mehrere Knöpfe), rutschen die Knöpfe in die nächste Zeile; der Titel behält mindestens 140 px */
  .kopf-titel { flex: 1 1 140px; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--a1); }
  .kopf-titel > * { grid-column: 1 / -1; }
  .kopf-titel > .kopf-zurueck { grid-column: 1; justify-content: center; width: 32px; height: 32px; margin-left: -6px; border-radius: var(--r1); }
  .kopf-titel > .kopf-zurueck .sym { width: 20px; height: 20px; }
  .kopf-titel:has(> .kopf-zurueck) > .kopf-titel-zeile { grid-column: 2; }
  .kopf-zurueck-text { display: none; }
  .kopfzeile .aktionen .btn { height: 34px; padding: 0 var(--a3); }
  /* Ungespeichert: Knöpfe rechts neben dem Titel, Hinweis darüber, die Kopfzeile bleibt so hoch wie vorher */
  .kopfzeile-innen:has(.seite-speichern:not([hidden])) { flex-wrap: nowrap; padding-block: 4px; }
  .kopfzeile-innen:has(.seite-speichern:not([hidden])) .kopf-titel { flex-basis: auto; }
  .kopfzeile .aktionen:has(.seite-speichern:not([hidden])) { flex-wrap: nowrap; }
  .kopfzeile .aktionen:has(.seite-speichern:not([hidden])) > :not(.seite-speichern) { display: none; }  /* andere Knöpfe kurz ausblenden */
  .kopfzeile .seite-speichern:not([hidden]) { display: grid; grid-template-columns: auto auto; gap: 4px var(--a2); }
  .seite-speichern .ungespeichert { grid-column: 1 / -1; justify-self: center; font-size: 11px; line-height: 14px; }  /* mittig über beiden Knöpfen */
  .kopfzeile .seite-speichern .btn { height: 28px; padding: 0 var(--a3); font-size: var(--f-xs); }
}

/* Öffentliche Seiten (Anmeldung, 2FA, Rechtstexte): neutral, ohne Firmen-Branding (E51) */
.oeffentlich { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.oeffentlich-mitte { flex: 1; display: grid; place-items: center; padding: var(--a6) var(--a4); }
.oeffentlich-mitte.text { place-items: start center; }
.neutral-marke { display: flex; align-items: center; justify-content: center; gap: var(--a3); margin-bottom: var(--a5); color: var(--text); }
.neutral-marke .marke-zeichen { width: 40px; height: 40px; border-radius: var(--r2); background: var(--text); color: var(--flaeche); }
.neutral-marke strong { font-size: var(--f-l); font-weight: 650; letter-spacing: -0.015em; }
.anmelde-karte { width: min(420px, 100%); }
.anmelde-karte .karte { padding: var(--a6); }
.anmelde-karte h1 { font-size: var(--f-l); margin-bottom: var(--a1); }
.anmelde-karte .unterzeile { color: var(--text-2); margin-bottom: var(--a5); }
.oeffentlich .fuss { max-width: none; justify-content: center; }

/* ===== 4 Bausteine ======================================================= */

/* Seitenkopf */
.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--a4); margin-bottom: var(--a5); }
.seitenkopf .titel { display: grid; gap: var(--a1); min-width: 0; }
.seitenkopf h1 { overflow-wrap: anywhere; }
.seitenkopf .unterzeile { color: var(--text-2); margin: 0; }
.aktionen { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center; }

/* Brotkrumen */
.brotkrumen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a1); margin-bottom: var(--a2); font-size: var(--f-s); color: var(--text-3); }
.brotkrumen a { color: var(--text-2); }
.brotkrumen .sym { width: 14px; height: 14px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a2);
  height: var(--hoehe); padding: 0 var(--a4); border: 1px solid transparent; border-radius: var(--r1);
  font: 550 var(--f-s)/1 var(--schrift); white-space: nowrap; cursor: pointer; text-decoration: none !important;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.btn .sym { width: 16px; height: 16px; }
.btn-haupt { background: var(--primaer); color: var(--auf-primaer); box-shadow: var(--schatten); }
.btn-haupt:hover { background: var(--primaer-hover); }
.btn-neben { background: var(--flaeche); color: var(--text); border-color: var(--rand-stark); box-shadow: var(--schatten); }
.btn-neben:hover { background: var(--flaeche-2); }
.btn-gefahr { background: var(--flaeche); color: var(--fehler); border-color: color-mix(in srgb, var(--fehler) 40%, var(--flaeche)); }
.btn-gefahr:hover { background: color-mix(in srgb, var(--fehler) 8%, var(--flaeche)); }
.btn-text { background: none; color: var(--link); padding: 0 var(--a2); }
.btn-text:hover { background: var(--primaer-zart); }
.btn-klein { height: var(--hoehe-klein); padding: 0 var(--a3); font-size: var(--f-xs); }
@media (max-width: 600px) {  /* lange Beschriftungen in Knopfreihen umbrechen statt über den Rand zu ragen */
  .karte-fuss .btn { white-space: normal; height: auto; min-height: var(--hoehe); padding-block: 6px; line-height: 1.25; }
  .karte-fuss .btn-klein { min-height: var(--hoehe-klein); padding-block: 4px; }
}
.btn-voll { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
/* Absenden erst, wenn alle Pflichtfelder ausgefüllt sind (z. B. Teilen: Empfänger und Bestätigung). required verhindert das Absenden ohnehin */
.erst-ausfuellen:has(:invalid) button:not([type=button]) { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* Formulare */
.formular { display: grid; gap: var(--a4); }
.formular.zweispaltig { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; }
.formular .volle-breite { grid-column: 1 / -1; }
.formular .neue-zeile { grid-column-start: 1; }
[hidden] { display: none !important; }
.feld { display: grid; gap: 6px; margin: 0; }
.feld-titel { font-weight: 550; color: var(--text); }
.feld-hilfe { font-size: var(--f-xs); color: var(--text-3); }
.eingabe, .feld input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]), .feld select, .feld textarea {
  width: 100%; height: var(--hoehe); padding: 0 var(--a3);
  font: 400 var(--f-s) var(--schrift); color: var(--text);
  background: var(--flaeche); border: 1px solid var(--rand-stark); border-radius: var(--r1);
  transition: border-color .12s, box-shadow .12s;
}
.feld textarea { height: auto; min-height: 120px; padding: var(--a3); line-height: 1.6; resize: vertical; }
.feld textarea.code { font: 13px/1.6 var(--mono); }
.feld input:focus, .feld select:focus, .feld textarea:focus, .eingabe:focus {
  outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--fokus);
}
.feld input::placeholder, .feld textarea::placeholder { color: var(--text-3); }
.feld input[type=file] { font: inherit; color: var(--text-2); }
.feld input[type=file]::file-selector-button {  /* wie .btn-neben */
  height: var(--hoehe); margin-right: var(--a3); padding: 0 var(--a4); cursor: pointer;
  font: 550 var(--f-s) var(--schrift); color: var(--text);
  background: var(--flaeche); border: 1px solid var(--rand-stark); border-radius: var(--r1);
}
.ankreuzen { display: flex; align-items: flex-start; gap: var(--a2); cursor: pointer; }
.ankreuzen input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--primaer); flex: none; }
.formular-fuss { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center; }
.zeilenformular { display: flex; flex-wrap: wrap; gap: var(--a3); align-items: flex-end; }
.zeilenformular .feld { flex: 1 1 200px; }
/* Mit Hilfetext unter einem Feld: Knopf und Häkchen bleiben auf Höhe des Eingabefelds statt nach unten zu rutschen */
.zeilenformular:has(> .feld) { align-items: flex-start; }
.zeilenformular:has(> .feld) > .btn { margin-top: calc(var(--f-s) * 1.55 + 6px); }  /* Höhe Feldtitel + Abstand */
.zeilenformular:has(> .feld) > .ankreuzen { margin-top: calc(var(--f-s) * 1.55 + 6px + (var(--hoehe) - var(--f-s) * 1.55) / 2); }
form.inline { display: inline; margin: 0; }

/* Auswahlkarten (z. B. Hell/Dunkel) */
.wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--a3); }
.wahl label {
  display: flex; align-items: center; gap: var(--a3); height: 52px; padding: 0 var(--a4); cursor: pointer;
  border: 1px solid var(--rand-stark); border-radius: var(--r1); background: var(--flaeche); font-weight: 550;
}
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl label:has(input:checked) { border-color: var(--primaer); box-shadow: 0 0 0 1px var(--primaer); background: var(--primaer-zart); }
.wahl label:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--fokus); }

/* Karten */
.karte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r2); }
.karte + .karte, .karte + .raster, .raster + .karte { margin-top: var(--a5); }
.karte-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--a3); padding: var(--a4) var(--a5);
  border-bottom: 1px solid var(--rand); border-radius: var(--r2) var(--r2) 0 0;
  background: color-mix(in srgb, var(--primaer) 6%, var(--flaeche));  /* Kopf hebt sich am stärksten ab (E218), aus der Markenfarbe */
}
.karte-kopf .titel { display: grid; gap: 2px; }
.karte-kopf p { margin: 0; color: var(--text-3); font-size: var(--f-xs); }
.karte-inhalt { padding: var(--a5); }
.karte-inhalt > :last-child { margin-bottom: 0; }
.karte-fuss { padding: var(--a3) var(--a5); border-top: 1px solid var(--rand); }
/* Mehrere Abschnitte in einer Karte: dünne Linie dazwischen statt eigener Flächen */
.karte > :not(.karte-kopf) + .karte-inhalt, .karte > :not(.karte-kopf) + .tabelle-rahmen { border-top: 1px solid var(--rand); }
.raster { display: grid; gap: var(--a5); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: stretch; }
.raster .karte + .karte { margin-top: 0; }

/* Tabellen */
.tabelle-rahmen { overflow-x: auto; position: relative; }  /* relative: versteckte Beschriftungen bleiben im Rahmen */
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th {
  padding: 10px var(--a5); text-align: left; white-space: nowrap;
  font-size: var(--f-xs); font-weight: 600; color: var(--text-2);
  background: var(--flaeche-2); border-bottom: 1px solid var(--rand);  /* zweite Ebene: leiser als der Kartenkopf (E218) */
}
.tabelle td { padding: var(--a3) var(--a5); border-bottom: 1px solid var(--rand); vertical-align: middle; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover td { background: var(--flaeche-2); }
.tabelle .rechts { text-align: right; }
.tabelle .eng { width: 1%; white-space: nowrap; }
.tabelle .eng > form { display: inline; }
.zelle-person { display: flex; align-items: center; gap: var(--a3); }
.zelle-person .avatar { width: 30px; height: 30px; font-size: 11px; letter-spacing: 0; }
.zelle-person div { display: grid; line-height: 1.3; }
.zelle-person div > span { font-size: var(--f-xs); color: var(--text-3); }

/* Badges */
/* Etiketten: eckig, flächig, ohne Punkt. Status über Farbe, Art über Text */
.badge {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 6px;
  border-radius: 3px; font-size: var(--f-xs); font-weight: 600; line-height: 1; white-space: nowrap;
  background: color-mix(in srgb, var(--text) 7%, var(--flaeche)); color: var(--text-2);
}
.badge-erfolg { color: var(--erfolg); background: color-mix(in srgb, var(--erfolg) 12%, var(--flaeche)); }
.badge-warnung { color: var(--warnung); background: color-mix(in srgb, var(--warnung) 12%, var(--flaeche)); }
.badge-fehler { color: var(--fehler); background: color-mix(in srgb, var(--fehler) 12%, var(--flaeche)); }
.badge-primaer { color: var(--link); background: var(--primaer-zart); }

/* Hinweise */
.hinweis {
  display: flex; gap: var(--a3); align-items: flex-start; padding: var(--a3) var(--a4); margin-bottom: var(--a5);
  border: 1px solid var(--rand); border-radius: var(--r1); background: var(--flaeche); color: var(--text);
}
.hinweis .sym { margin-top: 1px; }
.hinweis > div > :last-child { margin-bottom: 0; }
.hinweis-info { background: var(--primaer-zart); border-color: color-mix(in srgb, var(--primaer) 25%, var(--flaeche)); }
.hinweis-info .sym { color: var(--link); }
.hinweis-erfolg { background: color-mix(in srgb, var(--erfolg) 8%, var(--flaeche)); border-color: color-mix(in srgb, var(--erfolg) 25%, var(--flaeche)); }
.hinweis-erfolg .sym { color: var(--erfolg); }
.hinweis-warnung { background: color-mix(in srgb, var(--warnung) 8%, var(--flaeche)); border-color: color-mix(in srgb, var(--warnung) 28%, var(--flaeche)); }
.hinweis-warnung .sym { color: var(--warnung); }
.hinweis-fehler { background: color-mix(in srgb, var(--fehler) 8%, var(--flaeche)); border-color: color-mix(in srgb, var(--fehler) 28%, var(--flaeche)); }
.hinweis-fehler .sym { color: var(--fehler); }

/* Geheimnis einmalig anzeigen, mit Kopieren */
.geheimnis { display: flex; gap: var(--a2); align-items: stretch; }
.geheimnis code {
  flex: 1; display: flex; align-items: center; min-height: var(--hoehe); padding: var(--a2) var(--a3);
  word-break: break-all; font-size: 13px; background: var(--flaeche-2); border: 1px dashed var(--rand-stark); border-radius: var(--r1);
}

/* Leerer Zustand */
.leer { display: grid; justify-items: center; gap: var(--a2); padding: var(--a7) var(--a5); text-align: center; color: var(--text-3); }
.leer .sym { width: 32px; height: 32px; color: var(--rand-stark); }
.leer strong { color: var(--text-2); font-size: var(--f-m); }

/* Kacheln (Brains) */
.kacheln { display: grid; gap: var(--a4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.kachel {
  display: grid; gap: var(--a4); padding: var(--a5); color: var(--text); text-decoration: none !important;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r2);
  transition: border-color .15s, background-color .15s;
}
a.kachel:hover { border-color: color-mix(in srgb, var(--primaer) 55%, var(--rand)); background: color-mix(in srgb, var(--primaer) 3%, var(--flaeche)); }
.kachel-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--a2) var(--a3); }
.kachel-kopf > strong { flex: 1 1 12ch; }
.kachel-symbol { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r2); background: var(--primaer-zart); color: var(--link); }
.kachel strong { font-size: var(--f-m); font-weight: 600; overflow-wrap: anywhere; }
.kachel p { margin: 2px 0 0; color: var(--text-3); font-size: var(--f-xs); }
/* Brain-Kachel: feste Zeilen (Name, Art, Rechte), damit alles in jeder Kachel gleich sitzt */
.kachel-brain { gap: var(--a3); align-content: start; }
.kachel-brain > .badge { justify-self: start; }
.kachel-hinweis { display: flex; gap: var(--a1); align-items: flex-start; margin-top: var(--a2); padding: var(--a2) var(--a3);
  border: 1px solid color-mix(in srgb, var(--fehler) 45%, var(--flaeche)); border-radius: var(--r1);
  background: color-mix(in srgb, var(--fehler) 6%, var(--flaeche)); color: var(--fehler); font-size: var(--f-xs); }
.kachel-hinweis .sym { flex: none; margin-top: 2px; }
.kachel-hinweis strong { font-size: inherit; font-weight: 600; color: inherit; }
.kachel-name { display: flex; align-items: center; gap: var(--a2); min-width: 0; }
.kachel-name .sym { flex: none; color: var(--text-3); }
.kachel-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }

/* Kennzahlen */
/* Kennzahlen: eine Leiste mit Trennlinien statt einzelner Karten */
.kennzahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin-bottom: var(--a5);
  background: var(--rand); border: 1px solid var(--rand); border-radius: var(--r2); overflow: hidden;
}
.kennzahl { display: grid; gap: 2px; padding: var(--a4) var(--a5); color: var(--text); text-decoration: none !important; background: var(--flaeche); }
a.kennzahl:hover { background: var(--flaeche-2); }
.kennzahl span { color: var(--text-2); font-size: var(--f-s); font-weight: 500; }
.kennzahl strong { font-size: var(--f-xl); font-weight: 600; line-height: 1.2; }
.kennzahl small { color: var(--text-3); font-size: var(--f-xs); }

/* Dateiliste */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li + li { border-top: 1px solid var(--rand); }
.liste a {
  display: flex; align-items: center; gap: var(--a3); padding: var(--a3) var(--a5);
  color: var(--text); text-decoration: none !important;
}
.liste a:hover { background: var(--flaeche-2); }
.liste .sym { color: var(--text-3); }
.liste .ordner .sym { color: var(--akzent); }
.liste .name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.liste .pfeil { color: var(--rand-stark); }

/* Definitionsliste (Kopfdaten, Profil) */
.daten { display: grid; grid-template-columns: max-content 1fr; gap: var(--a2) var(--a5); margin: 0; }
.daten dt { color: var(--text-3); }
.daten dd { margin: 0; overflow-wrap: anywhere; }

/* Markdown-Inhalt */
.markdown { font-size: var(--f-m); line-height: 1.7; max-width: 76ch; }
.markdown > :first-child { margin-top: 0; }
.markdown h1 { font-size: 28px; margin: var(--a6) 0 var(--a4); }
.markdown h2 { font-size: var(--f-l); margin: var(--a6) 0 var(--a3); padding-bottom: var(--a2); border-bottom: 1px solid var(--rand); }
.markdown h3 { font-size: var(--f-m); margin: var(--a5) 0 var(--a2); }
.markdown p, .markdown ul, .markdown ol { margin: 0 0 var(--a4); }
.markdown li + li { margin-top: var(--a1); }
.markdown blockquote { margin: 0 0 var(--a4); padding: var(--a1) var(--a4); border-left: 2px solid var(--rand-stark); color: var(--text-2); }
.markdown table { border-collapse: collapse; margin: 0 0 var(--a4); font-size: var(--f-s); display: block; overflow-x: auto; }
.markdown th, .markdown td { border: 1px solid var(--rand); padding: var(--a2) var(--a3); text-align: left; vertical-align: top; }
.markdown th { background: var(--flaeche-2); font-weight: 600; }

/* Farbwahl im Admin */
.farbfeld { display: flex; align-items: center; gap: var(--a3); }
.farbfeld input[type=color] {
  width: var(--hoehe); height: var(--hoehe); padding: 3px; flex: none; cursor: pointer;
  border: 1px solid var(--rand-stark); border-radius: var(--r1); background: var(--flaeche);
}
.farbfeld input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.farbfeld input[type=color]::-webkit-color-swatch { border: 0; border-radius: 4px; }
.farbfeld div { display: grid; line-height: 1.3; }
.farbfeld code { width: max-content; font-size: var(--f-xs); }
.logo-vorschau {
  display: grid; place-items: center; min-height: 88px; gap: var(--a1); padding: var(--a3); margin-bottom: var(--a3);
  border: 1px dashed var(--rand-stark); border-radius: var(--r1); background: var(--seitenleiste); color: var(--leiste-leise);
}
.logo-vorschau img { max-height: 56px; max-width: 100%; object-fit: contain; }
.logo-vorschau span { font-size: var(--f-xs); }

/* ===== 5 Seiten ========================================================== */

.datei-layout { display: grid; gap: var(--a5); grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
.datei-layout .karte-inhalt { padding: var(--a6); }
.datei-layout > .karte + .karte { margin-top: 0; }  /* Kopfdaten oben bündig mit dem Text */
.datei-layout aside .daten { grid-template-columns: 1fr; gap: 2px; }
.datei-layout aside .daten dt { font-size: var(--f-xs); }
.datei-layout aside .daten dd + dt { margin-top: var(--a3); }
@media (max-width: 1100px) { .datei-layout { grid-template-columns: minmax(0, 1fr); } }
.editor textarea { min-height: 60vh; }
#graph { display: block; width: 100%; height: auto; border-radius: var(--r2); touch-action: none; cursor: grab; }
.qr { display: grid; justify-items: center; gap: var(--a3); margin-bottom: var(--a5); }
.qr img { width: 200px; height: 200px; padding: var(--a2); background: #fff; border: 1px solid var(--rand); border-radius: var(--r2); }
.schritte { margin: 0 0 var(--a5); padding-left: 1.2em; color: var(--text-2); }
.schritte li + li { margin-top: var(--a1); }

/* Hilfsklassen (statt style-Attributen, die die CSP blockiert) */
.mt-2 { margin-top: var(--a2); } .mt-3 { margin-top: var(--a3); } .mt-4 { margin-top: var(--a4); } .mt-5 { margin-top: var(--a5); }
.mt-6 { margin-top: calc(var(--a5) * 1.6); }
.abschnitt { margin-bottom: var(--a3); }
.sofort-status { font-size: var(--f-xs); color: var(--text-3); margin-right: var(--a2); }
.sofort-status.ok { color: var(--erfolg); } .sofort-status.fehler { color: var(--fehler); }
.seite-speichern:not([hidden]) { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; }
.ungespeichert { font-size: var(--f-xs); font-weight: 600; color: var(--fehler); }
.abschnitt h2 { font-size: var(--f-l); }
.abschnitt + .karte { margin-top: 0; }
.abschnitt p { margin: 2px 0 0; color: var(--text-2); font-size: var(--f-s); }
.mb-0 { margin-bottom: 0; } .mb-3 { margin-bottom: var(--a3); } .mb-5 { margin-bottom: var(--a5); }
.textbreite { width: min(820px, 100%); }

/* Regel-Baukasten */
.regel-info summary { display: inline-flex; align-items: center; gap: var(--a1, 4px); cursor: pointer; font-size: var(--f-xs); color: var(--text-3); list-style: none; }
.regel-info summary::-webkit-details-marker { display: none; }
.regel-info p { margin: var(--a1, 4px) 0 0; }
.regel-vorschau { white-space: pre-wrap; font: 13px/1.6 var(--mono); margin: 0; }

/* Raster mit 2 Spalten, Kartenköpfe einer Zeile gleich hoch (subgrid) */
.raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster-2 > .karte { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; }
.raster-2 .karte-kopf { align-items: start; }
.raster-2 .karte-inhalt { align-self: start; }
@media (max-width: 900px) { .raster-2 { grid-template-columns: minmax(0, 1fr); } }
.geheimnis.einzeilig code { display: block; line-height: calc(var(--hoehe) - 2 * var(--a2) - 2px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; min-width: 0; }
.geheimnis.einzeilig { min-width: 0; }
.raster-2 > .karte { min-width: 0; grid-template-columns: minmax(0, 1fr); }

/* Häkchenlisten (Gruppenmitglieder) und gewählte Tabellenzeile */
.ankreuz-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--a2) var(--a4); max-height: 420px; overflow-y: auto; }
.tabelle tr.gewaehlt td { background: color-mix(in srgb, var(--primaer) 8%, var(--flaeche)); }
.tabelle td select { min-width: 11.5rem; }
.eingabe-klein { height: 32px; }
.tabelle td.leise { font-size: var(--f-xs); }

/* Reiter (z. B. Brains & Rechte: Nach Nutzer / Gruppe / Brain) */
.reiter { display: flex; flex-wrap: wrap; gap: var(--a2); margin-bottom: var(--a5); }
.reiter a { padding: 0 var(--a4); height: 36px; display: inline-flex; align-items: center; gap: var(--a2); border: 1px solid var(--rand); border-radius: 999px; color: var(--text); text-decoration: none; background: var(--flaeche); }
.reiter a[aria-current] { border-color: var(--primaer); box-shadow: 0 0 0 1px var(--primaer); background: var(--primaer-zart); font-weight: 600; }
.raster-liste { display: grid; gap: var(--a5); grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); align-items: start; }
@media (max-width: 900px) { .raster-liste { grid-template-columns: minmax(0, 1fr); } }

/* Ausgegraute Rechte (P13-06): Ebene darüber erlaubt es nicht */
input[type=checkbox]:disabled { opacity: .4; cursor: not-allowed; }
.tabelle tr.gesperrt td:first-child { color: var(--text-3); }
.tabelle td .feld-hilfe { display: block; }

/* Aufgaben-App (P13-14) */
.haken { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--rand-stark); border-radius: 6px; background: var(--flaeche); color: transparent; cursor: pointer; }
.haken:hover { border-color: var(--primaer); }
.haken.an { background: var(--primaer); border-color: var(--primaer); color: var(--auf-primaer, #fff); }
.haken:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--fokus); }
.tabelle tr.erledigt td:not(.eng) { color: var(--text-3); text-decoration: line-through; }
.sortieren { all: unset; cursor: pointer; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; }
.sortieren:focus-visible { box-shadow: 0 0 0 3px var(--fokus); border-radius: 4px; }
th[aria-sort=ascending] .sortieren::after { content: " ▲"; }
th[aria-sort=descending] .sortieren::after { content: " ▼"; }
.zeilen-knoepfe { white-space: nowrap; }
.zeilen-knoepfe form { display: inline; }
.spalten-editor { border: 0; padding: 0; margin: 0; display: grid; gap: var(--a2); }
.kachel.gewaehlt { border-color: var(--primaer); box-shadow: 0 0 0 1px var(--primaer); }

/* Zahl im Kreis für ungelesene Benachrichtigungen (P13-10) */
.nav-zahl { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--akzent); color: var(--auf-akzent); font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.meldung-ungelesen { background: var(--primaer-zart); }
.meldung-ungelesen .feld-hilfe { color: var(--text-2); }  /* auf der Tönung reicht --text-3 nicht für 4,5 : 1 */
.zeile-meldung { display: flex; align-items: center; gap: var(--a4); padding: var(--a3) var(--a5); margin: 0; }
.zeile-meldung > div:first-of-type { flex: 1; display: grid; gap: 2px; }
.zeile-knoepfe { display: flex; gap: var(--a2); flex: none; align-items: center; }
@media (max-width: 600px) { .zeile-meldung { flex-wrap: wrap; } .zeile-knoepfe { width: 100%; } }
.zeile-verlauf { display: flex; align-items: center; gap: var(--a4); padding: var(--a3) var(--a5); }
.zeile-verlauf > div { display: grid; gap: 2px; min-width: 0; }
.zeile-verlauf > div:first-child { flex: 1; overflow-wrap: anywhere; }
.verlauf-wer { text-align: right; }
@media (max-width: 600px) { .zeile-verlauf { flex-wrap: wrap; gap: var(--a1); } .verlauf-wer { text-align: left; } }
.kopf-meldung { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; padding: 4px; }

/* PWA wie eine App (P13-02, Skill schoni-nativ-pwa) */
html, body { touch-action: pan-x pan-y; overscroll-behavior: none; }
html { -webkit-tap-highlight-color: transparent; }
button, .btn, .nav-punkt, nav, .kachel, .reiter a, img, svg { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.btn:active, .nav-punkt:active, .kachel:active, .haken:active { transform: scale(.97); }
@media (max-width: 900px) {
  input, select, textarea, .eingabe { font-size: 16px !important; }  /* iOS zoomt sonst beim Antippen hinein */
  .kopf-mobil { padding-top: env(safe-area-inset-top); height: auto; min-height: calc(56px + env(safe-area-inset-top)); }
  .leiste { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .haupt { padding-bottom: env(safe-area-inset-bottom); }
}
.installieren-inhalt { display: flex; align-items: center; gap: var(--a4); flex-wrap: wrap; }
.installieren-inhalt > div { flex: 1 1 240px; }
.installieren-inhalt ol { margin: var(--a2) 0 0; padding-left: 1.2em; }

/* ===== Aufgaben-App: Griff, Bearbeiten-Dialog (PlanEdit_16) ===== */
.griff { border: 0; background: none; color: var(--text-3); cursor: grab; padding: 6px; border-radius: var(--r1); touch-action: none; display: inline-flex; }
.griff:hover, .griff:focus-visible { color: var(--text); background: var(--flaeche-2); }
tr.zieht { box-shadow: var(--schatten-hoch); }  /* nur solange gezogen wird, keine Farbmarkierung (PlanEdit_18) */
tr.zieht .griff { cursor: grabbing; }
.app-fuss { display: flex; gap: var(--a4); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.app-fuss .feld-hilfe { flex: 1; min-width: 240px; margin: 0; }
.dialog { white-space: normal; text-align: left; border: 1px solid var(--rand); border-radius: var(--r2, 12px); background: var(--flaeche); color: var(--text); padding: var(--a5); width: min(520px, calc(100vw - 32px)); box-shadow: var(--schatten-hoch); }
.dialog::backdrop { background: rgb(0 0 0 / .45); }
.dialog h2 { margin-bottom: var(--a4); }
.dialog-fuss { display: flex; gap: var(--a2); align-items: center; margin-top: var(--a5); flex-wrap: wrap; }
.dialog-fuss .abstand { flex: 1; }
.dialog-breit { width: min(640px, calc(100vw - 32px)); }
.ort-liste { max-height: 50vh; overflow-y: auto; border: 1px solid var(--rand); border-radius: var(--r1); margin-top: var(--a3); }
.ort-liste button { width: 100%; display: flex; align-items: center; gap: var(--a2); padding: var(--a2) var(--a3); border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.ort-liste button:hover, .ort-liste button:focus-visible { background: var(--flaeche-2); }
.ort-liste button:disabled { color: var(--text-3); cursor: default; background: none; }
.kacheln-klein .kachel { padding: var(--a3) var(--a4); }
.kachel.wahl { display: flex; gap: var(--a3); align-items: flex-start; cursor: pointer; }
.kachel.wahl input { margin-top: 4px; }
.kachel.wahl:has(input:checked) { border-color: var(--primaer); background: var(--primaer-zart); }
.kachel.wahl:has(input:checked) :is(p, .leise, .feld-hilfe) { color: var(--text-2); }  /* Kontrast auf der Tönung */
fieldset.feld { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.feld > legend { padding: 0; margin-bottom: var(--a2); }
.ohne-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a1); }
.regel-gesamt > summary { cursor: pointer; }
.regel-gesamt .markdown { font-size: var(--f-s); max-height: 60vh; overflow-y: auto; border: 1px solid var(--rand); border-radius: var(--r1); padding: var(--a4); }
/* Gefahr-Knöpfe nebeneinander */
.gefahr-leiste { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: flex-start; }
.markdown img { max-width: 100%; height: auto; border-radius: var(--r1); border: 1px solid var(--rand); }
.dialog-text > * + * { margin-top: var(--a3); }
.dialog-text ul { padding-left: 1.3em; list-style: disc; }
.tabelle code { white-space: nowrap; }  /* Dateinamen (z. B. Backups) nicht umbrechen */
/* Teilen-Fenster (Skills und Apps) */
.teilen-gewaehlt { display: flex; flex-wrap: wrap; gap: var(--a1); min-height: 28px; align-items: center; }
.teilen-liste { max-height: 40vh; overflow-y: auto; border: 1px solid var(--rand); border-radius: var(--r1); margin-top: var(--a2); padding: var(--a2) var(--a3); }
.teilen-liste li { padding: 4px 0; }
.teilen-liste li[hidden] { display: none; }
.skill-kopf { display: flex; gap: var(--a2); align-items: baseline; flex-wrap: wrap; }

/* Anleitungen je KI-Plattform: Schrittkette mit Bild (ohne JavaScript stehen alle Schritte untereinander) */
.geheimnis pre { flex: 1; margin: 0; padding: var(--a2) var(--a3); white-space: pre-wrap; word-break: break-all; font-size: 13px;
  background: var(--flaeche-2); border: 1px dashed var(--rand-stark); border-radius: var(--r1); }
.schritt[hidden] { display: none; }
.schritt + .schritt { border-top: 1px solid var(--rand); }
.schritt-bild { display: block; max-width: 100%; border: 1px solid var(--rand); border-radius: var(--r1); }
.schritt-platzhalter { padding: var(--a6) var(--a4); text-align: center; color: var(--text-3); border-style: dashed; }
.schritt-knoepfe { display: flex; justify-content: space-between; align-items: center; gap: var(--a2); }

/* Knöpfe an Skills: untereinander, überall gleich breit */
.aktionen-gleich { flex-direction: column; align-items: stretch; }
.aktionen-gleich .btn { width: 15em; justify-content: flex-start; }

/* Zeilen-Liste (Skills, Verlauf): Inhalt frei gestaltet, nur Trennlinien */
.zeilen { list-style: none; margin: 0; padding: 0; }
.zeilen > li + li { border-top: 1px solid var(--rand); }
/* Skills: oben Name, Herkunft, Version, darunter die Beschreibung; Knöpfe rechts, am Handy darunter */
.skill-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "oben knoepfe" "text knoepfe" "mehr knoepfe";
  column-gap: var(--a5); row-gap: var(--a1); padding: var(--a4) var(--a5); align-items: start; }
.skill-oben { grid-area: oben; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--a3); min-width: 0; }
.skill-knoepfe { grid-area: knoepfe; }
.skill-zeile .skill-oben a:not(.btn), .zeile-verlauf a:not(.btn) { text-decoration: none; }  /* Titel, kein Fließtext */
.skill-zeile .skill-oben a:not(.btn):hover, .zeile-verlauf a:not(.btn):hover { text-decoration: underline; }
.skill-text { grid-area: text; margin: 0; color: var(--text-2); }
.text-mehr { grid-area: mehr; justify-self: start; padding-left: 0; padding-right: 0; }
.text-kurz:not(.offen) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
@media (max-width: 760px) {
  .skill-zeile { grid-template-columns: minmax(0, 1fr); grid-template-areas: "oben" "text" "mehr" "knoepfe"; }
  .skill-knoepfe { margin-top: var(--a2); }
}
/* Kürzere Beschriftung nur am Handy (z. B. Knopf im Konto, Vor-Review Nachtlauf 4) */
.nur-schmal { display: none; }
@media (max-width: 600px) { .nur-breit { display: none; } .nur-schmal { display: inline; } }
/* Handy: Nebenknöpfe der Kopfzeile nur als Symbol, damit alles in eine Zeile passt (Text bleibt für Screenreader) */
@media (max-width: 600px) {
  .kopfzeile .aktionen .btn-neben:has(> .sym),
  .kopfzeile .aktionen:has(.btn ~ .btn ~ .btn) .btn:has(> .sym) { font-size: 0; gap: 0; width: 36px; padding: 0; justify-content: center; }  /* ab 3 Knöpfen alle */
}

/* Karten-Titel mit Objekt-Symbol und abgesetzter Aufgabe („Teilen“, „Freigaben“) */
.titel-objekt { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; }
.titel-objekt .sym { color: var(--text-3); }
.titel-aufgabe { font-weight: 400; color: var(--text-3); }
.titel-aufgabe::before { content: "·"; margin-right: var(--a2); }

/* Erklärvideos (E219) */
.videos { display: grid; gap: var(--a4); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.video { overflow: hidden; }
.video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.video-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a2); }
.video.gesehen { border-color: color-mix(in srgb, var(--erfolg) 45%, var(--rand)); }

/* Tabelle als ein Abschnitt unter mehreren in einer Karte: eingerahmt, damit Anfang und Ende klar sind (E218) */
.tabelle-eingerahmt { border: 1px solid var(--rand); border-radius: var(--r1); }
.tabelle-eingerahmt .tabelle th, .tabelle-eingerahmt .tabelle td { padding-inline: var(--a4); }

/* Zurück am Desktop zusätzlich als Pfeil vor dem Pfad (Vergleich, Sebastian 2026-10-13) */
.kopf-pfad { display: flex; align-items: center; gap: var(--a2); }
.kopf-pfeil { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r1); color: var(--text-2); }
.kopf-pfeil:hover { background: var(--flaeche-2); color: var(--text); }
.kopf-pfeil .sym { width: 14px; height: 14px; }
@media (max-width: 900px) { .kopf-pfad { display: none; } }

/* Lange Listen in einer Karte: etwa 10 Zeilen sichtbar, Rest scrollt in der Karte, Spaltenköpfe bleiben stehen */
.tabelle-begrenzt { max-height: 36rem; overflow-y: auto; }
/* Konto: Zwischenüberschriften in einer Karte, Schlüssel-Liste mit aufklappbaren Rechten */
.unterkopf { font-size: var(--f-m); margin-bottom: var(--a3); }
.schluessel-liste { list-style: none; margin: var(--a3) 0 0; padding: 0; border: 1px solid var(--rand); border-radius: var(--r1); }
.schluessel + .schluessel, .schluessel-liste > li + li { border-top: 1px solid var(--rand); }
.schluessel-liste > li.leise { padding: var(--a3) var(--a4); }
.schluessel-zeile { display: flex; gap: var(--a3); align-items: center; justify-content: space-between; flex-wrap: wrap; padding: var(--a3) var(--a4); cursor: pointer; }
.schluessel-zeile:hover { background: var(--flaeche-2); }
.schluessel-text { flex: 1 1 260px; min-width: 0; }
.schluessel-text .feld-hilfe { display: block; }
.schluessel-rechte { padding: 0 var(--a4) var(--a4); }
.aufklapp-pfeil { transition: transform .15s; }
[aria-expanded="true"] > .aufklapp-pfeil { transform: rotate(90deg); }
.tabelle-begrenzt .tabelle th { position: sticky; top: 0; z-index: 1; }
.liste-kurz { margin: var(--a1) 0 0; padding-left: 1.2em; }