/* --- Farbwelten nach Renés Entwurf (09.08.2026): data-design auf <html>.
     Zwei Welten statt der bisherigen sieben — der Entwurf kennt hell und
     dunkel, mehr nicht. Die sieben alten Farbwelten sind entfallen; das steht
     als Punkt in der Lücken-Liste, damit es eine Entscheidung bleibt und
     kein Versehen. Die Bibliotheks-Szene (iframe) behält ihr warmes Holz —
     sie ist die Marke. ---------------------------------------------------- */
  html[data-design="dunkel"] {
    --bg: #05060d; --panel: #0f1020; --linie: #21223a; --text: #f3f3fa;
    --dim: #a0a0bb; --gold: #6366f1; --goldhell: #a78bfa; --gruen: #34d399;
    --blau: #60a5fa; --warn: #fb923c; --papier: #0f1020; --leder: #12132a;
    --bgHell: #090a14; --kopf: #f3f3fa; --randStark: #2e3050; --zeile: #14152a;
    --griffFarbe: #2e3050; --griffAktiv: #454770; --flaecheV: #090a14;
    --gruenText: #34d399; --warnText: #fb923c; --blauText: #60a5fa;
    --goldText: #a5b4fc;
    --schatten: 0 1px 2px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.45);
  }
  /* Eingabefelder im dunklen Design (Flow, 18.10.2026: „Das dunkle Design nützt nichts, wenn dann trotzdem so hell
     weiße Bereiche drin sind“). color-scheme lässt den Browser seine eigenen Teile dunkel zeichnen (Datumswahl,
     Rollbalken, Auswahllisten); die Grundregel ohne Gewicht gibt jedem Feld Fläche und Schrift des Designs, ein Feld
     mit eigener Regel behält sie. */
  html[data-design="dunkel"] { color-scheme: dark; }
  html[data-design="hell"] { color-scheme: light; }
  :where(html[data-design="dunkel"]) :where(textarea, select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])) {
    background-color: var(--panel); color: var(--text); }
  html[data-design="dunkel"] body {
    background: radial-gradient(900px 520px at 18% -10%, rgba(99,102,241,.13), transparent 62%),
                var(--bg); }
  /* Hell: dunkle Schlagschatten und Schein-Effekte abmildern */
  html[data-design="hell"] .blase { box-shadow: 0 1px 3px rgba(16,16,40,.06); }
  html[data-design="hell"] .popover,
  html[data-design="hell"] #bestaetigung,
  html[data-design="hell"] #dazuListe { box-shadow: var(--schatten); }
  html[data-design="hell"] #seitenmenue { box-shadow: none; }
  html[data-design="hell"] .pmInhalt { box-shadow: 0 16px 44px rgba(16,16,40,.14); }
  html[data-design="hell"] #trenner .griff { box-shadow: 0 0 0 1px rgba(16,16,40,.10); }
  html[data-design="hell"] #schleier { background: rgba(14,14,26,.34); }

  /* Design-Punkte im Einstellungen-Bereich (Vorbild: Hub theme-dots) */
  /* Einstellungs-Zeilen: EIN Muster — Label links, Steuerelement rechts */
  .einstellung { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
  .einstellung .dlabel { font-size: 12px; color: var(--dim); }
  .einstellung > :last-child { margin-left: auto; }
  #designPunkte { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
  /* Boolean als Schiebeschalter */
  .schalterKnopf { position: relative; width: 36px; height: 20px; border-radius: 99px;
    border: 1px solid var(--linie); background: var(--zeile); cursor: pointer; padding: 0;
    transition: background .15s ease, border-color .15s ease; }
  .schalterKnopf .knubbel { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
    border-radius: 50%; background: var(--dim); transition: transform .15s ease, background .15s ease; }
  .schalterKnopf.an { background: color-mix(in srgb, var(--gold) 30%, transparent);
    border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
  .schalterKnopf.an .knubbel { transform: translateX(16px); background: var(--gold); }
  .schalterKnopf:hover, .schalterKnopf:focus-visible { border-color: var(--gold); outline: none; }
  /* Zwei-Werte-Wahl als Segment-Schalter */
  .segment { display: inline-flex; border: 1px solid var(--linie); border-radius: 99px; overflow: hidden; }
  .segTeil { border: 0; background: transparent; color: var(--dim); font: inherit;
    font-size: 11px; letter-spacing: .4px; padding: 4px 11px; cursor: pointer; }
  .segTeil.aktiv { background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--text); }
  .segTeil:hover, .segTeil:focus-visible { color: var(--text); outline: none; }
  .designPunkt { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent;
    cursor: pointer; padding: 0; box-shadow: 0 0 0 1px var(--linie); }
  .designPunkt:hover, .designPunkt:focus-visible { box-shadow: 0 0 0 2px var(--dim); outline: none; }
  .designPunkt.aktiv { border-color: var(--bg); box-shadow: 0 0 0 2px var(--gold); }

  /* --- Permission-Matrix v2 (Rechte-Matrix im Team-Splitscreen) --------------- */
  .matrixReiter { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--linie);
    margin-bottom: 14px; padding-bottom: 2px; }
  .mReiter { border: 0; background: transparent; color: var(--dim); font: inherit; font-size: 13px;
    padding: 8px 13px; border-radius: 8px 8px 0 0; cursor: pointer; border-bottom: 2px solid transparent; }
  .mReiter:hover, .mReiter:focus-visible { color: var(--text); outline: none; }
  .mReiter.aktiv { color: var(--text); border-bottom-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 10%, transparent); }
  .matrixBody { min-height: 60px; }
  .matrixTitel { margin-bottom: 10px; }
  .matrixHinweis { color: var(--dim); font-size: 12.5px; margin: 2px 0 0; max-width: 62ch; }
  .matrixWerkzeug { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
  .matrixForm { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
  .mInput { background: var(--bg); border: 1px solid var(--linie); border-radius: 7px; color: var(--text);
    padding: 7px 10px; font: inherit; font-size: 13px; }
  .mInputMini { width: 78px; }
  .mFarbe { width: 38px; height: 34px; padding: 2px; background: var(--bg); border: 1px solid var(--linie);
    border-radius: 7px; cursor: pointer; }
  /* 25 Pixel hoch bis zum Kontrollgang am 23.08.2026 — zehn Stueck in der
     Team-Verwaltung, alle unter dem Haus-Mindestmass. Das Feld darf klein
     WIRKEN; seine Flaeche darf es nicht sein. */
  .mSelect { background: var(--bg); border: 1px solid var(--linie); border-radius: 7px; color: var(--text);
    padding: 6px 9px; font: inherit; font-size: 13px; cursor: pointer; min-height: 32px; }
  .mSelectMini { font-size: 12px; padding: 4px 7px; min-height: 32px; }
  .aktionSek { background: transparent; border: 1px solid var(--linie); color: var(--dim); border-radius: 9px;
    padding: 8px 14px; font: inherit; font-size: 13px; cursor: pointer; }
  .aktionSek:hover, .aktionSek:focus-visible { border-color: var(--gold); color: var(--text); outline: none; }
  .betreiberBadge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px;
    color: var(--dim); background: color-mix(in srgb, var(--gold) 8%, var(--panel)); border: 1px solid var(--linie);
    border-radius: 9px; padding: 8px 12px; margin-bottom: 12px; }
  .badgeMarke { font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--text);
    background: color-mix(in srgb, var(--gold) 30%, transparent); border-radius: 99px; padding: 2px 9px; }

  /* Rollen-Gitter (2-State) */
  .gitterHalter { overflow-x: auto; }
  .rechteMatrix { border-collapse: collapse; width: 100%; font-size: 13px; }
  .rechteMatrix th, .rechteMatrix td { border-bottom: 1px solid var(--linie); padding: 7px 9px; text-align: left; }
  .eckZelle { position: sticky; left: 0; background: var(--bgHell); color: var(--dim); font-weight: 600;
    min-width: 180px; }
  .rolleKopf { text-align: center; vertical-align: bottom; min-width: 74px; }
  .rolleName { display: block; font-weight: 600; color: var(--text); font-size: 12px; }
  .rollePos { display: block; color: var(--dim); font-size: 10.5px; }
  .stdBadge { display: inline-block; font-size: 9.5px; letter-spacing: .3px; text-transform: uppercase;
    color: var(--dim); border: 1px solid var(--linie); border-radius: 99px; padding: 0 6px; margin-top: 2px; }
  .rollePunkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px;
    flex: none; vertical-align: middle; box-shadow: 0 0 0 1px var(--linie); }
  .katZeile .katKopf { position: sticky; left: 0; background: var(--zeile); color: var(--text); font-weight: 600;
    cursor: pointer; -webkit-user-select: none; user-select: none; font-size: 12px; letter-spacing: .3px; }
  .katKopf::before { content: ""; display: inline-block; width: 0; height: 0; margin-right: 8px;
    border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
    vertical-align: middle; transition: transform .12s ease; }
  .katKopf.auf::before { transform: rotate(90deg); }
  .katGefahr .katKopf { background: color-mix(in srgb, #d0574e 16%, var(--zeile));
    box-shadow: inset 3px 0 0 #d0574e; }
  .gefahrZeile .rechtName { color: color-mix(in srgb, #d0574e 55%, var(--text)); }
  .rechtName { color: var(--text); position: sticky; left: 0; background: var(--bg); }
  .gefahrMarke { display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center;
    margin-left: 6px; font-size: 11px; font-weight: 700; color: #fff; background: #d0574e; border-radius: 50%; }
  .zelleZentrum { text-align: center; }
  .rechtBox { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--randStark);
    background: transparent; cursor: pointer; padding: 0; vertical-align: middle; position: relative; }
  .rechtBox.an { background: color-mix(in srgb, var(--gold) 78%, transparent); border-color: var(--gold); }
  .rechtBox.an::after { content: ""; position: absolute; inset: 5px; border-radius: 2px; background: var(--bg); }
  .rechtBox:not(.gesperrt):hover, .rechtBox:focus-visible { transform: scale(1.12); outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 40%, transparent); }
  .rechtBox.gesperrt { opacity: .3; cursor: not-allowed; }
  /* Fokus-Puls nach dem Umschalten (ADR-077: nur transform/box-shadow am Fokus-
     Element, kein Layout-Reflow der Nachbarn) — die ganze Matrix bleibt stehen. */
  @keyframes rechtBoxPuls {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent); }
    45%  { transform: scale(1.18); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 30%, transparent); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 transparent; }
  }
  .rechtBox.puls { animation: rechtBoxPuls .32s ease; }

  /* Rollen-/Zusatzrollen-Chips */
  .mChips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
  .rolleChip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text);
    background: var(--panel); border: 1px solid var(--linie); border-radius: 99px; padding: 3px 4px 3px 9px; }
  .chipWeg { border: 0; background: transparent; color: var(--dim); cursor: pointer; font-size: 15px;
    line-height: 1; padding: 0 4px; border-radius: 50%; }
  .chipWeg:hover, .chipWeg:focus-visible { color: #d0574e; outline: none; }

  /* Bereich-Overrides (Subjekt links, Tri-State rechts) */
  .overrideLayout { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
  .subjektListe { display: flex; flex-direction: column; gap: 4px; min-width: 150px; flex: 0 0 auto; }
  .subjektKnopf { display: flex; align-items: center; gap: 7px; text-align: left; border: 1px solid transparent;
    background: transparent; color: var(--dim); font: inherit; font-size: 13px; padding: 7px 10px;
    border-radius: 8px; cursor: pointer; }
  .subjektKnopf:hover, .subjektKnopf:focus-visible { color: var(--text); background: var(--panel); outline: none; }
  .subjektKnopf.aktiv { color: var(--text); background: var(--panel); border-color: var(--gold); }
  .subjektErweitert { margin-top: 6px; }
  .subjektErweitert summary { color: var(--dim); font-size: 12px; cursor: pointer; padding: 6px 10px; }
  .subjektRechte { flex: 1 1 320px; min-width: 280px; }
  .subjektTitel { margin: 0 0 10px; color: var(--text); }
  .overrideKat { color: var(--dim); font-size: 11px; letter-spacing: .4px; text-transform: uppercase;
    margin: 14px 0 6px; border-bottom: 1px solid var(--linie); padding-bottom: 4px; }
  .overrideZeile { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 5px 0; flex-wrap: wrap; }
  .overrideMeta { display: flex; flex-direction: column; }
  .overrideName { color: var(--text); font-size: 13px; }
  .erbtHinweis { color: var(--dim); font-size: 11px; }
  .triSeg { display: inline-flex; border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; flex: none; }
  .triOpt { border: 0; background: transparent; color: var(--dim); font: inherit; font-size: 11.5px;
    padding: 6px 11px; cursor: pointer; border-right: 1px solid var(--linie); }
  .triOpt:last-child { border-right: 0; }
  .triOpt:hover, .triOpt:focus-visible { color: var(--text); outline: none; }
  .triOpt.gesperrt, .triOpt:disabled { opacity: .3; cursor: not-allowed; }
  .triOpt.triDeny.aktiv { background: color-mix(in srgb, #d0574e 32%, transparent); color: var(--text); }
  .triOpt.triAllow.aktiv { background: color-mix(in srgb, #5a9e6a 34%, transparent); color: var(--text); }
  .triOpt.triErbt.aktiv { background: var(--zeile); color: var(--text); }

  /* Vorschau (Effektiv-Rechte mit Herkunft) */
  .vorschauHalter { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
  .vorschauZeile { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center;
    padding: 6px 0; border-bottom: 1px solid var(--linie); font-size: 13px; }
  .vStatus { font-size: 11px; letter-spacing: .3px; text-transform: uppercase; text-align: center;
    border-radius: 99px; padding: 2px 0; }
  .vErlaubt { color: #cdeccc; background: color-mix(in srgb, #5a9e6a 30%, transparent); }
  .vVerboten { color: #f3d2ce; background: color-mix(in srgb, #d0574e 30%, transparent); }
  .vName { color: var(--text); }
  .vHerkunft { color: var(--dim); font-size: 12px; text-align: right; }

  /* --- Meeting-Abschluss (23.08.2026) -------------------------------------
     Drei Bloecke, drei Ausgaenge. Alle Maße stehen HIER und nicht im
     JavaScript — sonst kommt die Handy-Regel unten nur mit `!important` dagegen
     an (Haus-Regel 17 §6, am 15.08. dreimal an einem Tag verletzt).
     Hier standen bis zum 06.09.2026 zwei tote Zeilen: ein Rumpf ohne Selektor
     (`flex: none; min-height: 32px; }`) und dahinter die Overlay-Breite
     `#abschlussModal .pmInhalt`. Der Rumpf verschluckte die Regel dahinter —
     ein CSS-Parser liest bis zur nächsten `{`-Klammer weiter. Die Breite hat
     also nie gewirkt, und sie wird auch nicht mehr gebraucht: Der Abschluss
     ist eine Spalte und nimmt die Maße jedes anderen Panels. */
  .abLaeuft:not([hidden]) { color: var(--dim); font-size: 13px; padding: 24px 0; text-align: center; }
  /* `:not([hidden])` ist hier Pflicht, keine Zier: Eine eigene `display`-Regel
     schlaegt das `hidden`-Attribut, und dann steht ein Block da, den der Code
     ausdruecklich weggelegt hat. Am 20.08.2026 dreimal in einer Stunde
     passiert — deshalb steht es an JEDER Fläche, die hier `display` setzt. */
  #abKoerper:not([hidden]) { overflow-y: auto; display: flex; flex-direction: column;
    gap: 14px; padding-right: 4px; }
  .abBlock:not([hidden]) { display: flex; flex-direction: column; gap: 8px; }
  .abBlock h3 { display: flex; align-items: center; gap: 8px; margin: 0;
    font-size: 13px; font-weight: 600; color: var(--dim); letter-spacing: .3px;
    text-transform: uppercase; }
  .abBlock h3 .ikon { width: 15px; height: 15px; }
  .abZahl { color: var(--goldText); font-weight: 700; }
  .abBlock textarea, .abPfadZeile input { width: 100%; background: var(--bg);
    color: var(--text); border: 1px solid var(--linie); border-radius: 8px;
    padding: 9px 11px; font: inherit; font-size: 13.5px; resize: vertical; }
  .abBlock textarea:focus, .abPfadZeile input:focus { outline: none; border-color: var(--gold); }
  .abPfadZeile { display: flex; align-items: center; gap: 10px; font-size: 12px;
    color: var(--dim); }
  .abPfadZeile input { flex: 1; font-size: 12.5px; }
  .abLeer { color: var(--dim); font-size: 13px; padding: 6px 0; }
  /* Die Budget-Vorwarnung unter der Kosten-Zeile (Renés F18, 06.09.2026):
     dieselbe warnende Farbe wie im Abschluss, aber ohne Sperr-Charakter — hier
     geht noch etwas, es wird nur knapp. */
  .budgetKnapp { display: flex; align-items: center; gap: 7px; margin-top: 6px;
    padding: 6px 10px; border-radius: 8px; font-size: 12.5px; color: var(--text);
    border: 1px solid var(--warn, #d98a3a);
    background: color-mix(in srgb, var(--warn, #d98a3a) 12%, transparent); }
  .budgetKnapp .ikon { width: 14px; height: 14px; flex: none; color: var(--warn, #d98a3a); }
  /* Der Notizzettel im Abschluss: Zeilen ohne Knöpfe. Dass hier nichts zu
     bedienen ist, sagt die Form — kein Rahmen, keine Griffe, nur Symbol und
     Text (Renés F11, 06.09.2026). */
  .abNotizen { display: flex; flex-direction: column; gap: 4px; }
  .abNotizZeile { display: flex; align-items: flex-start; gap: 8px; font-size: 13px;
    color: var(--text); padding: 3px 0; }
  .abNotizZeile .ikon { width: 14px; height: 14px; flex: none; margin-top: 2px;
    color: var(--dim); }
  .abNotizZeile.offen { color: var(--dim); font-style: italic; }
  .abNotizLeer { display: flex; align-items: center; gap: 8px; color: var(--dim);
    font-size: 13px; padding: 4px 0; }
  .abNotizLeer .ikon { width: 15px; height: 15px; flex: none; }
  /* Eine Aufgaben-Zeile: Haken, Titel, Zuständig, Ziel. Der Haken ist der
     Umschalter — Wort-Auswahlfelder für „ja/nein" wären drei Fremdwörter
     je Zeile. */
  .abAufgabe { display: flex; align-items: center; gap: 8px; background: var(--bg);
    border: 1px solid var(--linie); border-left: 3px solid var(--gold);
    border-radius: 8px; padding: 7px 10px; }
  .abAufgabe.aus { opacity: .45; border-left-color: var(--linie); }
  .abHaken { flex: none; width: 32px; height: 32px; display: flex; align-items: center;
    justify-content: center; background: transparent; border: 1px solid var(--linie);
    border-radius: 8px; color: transparent; cursor: pointer; padding: 0; }
  .abHaken.an { color: var(--goldText); border-color: var(--gold); }
  .abHaken .ikon { width: 16px; height: 16px; }
  .abAufgabeTitel { flex: 1; min-width: 120px; background: transparent; border: 0;
    color: var(--text); font: inherit; font-size: 13.5px; padding: 4px 2px; }
  .abAufgabeTitel:focus { outline: none; border-bottom: 1px solid var(--gold); }
  .abAufgabe select { flex: none; max-width: 150px; background: var(--zeile);
    color: var(--text); border: 1px solid var(--linie); border-radius: 8px;
    font: inherit; font-size: 12.5px; padding: 6px 8px; min-height: 32px; }
  .abWarnung { border: 1px solid var(--warn, #d98a3a); border-radius: 8px;
    background: color-mix(in srgb, var(--warn, #d98a3a) 12%, transparent);
    color: var(--text); font-size: 12.5px; padding: 8px 11px; margin-bottom: 10px; }
  .abFuss { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
    padding-top: 12px; border-top: 1px solid var(--linie); }
  .abFuss .aktion:not([hidden]) { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; }
  .abFuss .aktion .ikon { width: 15px; height: 15px; }
  .abFuss .still { margin-left: auto; color: var(--dim); }

  @media (max-width: 768px) {
    /* Auf dem Telefon bricht die Aufgaben-Zeile um: drei Felder nebeneinander
       wären je 60 Pixel breit und damit unbedienbar. Und alles Antippbare
       waechst auf 36 Pixel (Haus-Regel 17 §6). */
    .abAufgabe { flex-wrap: wrap; }
    .abAufgabeTitel { flex: 1 0 100%; order: 1; }
    .abAufgabe select { flex: 1 1 auto; max-width: none; order: 2; min-height: 36px; }
    .abHaken { width: 36px; height: 36px; }
    .abFuss .aktion { flex: 1 1 auto; justify-content: center; }
    .abFuss .still { margin-left: 0; }
  }

  /* --- Notizzettel: Gruppen nach Art (23.08.2026) -------------------------- */
  /* Der Zettel beantwortet ab jetzt „was wurde entschieden, was ist zu tun,
     was blieb offen" — nicht mehr „welcher Satz kam wann". Die Gruppen tragen
     dieselben Symbole und Farben wie der Art-Umschalter in der Zeile: gleiche
     Sache, gleiches Zeichen. */
  .nGruppe { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px;
    font-size: 11.5px; letter-spacing: .3px; text-transform: uppercase;
    color: var(--dim); }
  .nGruppe:first-child { margin-top: 2px; }
  .nGruppe .ikon { width: 14px; height: 14px; flex: none; }
  .nGruppeName { flex: 1; min-width: 0; }
  .nGruppeZahl { flex: none; color: var(--goldText); font-weight: 700; }
  .nGruppe.art-entscheidung .ikon { color: var(--goldText); }
  .nGruppe.art-aufgabe .ikon { color: var(--blau, #6f8cff); }
  .nGruppe.art-frage .ikon { color: var(--warn, #d98a3a); }
  /* Der Weg in die Planung. Nach dem Klick bleibt der Knopf stehen und wird
     ruhig — verschwinden würde heißen, dass man ihn ein zweites Mal sucht. */
  .nAktion.rein:hover, .nAktion.rein:focus-visible { border-color: var(--gold);
    color: var(--goldText); outline: none; }
  .nAktion.rein.fertig { color: var(--gruen, #16a34a); border-color: var(--gruen, #16a34a);
    opacity: .6; cursor: default; }
  /* Das Plus für die eigene Notiz: eine schmale Zeile, kein Formular. */
  .nSelbstAuf { display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 36px; margin-top: 12px; background: transparent;
    border: 1px dashed var(--linie); border-radius: 8px; color: var(--dim);
    cursor: pointer; padding: 0; }
  .nSelbstAuf:hover, .nSelbstAuf:focus-visible { border-color: var(--gold);
    color: var(--goldText); outline: none; }
  .nSelbstAuf[hidden] { display: none; }
  .nSelbstAuf .ikon { width: 16px; height: 16px; }

  /* --- Interessenten-Weg (23.08.2026) -------------------------------------- */
  /* Der Link steht immer da, auch wenn die Mail rausging: „ist angekommen?"
     kann am Messestand niemand sofort beantworten, und ein Link zum Vorlesen
     kostet nichts. */
  .demoNews { display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
    font-size: 13px; color: var(--dim); cursor: pointer; min-height: 32px; }
  .demoNews input { width: 18px; height: 18px; accent-color: var(--gold); }
  .demoLink { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 8px; }
  .demoLink input { flex: 1 1 260px; min-width: 0; background: var(--bg);
    border: 1px solid var(--linie); border-radius: 8px; color: var(--text);
    font: inherit; font-size: 12.5px; padding: 8px 10px; min-height: 32px; }
  .demoLink .nAktion.fertig { color: var(--gruen, #16a34a);
    border-color: var(--gruen, #16a34a); }
  .demoMailStand { flex: 1 1 100%; font-size: 12px; color: var(--warn, #d98a3a);
    font-weight: 400; }
  .demoMailStand.gut { color: var(--gruenText, #16a34a); }
  .dzStatus.eingeladen { color: var(--warn, #d98a3a); }
  /* Der Ausgang steht leiser als das Angebot — er ist kein zweiter Knopf,
     sondern der Weg hinaus. */
  .werbeKontakt { margin: 18px 0 6px; font-size: 13px; color: var(--dim);
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
  /* Ein Verweis ist ein Tippziel wie jeder Knopf. 18 Pixel hoch waren sie, bis
     der Bild-Prüfer sie auf 390 Pixel Breite meldete — drei Stück in einer
     Zeile, alle unter dem Mindestmaß. */
  .werbeKontakt a { color: inherit; display: inline-flex; align-items: center;
    min-height: 32px; padding: 0 2px; }
  .werbeAustragen { display: block; width: 100%; min-height: 36px; margin: 6px 0 0;
    background: transparent; border: 0; color: var(--dim); font: inherit;
    font-size: 12.5px; text-decoration: underline; cursor: pointer; }
  .werbeAustragen:hover:not(:disabled), .werbeAustragen:focus-visible {
    color: var(--text); outline: none; }
  .werbeAustragen:disabled { text-decoration: none; cursor: default; }

  @media (max-width: 768px) {
    .demoLink input { flex: 1 1 100%; min-height: 36px; }
    .demoLink .nAktion { width: 36px; height: 36px; }
    .demoNews { min-height: 36px; }
    .werbeKontakt a { min-height: 36px; }
  }

  /* --- Testzugänge im Admin-Bereich (23.08.2026) --------------------------- */
  /* Eine Zeile je Zugang. Zwei Balken statt einer Zahl: Züge und Geld greifen
     getrennt, und wer nur eines zeigt, verdeckt die Grenze, die zuerst
     zuschlägt. */
  .adminDemoZeile { border: 1px solid var(--linie); border-left: 3px solid var(--linie);
    border-radius: 8px; padding: 9px 12px; margin-bottom: 8px; display: flex;
    flex-direction: column; gap: 5px; }
  .adminDemoZeile.aktiv { border-left-color: var(--gruen, #16a34a); }
  .adminDemoZeile.eingeladen { border-left-color: var(--warn, #d98a3a); }
  .adminDemoZeile.werbung { border-left-color: var(--dim); }
  .adzKopf { display: flex; align-items: center; gap: 10px; }
  .adzMail { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .adzStand { flex: none; font-size: 11px; letter-spacing: .3px;
    text-transform: uppercase; color: var(--dim); }
  .adzStand.aktiv { color: var(--gruenText, #16a34a); }
  .adzStand.eingeladen { color: var(--warn, #d98a3a); }
  .adzMeta { font-size: 11.5px; color: var(--dim); }
  .adzBalken { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 2px; }
  .adzMass { display: flex; align-items: center; gap: 7px; flex: 1 1 160px; }
  .adzWort { font-size: 11px; color: var(--dim); min-width: 46px; }
  .adzBahn { flex: 1; height: 5px; border-radius: 99px; background: var(--zeile);
    overflow: hidden; }
  .adzBahn > span { display: block; height: 100%; border-radius: 99px;
    background: var(--gold); }
  .adzMass.voll .adzBahn > span { background: var(--warn, #d98a3a); }
  .adzZahl { font-size: 11px; color: var(--dim); white-space: nowrap; }

  /* --- Rückmeldungen im Betreiber-Bereich (25.08.2026) --------------------- */
  /* Dieselbe Zeilen-Form wie die Testzugänge darüber; der Rand links trägt die
     Bewertung als Farbe. Eine Zeile ohne Absender ist der Normalfall nach drei
     Tagen (das Konto ist dann gelöscht), nicht eine Panne. */
  .adminRmZeile { display: flex; align-items: flex-start; gap: 10px;
    border: 1px solid var(--linie); border-left: 3px solid var(--linie);
    border-radius: 8px; padding: 9px 12px; margin-bottom: 8px; }
  .adminRmZeile.gut { border-left-color: var(--gruen); }
  .adminRmZeile.geht { border-left-color: var(--linie); }
  .adminRmZeile.schlecht { border-left-color: var(--warn); }
  .adminRmSymbol { display: grid; place-items: center; width: 22px; height: 22px;
    flex: none; color: var(--dim); }
  .adminRmZeile.gut .adminRmSymbol { color: var(--gruenText); }
  .adminRmZeile.schlecht .adminRmSymbol { color: var(--warnText); }
  .adminRmZeichen { width: 16px; height: 16px; }
  .adminRmRumpf { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .adminRmText { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text);
    white-space: pre-wrap; overflow-wrap: anywhere; }
  .adminRmMeta { font-size: 11.5px; color: var(--dim); }

  @media (max-width: 768px) {
    .adzMass { flex: 1 1 100%; }
  }

  @media (max-width: 768px) {
    /* Unterhalb von 768 gilt 36 — auch fuer die Auswahlfelder im Admin-Bereich. */
    .adminZeile select, .fristFeld { min-height: 36px; }
  }

  @media (max-width: 768px) {
    .mSelect, .mSelectMini { min-height: 36px; }
  }