/* ============================================================
   NOEOs Stylesheet — UEBERNOMMEN, nicht von Hand geschrieben
   ============================================================
   Quelle: noeointerface/public/css/noeo.css

   NICHT HIER AENDERN. Was hier anders werden soll, wird in
   noeointerface geaendert und von dort erneut kopiert. Alles andere
   fuehrt dazu, dass die Oberflaechen auseinanderlaufen, und man sieht
   es erst, wenn man zwei Bildschirmfotos nebeneinanderlegt.

   Was NUR hier gilt, steht in noeo-dibidam.css — mit Begruendung je
   Regel. Die Regeln dahinter stehen in INTERFACE.md.
   ============================================================ */

/* ============================================================
   NOEO — Design Tokens
   Grundhaltung: Ordnung durch Weissraum, Linien und Typografie.
   Keine Karten, keine geschachtelten Container.
   ============================================================ */
:root{
  /* Grundhoehe aller Controls: Suche, Buttons, Dropdowns, Felder */
  --ctrl-h: 44px;
  --hdr-h: 72px;
  --r: 10px;
  --r-sm: 8px;

  /* Neutrale: warm gebrochen, leicht zum Flieder verschoben */
  --bg:        #FCFCFA;
  --surface:   #FFFFFF;
  --ink:       #1B1B18;
  --ink-2:     #56554E;
  /* 4,51:1 auf dem Seitengrund - gerade ueber der Grenze fuer lesbaren Text.
     Vorher #8B8A81 mit 3,38:1: leise gemeint, aber unter dem, was als lesbar
     gilt. Leise heisst gedaempft, nicht schlecht zu sehen. Gemessen, nicht
     geschaetzt - die Pruefung rechnet es bei jedem Lauf nach. */
  --ink-3:     #76756C;
  --line:      #E6E4DD;
  --line-stark:#C3C0B4;

  /* Verlaeufe als Token, nicht als feste Werte. Ein Verlauf ist zwei Farben -
     also zwei Token, und der Dunkelmodus tauscht beide. Vorher standen sie
     als Hex mitten in den Regeln und waeren als einzige nicht mitgekippt. */
  --flaeche-a:  #FFFFFF;  --flaeche-b:  #FCFCF9;
  --stark-a:    #2C2C27;  --stark-b:    #171715;
  --stark-a-an: #3A3A33;  --stark-b-an: #242420;
  --auf-stark:  #FFFFFF;
  --akzent-a:   #F2EFFC;  --akzent-b:   #E4DFF8;

  /* Flaechen, die durchscheinen oder auf dunklem Grund liegen. Sie waren die
     letzten festen Werte - und der Kopf war deshalb im Dunkelmodus hell. */
  /* Die Wolken der Anmeldeseite. Als Token, weil sie im Dunkeln andere sein
     muessen - hell ueber dunkel ergibt keinen Pastellton, sondern Schleier.
     Genau so sah die Anmeldeseite nach dem ersten Versuch aus. */
  --wolken:
    radial-gradient(86% 92% at   2% -10%, rgba(208,199,242,.88) 0%, rgba(208,199,242,0) 60%),
    radial-gradient(74% 82% at 100%   0%, rgba(186,213,236,.64) 0%, rgba(186,213,236,0) 58%),
    radial-gradient(84% 88% at  88% 110%, rgba(248,230,193,.72) 0%, rgba(248,230,193,0) 60%),
    radial-gradient(66% 74% at   4% 108%, rgba(202,233,211,.54) 0%, rgba(202,233,211,0) 60%);

  --kopf-grund: rgba(252,252,250,.76);
  --schleier:   rgba(255,255,255,.86);
  --deckel:     rgba(24,24,20,.56);
  --auf-deckel: #FFFFFF;
  --schalter:   #EDECE7;
  --knauf:      #FFFFFF;
  --ergaenzt-a: #F7F5FE;  --ergaenzt-b: #F1EDFB;
  --line-2:    #D5D3C9;
  --hover:     #F4F3EF;
  --hover-2:   #EDEBE5;

  /* Pastell-Primaerfarbe: markiert den aktuellen Ort */
  --accent-bg:   #EDEAF9;
  --accent-line: #D9D3F2;
  --accent-ink:  #4B3F9E;
  --focus:       #5A4BD1;

  /* Markenfarbe der Wortmarke. noeo2026 gibt keine Fuellfarbe vor,
     das bedeutet Schwarz. Auf var(--ink) gesetzt saesse sie ruhiger. */
  --logo-ink:    #000000;

  /* Pastell-Statussystem — Farbe unterstuetzt, traegt nie allein */
  --st-aktiv-bg:#E3F1E6;   --st-aktiv-ink:#2C6740;
  --st-entw-bg: #FAF0D6;   --st-entw-ink: #7A5A16;
  --st-arbeit-bg:#EDE8F8;  --st-arbeit-ink:#54409A;
  --st-fehler-bg:#FAE3E3;  --st-fehler-ink:#8B3030;
  --st-info-bg: #E1EDF7;   --st-info-ink: #2A587E;
  --st-weg-bg:  #ECEBE6;   --st-weg-ink:  #6B6A62;

  --shadow: 0 14px 40px rgba(24,24,20,.13), 0 2px 8px rgba(24,24,20,.05);
}

*,*::before,*::after{ box-sizing:border-box }
/* Der Platz fuer den Rollbalken wird IMMER freigehalten, auch auf kurzen
   Seiten. Sonst ist die Flaeche mal 15px breiter und mal nicht, und weil der
   Inhalt mittig sitzt, wandert beim Seitenwechsel alles um die halbe
   Balkenbreite - das Logo springt, die Kopfzeile springt, die Spalten
   springen. Ein Interface darf nicht huepfen.
   scrollbar-gutter versteht jeder aktuelle Browser; wo nicht, sorgt
   overflow-y:scroll fuer dasselbe Ergebnis mit sichtbarer Spur. */
html{ -webkit-text-size-adjust:100%; overflow-y:scroll; scrollbar-gutter:stable }
@supports (scrollbar-gutter: stable){
  html{ overflow-y:auto }
}
body{
  margin:0;
  color:var(--ink);
  background-color:var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric: tabular-nums;
}
/* Weicher Pastellgrund: drei sehr flache Verlaufsfelder, am Viewport
   verankert, damit Kopf und Inhalt auf demselben Farbverlauf sitzen.

   Als eigene FLAECHE hinter allem, nicht als background-attachment:fixed am
   body. Der Weg ueber attachment ist auf iOS berüchtigt: Safari zeichnet den
   Hintergrund beim Scrollen nach, und mit der ein- und ausfahrenden
   Adressleiste rutscht er sichtbar - das Interface "wandert". Eine fixierte
   Flaeche dahinter sieht gleich aus und steht still. */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--grund);
  background-repeat:no-repeat;
}
:root{
  --grund:
    radial-gradient(1100px 560px at 6% -12%, #EFECFB 0%, rgba(239,236,251,0) 72%),
    radial-gradient(900px 500px at 97% -8%, #E7F0F6 0%, rgba(231,240,246,0) 70%),
    radial-gradient(820px 520px at 68% 112%, #FBF4E7 0%, rgba(251,244,231,0) 72%);
}

button,input,select,textarea{ font:inherit; color:inherit; font-variant-numeric:inherit }
h1,h2,h3,p{ margin:0 }
a{ color:inherit }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:6px }
::selection{ background:var(--accent-bg); color:var(--accent-ink) }

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* Der seitliche Innenabstand ist ein Token, weil sich andere Masse darauf
   beziehen - etwa wo die ausgefahrene Suchleiste enden muss. Als feste Zahl
   an zwei Stellen laufen sie beim naechsten Umbruch auseinander. */
:root{ --wrap-pad: 40px }
.wrap{ max-width:1180px; margin:0 auto; padding:0 var(--wrap-pad) }

/* ============================================================
   Header — Logo links (Navigation), Suche + Konto rechts
   Darunter: eine durchgehende horizontale Trennlinie
   ============================================================ */
.hdr{
  position:sticky; top:0; z-index:60;
  background:var(--kopf-grund);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  backdrop-filter:blur(16px) saturate(1.6);
  border-bottom:1px solid var(--line);
}
.hdr__inner{
  position:relative;
  height:var(--hdr-h);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
/* Der Knopf ist 44px breit, der sichtbare Kreis darin nur 32px - er saesse
   also 6px weiter innen als jede Kante darunter. Derselbe negative Rand wie
   beim Logo links, nur gespiegelt: die Bedienflaeche ragt hinaus, die
   sichtbare Form fluchtet. */
.hdr__right{ display:flex; align-items:center; gap:2px; margin-right:-6px }

/* --- Logo = Hauptnavigation --------------------------------- */
.logo{
  display:inline-flex; align-items:center; flex:none; gap:11px;
  height:var(--ctrl-h); padding:0 12px; margin-left:-12px;
  border:0; background:transparent; border-radius:var(--r);
  cursor:pointer;
}
.logo:hover{ background:var(--hover) }
/* Vier Festlegungen, damit die Marke in jeder Engine gleich aussieht:
   1. width/height stehen als Attribut UND in CSS. Ohne sie leitet Chrome die
      Breite aus der viewBox ab, Safari nicht verlässlich.
   2. flex:none - sonst darf die Flex-Zeile des Headers die Marke stauchen.
   3. Die viewBox hat ringsum 12 Einheiten Luft (Tinte: 183 122 1789 696).
      Läge die Beschnittkante auf der Tinte, schnitte eine Engine, die beim
      Kantenglätten anders rundet, die äußerste Pixelspalte ab - rechts.
   4. overflow:visible - falls trotzdem etwas danebengeht, wird gezeichnet
      statt abgeschnitten. Sichtbarer Fehler schlägt stillen Fehler. */
.logo__svg{
  display:block; width:66px; height:19px; flex:none;
  overflow:visible; color:var(--logo-ink);
}
.logo__chev{ flex:none; color:var(--ink-3); transition:transform .2s ease }
.logo[aria-expanded="true"] .logo__chev{ transform:rotate(180deg) }
.logo[aria-expanded="true"]{ background:var(--hover) }

/* --- Icon-Buttons ------------------------------------------- */
.iconbtn{
  width:var(--ctrl-h); height:var(--ctrl-h);
  display:inline-flex; align-items:center; justify-content:center;
  border:0; background:transparent; border-radius:var(--r);
  color:var(--ink-2); cursor:pointer;
}
.iconbtn:hover{ background:var(--hover); color:var(--ink) }
.iconbtn[aria-expanded="true"]{ background:var(--hover); color:var(--ink) }
.avatar{
  width:32px; height:32px; border-radius:50%;
  background-image:linear-gradient(142deg,var(--akzent-a) 0%,var(--akzent-b) 100%);
  color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:600; letter-spacing:.04em;
}

/* --- Suche: faehrt rechts aus, so breit wie eine uebliche Anfrage --- */
:root{ --search-w: 460px }
/* Die Leiste endet LINKS von den Symbolknoepfen, statt sie zu ueberdecken.
   Vorher wich das Kontosymbol aus und das Schliesskreuz der Suchleiste kam
   genau dort zu liegen - zwei verschiedene Knoepfe an derselben Stelle.
   Jetzt wird aus der Lupe selbst das Kreuz: ein Knopf, zwei Zustaende. */
.searchbar{
  /* `right` misst vom Rand des Kastens EINSCHLIESSLICH seines Innenabstands.
     Ohne --wrap-pad endete die Leiste um genau diesen Abstand zu weit rechts
     und schob sich unter die Lupe. */
  position:absolute; right:calc(var(--wrap-pad) + var(--hdr-icons));
  top:50%; transform:translateY(-50%);
  width:min(var(--search-w), calc(100% - var(--wrap-pad) * 2 - var(--hdr-icons)));
  display:flex; align-items:center;
  clip-path:inset(0 0 0 100%);
  transition:clip-path .34s cubic-bezier(.22,.8,.28,1);
  pointer-events:none;
}
.searchbar.is-open{ clip-path:inset(0 0 0 0); pointer-events:auto }
.searchbar .field{ flex:1 1 auto; min-width:0 }
/* Zwei Symbolknoepfe zu 44px, ein Spalt von 2px, minus der negative Rand,
   mit dem die Kopfzeile rechts fluchtet - plus Luft zur Suchleiste. */
:root{ --hdr-icons: 96px }

/* --- Suchergebnisse ----------------------------------------- */
.results{
  position:absolute; left:auto; right:calc(var(--wrap-pad) + var(--hdr-icons));
  top:calc(var(--hdr-h) + 8px);
  width:min(var(--search-w), calc(100% - var(--wrap-pad) * 2 - var(--hdr-icons)));
  background-color:var(--surface);
  background-image:linear-gradient(180deg,var(--flaeche-a) 0%,var(--flaeche-b) 100%);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow);
  padding:6px; z-index:70;
  display:none;
}
.results.is-open{ display:block }
.result{
  display:flex; align-items:center; gap:14px; width:100%;
  /* Feste Hoehe war richtig, solange ein Treffer eine Zeile hatte. Mit der
     zweiten Zeile - E-Mail, Ort - muss die Zeile mitwachsen duerfen. */
  min-height:52px; padding:7px 12px; border:0; background:transparent;
  border-radius:var(--r); cursor:pointer; text-align:left;
  /* Der ganze Treffer ist ein Link, also unterstrich der Browser JEDEN Teil
     davon - Name, Adresse und die Bereichsangabe rechts. Drei Unterstriche in
     einer Zeile, und keiner davon zeigte etwas an, was nicht ohnehin klar
     war: dass man hier klicken kann, sagt die Flaeche beim Ueberfahren. */
  text-decoration:none;
}
.result:hover{ background:var(--hover) }
.result__main{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.result__name{ font-weight:500 }
.result__where{ margin-left:auto; font-size:12.5px; color:var(--ink-3) }
.results__empty{ padding:18px 12px; color:var(--ink-3); font-size:14px }

/* ============================================================
   Popdowns — Navigation, Konto, Kontextmenues
   ============================================================ */
.menu{
  position:fixed; z-index:80;
  min-width:210px;
  background-color:var(--surface);
  background-image:linear-gradient(180deg,var(--flaeche-a) 0%,var(--flaeche-b) 100%);
  border:1px solid var(--line);
  border-radius:14px;
  padding:6px;
  box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
}
.menu.is-open{ opacity:1; visibility:visible; transform:none; pointer-events:auto }
.menu__item{
  display:flex; align-items:center; gap:12px;
  width:100%; height:42px; padding:0 12px;
  border:0; background:transparent; border-radius:var(--r);
  font-size:14.5px; text-align:left; cursor:pointer; color:var(--ink);
}
.menu__item:hover, .menu__item:focus-visible{ background:var(--hover) }
.menu__item[aria-current="page"]{ background-image:linear-gradient(104deg,var(--akzent-a) 0%,var(--akzent-b) 100%);
  color:var(--accent-ink); font-weight:500 }
.menu__item svg{ color:var(--ink-3); flex:none }
.menu__item[aria-current="page"] svg{ color:var(--accent-ink) }
.menu__item--danger{ color:var(--st-fehler-ink) }
.menu__item--danger svg{ color:var(--st-fehler-ink) }
.menu__hint{ margin-left:auto; font-size:12px; color:var(--ink-3) }
.menu__sep{ height:1px; background:var(--line); margin:6px 10px }
.menu__label{
  padding:12px 12px 6px; font-size:12.5px; font-weight:500; color:var(--ink-3);
}
.menu--nav{ width:300px; padding:8px }
.menu--nav .menu__item{ height:46px; font-size:15px }
.menu--user{ width:270px }
.menu__person{ padding:12px 12px 14px }
.menu__person b{ display:block; font-size:15px; font-weight:600 }
.menu__person span{ display:block; font-size:13px; color:var(--ink-3); margin-top:2px }
.menu__build{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 12px 4px; font-size:12px; color:var(--ink-3);
}
.menu__build b{ display:block; font-weight:500; color:var(--ink-2) }
.menu__build span{ display:block; margin-top:2px }
/* Das Zahnrad sitzt bewusst klein neben der Bauangabe und nicht als
   gleichrangiger Eintrag im Menue: Systemeinstellungen ruft man selten,
   und die Bauangabe ist der Ort, an dem man ohnehin nachsieht, wenn man
   wissen will, was hier laeuft. */
.menu__cog{
  margin-left:auto; flex:none;
  width:30px; height:30px; margin-top:-4px;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; background:transparent; border-radius:8px;
  color:var(--ink-3);
}
.menu__cog:hover{ background:var(--hover); color:var(--ink) }
/* Steht man schon dort, sagt es das - sonst ist das Zahnrad der einzige
   Eintrag im Menue ohne erkennbaren Ist-Zustand. */
.menu__cog[aria-current]{ background:var(--accent-bg); color:var(--accent-ink) }

/* ============================================================
   Breadcrumb + Seitenkopf
   ============================================================ */
.crumbs{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:22px 0 0; font-size:13px }
.crumbs button{
  border:0; background:transparent; padding:2px 0; cursor:pointer;
  color:var(--ink-3); border-radius:4px;
}
.crumbs a{ color:var(--ink-3); text-decoration:none; border-radius:4px }
.crumbs button:hover, .crumbs a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px }
.crumbs__sep{ color:var(--line-2) }
.crumbs__now{ color:var(--ink-2) }

/* --- Unterbereiche eines Bereichs -----------------------------------------
   Eine Zeile ruhiger Verweise unter dem Titel der LANDESEITE - und nur dort.
   Unterhalb traegt die Brotkrume den Weg zurueck; die Zeile dort zu
   wiederholen sagte dasselbe zweimal und hoebe den aktuellen Ort ein zweites
   Mal hervor. Keine Reiter mit Kaesten (Kaesten gibt es hier nicht) und keine
   Seitenleiste, die auf dem Telefon ein Drittel der Breite nimmt. */
.unterbar{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding:0 0 30px }
.unterbar__ort{
  position:relative; padding:4px 0;
  font-size:15px; font-weight:500; color:var(--accent-ink); text-decoration:none;
}
.unterbar__ort::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--accent-line);
}
.unterbar__ort:hover::after{ background:var(--accent-ink) }

.pagehead{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px 24px; flex-wrap:wrap; padding:14px 0 28px;
}
h1{ font-size:31px; font-weight:600; letter-spacing:-.022em; text-wrap:balance }
.pagehead__meta{ margin-top:7px; font-size:13.5px; color:var(--ink-3) }
.pagehead__actions{ display:flex; align-items:center; gap:10px; margin-top:2px; flex-wrap:wrap }
/* Drei Knoepfe passen auf einem schmalen Telefon nicht nebeneinander. Sie
   brechen um, statt hinauszuragen. */
@media (max-width: 520px){
  .pagehead__actions{ width:100%; }
  .pagehead__actions .btn{ flex:1 1 auto }
}

/* ============================================================
   Controls — gemeinsame Grundhoehe 44px
   ============================================================ */
.btn{
  height:var(--ctrl-h); padding:0 18px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:var(--r);
  font-size:14.5px; font-weight:500; white-space:nowrap; cursor:pointer;
  text-decoration:none;
  transition:background .14s ease, border-color .14s ease;
}
.btn--primary{ background-image:linear-gradient(180deg,var(--stark-a) 0%,var(--stark-b) 100%); color:var(--auf-stark) }
.btn--primary:hover{ background-image:linear-gradient(180deg,var(--stark-a-an) 0%,var(--stark-b-an) 100%) }
.btn--secondary{ background:var(--surface); border-color:var(--line-2); color:var(--ink) }
.btn--secondary:hover{ background:var(--hover) }
/* Nur fuer Handlungen, die sich nicht zuruecknehmen lassen. Rot traegt hier
   nicht die Bedeutung allein - das Wort auf dem Knopf sagt sie auch. */
.btn--gefahr{ background-image:linear-gradient(180deg,#9B3838 0%,#7E2B2B 100%); color:#FFF }
.btn--gefahr:hover{ background-image:linear-gradient(180deg,#AC4242 0%,#8E3232 100%) }
.btn--quiet{ background:transparent; color:var(--ink-2) }
.btn--quiet:hover{ background:var(--hover); color:var(--ink) }
.btn[disabled]{ opacity:.42; cursor:not-allowed }
.btn[disabled]:hover{ background-color:var(--surface) }

/* Kontextmenue-Zeichen: ··· */
.dots{
  width:var(--ctrl-h); height:var(--ctrl-h);
  display:inline-flex; align-items:center; justify-content:center;
  border:0; background:transparent; border-radius:var(--r);
  color:var(--ink-3); cursor:pointer;
  font-size:19px; line-height:1; letter-spacing:.08em;
}
.dots:hover, .dots[aria-expanded="true"]{ background:var(--hover-2); color:var(--ink) }
.dots--row{ width:36px; height:36px; border-radius:9px; font-size:18px; opacity:.7 }
.row:hover .dots--row, .dots--row:hover, .dots--row:focus-visible{ opacity:1 }

.field{ position:relative; display:block }
.field > svg{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--ink-3); pointer-events:none;
}
.input, .select, .textarea{
  width:100%; height:var(--ctrl-h); padding:0 14px;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r);
  font-size:14.5px;
  transition:border-color .14s ease, box-shadow .14s ease;
}
.input::placeholder, .textarea::placeholder{ color:var(--ink-3) }
/* Das eigene Loeschkreuz von type=search ist in jedem Browser anders gross,
   anders platziert und in Safari knallblau. Wir zeigen es nicht - geloescht
   wird mit der Ruecktaste oder ueber "Suche zuruecksetzen". */
.input[type=search]::-webkit-search-cancel-button,
.input[type=search]::-webkit-search-decoration{ -webkit-appearance:none; appearance:none }
.input:hover, .select:hover, .textarea:hover{ border-color:var(--line-stark) }
.input:focus, .select:focus, .textarea:focus{
  outline:none; border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(90,75,209,.14);
}
.field > svg + .input{ padding-left:42px }
.textarea{ height:auto; min-height:132px; padding:12px 14px; line-height:1.55; resize:vertical }
.select{
  appearance:none; -webkit-appearance:none;
  padding-right:38px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%238B8A81' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}

.check{
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; margin:0; flex:none;
  border:1.5px solid var(--line-2); border-radius:5px;
  background:var(--surface); cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
}
.check:hover{ border-color:var(--line-stark) }
.check:checked, .check:indeterminate{ background:var(--ink); border-color:var(--ink) }
.check:checked{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5.2 4.3 8.5 11 1.8' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}
.check:indeterminate{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='2' viewBox='0 0 10 2' fill='none'%3E%3Cpath d='M1 1h8' stroke='%23fff' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}

/* Filter und Sortierung: Befehle mit Symbol, nicht nackte Auswahlfelder */
.control{
  height:var(--ctrl-h); padding:0 14px;
  display:inline-flex; align-items:center; gap:9px;
  background-color:var(--surface);
  background-image:linear-gradient(180deg,var(--flaeche-a) 0%,var(--flaeche-b) 100%);
  border:1px solid var(--line-2); border-radius:var(--r);
  font-size:14.5px; color:var(--ink); cursor:pointer; white-space:nowrap;
  transition:border-color .14s ease, background-color .14s ease;
}
.control:hover{ background-image:none; background-color:var(--hover); border-color:var(--line-stark) }
.control[aria-expanded="true"]{ background-image:none; background-color:var(--hover); border-color:var(--line-stark) }
.control > svg{ color:var(--ink-3); flex:none }
.control__label{ overflow:hidden; text-overflow:ellipsis }
.control__chev{ margin-left:1px; transition:transform .18s ease }
.control[aria-expanded="true"] .control__chev{ transform:rotate(180deg) }
/* Gesetzter Filter bleibt auf einen Blick erkennbar */
.control.is-on{
  background-image:linear-gradient(140deg,var(--akzent-a) 0%,var(--akzent-b) 100%);
  border-color:var(--accent-line); color:var(--accent-ink);
}
.control.is-on > svg{ color:var(--accent-ink) }

.seg{
  display:inline-flex; justify-self:start; height:var(--ctrl-h); padding:3px; gap:3px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r);
}
.seg button{
  height:100%; padding:0 16px; border:0; background:transparent;
  border-radius:var(--r-sm); font-size:14px; color:var(--ink-2); cursor:pointer;
}
.seg button:hover{ background:var(--hover) }
.seg button[aria-pressed="true"]{ background-image:linear-gradient(140deg,var(--akzent-a) 0%,var(--akzent-b) 100%);
  color:var(--accent-ink); font-weight:500 }

/* ============================================================
   Status — Pastellflaeche + Wort + eigene Markerform.
   Die Form macht den Status auch ohne Farbe unterscheidbar.
   ============================================================ */
.status{
  display:inline-flex; align-items:center; gap:8px;
  height:27px; padding:0 11px 0 10px;
  border-radius:999px; font-size:12.5px; font-weight:500; white-space:nowrap;
  background-image:linear-gradient(138deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 64%);
}
.status__mk{ width:9px; height:9px; flex:none }
.status--aktiv  { background-color:var(--st-aktiv-bg);  color:var(--st-aktiv-ink) }
.status--entwurf{ background-color:var(--st-entw-bg);   color:var(--st-entw-ink) }
.status--arbeit { background-color:var(--st-arbeit-bg); color:var(--st-arbeit-ink) }
.status--fehler { background-color:var(--st-fehler-bg); color:var(--st-fehler-ink) }
.status--info   { background-color:var(--st-info-bg);   color:var(--st-info-ink) }
.status--weg    { background-color:var(--st-weg-bg);    color:var(--st-weg-ink) }
/* Markerformen: voll · Ring · halb · Raute · Quadrat · Rahmen */
.status--aktiv   .status__mk{ border-radius:50%; background:currentColor }
.status--entwurf .status__mk{ border-radius:50%; border:1.6px solid currentColor }
.status--arbeit  .status__mk{ border-radius:50%; border:1.6px solid currentColor;
  background:linear-gradient(to right, currentColor 0 50%, transparent 50% 100%) }
.status--fehler  .status__mk{ background:currentColor; transform:rotate(45deg); width:8px; height:8px }
.status--info    .status__mk{ background:currentColor; border-radius:2px }
.status--weg     .status__mk{ border:1.6px solid currentColor; border-radius:2px }

/* ============================================================
   Liste — Zeilen, Linien, Weissraum. Keine Tabellenoptik.
   ============================================================ */
.toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  min-height:var(--ctrl-h); padding-bottom:18px;
}
.toolbar__search{ flex:1 1 260px; max-width:380px }
.toolbar__gap{ flex:1 1 auto }

.selbar{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; min-height:var(--ctrl-h); padding-bottom:18px }
.selbar__count{ font-weight:500 }
.linkbtn{
  border:0; background:transparent; padding:2px 0; cursor:pointer;
  font-size:14px; color:var(--ink-2);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-2);
}
.linkbtn:hover{ color:var(--ink); text-decoration-color:currentColor }
.linkbtn--danger{ color:var(--st-fehler-ink) }

.list{ --cols: 26px minmax(0,1fr) 150px 168px 40px }
/* Konten tragen ein Bild und eine Rolle mehr. Die Spalten stehen hier und
   nicht am Element: eine Liste hat EIN Raster, sonst steht die Kopfzeile
   ueber anderen Kanten als die Zeilen darunter. */
/* Ohne ···-Spalte: die einzige Handlung an einer Zeile ist "oeffnen", und
   dafuer ist der Name da. Ein Kontextmenue kommt, wenn es mehr als eine
   Handlung gibt - sonst ist es ein Menue mit einem Eintrag. */
.list--konten{ --cols: 26px 36px minmax(0,1fr) 150px 150px 108px }
/* Dieselben Zeilen ohne die Auswahlspalte: in einem Reiter gibt es nichts
   auszuwaehlen, also auch kein Kaestchen davor. Eine eigene Spaltenangabe und
   keine geerbte - sonst rutscht jede Zelle um eins und der Name steht in der
   Breite eines Kaestchens. Genau das ist mir hier passiert. */
.list--mitglieder{ --cols: 36px minmax(0,1fr) 150px 150px 108px }
.list--firmen{ --cols: 26px 44px minmax(0,1fr) 190px 120px }
.list--rollen{ --cols: minmax(0,1fr) 190px 90px }
.list--connectoren{ --cols: minmax(0,1fr) 170px 100px }
.avatar--zeile{ width:36px; height:36px; font-size:12px }
.row__rolle{ font-size:14px; color:var(--ink-2) }
.list__head{
  display:grid; grid-template-columns:var(--cols); gap:16px; align-items:center;
  padding:0 8px 12px; border-bottom:1px solid var(--line);
  font-size:12.5px; font-weight:500; color:var(--ink-3);
}
.row{
  display:grid; grid-template-columns:var(--cols); gap:16px; align-items:center;
  padding:15px 8px; border-bottom:1px solid var(--line); border-radius:var(--r-sm);
  transition:background .12s ease;
}
.row:hover{ background:var(--hover) }
.row.is-picked{ background-image:linear-gradient(104deg,#F4F1FD 0%,#E9E4F9 100%) }
.row__name{
  border:0; background:transparent; padding:0; text-align:left; cursor:pointer;
  font-size:15px; font-weight:500; color:var(--ink); border-radius:4px;
  display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.row__name:hover{ text-decoration:underline; text-underline-offset:3px }
a.row__name{ text-decoration:none }
a.dots--row{ text-decoration:none }
/* Am Rechner loesen sich die beiden Huellen auf und ihre Kinder stehen als
   eigene Spalten im Raster der Zeile. Am Telefon werden sie zu zwei
   uebereinanderliegenden Bloecken. Die Zuordnung haengt damit an NAMEN und
   nicht an :nth-child - eine Spalte mehr bricht sonst das ganze Handy-Layout,
   und genau das war bei der Kontenliste passiert. */
/* NUR die Metazeile loest sich auf. Der Namensblock bleibt EINE Zelle -
   sonst werden Name und Adresse zu zwei Rasterzellen und alles rutscht um
   eine Spalte. Genau das war hier zuerst passiert. */
.row__meta{ display:contents }
.row__haupt{ min-width:0 }
.row > *{ min-width:0 }
.row__sub{ margin-top:3px; font-size:13px; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* Die Statusmarke ist so breit wie ihr Wort. Als Rasterkind wuerde sie sonst
   auf die volle Spaltenbreite gezogen und saehe aus wie eine Flaeche. */
.row > .status{ justify-self:start }
.row__date{ font-size:13.5px; color:var(--ink-2) }
.row__end{ display:flex; justify-content:flex-end }

.listfoot{ padding:18px 8px 0; font-size:13px; color:var(--ink-3) }

.empty{ padding:64px 8px; text-align:center }
.empty b{ display:block; font-size:16px; font-weight:600 }
.empty span{ display:block; margin:6px 0 16px; color:var(--ink-3); font-size:14px }

/* ============================================================
   Konto — Schalter, unveränderliche Werte, Passwort
   ============================================================ */

/* Einwilligung: ein Schalter, kein Kästchen. Zustimmen und Widerrufen
   müssen gleich leicht sein und aus einem Meter Abstand unterscheidbar. */
.switch{
  appearance:none; -webkit-appearance:none;
  position:relative; flex:none; width:46px; height:28px; margin:0;
  border:1px solid var(--line-2); border-radius:999px;
  background-color:var(--schalter); cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease;
}
.switch::after{
  content:""; position:absolute; top:2px; left:2px;
  width:22px; height:22px; border-radius:50%;
  background:var(--knauf); box-shadow:0 1px 3px rgba(24,24,20,.3);
  transition:transform .18s cubic-bezier(.22,.8,.28,1);
}
.switch:hover{ border-color:var(--line-stark) }
.switch:checked{
  background-color:var(--accent-ink);
  background-image:linear-gradient(140deg,#6A5CD8 0%,#4B3F9E 100%);
  border-color:transparent;
}
.switch:checked::after{ transform:translateX(18px) }

.optin{
  display:flex; align-items:flex-start; justify-content:space-between; gap:28px;
  padding:20px 0;
}
/* Gleichrangige Zeilen einer Liste: die Linie steht ZWISCHEN ihnen, nicht
   unter jeder. Eine Linie am Ende trennt nichts mehr ab. */
.optin + .optin{ border-top:1px solid var(--line) }
.optin:first-of-type{ padding-top:2px }
.optin__text{ min-width:0 }
.optin__title{ display:block; font-size:15px; font-weight:500 }
.optin__hint{ display:block; margin-top:5px; font-size:13px; color:var(--ink-3); max-width:52ch }
.optin__log{ display:block; margin-top:9px; font-size:12.5px; color:var(--ink-3) }
.optin__log b{ font-weight:500; color:var(--ink-2) }

/* --- Rechtematrix ----------------------------------------------------------
   Gegenstand links, Schalter in Spalten. Die Kopfzeile beschriftet die
   Spalten EINMAL, statt in jeder Zeile dasselbe Substantiv zu wiederholen.
   Linien zwischen den Zeilen, weil es gleichrangige Wiederholungen sind -
   dieselbe Begruendung wie bei einer Liste. */
.rechte{ --sp: minmax(0,1fr) 88px 88px; max-width:520px }
.rechte__kopf{
  display:grid; grid-template-columns:var(--sp); gap:12px; align-items:end;
  padding:0 0 10px; border-bottom:1px solid var(--line);
  font-size:12.5px; font-weight:500; color:var(--ink-3);
}
.rechte__kopf span + span{ text-align:center }
.rechte__zeile{
  display:grid; grid-template-columns:var(--sp); gap:12px; align-items:center;
  padding:15px 0;
}
.rechte__zeile + .rechte__zeile{ border-top:1px solid var(--line) }
.rechte__was{ font-size:15px; font-weight:500 }
.rechte__feld{ display:flex; justify-content:center }
.rechte__leer{ color:var(--line-2) }

@media (max-width: 520px){
  .rechte{ --sp: minmax(0,1fr) 64px 64px }
}

/* Werte, die hier nicht geändert werden. Als Text auf Bedienhöhe, damit sie
   im Raster mit den Feldern fluchten - kein ausgegrautes Feld, das wie ein
   Fehler aussieht. */
/* Unveraenderliche Werte: kein Rahmen, aber auch nicht auf Feldhoehe - sonst
   ist der einzige Unterschied zu einem Eingabefeld die fehlende Rahmenlinie,
   und man probiert hineinzuschreiben. */
/* hidden schlaegt jedes display. Ohne diese Zeile bleibt ein Element mit
   display:flex sichtbar, obwohl das Attribut gesetzt ist - der Browser
   gewichtet die Klassenregel hoeher als die eingebaute Regel fuer [hidden]. */
[hidden]{ display:none !important }

.readonly{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  min-height:28px; padding-top:2px; font-size:15px;
}
.readonly__note{ font-size:12.5px; color:var(--ink-3) }

/* Die Spur eines gespeicherten Geheimnisses. Feste Zeichenbreite, weil man
   sie mit einer anderen vergleicht - im Fliesssatz verrutschen vier Zeichen
   gegeneinander und man zaehlt nach. */
.readonly__spur{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px; letter-spacing:.01em; color:var(--ink);
}
/* Kein Knopf im Feldsinn: er wechselt die Ansicht, er tut nichts am Server.
   Ein zweiter grauer Knopf neben "Verbindung pruefen" saehe gleich gewichtig
   aus und ist es nicht. */
.readonly__tausch{
  border:0; background:none; padding:0; cursor:pointer;
  font-size:13.5px; color:var(--ink-2); text-decoration:underline;
  text-underline-offset:3px;
}
.readonly__tausch:hover{ color:var(--ink) }

.avatarbig{
  width:84px; height:84px; border-radius:50%; flex:none;
  background-image:linear-gradient(142deg,var(--akzent-a) 0%,var(--akzent-b) 100%);
  color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  font-size:29px; font-weight:600; letter-spacing:.03em;
}
.fotoreihe{ display:flex; align-items:center; gap:20px; flex-wrap:wrap }

/* --- Logo einer Firma ------------------------------------------------------
   Ein Logo ist selten quadratisch und selten randlos. Es steht deshalb in
   einer hellen Kachel und wird EINGEPASST, nicht beschnitten: object-fit
   contain statt cover. Ein beschnittenes Logo ist ein kaputtes Logo. */
.logokachel{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:96px; height:72px; flex:none; overflow:hidden;
  border:1px solid var(--line); border-radius:12px;
  background-color:var(--surface);
  background-image:linear-gradient(150deg,#FFFFFF 0%,#FAFAF7 100%);
}
.logokachel img{ width:100%; height:100%; object-fit:contain; padding:8px }
.logokachel__kurz{ font-size:19px; font-weight:600; color:var(--ink-3); letter-spacing:.02em }
.logokachel--zeile{ width:44px; height:34px; border-radius:8px }
.logokachel--zeile img{ padding:4px }
.logokachel--zeile .logokachel__kurz{ font-size:12px }

.logowahl{ position:relative; display:block; border-radius:12px; cursor:pointer; flex:none }
.logowahl .fotowahl__deck{ border-radius:12px }
.logowahl:hover .fotowahl__deck{ opacity:1 }
.logowahl:focus-within .fotowahl__deck{ opacity:1 }
.logowahl:focus-within{ outline:2px solid var(--focus); outline-offset:3px }

/* --- Waehler: ein Feld, das aus einer langen Liste einen Eintrag waehlt ----
   Sieht aus wie ein Auswahlfeld, verhaelt sich aber wie eine Suche. Das ist
   Absicht: der Nutzer soll nicht erst lernen, dass hier etwas anderes
   passiert als nebenan. */
.waehler{ position:relative }
.waehler__knopf{
  display:flex; align-items:center; gap:10px; width:100%;
  text-align:left; cursor:pointer; padding-right:12px;
}
.waehler__knopf:hover{ border-color:var(--line-stark) }
.waehler__wert{
  flex:1 1 auto; min-width:0; display:flex; align-items:baseline; gap:8px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.waehler__wert--leer{ color:var(--ink-3) }
.waehler__zusatz{ font-size:12.5px; color:var(--ink-3); flex:none }
.waehler__chev{ flex:none; color:var(--ink-3) }
.waehler__knopf[aria-expanded="true"]{ border-color:var(--focus) }

.waehler__panel{
  position:absolute; z-index:60; left:0; right:0; top:calc(100% + 6px);
  background-color:var(--surface);
  background-image:linear-gradient(180deg,var(--flaeche-a) 0%,var(--flaeche-b) 100%);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:8px;
}
.waehler__suche{ margin-bottom:6px }
.waehler__suche .input{ height:38px }
.waehler__liste{
  list-style:none; margin:0; padding:0;
  max-height:264px; overflow-y:auto;
}
.waehler__liste li{
  display:flex; align-items:baseline; gap:10px;
  padding:9px 10px; border-radius:var(--r);
  font-size:14.5px; cursor:pointer;
}
.waehler__liste li:hover, .waehler__liste li.is-aktiv{ background:var(--hover) }
.waehler__liste li[aria-selected="true"]{ color:var(--accent-ink); font-weight:500 }
.waehler__liste li.ist-leer{ color:var(--ink-3); cursor:default }
.waehler__liste li.ist-leer:hover{ background:transparent }
.waehler__liste .waehler__zusatz{ margin-left:auto }

/* Zahlenketten, die man Stelle fuer Stelle vergleicht: IBAN, BIC,
   Steuernummer. Gleiche Zeichenbreite macht das Vergleichen moeglich. */
.input.tabelle{ font-variant-numeric:tabular-nums; letter-spacing:.02em }

/* Das Bild selbst ist die Schaltflaeche. "Aendern" liegt darueber und wird
   bei Zeigerkontakt und bei Tastaturfokus sichtbar - kein zweiter Knopf
   daneben, der dasselbe noch einmal sagt. */
.fotowahl{ position:relative; display:block; border-radius:50%; cursor:pointer; flex:none }
.fotowahl__deck{
  position:absolute; inset:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--deckel); color:var(--auf-deckel);
  font-size:13px; font-weight:500;
  opacity:0; transition:opacity .16s ease;
}
.fotowahl:hover .fotowahl__deck{ opacity:1 }
.fotowahl.ist-gesperrt{ cursor:default }
.fotowahl.ist-gesperrt .fotowahl__deck{ display:none }
/* Das Dateifeld liegt unsichtbar auf dem Bild: anklickbar, mit der Tastatur
   erreichbar, und der Fokusring landet auf dem Bild statt auf einem
   Systemknopf, den niemand sieht. */
.fotowahl__feld{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer }
.fotowahl:focus-within .fotowahl__deck{ opacity:1 }
.fotowahl:focus-within{ outline:2px solid var(--focus); outline-offset:3px }

.pw{ position:relative }
.pw .input{ padding-right:46px }
.pw__eye{
  position:absolute; right:4px; top:4px; width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; background:transparent; border-radius:8px;
  color:var(--ink-3); cursor:pointer;
}
.pw__eye:hover{ background:var(--hover); color:var(--ink) }

.strength{ display:flex; gap:5px; margin-top:2px }
.strength i{ flex:1; height:4px; border-radius:999px; background:var(--line); transition:background .2s ease }
.strength[data-stufe="1"] i:nth-child(-n+1){ background:#C98A8A }
.strength[data-stufe="2"] i:nth-child(-n+2){ background:#D8B876 }
.strength[data-stufe="3"] i:nth-child(-n+3){ background:#8FB79A }
.strength[data-stufe="4"] i{ background:#5F9E76 }

/* ============================================================
   Medien als Raster — die Vorschaufläche trägt die Information,
   der Text darunter steht frei. Kein Kasten um die Kachel.
   ============================================================ */
.viewswitch{ display:inline-flex; height:var(--ctrl-h); padding:3px; gap:3px;
  background-color:var(--surface); border:1px solid var(--line-2); border-radius:var(--r) }
.viewswitch button{
  width:38px; height:100%; display:inline-flex; align-items:center; justify-content:center;
  border:0; background:transparent; border-radius:var(--r-sm); color:var(--ink-3); cursor:pointer;
}
.viewswitch button:hover{ background:var(--hover); color:var(--ink) }
.viewswitch button[aria-pressed="true"]{
  background-image:linear-gradient(140deg,var(--akzent-a) 0%,var(--akzent-b) 100%); color:var(--accent-ink);
}

.grid{
  display:grid; gap:30px 24px; padding-top:4px;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
}
.tile{ position:relative; min-width:0 }
.tile__thumb{
  position:relative; display:block; width:100%; aspect-ratio:4/3;
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background-color:var(--surface); cursor:pointer; padding:0;
  transition:border-color .14s ease, box-shadow .14s ease;
}
.tile__thumb:hover{ border-color:var(--line-2) }
.tile.is-picked .tile__thumb{
  border-color:var(--accent-line);
  box-shadow:0 0 0 3px rgba(90,75,209,.16);
}
.tile__glyph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(27,27,24,.34);
}
/* Weiche Pastellverläufe nach Dateiart – statt einer erfundenen Vorschau */
.tile--bild     .tile__thumb{ background-image:linear-gradient(145deg,#EFEAFB 0%,#DDE7F7 100%) }
.tile--video    .tile__thumb{ background-image:linear-gradient(145deg,#E2EFF6 0%,#DCEDE9 100%) }
.tile--vektor   .tile__thumb{ background-image:linear-gradient(145deg,#E4F1E7 0%,#EFF3DC 100%) }
.tile--dokument .tile__thumb{ background-image:linear-gradient(145deg,#FAF2DF 0%,#F6E8DE 100%) }
.tile--archiv   .tile__thumb{ background-image:linear-gradient(145deg,#EFEEE9 0%,#E5E4DE 100%) }

.tile__pick{
  position:absolute; top:10px; left:10px; z-index:2;
  opacity:0; transition:opacity .14s ease;
  box-shadow:0 1px 3px rgba(24,24,20,.18);
}
.tile__ctx{
  position:absolute; top:8px; right:8px; z-index:2;
  width:32px; height:32px; border-radius:8px;
  background:var(--schleier);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .14s ease;
}
.tile:hover .tile__pick, .tile:hover .tile__ctx,
.tile.is-picked .tile__pick,
.tile__pick:focus-visible, .tile__ctx:focus-visible{ opacity:1 }

.tile__body{ padding:11px 2px 0 }
.tile__name{
  display:block; width:100%; padding:0; border:0; background:transparent; text-align:left;
  font-size:14.5px; font-weight:500; color:var(--ink); cursor:pointer; border-radius:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tile__name:hover{ text-decoration:underline; text-underline-offset:3px }
.tile__meta{ display:flex; align-items:center; gap:9px; margin-top:7px; min-width:0 }
.tile__sub{ font-size:12.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

.list.is-grid .list__head{ display:none }
/* Im Listenmodus schließt die letzte Zeilenlinie das Raster ab. Ohne sie
   hinge die Fußzeile frei in der Fläche. */
.list.is-grid + .listfoot{ margin-top:14px; padding-top:16px; border-top:1px solid var(--line) }

/* ============================================================
   Dashboard — Zahlen und Zeilen, keine Kacheln
   ============================================================ */
.stats{
  display:flex; flex-wrap:wrap; gap:0 40px;
  padding:4px 0 34px; border-bottom:1px solid var(--line); margin-bottom:34px;
}
.stat{ padding-right:40px; border-right:1px solid var(--line) }
.stat:last-child{ border-right:0; padding-right:0 }
.stat b{ display:block; font-size:30px; font-weight:600; letter-spacing:-.02em; line-height:1.2 }
.stat span{ display:block; margin-top:4px; font-size:13.5px; color:var(--ink-3) }
.stat--warn b{ color:var(--st-fehler-ink) }

.split{ display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:0 48px }
.split__b{ padding-left:48px; border-left:1px solid var(--line) }
.blocklabel{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:4px;
  font-size:13.5px; font-weight:600; color:var(--ink-2);
}
.blocklabel .linkbtn{ font-size:13px; font-weight:400 }
/* Stehen mehrere Listen untereinander, braucht die naechste Ueberschrift
   Abstand nach oben - und die letzte Zeile davor keine Linie mehr, sonst
   liegen Linie und Ueberschrift aufeinander. */
.act + .blocklabel, .mini + .blocklabel{ margin-top:36px }
.act:has(+ .blocklabel){ border-bottom:0 }

.mini{
  display:flex; align-items:center; gap:16px; width:100%;
  padding:13px 8px; margin:0 -8px; width:calc(100% + 16px);
  border:0; background:transparent; border-bottom:1px solid var(--line);
  border-radius:var(--r-sm); text-align:left; cursor:pointer;
}
.mini:hover{ background:var(--hover) }
a.mini{ text-decoration:none; color:inherit }
.mini:last-child{ border-bottom:0 }
.act:last-child{ border-bottom:0 }
.mini__name{ flex:1 1 auto; min-width:0; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mini__date{ margin-left:auto; font-size:13px; color:var(--ink-3); white-space:nowrap }

.act{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 16px;
  padding:13px 0; border-bottom:1px solid var(--line) }
.act__t{ font-size:13px; color:var(--ink-3); white-space:nowrap }
.act__x{ font-size:14px; color:var(--ink-2) }
.act__x b{ font-weight:500; color:var(--ink) }

/* ============================================================
   Detailseite — Aktionen bleiben oben rechts an derselben Stelle
   ============================================================ */
.detailbar{
  position:sticky; top:var(--hdr-h); z-index:40;
  background:var(--kopf-grund);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  backdrop-filter:blur(16px) saturate(1.6);
  border-bottom:1px solid var(--line);
  margin-bottom:34px;
}
.detailbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px 24px; flex-wrap:wrap;
  /* padding-block, nicht die Kurzform: das Element traegt auch .wrap, und
     `padding:14px 0 18px` hat deren seitliche 40px stillschweigend auf 0
     gesetzt. Die Ueberschrift stand dadurch auf jeder Detailseite weiter
     links als alles andere. */
  padding-block:14px 18px;
}
.detailbar h1{ font-size:26px }
.detailbar__meta{ display:flex; align-items:center; gap:12px; margin-top:8px; flex-wrap:wrap }
.dirty{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--st-entw-ink) }
.dirty::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor }

/* --- Formular ------------------------------------------------------------
   EIN Mass, ZWEI Aussenkanten. Vorher hatte dieselbe Seite fuenf: 617, 803,
   1183, 193, 283 - jede eine Einzelfallentscheidung. Jetzt liegen alle
   Feldkanten auf Linien eines Rasters aus zwoelf Spalten, und das Raster ist
   auf 760px begrenzt. Ueber die volle Fensterbreite gelesen verliert das Auge
   bei einem langen Feld den Anfang; Formulare brauchen ein Mass, keine
   Fensterbreite. Listen und Kopfzeile behalten die vollen 1180.
   -------------------------------------------------------------------------- */
.form{ max-width:760px; padding-bottom:96px }

/* Abschnitte trennt LUFT, nicht eine Linie. Damit bleibt die Linie fuer
   genau eine Aussage frei: gleichrangige Zeilen einer Liste. Vorher stand
   dieselbe Linie mal fuer "neuer Abschnitt", mal fuer "naechste Zeile". */
.fsec{ margin-top:52px }
.fsec:first-child{ margin-top:0 }

/* Die Ueberschrift war 13.5px grau und damit leiser als die 15px darunter -
   sie las sich wie eine Feldbeschriftung. Eine Ueberschrift muss die
   staerkste Zeile ihres Abschnitts sein. */
.fsec__label{
  display:block; margin-bottom:20px;
  font-size:16px; font-weight:600; color:var(--ink); letter-spacing:-.012em;
}
/* Auskunft zum Abschnitt, direkt unter der Ueberschrift statt als Feld ohne
   erkennbare Beschriftung weiter unten. */
.fsec__info{ margin:-12px 0 22px; font-size:13.5px; color:var(--ink-2) }

.fgrid{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:22px 20px }
.fgrid + .fgrid{ margin-top:22px }
.s2{ grid-column:span 2 }  .s4{ grid-column:span 4 }
.s6{ grid-column:span 6 }  .s8{ grid-column:span 8 }
.s12{ grid-column:span 12 }

/* `minmax(0,1fr)` und nicht die stillschweigende Spalte `auto`: ohne die
   Vorgabe waechst die Spur auf den breitesten Inhalt, und der Waehler im
   Feld "Firma" hat sie bei 320 Pixeln auf 283 gezogen - elf Pixel weiter,
   als die Gruppe breit ist. Die Beschriftung stand dann heraus. `min-width`
   allein reicht dafuer nicht: das begrenzt die Gruppe, nicht ihre Spur. */
.fgroup{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; align-content:start; min-width:0 }
.flabel{ font-size:13.5px; font-weight:500; color:var(--ink-2) }
/* Zustand am Feld, nicht darunter: ein Wort, das sagt, dass etwas da ist. */
.flabel__stand{ margin-left:8px; font-weight:400; color:var(--st-aktiv-ink) }
.fhint{ font-size:12.5px; color:var(--ink-3) }
.fwide{ grid-column:1 / -1 }
.frow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.meta{ font-size:13px; color:var(--ink-3); margin-top:40px }

/* ============================================================
   Verlauf - Saeulen nach Tag
   ============================================================
   Kein Kasten, kein Rahmen, keine Achsenkreuze: die Saeulen stehen auf
   einer Linie, darunter drei Daten. Alles andere waere Zierrat um eine
   Auskunft aus zwei Zahlen.

   Jede Saeule liegt in einer Flaeche `flex:1; min-width:0`. Ohne das
   `min-width` waeren dreissig Tage auf einem Telefon breiter als der
   Bildschirm - Flex-Kinder haben von sich aus `min-width:auto` und
   schrumpfen nicht unter ihren Inhalt. */
.verlauf{ margin-top:8px }

.verlauf__reihe{
  display:flex; align-items:flex-end; gap:2px;
  height:110px; padding-bottom:1px;
  border-bottom:1px solid var(--line);
}
.verlauf__tag{ flex:1; min-width:0; height:100%; display:flex; align-items:flex-end }

/* Die Saeule ist selbst ein Stapel: ein Streifen je Modell, gewichtet nach
   Token. Ein Tag mit zwei Modellen zeigt beide - sonst saehe man nur die
   Summe und nicht, was sie teuer gemacht hat. */
.verlauf__saeule{
  width:100%; display:flex; flex-direction:column-reverse;
  border-radius:2px; overflow:hidden; min-height:2px;
}
.verlauf__saeule > i{ display:block; min-height:1px }

.verlauf__achse{
  display:flex; justify-content:space-between;
  margin-top:8px; font-size:12px; color:var(--ink-3);
}

.verlauf__modelle{
  display:flex; flex-wrap:wrap; gap:6px 18px;
  margin-top:10px; padding:0; list-style:none;
  font-size:12px; color:var(--ink-3);
}
.verlauf__modelle li{ display:flex; align-items:center; gap:6px }
.verlauf__modelle i{ width:8px; height:8px; border-radius:2px; flex:none }




/* Schmale Fenster: das Raster faellt auf eine Spalte zurueck, nur
   Postleitzahl und Ort bleiben nebeneinander - sie gehoeren in eine Zeile. */
@media (max-width: 720px){
  .fgrid > *{ grid-column:span 12 }
  .fgrid > .s2{ grid-column:span 4 }
  .fgrid > .s2 + .s6{ grid-column:span 8 }
}

/* ============================================================
   Skeleton — folgt dem offenen Layout, keine Kartenbloecke
   ============================================================ */
@keyframes sk{ 0%{ background-position:120% 0 } 100%{ background-position:-120% 0 } }
.sk{
  background:linear-gradient(90deg,#EBE9F1 0%,#F8F6FB 48%,#EBE9F1 100%);
  background-size:220% 100%; animation:sk 1.3s linear infinite;
  border-radius:6px; height:12px;
}
.sk--pill{ height:27px; border-radius:999px; width:88px }
.sk--field{ height:var(--ctrl-h); border-radius:var(--r) }
.sk--check{ height:18px; width:18px; border-radius:5px }
.sk--h1{ height:26px; width:230px; border-radius:8px }

/* ============================================================
   Toast
   ============================================================ */
.toast{
  position:fixed; left:50%; bottom:28px; z-index:95;
  display:flex; align-items:center; gap:16px;
  min-height:var(--ctrl-h); padding:0 8px 0 18px;
  background:var(--ink); color:#FFF; border-radius:12px;
  font-size:14px; white-space:nowrap;
  transform:translate(-50%,14px); opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  box-shadow:0 12px 30px rgba(24,24,20,.24);
}
.toast.is-open{ opacity:1; transform:translate(-50%,0); pointer-events:auto }
.toast button{
  height:32px; padding:0 12px; border:0; border-radius:8px;
  background:rgba(255,255,255,.14); color:#FFF; font-size:13.5px; cursor:pointer;
}
.toast button:hover{ background:rgba(255,255,255,.24) }

/* ============================================================
   Responsiv
   ============================================================ */
@media (max-width: 900px){
  :root{ --wrap-pad: 24px }
  .list{ --cols: 26px minmax(0,1fr) 130px 40px }
  .list--konten{ --cols: 26px 36px minmax(0,1fr) 130px 130px }
  .list--mitglieder{ --cols: 36px minmax(0,1fr) 130px 130px }
  .list--firmen{ --cols: 26px 44px minmax(0,1fr) 150px 110px }
  .list--rollen{ --cols: minmax(0,1fr) 150px 80px }
  .list--connectoren{ --cols: minmax(0,1fr) 150px 90px }
  .list__head span:nth-child(4), .row .row__date{ display:none }
  .list--konten .list__head span:nth-child(6), .list--konten .row__date{ display:none }
  .split{ grid-template-columns:minmax(0,1fr); gap:44px }
  .split__b{ padding-left:0; border-left:0 }
  .fgrid{ grid-template-columns:minmax(0,1fr) }
  h1{ font-size:26px }
  .stats{ gap:0 24px }
  .stat{ padding-right:24px }
}
@media (max-width: 640px){
  /* Klebend ist auf dem Handy teuer: die Leiste nähme ein Drittel des
     Bildschirms dauerhaft weg. Dort scrollt sie mit. */
  .detailbar{ position:static }
  .results{ width:100% }

  /* Eine Zeile wird zum Block: Auswahl links, Name oben, alles Weitere in
     einer zweiten Zeile darunter. Nichts wird abgeschnitten, nichts ragt
     hinaus - die Spalten sind auf zwei reduziert, nicht verschmälert. */
  .list__head{ display:none }
  .row{
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:start; row-gap:10px; column-gap:12px; padding:16px 8px;
  }
  .row > .check{ grid-column:1; grid-row:1; margin-top:3px }
  .row__haupt{ display:block; grid-column:2; grid-row:1; min-width:0 }
  /* Das Datum bekommt eine eigene Zeile, statt mal hinter den Status zu
     passen und mal nicht. Sonst sind die Zeilen unterschiedlich hoch und die
     Liste franst aus - dieselbe Ueberlegung wie beim Rollbalken: gleiche
     Dinge sollen gleich aussehen. */
  .row__meta{
    display:flex; flex-wrap:wrap; align-items:center; gap:7px 12px;
    grid-column:2; grid-row:2;
  }
  .row__meta .row__date{ flex:1 0 100%; margin-top:1px }
  .row__end{ grid-column:3; grid-row:1 }
  .row__date{ display:inline }

  .list--konten .row{ grid-template-columns:auto auto minmax(0,1fr) }
  .list--konten .avatar--zeile{ grid-column:2; grid-row:1 }
  .list--konten .row__haupt{ grid-column:3; grid-row:1 }
  .list--konten .row__meta{ grid-column:3; grid-row:2 }
  .list--konten .row__date{ display:inline }

  .row__name{ white-space:normal; overflow:visible }
  /* overflow-wrap, weil eine lange E-Mail-Adresse keine Stelle hat, an der
     der Browser umbrechen duerfte - und die Zeile dann hinausragt. */
  .row__sub{ white-space:normal; overflow:visible; overflow-wrap:anywhere }
  .toolbar__search{ flex:1 1 100%; max-width:none }
  .toolbar__gap{ display:none }
  .toolbar .control{ flex:1 1 calc(50% - 5px); min-width:0 }
  .mini{ flex-wrap:wrap }
  .mini__date{ margin-left:0 }
  .mini__name{ flex:1 1 100% }
}
@media (max-width: 560px){
  .toolbar .control{ flex:1 1 100% }
  .stat{ border-right:0; padding-right:0; min-width:44% }
  .stats{ gap:22px 24px }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
}

/* ============================================================
   Anmeldeseiten - eine ruhige Spalte auf weichem Farbverlauf
   ------------------------------------------------------------
   Die Anmeldung ist die einzige Seite ohne Kopfzeile und ohne
   Umgebung. Damit sie trotzdem nicht leer wirkt, traegt die
   Flaeche selbst die Farbe: vier weite Pastellwolken aus der
   Statuspalette, so blass, dass Text darauf ruhig bleibt. Eine
   Karte um das Formular braucht es dann nicht - die Felder
   stehen als helle Flaechen ohnehin frei.
   ============================================================ */
.schlicht{
  position:relative; isolation:isolate;
  min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; padding:44px 24px 56px;
  background-color:var(--bg);
}
.schlicht::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  /* Masse in Prozent, damit die Wolken auf jedem Bildschirm gleich
     stehen - in Pixeln waeren sie auf 27 Zoll winzige Flecken. */
  background-image:var(--wolken);
}
/* Der ganze Block sitzt mittig in der Hoehe: `margin:auto` auf dem Flex-Kind.
   Anders als `justify-content:center` faellt das auf 0 zurueck, wenn der
   Inhalt hoeher wird als der Bildschirm - dann laesst sich nach oben
   scrollen, statt dass der Anfang abgeschnitten wird. */
.schlicht__inner{ width:100%; max-width:404px; margin:auto 0 }
.schlicht__logo{ margin:0 0 40px; line-height:0 }
.schlicht__logo a{ display:inline-block; color:var(--logo-ink) }
.schlicht__logo .logo__svg{ width:74px; height:22px }
/* Folgt eine Ueberschrift, braucht die Marke mehr Abstand nach unten. */
.schlicht__inner:has(.schlicht__titel) .schlicht__logo{ margin-bottom:66px }

/* Ueberschrift nur, wo sie etwas sagt, das der Knopf nicht schon sagt:
   auf "Passwort vergessen" ja, auf "Anmelden" nicht. */
.schlicht__titel{ font-size:25px; font-weight:600; letter-spacing:-.021em; line-height:1.25 }
.schlicht__sub{ margin-top:10px; color:var(--ink-2); font-size:14.5px; max-width:44ch }
.schlicht form{ display:grid; gap:20px }
.schlicht__titel + form, .schlicht__sub + form, .schlicht .hinweis + form{ margin-top:28px }
.schlicht .btn{ width:100% }

/* Einwilligungen im schlichten Block. Den Abstand traegt dort schon das
   Formularraster (.schlicht form, gap:20px) - die 20px Innenabstand der
   Zeile kaemen obendrauf und rissen die Schalter aus dem Rhythmus der
   Felder. Frueher stand dafuer ein style="" an der einen Zeile im Markup;
   das ging, solange es EINE war. Die Linie zwischen zwei Einwilligungen
   bekommt ihren Platz ueber den oberen Innenabstand der zweiten Zeile. */
.schlicht .optin{ padding:4px 0 }
.schlicht .optin + .optin{ padding-top:20px }

/* Auf dem Verlauf brauchen die weissen Felder eine Kante mehr, sonst
   verschwimmen sie mit dem Untergrund. Beim Fokus uebernimmt wieder
   der Fokusring. */
.schlicht .input:not(:focus),
.schlicht .select:not(:focus){ box-shadow:0 1px 2px rgba(24,24,20,.055) }
.schlicht .btn--primary{ box-shadow:0 6px 18px rgba(24,24,20,.14) }
.schlicht .btn--primary:hover{ box-shadow:0 8px 22px rgba(24,24,20,.18) }

.schlicht__fuss{ margin-top:30px; padding-top:24px; border-top:1px solid var(--accent-line);
  font-size:14px; color:var(--ink-3); line-height:2 }
.schlicht__fuss a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--line-2) }
.schlicht__fuss a:hover{ text-decoration-color:currentColor }

/* Am Fuß der Seite, in einer Zeile, mit Trennpunkten dazwischen. Fluchtet
   mit dem Formular darueber, statt mittig zu stehen - sonst haette die Seite
   zwei verschiedene Achsen. */
.seitenfuss{ width:100%; max-width:404px; margin-top:48px }
.seitenfuss__build{ font-size:12.5px; color:var(--ink-3); margin-bottom:9px }
/* Ohne Trennpunkte: die Spalte ist schmal, die Zeile bricht um, und ein
   Trennpunkt landet dann am Zeilenanfang und trennt dort nichts mehr.
   Abstand reicht - die drei Begriffe sind fuer sich lesbar. */
.rechtliches{
  display:flex; flex-wrap:wrap; gap:7px 22px;
  font-size:12.5px; color:var(--ink-3);
}
.rechtliches a{ color:inherit; text-decoration:none }
.rechtliches a:hover{ color:var(--ink-2); text-decoration:underline; text-underline-offset:3px }

@media (max-width: 520px){
  .schlicht{ padding:36px 20px 44px }
  .schlicht__inner{ margin:24px 0 auto }
  .schlicht__logo{ margin-bottom:34px }
  .schlicht__inner:has(.schlicht__titel) .schlicht__logo{ margin-bottom:48px }
}

/* Fehler am Feld, nicht als Sammelmeldung oben: dort steht er da, wo er
   entstanden ist. */
.feldfehler{ font-size:13px; color:var(--st-fehler-ink) }
.input[aria-invalid="true"], .select[aria-invalid="true"]{ border-color:#C08585 }
.input[aria-invalid="true"]:focus{ box-shadow:0 0 0 3px rgba(140,47,47,.13) }

.merken{ display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--ink-2) }

/* Rückmeldung nach einer Aktion. Bleibt stehen, anders als eine Einblendung
   die man verpassen kann. */
.hinweis{
  display:flex; align-items:flex-start; gap:10px;
  padding:13px 16px; border-radius:12px; font-size:14px;
  background-color:var(--st-info-bg); color:var(--st-info-ink);
  background-image:linear-gradient(138deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 64%);
}
.hinweis--warnung{ background-color:var(--st-entw-bg); color:var(--st-entw-ink) }
.hinweis svg{ flex:none; margin-top:1px }
.hinweis a, .hinweis button.linkbtn{ color:inherit; font-weight:500 }
.schlicht .hinweis{ margin-top:24px }
.app .hinweis{ margin:0 0 28px }

/* Geplante Bereiche: sichtbar, aber nicht anwählbar. */
.menu__item--aus{ color:var(--ink-3); cursor:default }
.menu__item--aus:hover{ background:transparent }
.menu a.menu__item{ text-decoration:none }
.menu form{ margin:0 }

/* Gravatar liegt über den Initialen. Lädt es nicht, entfernt sich das Bild
   selbst und die Initialen stehen wieder da. */
.avatar{ position:relative; overflow:hidden }
.avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.avatarbig{ position:relative; overflow:hidden }
.avatarbig img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }

/* ============================================================
   Connector-Detailseite und KI-Knopf
   ============================================================ */

/* Wo es den Zugang gibt. Kein Erklaertext, sondern ein Ziel. */
.quelle{ margin-top:26px; font-size:13.5px; color:var(--ink-3) }
.quelle a{ color:var(--ink-2) }
.form:has(+ .quelle){ padding-bottom:0 }

/* Zugangsdaten sind lang, aber nicht endlos - der Pruefknopf daneben braucht
   seinen Platz. */
.zugangsfeld{ flex:1 1 340px; max-width:420px }
/* Dasselbe Feld in einer halben Spalte: Es muss schrumpfen duerfen, sonst
   passt der Knopf nicht mehr daneben und rutscht darunter - und dann steht
   die Handlung nicht mehr am Feld, sondern unter ihm. */
.kifeld{ flex:1 1 120px; min-width:0; max-width:none }

/* --- KI-Knopf --------------------------------------------------------------
   Der Stern markiert eine Handlung, die eine KI ausfuehrt. Er steht NUR dort:
   wer ihn sieht, weiss, dass hier etwas geschaetzt und nicht berechnet wird
   und dass das Ergebnis zu pruefen ist.

   In den Pastellfarben des Systems, nicht in Regenbogenfarben - die KI ist
   ein Bedienelement wie jedes andere und bekommt keinen Sonderstatus. */
.ki{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:var(--ctrl-h); padding:0 16px; flex:none;
  border:1px solid var(--accent-line); border-radius:var(--r);
  background-image:linear-gradient(140deg,var(--akzent-a) 0%,var(--akzent-b) 100%);
  color:var(--accent-ink); font-size:14.5px; font-weight:500;
  cursor:pointer; white-space:nowrap;
}
.ki:hover{ background-image:linear-gradient(140deg,#EFEBFC 0%,#DED6F6 100%) }
.ki[disabled]{ cursor:progress }
.ki__stern{ flex:none }

/* Waehrend die KI arbeitet, dreht der Stern sich langsam. Kein Balken, der
   einen Fortschritt behauptet, den niemand kennt - nur ein Zeichen, dass
   ueberhaupt noch etwas laeuft. */
.ki.ist-taetig .ki__stern{ animation:kidreht 2.6s linear infinite }
@keyframes kidreht{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } }

.kistand{ display:block; margin-top:9px; font-size:13px; color:var(--ink-3) }
.kistand--fehler{ color:var(--st-fehler-ink) }


/* Sicherheitsereignisse -------------------------------------------------
   Drei Spalten: was, wann, wo. Keine Tabelle mit Kopfzeile - die
   Beschriftungen "Ereignis / Zeitpunkt / Herkunft" sagen nichts, was die
   Werte nicht selbst sagen, und kosten eine Zeile.

   Was zaehlt, steht links und in voller Farbe; Zeitpunkt und Herkunft sind
   Beiwerk, bis man sie sucht. */
.ereignisse{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line) }
.ereignis{
  display:grid; grid-template-columns:1fr auto; gap:2px 18px;
  padding:11px 0; border-bottom:1px solid var(--line);
  font-size:14.5px;
}
.ereignis__was{ color:var(--ink) }
.ereignis__wann{ color:var(--ink-3); font-size:13.5px; white-space:nowrap; text-align:right }
/* Herkunft in fester Zeichenbreite: man vergleicht sie mit einer anderen. */
.ereignis__wo{
  grid-column:1 / -1; color:var(--ink-3); font-size:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  overflow-wrap:anywhere;
}
.ereignis__wo:empty{ display:none }
/* Fehlgeschlagene und abgewiesene Anmeldungen faerben nur ihre eigene Zeile
   ein - ein roter Kasten um die ganze Liste behauptete, das Konto sei in
   Gefahr, und meistens ist es ein vertipptes Passwort. */
.ereignis--ernst .ereignis__was{ color:var(--st-fehler-ink) }


/* Die zweite Zeile am Treffer - E-Mail-Adresse, Ort. Sie entscheidet, welcher
   von drei gleichnamigen Eintraegen gemeint ist, und ist deshalb kein
   Beiwerk, sondern der Grund, dass die Liste benutzbar bleibt. */
.result__sub{
  display:block; margin-top:1px; font-size:12.5px; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis;
}


/* Ein Feld, das die KI gerade gefuellt hat. Es faerbt sich in denselben
   Pastellton wie der Stern - dieselbe Herkunft, dieselbe Farbe - und laesst
   nach ein paar Sekunden wieder los. Eine dauerhafte Markierung waere falsch:
   nach dem Speichern ist der Wert so gueltig wie jeder andere. */
.ist-ergaenzt{
  border-color:var(--accent-line);
  background:linear-gradient(140deg,var(--ergaenzt-a) 0%,var(--ergaenzt-b) 100%);
  transition:background .5s ease, border-color .5s ease;
}


/* ============================================================
   Assistent
   ============================================================
   Wer den Assistenten fragt, will meistens auf das schauen, wonach er fragt.
   Auf breiten Bildschirmen rueckt die Seite deshalb zur Seite, statt sich
   ueberdecken zu lassen - der Kopf sitzt im selben Fluss und rueckt mit.

   Schmaler als 1100 Pixel bliebe daneben zu wenig uebrig, um noch etwas zu
   erkennen; dort legt sich das Fenster darueber. */
.chat{
  /* Ueber die volle Hoehe, nicht erst unter dem Kopf: sonst bleibt oben
     rechts ein Streifen Seitenhintergrund neben dem Fenster stehen, der
     aussieht wie ein Fehler. Der eigene Kopf ist so hoch wie der der Seite,
     damit beide Trennlinien auf einer Hoehe liegen. */
  position:fixed; z-index:70; top:0; right:0; bottom:0;
  /* Nicht 100vw: das rechnet die Scrollleiste mit. Bei reserviertem
     Scrollrand ragte das Fenster dann links aus dem Bild und die Ueberschrift
     stand am Rand abgeschnitten. */
  width:min(400px, 100%);
  display:flex; flex-direction:column;
  background:var(--surface);
  border-left:1px solid var(--line);
  box-shadow:-14px 0 40px rgba(24,24,20,.06);
  transform:translateX(100%); transition:transform .22s ease;
}
.chat.ist-offen{ transform:translateX(0) }

.chat__kopf{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  height:var(--hdr-h); padding:0 12px 0 18px;
  border-bottom:1px solid var(--line); flex:none;
}
.chat__titel{ display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:500 }
.chat__titel .ki__stern{ color:var(--accent-ink) }
.chat__kopfrechts{ display:flex; align-items:center; gap:4px }
.chat__klein{
  border:0; background:none; padding:6px 8px; cursor:pointer; border-radius:8px;
  font-size:13px; color:var(--ink-3);
}
.chat__klein:hover{ background:var(--hover); color:var(--ink) }

.chat__lauf{ flex:1 1 auto; overflow-y:auto; padding:20px 18px; display:flex; flex-direction:column; gap:18px }

/* Der Anfang: eine Frage und drei Knoepfe. Ein leeres Feld ist die schwerste
   Frage ueberhaupt. */
.chat__frage{ margin:0 0 16px; font-size:19px; font-weight:500; letter-spacing:-.015em }
.chat__anfaenge{ display:flex; flex-direction:column; gap:8px; align-items:flex-start }
.chat__anfang{
  max-width:100%; text-align:left; cursor:pointer;
  padding:9px 13px; border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--surface); font-size:14px; color:var(--ink-2);
}
.chat__anfang:hover{ border-color:var(--accent-line); color:var(--accent-ink); background:var(--accent-bg) }

/* Die eigene Frage bekommt eine Flaeche, die Antwort nicht. Zwei Blasen
   gegeneinander waeren zwei Kaesten; so traegt nur das Gesagte eine Form,
   und der laengere Text bleibt Fliesstext. */
.chat__ich{
  align-self:flex-end; max-width:88%;
  padding:9px 13px; border-radius:var(--r);
  background:var(--accent-bg); color:var(--accent-ink);
  font-size:14.5px; white-space:pre-wrap; overflow-wrap:anywhere;
}
.chat__es{ font-size:14.5px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere }
.chat__es a{ color:var(--accent-ink); text-underline-offset:3px }
.chat__es--fehler{ color:var(--st-fehler-ink) }
/* Was er getan hat, nicht was er sagt. Steht als eigene Zeile unter der
   Antwort, damit man es nicht im Text sucht. */
.chat__es--getan{ color:var(--accent-ink); font-size:13.5px }

/* Waehrend er arbeitet, dreht sich der Stern - derselbe wie ueberall, wo
   eine KI etwas tut. Kein Fortschrittsbalken: den Fortschritt kennt niemand. */
.chat__denkt{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-3) }
.chat__denkt .ki__stern{ animation:kidreht 2.6s linear infinite; color:var(--accent-ink) }

.chat__fuss{ flex:none; display:flex; align-items:flex-end; gap:8px; padding:12px 14px; border-top:1px solid var(--line) }
.chat__feld{ flex:1 1 auto; min-width:0 }
.chat__feld textarea{
  width:100%; max-height:150px; resize:none; padding:10px 12px;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r);
  font-size:14.5px; line-height:1.45;
}
.chat__feld textarea:focus{ outline:none; border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-bg) }
.chat__ab{
  flex:none; width:var(--ctrl-h); height:var(--ctrl-h);
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:var(--r); cursor:pointer;
  background:var(--ink); color:var(--surface);
}
.chat__ab svg{ transform:rotate(-90deg) }
.chat__ab:disabled{ opacity:.4; cursor:default }

.chat__grenze{
  flex:none; margin:0; padding:0 14px 12px;
  font-size:12px; color:var(--ink-3); text-align:center;
}

/* Am Telefon nimmt er die ganze Breite - daneben ist dort kein Platz. Ueber
   beide Raender gespannt statt ueber eine Breite: dann stimmt es auch dort,
   wo der Browser einen Scrollrand freihaelt. */
@media (max-width:560px){
  .chat{ left:0; right:0; width:auto; border-left:0 }
}

@media (min-width:1100px){
  body{ transition:padding-right .22s ease }
  body.hat-chat{ padding-right:400px }
}


/* ============================================================
   Reiter einer Detailseite
   ============================================================
   Eine Linie unter der ganzen Leiste, ein Strich unter dem aktiven Reiter.
   Kein Kasten, keine Zunge, kein Rahmen - die Reiter stehen im selben
   Fluss wie der Inhalt darunter und tragen keinen eigenen Behaelter.

   Waagerecht scrollbar, falls es einmal viele werden: eine Leiste, die
   umbricht, verschiebt den Inhalt darunter je nach Anzahl - und das
   Interface soll nicht springen. */
.reiter{
  display:flex; gap:4px; margin:0 0 30px;
  border-bottom:1px solid var(--line);
  overflow-x:auto; scrollbar-width:none;
}
.reiter::-webkit-scrollbar{ display:none }
.reiter__ort{
  flex:none; display:inline-flex; align-items:center; gap:8px;
  padding:11px 14px; margin-bottom:-1px;
  border-bottom:2px solid transparent;
  font-size:14.5px; color:var(--ink-3); text-decoration:none; white-space:nowrap;
}
.reiter__ort:hover{ color:var(--ink) }
.reiter__ort[aria-current]{ color:var(--ink); border-bottom-color:var(--accent-ink); font-weight:500 }

/* Was direkt auf die Leiste folgt, zeichnet KEINE eigene obere Linie - die
   Leiste hat schon eine gezogen. Sonst stehen zwei Striche uebereinander mit
   nichts als Luft dazwischen, und beide behaupten, hier fange etwas Neues an. */
.reiter + *{ border-top:0 }

/* Die Zahl am Reiter beantwortet "lohnt sich der Klick" - sie ist Beiwerk
   und darf nie lauter sein als das Wort davor. */
.reiter__zahl{
  padding:1px 7px; border-radius:20px;
  background:var(--hover); color:var(--ink-3);
  font-size:12px; font-weight:400; font-variant-numeric:tabular-nums;
}
.reiter__ort[aria-current] .reiter__zahl{ background:var(--accent-bg); color:var(--accent-ink) }

/* Ein Bereich ohne Inhalt sagt, was fehlt und woher es kaeme. "Keine
   Eintraege" allein laesst jemanden suchen, ob er etwas falsch gemacht hat. */
.leer{ padding:34px 0; color:var(--ink-3); font-size:14.5px }

/* Angaben einfuegen ---------------------------------------------------------
   Zugeklappt eine Zeile, aufgeklappt ein Textfeld. Kein Kasten drumherum: es
   steht im selben Fluss wie das Formular darunter und ist keine zweite
   Flaeche. */
.einfuegen{ margin:0 0 30px }
.ki--leise{
  background-image:none; background:transparent;
  border-color:transparent; padding:0 4px; height:auto;
}
.ki--leise:hover{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px }
.einfuegen__feld{ margin-top:14px; max-width:760px }
.einfuegen__feld .textarea{ height:auto; padding:12px 14px; line-height:1.5 }
.einfuegen__knoepfe{ display:flex; align-items:center; gap:16px; margin-top:12px }

/* IOS ZOOMT IN JEDES FELD MIT SCHRIFT UNTER 16 PIXELN.
   Kein Fehler und keine Einstellung, sondern eingebautes Verhalten: Safari
   nimmt an, die Schrift sei zu klein zum Tippen, und vergroessert die Seite.
   Danach ist sie breiter als das Geraet, laesst sich verschieben, und der
   Kopf wandert mit.

   Dagegen hilft nur, auf groben Zeigegeraeten 16 Pixel zu setzen. Der oft
   vorgeschlagene Weg ueber maximum-scale=1 im viewport-Tag kommt NICHT in
   Frage: er nimmt allen die Moeglichkeit, die Seite aufzuziehen - auch
   denen, die schlecht sehen.

   DIESER BLOCK MUSS AM ENDE STEHEN. Eine Medienabfrage erhoeht die
   Spezifitaet nicht; weiter oben verlor er gegen die 14,5 Pixel darunter und
   tat gar nichts. Genau daran ist der erste Versuch gescheitert.

   Die 44 Pixel Feldhoehe bleiben; 16 Pixel sitzen darin bequemer als 14,5. */
@media (pointer: coarse){
  .input, .select, .textarea, .chat__feld textarea{ font-size:16px }
}


/* ============================================================
   Dunkelmodus
   ============================================================
   NUR Token werden getauscht - keine Regel weiter unten weiss davon. Das ist
   die Probe darauf, ob das Tokensystem taugt: was sich hier nicht umstellen
   laesst, war nie ein Token, sondern eine harte Farbe an falscher Stelle.

   WARM, nicht kalt. Der Hellmodus ist warmes Papier, kein Weiss; der
   Dunkelmodus ist warmes Dunkel, kein Schwarzblau. Sonst sind es zwei
   Systeme, die sich nur ein Stylesheet teilen.

   Die AKZENTFARBE wird heller, nicht dunkler. Dasselbe Violett auf dunklem
   Grund waere kaum zu lesen - Farbe traegt Bedeutung, und Bedeutung darf
   nicht vom Modus abhaengen.

   Zwei Wege hinein: die Einstellung des Geraets, und - staerker - die
   Entscheidung der Person am Konto. */
@media (prefers-color-scheme: dark){
  :root:not([data-darstellung="hell"]){ color-scheme:dark }
}
:root[data-darstellung="dunkel"]{ color-scheme:dark }

@media (prefers-color-scheme: dark){
  :root:not([data-darstellung="hell"]){
    --bg:        #171614;
    --surface:   #201F1C;
    --ink:       #F1EFE9;
    --ink-2:     #A9A79D;
    --ink-3:     #7D7B73;
    --line:      #302E2A;
    --line-2:    #3E3B36;
    --line-stark:#54514A;
    --hover:     #272521;

    --accent-ink:  #B0A5F5;
    --accent-bg:   #2A2547;
    --accent-line: #3D3670;
    --focus:       #8B7EE8;

    --st-aktiv-bg:#1E3326;   --st-aktiv-ink:#8FD3A6;
    --st-entw-bg: #38301A;   --st-entw-ink: #E2C579;
    --st-arbeit-bg:#2B2547;  --st-arbeit-ink:#B3A6F2;
    --st-fehler-bg:#3A2222;  --st-fehler-ink:#F0A5A5;
    --st-info-bg: #1D2B38;   --st-info-ink: #92C2E6;
    --st-weg-bg:  #2A2825;   --st-weg-ink:  #A5A29A;

    --logo-ink:  #F1EFE9;
    --shadow: 0 14px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
    --flaeche-a:  #24221F;  --flaeche-b:  #201F1C;
    --stark-a:    #EFEDE7;  --stark-b:    #DEDBD3;
    --stark-a-an: #FFFFFF;  --stark-b-an: #EFEDE7;
    --auf-stark:  #1B1B18;
    --akzent-a:   #2E2850;  --akzent-b:   #262046;

    /* Im Dunkeln flaechig statt bunt: die drei Pastellfelder waren auf Papier
       eine Wohltat und auf Dunkel ein Schleier. */
    --grund:
    radial-gradient(1100px 560px at 6% -12%, #2A2150 0%, rgba(42,33,80,0) 72%),
    radial-gradient(900px 500px at 97% -8%, #162A3A 0%, rgba(22,42,58,0) 70%),
    radial-gradient(820px 520px at 68% 112%, #322616 0%, rgba(50,38,22,0) 72%);
  --kopf-grund: rgba(23,22,20,.78);
  --schleier:   rgba(32,31,28,.88);
  --deckel:     rgba(0,0,0,.62);
  --auf-deckel: #F1EFE9;
  --schalter:   #3A3733;
  --knauf:      #E8E5DE;
  --ergaenzt-a: #2A2547;  --ergaenzt-b: #241F40;
  --wolken:
    radial-gradient(86% 92% at   2% -10%, rgba(70,60,120,.42) 0%, rgba(70,60,120,0) 62%),
    radial-gradient(74% 82% at 100%   0%, rgba(40,66,92,.34) 0%, rgba(40,66,92,0) 60%),
    radial-gradient(84% 88% at  88% 110%, rgba(92,74,40,.30) 0%, rgba(92,74,40,0) 62%),
    radial-gradient(66% 74% at   4% 108%, rgba(44,78,56,.26) 0%, rgba(44,78,56,0) 62%);


    --kopf-grund: rgba(23,22,20,.78);
    --schleier:   rgba(32,31,28,.88);
    --deckel:     rgba(0,0,0,.62);
    --auf-deckel: #F1EFE9;
    --schalter:   #3A3733;
    --knauf:      #E8E5DE;
    --ergaenzt-a: #2A2547;  --ergaenzt-b: #241F40;
    --wolken:
      radial-gradient(86% 92% at   2% -10%, rgba(70,60,120,.42) 0%, rgba(70,60,120,0) 62%),
      radial-gradient(74% 82% at 100%   0%, rgba(40,66,92,.34) 0%, rgba(40,66,92,0) 60%),
      radial-gradient(84% 88% at  88% 110%, rgba(92,74,40,.30) 0%, rgba(92,74,40,0) 62%),
      radial-gradient(66% 74% at   4% 108%, rgba(44,78,56,.26) 0%, rgba(44,78,56,0) 62%);



  }
}

/* Dieselben Werte noch einmal fuer die ausdrueckliche Wahl. Eine
   Medienabfrage laesst sich nicht ueberstimmen; wer Dunkel WAEHLT, bekommt es
   auch an einem Geraet, das hell eingestellt ist. */
:root[data-darstellung="dunkel"]{
  --bg:        #171614;
  --surface:   #201F1C;
  --ink:       #F1EFE9;
  --ink-2:     #A9A79D;
  --ink-3:     #7D7B73;
  --line:      #302E2A;
  --line-2:    #3E3B36;
  --line-stark:#54514A;
  --hover:     #272521;

  --accent-ink:  #B0A5F5;
  --accent-bg:   #2A2547;
  --accent-line: #3D3670;
  --focus:       #8B7EE8;

  --st-aktiv-bg:#1E3326;   --st-aktiv-ink:#8FD3A6;
  --st-entw-bg: #38301A;   --st-entw-ink: #E2C579;
  --st-arbeit-bg:#2B2547;  --st-arbeit-ink:#B3A6F2;
  --st-fehler-bg:#3A2222;  --st-fehler-ink:#F0A5A5;
  --st-info-bg: #1D2B38;   --st-info-ink: #92C2E6;
  --st-weg-bg:  #2A2825;   --st-weg-ink:  #A5A29A;

  --logo-ink:  #F1EFE9;
  --shadow: 0 14px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
  --flaeche-a:  #24221F;  --flaeche-b:  #201F1C;
  --stark-a:    #EFEDE7;  --stark-b:    #DEDBD3;
  --stark-a-an: #FFFFFF;  --stark-b-an: #EFEDE7;
  --auf-stark:  #1B1B18;
  --akzent-a:   #2E2850;  --akzent-b:   #262046;

  /* Im Dunkeln flaechig statt bunt: die drei Pastellfelder waren auf Papier
     eine Wohltat und auf Dunkel ein Schleier. */
  --grund:
    radial-gradient(1100px 560px at 6% -12%, #2A2150 0%, rgba(42,33,80,0) 72%),
    radial-gradient(900px 500px at 97% -8%, #162A3A 0%, rgba(22,42,58,0) 70%),
    radial-gradient(820px 520px at 68% 112%, #322616 0%, rgba(50,38,22,0) 72%);

}

/* Maschinenausgabe — Protokolle, Fehlermeldungen fremder Programme.
   Bewusst die einzige Stelle mit fester Schrittweite: hier zaehlt, dass
   Zeilen und Einrueckungen genau so stehen wie im Original. Umbruch bleibt
   erlaubt, damit auf dem Telefon nichts seitlich hinauslaeuft - eine
   Fehlermeldung, zu deren Ende man schieben muss, liest niemand. */
.protokoll{
  margin:12px 0 0; padding:14px 16px;
  background:var(--wolken); border:1px solid var(--line); border-radius:var(--r);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12.5px; line-height:1.55; color:var(--ink-2);
  white-space:pre-wrap; overflow-wrap:anywhere;
  max-height:340px; overflow-y:auto;
}


/* ============================================================
   Arbeitsliste
   ============================================================ */
.arbeit{ margin:0; padding:0; list-style:none }

.arbeit__punkt{
  display:grid; grid-template-columns:18px minmax(0,1fr); gap:12px;
  align-items:start; padding:11px 0;
  border-top:1px solid var(--line); font-size:14.5px;
}
.arbeit__punkt:first-child{ border-top:0 }

/* Dasselbe Kaestchen wie in den Listen - es ist dieselbe Geste. */
.arbeit__marke{
  position:relative; width:18px; height:18px; margin-top:1px;
  border:1px solid var(--line-2); border-radius:5px; background:var(--surface);
}
.ist-fertig .arbeit__marke{ background:var(--st-aktiv-ink); border-color:var(--st-aktiv-ink) }
.ist-fertig .arbeit__marke::after{
  content:""; position:absolute; left:5px; top:2px; width:5px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg);
}

/* Erledigtes leiser: es bleibt stehen, damit sichtbar ist, was schon einmal
   falsch war - aber es soll nicht mitlesen muessen, wer nach dem naechsten
   Punkt sucht. */
.ist-fertig{ color:var(--ink-3) }


/* ============================================================
   Changelog
   ============================================================ */
.log{ display:flex; flex-direction:column }

.log__eintrag{
  display:grid; grid-template-columns:150px minmax(0,1fr) 140px 80px;
  gap:16px; align-items:baseline;
  padding:13px 0; border-top:1px solid var(--line);
}
.log__eintrag:first-child{ border-top:0 }

/* Der Build steht vorn und traegt die Zeile: er ist das, womit man den
   Stand auf der Systemseite vergleicht. */
.log__build{ font-size:13.5px; font-weight:500; font-variant-numeric:tabular-nums }
.log__was{ font-size:14.5px }
.log__zeit, .log__commit{ font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums }
.log__commit{ font-family:var(--mono, ui-monospace), monospace }

@media (max-width:900px){
  .log__eintrag{ grid-template-columns:minmax(0,1fr) auto; row-gap:4px }
  .log__was{ grid-column:1 / -1; order:3 }
  .log__commit{ order:2; text-align:right }
  .log__zeit{ grid-column:1 / -1; order:4 }
}


/* ============================================================
   Vereinbarungen
   ============================================================
   Die Seite, die vor allem anderen steht: was jemand bestaetigen muss, um
   hereinzukommen. Sie ist bewusst schlicht - kein Kasten, keine Karte, kein
   Fortschrittsbalken. Wer hier ist, hat genau eine Aufgabe: lesen und
   zustimmen.

   DER TEXT STEHT DA, UNGEKUERZT UND OHNE AUFKLAPPEN. Eine Zustimmung zu
   einem Text, den man erst aufklappen muss, ist eine Zustimmung zu einer
   Ueberschrift. */
.vereinbarung{ margin: 0 0 34px }

.vereinbarung__titel{
  margin: 0 0 10px;
  font-size: 17px; font-weight: 600; letter-spacing: -.01em;
}

.vereinbarung__text{
  max-width: 62ch;
  font-size: 14.5px; line-height: 1.65; color: var(--ink-2);
}

/* Auch hier ist der Wortlaut Rich-Text - dieselben Werte wie in der
   Leseansicht, nur eine Spur enger: der Text steht in einem Rollbereich und
   nicht auf einem Blatt. */
.vereinbarung__text > :first-child{ margin-top: 0 }
.vereinbarung__text p{ margin: 0 0 12px }
.vereinbarung__text h2{ font-size: 17px; font-weight: 600; margin: 22px 0 8px; color: var(--ink) }
.vereinbarung__text h3{ font-size: 15px; font-weight: 600; margin: 18px 0 6px; color: var(--ink) }
.vereinbarung__text ul,
.vereinbarung__text ol{ margin: 0 0 12px; padding-left: 20px }
.vereinbarung__text li{ margin: 0 0 5px }
.vereinbarung__text a{ color: inherit; text-decoration: underline; text-underline-offset: 3px }
.vereinbarung__text strong{ font-weight: 600; color: var(--ink) }

/* Der Haken steht UNTER dem Text und mit Abstand: er ist die Handlung, und
   sie kommt nach dem Lesen. Direkt an der letzten Zeile klebend sieht er aus
   wie ein Teil des Textes. */
.vereinbarung__haken{
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; padding: 10px 0;
  font-size: 14.5px; cursor: pointer;
}

.vereinbarung__haken input{
  appearance: none; -webkit-appearance: none;
  flex: none; width: 22px; height: 22px; margin: 0;
  border: 1px solid var(--line-2); border-radius: 6px;
  background: var(--surface); cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.vereinbarung__haken input:checked{
  /* Der Token heisst „accent-ink"; „accent" allein gibt es nicht, und die
     Tokenpruefung hat es sofort gemeldet. Ein Farbwert, den es nicht gibt,
     faellt im Browser auf „durchsichtig" zurueck - der Haken waere weiss
     auf weiss gewesen. */
  background-color: var(--accent-ink);
  border-color: transparent;
  /* Der Haken selbst, als Hintergrundbild - ein zweites Element dafuer
     waere ein Element mehr fuer einen Strich. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E");
  background-size: 16px; background-position: center; background-repeat: no-repeat;
}

.vereinbarung__haken input:focus-visible{ outline: 2px solid var(--accent-ink); outline-offset: 2px }

/* Mehrere Vereinbarungen: eine Linie dazwischen, damit man sieht, wo die
   eine aufhoert. */
.vereinbarung + .vereinbarung{ border-top: 1px solid var(--line); padding-top: 26px }


/* Der Scrollbereich der Vereinbarung.
   
   Er hat eine Kante, und die ist hier kein Kasten um gewoehnlichen Inhalt,
   sondern die Auskunft, dass der Text weitergeht: ohne sie haelt man das
   Ende des Ausschnitts fuer das Ende des Textes. Genau deshalb steht
   daneben auch der Weg ins eigene Fenster. */
.vereinbarung__kopf{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin: 0 0 10px;
}

.vereinbarung__fassung{ font-size: 13px; color: var(--ink-3) }

.vereinbarung__ganz{ font-size: 13.5px }

.vereinbarung__text{
  max-height: 320px; overflow-y: auto;
  padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface);
  font-size: 14.5px; line-height: 1.65; color: var(--ink-2);
}

.vereinbarung__text:focus-visible{ outline: 2px solid var(--accent-ink); outline-offset: 2px }

/* Der Vermerk ueber dem Knopf: wer zustimmt, soll wissen, dass der
   Zeitpunkt festgehalten wird. Er steht dort und nicht im Kleingedruckten. */
.vereinbarung__vermerk{
  margin: 4px 0 18px;
  font-size: 13px; color: var(--ink-3);
}

/* Die Leseansicht im eigenen Fenster - nur Text, kein Rahmen, kein Menue. */
.lesen{ background: var(--bg); color: var(--ink) }

.lesen__blatt{ max-width: 74ch; margin: 0 auto; padding: 48px 24px 96px }

.lesen__titel{ margin: 0 0 4px; font-size: 26px; font-weight: 600; letter-spacing: -.02em }

.lesen__fassung{ margin: 0 0 28px; font-size: 13px; color: var(--ink-3) }

.lesen__text{ font-size: 15px; line-height: 1.7; color: var(--ink-2) }

/* Der Wortlaut ist Rich-Text: Ueberschriften, Aufzaehlungen, Verweise. Ohne
   diese Zeilen stuende ein Rechtstext als eine einzige Wand da - der Browser
   gibt einer h2 im Fliesstext keine Luft, wenn ein Reset sie genommen hat. */
.lesen__text > :first-child{ margin-top: 0 }
.lesen__text p{ margin: 0 0 14px }
.lesen__text h2{ font-size: 19px; font-weight: 600; margin: 28px 0 10px; color: var(--ink) }
.lesen__text h3{ font-size: 16px; font-weight: 600; margin: 22px 0 8px; color: var(--ink) }
.lesen__text ul,
.lesen__text ol{ margin: 0 0 14px; padding-left: 22px }
.lesen__text li{ margin: 0 0 6px }
.lesen__text a{ color: inherit; text-decoration: underline; text-underline-offset: 3px }
.lesen__text strong{ font-weight: 600; color: var(--ink) }

@media print{
  .lesen__blatt{ padding: 0 }
  .lesen__fassung{ color: #555 }
}


/* Die einsetzbaren Variablen eines Systemtextes.
   
   Zwei Spalten: der Platzhalter, wie man ihn schreibt, und was er einsetzt.
   Als Satz am Ende („Einsetzbar: {vorname}, {minuten}") war es eine
   Aufzaehlung, die man raten muss - „{minuten}" sagt nicht, wovon. */
.noeo-variablen{ margin:0; padding:0 }

.noeo-variable{
  display:grid; grid-template-columns:180px minmax(0,1fr); gap:12px;
  padding:7px 0; border-top:1px solid var(--line);
}

.noeo-variable:first-child{ border-top:0 }

.noeo-variable dt{ margin:0 }
.noeo-variable dt code{
  font-family:var(--mono, ui-monospace), monospace; font-size:13px;
  color:var(--accent-ink);
}
.noeo-variable dd{ margin:0; font-size:14px; color:var(--ink-2) }

@media (max-width:600px){
  .noeo-variable{ grid-template-columns:minmax(0,1fr); gap:2px }
}