/**
 * SiteRemark Dashboard.
 *
 * Die Akzentfarbe ist das Türkis aus dem Logo, #00EED2. Es ist sehr hell:
 * auf Weiß erreicht es nur 1,5:1 Kontrast und taugt deshalb nicht als
 * Textfarbe. Als Fläche mit dunkler Schrift darauf ist es dagegen
 * hervorragend lesbar (8,4:1). Daraus die Regel, die hier überall gilt:
 *
 *   --akzent        Flächen, Ränder, Zustände. Text darauf immer --auf-akzent.
 *   --akzent-text   Schrift und Verweise auf hellem Grund (4,9:1).
 *   --akzent-tief   Schrift auf hellen Akzentflächen, Hover.
 *
 * Alles andere - Abstände, Radien, Schatten - kommt ebenfalls aus Variablen,
 * damit eine Änderung an einer Stelle überall ankommt statt an dreißig.
 */

:root {
  /* Marke */
  --akzent:        #00eed2;
  --akzent-satt:   #00d7be;   /* Hover auf Akzentflächen */
  --akzent-mittel: #7ff5e6;
  --akzent-hell:   #e2fdf8;
  --akzent-text:   #00806f;
  --akzent-tief:   #04564b;
  --auf-akzent:    #0b3b35;

  /* Neutrale */
  --tinte:      #101728;
  --tinte-weich:#1c2740;
  --grund:      #f4f6fa;
  /* Wurde an fuenf Stellen benutzt und nie festgelegt - Fristen und
     Leerstellen standen dadurch ohne Grund da. */
  --flaeche:    #eef1f6;
  --karte:      #ffffff;
  --linie:      #e5e9f1;
  --linie-satt: #d2d8e4;
  --text:       #16202e;
  /* Beide Grautöne sind nachgemessen: auf Weiß wie auf --grund bleiben sie
     über 4,5:1. Vorher war --sehr-leise ein helles #98a0b1 und erreichte nur
     2,6:1 - Zeitangaben und Feldköpfe waren damit kaum zu lesen. Die
     Abstufung macht jetzt Größe und Gewicht, nicht die Helligkeit. */
  --leise:      #5b6478;
  --sehr-leise: #666e81;

  /* Zustände */
  --offen:       #f5a524;
  --offen-flach: #fff6e6;
  --offen-text:  #8a5300;
  --fertig:      #12a150;
  --fertig-flach:#e6f7ee;
  --fertig-text: #0a6b36;
  --gefahr:      #e5484d;
  --gefahr-flach:#fdecec;
  --gefahr-text: #a8262b;

  /* Form */
  --r-s:  8px;
  --r-m:  11px;
  --r-l:  16px;
  --schatten-s: 0 1px 2px rgba(16, 23, 40, .05);
  --schatten-m: 0 2px 6px rgba(16, 23, 40, .06), 0 1px 2px rgba(16, 23, 40, .04);
  --schatten-l: 0 12px 32px rgba(16, 23, 40, .12);
  --ring: 0 0 0 3px rgba(0, 238, 210, .38);

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--akzent-text); }

/* Ein Fokusring für alles - Tastaturbedienung soll nie raten müssen. */
:focus-visible {
  outline: 2px solid var(--akzent-text);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { width: min(1200px, calc(100% - 40px)); margin: 26px auto 70px; }
.mono { font-family: var(--mono); font-size: .92em; }
.muted { color: var(--leise); }
.grow { flex: 1; }
.hide { display: none !important; }

/* ============================================================== Kopfzeile */

.top {
  background: var(--tinte);
  color: #fff;
  /* Ein feiner Türkisstrich unten - die Marke, ohne dass sie sich aufdrängt. */
  box-shadow: inset 0 -2px 0 rgba(0, 238, 210, .55);
}
.top__inner {
  width: min(1200px, calc(100% - 40px));
  margin-inline: auto;
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.brand__logo { height: 44px; width: auto; display: block; }
.brand__v {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--akzent);
  opacity: .8;
}

.nav { flex: 1; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.nav__i {
  position: relative;
  color: #fff;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--r-s);
  opacity: .78;
  white-space: nowrap;
  transition: opacity .12s, background-color .12s;
}
.nav__i:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
.nav__i.on { opacity: 1; background: rgba(0, 238, 210, .16); color: var(--akzent); }

/* Zwei Zeilen statt einer langen.
   Einzeilig nahm die Warnung so viel Breite, dass "Verwaltung" aus dem
   Menue in die zweite Zeile rutschte - eine Randnotiz verdraengte damit
   die Hauptsache. Gestapelt ist sie halb so breit und faellt genauso auf. */
.nav__warn {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.25;
  background: var(--offen);
  color: #3d2600;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 12px;
  text-align: center;
}
.nav__warn { text-decoration: none; transition: filter .12s; }
.nav__warn:hover { filter: brightness(1.06); }
.nav__warn b { font-weight: 700; }
.nav__warn span { font-weight: 600; opacity: .85; }

/* ---------------------------------------------------------------- Konto */

.konto { flex: 0 0 auto; position: relative; }
/* Name und Firma laufen rechtsbuendig auf das Bild zu. Untereinander
   kostete das zwei Zeilen Kopfhoehe; nebeneinander bestimmt das Bild die
   Hoehe und darf dafuer groesser sein. */
.konto > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px 5px 12px;
  border-radius: var(--r-m);
  color: #fff;
  max-width: 230px;
  transition: background-color .12s;
}
.konto > summary::-webkit-details-marker { display: none; }
.konto > summary:hover { background: rgba(255, 255, 255, .1); }
.konto[open] > summary { background: rgba(255, 255, 255, .16); }

.konto__name {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.konto__pop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  min-width: 224px;
  background: var(--karte);
  color: var(--text);
  border: 1px solid var(--linie);
  border-radius: var(--r-m);
  box-shadow: var(--schatten-l);
  padding: 13px 15px;
}
/* Chrome blendet den Inhalt eines geschlossenen <details> über
   content-visibility aus - ein absolut positioniertes Kind bleibt dabei
   messbar und kann durchscheinen. Deshalb hier ausdrücklich verstecken. */
.konto:not([open]) .konto__pop { display: none; }

.konto__mail { font-size: 12.5px; font-weight: 600; word-break: break-all; }
.konto__rolle { font-size: 11.5px; color: var(--leise); margin-top: 2px; }
/* Das Kontomenue traegt jetzt auch die selteneren Wege. Statt einer Linie
   je Eintrag - die bei sieben Punkten wie ein Gitter aussaehe - trennen
   ausdrueckliche Striche die Gruppen: Konto, Verwaltung, Abmelden. */
.konto__i, .konto__ab {
  display: block;
  margin: 2px -7px 0;
  padding: 7px;
  border-radius: var(--r-s);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--bewegt-kurz), color var(--bewegt-kurz);
}
.konto__i { color: var(--akzent-text); }
.konto__ab { color: var(--gefahr-text); }
.konto__i:hover { background: var(--akzent-sanft); }
.konto__ab:hover { background: var(--gefahr-sanft, #fdeeee); }
.konto__i.on { background: var(--akzent-mittel); }

.konto__trenn {
  height: 1px;
  background: var(--linie);
  margin: 9px -15px;
}

/* Steht der aktive Punkt hier drin, zeigt das Konto es an - sonst wirkte
   die Kopfzeile, als waere man auf keiner Seite. */
.konto--aktiv > summary .konto__icon {
  box-shadow: 0 0 0 2px var(--akzent);
}

/* ============================================================ Überschriften */

.h1 {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 18px;
}
.h2 {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 30px 0 12px;
}
.h2row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin: 30px 0 12px;
}
.h2row .h1, .h2row .h2 { margin: 0; }
.h2row__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.hinttext { font-size: 13px; color: var(--leise); margin: 10px 0 14px; line-height: 1.6; }
.hinttext code, .field code, .p code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 5px;
  padding: 1px 5px;
}

/* ================================================================ Meldungen */

.note-ok, .alert, .warn {
  border-radius: var(--r-m);
  padding: 13px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.55;
  border: 1px solid;
}
.note-ok { background: var(--akzent-hell); border-color: var(--akzent-mittel); color: var(--akzent-tief); }
.alert   { background: var(--gefahr-flach); border-color: #f6cfd0; color: var(--gefahr-text); }
.warn    { background: var(--offen-flach); border-color: #f7dfb4; color: var(--offen-text); }
.note-ok a, .alert a { color: inherit; }

.empty {
  padding: 42px 24px;
  text-align: center;
  color: var(--leise);
  background: var(--karte);
  border: 1px dashed var(--linie-satt);
  border-radius: var(--r-l);
  font-size: 14.5px;
}

/* ================================================================== Knöpfe */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 42px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  background: var(--akzent);
  color: var(--auf-akzent);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s;
}
.btn:hover { background: var(--akzent-satt); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }

.btn--sm { height: 34px; padding: 0 13px; font-size: 13px; border-radius: 7px; }
.btn--wide { width: 100%; }

.btn--ghost {
  background: var(--karte);
  border-color: var(--linie-satt);
  color: var(--text);
}
.btn--ghost:hover { background: var(--grund); border-color: var(--akzent-text); color: var(--akzent-text); }

.btn--danger { background: var(--gefahr-flach); border-color: #f2c4c5; color: var(--gefahr-text); }
.btn--danger:hover { background: var(--gefahr); border-color: var(--gefahr); color: #fff; }

.btn.is-ok { background: var(--fertig); color: #fff; }

/* Kleiner Textknopf für Nebenwege */
.mini {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--leise);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mini:hover { color: var(--akzent-text); }

/* ============================================================== Formulare */

.field { display: block; margin: 16px 0 0; }
.field > span {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #46506a;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field input[type="search"],
.field input[type="url"],
.field input[type="tel"],
.field textarea,
.field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linie-satt);
  border-radius: var(--r-s);
  background: var(--karte);
  font: inherit;
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.field textarea { line-height: 1.55; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--akzent-text);
  box-shadow: var(--ring);
}
.field input[type="file"] { font-size: 13px; color: var(--leise); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stack { display: block; }
.rowbtns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }

.checks { display: grid; gap: 10px; margin-top: 16px; }
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: #3a4257;
  cursor: pointer;
}
.check input {
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
  accent-color: var(--akzent-text);
  flex: 0 0 auto;
}
.check--sm { font-size: 12.5px; }

.fs {
  margin: 18px 0 0;
  padding: 16px 18px 6px;
  border: 1px solid var(--linie);
  border-radius: var(--r-m);
  background: #fbfcfe;
}
.fs legend {
  padding: 0 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--leise);
}
.fs .field:first-of-type { margin-top: 0; }
.fs .hinttext { margin-bottom: 12px; }

.suche { display: flex; align-items: center; gap: 8px; }
.suche__in {
  width: 268px;
  max-width: 46vw;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--linie-satt);
  border-radius: 7px;
  background: var(--karte);
  font: inherit;
  font-size: 13.5px;
  outline: none;
}
.suche__in:focus { border-color: var(--akzent-text); box-shadow: var(--ring); }

/* Feld zum Kopieren */
.copybox { position: relative; }
.copybox__text {
  width: 100%;
  padding: 11px 96px 11px 12px;
  border: 1px solid var(--linie-satt);
  border-radius: var(--r-s);
  background: #fbfcfe;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: #3a4257;
  resize: vertical;
  outline: none;
}
.copybox__text:focus { border-color: var(--akzent-text); box-shadow: var(--ring); }
.copybox__btn { position: absolute; top: 7px; right: 7px; }
.copybox--klein .copybox__text {
  font-size: 12px;
  color: var(--leise);
  min-height: 40px;
}
.copybox--klein .copybox__btn { top: 5px; right: 5px; }

/* ============================================================== Anmeldung */

.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 20px; }
.login__card {
  width: 380px;
  max-width: 100%;
  background: var(--karte);
  padding: 32px;
  border-radius: var(--r-l);
  border: 1px solid var(--linie);
  box-shadow: var(--schatten-l);
}
.login__logo { display: flex; justify-content: center; margin-bottom: 8px; }
.login__logo img { height: 30px; width: auto; display: block; }
.login__card .muted { text-align: center; font-size: 13.5px; margin: 0 0 20px; }
.login__card .btn { margin-top: 22px; }

/* ============================================================ Websitekarten */

.sites {
  display: grid;
  /* Immer drei Spalten, weitere Websites in die naechste Reihe. Darunter
     wird es erst zwei, dann eine - drei Kacheln auf einem Telefon waeren
     je 100 Pixel breit. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}
@media (max-width: 900px) { .sites { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sites { grid-template-columns: 1fr; } }
.site {
  display: block;
  padding: 16px 18px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r-l);
  box-shadow: var(--schatten-s);
  text-decoration: none;
  color: inherit;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.site:hover { border-color: var(--akzent-mittel); box-shadow: var(--schatten-m); transform: translateY(-1px); }
.site.is-active {
  border-color: var(--akzent);
  box-shadow: 0 0 0 1px var(--akzent), var(--schatten-m);
}
.site__name { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.site__domain { font-size: 12.5px; color: var(--leise); margin-top: 2px; overflow-wrap: anywhere; }
.site__stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0 8px; }
.site__meta { font-size: 11.5px; color: var(--sehr-leise); }
.site__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.panelbox {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r-l);
  box-shadow: var(--schatten-s);
  padding: 22px 24px;
}
.panelbox.is-done { opacity: .62; }

/* ================================================================== Marken */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--grund);
  color: var(--leise);
  white-space: nowrap;
}
.tag--open { background: var(--offen-flach); color: var(--offen-text); }
.tag--done { background: var(--fertig-flach); color: var(--fertig-text); }
.tag--cc   { background: var(--akzent-hell); color: var(--akzent-tief); }

.frei-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--fertig-flach);
  color: var(--fertig-text);
  font-size: 11.5px;
  font-weight: 700;
}
.zu-tag {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--grund);
  color: var(--leise);
  font-size: 11.5px;
  font-weight: 700;
}

/* ======================================================== Filter und Umschalter */

.switch {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: #e9edf5;
  border-radius: 10px;
  margin-bottom: 14px;
}
.switch__b {
  padding: 7px 16px;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--leise);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s, color .12s;
}
.switch__b:hover { color: var(--text); }
.switch__b.on {
  background: var(--karte);
  color: var(--text);
  box-shadow: var(--schatten-s);
}

.pagefilter { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--linie-satt);
  background: var(--karte);
  font-size: 12.5px;
  font-weight: 600;
  color: #4a5368;
  text-decoration: none;
  transition: border-color .12s, background-color .12s, color .12s;
}
.chip:hover { border-color: var(--akzent-text); color: var(--akzent-text); }
.chip.on {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--auf-akzent);
}
.chip__n {
  padding: 0 6px;
  border-radius: 999px;
  background: var(--grund);
  font-size: 11px;
  font-weight: 700;
}
.chip.on .chip__n { background: rgba(11, 59, 53, .16); color: var(--auf-akzent); }

/* ========================================================== Sammelaktionen */

.sammel {
  position: sticky;
  top: 12px;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 14px 0;
  padding: 11px 16px;
  background: var(--tinte);
  color: #fff;
  border-radius: var(--r-m);
  box-shadow: var(--schatten-l);
}
.sammel[hidden] { display: none; }
.sammel .check { color: #fff; }
.sammel .check input { accent-color: var(--akzent); }
.sammel__n { font-size: 12.5px; color: var(--akzent); font-weight: 600; }
.sammel .btn--ghost { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
.sammel .btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.5); }

/* ======================================================== Anmerkungskarten */

.page { display: grid; gap: 16px; }

.ann {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r-l);
  box-shadow: var(--schatten-s);
  padding: 18px 20px;
  transition: box-shadow .12s, border-color .12s;
}
.ann:hover { box-shadow: var(--schatten-m); }
.ann.is-picked { border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent), var(--schatten-m); }
.ann.is-done { background: #fbfcfe; }
.ann--korb { opacity: .95; }

.ann__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--linie);
}
.ann__id { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-size: 13px; }
.ann__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ann__pick { display: inline-flex; align-items: center; }
.ann__pick input { width: 16px; height: 16px; accent-color: var(--akzent-text); cursor: pointer; }

.ann__pin {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50% 50% 50% 4px;
  background: var(--akzent-text);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}
.ann__pin.is-done { background: var(--sehr-leise); }

.ann__page {
  font-weight: 600;
  color: var(--akzent-text);
  text-decoration: none;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--akzent-hell);
  font-size: 12.5px;
}
.ann__page:hover { background: var(--akzent-mittel); }
.ann__zeit { color: var(--sehr-leise); font-size: 12px; }

.ann__grid {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.ann__bild { min-width: 0; }
.ann__text { min-width: 0; }

.shot {
  display: block;
  border: 1px solid var(--linie);
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--grund);
}
.shot img { width: 100%; height: auto; display: block; }
.shot--none {
  display: grid;
  place-items: center;
  min-height: 150px;
  color: var(--sehr-leise);
  font-size: 13px;
  border-style: dashed;
}

.feldkopf {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--sehr-leise);
  margin: 0 0 6px;
}
.ann__body + .feldkopf, .copybox + .feldkopf { margin-top: 14px; }

.ann__body {
  font-size: 14.5px;
  color: var(--text);
  background: #fbfcfe;
  border: 1px solid var(--linie);
  border-left: 3px solid var(--akzent);
  border-radius: var(--r-s);
  padding: 13px 15px;
}

.where { margin-top: 16px; }
.where summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--leise);
  padding: 5px 0;
}
.where summary:hover { color: var(--akzent-text); }
.kv {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 7px 16px;
  margin: 10px 0 0;
  font-size: 13px;
}
.kv dt { color: var(--sehr-leise); }
.kv dd { margin: 0; word-break: break-word; }

/* ---------------------------------------------------------- Umgebungsdaten */

.env { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.env__i {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--grund);
  color: #5b6478;
  font-size: 11.5px;
  font-weight: 600;
}
.env__i--warn { background: var(--gefahr-flach); color: var(--gefahr-text); }

.errs { margin: 12px 0 0; border: 1px solid #f4d5d6; border-radius: var(--r-s); overflow: hidden; }
.errs summary {
  padding: 8px 12px;
  background: var(--gefahr-flach);
  color: var(--gefahr-text);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.errs__l { margin: 0; padding: 10px 12px; list-style: none; background: var(--karte); max-height: 220px; overflow-y: auto; }
.errs__i { padding: 6px 0; border-bottom: 1px solid #f2f4f8; font-size: 12px; line-height: 1.5; }
.errs__i:last-child { border-bottom: 0; }
.errs__t { font-family: var(--mono); color: var(--text); word-break: break-word; }
.errs__w { color: var(--sehr-leise); font-size: 11px; word-break: break-all; }

/* ---------------------------------------------------- Handlungsverlauf
   Drei Spalten, weil das Auge sonst jede Zeile neu abtasten muss: die
   Zeit rechtsbündig untereinander, die Art in gleicher Breite daneben,
   der Rest fliessend. Zahlen mit gleicher Ziffernbreite, damit "-10,4"
   und "-8,2" auf derselben Kante enden. */
.verl { margin: 12px 0 0; border: 1px solid var(--linie); border-radius: var(--r-s); overflow: hidden; }
.verl summary {
  padding: 8px 12px;
  background: var(--flach, #f4f6fb);
  color: var(--leise);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.verl__l {
  margin: 0; padding: 8px 12px; list-style: none; background: var(--karte);
  max-height: 260px; overflow-y: auto;
}
.verl__i {
  display: grid;
  grid-template-columns: 52px 68px 1fr;
  gap: 10px;
  padding: 4px 0;
  font-size: 12px;
  line-height: 1.5;
  align-items: baseline;
}
.verl__t {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--sehr-leise);
}
.verl__w { font-weight: 700; color: var(--leise); }
.verl__x { color: var(--text); word-break: break-word; }
.verl__o {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--sehr-leise);
  word-break: break-all;
}

/* Ein Fehler in der Reihe soll auffallen - er ist meistens die Antwort. */
.verl__i--fehler .verl__w,
.verl__i--fehler .verl__x { color: var(--gefahr-text, #c0392b); }
.verl__i--fehler .verl__w { font-weight: 800; }

/* Die Anmerkung selbst schliesst die Zeitachse ab. */
.verl__i--ende { border-top: 1px solid var(--linie); margin-top: 4px; padding-top: 8px; }
.verl__i--ende .verl__w { color: var(--akzent); }

@media (max-width: 560px) {
  /* Auf dem Telefon ist fuer drei Spalten kein Platz: Zeit und Art in
     eine Zeile, der Text darunter. */
  .verl__i { grid-template-columns: 52px 1fr; gap: 4px 10px; }
  .verl__x { grid-column: 1 / -1; padding-left: 62px; }
}

/* ------------------------------------------------------------- Anhänge */

.dat { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; }
.dat__i {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px 6px 6px;
  border-radius: 10px;
  border: 1px solid var(--linie);
  background: var(--karte);
  text-decoration: none;
  color: #3a4257;
  font-size: 12px;
  max-width: 100%;
}
.dat__i:hover { border-color: var(--akzent-mittel); background: var(--akzent-hell); }
.dat__v { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; display: block; background: var(--grund); }

/* Eine Aufnahme bekommt eine ganze Zeile statt einer Kachel: fuenf
   Sekunden sieht man sich an, statt sie herunterzuladen. */
.dat__vid {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 8px;
  border: 1px solid var(--linie);
  border-radius: var(--r-s);
  background: var(--grund);
}
.dat__vid video {
  flex: 1 1 100%;
  width: 100%;
  max-height: 260px;
  border-radius: 6px;
  background: #000;
  display: block;
}
.dat__vid .dat__n { font-size: 12px; color: var(--leise); }
.dat__vid .dat__s { font-size: 11px; color: var(--sehr-leise); }
.dat__k {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 6px;
  background: var(--grund);
  color: var(--leise);
  font-size: 9px;
  font-weight: 700;
}
.dat__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.dat__s { color: var(--sehr-leise); font-size: 11px; }

/* ------------------------------------------------------------ Konversation */

.thread { margin: 14px 0 0; display: grid; gap: 7px; }
.msg { padding: 10px 13px; border-radius: 10px; background: var(--grund); }
.msg--team { background: var(--akzent-hell); }
.msg__who { font-size: 11px; font-weight: 700; color: #4a5368; margin-bottom: 3px; }
.msg__txt { font-size: 13.5px; }

.reply { display: flex; align-items: center; gap: 8px; margin-top: 4px; }

/* ============================================================ Schreibfeld */

.ed { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.ed__bar { display: flex; align-items: center; gap: 2px; }
.ed__b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  border-radius: 7px;
  cursor: pointer;
  color: #5b6478;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  transition: background-color .12s, color .12s;
}
.ed__b:hover { background: var(--akzent-hell); color: var(--akzent-tief); }
.ed__b.is-on { background: var(--akzent); color: var(--auf-akzent); }
.ed__b[disabled] { opacity: .35; cursor: default; }
.ed__b[disabled]:hover, .ed__b[disabled].is-on { background: none; color: #5b6478; }
.ed__b--code.on, .ed__b--code.on:hover { background: var(--tinte); color: var(--akzent); }
.ed__z { font-size: 11px; font-weight: 700; letter-spacing: -.02em; }
.ed__tr { width: 1px; height: 16px; background: var(--linie-satt); margin: 0 5px; }

.ta {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linie-satt);
  border-radius: var(--r-s);
  background: var(--karte);
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.ta:focus, .ta:focus-within { border-color: var(--akzent-text); box-shadow: var(--ring); }
.ed__vis { min-height: 70px; max-height: 240px; overflow-y: auto; cursor: text; }
.ed__vis:empty::before { content: attr(data-leer); color: var(--sehr-leise); pointer-events: none; }
.ed__code {
  min-height: 70px;
  font-family: var(--mono);
  font-size: 12.5px;
  white-space: pre;
  overflow-x: auto;
  resize: vertical;
}

/* ==================================================== Ausgezeichneter Text */

.md { line-height: 1.6; word-break: break-word; }
.md p { margin: 0 0 8px; }
.md p:last-child { margin-bottom: 0; }
.md strong, .md b { font-weight: 700; }
.md em, .md i { font-style: italic; }
.md ul, .md ol { margin: 0 0 8px; padding-left: 20px; }
.md ul:last-child, .md ol:last-child { margin-bottom: 0; }
.md li { margin: 3px 0; }
.md code {
  font-family: var(--mono);
  font-size: .9em;
  background: var(--grund);
  border-radius: 4px;
  padding: 1px 5px;
}
.md pre {
  margin: 0 0 8px;
  padding: 11px 13px;
  background: var(--tinte);
  color: #e6e9f2;
  border-radius: var(--r-s);
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.55;
}
.md pre:last-child { margin-bottom: 0; }
.md pre code { font-family: var(--mono); background: none; padding: 0; white-space: pre; }

/* Ebenso im Schreibfeld - dort steht schon die fertige Ansicht. */
.ed__vis p { margin: 0 0 8px; }
.ed__vis p:last-child { margin-bottom: 0; }
.ed__vis ul, .ed__vis ol { margin: 0 0 8px; padding-left: 20px; }
.ed__vis li { margin: 3px 0; }

/* =============================================================== Profil */

.avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(0, 238, 210, .2);
  color: var(--akzent);
  flex: 0 0 auto;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar__buchstaben { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }

.avatar--gross {
  width: 92px;
  height: 92px;
  background: var(--akzent-hell);
  color: var(--akzent-tief);
  border: 1px solid var(--akzent-mittel);
}
.avatar--gross .avatar__buchstaben { font-size: 28px; }

.profilbild { display: flex; align-items: flex-start; gap: 22px; flex-wrap: wrap; }
.profilbild__rechts { flex: 1; min-width: 260px; }

/* ============================================================== Tabellen */

.table2 { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.table2 th, .table2 td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linie); }
.table2 th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sehr-leise);
  font-weight: 700;
}
.table2 tr:last-child td { border-bottom: 0; }

/* =============================================================== Schmal */

@media (max-width: 900px) {
  .ann__grid { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dt { margin-top: 8px; }
}

@media (max-width: 720px) {
  .wrap { width: calc(100% - 28px); margin-top: 18px; }
  .top__inner { flex-wrap: wrap; padding: 10px 0; gap: 10px; }
  .nav { order: 3; flex-basis: 100%; }
  .konto > summary { padding: 5px 8px; max-width: none; }
  .grid2 { grid-template-columns: 1fr; gap: 0; }
  .h1 { font-size: 22px; }
  .panelbox { padding: 18px 16px; }
  .ann { padding: 16px 14px; }
  .suche__in { width: 100%; max-width: none; }
  .suche { width: 100%; }
  .h2row__tools { width: 100%; }
}

/* Mehrzeilige Domainliste - eine Adresse je Zeile liest sich in Monospace
   deutlich besser, weil Punkte und Bindestriche gleich breit stehen. */
.dom {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
}

/* Der Avatar in der dunklen Leiste bekommt einen feinen Ring, sonst
   verschwimmt ein dunkles Profilbild mit dem Hintergrund. */
.konto__icon {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
  width: 42px;
  height: 42px;
}
.konto__icon .avatar__buchstaben { font-size: 14px; }

/* ==================================================== Kachel mit Zahnrad */

/* Der Knopf liegt neben dem Verweis, nicht darin - ein Knopf in einem Anker
   waere ungueltig und wuerde beim Klick auch die Website wechseln. */
.site-huelle { position: relative; }
.site-huelle .site { height: 100%; }

.site__zahn {
  position: absolute;
  top: 10px;
  right: 10px;
  /* Ueber allem, was die Kachel sonst noch stapelt: bei einer Kachel mit
     Bild liegen dort ein Hintergrund und eine Abdunklung, und ohne diese
     Zeile faengt die Abdunklung den Klick ab. */
  z-index: 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--linie);
  border-radius: 50%;
  background: var(--karte);
  color: var(--leise);
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity .12s, color .12s, border-color .12s, transform .2s;
}
.site__zahn svg { width: 15px; height: 15px; display: block; }
.site-huelle:hover .site__zahn,
.site__zahn:focus-visible { opacity: 1; }
.site__zahn:hover { color: var(--akzent-text); border-color: var(--akzent-text); transform: rotate(35deg); }

/* Auf Geraeten ohne Zeigegeraet gibt es kein Hover - dort immer zeigen. */
@media (hover: none) {
  .site__zahn { opacity: 1; }
}


/* ============================================================== Dialog */

.wsdlg {
  width: min(760px, calc(100vw - 32px));
  max-height: min(86vh, 860px);
  padding: 0;
  /* Nur der Inhalt scrollt, der Kopf bleibt stehen. Als Flex-Spalte, damit
     eine einzige Hoehe gilt - die des Dialogs. Vorher stand hier eine
     zweite Rechnung fuer den Inhalt, und sobald beide auseinanderliefen,
     schnitt overflow:hidden das Ende ab. */
  border: 1px solid var(--linie);
  border-radius: var(--r-l);
  box-shadow: var(--schatten-l);
  background: var(--karte);
  color: var(--text);
  overflow: hidden;
}
.wsdlg::backdrop { background: rgba(12, 18, 32, .5); }

.wsdlg__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--linie);
  background: #fbfcfe;
  position: sticky;
  top: 0;
  z-index: 2;
}
.wsdlg__kopf strong { font-size: 16px; letter-spacing: -.01em; }
.wsdlg__x {
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: var(--leise);
  cursor: pointer;
  padding: 0 4px;
}
.wsdlg__x:hover { color: var(--text); }

/* <dialog> ist geschlossen display:none - die Spalte gilt nur im offenen. */
.wsdlg[open] { display: flex; flex-direction: column; }
.wsdlg__kopf { flex: none; }
.wsdlg__inhalt {
  padding: 14px 22px 22px;
  overflow-y: auto;
  overscroll-behavior: contain;   /* am Ende nicht die Seite dahinter scrollen */
  flex: 1 1 auto;
  min-height: 0;                  /* ohne das schrumpft ein Flex-Kind nicht */
}
.wsdlg .wsform__fuss { position: sticky; bottom: 0; background: var(--karte); padding-bottom: 4px; }

/* ======================================================= Bild einer Website */

.wsbild { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.wsbild__jetzt {
  width: 168px;
  height: 104px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--linie);
  border-radius: var(--r-s);
  background: var(--grund);
  overflow: hidden;
}
.wsbild__jetzt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wsbild__leer { color: var(--sehr-leise); font-size: 12.5px; }
.wsbild__rechts { flex: 1; min-width: 250px; }
.wsbild__stand { margin: 8px 0 0; min-height: 1.4em; }

.wsbild__wahl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 9px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--linie);
}
.wsbild__k {
  position: relative;
  padding: 0;
  border: 2px solid var(--linie);
  border-radius: var(--r-s);
  background: var(--grund);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .12s;
}
.wsbild__k img { width: 100%; height: 78px; object-fit: cover; display: block; }
.wsbild__k span {
  display: block;
  padding: 4px 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--leise);
  background: var(--karte);
}
.wsbild__k:hover { border-color: var(--akzent-mittel); }
.wsbild__k.on { border-color: var(--akzent); }
.wsbild__k.on span { background: var(--akzent); color: var(--auf-akzent); }

/* --------------------------------------------------------- Teilen-Bereich */

.teilen { margin-top: 18px; border: 1px solid var(--linie); border-radius: var(--r-m); }
.teilen > summary {
  padding: 11px 16px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  list-style: none;
}
.teilen > summary::-webkit-details-marker { display: none; }
.teilen > summary::before { content: '▸ '; color: var(--akzent-text); }
.teilen[open] > summary { border-bottom: 1px solid var(--linie); }
.teilen[open] > summary::before { content: '▾ '; }
.teilen > *:not(summary) { padding-inline: 16px; }
.teilen > *:last-child { padding-bottom: 16px; }

.wsform__fuss { border-top: 1px solid var(--linie); margin-top: 20px; padding-top: 16px; }

/* ------------------------------------------------- Kachel mit Hintergrundbild
 *
 * Das Bild liegt hinter dem Text, nicht darüber: weichgezeichnet, leicht
 * vergrößert (sonst zeigen sich die Ränder der Unschärfe) und mit einem
 * Verlauf abgedunkelt. Damit bleibt der Text lesbar, egal wie hell oder
 * unruhig das Bild ist - und Kacheln mit und ohne Bild sind gleich hoch,
 * weil das Bild keinen eigenen Platz braucht.
 */
/* Der Text sitzt unten, bei jeder Kachel gleich. Bei einer Kachel mit Bild
   liegt er damit im dunkelsten Teil des Verlaufs - dort erreicht weisse
   Schrift 9:1 statt 4,2:1 wie oben, wo das Bild noch durchscheint. Und
   Kacheln mit und ohne Bild haben dieselbe Struktur. */
.site {
  position: relative;
  overflow: hidden;
  min-height: 192px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.site__name { margin-top: auto; }
.site__meta { padding-top: 8px; }

.site__hg {
  position: absolute;
  inset: -10%;                     /* Rand der Unschärfe aus dem Bild schieben */
  pointer-events: none;            /* Schmuck faengt keine Klicks */
  background-size: cover;
  background-position: center;
  filter: blur(3px) saturate(1.15);
  transform: scale(1.06);
  z-index: 0;
}
.site--bild::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;            /* dito - die Abdunklung ist nur Farbe */
  /*
   * Nachgerechnet gegen ein rein weisses Bild - den schlimmsten Fall. Der
   * Text beginnt bei knapp einem Drittel der Kachelhoehe; dort muss die
   * Abdunklung schon bei etwa .64 liegen, damit weisse Schrift 4,5:1
   * erreicht. Darueber bleibt es hell, dort steht nichts.
   */
  background:
    linear-gradient(180deg,
      rgba(16, 23, 40, .20) 0%,
      rgba(16, 23, 40, .64) 27%,
      rgba(16, 23, 40, .84) 62%,
      rgba(16, 23, 40, .94) 100%);
}
/* Alles ausser dem Hintergrund kommt über das Overlay. Die Ausnahme ist
   nötig: ohne sie gewinnt diese Regel gegen .site__hg und das Bild stünde
   als Block im Textfluss statt dahinter. */
.site--bild > *:not(.site__hg) { position: relative; z-index: 2; }

.site--bild .site__name { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.site--bild .site__domain { color: rgba(255, 255, 255, .88); text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.site--bild .site__meta { color: rgba(255, 255, 255, .82); text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }

/* Die Marken bekommen den Glaseffekt: durchscheinend mit Unschärfe dahinter.
   Wo backdrop-filter fehlt, bleibt die Fläche einfach etwas kräftiger. */
.site--bild .tag {
  background: rgba(255, 255, 255, .17);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site--bild .tag {
    background: rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
  }
}
.site--bild .tag--open { color: #ffd79a; }

/* Ist etwas offen, faellt die Marke auf: gelbe Flaeche, weisse Schrift -
   auf hellen und auf Bildkacheln gleich, damit man es beim Ueberfliegen
   sieht. Die Spezifitaet sticht den Glaseffekt oben. */
.site .tag--open.hat-offen,
.site--bild .tag--open.hat-offen {
  /* Nachgemessen: Weiss auf #a86200 hat 4,8:1. Helleres Gelb sah
     freundlicher aus, war mit weisser Schrift aber nicht lesbar
     (#ffd79a: 1,4:1, #f5a524: 2,0:1). */
  background: #a86200;
  border-color: #a86200;
  color: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site--bild .tag--done { color: #8ff0bd; }

.site--bild:hover .site__hg { transform: scale(1.12); transition: transform .4s ease; }
.site--bild.is-active::after {
  background:
    linear-gradient(180deg,
      rgba(4, 44, 39, .20) 0%,
      rgba(4, 44, 39, .64) 27%,
      rgba(4, 44, 39, .84) 62%,
      rgba(4, 44, 39, .95) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .site--bild:hover .site__hg { transform: scale(1.06); transition: none; }
}

/* Waehrend der untere Teil nachgeladen wird. Bewusst zurueckhaltend: der
   Wechsel dauert meist so kurz, dass ein Spinner nur flackern wuerde. */
#dash { transition: opacity .12s; }
#dash.is-laedt { opacity: .45; pointer-events: none; }

/* ============================================================== Statistik */

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.kz {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r-l);
  box-shadow: var(--schatten-s);
  padding: 18px 20px;
}
.kz__zahl {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--akzent-tief);
  line-height: 1.15;
}
.kz__text { font-size: 12.5px; color: var(--leise); margin-top: 3px; }

.balken {
  position: relative;
  height: 30px;
  background: #e9edf5;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 18px;
}
.balken__voll {
  height: 100%;
  background: linear-gradient(90deg, var(--akzent-text), var(--akzent));
  border-radius: 999px;
  transition: width .3s;
}
.balken__text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--auf-akzent);
}
.balken--klein { height: 20px; margin: 0; min-width: 84px; }
.balken--klein .balken__text { font-size: 11px; }

/* Wochenvergleich - zwei Säulen je Woche, ohne Diagrammbibliothek. */
.wochen { display: flex; align-items: flex-end; gap: 8px; height: 150px; }
.wochen__w { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.wochen__saeulen {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  width: 100%;
  justify-content: center;
}
.wochen__s { width: 12px; border-radius: 3px 3px 0 0; min-height: 2px; }
.wochen__s--neu { background: var(--offen); }
.wochen__s--fertig { background: var(--akzent-text); }
.wochen__t { font-size: 10px; color: var(--sehr-leise); margin-top: 6px; white-space: nowrap; }

.legende { display: flex; gap: 18px; margin-top: 14px; font-size: 12px; color: var(--leise); }
.legende__p { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }
.legende__p--neu { background: var(--offen); }
.legende__p--fertig { background: var(--akzent-text); }

/* ================================================================ Abo */

.abo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding: 20px 24px;
  border-radius: var(--r-l);
  background: var(--akzent-hell);
  border: 1px solid var(--akzent-mittel);
}
.abo--aus { background: var(--offen-flach); border-color: #f7dfb4; }

.abo__text { flex: 1; min-width: 280px; }
.abo__titel { margin: 0 0 8px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.abo__bilanz { margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; }
.abo__zahlen { margin: 0; font-size: 12.5px; color: var(--leise); }
.abo__was { margin: 10px 0 0; font-size: 13px; color: var(--leise); line-height: 1.6; }

.abo__tat { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }

/* Kennzahl mit Bezugsgrösse dahinter */
.kz__von { font-size: 15px; font-weight: 600; color: var(--sehr-leise); margin-left: 5px; }

.mini-select {
  padding: 6px 9px;
  border: 1px solid var(--linie-satt);
  border-radius: 7px;
  font: inherit;
  font-size: 12.5px;
  background: var(--karte);
}

/* Statistik lädt nach - dieselbe Zurückhaltung wie im Dashboard. */
#stat.is-laedt { opacity: .45; pointer-events: none; }

/* ====================================================== Ansicht umschalten

   Drei Darstellungen, ein Markup. Der Server liefert immer dasselbe; was
   sich ändert, ist allein die Sicht darauf. Das erspart drei Vorlagen, die
   mit der Zeit auseinanderliefen — Sammelaktionen, Abhaken und Editor
   arbeiten in jeder Ansicht unverändert weiter.

   Ausgeblendet wird über eine Positivliste: in den knappen Ansichten
   schweigt alles, und nur Kopfzeile, Bild und Textkörper melden sich
   zurück. Eine Liste des Auszublendenden wäre bei jedem neuen Feld in
   der Karte still veraltet — und das Feld stünde plötzlich mitten in
   der kompakten Zeile.

   Gesteuert über [data-ansicht] am <body>: das Element überlebt jeden
   Austausch per AJAX, also überlebt es auch die Wahl.                     */

.ansicht {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
.ansicht__l { font-size: 12.5px; color: var(--leise); margin-right: 2px; }
.ansicht__b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--rand);
  border-radius: var(--r-s);
  background: var(--flaeche);
  color: var(--leise);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.ansicht__b svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.ansicht__b:hover { background: var(--akzent-sanft); color: var(--text); }

/* Der leuchtende Knopf folgt dem Merkmal am body - kein JS nötig, und nach
   einem Austausch der Liste stimmt die Anzeige sofort wieder. */
body[data-ansicht="voll"]    .ansicht__b[data-view="voll"],
body[data-ansicht="kompakt"] .ansicht__b[data-view="kompakt"],
body[data-ansicht="karten"]  .ansicht__b[data-view="karten"],
body:not([data-ansicht])     .ansicht__b[data-view="voll"] {
  background: var(--akzent-mittel);
  border-color: var(--akzent);
  color: var(--akzent-text);
  font-weight: 600;
}

/* ------------------------------------------- knappe Ansichten gemeinsam

   Erst alles stumm, dann die drei Teile zurückholen, die bleiben sollen.
   Eine aufgeklappte Karte ist von all dem ausgenommen.                   */

body[data-ansicht="kompakt"] .ann > *:not(.ann__head):not(.ann__grid),
body[data-ansicht="kompakt"] .ann__text > *,
body[data-ansicht="karten"] .ann:not(.is-offen) > *:not(.ann__head):not(.ann__grid),
body[data-ansicht="karten"] .ann:not(.is-offen) .ann__text > * {
  display: none;
}

/* Gekürzt wird doppelt abgesichert: -webkit-line-clamp setzt die
   Auslassungspunkte, wo der Text aus Absätzen besteht, und die Höhe deckelt
   den Rest - Listen und Zitate ignorieren das Klammern nämlich.

   Der Innenabstand muss in die Höhe eingerechnet werden. Ohne ihn schneidet
   der Deckel mitten in die erste Zeile, und übrig bleibt ein Kasten mit
   halben Buchstaben. Genau das war hier der Fall. */
body[data-ansicht="kompakt"] .ann__text > .ann__body,
body[data-ansicht="karten"] .ann:not(.is-offen) .ann__text > .ann__body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
body[data-ansicht="kompakt"] .ann__text > .ann__body {
  -webkit-line-clamp: 2;
  padding: 9px 13px;
  /* zwei Zeilen à 1.6em, dazu Innenabstand und Rahmen */
  max-height: calc(3.2em + 20px);
}
body[data-ansicht="karten"] .ann:not(.is-offen) .ann__text > .ann__body {
  -webkit-line-clamp: 3;
  padding: 10px 13px;
  max-height: calc(4.8em + 22px);
}

/* Im Fluss halten, damit aus einem Absatz plus Liste eine Zeile wird. */
body[data-ansicht="kompakt"] .ann__body * {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}
body[data-ansicht="kompakt"] .ann__body { font-size: 14px; line-height: 1.6; }
body[data-ansicht="kompakt"] .ann__body li::after { content: " · "; color: var(--sehr-leise); }

/* ------------------------------------------------------------- kompakt

   Eine Zeile je Anmerkung. Für den Blick über dreissig offene Punkte,
   wenn man nur wissen will, was noch aussteht.                          */

body[data-ansicht="kompakt"] .ann { padding: 12px 15px; margin-bottom: 8px; }
body[data-ansicht="kompakt"] .ann__head { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
body[data-ansicht="kompakt"] .ann__grid { display: block; margin-top: 9px; }
body[data-ansicht="kompakt"] .ann__bild { display: none; }
body[data-ansicht="kompakt"] .ann__zeit .mono { display: none; }

/* -------------------------------------------------------------- karten

   Raster mit kleinem Bild und gekürztem Text. Ein Klick auf die Karte
   klappt sie auf - dann gilt für diese eine wieder die volle Ansicht.  */

body[data-ansicht="karten"] .page {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 14px;
  align-items: start;
}
body[data-ansicht="karten"] .ann:not(.is-offen) { margin-bottom: 0; padding: 13px; cursor: pointer; }
body[data-ansicht="karten"] .ann:not(.is-offen) .ann__head {
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  margin-bottom: 9px;
}
body[data-ansicht="karten"] .ann:not(.is-offen) .ann__id { font-size: 12px; gap: 7px; }
body[data-ansicht="karten"] .ann:not(.is-offen) .ann__zeit .mono { display: none; }
body[data-ansicht="karten"] .ann:not(.is-offen) .ann__grid { grid-template-columns: 1fr; gap: 11px; }
body[data-ansicht="karten"] .ann:not(.is-offen) .shot img {
  max-height: 145px;
  object-fit: cover;
  object-position: top;
}

/* Der Hinweis erscheint nur, wo wirklich etwas verborgen ist - welche
   Karten das sind, misst ansicht.js am fertigen Umbruch. */
.ann__mehr { display: none; }
body[data-ansicht="karten"] .ann:not(.is-offen) .ann__text > .ann__mehr:not([hidden]) {
  display: block;
  margin-top: 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--akzent-text);
}

/* Die aufgeklappte Karte nimmt sich die volle Breite des Rasters. */
body[data-ansicht="karten"] .ann.is-offen { grid-column: 1 / -1; cursor: default; }

@media (max-width: 900px) {
  body[data-ansicht="karten"] .page { grid-template-columns: 1fr; }
}

/* Projektname in der Karte - nur auf der Sammelseite, wo mehrere
   Projekte nebeneinanderstehen und die Herkunft sonst fehlte. */
.ann__projekt {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--akzent-mittel);
  color: var(--akzent-text);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.ann__projekt:hover { background: var(--akzent); color: #06231f; }

/* ================================================== Bewegung und Rückmeldung

   Zurückhaltend gehalten: Bewegung soll sagen, was gerade passiert ist —
   nicht auf sich selbst aufmerksam machen. Ein Rand, der beim Zeigen
   erscheint, und ein Wachsen, das man verfolgen kann, genügen.

   Alles hier steht unter dem Vorbehalt am Ende des Abschnitts: wer im
   System weniger Bewegung eingestellt hat, bekommt die Zustände sofort
   und ohne Übergang.                                                      */

:root {
  --bewegt:      .22s cubic-bezier(.2, .7, .3, 1);
  --bewegt-kurz: .14s cubic-bezier(.2, .7, .3, 1);
}

/* ------------------------------------------------------- Karte im Ruhezustand

   Der Rand blendet zur Akzentfarbe auf, statt hart umzuspringen. Dazu ein
   Hauch Anhebung - gerade genug, dass die Karte unter dem Zeiger als das
   erkennbar wird, was gleich reagiert. */

.ann {
  transition:
    box-shadow var(--bewegt),
    border-color var(--bewegt),
    transform var(--bewegt-kurz),
    background-color var(--bewegt);
}
.ann:hover {
  /* Erst ein fester Wert, dann die Mischung: Browser ohne color-mix
     ueberspringen die zweite Zeile und behalten den ersten Rand. */
  border-color: #7fd9cd;
  border-color: color-mix(in srgb, var(--akzent) 55%, var(--linie));
  box-shadow: var(--schatten-m);
}

/* Nur in den knappen Ansichten anheben. In der ausführlichen ist die Karte
   so hoch, dass eine Verschiebung mehr auffiele als sie nützt. */
body[data-ansicht="karten"] .ann:not(.is-offen):hover,
body[data-ansicht="kompakt"] .ann:hover {
  transform: translateY(-2px);
}
body[data-ansicht="karten"] .ann:not(.is-offen):active { transform: translateY(0); }

/* Der Schatten wächst mit, wenn die Karte sich hebt. */
body[data-ansicht="karten"] .ann:not(.is-offen):hover { box-shadow: var(--schatten-l); }

/* Bild in der Karte: ein sehr leichtes Heranrücken beim Zeigen. */
body[data-ansicht="karten"] .ann:not(.is-offen) .shot { overflow: hidden; }
body[data-ansicht="karten"] .ann:not(.is-offen) .shot img {
  transition: transform .4s cubic-bezier(.2, .7, .3, 1);
}
body[data-ansicht="karten"] .ann:not(.is-offen):hover .shot img { transform: scale(1.035); }

/* Der Hinweis rückt beim Zeigen ein Stück nach - die Karte bestätigt, dass
   sie den Klick erwartet. */
body[data-ansicht="karten"] .ann__mehr { transition: transform var(--bewegt), color var(--bewegt); }
body[data-ansicht="karten"] .ann:not(.is-offen):hover .ann__mehr { transform: translateX(3px); }
body[data-ansicht="karten"] .ann__mehr::after { content: " →"; }

/* -------------------------------------------------------- Zuklappen-Knopf */

.ann__zu {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: 50%;
  background: var(--karte);
  color: var(--leise);
  cursor: pointer;
  transition: background var(--bewegt-kurz), color var(--bewegt-kurz),
              border-color var(--bewegt-kurz), transform var(--bewegt-kurz);
}
.ann__zu svg { width: 15px; height: 15px; display: block; margin: auto; }
.ann__zu:hover {
  background: var(--akzent-sanft);
  border-color: var(--akzent);
  color: var(--akzent-text);
  transform: rotate(90deg);
}
body[data-ansicht="karten"] .ann.is-offen { position: relative; }
body[data-ansicht="karten"] .ann.is-offen .ann__zu { display: block; }

/* Platz für den Knopf, damit er nicht auf den Aktionen liegt. */
body[data-ansicht="karten"] .ann.is-offen .ann__head { padding-right: 40px; }

/* ------------------------------------------- Wachsen von Spalte auf Breite

   Ein Rasterfeld lässt sich nicht von einer Spalte auf alle animieren -
   grid-column kennt keinen Zwischenwert. Die View-Transition-API löst genau
   das: der Browser hält vorher und nachher fest und bewegt die Karte selbst
   von der einen Grösse in die andere. Kann er es nicht, springt die Karte
   wie bisher; verloren geht dabei nichts ausser der Bewegung.             */

::view-transition-group(ann-offen) {
  animation-duration: .34s;
  animation-timing-function: cubic-bezier(.2, .7, .3, 1);
}
/* Beide Stände über die volle Fläche legen, sonst zerrt der Browser das
   alte Bild auf die neue Grösse und der Text verzieht sich sichtbar. */
::view-transition-old(ann-offen),
::view-transition-new(ann-offen) {
  height: 100%;
  overflow: clip;
  object-fit: none;
  object-position: top left;
}
::view-transition-old(ann-offen) { animation: sfb-weg .16s ease forwards; }
::view-transition-new(ann-offen) { animation: sfb-her .28s ease .04s backwards; }

@keyframes sfb-weg { to { opacity: 0; } }
@keyframes sfb-her { from { opacity: 0; } }

/* Die übrigen Karten rutschen zur Seite - das darf man ruhig sehen. */
::view-transition-group(root) { animation-duration: .3s; }

/* ----------------------------------------------------- kleinere Regungen */

.chip, .switch__b, .ansicht__b, .btn, .site, .nav__i {
  transition: background var(--bewegt-kurz), color var(--bewegt-kurz),
              border-color var(--bewegt-kurz), box-shadow var(--bewegt-kurz),
              transform var(--bewegt-kurz);
}
.btn:active, .chip:active, .switch__b:active, .ansicht__b:active { transform: translateY(1px); }

/* Neu eingetroffene Anmerkung nach dem Nachladen: kurz aufblenden, damit
   klar ist, was sich geändert hat. */
@keyframes sfb-auftauchen {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
#dash .page > .ann { animation: sfb-auftauchen .26s cubic-bezier(.2, .7, .3, 1) backwards; }
#dash .page > .ann:nth-child(1) { animation-delay: .01s; }
#dash .page > .ann:nth-child(2) { animation-delay: .04s; }
#dash .page > .ann:nth-child(3) { animation-delay: .07s; }
#dash .page > .ann:nth-child(4) { animation-delay: .10s; }
#dash .page > .ann:nth-child(n+5) { animation-delay: .12s; }

/* Verschwindet eine Anmerkung durchs Abhaken, soll sie nicht einfach
   wegspringen - sonst zweifelt man, ob man die richtige erwischt hat. */
.ann.is-geht {
  animation: sfb-fort .22s cubic-bezier(.4, 0, 1, .6) forwards;
  pointer-events: none;
}
@keyframes sfb-fort {
  to { opacity: 0; transform: scale(.97) translateY(-4px); }
}

/* Auf dem Board verschwindet sie nicht, sie wandert in die naechste
   Spalte. Ohne kurzes Aufleuchten sucht man sie dort. */
.ann.is-kommt { animation: sfb-an .5s ease-out; }
@keyframes sfb-an {
  from { box-shadow: 0 0 0 2px var(--akzent); }
  to   { box-shadow: 0 0 0 2px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .ann.is-kommt { animation: none; }
}

/* ------------------------------------------------------------ Vorbehalt */

@media (prefers-reduced-motion: reduce) {
  .ann,
  .ann__zu,
  .ann__mehr,
  .chip, .switch__b, .ansicht__b, .btn, .site, .nav__i,
  body[data-ansicht="karten"] .ann .shot img {
    transition: none !important;
    animation: none !important;
  }
  body[data-ansicht="karten"] .ann:not(.is-offen):hover,
  body[data-ansicht="kompakt"] .ann:hover,
  body[data-ansicht="karten"] .ann:not(.is-offen):hover .shot img,
  body[data-ansicht="karten"] .ann:not(.is-offen):hover .ann__mehr {
    transform: none;
  }
  .ann__zu:hover { transform: none; }
  #dash .page > .ann { animation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ================================================================ Fusszeile

   Nimmt auf, was die Kopfzeile nicht mehr trägt. Dunkel wie die Kopfzeile,
   damit die Seite zwischen zwei Ufern liegt und nicht unten ausfranst.    */

.fuss {
  margin-top: 56px;
  background: var(--tinte);
  color: rgba(255, 255, 255, .74);
  box-shadow: inset 0 2px 0 rgba(0, 238, 210, .55);
}
.fuss__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 22px 28px;
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(120px, 1fr));
  gap: 30px;
}
.fuss__marke { max-width: 320px; }
.fuss__logo { height: 30px; width: auto; display: block; margin-bottom: 12px; }
.fuss__text {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .62);
}
.fuss__klein { margin: 0; font-size: 12px; color: rgba(255, 255, 255, .48); }
.fuss__klein a { color: var(--akzent); text-decoration: none; }
.fuss__klein a:hover { text-decoration: underline; }

.fuss__h {
  margin: 0 0 11px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--akzent);
}
.fuss__sp { display: flex; flex-direction: column; gap: 8px; }
.fuss__sp a {
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  font-size: 13.5px;
  width: fit-content;
  transition: color var(--bewegt-kurz), transform var(--bewegt-kurz);
}
.fuss__sp a:hover { color: #fff; transform: translateX(2px); }
.fuss__stand { font-size: 12.5px; color: rgba(255, 255, 255, .5); }

.fuss__unten {
  border-top: 1px solid rgba(255, 255, 255, .10);
  padding: 15px 22px;
  text-align: center;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .45);
}
.fuss__punkt { margin: 0 7px; opacity: .5; }

@media (max-width: 900px) {
  .fuss__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .fuss__marke { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 520px) {
  .fuss__inner { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .fuss__sp a { transition: none; }
  .fuss__sp a:hover { transform: none; }
}

/* ====================================================== Gruppen im Hauptmenü

   Neun Punkte nebeneinander brachen die Zeile. In fünf Gruppen passen sie
   und sagen zugleich, was wozu gehört.

   Als <details> gebaut wie das Kontomenü: das Aufklappen kostet dann kein
   Skript, und ohne JavaScript funktioniert es genauso.                    */

.nav__grp { position: relative; }
.nav__grp > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
}
.nav__grp > summary::-webkit-details-marker { display: none; }
.nav__grp > summary::marker { content: ""; }

.nav__pfeil {
  width: 9px;
  height: 9px;
  opacity: .8;
  transition: transform var(--bewegt-kurz);
}
.nav__grp[open] > summary .nav__pfeil { transform: rotate(180deg); }

/* Die aufgeklappte Gruppe bleibt hell, damit man sieht, wo man ist. */
.nav__grp[open] > summary,
.nav__grp.on > summary { opacity: 1; background: rgba(255, 255, 255, .12); }

.nav__pop {
  position: absolute;
  left: 0;
  top: calc(100% + 7px);
  z-index: 45;
  min-width: 212px;
  padding: 7px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r-m);
  box-shadow: var(--schatten-l);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nav__u {
  display: block;
  padding: 8px 10px;
  border-radius: var(--r-s);
  color: var(--text);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--bewegt-kurz), color var(--bewegt-kurz);
}
.nav__u:hover { background: var(--akzent-sanft); }
.nav__u.on { background: var(--akzent-mittel); color: var(--akzent-text); }

/* Auf schmalen Schirmen klappt die Gruppe in der Leiste auf, statt darüber
   zu schweben - ein Schwebefenster hätte dort keinen Platz zum Schweben. */
@media (max-width: 720px) {
  .nav__pop {
    position: static;
    box-shadow: none;
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .12);
    min-width: 0;
    width: 100%;
  }
  .nav__u { color: #fff; }
  .nav__u:hover, .nav__u.on { background: rgba(255, 255, 255, .14); color: #fff; }
  .nav__grp { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__pfeil, .nav__u { transition: none; }
}

/* Brücke über die Lücke zwischen Knopf und Aufklappfenster. Ohne sie
   verlässt die Maus auf dem Weg nach unten kurz die Gruppe, und diese
   fiele zu, bevor der Zeiger ankommt. */
.nav__pop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -9px;
  height: 9px;
}
@media (max-width: 720px) {
  /* In der Leiste aufgeklappt gibt es keine Lücke zu überbrücken. */
  .nav__pop::before { display: none; }
}

/* Das Zeichen führt zurück zur Übersicht - der gewohnte Weg nach Hause. */
.brand { text-decoration: none; }
a.brand { transition: opacity var(--bewegt-kurz); }
a.brand:hover { opacity: .82; }

/* Der Kreis zeigt einen Ausschnitt, kein gestauchtes Bild. */
.avatar--gross img { width: 100%; height: 100%; object-fit: cover; }

/* Name und Firma stehen links vom Bild und sind rechtsbuendig - so hat
   die Gruppe eine gerade Kante zum Bild hin, egal wie lang die Namen sind. */
.konto__zeilen {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  line-height: 1.2;
  min-width: 0;
}
.konto__firma {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .02em;
  opacity: .7;
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* =============================================== Läuft das Widget überhaupt?

   Die häufigste Frage nach dem Anlegen einer Website. Ohne Antwort merkt
   man einen fehlenden Einbau erst daran, dass keine Anmerkungen kommen -
   und weiss dann immer noch nicht, woran es lag.                          */

.wstand {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-size: 12px;
  color: var(--leise);
}
.wstand__punkt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--sehr-leise);
}
.wstand--laeuft .wstand__punkt { background: #17a97f; box-shadow: 0 0 0 3px rgba(23, 169, 127, .16); }
.wstand--still  .wstand__punkt { background: #d19100; box-shadow: 0 0 0 3px rgba(209, 145, 0, .16); }
.wstand--nie    .wstand__punkt { background: #c4443c; box-shadow: 0 0 0 3px rgba(196, 68, 60, .16); }

/* Auf einer Kachel mit Hintergrundbild steht der Text auf dunklem Grund. */
.site--bild .wstand { color: rgba(255, 255, 255, .82); }

/* ==================================================================== Fristen

   Ein Datum allein sagt wenig - "15.09." muss man erst gegen den Kalender
   halten. Die Marke nimmt das ab; die Farbe trägt dabei nichts, was der
   Text nicht auch sagt.                                                   */

.frist {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.frist--offen    { background: var(--flaeche);   color: var(--leise); border: 1px solid var(--linie); }
.frist--bald     { background: #fff4e0;          color: #8a5a00; }
.frist--heute    { background: #ffe9d6;          color: #8f4300; }
.frist--ueber    { background: #fde8e7;          color: #a3251c; }
.frist--erledigt { background: var(--flaeche);   color: var(--sehr-leise); }

.fristwahl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 10px;
  border: 1px solid var(--linie);
  border-radius: var(--r-s);
  background: var(--flaeche);
}
.fristwahl__l { font-size: 11.5px; color: var(--leise); font-weight: 600; }
.fristwahl input {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  padding: 3px 0;
}
.fristwahl input:disabled { opacity: .5; }

/* In den knappen Ansichten bleibt die Marke, das Feld verschwindet mit den
   übrigen Aktionen - dort will man lesen, nicht planen. */
body[data-ansicht="kompakt"] .fristwahl,
body[data-ansicht="karten"] .ann:not(.is-offen) .fristwahl { display: none; }

/* ================================================================== Stufen

   Drei Karten nebeneinander, die mittlere hervorgehoben. Die Empfehlung
   steht nicht da, weil sie die teuerste ist, sondern weil sie die weisse
   Marke enthält - das ist der Grund, aus dem eine Agentur wechselt.       */

.stufen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 16px;
  margin-top: 20px;
  align-items: stretch;
}

.stufe {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 24px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r-l);
  box-shadow: var(--schatten-s);
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
.stufe:hover { box-shadow: var(--schatten-m); transform: translateY(-2px); }

/* Die empfohlene Stufe: kräftigerer Rand, dunkler Kopf, kein Zufall. */
.stufe--tipp {
  border-color: var(--akzent);
  box-shadow: 0 0 0 1px var(--akzent), var(--schatten-m);
}
.stufe--jetzt { border-color: var(--akzent-text); }

.stufe__band {
  position: absolute;
  top: -11px;
  left: 22px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.stufe__band--tipp  { background: var(--akzent); color: #06231f; }
.stufe__band--jetzt { background: var(--akzent-text); color: #fff; }

.stufe__name {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--leise);
}

/* Preis und Zeitraum in einer Grundlinie - "19 €" gross, "im Monat" klein
   daneben, nicht darunter und nicht angeklebt. */
.stufe__preis {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 12px;
}
.stufe__zahl {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stufe__zeit { font-size: 13.5px; color: var(--leise); }

.stufe__fuer {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--leise);
  min-height: 3.1em;
}

/* --------------------------------------------------------------- Liste

   Der Marker liegt absolut, die Zeile fliesst.

   Vorher stand hier ein Raster mit zwei Spalten - und "<strong>3</strong>
   Websites" sind zwei Rasterfelder, nicht eines: die Zahl landete in der
   ersten Spalte, das Wort in der nächsten Zeile. Ein Fluss kennt dieses
   Problem nicht.                                                        */

.stufe__liste {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  font-size: 14px;
}
.stufe__liste li {
  position: relative;
  padding-left: 24px;
  color: var(--leise);
  line-height: 1.45;
}
.stufe__liste li::before {
  content: "·";
  position: absolute;
  left: 6px;
  top: 0;
  color: var(--sehr-leise);
  font-weight: 700;
}
.stufe__liste li strong { color: var(--text); font-weight: 600; }

.stufe__liste li.ja::before {
  content: "✓";
  left: 4px;
  font-size: 13px;
  color: var(--akzent-text);
}
.stufe__liste li.nein { color: var(--sehr-leise); }
.stufe__liste li.nein::before { content: "–"; left: 5px; }

/* --------------------------------------------------------------- Fuss */

.stufe__fuss { margin-top: auto; }
.stufe__fuss .btn { width: 100%; }

/* Nur die empfohlene Stufe bekommt den vollen Knopf. Drei gleich laute
   Knöpfe sagen dasselbe wie keiner. */
.stufe:not(.stufe--tipp) .stufe__fuss .btn {
  background: transparent;
  color: var(--akzent-text);
  border: 1px solid var(--linie);
}
.stufe:not(.stufe--tipp) .stufe__fuss .btn:hover {
  border-color: var(--akzent);
  background: var(--akzent-sanft);
}

.stufe__aktiv {
  margin-top: auto;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--akzent-text);
  padding: 11px;
  background: var(--akzent-sanft);
  border-radius: var(--r-s);
}

@media (prefers-reduced-motion: reduce) {
  .stufe { transition: none; }
  .stufe:hover { transform: none; }
}

/* Der dritte Zustand: jemand hat sich die Anmerkung genommen. Eigene Farbe,
   damit sich auf einen Blick unterscheiden lässt, was liegt und was läuft. */
.tag--work { background: #e7eefc; color: #24509b; }
.ann__wer {
  font-size: 12px;
  color: var(--leise);
  font-style: italic;
}
.ann.is-work { border-left: 3px solid #4a7fd4; }

/* Hier stand eine Fassung fuer dunkle Systeme - die einzige Regel dieser
   Art im ganzen Stylesheet. Das Dashboard ist hell; bei dunklem
   Betriebssystem stand deshalb eine dunkle Pille auf hellem Grund. */

/* ======================================================== Der erste Schritt

   Wer sich gerade angemeldet hat, sieht ein leeres Dashboard. Hier stand
   vorher der Name einer Datei; jetzt steht hier der nächste Schritt.      */

.einstieg {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(200px, .8fr);
  gap: 32px;
  align-items: start;
  padding: 28px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r-l);
  box-shadow: var(--schatten-s);
  margin-bottom: 20px;
}
.einstieg__form { display: grid; gap: 14px; max-width: 420px; margin-top: 18px; }

.einstieg__schritte {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 14px; counter-reset: schritt;
}
.einstieg__schritte li {
  display: grid; gap: 2px;
  padding-left: 34px; position: relative;
  counter-increment: schritt;
}
.einstieg__schritte li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: 1px;
  width: 23px; height: 23px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--akzent-mittel); color: var(--akzent-text);
  font-size: 12px; font-weight: 700;
}
.einstieg__schritte strong { font-size: 14.5px; color: var(--text); }
.einstieg__schritte span   { font-size: 13px; color: var(--leise); }

/* ------------------------------------------------ Warten auf das Werkzeug */

.wartet {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 22px 24px; margin-bottom: 20px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--akzent);
  border-radius: var(--r-m);
}
.wartet__text { flex: 1; min-width: 0; }

/* Ein Puls sagt: hier wird gewartet, nicht gemeldet. */
.wartet__puls {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--akzent); flex: none; margin-top: 7px;
  box-shadow: 0 0 0 0 rgba(0, 238, 210, .6);
  animation: sfb-puls 2s ease-out infinite;
}
@keyframes sfb-puls {
  70%  { box-shadow: 0 0 0 12px rgba(0, 238, 210, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 238, 210, 0); }
}

@media (max-width: 760px) {
  .einstieg { grid-template-columns: 1fr; gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .wartet__puls { animation: none; }
}

/* ============================================== Bereiche im Datenexport

   Erst die Auswahl, dann die Datei. Die Zahl neben jedem Bereich ist
   schon die halbe Auskunft: Wer wissen will, was gespeichert ist, muss
   dafür keine JSON öffnen.                                              */

.bereiche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.bereich {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--linie);
  border-radius: var(--r-m);
  background: var(--flaeche);
  cursor: pointer;
  transition: border-color var(--bewegt-kurz), background var(--bewegt-kurz);
}
.bereich:hover { border-color: var(--linie-satt, var(--akzent)); }
.bereich:has(input:checked) { border-color: var(--akzent); background: var(--akzent-sanft); }

.bereich input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--akzent-text); flex: none; }

.bereich__inhalt { display: grid; gap: 4px; min-width: 0; flex: 1; }
.bereich__kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.bereich__titel { font-weight: 600; font-size: 14.5px; color: var(--text); }

.bereich__zahl {
  font-size: 17px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bereich__einheit { font-size: 12px; font-weight: 500; color: var(--leise); margin-left: 3px; }

.bereich__was { font-size: 12.5px; line-height: 1.5; color: var(--leise); }
.bereich__hinweis {
  font-size: 11.5px; color: var(--sehr-leise); font-style: italic;
}

/* Ein Bereich ohne Inhalt bleibt wählbar - er landet dann eben als leere
   Liste im Export. Aber er soll nicht so aussehen, als wäre dort etwas. */
.bereich--leer .bereich__zahl { color: var(--sehr-leise); font-weight: 500; }
.bereich--leer .bereich__titel { color: var(--leise); }

@media (prefers-reduced-motion: reduce) {
  .bereich { transition: none; }
}

/* Eine Stufe, die man nur ansehen kann. */
.stufe__nurschau {
  margin-top: auto;
  text-align: center;
  font-size: 12.5px;
  color: var(--sehr-leise);
  padding: 11px;
  border: 1px dashed var(--linie-satt);
  border-radius: var(--r-s);
}

/* ================================================ Auftragsverarbeitung

   Volle Breite, aber nicht volle Zeilenlänge: Ein Vertrag über 1200 Pixel
   Fliesstext liest sich niemand durch. Die Abschnitte stehen deshalb in
   zwei Spalten, sobald Platz dafür da ist - wie in einem Gesetzestext.   */

.vertrag {
  margin-top: 18px;
  padding: 32px 34px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r-l);
  box-shadow: var(--schatten-s);
  line-height: 1.68;
}
.vertrag__vor {
  margin: 0 0 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--linie);
  color: var(--leise);
  max-width: 78ch;
  font-size: 17px;
}

.vertrag__teile {
  display: grid;
  /* 440 statt 340: bei 1200 Pixeln ergibt das zwei Spalten statt drei.
     Drei waeren 350 Pixel breit - fuer Vertragstext zu eng, da bricht
     jeder zweite Satz mitten im Gedanken um. */
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: 26px 48px;
  align-items: start;
}
.vertrag__a h2 {
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.005em;
}
.vertrag__a p { margin: 0; color: var(--leise); }

/* ---------------------------------------------------------- Anbieter

   Die Anschrift als Block, nicht als Reihe von Kommata. Sie ist eine
   Anschrift - so, wie sie auf einen Briefumschlag gehört.             */

.vertrag__schluss {
  margin: 30px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--linie);
  display: flex;
  gap: 32px 56px;
  flex-wrap: wrap;
}
.vertrag__wer { display: grid; gap: 2px; }
.vertrag__k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sehr-leise);
  margin-bottom: 4px;
}
.vertrag__adresse {
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: var(--leise);
}
.vertrag__adresse strong { color: var(--text); font-weight: 600; }

/* Der Stand oben: angenommen, von wem, mit dem Weg zum Nachweis. */
.vertrag__stand {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 16px 20px;
  background: var(--akzent-sanft);
  border: 1px solid var(--akzent);
  border-radius: var(--r-m);
}
.vertrag__stand > div:nth-child(2) { flex: 1; min-width: 0; }
.vertrag__haken {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: var(--akzent); color: #06231f;
  font-weight: 700; font-size: 15px;
}

@media (max-width: 600px) {
  .vertrag { padding: 22px 20px; }
}

/* ============================================================== Empfehlen */

.werbecode {
  display: inline-block;
  margin-top: 12px;
  padding: 14px 22px;
  background: var(--tinte);
  color: var(--akzent);
  border-radius: var(--r-m);
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .16em;
  user-select: all;          /* ein Klick markiert ihn ganz */
}

/* Die Staffel als Reihe: was erreicht ist, leuchtet; wo es springt,
   ist es hervorgehoben. Die Zahl links ist die Zahl der Geworbenen. */
.staffel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.staffel__s {
  padding: 12px 10px;
  text-align: center;
  border: 1px solid var(--linie);
  border-radius: var(--r-s);
  background: var(--flaeche);
}
.staffel__n {
  font-size: 20px;
  font-weight: 700;
  color: var(--leise);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.staffel__m { font-size: 12px; color: var(--sehr-leise); margin-top: 3px; }

.staffel__s.ist-sprung { border-color: var(--linie-satt); background: var(--flaeche-2, var(--flaeche)); }
.staffel__s.ist-sprung .staffel__m { color: var(--leise); font-weight: 600; }

.staffel__s.ist-da {
  border-color: var(--akzent);
  background: var(--akzent-sanft);
}
.staffel__s.ist-da .staffel__n { color: var(--akzent-text); }
.staffel__s.ist-da .staffel__m { color: var(--akzent-text); }

/* ------------------------------------------------------- Aussehen ---
   Die Felder für Farben, Zeichen und Texte des Widgets. Sie stehen in
   zwei Spalten, solange Platz ist - eine Farbe braucht keine ganze
   Zeilenbreite, ein Begrüssungssatz schon. */
.stilfelder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px 18px;
  margin-top: 14px;
}
.stilfeld { display: block; }
.stilfeld__t {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinte);
  margin-bottom: 5px;
}
.stilfeld input[type="text"] { width: 100%; }

/* Wähler und Textfeld sind dieselbe Farbe von zwei Seiten: klicken
   oder tippen. Der Wähler bleibt schmal, das Feld nimmt den Rest. */
.stilfeld__farbe { display: flex; gap: 8px; align-items: center; }
.stilfeld__farbe input[type="color"] {
  flex: 0 0 auto;
  width: 42px;
  height: 38px;
  padding: 2px;
  border: 1px solid var(--linie);
  border-radius: var(--r-s);
  background: var(--flaeche);
  cursor: pointer;
}
.stilfeld__farbe input[type="text"] { flex: 1 1 auto; min-width: 0; }

.stilfeld__w {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--sehr-leise);
}
.stilfeld__w em { font-style: normal; color: var(--leise); }

/* Die beiden Textfelder tragen ganze Sätze - sie bekommen die volle
   Breite, sobald das Raster mehr als eine Spalte hat. */
@media (min-width: 700px) {
  .stilfeld--breit { grid-column: 1 / -1; }
}

/* ================================================ Einstellungen einer Website

   Vorher standen fünf umrandete Kästen untereinander, jeder mit eigener
   Legende und eigenem Rand: viel Linie für wenig Inhalt. Ein Block trennt
   jetzt durch eine Überschrift und eine Linie darüber - das trägt dieselbe
   Gliederung auf halber Höhe. */

.wsblock { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linie); }
.wsblock:first-of-type { margin-top: 4px; padding-top: 0; border-top: 0; }

.wsblock__t {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--leise);
}

/* Überschrift links, eine Auswahl rechts auf derselben Zeile. */
.wsblock__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.wsblock__kopf .wsblock__t { margin-bottom: 12px; }

.wsblock .field:first-child { margin-top: 0; }

/* Bild links, Name und Domains rechts - beides gehört zur Frage, welche
   Website das ist. */
.wskopf { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.wskopf__bild { flex: 0 0 auto; width: 168px; }
.wskopf__bild .wsbild__jetzt { width: 168px; height: 100px; }
.wskopf__felder { flex: 1 1 300px; min-width: 260px; }
.wskopf__felder .field:first-child { margin-top: 0; }

/* Die drei Wege zum Bild als Textknöpfe unter der Vorschau, nicht als
   Knopfreihe mit eigener Zeile darüber. */
.wskopf__bildtat {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 8px;
}
.mini--datei { cursor: pointer; }
.mini--datei input[type="file"] { display: none; }
.mini--weg { color: var(--gefahr-text); }
.mini[disabled] { opacity: .45; cursor: not-allowed; text-decoration: none; }

/* Zwei Felder nebeneinander, das zweite nur so breit wie nötig. */
.wsreihe { display: flex; gap: 16px; flex-wrap: wrap; }
.wsreihe > .field { flex: 1 1 260px; margin-top: 0; }
.wsreihe > .field--eng { flex: 0 1 190px; }

.checks--eng { gap: 7px; margin-top: 14px; }

/* Zwei Möglichkeiten, die einander ausschliessen, als ein Schalter statt
   als zwei Zeilen mit Punkten davor - bei genau zwei Antworten liest sich
   das schneller und nimmt eine Zeile statt drei. */
.segwahl {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--linie-satt);
  border-radius: var(--r-m);
  background: var(--grund);
  margin-bottom: 12px;
}
.segwahl__o { cursor: pointer; }
.segwahl__o input { position: absolute; opacity: 0; pointer-events: none; }
.segwahl__o > span {
  display: block;
  padding: 6px 13px;
  border-radius: var(--r-s);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--leise);
  white-space: nowrap;
  transition: background-color .12s, color .12s;
}
.segwahl__o > span em { font-style: normal; opacity: .6; font-weight: 500; }
.segwahl__o:hover > span { color: var(--akzent-text); }
.segwahl__o input:checked + span {
  background: var(--karte);
  color: var(--akzent-text);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
.segwahl__o input:focus-visible + span { box-shadow: var(--ring); }

@media (max-width: 720px) {
  .wskopf__bild { width: 100%; }
  .wskopf__bild .wsbild__jetzt { width: 100%; }
  .wsblock__kopf { align-items: flex-start; }
}

/* Farbfelder sind schmal, ganze Sätze brauchen die Breite. Die vier Farben
   stehen dadurch in einer Reihe statt in zweien. */
.stilfelder { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 14px; }
.stilfeld--farbe .stilfeld__w { margin-top: 3px; }
.stilfeld--text input, .stilfeld--bild input { max-width: 520px; }

/* Überschrift auf einer Anmeldekarte. Die Karte hatte bisher keine - dort
   stand immer nur ein Formular. Eine Antwort ("Danke, wir melden uns")
   braucht eine. */
.login__t {
  margin: 4px 0 12px;
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  color: var(--tinte);
}

/* ==================================================== Anfragen auf Freigabe

   Eine Zeile je Wartendem: wer, wann, und die zwei Knöpfe. Mehr braucht
   die Entscheidung nicht - alles Weitere steht ohnehin erst fest, wenn
   die Person drin ist. */

.anfragen { display: grid; gap: 10px; margin-top: 16px; }

.anfrage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid var(--linie);
  border-radius: var(--r-m);
  background: var(--karte);
}
.anfrage__wer { min-width: 0; flex: 1 1 260px; }
.anfrage__name { font-size: 15px; font-weight: 600; color: var(--tinte); }
.anfrage__mail {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--leise);
  margin-top: 2px;
  word-break: break-all;
}
.anfrage__meta { font-size: 12px; color: var(--sehr-leise); margin-top: 4px; }
.anfrage__tat { display: flex; gap: 8px; flex: 0 0 auto; }

/* ===================================================== Neuigkeiten (Glocke)

   Als <details> gebaut wie das Kontomenü: Eine Glocke, die erst nach dem
   Laden eines Skripts funktioniert, ist beim ersten Klick noch keine. */

.glocke { flex: 0 0 auto; position: relative; }
.glocke > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: rgba(255, 255, 255, .78);
  transition: background-color .12s, color .12s;
}
.glocke > summary::-webkit-details-marker { display: none; }
.glocke > summary svg { width: 19px; height: 19px; }
.glocke > summary:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.glocke[open] > summary { background: rgba(255, 255, 255, .18); color: #fff; }
.glocke--voll > summary { color: #fff; }

/* Die Zahl sitzt am Rand des Zeichens, nicht daneben: Sie soll auffallen,
   ohne die Kopfzeile breiter zu machen. */
.glocke__z {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--akzent);
  color: #06231f;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.glocke__pop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  width: min(380px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--linie);
  border-radius: var(--r-m);
  background: var(--karte);
  box-shadow: 0 14px 40px rgba(16, 24, 40, .18);
  color: var(--text);
}
.glocke:not([open]) .glocke__pop { display: none; }

.glocke__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 9px 10px;
  font-size: 13.5px;
}
.glocke__kopf form { margin: 0; }

.glocke__leer { padding: 14px 9px 18px; font-size: 13px; color: var(--sehr-leise); }

.glocke__e {
  display: flex;
  gap: 10px;
  padding: 9px;
  border-radius: var(--r-s);
  text-decoration: none;
  color: inherit;
}
.glocke__e:hover { background: var(--flaeche); }

/* Ein Punkt statt eines Symbols: Bei fünf Arten wäre eine Symbolreihe eine
   Legende, die niemand liest. Die Farbe genügt zum Unterscheiden. */
.glocke__art {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--linie-satt);
}
.glocke__art--anmerkung { background: var(--akzent); }
.glocke__art--antwort   { background: #6b8afd; }
.glocke__art--frist     { background: #e0803a; }
.glocke__art--anfrage   { background: #b06bd8; }

.glocke__inhalt { min-width: 0; }
.glocke__t { display: block; font-size: 13px; font-weight: 600; color: var(--tinte); }
.glocke__x {
  display: block;
  font-size: 12.5px;
  color: var(--leise);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.glocke__m { display: block; font-size: 11.5px; color: var(--sehr-leise); margin-top: 3px; }

.glocke__e--neu .glocke__t { font-weight: 700; }

.glocke__trenn {
  margin: 8px 0 2px;
  padding: 8px 9px 4px;
  border-top: 1px solid var(--linie);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sehr-leise);
}

.glocke__mehr {
  display: block;
  margin-top: 6px;
  padding: 9px;
  border-top: 1px solid var(--linie);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  color: var(--akzent-text);
  text-decoration: none;
}
.glocke__mehr:hover { background: var(--akzent-sanft); border-radius: 0 0 var(--r-s) var(--r-s); }

/* ======================================================== Mailverlauf */

.mfilter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.mtab { table-layout: auto; }
.mtab__zeit { white-space: nowrap; color: var(--leise); }
.mtab__an { font-family: var(--mono); font-size: 12.5px; word-break: break-all; }

/* Ein Fehlschlag ist die interessanteste Zeile der Tabelle - er bekommt
   den Rand, nicht bloss ein Wort. */
.mtab--weg > td:first-child { box-shadow: inset 3px 0 0 var(--gefahr-text); }
.mtab--weg { background: var(--gefahr-sanft, #fdeeee); }

.tag--warn { background: var(--gefahr-sanft, #fdeeee); color: var(--gefahr-text); }

.blaettern {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
  font-size: 12.5px;
}

@media (max-width: 720px) {
  /* Auf dem Telefon liest niemand eine fünfspaltige Tabelle. */
  .mtab thead { display: none; }
  .mtab, .mtab tbody, .mtab tr, .mtab td { display: block; width: 100%; }
  .mtab tr {
    padding: 10px 0;
    border-bottom: 1px solid var(--linie);
  }
  .mtab td { border: 0; padding: 2px 12px; }
  .mtab--weg > td:first-child { box-shadow: none; }
}

/* =============================================== Kopfzeile auf dem Telefon

   Diese Regeln stehen bewusst am Ende der Datei.

   Sie standen zuerst in der Media-Query weiter oben - und wurden von den
   Grundregeln überschrieben, die im Quelltext danach kommen. Gleiche
   Spezifität: die spätere gewinnt. Am Dateiende gewinnt die Media-Query. */

@media (max-width: 720px) {
  /* Name und Firma weichen: In der Kopfzeile zählt jede Breite, und wer
     angemeldet ist, weiss, wer er ist. */
  .konto__zeilen { display: none; }

  /* Das Panel richtet sich am Fenster aus, nicht an der Glocke. An ihr
     hängend ragte es links aus dem Bild - die Glocke sitzt nicht am
     rechten Rand, das Konto steht daneben. */
  .glocke__pop {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 62px;
    width: auto;
    max-height: calc(100vh - 80px);
  }
}

/* ============================================== Erklärung an einem Feld

   Ein Fragezeichen statt eines Satzes unter jedem Feld. Die Sätze wären
   ehrlich, machten das Formular aber doppelt so hoch - und wer es zum
   zehnten Mal ausfüllt, liest sie längst nicht mehr. */

.hilfe {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  margin-left: 4px;
  border: 0;
  border-radius: 50%;
  background: var(--linie-satt);
  color: var(--karte);
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: 1px;
  transition: background-color .12s;
}
.hilfe:hover, .hilfe:focus { background: var(--akzent-text); outline: none; }

/* Der Kasten selbst.

   Sichtbar bei Hover UND bei Fokus. Der Fokus ist der Klick: Ein Knopf
   behält ihn, bis daneben geklickt wird - damit bleibt die Erklärung
   stehen, während man sie liest, und lässt sich auf einem Telefon
   überhaupt erst öffnen. Nur Hover reichte für beides nicht. */
.hilfe__t {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 40;
  width: max-content;
  max-width: 280px;
  transform: translateX(-50%);
  padding: 9px 11px;
  border-radius: var(--r-s);
  background: var(--tinte);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .28);
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s, visibility .12s;
  pointer-events: none;
}
.hilfe:hover .hilfe__t,
.hilfe:focus .hilfe__t { opacity: 1; visibility: visible; }

/* Das Zipfelchen zum Knopf hin. */
.hilfe__t::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--tinte);
}

/* Wohin der Kasten ausweichen muss, weiss erst der Browser: Es haengt
   davon ab, wo das Fragezeichen im Fenster steht. admin/hilfe.js rechnet es
   aus und verschiebt ihn - das Zipfelchen bleibt dabei am Fragezeichen. */
.hilfe__t::after { margin-left: calc(-5px + var(--hilfe-zipfel, 0px)); }

/* Ein Zusatz an der Beschriftung, der kleiner ist als sie. */
.feldnote { display: block; font-weight: 500; font-size: 11.5px; color: var(--sehr-leise); font-style: normal; }

/* Eine Einheit hinter einem Zahlenfeld - "15 Minuten" liest sich, "15"
   allein wirft eine Frage auf. */
.mitanhang { display: flex; align-items: center; gap: 8px; }
.mitanhang input { flex: 0 1 90px; }
.mitanhang__t { font-size: 13px; color: var(--leise); white-space: nowrap; }

/* ================================================== Anleitung im Formular */

.wsanleit {
  margin: 4px 0 0;
  border: 1px solid var(--akzent-mittel);
  border-radius: var(--r-m);
  background: var(--akzent-sanft);
}
.wsanleit > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 15px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.wsanleit > summary::-webkit-details-marker { display: none; }
.wsanleit > summary::before {
  content: '▸';
  color: var(--akzent-text);
  font-size: 11px;
  transition: transform .15s;
}
.wsanleit[open] > summary::before { transform: rotate(90deg); }
.wsanleit__t { font-size: 13.5px; font-weight: 700; color: var(--akzent-text); }
.wsanleit__k { font-size: 12.5px; color: var(--leise); }
.wsanleit[open] .wsanleit__k { display: none; }

.wsanleit__inhalt { padding: 0 15px 14px 32px; }

/* Nummeriert, weil es hier wirklich eine Reihenfolge gibt: Ohne die Zeile
   im Quelltext nützt der schönste Gastlink nichts. */
.wsanleit__s { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.wsanleit__s li { margin-bottom: 9px; }
.wsanleit__s li:last-child { margin-bottom: 12px; }
.wsanleit__s strong { color: var(--tinte); }
.wsanleit__s em { font-style: normal; color: var(--gefahr-text); font-weight: 600; }

/* ==================================================== Vorschau des Widgets */

.wsvor { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.wsvor__links  { flex: 1 1 340px; min-width: 280px; }
.wsvor__rechts { flex: 1 1 420px; min-width: 300px; }

.wsvor__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.wsvor__t {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--leise);
}

.wsvor__wahl { display: flex; gap: 3px; padding: 3px; border-radius: var(--r-s); background: var(--grund); }
.wsvor__b {
  border: 0;
  background: none;
  padding: 5px 9px;
  border-radius: 5px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--leise);
  cursor: pointer;
  white-space: nowrap;
}
.wsvor__b:hover { color: var(--akzent-text); }
.wsvor__b.on {
  background: var(--karte);
  color: var(--akzent-text);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

/* Der Rahmen ist die simulierte Website.
 
   Er ist innen 720 Pixel breit und wird verkleinert dargestellt, statt
   einfach schmal zu sein. Der Unterschied ist nicht Kosmetik: Bei 300 Pixel
   Breite schaltet das Widget auf sein Telefon-Layout um, und die Vorschau
   zeigte dann etwas, das auf keinem Laptop so aussieht. Der Knopf sass
   plötzlich an einer anderen Stelle und die Namensabfrage lief unten aus
   dem Bild.

   720 und nicht 1024: Die Grenze im Widget liegt bei 640 Pixeln, also
   genügen 720 mit etwas Luft. Bei 1024 war alles darin so klein, dass man
   eine eingestellte Farbe eher erahnte als sah - und darum geht es hier. */
.wsvor__buehne {
  position: relative;
  width: 100%;
  aspect-ratio: 720 / 520;
  border: 1px solid var(--linie-satt);
  border-radius: var(--r-m);
  background: #fff;
  overflow: hidden;
}
.wsvor__rahmen {
  position: absolute;
  top: 0;
  left: 0;
  width: 720px;
  height: 520px;
  border: 0;
  transform: scale(var(--wsvor-faktor, .45));
  transform-origin: top left;
}

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

/* ================================================== Betreibersicht

   Sie war früher immer an, ohne dass man es sah - und dann standen die
   Projekte fremder Kundschaft im eigenen Dashboard, zwischen den eigenen,
   ohne Kennzeichen. Läuft sie, sagt das jetzt die Kopfzeile. */

.sichtan {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.25;
  padding: 4px 11px;
  border-radius: 12px;
  background: var(--gefahr-text, #c0392b);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: filter .12s;
}
.sichtan:hover { filter: brightness(1.1); }
.sichtan span { font-weight: 600; opacity: .85; }

/* Der Schalter auf der Systemseite. */
.sicht {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--linie);
  border-radius: var(--r-m);
  background: var(--flaeche);
}
.sicht.ist-an {
  border-color: var(--gefahr-text, #c0392b);
  background: var(--gefahr-sanft, #fdeeee);
}
.sicht__text { flex: 1 1 340px; min-width: 260px; }
.sicht__text strong { font-size: 14px; color: var(--tinte); }
.sicht__text p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--leise); }
.sicht__text em { font-style: normal; font-weight: 700; color: var(--gefahr-text, #c0392b); }

/* ============================================= Eigenes Zeichen hochladen */

.logofeld {
  display: block;
  /* Die Maße stehen an einer Stelle: Der Kasten benutzt sie, das Bild
     rechnet mit ihnen. Zwei Zahlen, die zusammengehoeren, gehoeren
     zusammen aufgeschrieben. */
  --logo-b: 190px;
  --logo-h: 52px;
  --logo-luft: 6px;
}
.logofeld__bild {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: var(--logo-b);
  height: var(--logo-h);
  padding: var(--logo-luft) 10px;
  margin-bottom: 6px;
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: var(--r-s);
  /* Karo dahinter: Ein weisses Logo auf weissem Grund sieht aus wie gar
     keines - und genau dann laedt man es ein zweites Mal hoch. */
  background:
    linear-gradient(45deg, #eef0f4 25%, transparent 25%, transparent 75%, #eef0f4 75%),
    linear-gradient(45deg, #eef0f4 25%, transparent 25%, transparent 75%, #eef0f4 75%),
    var(--karte);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
}

/* Feste Maße, keine Prozente.

   Mit "max-height: 100%" - und auch mit "height: 100%" - lief ein 600
   Pixel hohes Logo aus dem Kasten heraus und legte sich ueber den Text
   darunter: In einem Grid-Item mit "place-items: center" loest die
   Prozentangabe nicht gegen die feste Hoehe des Kastens auf. Nachgemessen
   in dev/logofeld-test.html: Kasten 52 Pixel, Bild 128.

   "contain" passt jedes Seitenverhaeltnis ein, ohne zu beschneiden. */
.logofeld__bild img {
  max-width: calc(var(--logo-b) - 20px);
  max-height: calc(var(--logo-h) - 2 * var(--logo-luft));
  object-fit: contain;
  display: block;
}
.logofeld__tat { display: flex; flex-wrap: wrap; gap: 4px 12px; }

/* ====================================== Die Stilfelder wie jedes andere Feld

   Sie waren kleiner als die Felder daneben - schmaler Rahmen, kaum
   Rundung, weniger Höhe. In einem Formular, in dem oben "Name" und
   "Erlaubte Domains" stehen, fällt das auf: Die Farben sahen aus wie
   etwas Angeflanschtes statt wie Einstellungen.

   Die Werte hier sind dieselben wie bei .field - nicht ähnliche, sondern
   dieselben. */

.stilfeld input[type="text"],
.stilfeld input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linie-satt);
  border-radius: var(--r-s);
  background: var(--karte);
  font: inherit;
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.stilfeld input:focus {
  border-color: var(--akzent-text);
  box-shadow: var(--ring);
}

/* Der Farbwähler wird so hoch wie das Feld daneben. Zwei Kästen, die sich
   um zwei Pixel unterscheiden, sehen aus wie ein Fehler. */
.stilfeld__farbe input[type="color"] {
  width: 44px;
  height: 42px;
  border-color: var(--linie-satt);
  border-radius: var(--r-s);
}

.stilfeld__t {
  font-size: 12.5px;
  font-weight: 600;
  color: #46506a;
  margin-bottom: 6px;
}

/* "Datei wählen" war ein unterstrichener Textlink zwischen lauter Feldern.
   Als Kasten in derselben Höhe liest es sich als das, was es ist: eine
   Eingabe, die noch leer ist. */
.logofeld .mini--datei {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--linie-satt);
  border-radius: var(--r-s);
  background: var(--karte);
  color: var(--leise);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .12s, color .12s;
}
.logofeld .mini--datei::before { content: '↑'; font-size: 14px; line-height: 1; }
.logofeld .mini--datei:hover { border-color: var(--akzent-text); color: var(--akzent-text); }

.logofeld .mini--weg {
  padding: 9px 4px;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.logofeld__tat { gap: 6px 10px; align-items: center; }

/* ══════════════════════════════════════════════════════ Telefon und Tablet

   Gemessen statt vermutet: dev/responsiv-bauen.php erzeugt eine Seite aus
   echtem Markup, und im Browser wurde bei 375, 768 und 1024 Pixeln nach
   vier Dingen gesucht - Querscrollen, Elementen über dem Rand, zu kleinen
   Tap-Zielen und Text, der aus seinem Kasten läuft.

   Gefunden wurden fünf Sachen. Sie stehen unten, jede mit ihrem Befund.

   Die Grenzen sind ab hier zwei: 1040 für „Tablet und schmaler Laptop",
   720 für „Telefon". Vorher standen im Stylesheet sechs verschiedene -
   520, 600, 700, 720, 760, 900 -, und zwischen ihnen lagen Zustände, die
   nie jemand angesehen hat. Genau dort sass der Fehler bei 768. */

/* ── Befund 1: 47 Pixel Querscrollen auf JEDER Breite ────────────────────

   Der Erklärkasten am Fragezeichen ragte über den rechten Rand hinaus -
   auch zugeklappt. "visibility: hidden" nimmt ein Element nicht aus dem
   Layout: Es blieb 280 Pixel breit und schob die Seite auseinander. Auf
   dem Telefon konnte man die ganze Seite seitwärts wischen, ohne dass
   etwas zu sehen war.

   Jetzt "display: none". Der weiche Übergang entfällt - eine Erklärung,
   die sofort da ist, ist ohnehin die bessere. */
.hilfe__t {
  display: none;
  transition: none;
  max-width: min(280px, calc(100vw - 24px));
}
.hilfe:hover .hilfe__t,
.hilfe:focus .hilfe__t { display: block; opacity: 1; visibility: visible; }

/* ── Befund 2: Die Kopfzeile brach zwischen 720 und 1040 um ──────────────

   Die vorhandene Regel griff erst bei 720. Auf einem Tablet mit 768 galt
   damit noch das Layout für breite Bildschirme - das Menü rutschte in eine
   zweite Zeile und das Konto ragte 14 Pixel über den Rand.

   Dazwischen wird jetzt alles etwas enger, statt umzubrechen. */
@media (max-width: 1040px) {
  .top__inner { width: calc(100% - 28px); gap: 10px; flex-wrap: wrap; }

  /* Das Menü bekommt eine eigene Zeile.
 
     Gemessen: Bei 768 Pixeln braucht es 443, und neben Marke, Warnung,
     Glocke und Konto bleiben ihm 249. Es brach also mitten im Menü um -
     zwei Punkte oben, drei unten, und der Rest der Kopfzeile daneben.
     Eine ganze Zeile ist auch zwei Zeilen, aber eine geordnete. */
  .nav { order: 3; flex-basis: 100%; padding-bottom: 6px; }
  .top__inner { padding-top: 6px; }
  .nav { gap: 0; }
  .nav__i, .nav__grp > summary { padding: 8px 9px; font-size: 13px; }
  .brand__logo { height: 36px; }
  .brand__v { display: none; }
  .konto > summary { max-width: 180px; gap: 8px; padding: 5px 6px; }
  .konto__name { font-size: 12px; max-width: 110px; }
  .konto__firma { font-size: 9.5px; max-width: 110px; }
  .nav__warn { font-size: 10px; padding: 4px 8px; }
}

/* ── Befund 3: Auf dem Telefon blieb die Leiste zweizeilig und eng ───────

   Bei 375 Pixeln passt ein Menü mit fünf Punkten nicht nebeneinander.
   Es bekommt eine eigene Zeile und darf seitlich rollen - besser eine
   Zeile zum Wischen als vier Zeilen Menü über dem Inhalt. */
@media (max-width: 720px) {
  /* Auf dem Telefon passen fünf Punkte auch in einer eigenen Zeile nicht
     nebeneinander - dort wird gewischt. */
  .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav__i, .nav__grp { flex: 0 0 auto; }

  .konto > summary { max-width: none; }
  .nav__warn { order: 2; }
}

/* ── Befund 4: Die Zustandsknöpfe der Vorschau waren 403 Pixel breit ─────

   Vier Knöpfe nebeneinander - auf 375 Pixeln ragten sie 59 Pixel heraus
   und erzeugten Querscrollen. Sie rollen jetzt in ihrer eigenen Zeile,
   statt die Seite mitzunehmen. */
@media (max-width: 720px) {
  .wsvor__kopf { flex-direction: column; align-items: flex-start; gap: 6px; }
  .wsvor__wahl {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .wsvor__wahl::-webkit-scrollbar { display: none; }
  .wsvor__b { flex: 0 0 auto; }
}

/* ── Befund 5: Tap-Ziele unter 32 Pixeln ────────────────────────────────

   Gemessen: die Menügruppen 23 Pixel hoch, das Zahnrad 30, „Vorschläge"
   und „Datei…" 19, die Fragezeichen 16. Auf einem Bildschirm, den man mit
   dem Finger bedient, ist das zu wenig - die übliche Untergrenze liegt bei
   44, und darunter tippt man daneben.

   Grösser wird die TREFFERFLÄCHE, nicht das Aussehen: Ein Fragezeichen
   von 44 Pixeln sähe aus wie ein Knopf. Das leistet ein Pseudo-Element,
   das über dem Zeichen liegt und nichts anzeigt. */
@media (hover: none) {
  .nav__grp > summary,
  .nav__i { min-height: 40px; display: inline-flex; align-items: center; }

  .site__zahn { width: 44px; height: 44px; }

  .mini, .hilfe { position: relative; }
  .mini::after, .hilfe::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
  /* Der Kasten der Erklärung liegt über dieser Fläche, nicht darunter. */
  .hilfe__t { z-index: 41; }

  .wsvor__b { min-height: 40px; }
  .glocke > summary { width: 44px; height: 44px; }
}

/* ── Nachtrag zu Befund 3: die Aufklappmenüs ragten heraus ───────────────

   Auf dem Telefon rollt die Menüleiste seitwärts. Ein Untermenü, das sich
   am Menüpunkt ausrichtet, landet damit rechts ausserhalb der Seite,
   sobald sein Punkt weit genug gerollt ist. Es hängt jetzt am linken Rand
   und ist höchstens so breit wie das Fenster. */
@media (max-width: 720px) {
  .nav__grp { position: static; }
  .nav__pop {
    left: 12px;
    right: 12px;
    width: auto;
    min-width: 0;
    max-width: calc(100vw - 24px);
  }
}

/* ── Nachtrag zu Befund 5: 31 bis 34 Pixel sind auch zu wenig ────────────

   Nach dem ersten Durchgang blieben die kleinen Knöpfe (34), die Warnung
   in der Kopfzeile (33), die Sprachwahl (31) und die Zeilen mit Häkchen
   (21) übrig. Auf einem Finger-Bildschirm zählt jede davon. */
@media (hover: none) {
  .btn--sm { min-height: 40px; }
  .nav__warn { min-height: 40px; justify-content: center; }
  .segwahl__o > span { min-height: 38px; display: flex; align-items: center; }

  /* Ein Häkchen trifft man nicht, eine Zeile schon. */
  .check { min-height: 40px; align-items: center; }
  .check input { width: 20px; height: 20px; margin-top: 0; }

  /* Und die Zeilen in der Glocke sowie in den Aufklappmenüs. */
  .glocke__e, .nav__u, .konto__i, .konto__ab { min-height: 40px; }
  .nav__u, .konto__i, .konto__ab { display: flex; align-items: center; }
}

/* ── Nebenbefund: die Menügruppen sassen sechs Pixel tiefer ──────────────

   „Projekte" und „Verwaltung" sind <details>, die anderen Punkte <a>. Ein
   <details> bringt seine eigene Höhe mit, und "align-items: center" richtet
   dann zwei verschieden hohe Kästen an ihrer Mitte aus - die Schrift darin
   landet nicht auf derselben Linie. Gemessen: Oberkante 19 gegen 25.

   Auf jeder Breite, nicht nur auf dem Telefon. */
.nav__grp { display: flex; align-items: stretch; }
.nav__grp > summary { display: flex; align-items: center; }
.nav__i { display: inline-flex; align-items: center; }

/* ═══════════════════════════════════════ Dringlichkeit und Zuständigkeit

   Beides steht in der Kopfzeile der Karte, nicht in einem Menü: Es
   beantwortet die Frage, die man beim Überfliegen einer Liste stellt -
   was zuerst, und wer. Wer erst klicken muss, um es zu sehen, sieht es
   nie. */

.prio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
}
.prio--hoch {
  background: var(--gefahr-sanft, #fdeeee);
  color: var(--gefahr-text, #c0392b);
}
.prio--hoch::before { content: '!'; font-weight: 800; }
.prio--niedrig {
  background: var(--flaeche);
  color: var(--sehr-leise);
  font-weight: 600;
}
.prio--niedrig::before { content: '↓'; }

/* Eine Karte mit Dringendem hat einen Streifen. Ein Wort in einer Zeile
   voller Wörter übersieht man; eine Kante nicht. */
.ann:has(.prio--hoch) { box-shadow: inset 3px 0 0 var(--gefahr-text, #c0392b); }

.ann__wem {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  background: var(--akzent-sanft);
  color: var(--akzent-text);
  font-size: 11.5px;
  font-weight: 600;
}
.ann__wem::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Die Auswahl in der Fusszeile der Karte - so schmal wie ihr Inhalt. */
.annwahl { display: inline-flex; align-items: center; gap: 6px; }
.annwahl__l {
  font-size: 11px;
  font-weight: 600;
  color: var(--sehr-leise);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.annwahl select {
  padding: 6px 8px;
  border: 1px solid var(--linie-satt);
  border-radius: var(--r-s);
  background: var(--karte);
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
}
.annwahl select:focus { border-color: var(--akzent-text); box-shadow: var(--ring); outline: none; }
.annwahl select:disabled { opacity: .5; cursor: wait; }

/* Fehlgeschlagene Anfragen heben sich von Konsolenmeldungen ab: Sie sind
   die wertvolleren. Ein 500 im Hintergrund ist meist der Grund, warum
   "das Formular nichts tut". */
.env__i--netz {
  background: var(--gefahr-sanft, #fdeeee);
  color: var(--gefahr-text, #c0392b);
  font-weight: 700;
}
.errs__i--netz .errs__t { color: var(--gefahr-text, #c0392b); font-weight: 600; }

/* ══════════════════════════════════════════════════════════ Board

   Drei Spalten, eine je Zustand. Kein Ziehen und Fallenlassen: Auf einem
   Telefon liesse es sich nicht bedienen, und die Knöpfe an der Karte tun
   dasselbe an derselben Stelle. */

.board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}

.board__s {
  min-width: 0;
  border: 1px solid var(--linie);
  border-radius: var(--r-m);
  background: var(--flaeche);
  overflow: hidden;
}
.board__s--open     { border-top: 3px solid var(--offen); }
.board__s--progress { border-top: 3px solid var(--akzent); }
.board__s--resolved { border-top: 3px solid var(--linie-satt); }

.board__k {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--linie);
  background: var(--karte);
}
.board__t {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--leise);
}
.board__n {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--flaeche);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--leise);
}

.board__l { padding: 10px; display: grid; gap: 10px; }
.board__leer { margin: 6px 2px; font-size: 12.5px; color: var(--sehr-leise); }

/* Im Board sind die Karten schmal. Was in einer Spalte von 300 Pixeln
   nicht mehr lesbar wäre, bleibt weg - der Klick auf die Karte führt
   ohnehin zur ganzen Anmerkung. */
.board .ann { margin: 0; }
.board .ann__grid { grid-template-columns: 1fr; }
.board .ann__shot { max-height: 120px; }
.board .ann__actions { flex-wrap: wrap; gap: 5px; }
.board .ann__zeit,
.board .annwahl__l,
.board .fristwahl__l { display: none; }
.board .ann__id { gap: 5px; }

@media (max-width: 1040px) {
  /* Zwei Spalten passen noch, drei nicht mehr: Bei 340 Pixeln je Spalte
     bricht der Text einer Anmerkung nach jedem zweiten Wort um. */
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .board { grid-template-columns: 1fr; }
}

/* ================================================================ Projekte

   Die Liste beantwortet "was brennt?". Darum traegt jede Zeile ihre Frist
   als farbige Marke - dieselben Marken wie an den Anmerkungen, damit
   "ueberfaellig" ueberall gleich aussieht - und die Phase als Pille, deren
   Farbe mit dem Fortschritt vom Kuehlen ins Gruene geht. */

.wrap--schmal { width: min(760px, calc(100% - 40px)); }

.kopfzeile { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.segwahl--links { margin: 0; }
.segwahl__a { display: block; padding: 6px 13px; border-radius: var(--r-s);
  font-size: 12.5px; font-weight: 600; color: var(--leise); text-decoration: none; white-space: nowrap; }
.segwahl__a:hover { color: var(--akzent-text); }
.segwahl__a.on { background: var(--karte); color: var(--akzent-text);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.segwahl__a:focus-visible { box-shadow: var(--ring); outline: 0; }

.projlage { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }

.projliste { background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--r-l); box-shadow: var(--schatten-s); overflow: hidden; }
.projliste__kopf,
.projliste__z { display: grid; align-items: center; gap: 14px;
  /* Jede Zeile ist ein eigenes Raster. Mit "auto" oder inhaltsabhaengigen
     Mindestbreiten rechnet jede ihre Spalten anders, und Kopf und Zeilen
     stehen versetzt - so war es zuerst. Mit minmax(0, …) und festen
     Breiten verteilt jede Zeile den Platz gleich. */
  grid-template-columns: minmax(0, 1.25fr) 104px minmax(0, 1.1fr) minmax(0, 1.1fr)
                         minmax(0, 1.4fr) 136px 220px;
  padding: 12px 16px; }
.projliste__kopf { background: var(--grund); border-bottom: 1px solid var(--linie);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--leise); padding-top: 9px; padding-bottom: 9px; }
.projliste__z + .projliste__z { border-top: 1px solid var(--linie); }
.projliste__z > div { display: flex; flex-wrap: wrap; gap: 5px 6px; align-items: center;
  font-size: 13.5px; min-width: 0; }
.projliste__z.is-zu { opacity: .6; }
/* Eine Marke darf in einer schmalen Spalte umbrechen - abgeschnitten
   stuende von "ueberfaellig seit 12 Tagen" nur der Anfang da. */
.projliste .frist, .projliste .tag { white-space: normal; }
.projliste__name { flex-direction: column; align-items: flex-start !important; gap: 1px !important; }
.projliste__name a { color: var(--text); text-decoration: none; }
.projliste__name a:hover { color: var(--akzent-text); }
.projliste__name .muted { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 100%; }
.projliste__tat { justify-content: flex-end; }
.projliste__frei { display: inline-flex; align-items: center; gap: 7px;
  font-variant-numeric: tabular-nums; font-size: 13px; }
.projliste__balken { width: 46px; height: 6px; border-radius: 999px; background: var(--flaeche);
  overflow: hidden; display: inline-block; }
.projliste__balken i { display: block; height: 100%; background: var(--fertig); border-radius: inherit; }

.phase { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px;
  font-weight: 700; white-space: nowrap; }
.phase--konzept,
.phase--design,
.phase--entwicklung { background: #e7eefc; color: #24509b; }
.phase--feedback    { background: var(--offen-flach); color: var(--offen-text); }
.phase--abnahme     { background: var(--akzent-hell); color: var(--akzent-tief); }
.phase--live        { background: var(--fertig-flach); color: var(--fertig-text); }

.rundemarke { display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--akzent-hell); color: var(--akzent-tief); font-size: 12px; font-weight: 700; }

.rundestand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 6px 0 14px; }
.rundestand__z { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-m);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.rundestand__z strong { font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums;
  color: var(--fertig-text); }
.rundestand__z--offen strong { color: var(--offen-text); }
.rundestand__z span { font-size: 13px; color: var(--leise); }

/* Der Streifen ueber den Anmerkungen einer Website. */
.projstreifen { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-m);
  padding: 10px 14px; margin: 0 0 14px; font-size: 13.5px; }
.projstreifen__grow { flex: 1 1 auto; }

/* Marken an einer Anmerkung: aus welcher Runde, von wem bestaetigt. */
.ann__runde { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px;
  font-weight: 700; background: var(--flaeche); color: var(--leise); }
.ann__ok { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px;
  font-weight: 700; background: var(--fertig-flach); color: var(--fertig-text); }
.ann__pruef { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px;
  font-weight: 700; background: var(--akzent-hell); color: var(--akzent-tief); }

@media (max-width: 1100px) {
  /* Als Tabelle passt es nicht mehr - jede Zeile wird eine Karte, und
     jede Zelle nennt, was sie ist. */
  .projliste__kopf { display: none; }
  .projliste__z { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .projliste__name, .projliste__tat { grid-column: 1 / -1; }
  .projliste__tat { justify-content: flex-start; }
  .projliste__z > div[data-l]::before { content: attr(data-l); flex: 1 1 100%;
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--sehr-leise); }
}
@media (max-width: 560px) {
  .projliste__z { grid-template-columns: 1fr; }
  .rundestand { grid-template-columns: 1fr; }
}

.abnahmezeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* ============================================================ Kundenbereich

   Dieselben Bausteine wie das Dashboard, aber ruhiger: kein dunkler Kopf
   mit Menue, sondern eine helle Leiste. Die Kundschaft ist hier Gast, und
   die Seite soll wie ein Bericht wirken, nicht wie ein Werkzeug. */

body.kunde { background: var(--grund); }
.kkopf { background: var(--karte); border-bottom: 1px solid var(--linie); }
.kkopf__innen { width: min(760px, calc(100% - 32px)); margin: 0 auto; display: flex;
  align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 0; }
.kkopf__marke { font-weight: 800; letter-spacing: -.01em; color: var(--text); text-decoration: none; font-size: 16px; }
.kkopf__nav { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.kkopf__nav a { color: var(--leise); text-decoration: none; font-weight: 600; }
.kkopf__nav a:hover { color: var(--akzent-text); }
.kfuss { width: min(760px, calc(100% - 32px)); margin: 0 auto 40px; color: var(--sehr-leise); font-size: 12.5px; }

.kprojekte { display: grid; gap: 14px; }
.kprojekt { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-l);
  box-shadow: var(--schatten-s); padding: 18px 20px; display: grid; gap: 12px; }
.kprojekt.is-zu { opacity: .7; }
.kprojekt__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.kprojekt__name { margin: 0; font-size: 17px; }
.kprojekt__name a { color: var(--text); text-decoration: none; }
.kprojekt__name a:hover { color: var(--akzent-text); }
.kprojekt__stand, .kprojekt__zahlen, .kprojekt__tat,
.kstand__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; }
.kstand__notiz { margin: 10px 0 0; font-style: italic; color: var(--leise); }
.kstand__abnahme { margin: 10px 0 0; font-size: 13.5px; }

.kliste { list-style: none; margin: 0 0 8px; padding: 0; background: var(--karte);
  border: 1px solid var(--linie); border-radius: var(--r-m); overflow: hidden; }
.kliste__i { padding: 12px 16px; display: grid; gap: 4px; }
.kliste__i + .kliste__i { border-top: 1px solid var(--linie); }
.kliste__text { font-size: 14px; overflow-wrap: anywhere; }
.kliste__meta { font-size: 12.5px; color: var(--leise); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.kliste__meta a { color: var(--akzent-text); }

/* ============================================= Seit dem letzten Besuch

   Oben im Dashboard, vor den Kacheln. Mit Neuem hell im Akzent, ohne
   Neues nur eine leise Zeile - eine grosse leere Kiste waere Laerm. */
.besuch { background: var(--karte); border: 1px solid var(--akzent-mittel); border-left: 4px solid var(--akzent);
  border-radius: var(--r-m); padding: 14px 18px; margin: 0 0 22px; box-shadow: var(--schatten-s); }
.besuch--ruhig { border-color: var(--linie); border-left-color: var(--linie-satt); padding: 10px 16px; box-shadow: none; }
.besuch__kopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.besuch__grow { flex: 1 1 auto; }
.besuch__leer { margin: 4px 0 0; font-size: 13px; color: var(--leise); }
.besuch__liste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.besuch__z { display: grid; grid-template-columns: minmax(140px, 220px) 1fr auto; gap: 4px 14px;
  align-items: baseline; padding: 7px 0; border-top: 1px solid var(--linie); font-size: 13.5px; }
.besuch__projekt { font-weight: 700; color: var(--text); text-decoration: none; }
.besuch__projekt:hover { color: var(--akzent-text); }
.besuch__wer { color: var(--leise); font-size: 12.5px; text-align: right; }
@media (max-width: 720px) {
  .besuch__z { grid-template-columns: 1fr; }
  .besuch__wer { text-align: left; }
}

/* ================================================ Regeln einer Verbindung */
.regeln__kurz { font-family: inherit; font-size: 12px; color: var(--leise); margin-top: 3px; word-break: normal; }
.regeln summary .muted { font-weight: 500; font-size: 12.5px; }
.regeln__gruppe { border: 1px solid var(--linie); border-radius: var(--r-m); padding: 10px 14px 12px; margin: 12px 0 0; }
.regeln__gruppe legend { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--leise); padding: 0 6px; }
.regeln__wahl { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 4px 24px; }
.regeln__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 0 24px; font-size: 13.5px; }
.regeln__zeile input[type="number"] { width: 72px; padding: 6px 8px; border: 1px solid var(--linie-satt); border-radius: var(--r-s); font: inherit; }
.regeln__zeile select { padding: 6px 8px; border: 1px solid var(--linie-satt); border-radius: var(--r-s); font: inherit; background: var(--karte); }
.regeln__platz { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.regeln__ph { border: 1px solid var(--linie-satt); background: var(--grund); color: var(--akzent-tief); border-radius: 999px;
  padding: 3px 10px; font: 600 12px/1.4 var(--mono); cursor: pointer; }
.regeln__ph:hover { background: var(--akzent-hell); border-color: var(--akzent-mittel); }
.regeln__ph:focus-visible { box-shadow: var(--ring); outline: 0; }

/* ================================================ Trello in zwei Schritten */
.schritte { list-style: none; counter-reset: schritt; margin: 10px 0 6px; padding: 0; display: grid; gap: 10px; }
.schritte__s { counter-increment: schritt; position: relative; padding: 12px 14px 12px 50px;
  border: 1px solid var(--linie); border-radius: var(--r-m); background: var(--karte); }
.schritte__s::before { content: counter(schritt); position: absolute; left: 14px; top: 12px; width: 24px; height: 24px;
  border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: var(--flaeche); color: var(--leise); }
.schritte__s.is-jetzt { border-color: var(--akzent-mittel); box-shadow: 0 0 0 3px var(--akzent-hell); }
.schritte__s.is-jetzt::before { background: var(--akzent); color: var(--auf-akzent); }
.schritte__s.is-fertig::before { content: "✓"; background: var(--fertig-flach); color: var(--fertig-text); }
.schritte__t { font-weight: 700; margin-bottom: 4px; }
.schritte__text { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; }
.trello summary .muted { font-weight: 500; font-size: 12.5px; }

/* ---- Verbindungen: eine Karte je Verbindung, Anlegen getrennt darunter */
.verbliste { display: grid; gap: 14px; margin: 14px 0 0; }
.verbkarte { border: 1px solid var(--linie); border-radius: var(--r-m); background: var(--karte); padding: 14px 16px 12px; }
.verbkarte__kopf { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.verbkarte__wer { min-width: 0; flex: 1 1 260px; }
.verbkarte__zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.verbkarte__name { font-size: 15px; }
.verbkarte__ziel { font-size: 13px; margin-top: 4px; overflow-wrap: anywhere; }
.verbkarte__ziel:empty { display: none; }
.verbkarte__zuletzt { font-size: 12.5px; color: var(--leise); margin-top: 3px; }
.verbkarte__knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.verbkarte > .wsblock { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linie); }
.verbkarte .trello summary, .verbkarte .regeln summary { font-size: 14px; }
.verbleer { margin-top: 12px; }
.verbneu { margin-top: 18px; padding: 14px 16px; border: 1px dashed var(--linie-satt, var(--linie)); border-radius: var(--r-m); background: var(--flaeche); }
.verbneu__t { font-weight: 700; margin-bottom: 8px; }
.verbneu .field:first-child { margin-top: 0; }

/* ================================================= Aufklappen, seitenweit

   Jede Überschrift eines <details> ist ein Knopf: Hand als Zeiger, kein
   Textmarkieren beim Doppelklick, ein Pfeil, der sich dreht. Der Inhalt
   gleitet auf und wieder zu - in Chrome, Edge und Safari über
   ::details-content, sonst blendet er wenigstens beim Öffnen ein.
   Die Menüs oben (Konto, Glocke, Gruppen) klappen nicht in der Höhe,
   sondern tauchen als Fenster auf.                                      */

summary {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 6px;
  transition: color var(--bewegt-kurz), background-color var(--bewegt-kurz);
}
summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Der eigene Pfeil statt des starren Dreiecks - nur dort, wo bisher das
   Dreieck stand. */
details:not(.konto):not(.nav__grp):not(.glocke):not(.teilen):not(.wsanleit):not(.menue) > summary {
  list-style: none;
}
details:not(.konto):not(.nav__grp):not(.glocke):not(.teilen):not(.wsanleit):not(.menue) > summary::-webkit-details-marker { display: none; }
details:not(.konto):not(.nav__grp):not(.glocke):not(.teilen):not(.wsanleit):not(.menue) > summary::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0 10px 2px 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: .7;
  transition: transform var(--bewegt), opacity var(--bewegt-kurz);
}
details[open]:not(.konto):not(.nav__grp):not(.glocke):not(.teilen):not(.wsanleit):not(.menue) > summary::before {
  transform: rotate(45deg) translate(-1px, -1px);
}
details:not(.konto):not(.nav__grp):not(.glocke):not(.menue):not(.errs) > summary:hover { color: var(--akzent-text); }
details:not(.konto):not(.nav__grp):not(.glocke):not(.menue) > summary:hover::before { opacity: 1; }
.errs summary:hover { color: var(--gefahr-text); filter: brightness(.96); }

/* Die Höhe gleitet nur, wenn aufklappen.js läuft (html.klappen): Während
   der Bewegung muss der Inhalt beschnitten werden, danach nicht mehr -
   sonst schnitte er die Erklärkästen der Fragezeichen ab, die über den
   Rand hinausragen. Das Skript setzt .klappt für die Dauer der Bewegung. */
@supports selector(::details-content) {
  html.klappen details:not(.konto):not(.nav__grp):not(.glocke) {
    interpolate-size: allow-keywords;
  }
  html.klappen details:not(.konto):not(.nav__grp):not(.glocke)::details-content {
    block-size: 0;
    opacity: 0;
    transition: block-size .3s cubic-bezier(.2, .7, .3, 1),
                opacity .22s ease,
                content-visibility .3s allow-discrete;
  }
  html.klappen details[open]:not(.konto):not(.nav__grp):not(.glocke)::details-content {
    block-size: auto;
    opacity: 1;
  }
  html.klappen details.klappt::details-content { overflow: clip; overflow-clip-margin: 6px; }
}
html:not(.klappen) details[open]:not(.konto):not(.nav__grp):not(.glocke) > :not(summary) {
  animation: sfb-aufklappen .26s cubic-bezier(.2, .7, .3, 1);
}
@keyframes sfb-aufklappen {
  from { opacity: 0; transform: translateY(-4px); }
}

/* Menüs oben: als Fenster auftauchen */
.konto[open] .konto__pop,
.glocke[open] .glocke__pop,
.nav__grp[open] .nav__pop {
  animation: sfb-pop .18s cubic-bezier(.2, .7, .3, 1);
  transform-origin: top right;
}
.nav__grp[open] .nav__pop { transform-origin: top left; }
@keyframes sfb-pop {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
}

/* Dialoge */
.wsdlg[open] { animation: sfb-dialog .24s cubic-bezier(.2, .7, .3, 1); }
.wsdlg[open]::backdrop { animation: sfb-schleier .24s ease; }
@keyframes sfb-dialog {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
}
@keyframes sfb-schleier { from { opacity: 0; } }

/* Hover: Knöpfe heben sich leicht, Karten zeigen, dass sie gemeint sind */
.btn { transition: background-color .12s, border-color .12s, color .12s, box-shadow .18s, transform .18s; }
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(16, 24, 40, .08); }
.btn:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.verbkarte, .schritte__s { transition: border-color var(--bewegt), box-shadow var(--bewegt); }
.verbkarte:hover { border-color: var(--linie-satt); box-shadow: 0 4px 16px rgba(16, 24, 40, .06); }
a { transition: color var(--bewegt-kurz), text-decoration-color var(--bewegt-kurz); }

@media (prefers-reduced-motion: reduce) {
  summary, summary::before, .verbkarte, .schritte__s, .btn { transition: none !important; }
  details::details-content { transition: none !important; }
  details[open] > :not(summary),
  .konto[open] .konto__pop, .glocke[open] .glocke__pop, .nav__grp[open] .nav__pop,
  .wsdlg[open], .wsdlg[open]::backdrop { animation: none !important; }
  .btn:hover:not(:disabled) { transform: none; }
}

/* ============================================= Hintergrund, seitenweit

   Zwei weiche Lichter in der Markenfarbe und ein kühles Blau, die sehr
   langsam wandern - eine Minute für einen Weg. So leise, dass man es erst
   bemerkt, wenn man hinsieht: Karten und Text stehen darüber auf Weiß.
   Das Element liegt fest hinter allem und nimmt keinen Klick an.        */

body::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 18% 22%, rgba(0, 238, 210, .13), transparent 70%),
    radial-gradient(34vmax 30vmax at 82% 30%, rgba(86, 122, 255, .09), transparent 70%),
    radial-gradient(40vmax 34vmax at 60% 88%, rgba(0, 238, 210, .08), transparent 70%);
  animation: sfb-licht 60s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes sfb-licht {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(4vmax, -3vmax, 0) rotate(8deg) scale(1.06); }
  100% { transform: translate3d(-3vmax, 3vmax, 0) rotate(-6deg) scale(1.02); }
}

/* ======================================================= Anmeldeseiten */

.login--buehne {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  place-items: stretch;
  padding: 0;
  min-height: 100vh;
}
.login--buehne > .login__card {
  align-self: center;
  justify-self: center;
  width: min(420px, calc(100% - 40px));
  margin: 40px 0;
  padding: 34px 34px 30px;
  border-radius: 20px;
  border-color: rgba(229, 233, 241, .9);
  box-shadow: 0 24px 60px rgba(16, 23, 40, .12), 0 2px 6px rgba(16, 23, 40, .05);
  animation: sfb-karte-rein .6s cubic-bezier(.2, .7, .3, 1) both;
}
.login--buehne .login__logo { display: none; }
.login--buehne .login__t { text-align: left; font-size: 24px; letter-spacing: -.02em; margin: 0 0 6px; }
.login--buehne .login__card .muted { text-align: left; margin-bottom: 18px; }
.login--buehne .login__card .btn { height: 46px; font-size: 15px; border-radius: 10px; }
@keyframes sfb-karte-rein { from { opacity: 0; transform: translateY(14px); } }

/* Die Felder: etwas größer, ruhiger Fokus */
.login--buehne .field input { padding: 12px 14px; border-radius: 10px; transition: border-color .18s, box-shadow .18s, background-color .18s; }
.login--buehne .field input:hover:not(:focus) { border-color: #b9c2d3; }
.login--buehne .field.is-gut > span::after {
  content: "✓"; margin-left: 6px; color: var(--fertig-text); font-weight: 800;
  display: inline-block;
  animation: sfb-haken .3s cubic-bezier(.2, .7, .3, 1.4);
}
.login--buehne .field.is-falsch input { border-color: #e7a3a5; }
@keyframes sfb-haken { from { opacity: 0; transform: scale(.4); } }

.pwfeld { position: relative; display: block; }
.pwfeld input { padding-right: 86px !important; }
.pwfeld__k {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--akzent-text);
  font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 9px; border-radius: 7px; cursor: pointer;
  transition: background-color .15s;
}
.pwfeld__k:hover { background: var(--akzent-hell); }
.pwfeld__k:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

.staerke { display: flex; align-items: center; gap: 10px; margin-top: 8px; min-height: 18px; font-size: 12px; color: var(--leise); }
.staerke__b { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 120px; flex: none; }
.staerke__b i { height: 5px; border-radius: 3px; background: var(--flaeche); transition: background-color .3s; }
.staerke[data-p="0"] .staerke__b i:nth-child(1) { background: var(--gefahr); }
.staerke[data-p="1"] .staerke__b i:nth-child(-n+1),
.staerke[data-p="2"] .staerke__b i:nth-child(-n+2) { background: var(--offen); }
.staerke[data-p="3"] .staerke__b i:nth-child(-n+3),
.staerke[data-p="4"] .staerke__b i { background: var(--fertig); }
.staerke[data-p=""] { visibility: hidden; }
.gleich { font-size: 12px; margin-top: 6px; min-height: 18px; color: var(--leise); }
.field.is-gut .gleich { color: var(--fertig-text); }
.field.is-falsch .gleich { color: var(--gefahr-text); }

.btn.is-laedt { animation: sfb-pulsen 1.2s ease-in-out infinite; }
.btn.is-laedt:disabled { opacity: 1; }
@keyframes sfb-pulsen { 50% { opacity: .6; } }

/* Schritte der Registrierung. Nur die Liste: .stufen heissen auch die
   Preiskarten (admin/preise.php), und die bekamen sonst vier Spalten. */
ol.stufen { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
ol.stufen::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 13px; height: 2px; background: var(--linie); }
.stufen__s { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; }
.stufen__p {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 800; background: var(--karte); color: var(--leise);
  border: 2px solid var(--linie-satt); position: relative; z-index: 1;
  transition: background-color .3s, border-color .3s, color .3s;
}
.stufen__n { font-size: 11.5px; font-weight: 600; color: var(--leise); }
.stufen__s.is-fertig .stufen__p { background: var(--fertig-flach); border-color: var(--fertig); color: var(--fertig-text); }
.stufen__s.is-jetzt .stufen__p { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); animation: sfb-stufe 2.4s ease-in-out infinite; }
.stufen__s.is-jetzt .stufen__n { color: var(--text); }
@keyframes sfb-stufe { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 238, 210, .45); } 50% { box-shadow: 0 0 0 7px rgba(0, 238, 210, 0); } }

.postfach {
  display: grid; justify-items: center; gap: 4px; text-align: center; margin-top: 14px;
  padding: 20px 16px; border-radius: 14px; background: var(--akzent-hell); color: var(--akzent-tief); font-size: 13.5px;
}
.postfach__i { font-size: 28px; line-height: 1; animation: sfb-schweben 3s ease-in-out infinite; }
@keyframes sfb-schweben { 50% { transform: translateY(-4px); } }

/* ------------------------------------------------------------- Bühne */

.buehne {
  position: relative;
  overflow: hidden;
  background: #020817;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 56px clamp(28px, 5vw, 72px);
}
.buehne__licht {
  position: absolute; inset: -30%;
  background:
    radial-gradient(40% 35% at 25% 30%, rgba(0, 238, 210, .28), transparent 70%),
    radial-gradient(35% 30% at 80% 75%, rgba(86, 122, 255, .22), transparent 70%),
    radial-gradient(30% 25% at 70% 15%, rgba(0, 238, 210, .12), transparent 70%);
  animation: sfb-licht 40s ease-in-out infinite alternate;
}
/* Ein feines Raster, wie Hilfslinien im Layout */
.buehne::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 40% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 40% 40%, #000 20%, transparent 75%);
}
.buehne__inhalt { position: relative; z-index: 1; width: 100%; max-width: 520px; margin-inline: auto; }
.buehne__logo { height: 40px; width: auto; display: block; margin-bottom: 40px; }
.buehne__t {
  margin: 0 0 14px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; letter-spacing: -.03em; font-weight: 800;
  text-wrap: balance;
  animation: sfb-karte-rein .7s .05s cubic-bezier(.2, .7, .3, 1) both;
}
.buehne__u { margin: 0 0 32px; color: #b6c0d4; font-size: 15.5px; line-height: 1.6; max-width: 44ch;
  animation: sfb-karte-rein .7s .12s cubic-bezier(.2, .7, .3, 1) both; }
.buehne__punkte { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 10px; font-size: 14px; color: #d5dcea; }
.buehne__punkte li { display: flex; gap: 10px; align-items: baseline; animation: sfb-karte-rein .6s cubic-bezier(.2, .7, .3, 1) both; }
.buehne__punkte li:nth-child(1) { animation-delay: .35s; }
.buehne__punkte li:nth-child(2) { animation-delay: .45s; }
.buehne__punkte li:nth-child(3) { animation-delay: .55s; }
.buehne__punkte li::before {
  content: "✓"; flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; background: rgba(0, 238, 210, .16); color: #00eed2; transform: translateY(2px);
}

/* Die Szene: ein Browserfenster, Anmerkungen tauchen auf, eine wird erledigt.
   Ein Durchlauf dauert zwölf Sekunden und beginnt dann von vorn. */
.szene {
  border-radius: 14px; overflow: hidden;
  background: #0d1426; border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 238, 210, .06);
  animation: sfb-karte-rein .8s .2s cubic-bezier(.2, .7, .3, 1) both, sfb-schweben 8s 1s ease-in-out infinite;
}
.szene__leiste { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #131c33; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.szene__leiste i { width: 9px; height: 9px; border-radius: 50%; background: #2a3553; }
.szene__leiste i:nth-child(1) { background: #ff5f57; opacity: .75; }
.szene__leiste i:nth-child(2) { background: #febc2e; opacity: .75; }
.szene__leiste i:nth-child(3) { background: #28c840; opacity: .75; }
.szene__leiste span { margin-left: 10px; flex: 1; font-size: 11px; color: #8290ad; background: #0b1224; border-radius: 6px; padding: 3px 10px; }
.szene__seite { position: relative; padding: 18px; display: grid; gap: 9px; }
.szene__held { height: 64px; border-radius: 9px; background: linear-gradient(120deg, #1b2a4d, #16365a 60%, #0f4a52); }
.szene__z { height: 8px; border-radius: 4px; background: #1d2742; width: 86%; }
.szene__z--l { width: 60%; height: 11px; background: #28355a; margin-top: 4px; }
.szene__z--k { width: 48%; }
.szene__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 4px; }
.szene__raster b { height: 46px; border-radius: 8px; background: #172140; }
.szene__pin {
  position: absolute; width: 24px; height: 24px; border-radius: 50% 50% 50% 4px;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 800;
  background: #00eed2; color: #0b3b35; box-shadow: 0 0 0 4px rgba(0, 238, 210, .2), 0 6px 14px rgba(0, 0, 0, .35);
  opacity: 0; transform: scale(.3);
  animation-duration: 12s;
  animation-timing-function: cubic-bezier(.2, .7, .3, 1.3);
  animation-iteration-count: infinite;
}
.szene__pin--1 { left: 64%; top: 30%; animation-name: sfb-pin1; }
.szene__pin--2 { left: 22%; top: 57%; animation-name: sfb-pin2; }
.szene__pin--3 { left: 78%; top: 76%; animation-name: sfb-pin3; }
.szene__blase {
  position: absolute; right: 12px; top: calc(30% + 30px);
  max-width: 170px; padding: 8px 11px; border-radius: 10px; background: #fff; color: #16202e;
  font-size: 11.5px; font-weight: 600; line-height: 1.35; box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(6px);
  animation: sfb-blase 12s ease infinite;
}
.szene__blase small { display: block; font-weight: 500; color: #666e81; font-size: 10.5px; margin-top: 2px; }
@keyframes sfb-pin1 {
  0%, 6%   { opacity: 0; transform: scale(.3); }
  10%, 62% { opacity: 1; transform: scale(1); background: #00eed2; color: #0b3b35; }
  66%, 88% { opacity: 1; transform: scale(1); background: #12a150; color: #fff; }
  95%, 100%{ opacity: 0; transform: scale(.6); }
}
@keyframes sfb-pin2 {
  0%, 30%  { opacity: 0; transform: scale(.3); }
  34%, 88% { opacity: 1; transform: scale(1); }
  95%, 100%{ opacity: 0; transform: scale(.6); }
}
@keyframes sfb-pin3 {
  0%, 44%  { opacity: 0; transform: scale(.3); }
  48%, 88% { opacity: 1; transform: scale(1); }
  95%, 100%{ opacity: 0; transform: scale(.6); }
}
@keyframes sfb-blase {
  0%, 12%  { opacity: 0; transform: translateY(6px); }
  16%, 56% { opacity: 1; transform: translateY(0); }
  62%, 100%{ opacity: 0; transform: translateY(-4px); }
}

/* Schmal: die Bühne wird zum Kopf, ohne Szene und Liste */
@media (max-width: 900px) {
  .login--buehne { grid-template-columns: 1fr; align-content: start; }
  .buehne { padding: 28px 20px 40px; }
  .buehne__logo { height: 32px; margin-bottom: 18px; }
  .buehne__t { font-size: 25px; }
  .buehne__u { margin-bottom: 0; font-size: 14px; }
  .szene, .buehne__punkte { display: none; }
  .login--buehne > .login__card { margin: -18px 0 32px; padding: 26px 20px 24px; width: calc(100% - 32px); }
}
@media (max-width: 380px) {
  .stufen__n { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  body::before, .buehne__licht, .szene, .buehne__t, .buehne__u, .buehne__punkte li,
  .login--buehne > .login__card, .stufen__s.is-jetzt .stufen__p, .postfach__i,
  .btn.is-laedt, .field.is-gut > span::after { animation: none !important; }
  .szene__pin, .szene__blase { animation: none !important; opacity: 1; transform: none; }
}

/* ================================== Kopf- und Fußzeile wie die Bühne

   Dasselbe Bild wie links neben der Anmeldung: dunkler Grund, ein feines
   Raster wie Hilfslinien im Layout, darüber weiche Lichter in Türkis und
   Blau, die sehr langsam wandern.

   Alles als Hintergrundebenen am Element selbst, nicht als eigene
   Kindelemente mit overflow: hidden - die Menüs der Kopfzeile ragen nach
   unten hinaus und würden sonst abgeschnitten. Bewegt wird die Lage der
   Lichter, das Raster steht still.                                      */

.top,
.fuss {
  background-color: #020817;
  background-image:
    radial-gradient(28% 160% at 12% 30%, rgba(0, 238, 210, .22), transparent 70%),
    radial-gradient(24% 140% at 88% 70%, rgba(86, 122, 255, .18), transparent 70%),
    radial-gradient(18% 120% at 55% 0%, rgba(0, 238, 210, .08), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 160% 100%, 160% 100%, 160% 100%, 44px 44px, 44px 44px;
  background-position: 0% 0%, 100% 0%, 50% 0%, -1px -1px, -1px -1px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
  animation: sfb-kopflicht 45s ease-in-out infinite alternate;
}
.fuss {
  background-image:
    radial-gradient(30% 90% at 15% 20%, rgba(0, 238, 210, .16), transparent 70%),
    radial-gradient(28% 90% at 85% 90%, rgba(86, 122, 255, .16), transparent 70%),
    radial-gradient(20% 70% at 55% 100%, rgba(0, 238, 210, .07), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  animation-duration: 60s;
}
@keyframes sfb-kopflicht {
  0%   { background-position: 0% 0%,   100% 0%,  50% 0%,  -1px -1px, -1px -1px; }
  50%  { background-position: 35% 0%,  70% 0%,   20% 0%,  -1px -1px, -1px -1px; }
  100% { background-position: 70% 0%,  30% 0%,   80% 0%,  -1px -1px, -1px -1px; }
}
@media (prefers-reduced-motion: reduce) {
  .top, .fuss { animation: none; }
}

/* Kein Sprung in der Breite: Kurze Seiten ohne Rollbalken waren sonst um
   dessen Breite breiter, und Kopfzeile samt Menue rutschten zur Seite. Der
   Platz fuer den Balken bleibt jetzt immer frei. */
html { scrollbar-gutter: stable; }

/* Aus dem Menue "Neue Website" angesprungen: kurz hervorheben */
#neu { scroll-margin-top: 20px; }
#neu:target { animation: sfb-an 1.6s ease-out; }

/* ================================================================ Start

   Ein Raster aus drei Spalten. Jede Kachel ist 1, 2 oder 3 Spalten breit
   (S, M, L); "dense" füllt Lücken mit späteren, schmaleren Kacheln, damit
   keine Löcher stehen bleiben. Auf dem Tablet zwei Spalten, auf dem
   Telefon eine - breite Kacheln werden dort einfach so breit wie es geht. */

.start__kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.start__datum { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--akzent-text); }
.start__t { margin: 4px 0 6px; font-size: 30px; line-height: 1.15; letter-spacing: -.025em; color: var(--tinte); text-wrap: balance;
  animation: sfb-karte-rein .6s cubic-bezier(.2, .7, .3, 1) both; }
.start__satz { margin: 0; color: var(--leise); font-size: 15px; animation: sfb-karte-rein .6s .08s cubic-bezier(.2, .7, .3, 1) both; }
.start__warn { color: var(--gefahr-text); font-weight: 600; }
.start__tat { display: flex; align-items: center; gap: 8px; }
.start__stand { font-size: 12.5px; color: var(--akzent-text); font-weight: 600; transition: opacity .4s; }
.start__stand.is-weg { opacity: 0; }
.start__stand.is-fehler { color: var(--gefahr-text); }
.start__leer { margin-top: 10px; }

.sraster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: 18px;
  align-items: start;
}
.kachel { grid-column: span 1; min-width: 0; }
.kachel[data-b="2"] { grid-column: span 2; }
.kachel[data-b="3"] { grid-column: span 3; }
@media (max-width: 1000px) {
  .sraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kachel[data-b="3"] { grid-column: span 2; }
}
@media (max-width: 680px) {
  .sraster { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .kachel[data-b="2"], .kachel[data-b="3"] { grid-column: span 1; }
  .start__t { font-size: 24px; }
}

.kachel {
  position: relative;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 16px;
  box-shadow: var(--schatten-s);
  padding: 16px 18px 18px;
  transition: box-shadow .25s, border-color .25s, transform .25s, opacity .22s;
  animation: sfb-karte-rein .55s cubic-bezier(.2, .7, .3, 1) both;
}
.sraster > .kachel:nth-child(2) { animation-delay: .04s; }
.sraster > .kachel:nth-child(3) { animation-delay: .08s; }
.sraster > .kachel:nth-child(4) { animation-delay: .12s; }
.sraster > .kachel:nth-child(5) { animation-delay: .16s; }
.sraster > .kachel:nth-child(6) { animation-delay: .2s; }
.sraster > .kachel:nth-child(7) { animation-delay: .24s; }
.sraster > .kachel:nth-child(8) { animation-delay: .28s; }
.sraster > .kachel:nth-child(n+9) { animation-delay: .32s; }
.kachel:hover { box-shadow: 0 10px 28px rgba(16, 23, 40, .08); border-color: var(--linie-satt); }

.kachel__kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; min-height: 28px; }
.kachel__t { margin: 0; flex: 1; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--leise); }
.kachel__unter { margin: -8px 0 10px; font-size: 12px; color: var(--sehr-leise); }
.kachel__leer { padding: 14px; border-radius: 12px; background: var(--flaeche); color: var(--leise); font-size: 13.5px; line-height: 1.5; }

/* Werkzeug und Griff erst im Anpassen */
.kachel__griff { display: none; width: 18px; height: 22px; border-radius: 5px; flex: none;
  background: radial-gradient(circle, var(--sehr-leise) 1.3px, transparent 1.6px) 0 0 / 6px 6px;
  opacity: .6; cursor: grab; }
.kachel__werkzeug { display: none; align-items: center; gap: 6px; }
.kachel__breiten { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--flaeche); }
.kachel__breite { border: 0; background: transparent; font: inherit; font-size: 11.5px; font-weight: 800; color: var(--leise);
  width: 26px; height: 24px; border-radius: 6px; cursor: pointer; transition: background-color .15s, color .15s; }
.kachel__breite:hover { color: var(--text); }
.kachel__breite.on { background: var(--karte); color: var(--akzent-tief); box-shadow: var(--schatten-s); }
.kachel__zu { border: 0; background: transparent; font-size: 20px; line-height: 1; width: 28px; height: 28px; border-radius: 7px;
  color: var(--leise); cursor: pointer; transition: background-color .15s, color .15s; }
.kachel__zu:hover { background: var(--gefahr-flach); color: var(--gefahr-text); }
.kachel__breite:focus-visible, .kachel__zu:focus-visible, .kachel__griff:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

.start.is-anpassen .kachel { border-style: dashed; border-color: var(--linie-satt); box-shadow: none; }
.start.is-anpassen .kachel:hover { border-color: var(--akzent-text); }
.start.is-anpassen .kachel__kopf { cursor: grab; touch-action: none; }
.start.is-anpassen .kachel__griff { display: block; }
.start.is-anpassen .kachel__werkzeug { display: inline-flex; animation: sfb-karte-rein .25s ease both; }
.start.is-anpassen .kachel__inhalt { pointer-events: none; opacity: .85; }
.start.is-anpassen .kachel--notiz .kachel__inhalt { pointer-events: auto; }

.kachel.is-gezogen { opacity: .35; border-style: dashed; border-color: var(--akzent-text); }
.kachel.is-geht { opacity: 0; transform: scale(.94); }
.kachel.is-kommt { animation: sfb-kachel-kommt .6s cubic-bezier(.2, .7, .3, 1.2) both; }
@keyframes sfb-kachel-kommt { from { opacity: 0; transform: scale(.9) translateY(10px); } 60% { box-shadow: 0 0 0 4px var(--akzent-mittel); } }
.kachel--abbild {
  position: fixed; z-index: 1000; margin: 0; pointer-events: none;
  box-shadow: 0 24px 60px rgba(16, 23, 40, .25); border-color: var(--akzent-text);
  transform: rotate(1.2deg) scale(1.02); animation: none; cursor: grabbing; overflow: hidden;
}
.kachel--abbild .kachel__werkzeug, .kachel--abbild .kachel__griff { display: none; }

/* Der Vorrat */
.vorrat { margin: 0 0 18px; padding: 14px 16px; border-radius: 16px; border: 1px dashed var(--akzent-mittel);
  background: color-mix(in srgb, var(--akzent-hell) 70%, transparent); animation: sfb-karte-rein .35s cubic-bezier(.2, .7, .3, 1) both; }
.vorrat__kopf { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; }
.vorrat__kopf .muted { font-size: 12.5px; }
.vorrat__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.vorrat__k { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--linie); background: var(--karte); font: inherit; color: var(--text); cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s; }
.vorrat__k:hover { border-color: var(--akzent-text); box-shadow: 0 6px 16px rgba(16, 23, 40, .08); transform: translateY(-1px); }
.vorrat__k strong { display: block; font-size: 13.5px; }
.vorrat__k small { display: block; font-size: 12px; color: var(--leise); line-height: 1.4; margin-top: 2px; }
.vorrat__plus { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--akzent); color: var(--auf-akzent); font-weight: 800; font-size: 14px; }
.vorrat__leer { margin: 0; font-size: 13px; }

/* Kennzahlen */
.zahlen { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.kachel[data-b="2"] .zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .zahlen, .kachel[data-b="2"] .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zahl { position: relative; display: grid; gap: 2px; padding: 14px 14px 12px; border-radius: 12px; background: var(--grund);
  text-decoration: none; color: var(--text); overflow: hidden; transition: transform .2s, box-shadow .2s, background-color .2s; }
.zahl::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--linie-satt); }
.zahl--offen::before { background: var(--offen); }
.zahl--arbeit::before { background: #5b8def; }
.zahl--neu::before { background: var(--akzent); }
.zahl--fertig::before { background: var(--fertig); }
.zahl--pruefen::before { background: #b18cf0; }
.zahl:hover { background: var(--karte); box-shadow: 0 6px 18px rgba(16, 23, 40, .08); transform: translateY(-2px); }
.zahl__n { font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.zahl__t { font-size: 12.5px; color: var(--leise); }

/* Listen in Kacheln */
.sliste { list-style: none; margin: 0; padding: 0; display: grid; }
.sliste__z { display: grid; gap: 2px; padding: 9px 0; border-top: 1px solid var(--linie); }
.sliste__z:first-child { border-top: 0; padding-top: 0; }
.sliste__z--zeile { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; }
.sliste__z--zeile .sliste__neben { grid-column: 1; }
.sliste__z--zeile .frist, .sliste__z--zeile .tag { grid-column: 2; grid-row: 1 / span 2; }
.sliste__haupt { font-weight: 700; font-size: 14px; color: var(--text); text-decoration: none; }
.sliste__haupt:hover { color: var(--akzent-text); }
.sliste__was { font-size: 13.5px; }
.sliste__neben { font-size: 12px; color: var(--sehr-leise); }
.sliste__z--anm { grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; }
.sliste__z--anm .sliste__neben { grid-column: 2; }
.sliste__nr { grid-row: 1 / span 2; width: 24px; height: 24px; border-radius: 50% 50% 50% 4px; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; background: var(--offen-flach); color: var(--offen-text); }
.sliste__nr--progress { background: #e7eefc; color: #24509b; }
.sliste__nr--resolved { background: var(--fertig-flach); color: var(--fertig-text); }
.sliste__text { font-size: 13.5px; color: var(--text); text-decoration: none; line-height: 1.45; }
.sliste__text:hover { color: var(--akzent-text); }

/* Verlauf: Säulenpaare, die hochwachsen */
.slegende { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--leise); margin: -4px 0 10px; }
.slegende__p { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 6px; }
.slegende__p:first-child { margin-left: 0; }
.slegende__p--neu, .saeulen__s--neu { background: var(--akzent); }
.slegende__p--fertig, .saeulen__s--fertig { background: var(--tinte-weich); }
.saeulen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 170px;
  background: repeating-linear-gradient(to top, var(--linie) 0 1px, transparent 1px 42px); padding-top: 4px; }
.saeulen__w { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 5px; min-width: 0; }
.saeulen__paar { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; }
.saeulen__s { width: min(12px, 40%); height: var(--h); min-height: 2px; border-radius: 4px 4px 1px 1px; transform-origin: bottom;
  animation: sfb-wachsen .8s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(var(--i) * 40ms + .2s); }
.saeulen__t { font-size: 10px; color: var(--sehr-leise); text-align: center; white-space: nowrap; overflow: hidden; }
@keyframes sfb-wachsen { from { transform: scaleY(0); } }

/* Tempo: ein Ring, der sich füllt */
.tempo { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.ring { width: 120px; height: 120px; flex: none; }
.ring__grund { fill: none; stroke: var(--flaeche); stroke-width: 11; }
.ring__wert { fill: none; stroke: var(--akzent); stroke-width: 11; stroke-linecap: round;
  stroke-dasharray: 314.16; stroke-dashoffset: calc(314.16 * (1 - var(--q) / 100));
  transform: rotate(-90deg); transform-origin: 60px 60px;
  animation: sfb-ring 1.3s cubic-bezier(.2, .7, .3, 1) .2s both; }
@keyframes sfb-ring { from { stroke-dashoffset: 314.16; } }
.ring__zahl { font-size: 24px; font-weight: 800; text-anchor: middle; fill: var(--tinte); letter-spacing: -.02em; }
.ring__text { font-size: 11px; text-anchor: middle; fill: var(--leise); }
.tempo__l { margin: 0; display: grid; gap: 8px; flex: 1; min-width: 140px; }
.tempo__l div { display: grid; gap: 1px; }
.tempo__l dt { font-size: 12px; color: var(--sehr-leise); }
.tempo__l dd { margin: 0; font-weight: 700; font-size: 14.5px; }

/* Offen je Projekt: Balken, die hineinwachsen */
.sbalken { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sbalken__z { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 7px 8px; margin: 0 -8px;
  border-radius: 10px; text-decoration: none; color: var(--text); transition: background-color .15s; }
.sbalken__z:hover { background: var(--grund); }
.sbalken__n { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbalken__w { font-size: 12.5px; color: var(--offen-text); font-weight: 700; }
.sbalken__b { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--flaeche); overflow: hidden; }
.sbalken__b i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: linear-gradient(90deg, var(--offen), #f7c46b);
  transform-origin: left; animation: sfb-breiter .9s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(var(--i) * 60ms + .2s); }
.sbalken__q { grid-column: 1 / -1; font-size: 11.5px; color: var(--sehr-leise); }
@keyframes sfb-breiter { from { transform: scaleX(0); } }

/* Schnellzugriff */
.schnell { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.schnell__k { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 12px; background: var(--grund);
  color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 600; transition: background-color .2s, transform .2s, box-shadow .2s; }
.schnell__k:hover { background: var(--karte); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(16, 23, 40, .08); color: var(--akzent-tief); }
.schnell__i { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center;
  background: var(--akzent-hell); color: var(--akzent-tief); font-size: 14px; transition: transform .25s; }
.schnell__k:hover .schnell__i { transform: rotate(-8deg) scale(1.08); }

/* Phasen */
.phasen { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; margin-bottom: 14px; }
.phasen__s { width: var(--w); height: 100%; transform-origin: left; animation: sfb-breiter .9s cubic-bezier(.2, .7, .3, 1) .2s both; }
.phasen__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.phasen__l li { display: flex; align-items: center; gap: 8px; }
.phasen__l li.is-leer { color: var(--sehr-leise); }
.phasen__l b { margin-left: auto; font-variant-numeric: tabular-nums; }
.phasen__p { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.phasen__s--konzept, .phasen__p--konzept { background: #b4a0f0; }
.phasen__s--design, .phasen__p--design { background: #5b8def; }
.phasen__s--entwicklung, .phasen__p--entwicklung { background: #f5a524; }
.phasen__s--feedback, .phasen__p--feedback { background: #00c9b1; }
.phasen__s--abnahme, .phasen__p--abnahme { background: #e879a6; }
.phasen__s--live, .phasen__p--live { background: #12a150; }

/* Notiz */
.notiz { width: 100%; min-height: 130px; resize: vertical; border: 0; border-radius: 12px; padding: 12px 14px;
  font: inherit; font-size: 14px; line-height: 1.6; color: #4a3b00;
  background: repeating-linear-gradient(#fff8d6 0 22.4px, #f3e7b0 22.4px 23.4px); background-attachment: local;
  box-shadow: inset 0 0 0 1px #f0e2a3; transition: box-shadow .2s; }
.notiz:focus { outline: none; box-shadow: inset 0 0 0 1px #e5c95a, var(--ring); }
.notiz__stand { font-size: 11.5px; color: var(--sehr-leise); min-height: 16px; margin-top: 4px; text-align: right; }

/* Ranglisten */
.rang { list-style: none; margin: 0; padding: 0; counter-reset: rang; display: grid; gap: 2px; }
.rang li { counter-increment: rang; display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--linie); }
.rang li:first-child { border-top: 0; }
.rang li::before { content: counter(rang); width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; background: var(--flaeche); color: var(--leise); }
.rang li:first-child::before { background: var(--akzent); color: var(--auf-akzent); }
.rang__n { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; }
.rang__n small { display: block; font-weight: 400; font-size: 11.5px; color: var(--sehr-leise); }
.rang b { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .kachel, .start__t, .start__satz, .saeulen__s, .ring__wert, .sbalken__b i, .phasen__s, .vorrat,
  .kachel.is-kommt, .start.is-anpassen .kachel__werkzeug { animation: none !important; }
  .kachel, .zahl, .schnell__k, .vorrat__k { transition: none; }
}

/* Knoepfe und Vorratskarten setzen display selbst - "hidden" muss trotzdem
   gewinnen, sonst stuende "Zuruecksetzen" schon vor dem Anpassen da. */
.start [hidden] { display: none !important; }

/* ================================================ Begrüßung auf Start

   Links ein Symbol zur Tageszeit auf dem dunklen Grund der Kopfzeile -
   Raster, ein türkises Leuchten -, rechts Überschrift und Satz. Die Farbe
   des hervorgehobenen Teils sagt die Lage: rot überschritten, orange heute,
   bernstein bald, sonst die Markenfarbe.                                  */

.start__gruss { display: flex; align-items: center; gap: 18px; min-width: 0; }
.start__gruss strong { font-weight: 700; color: var(--text); }
.start__gruss--ueber .start__satz strong { color: var(--gefahr-text); }
.start__gruss--heute .start__satz strong { color: #8f4300; }
.start__gruss--bald  .start__satz strong { color: var(--offen-text); }
.start__gruss--ruhig .start__satz { color: var(--fertig-text); }

.tz {
  position: relative; flex: none; width: 76px; height: 76px; border-radius: 22px; overflow: hidden;
  background-color: #020817;
  background-image:
    radial-gradient(70% 70% at 50% 45%, rgba(0, 238, 210, .22), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 100% 100%, 12px 12px, 12px 12px;
  box-shadow: 0 10px 26px rgba(2, 8, 23, .28), inset 0 0 0 1px rgba(255, 255, 255, .06);
  animation: sfb-karte-rein .6s cubic-bezier(.2, .7, .3, 1) both;
}
.tz--nacht { background-image:
    radial-gradient(70% 70% at 50% 45%, rgba(86, 122, 255, .28), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); }
.tz--abend { background-image:
    radial-gradient(80% 60% at 50% 70%, rgba(86, 122, 255, .3), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); }
.tz svg { width: 100%; height: 100%; display: block; overflow: visible; }

.tz__sonne { fill: #00eed2; filter: drop-shadow(0 0 6px rgba(0, 238, 210, .7)); }
.tz__glut { fill: rgba(0, 238, 210, .18); transform-origin: 32px 32px; animation: sfb-tz-glut 3.2s ease-in-out infinite; }
.tz__strahlen line { stroke: #00eed2; stroke-width: 2.4; stroke-linecap: round; }
.tz__strahlen--dreh { transform-origin: 32px 32px; animation: sfb-tz-dreh 24s linear infinite; }
.tz__strahlen--puls { transform-origin: 32px 32px; animation: sfb-tz-puls 2.8s ease-in-out infinite; }
.tz__horizont { stroke: #7ff5e6; stroke-width: 2; stroke-linecap: round; opacity: .9; }
.tz__welle { stroke: #567aff; stroke-width: 2; stroke-linecap: round; opacity: .7; animation: sfb-tz-welle 3.6s ease-in-out infinite; }
.tz__welle--2 { opacity: .45; animation-delay: -1.2s; }
.tz__steigt { animation: sfb-tz-steigt 6s ease-in-out infinite; }
.tz__sinkt { animation: sfb-tz-sinkt 7s ease-in-out infinite; filter: drop-shadow(0 0 7px rgba(86, 122, 255, .6)); }
.tz__mond { fill: #e2fdf8; filter: drop-shadow(0 0 6px rgba(226, 253, 248, .55)); }
.tz__schwebt { animation: sfb-tz-schwebt 5s ease-in-out infinite; }
.tz__stern { fill: #00eed2; transform-box: fill-box; transform-origin: center; animation: sfb-tz-funkeln 2.6s ease-in-out infinite; }
.tz__stern--2 { fill: #7ff5e6; animation-delay: -.9s; animation-duration: 3.1s; }
.tz__stern--3 { fill: #567aff; animation-delay: -1.7s; animation-duration: 2.2s; }

@keyframes sfb-tz-dreh    { to { transform: rotate(360deg); } }
@keyframes sfb-tz-glut    { 50% { transform: scale(1.18); opacity: .6; } }
@keyframes sfb-tz-puls    { 50% { transform: scale(1.1); opacity: .65; } }
@keyframes sfb-tz-steigt  { 0%, 100% { transform: translateY(5px); } 50% { transform: translateY(-1px); } }
@keyframes sfb-tz-sinkt   { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
@keyframes sfb-tz-welle   { 50% { transform: translateX(3px); opacity: .35; } }
@keyframes sfb-tz-schwebt { 50% { transform: translateY(-2.5px) rotate(-4deg); } }
@keyframes sfb-tz-funkeln { 0%, 100% { transform: scale(.55); opacity: .45; } 50% { transform: scale(1.15); opacity: 1; } }

@media (max-width: 680px) {
  .start__gruss { gap: 14px; align-items: flex-start; }
  .tz { width: 58px; height: 58px; border-radius: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .tz, .tz *, .tz svg * { animation: none !important; }
}

/* Mauerwerk (start.js): die Kacheln stehen frei, das Skript setzt sie in
   die kürzeste Spalte. Ohne Skript gilt das Raster darüber. */
.sraster.is-mauer { display: block; position: relative; }
.sraster.is-mauer > .kachel { position: absolute; margin: 0; }
.sraster.is-mauer.is-bereit > .kachel {
  transition: left .42s cubic-bezier(.2, .7, .3, 1), top .42s cubic-bezier(.2, .7, .3, 1),
              box-shadow .25s, border-color .25s, opacity .22s, transform .25s;
}
.sraster.is-mauer.is-bereit > .kachel.is-gezogen { transition: left .2s ease, top .2s ease, opacity .2s; }
@media (prefers-reduced-motion: reduce) {
  .sraster.is-mauer.is-bereit > .kachel { transition: none; }
}

/* ==================================================== Kontakt und Feedback

   Der schwebende Knopf unten rechts. Türkis wie die Marke, das Fenster mit
   dem dunklen Kopf der Kopfzeile. Er hält Abstand zum Rand und legt sich
   über nichts, was man anklicken muss: pointer-events nur auf den Teilen. */

.kontakt {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  pointer-events: none;
}
.kontakt > * { pointer-events: auto; }
.kontakt svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.kontakt__knopf {
  position: relative; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--auf-akzent);
  background: linear-gradient(135deg, #3ff6e0, var(--akzent) 45%, #00c9b1);
  box-shadow: 0 10px 26px rgba(0, 160, 140, .38), 0 0 0 1px rgba(255, 255, 255, .4) inset;
  transition: transform .2s cubic-bezier(.2, .7, .3, 1.3), box-shadow .2s, background-color .2s;
}
.kontakt__knopf::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(0, 238, 210, .5); animation: sfb-kontakt-ring 3.6s ease-out 2s infinite;
}
.kontakt__knopf:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 16px 34px rgba(0, 160, 140, .45); }
.kontakt__knopf:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; }
.kontakt__knopf svg { width: 24px; height: 24px; position: absolute; transition: transform .3s cubic-bezier(.2, .7, .3, 1.3), opacity .2s; }
.kontakt__schliessen { opacity: 0; transform: rotate(-90deg) scale(.6); }
.kontakt.is-offen .kontakt__knopf { background: #020817; color: #fff; box-shadow: 0 10px 26px rgba(2, 8, 23, .35); }
.kontakt.is-offen .kontakt__knopf::after { animation: none; }
.kontakt.is-offen .kontakt__auf { opacity: 0; transform: rotate(90deg) scale(.6); }
.kontakt.is-offen .kontakt__schliessen { opacity: 1; transform: none; }
@keyframes sfb-kontakt-ring {
  0% { box-shadow: 0 0 0 0 rgba(0, 238, 210, .5); }
  40%, 100% { box-shadow: 0 0 0 14px rgba(0, 238, 210, 0); }
}

/* Die Begrüßung, einmal am Tag */
.kontakt__hallo {
  display: flex; align-items: center; gap: 10px; max-width: 300px; padding: 12px 15px;
  border-radius: 16px 16px 4px 16px; border: 1px solid var(--linie); background: rgba(255, 255, 255, .94);
  color: var(--text); font: inherit; font-size: 13.8px; text-align: left; cursor: pointer;
  box-shadow: 0 14px 34px rgba(16, 23, 40, .16);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  animation: sfb-kontakt-rein .45s cubic-bezier(.2, .7, .3, 1.2) both;
  transition: opacity .25s, transform .25s, border-color .2s;
}
.kontakt__hallo:hover { border-color: var(--akzent-text); }
.kontakt__hallo svg { color: var(--akzent-text); transition: transform .2s; }
.kontakt__hallo:hover svg { transform: translateX(3px); }
.kontakt__hallo.is-weg { opacity: 0; transform: translateY(8px) scale(.97); }
@keyframes sfb-kontakt-rein { from { opacity: 0; transform: translateY(12px) scale(.96); } }

/* Das Fenster */
.kontakt__fenster {
  width: 370px; max-width: calc(100vw - 32px); max-height: calc(100vh - 120px); overflow: auto;
  border-radius: 18px; background: var(--karte); border: 1px solid var(--linie-satt);
  box-shadow: 0 28px 70px rgba(16, 23, 40, .26);
  transform-origin: bottom right; animation: sfb-kontakt-auf .28s cubic-bezier(.2, .7, .3, 1.15) both;
}
@keyframes sfb-kontakt-auf { from { opacity: 0; transform: translateY(14px) scale(.94); } }
.kontakt__kopf {
  display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; color: #fff;
  background-color: #020817;
  background-image:
    radial-gradient(60% 140% at 10% 20%, rgba(0, 238, 210, .28), transparent 70%),
    radial-gradient(50% 120% at 95% 90%, rgba(86, 122, 255, .24), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 22px 22px, 22px 22px;
}
.kontakt__kopf > div { display: grid; gap: 2px; min-width: 0; }
.kontakt__kopf strong { font-size: 14.5px; }
.kontakt__kopf span { font-size: 12px; color: #b6c0d4; line-height: 1.4; }
.kontakt__bild { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--akzent); color: var(--auf-akzent); box-shadow: 0 0 0 4px rgba(0, 238, 210, .18); }
.kontakt__zu { margin-left: auto; align-self: flex-start; border: 0; background: transparent; color: #b6c0d4;
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; transition: background-color .15s, color .15s; }
.kontakt__zu:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.kontakt__form { padding: 14px 16px 16px; display: grid; gap: 2px; }
.kontakt__form .field { margin-top: 12px; }
.kontakt__opt { font-style: normal; font-weight: 500; color: var(--sehr-leise); }
.kontakt__arten { display: flex; flex-wrap: wrap; gap: 6px; }
.kontakt__art {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--linie-satt); background: var(--karte); color: var(--leise);
  font: inherit; font-size: 12.8px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s, transform .15s;
}
.kontakt__art svg { width: 15px; height: 15px; }
.kontakt__art:hover { border-color: var(--akzent-text); color: var(--text); transform: translateY(-1px); }
.kontakt__art.on { background: var(--akzent-hell); border-color: var(--akzent-text); color: var(--akzent-tief); }
.kontakt__wer { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; font-size: 12px; color: var(--sehr-leise); }
.kontakt__wer svg { width: 14px; height: 14px; }
.kontakt__stand { margin: 10px 0 0; padding: 9px 11px; border-radius: 10px; font-size: 13px; animation: sfb-kontakt-rein .3s ease both; }
.kontakt__stand.is-ok { background: var(--fertig-flach); color: var(--fertig-text); }
.kontakt__stand.is-fehler { background: var(--gefahr-flach); color: var(--gefahr-text); }
.kontakt__form .btn { margin-top: 12px; gap: 8px; height: 44px; border-radius: 10px; }
.kontakt__form .btn svg { width: 17px; height: 17px; transition: transform .3s; }
.kontakt__form .btn:hover svg { transform: translate(2px, -2px); }
.kontakt.is-gesendet .kontakt__form .btn svg { animation: sfb-kontakt-flug .8s cubic-bezier(.4, 0, .2, 1); }
@keyframes sfb-kontakt-flug { 45% { transform: translate(26px, -22px) scale(.6); opacity: 0; } 55% { transform: translate(-18px, 14px); opacity: 0; } }
.kontakt__alle { justify-self: center; margin-top: 10px; font-size: 12.5px; }

/* Über der Fusszeile nichts verdecken: am Seitenende etwas Luft */
body:has(.kontakt) .fuss__unten { padding-right: 86px; }

@media (max-width: 680px) {
  .kontakt { right: 14px; bottom: 14px; }
  .kontakt__knopf { width: 52px; height: 52px; }
  .kontakt__fenster { width: calc(100vw - 28px); max-height: calc(100vh - 96px); }
}
@media (prefers-reduced-motion: reduce) {
  .kontakt *, .kontakt__knopf::after { animation: none !important; transition: none !important; }
}

/* ============================================================ Nachrichten */

.nachrichten__raster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.nachrichten__raster.is-einfach { grid-template-columns: minmax(0, 1fr) 380px; }
@media (max-width: 900px) { .nachrichten__raster, .nachrichten__raster.is-einfach { grid-template-columns: minmax(0, 1fr); } }
.nachrichten__form { position: sticky; top: 20px; margin-top: 0; }
.nachrichten__filter { margin-bottom: 14px; }
.nachrichten__z { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: 9px; background: var(--flaeche); font-size: 11px; font-weight: 800; color: var(--leise); }
.switch__b.on .nachrichten__z { background: var(--akzent); color: var(--auf-akzent); }
.nachrichten__liste { display: grid; gap: 12px; }

.nachricht { background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; padding: 14px 16px;
  box-shadow: var(--schatten-s); animation: sfb-karte-rein .45s cubic-bezier(.2, .7, .3, 1) both;
  transition: box-shadow .2s, border-color .2s; }
.nachricht:hover { box-shadow: 0 8px 22px rgba(16, 23, 40, .07); }
.nachricht.is-neu { border-color: var(--akzent-mittel); box-shadow: 0 0 0 3px var(--akzent-hell); }
.nachricht.is-zu { opacity: .72; }
.nachricht__kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nachricht__betreff { font-size: 15px; flex: 1; min-width: 140px; }
.nachricht__zeit { font-size: 12px; color: var(--sehr-leise); }
.nachricht__wer { margin-top: 4px; font-size: 12.5px; color: var(--leise); overflow-wrap: anywhere; }
.nachricht__text { margin-top: 10px; white-space: pre-wrap; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.nachricht__umgebung { margin: 8px 0 0; font-size: 11px; color: var(--sehr-leise); overflow-wrap: anywhere; }
.nachricht__fuss { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.nachricht__fuss form { margin: 0; }

.nachricht__art { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11px;
  font-weight: 800; letter-spacing: .02em; background: var(--flaeche); color: var(--leise); }
.nachricht__art--frage   { background: #e7eefc; color: #24509b; }
.nachricht__art--problem { background: var(--gefahr-flach); color: var(--gefahr-text); }
.nachricht__art--idee    { background: var(--offen-flach); color: var(--offen-text); }
.nachricht__art--lob     { background: var(--fertig-flach); color: var(--fertig-text); }
.nachricht__neu { display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800;
  background: var(--akzent); color: var(--auf-akzent); animation: sfb-stufe 2.4s ease-in-out infinite; }

/* In der Kachel auf Start */
.kachel--nachrichten .sliste__haupt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; }
.nachr__neuzahl { color: var(--akzent-text); }
.kachel__mehr { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; text-decoration: none; }
.kachel__mehr:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .nachricht, .nachricht__neu { animation: none; }
}

/* Die Teile setzen display selbst - "hidden" muss trotzdem gewinnen. */
.kontakt [hidden] { display: none !important; }

/* Der Verlauf unter einer Nachricht: Antworten des Betreibers rechts in
   der Markenfarbe, die der Person links - wie in einem Chat. */
.verlauf { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--linie); display: grid; gap: 8px; }
.verlauf__b { max-width: 85%; justify-self: start; padding: 9px 12px; border-radius: 12px 12px 12px 4px;
  background: var(--flaeche); animation: sfb-karte-rein .35s cubic-bezier(.2, .7, .3, 1) both; }
.verlauf__b--betrieb { justify-self: end; border-radius: 12px 12px 4px 12px; background: var(--akzent-hell); color: var(--akzent-tief); }
.verlauf__wer { font-size: 11.5px; font-weight: 700; opacity: .75; margin-bottom: 2px; }
.verlauf__text { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }

.antwort { margin-top: 12px; }
.antwort > summary { list-style: none; display: inline-flex; }
.antwort > summary::-webkit-details-marker { display: none; }
.antwort > summary::before { display: none !important; }
.antwort[open] > summary { background: var(--tinte); color: #fff; }
.antwort__form { display: grid; gap: 8px; margin-top: 10px; }
.antwort__form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--linie-satt); border-radius: var(--r-s);
  font: inherit; font-size: 14px; line-height: 1.55; resize: vertical; background: var(--karte); color: var(--text); }
.antwort__form textarea:focus { outline: none; border-color: var(--akzent-text); box-shadow: var(--ring); }
.antwort__zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.nachricht__fuss .mini { font-size: 12px; }
.antwort > summary:hover { color: var(--auf-akzent) !important; }
.antwort[open] > summary, .antwort[open] > summary:hover { color: #fff !important; }

/* Neues am Kontaktknopf: eine Zahl oben rechts, die kurz hüpft. */
.kontakt__zahl {
  position: absolute; top: -3px; right: -3px; z-index: 1; min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: 11px; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; line-height: 1;
  background: var(--gefahr); color: #fff; box-shadow: 0 0 0 2.5px #fff;
  animation: sfb-kontakt-zahl .6s cubic-bezier(.2, .7, .3, 1.5) 1s both;
}
.kontakt.is-offen .kontakt__zahl { display: none; }
@keyframes sfb-kontakt-zahl { from { transform: scale(0); } }
.kontakt__neu {
  display: flex; align-items: center; gap: 8px; margin: 12px 16px 0; padding: 10px 12px; border-radius: 10px;
  background: var(--akzent-hell); color: var(--akzent-tief); text-decoration: none; font-size: 13.5px;
  transition: background-color .15s;
}
.kontakt__neu strong { min-width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center;
  background: var(--akzent); color: var(--auf-akzent); font-size: 12px; }
.kontakt__neu span { margin-left: auto; transition: transform .2s; }
.kontakt__neu:hover { background: #cffaf2; }
.kontakt__neu:hover span { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .kontakt__zahl { animation: none; } }

/* ============================================================== Websites

   Oben ein schlanker Block zum Anlegen, darunter - klar abgesetzt - die
   Websites als Karten. Die Karte zeigt nur, was man auf einen Blick wissen
   will; alle Einstellungen öffnet "Einstellungen" im selben Dialog wie im
   Dashboard.                                                             */

.wseite__kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.wseite__satz { margin: 4px 0 0; color: var(--leise); font-size: 14px; }

/* Anlegen */
.wneu {
  position: relative; overflow: hidden; padding: 18px 20px 20px; border-radius: 18px;
  background: var(--karte); border: 1px solid var(--linie);
  box-shadow: var(--schatten-s);
  animation: sfb-karte-rein .5s cubic-bezier(.2, .7, .3, 1) both;
}
.wneu::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--akzent), #567aff); }
.wneu__kopf { display: flex; align-items: center; gap: 12px; }
.wneu__plus { width: 36px; height: 36px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: var(--akzent-hell); color: var(--akzent-tief); font-weight: 800; font-size: 18px; }
.wneu__t { margin: 0; font-size: 16px; }
.wneu__u { margin: 2px 0 0; font-size: 13px; color: var(--leise); }
.wneu__felder { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-top: 14px; }
.wneu__felder .field { margin: 0; }
.wneu__knopf { height: 44px; padding: 0 22px; }
@media (max-width: 760px) {
  .wneu__felder { grid-template-columns: minmax(0, 1fr); }
  .wneu__knopf { width: 100%; }
}

/* Der Abschnitt darunter */
.wliste__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 34px 0 14px; padding-top: 22px; border-top: 1px solid var(--linie); }
.wliste__t { margin: 0; font-size: 19px; display: flex; align-items: center; gap: 10px; }
.wliste__z { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 12px;
  background: var(--flaeche); color: var(--leise); font-size: 12.5px; font-weight: 800; }
.wliste__suche { position: relative; display: block; width: min(280px, 100%); }
.wliste__suche svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px;
  fill: none; stroke: var(--sehr-leise); stroke-width: 2; stroke-linecap: round; }
.wliste__suche input { width: 100%; padding: 9px 12px 9px 34px; border: 1px solid var(--linie-satt); border-radius: 10px;
  font: inherit; font-size: 14px; background: var(--karte); color: var(--text); transition: border-color .15s, box-shadow .15s; }
.wliste__suche input:focus { outline: none; border-color: var(--akzent-text); box-shadow: var(--ring); }

/* Die Karten */
.wkarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1000px) { .wkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .wkarten { grid-template-columns: minmax(0, 1fr); } }
.wseite [hidden] { display: none !important; }

.wkarte {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 18px;
  background: var(--karte); border: 1px solid var(--linie); box-shadow: var(--schatten-s);
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s, border-color .25s;
  animation: sfb-karte-rein .5s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(var(--i, 0) * 45ms);
}
.wkarte:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(16, 23, 40, .1); border-color: var(--linie-satt); }
.wkarte.is-zu { opacity: .78; }

.wkarte__bild { position: relative; height: 104px; overflow: hidden; background: #020817; }
.wkarte__bild--0 { background: linear-gradient(135deg, #0f4a52, #00b8a3); }
.wkarte__bild--1 { background: linear-gradient(135deg, #1b2a4d, #567aff); }
.wkarte__bild--2 { background: linear-gradient(135deg, #102a3a, #1fa3c7); }
.wkarte__bild--3 { background: linear-gradient(135deg, #20264d, #7c6cf0); }
.wkarte__bild--4 { background: linear-gradient(135deg, #0b3b35, #3fd6a0); }
.wkarte__bild::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 18px 18px; }
.wkarte__foto { position: absolute; inset: 0; background-size: cover; background-position: center top;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1); }
.wkarte__bild:has(.wkarte__foto)::after { background: linear-gradient(180deg, transparent 40%, rgba(2, 8, 23, .45)); }
.wkarte:hover .wkarte__foto { transform: scale(1.06); }
.wkarte__initial { position: absolute; left: 18px; bottom: -14px; font-size: 86px; line-height: 1; font-weight: 800;
  color: rgba(255, 255, 255, .22); letter-spacing: -.04em; transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
.wkarte:hover .wkarte__initial { transform: translateY(-4px); }
.wkarte__phase, .wkarte__zu { position: absolute; top: 12px; z-index: 1; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.wkarte__phase { right: 12px; background: rgba(255, 255, 255, .88); color: var(--tinte); }
.wkarte__zu { left: 12px; background: rgba(2, 8, 23, .7); color: #fff; }

.wkarte__inhalt { padding: 14px 16px 4px; display: grid; gap: 8px; flex: 1; }
.wkarte__name { margin: 0; font-size: 16.5px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkarte__domain { margin-top: -6px; font-size: 13px; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkarte__zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 2px; }
.wkarte__zahl { padding: 7px 8px; border-radius: 10px; background: var(--grund); font-size: 11.5px; color: var(--leise); line-height: 1.25; }
.wkarte__zahl b { display: block; font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; }
.wkarte__zahl.is-offen { background: var(--offen-flach); color: var(--offen-text); }
.wkarte__zahl.is-offen b { color: var(--offen-text); }
.wkarte__zahl.is-fertig b { color: var(--fertig-text); }
.wkarte__zeilen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wkarte__zeilen .wstand { margin: 0; }
.wkarte__meta { font-size: 12px; color: var(--sehr-leise); }
.wkarte__fuss { display: flex; gap: 8px; padding: 12px 16px 16px; }
.wkarte__fuss .btn { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  .wneu, .wkarte { animation: none; }
  .wkarte, .wkarte__foto, .wkarte__initial { transition: none; }
}

/* ================================================ Einstellungsdialog, neu

   Kopf im Stil der Kopfzeile: dunkel, Raster, ein türkises und ein blaues
   Licht. Links das Bild der Website oder ihr Anfangsbuchstabe.

   Unten schliesst die Knopfleiste bündig ab. Vorher hatte der Inhalt 22px
   Innenabstand nach unten - die klebende Leiste hielt diesen Abstand zum
   Rand, und darunter scrollte der Inhalt sichtbar weiter.                */

.wsdlg { border: 0; border-radius: 20px; box-shadow: 0 30px 80px rgba(2, 8, 23, .35); }
.wsdlg::backdrop { background: rgba(2, 8, 23, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

.wsdlg__kopf {
  align-items: center; gap: 14px; padding: 18px 18px 18px 20px; border-bottom: 0; color: #fff;
  background-color: #020817;
  background-image:
    radial-gradient(45% 160% at 8% 20%, rgba(0, 238, 210, .26), transparent 70%),
    radial-gradient(40% 140% at 95% 100%, rgba(86, 122, 255, .24), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 22px 22px, 22px 22px;
  box-shadow: inset 0 -2px 0 rgba(0, 238, 210, .55);
}
.wsdlg__marke {
  position: relative; flex: none; width: 54px; height: 54px; border-radius: 15px; overflow: hidden;
  display: grid; place-items: center; font-size: 26px; font-weight: 800; color: rgba(255, 255, 255, .9);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .15);
}
.wsdlg__foto { position: absolute; inset: 0; background-size: cover; background-position: center top; }
.wsdlg__titel { display: grid; gap: 2px; min-width: 0; flex: 1; }
.wsdlg__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7ff5e6; }
.wsdlg__kopf .wsdlg__titel strong { font-size: 20px; line-height: 1.2; letter-spacing: -.02em; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsdlg__unter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; font-size: 12.5px; color: #b6c0d4; }
.wsdlg__chip { padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #e2e8f4;
  font-size: 11.5px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.wsdlg__chip--mono { font-family: var(--mono); font-weight: 500; }
.wsdlg__x {
  flex: none; align-self: flex-start; width: 36px; height: 36px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; color: #b6c0d4; background: rgba(255, 255, 255, .08);
  transition: background-color .15s, color .15s, transform .25s cubic-bezier(.2, .7, .3, 1.3);
}
.wsdlg__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.wsdlg__x:hover { background: rgba(255, 255, 255, .16); color: #fff; transform: rotate(90deg); }
.wsdlg__x:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.wsdlg__inhalt { padding-bottom: 0; }
.wsdlg .wsform__fuss {
  margin: 20px -22px 0; padding: 14px 22px 16px;
  border-top: 1px solid var(--linie); background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 -10px 24px rgba(16, 23, 40, .06);
  z-index: 3;
}

@media (max-width: 560px) {
  .wsdlg__marke { width: 44px; height: 44px; font-size: 21px; border-radius: 12px; }
  .wsdlg__kopf .wsdlg__titel strong { font-size: 17px; }
}

/* Website-Karten: der Kopf wie im Einstellungsdialog. */
.wkarte__kopf {
  position: relative; display: flex; align-items: center; gap: 13px; padding: 16px 16px 16px 16px; color: #fff;
  background-color: #020817;
  background-image:
    radial-gradient(55% 160% at 8% 20%, rgba(0, 238, 210, .26), transparent 70%),
    radial-gradient(45% 140% at 100% 100%, rgba(86, 122, 255, .24), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 20px 20px, 20px 20px;
  box-shadow: inset 0 -2px 0 rgba(0, 238, 210, .55);
  transition: background-position .6s cubic-bezier(.2, .7, .3, 1);
}
.wkarte:hover .wkarte__kopf { background-position: 0 0, 0 0, 4px 4px, 4px 4px; }
.wkarte__marke {
  position: relative; flex: none; width: 50px; height: 50px; border-radius: 14px; overflow: hidden;
  display: grid; place-items: center; font-size: 24px; font-weight: 800; color: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .15);
  transition: transform .35s cubic-bezier(.2, .7, .3, 1.3);
}
.wkarte:hover .wkarte__marke { transform: rotate(-4deg) scale(1.06); }
.wkarte__marke .wkarte__foto { position: absolute; inset: 0; background-size: cover; background-position: center top; }
.wkarte__titel { display: grid; gap: 1px; min-width: 0; }
.wkarte__eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7ff5e6; }
.wkarte.is-zu .wkarte__eyebrow { color: #b6c0d4; }
.wkarte__kopf .wkarte__name { color: #fff; font-size: 17px; line-height: 1.25; }
.wkarte__kopf .wkarte__domain { margin-top: 0; color: #b6c0d4; font-size: 12.5px; }
.wkarte__inhalt { padding-top: 14px; }

/* ====================================== Kacheln im Dashboard, im Markenstil

   Derselbe Kopf wie auf der Websites-Seite und im Einstellungsdialog:
   dunkel, Raster, türkises und blaues Licht, Marke mit Bild oder
   Anfangsbuchstabe. Darunter hell die Zahlen und der Stand des Widgets.
   Die ausgewählte Kachel bekommt einen türkisen Ring.                   */

.site.site--marke {
  display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; padding: 0;
  overflow: hidden; border-radius: 18px; border: 1px solid var(--linie); background: var(--karte);
  box-shadow: var(--schatten-s);
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s, border-color .25s;
}
.site.site--marke:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(16, 23, 40, .1); border-color: var(--linie-satt); }
.site.site--marke.is-active { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent), 0 16px 36px rgba(0, 160, 140, .18); }
.site.site--marke.is-zu { opacity: .8; }

.site__kopf {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 15px 48px 15px 15px; color: #fff;
  background-color: #020817;
  background-image:
    radial-gradient(55% 160% at 8% 20%, rgba(0, 238, 210, .26), transparent 70%),
    radial-gradient(45% 140% at 100% 100%, rgba(86, 122, 255, .24), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 20px 20px, 20px 20px;
  box-shadow: inset 0 -2px 0 rgba(0, 238, 210, .55);
  transition: background-position .6s cubic-bezier(.2, .7, .3, 1);
}
.site--marke:hover .site__kopf { background-position: 0 0, 0 0, 4px 4px, 4px 4px; }
.site--marke.is-active .site__kopf {
  background-image:
    radial-gradient(70% 180% at 8% 20%, rgba(0, 238, 210, .42), transparent 70%),
    radial-gradient(45% 140% at 100% 100%, rgba(86, 122, 255, .24), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
}
.site__marke {
  position: relative; flex: none; width: 46px; height: 46px; border-radius: 13px; overflow: hidden;
  display: grid; place-items: center; font-size: 22px; font-weight: 800; color: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .15);
  transition: transform .35s cubic-bezier(.2, .7, .3, 1.3);
}
.site--marke:hover .site__marke { transform: rotate(-4deg) scale(1.06); }
.site__foto { position: absolute; inset: 0; background-size: cover; background-position: center top; }
.site__titel { display: grid; gap: 1px; min-width: 0; }
.site__eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7ff5e6; }
.site--marke.is-zu .site__eyebrow { color: #b6c0d4; }
.site--marke .site__name { margin: 0; color: #fff; font-size: 16px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site--marke .site__domain { margin: 0; color: #b6c0d4; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.site__koerper { display: grid; gap: 10px; padding: 13px 15px 14px; }
.site--marke .site__stats { margin: 0; }
.site__fuss { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.site--marke .site__fuss .wstand { margin: 0; }
.site--marke .site__meta { padding: 0; font-size: 11.5px; color: var(--sehr-leise); }

/* Das Zahnrad sitzt jetzt auf dem dunklen Kopf: Glas statt Weiss. */
.site-huelle .site__zahn {
  top: 22px; right: 12px; border-color: rgba(255, 255, 255, .18); color: #e2e8f4;
  background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.site-huelle .site__zahn:hover { color: #fff; border-color: var(--akzent); background: rgba(0, 238, 210, .18); }

@media (prefers-reduced-motion: reduce) {
  .site.site--marke, .site__marke, .site__kopf { transition: none; }
}

/* Die Umschalter (Offen, In Arbeit, Erledigt, Board ...) passen auf dem Telefon
   nicht in eine Zeile. Statt ueber den Rand zu ragen, rollen sie in sich. */
.switch { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.switch::-webkit-scrollbar { display: none; }
.switch__b { flex: none; }

/* Dashboard-Kacheln: etwas höher, mit Fortschritt und den nützlichen Zeilen. */
.site--marke .site__kopf { padding-top: 18px; padding-bottom: 18px; }
.site--marke .site__marke { width: 50px; height: 50px; font-size: 24px; border-radius: 14px; }
.site--marke .site__name { font-size: 16.5px; }
.site__koerper { gap: 12px; padding: 15px 16px 16px; }

.site__fortschritt { display: flex; align-items: center; gap: 10px; }
.site__balken { flex: 1; height: 7px; border-radius: 4px; background: var(--flaeche); overflow: hidden; }
.site__balken i { display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--akzent), #12a150);
  transform-origin: left; transition: width .5s cubic-bezier(.2, .7, .3, 1);
  animation: sfb-breiter .9s cubic-bezier(.2, .7, .3, 1) .15s both; }
.site__quote { flex: none; font-size: 12px; color: var(--leise); font-variant-numeric: tabular-nums; }
.site__quote b { color: var(--text); font-size: 13px; }

.site__infos { display: grid; gap: 6px; padding: 10px 0 0; border-top: 1px dashed var(--linie); }
.site__info { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; color: var(--leise);
  min-width: 0; }
.site__info svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--akzent-text); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.site__info .frist { font-size: 11px; padding: 1px 8px; }
.site--marke .site__stats .tag--work { background: #e7eefc; color: #24509b; }

@media (prefers-reduced-motion: reduce) {
  .site__balken i { animation: none; transition: none; }
}

/* Die hoeheren Kacheln brauchen Luft zum Projektstreifen darunter. */
.sites { margin-bottom: 22px; }

/* ============================================================ Sprachwahl
   Zwei Kürzel, EN und DE, das aktive hervorgehoben. Im Kontomenü, im Fuß
   und auf den Anmeldeseiten oben rechts. Die Wahl bleibt im Profil.      */

.sprachlink {
  display: inline-block; padding: 3px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-decoration: none;
  color: var(--leise); transition: background-color .15s, color .15s;
}
.sprachlink:hover { color: var(--text); background: var(--flaeche); }
.sprachlink.on { background: var(--akzent-hell); color: var(--akzent-tief); }

.konto__sprache { display: flex; align-items: center; gap: 4px; padding: 6px 10px 2px; }
.konto__sprache > span { flex: 1; font-size: 13px; color: var(--leise); }

.fuss__sprache .sprachlink { color: inherit; opacity: .75; }
.fuss__sprache .sprachlink:hover { opacity: 1; background: rgba(255, 255, 255, .08); color: inherit; }
.fuss__sprache .sprachlink.on { opacity: 1; background: rgba(0, 238, 210, .16); color: var(--akzent); }

.authsprache {
  position: fixed; top: 14px; right: 16px; z-index: 5;
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--linie);
  box-shadow: 0 4px 14px rgba(16, 23, 40, .08);
}

.sprachen-profil { display: flex; gap: 18px; flex-wrap: wrap; }

/* Kundenbereich: EN · DE rechts im Kopf, gleich neben dem Menue. Das Menue
   rueckt mit nach rechts, damit beide zusammen stehen; ohne Anmeldung gibt
   es kein Menue, dann steht die Sprachwahl allein rechts. */
.kkopf__innen > .kkopf__nav { margin-left: auto; }
.kkopf__sprache { display: inline-flex; gap: 2px; }

/* Im Kopf des Dashboards, gleich neben der Glocke - auf dunklem Grund. */
.topsprache {
  flex: 0 0 auto; display: inline-flex; gap: 2px; padding: 3px;
  border-radius: 999px; background: rgba(255, 255, 255, .07);
}
.topsprache .sprachlink { color: rgba(255, 255, 255, .72); }
.topsprache .sprachlink:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.topsprache .sprachlink.on { background: rgba(0, 238, 210, .18); color: var(--akzent); }

/* Auf Touchgeräten eine Fläche, die man mit dem Finger trifft. */
@media (hover: none) {
  .sprachlink { padding: 8px 10px; }
}

/* ============================================== Kopfzeile auf dem Telefon

   Bis 720 Pixel: oben eine Zeile mit Zeichen, Sprache, Glocke, Konto und
   dem Menüknopf; das Menü klappt darunter als Liste auf. Vorher rollte es
   seitwärts, und die Gruppen standen darin je eine ganze Zeile breit -
   von sechs Punkten waren zwei zu sehen, und ein Untermenü ging neben
   seinem eigenen Knopf auf.                                              */

.menue, .brand__zeichen { display: none; }

@media (max-width: 720px) {
  .top__inner { gap: 6px; padding: 8px 0; min-height: 60px; }
  .brand { margin-right: auto; }

  .menue { display: block; order: 2; flex: 0 0 auto; }
  .menue > summary {
    list-style: none; cursor: pointer; color: #fff;
    width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: var(--r-s); transition: background-color .12s;
  }
  .menue > summary::-webkit-details-marker { display: none; }
  .menue > summary::marker { content: ""; }
  .menue > summary:hover, .menue[open] > summary { background: rgba(255, 255, 255, .12); }
  .menue svg { width: 22px; height: 22px; }
  .menue__zu, .menue[open] .menue__auf { display: none; }
  .menue[open] .menue__zu { display: block; }

  .nav {
    display: none; order: 3; flex-basis: 100%;
    flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    overflow: visible; gap: 2px;
    padding: 6px 0 10px; border-top: 1px solid rgba(255, 255, 255, .1);
  }
  .menue[open] + .nav { display: flex; }
  .nav__i, .nav__grp { width: 100%; flex: 0 0 auto; }
  .nav__i, .nav__grp > summary { padding: 10px 12px; font-size: 15px; min-height: 44px; }
  .nav__grp { flex-direction: column; }
  .nav__grp > summary { justify-content: space-between; }
  .nav__pop { margin: 2px 0 6px; padding: 4px; }
  .nav__u { padding: 10px 12px; font-size: 14.5px; }

  /* Warnung und Betreibersicht unter die Zeile, nicht dazwischen. */
  .nav__warn, .sichtan { order: 4; }
}

@media (max-width: 480px) {
  .brand__logo { display: none; }
  .brand__zeichen { display: block; height: 30px; width: auto; }
}
/* ======================================================= Telefon: Reste

   Gemessen auf 375 Pixeln, jede Seite auf Englisch und Deutsch: Was
   danach noch seitlich hinausragte.                                      */

@media (max-width: 720px) {
  /* Tabellen rollen in sich, statt die Seite zu verbreitern. Die Zeilen
     behalten ihr Tabellenlayout; nur wo der Platz nicht reicht, wird
     gewischt. */
  /* relative: Absolutes darin (Balkenbeschriftung) bleibt im Rollbereich. */
  .table2 { display: block; max-width: 100%; overflow-x: auto; position: relative; }
}

@media (max-width: 560px) {
  /* Zwölf Wochen mit je zwei Säulen und Datum passten nicht nebeneinander:
     schmalere Säulen, und nur jede zweite Woche beschriftet. */
  .wochen { gap: 2px; }
  .wochen__w { min-width: 0; }
  .wochen__saeulen { gap: 2px; }
  .wochen__s { width: 7px; }
  .wochen__w:nth-child(even) .wochen__t { visibility: hidden; }
}
@media (max-width: 400px) {
  /* Die Widget-Vorschau verlangte 300 Pixel - auf 320er-Schirmen bleiben
     nach Rand und Kasten 289. */
  .wsvor__links, .wsvor__rechts { min-width: 0; }
}

@media (max-width: 1040px) {
  /* Steht das Menü in einer eigenen Zeile, rücken Sprache, Glocke und
     Konto nach rechts - sonst klebten sie am Zeichen. */
  .brand { margin-right: auto; }
}

/* =================================================== Impressum, Datenschutz

   Von jeder Seite mit einem Klick erreichbar - im Fuß des Dashboards, auf
   den Anmeldeseiten unten rechts und im Kundenbereich.                    */

.recht-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.recht-links a { color: inherit; text-decoration: none; }
.recht-links a:hover { text-decoration: underline; }
.fuss__recht a { opacity: .75; }
.fuss__recht a:hover { opacity: 1; }
.kfuss__recht { display: flex; margin-top: 8px; }
.authrecht {
  position: fixed; right: 16px; bottom: 12px; z-index: 5;
  font-size: 12.5px; color: var(--leise);
  padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .88);
}
@media (max-width: 900px) {
  /* Auf schmalen Schirmen steht die Anmeldung untereinander - dann unten
     im Fluss statt über dem Formular. */
  .authrecht { position: static; display: flex; justify-content: center; margin: 12px auto 20px; background: none; }
}
/* Zustimmung zu den AGB bei der Registrierung - der Satz neben dem Häkchen. */
.check--agb { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 4px; font-size: 13.5px; line-height: 1.5; color: var(--leise); }
.check--agb input { margin-top: 3px; flex: none; }
.check--agb a { color: var(--akzent-text); }