/* ==========================================================================
   ActiGO - Aussehen
   --------------------------------------------------------------------------
   Aufbau dieser Datei:
     1. Farben und Masse ("Variablen")
     2. Grundlagen
     3. Aufbau der Seite (Handy zuerst, dann Laptop)
     4. Bausteine

   Grundsatz 1: Alle Farben stehen als Variablen ganz oben. Wer eine Farbe
   aendern will, aendert sie an genau einer Stelle. Der Dark Mode ist
   dadurch spaeter fast geschenkt.

   Grundsatz 2: Handy zuerst. Die Grundregeln gelten fuer kleine Displays,
   grosse Bildschirme bekommen weiter unten Ergaenzungen.
   ========================================================================== */


/* --- 1. Farben und Masse ------------------------------------------------- */

:root {
  /* Grundfarbe: ruhiges Indigo. Wird fuer Knoepfe und Aktives verwendet. */
  --grund:         #4263eb;
  --grund-dunkel:  #3050d8;
  --grund-blass:   #edf0fe;

  /* Flaechen und Text */
  --hintergrund:   #f5f6f9;
  --flaeche:       #ffffff;
  --rand:          #e3e6ec;
  --text:          #16181d;
  --text-leise:    #6b7280;

  /* Die drei Termin-Arten. Duerfen nie vermischt werden - deshalb
     bekommen sie hier bewusst getrennte, klar unterscheidbare Farben. */
  --deadline:      #e8590c;   /* Frist des Verantwortlichen */
  --wiedervorlage: #6741d9;   /* meine eigene Kontrolle */
  --checkin:       #099268;   /* das Gespraech */

  /* Status */
  --ueberfaellig:  #e03131;
  --erledigt:      #2f9e44;

  /* Masse */
  --rundung:       12px;
  --rundung-klein: 8px;
  --schatten:      0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
  --navi-hoehe:    4.25rem;   /* Hoehe der unteren Leiste am Handy */
}

/* Dark Mode ist vorbereitet, aber noch nicht freigeschaltet (Etappe 9).
   Dann genuegt es, hier die Variablen zu ueberschreiben. */


/* --- 2. Grundlagen ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;              /* nie kleiner: das Handy zoomt sonst beim Tippen */
  line-height: 1.55;
  color: var(--text);
  background: var(--hintergrund);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }
p  { margin: 0 0 .75rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--grund); }


/* --- 3. Aufbau der Seite ------------------------------------------------- */
/* HANDY: Kopfzeile oben, Inhalt in der Mitte, Navigation unten am Daumen. */

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  position: sticky;
  top: 0;
  z-index: 20;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: var(--text);
  font-size: 1.0625rem;
}
.marke-zeichen {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--rundung-klein);
  background: var(--grund);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
}
.marke-text { font-weight: 500; }
.marke-text strong { font-weight: 750; }

.etappe-hinweis {
  font-size: .75rem;
  color: var(--text-leise);
  background: var(--hintergrund);
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: .15rem .6rem;
  white-space: nowrap;
}

.inhalt {
  flex: 1;
  padding: 1.25rem 1rem calc(var(--navi-hoehe) + 5.5rem);
  max-width: 60rem;
  width: 100%;
  margin: 0 auto;
}

.navi {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  background: var(--flaeche);
  border-top: 1px solid var(--rand);
  padding-bottom: env(safe-area-inset-bottom);   /* iPhone-Balken */
}

.navi-punkt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  min-height: var(--navi-hoehe);
  padding: .5rem .25rem;
  text-decoration: none;
  color: var(--text-leise);
  font-size: .6875rem;
  font-weight: 500;
}
.navi-punkt.ist-aktiv { color: var(--grund); }
.navi-punkt.ist-geplant { opacity: .38; pointer-events: none; }

.navi-zeichen {
  width: 1.375rem;
  height: 1.375rem;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}

.sym-haus {
  -webkit-mask-image: var(--sym);
  mask-image: var(--sym);
  --sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V20a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V9.5'/%3E%3C/svg%3E");
}
.sym-liste {
  -webkit-mask-image: var(--sym);
  mask-image: var(--sym);
  --sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 2 2 3-3.5'/%3E%3Cpath d='m3 13 2 2 3-3.5'/%3E%3Cpath d='m3 20 2 2 3-3.5'/%3E%3Cpath d='M12 6h9M12 13h9M12 20h9'/%3E%3C/svg%3E");
}
.sym-leute {
  -webkit-mask-image: var(--sym);
  mask-image: var(--sym);
  --sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.25'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16.5 5.2a3.25 3.25 0 0 1 0 5.6'/%3E%3Cpath d='M18 14.2a6.5 6.5 0 0 1 3.5 5.8'/%3E%3C/svg%3E");
}
.sym-uhr {
  -webkit-mask-image: var(--sym);
  mask-image: var(--sym);
  --sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.5l3.5 2'/%3E%3C/svg%3E");
}
.sym-rad {
  -webkit-mask-image: var(--sym);
  mask-image: var(--sym);
  --sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.25'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M21.5 12h-2.2M4.7 12H2.5M18.7 5.3l-1.6 1.6M6.9 17.1l-1.6 1.6M18.7 18.7l-1.6-1.6M6.9 6.9 5.3 5.3'/%3E%3C/svg%3E");
}

/* Der Quick-Task-Knopf: die wichtigste Funktion, deshalb der
   auffaelligste Platz - unten rechts, mit dem Daumen erreichbar. */
/* Die schwebende Knopfleiste. Sie traegt jetzt die Position, die vorher am
   Quick-Task-Knopf selbst sass - dieselben Werte, damit er auf den Pixel
   genau dort bleibt, wo er war. Zwei fest positionierte Knoepfe lassen sich
   in CSS nicht nebeneinander stellen, ohne sie in einen gemeinsamen Rahmen
   zu legen; deshalb dieser Umweg. Rechtsbuendig, damit ein zusaetzlicher
   Knopf nach LINKS waechst und den Quick-Task-Knopf nicht verschiebt. */
.aktions-leiste {
  position: fixed;
  right: 1rem;
  bottom: calc(var(--navi-hoehe) + 1rem + env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  align-items: flex-end;      /* siehe unten: Unterkanten buendig */
  justify-content: flex-end;
  gap: .625rem;
}

.quick-knopf {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .875rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--grund);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: .9375rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(66, 99, 235, .35);
}
.quick-knopf > span:first-child { font-size: 1.25rem; line-height: 1; margin-top: -2px; }
.quick-knopf:hover:not(:disabled) { background: var(--grund-dunkel); }
.quick-knopf:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }


/* LAPTOP ab 60rem (960px): Navigation wandert nach links in eine
   Seitenleiste, der Inhalt bekommt mehr Platz. */
@media (min-width: 60rem) {
  body {
    display: grid;
    grid-template-columns: 15rem 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "kopf inhalt"
      "navi inhalt";
  }

  .kopf {
    grid-area: kopf;
    position: static;
    border-right: 1px solid var(--rand);
    border-bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
    padding: 1.25rem 1rem 1rem;
  }

  .navi {
    grid-area: navi;
    position: static;
    flex-direction: column;
    border-top: 0;
    border-right: 1px solid var(--rand);
    padding: .75rem .625rem;
    gap: .125rem;
  }
  .navi-punkt {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: .75rem;
    min-height: 0;
    padding: .625rem .75rem;
    border-radius: var(--rundung-klein);
    font-size: .9375rem;
  }
  .navi-punkt.ist-aktiv { background: var(--grund-blass); }
  .navi-punkt:hover:not(.ist-geplant) { background: var(--grund-blass); }

  .inhalt {
    grid-area: inhalt;
    padding: 2rem 2.5rem 7rem;
    max-width: 62rem;
    margin: 0;
  }

  .aktions-leiste { bottom: 2rem; right: 2.5rem; }
}


/* --- 4. Bausteine -------------------------------------------------------- */

.seiten-kopf { margin-bottom: 1.25rem; }
.unterzeile { color: var(--text-leise); font-size: .9375rem; margin: .2rem 0 0; }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  padding: 1.25rem;
  box-shadow: var(--schatten);
}
.karte-begruessung h2 { margin-bottom: .5rem; }
.karte-begruessung p  { color: var(--text-leise); }

.abschnitt-titel { margin: 2rem 0 .5rem; }
.hinweis-text { color: var(--text-leise); font-size: .9375rem; margin-bottom: .875rem; }

/* Etappenliste */
.etappen { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.etappe {
  display: flex;
  align-items: center;
  gap: .875rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  padding: .875rem 1rem;
  opacity: .6;
}
.etappe.ist-fertig, .etappe.ist-naechste { opacity: 1; }
.etappe.ist-naechste { border-color: var(--grund); box-shadow: 0 0 0 3px var(--grund-blass); }
.etappe-nr {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--hintergrund);
  border: 1px solid var(--rand);
  font-size: .875rem; font-weight: 650;
  color: var(--text-leise);
}
.etappe.ist-fertig   .etappe-nr { background: var(--erledigt); border-color: var(--erledigt); color: #fff; }
.etappe.ist-naechste .etappe-nr { background: var(--grund);    border-color: var(--grund);    color: #fff; }
.etappe strong { display: block; font-weight: 600; font-size: .9375rem; }
.etappe-text { display: block; color: var(--text-leise); font-size: .8125rem; }

/* Die drei Termin-Arten */
.arten { display: grid; gap: .625rem; }
.art {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--art-farbe);
  border-radius: var(--rundung-klein);
  padding: .75rem 1rem;
}
.art-deadline      { --art-farbe: var(--deadline); }
.art-wiedervorlage { --art-farbe: var(--wiedervorlage); }
.art-checkin       { --art-farbe: var(--checkin); }
.art-name {
  display: block;
  font-weight: 650;
  font-size: .9375rem;
  color: var(--art-farbe);
}
.art-erklaerung { display: block; color: var(--text-leise); font-size: .875rem; }

@media (min-width: 45rem) {
  .arten { grid-template-columns: repeat(3, 1fr); }
}


/* ==========================================================================
   5. Etappe 1 - Anmeldung, Formulare, Mitarbeiter
   ========================================================================== */

/* --- Seiten ohne Navigation (Anmelden, Einrichten) ----------------------- */

body.ohne-navi .inhalt { padding-bottom: 3rem; }
@media (min-width: 60rem) {
  body.ohne-navi { display: flex; flex-direction: column; }
  body.ohne-navi .kopf { border-right: 0; border-bottom: 1px solid var(--rand);
                         flex-direction: row; align-items: center; padding: .75rem 1rem; }
  body.ohne-navi .inhalt { padding: 3rem 1rem; margin: 0 auto; }
}

.tor { max-width: 24rem; margin: 0 auto; }
.tor h1 { margin-bottom: .25rem; }
.tor .unterzeile { margin-bottom: 1.5rem; }
.tor-fussnote { margin-top: 1.25rem; font-size: .8125rem; color: var(--text-leise); }


/* --- Meldungen ----------------------------------------------------------- */

.meldung {
  border-radius: var(--rundung-klein);
  padding: .75rem 1rem;
  margin-bottom: 1.25rem;
  font-size: .9375rem;
  border: 1px solid;
}
.meldung-fehler  { background: #fff5f5; border-color: #ffc9c9; color: #c92a2a; }
.meldung-hinweis { background: var(--grund-blass); border-color: #bac8ff; color: #364fc7; }


/* --- Formulare ----------------------------------------------------------- */

.formular { display: grid; gap: 1.125rem; }

.feld { display: grid; gap: .375rem; }
.feld-name { font-size: .875rem; font-weight: 600; }
.pflicht { color: var(--ueberfaellig); }
.feld-hinweis { font-size: .8125rem; color: var(--text-leise); line-height: 1.45; }

/* Diese Liste muss JEDE Eingabeart enthalten, die irgendwo vorkommt.
   Fehlt eine, bleibt das Feld unformatiert und - schlimmer - unter 16px
   klein: Dann zoomt das iPhone beim Antippen hinein und die Seite
   verrutscht. Genau das passierte am 28.08.2026 mit dem Suchfeld im
   Filter, weil "search" hier fehlte. */
.feld input[type="text"],
.feld input[type="email"],
.feld input[type="password"],
.feld input[type="date"],
.feld input[type="search"],
.feld input[type="number"],
.feld select,
.feld textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;               /* nie kleiner: das Handy zoomt sonst beim Tippen */
  padding: .625rem .75rem;
  border: 1px solid var(--rand);
  border-radius: var(--rundung-klein);
  background: var(--flaeche);
  color: var(--text);
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: 2px solid var(--grund);
  outline-offset: -1px;
  border-color: var(--grund);
}

.feld-gruppe {
  border: 1px solid var(--rand);
  border-radius: var(--rundung-klein);
  padding: 1rem;
  margin: 0;
  display: grid;
  gap: 1rem;
  background: var(--hintergrund);
}
.feld-gruppe legend { font-size: .875rem; font-weight: 650; padding: 0 .35rem; }

.formular-fuss {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: .25rem;
}


/* --- Knoepfe ------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .625rem 1.125rem;
  border: 0;
  border-radius: var(--rundung-klein);
  background: var(--grund);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.knopf:hover { background: var(--grund-dunkel); }
.knopf-gross { padding: .8125rem 1.5rem; font-size: 1rem; }

.knopf-schlicht {
  background: none;
  border: 1px solid var(--rand);
  border-radius: var(--rundung-klein);
  padding: .5rem .875rem;
  font: inherit;
  font-size: .875rem;
  color: var(--text-leise);
  text-decoration: none;
  cursor: pointer;
}
.knopf-schlicht:hover { background: var(--hintergrund); color: var(--text); }

.knopf-gefahr {
  background: none;
  border: 1px solid #ffc9c9;
  border-radius: var(--rundung-klein);
  padding: .5rem .875rem;
  font: inherit;
  font-size: .875rem;
  color: var(--ueberfaellig);
  cursor: pointer;
}
.knopf-gefahr:hover { background: #fff5f5; }


/* --- Seitenkopf mit Knopf rechts ----------------------------------------- */

.seiten-kopf-mit-knopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
/* Ohne diese Zeile kann die linke Spalte nicht schmaler werden als ihr
   laengster nicht umbrechbarer Inhalt - ein Flex-Element hat von Haus aus
   `min-width: auto`. Der Knopf rechts wurde dadurch aus dem Bild geschoben,
   und am Handy entstand seitliches Scrollen (Bauregel 11 verbietet das).
   Am 29.08.2026 bei 375 px nachgemessen: 390 statt 375 Pixel. */
.seiten-kopf-mit-knopf > div { min-width: 0; }

.zurueck {
  display: inline-block;
  font-size: .875rem;
  color: var(--text-leise);
  text-decoration: none;
  margin-bottom: .35rem;
}
.zurueck:hover { color: var(--grund); }


/* --- Abmelden in der Navigation ------------------------------------------ */

.navi-abmelden { display: none; }
@media (min-width: 60rem) {
  .navi-abmelden {
    display: grid;
    gap: .5rem;
    margin-top: auto;
    padding: .75rem;
    border-top: 1px solid var(--rand);
  }
  .navi-benutzer {
    font-size: .8125rem;
    color: var(--text-leise);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .navi-abmelden .knopf-schlicht { text-align: center; }
  /* "Passwort aendern" sitzt am Laptop hier unten, am Handy oben in der
     Kopfzeile - in der unteren Leiste ist kein Platz dafuer. */
  .navi-passwort {
    font-size: .8125rem;
    color: var(--text-leise);
    text-align: center;
    text-decoration: none;
  }
  .navi-passwort:hover { color: var(--grund); }
}


/* --- Mitarbeiterliste ---------------------------------------------------- */

.personen { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.person {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  padding: .625rem .875rem;
}
.person.ist-inaktiv { opacity: .55; }

.person-haupt {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  color: inherit;
}
.person-kreis {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: var(--grund-blass);
  color: var(--grund);
  font-weight: 700;
}
.person-text { min-width: 0; }
.person-text strong { display: block; font-size: .9375rem; }
.person-zeile2 {
  display: block;
  font-size: .8125rem;
  color: var(--text-leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-rechts {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.team-marke {
  display: inline-block;
  background: var(--hintergrund);
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: .05rem .5rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text);
}
.checkin-marke {
  font-size: .75rem;
  color: var(--checkin);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: .1rem .5rem;
  /* Frueher stand hier `white-space: nowrap`. Das las sich gut, solange die
     Marke kurz war - "Check-in woechentlich, ueberfaellig seit 4 Tagen"
     passt bei 375 px aber nicht in eine Zeile, und weil sie nicht umbrechen
     durfte, schob sie den Bearbeiten-Knopf aus dem Bild (seitliches
     Scrollen, verboten nach Bauregel 11).
     `inline-block` ist dabei das Entscheidende: Ohne das zerfaellt die
     Marke beim Umbruch in ZWEI HALBE PILLEN mit offenen Raendern - am
     29.08.2026 im Browser gesehen. So bleibt es ein Rahmen um beide Zeilen,
     und passt sie nicht mehr daneben, rutscht sie als Ganzes nach unten.
     `balance` haelt die zwei Zeilen dann etwa gleich lang. */
  display: inline-block;
  text-wrap: balance;
  /* Sie ist seit dem 30.08.2026 ein LINK ins Gespraech (E54). Aussehen und
     Platz bleiben unveraendert - ein Unterstrich wuerde sie in eine Zeile
     voller Marken hineinschreien. Dass sie klickbar ist, zeigt der Zeiger
     und der Wechsel beim Zeigen; die Beschriftung sagt es im Titel. */
  text-decoration: none;
  cursor: pointer;
}
a.checkin-marke:hover,
a.checkin-marke:focus-visible {
  background: var(--grund-blass);
  text-decoration: none;
}
.checkin-marke .ist-heute    { color: var(--checkin); font-weight: 650; }
.checkin-marke .ist-faellig  { color: var(--ueberfaellig); font-weight: 650; }
.checkin-marke:has(.ist-faellig) { color: var(--ueberfaellig); }

.inaktiv-marke {
  font-size: .75rem;
  color: var(--text-leise);
  background: var(--hintergrund);
  border-radius: 999px;
  padding: .1rem .5rem;
}

.leise { color: var(--text-leise); }
.fuss { margin-top: 1.25rem; }


/* --- Leere Zustaende und Gefahrenbereich --------------------------------- */

.karte.leer { text-align: center; }
.karte.leer h2 { margin-bottom: .5rem; }
.karte.leer p { color: var(--text-leise); }
.karte.leer .knopf { margin-top: 1rem; }
.karte.leer .hinweis-text {
  text-align: left;
  background: var(--hintergrund);
  border-radius: var(--rundung-klein);
  padding: .75rem 1rem;
  margin: 1rem 0 0;
}

.karte-gefahr { margin-top: 1.5rem; }
.karte-gefahr h2 { font-size: 1rem; margin-bottom: .75rem; }
.gefahr-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .75rem 0;
  border-top: 1px solid var(--rand);
}
.gefahr-zeile strong { display: block; font-size: .9375rem; }
.gefahr-zeile .leise { display: block; font-size: .8125rem; max-width: 32rem; }

/* Abmelden am Handy: sitzt oben in der Kopfzeile, weil die untere
   Leiste fuer die fuenf Bereiche gebraucht wird. Am Laptop wird es
   ausgeblendet - dort steht es unten in der Seitenleiste. */
.kopf-abmelden .knopf-schlicht { padding: .3rem .7rem; font-size: .8125rem; }
.kopf-passwort {
  padding: .3rem .7rem;
  font-size: .8125rem;
  color: var(--text-leise);
  text-decoration: none;
}
@media (min-width: 60rem) {
  .kopf-abmelden { display: none; }
  .kopf-passwort { display: none; }
}
/* Auf sehr schmalen Displays hat der Etappen-Hinweis Vorrang zu weichen. */
@media (max-width: 26rem) {
  .etappe-hinweis { display: none; }
}

/* ==========================================================================
   ETAPPE 2 - Aufgaben, Wer-Auswahl, Flag-Auswahl
   ========================================================================== */

/* --- Die zwei wiederverwendeten Bedienelemente (E20, E25) ---------------- */
/* Beide sehen gleich aus, weil sie sich gleich bedienen lassen sollen:
   tippen, waehlen, notfalls anlegen. */

.wahl {
  display: grid;
  gap: .5rem;
  padding: .6rem;
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche);
}

/* Ueberschrift und Haken in EINER Zeile (E30). Das Namensfeld steht
   darunter ueber die volle Breite - so liest es sich als eine Frage mit
   einer Antwort. */
.wahl-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
}
.wahl-kopf > .feld-name { margin: 0; }

.wahl-eigenes {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  flex: 0 0 auto;
  padding: .5rem .7rem;
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--hintergrund);
  cursor: pointer;
  white-space: nowrap;
}
.wahl-eigenes:hover { border-color: var(--grund); }
.wahl-eigenes input { width: 1.1rem; height: 1.1rem; margin: 0; }
.wahl-eigenes:has(input:checked) {
  background: var(--grund);
  border-color: var(--grund);
  color: #fff;
  font-weight: 600;
}

/* Der Pflichthaken bei der Kontoanlage (E52, E63).

   Anders als .wahl-eigenes NICHT nebeneinander, sondern Haken links und
   Text daneben umbrechend: Der Satz ist zu lang fuer eine Zeile, und auf
   375 Pixeln muss er umbrechen duerfen, ohne den Haken mitzuziehen.
   `align-items: start` haelt den Haken oben an der ersten Zeile. */
.feld-haken {
  display: flex;
  align-items: start;
  gap: .6rem;
  cursor: pointer;
  line-height: 1.45;
}
.feld-haken input {
  width: 1.15rem;
  height: 1.15rem;
  margin: .1rem 0 0 0;
  flex: 0 0 auto;
}

/* Gesperrt heisst: sichtbar, aber gerade nicht gebraucht. */
.wahl-suche.ist-gesperrt {
  color: var(--text-leise);
  background: #eceef2;
  cursor: not-allowed;
}

/* Eingabefelder nie unter 1rem - sonst zoomt das iPhone beim Antippen. */
.wahl-suche {
  width: 100%;
  font-size: 1rem;
  padding: .6rem .7rem;
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--hintergrund);
}

.wahl-ergebnis {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 0;
}
.wahl-name { font-weight: 600; }
.wahl-team {
  font-size: .75rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: var(--grund-blass);
  color: var(--grund-dunkel);
}
.wahl-hinweis-leise { font-size: .8125rem; color: var(--text-leise); }

/* --- Die Vorschlagsliste ------------------------------------------------- */

.vorschlaege:empty { display: none; }
.vorschlaege {
  display: grid;
  gap: .15rem;
  max-height: 15rem;
  overflow-y: auto;
  padding: .3rem;
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--hintergrund);
}

.vorschlag-gruppe {
  margin: .4rem 0 .1rem;
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.vorschlag {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  width: 100%;
  min-height: 2.5rem;
  padding: .45rem .6rem;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}
.vorschlag:hover { border-color: var(--grund); background: var(--grund-blass); }
.vorschlag-zusatz { font-size: .75rem; color: var(--text-leise); }
.vorschlag.ist-neu { color: var(--grund-dunkel); font-weight: 600; }
.vorschlag-leer { margin: .3rem; font-size: .8125rem; color: var(--text-leise); }

.vorschlag-neu {
  margin-top: .35rem;
  padding-top: .35rem;
  border-top: 1px solid var(--rand);
}
.vorschlag-neu-titel { margin: .2rem .3rem .35rem; font-size: .8125rem; }

.art-knoepfe { display: flex; gap: .35rem; flex-wrap: wrap; }
.knopf-art {
  flex: 1 1 auto;
  min-height: 2.5rem;
  padding: .45rem .7rem;
  font: inherit;
  font-weight: 600;
  color: var(--flaeche);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.knopf-art.art-thema         { background: #1971c2; }
.knopf-art.art-projekt       { background: #6741d9; }
.knopf-art.art-arbeitsgruppe { background: #0c8599; }
.knopf-art:hover { filter: brightness(1.1); }

/* --- Der Dublettenschutz (E25) ------------------------------------------- */
/* Bewusst auffaellig: Eine uebersehene Dublette zerlegt spaeter unbemerkt
   eine ganze Aufgabenliste. */

.rueckfrage {
  display: grid;
  gap: .5rem;
  padding: .7rem;
  border: 1px solid var(--deadline);
  border-radius: var(--rundung);
  background: #fff8f3;
}
.rueckfrage-titel { margin: 0; font-weight: 600; }
.rueckfrage-knoepfe { display: flex; gap: .4rem; flex-wrap: wrap; }

/* --- Flag-Chips ---------------------------------------------------------- */

.chips { display: flex; gap: .35rem; flex-wrap: wrap; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .3rem .25rem .5rem;
  font-size: .8125rem;
  border-radius: 999px;
  background: var(--grund-blass);
  color: var(--text);
}
.chip-art {
  display: inline-grid;
  place-items: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .2rem;
  font-size: .625rem;
  font-weight: 700;
  color: #fff;
  border-radius: 999px;
}
.chip-thema         .chip-art { background: #1971c2; }
.chip-projekt       .chip-art { background: #6741d9; }
.chip-arbeitsgruppe .chip-art { background: #0c8599; }

.chip-weg {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-leise);
  background: none;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
.chip-weg:hover { color: var(--ueberfaellig); background: #fff; }

/* --- Das Aufgabenformular ------------------------------------------------ */

.mehr {
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  padding: .6rem .8rem;
  background: var(--hintergrund);
}
.mehr > summary {
  cursor: pointer;
  font-weight: 600;
  padding: .2rem 0;
}
.mehr[open] > summary { margin-bottom: .7rem; }
.mehr .feld { margin-bottom: .8rem; }

.feld-paar { display: grid; gap: .8rem; }
@media (min-width: 40rem) {
  .feld-paar { grid-template-columns: 1fr 1fr; }
}

.feld-schalter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
}
.feld-schalter input { width: auto; }
.feld-schalter .feld-hinweis { flex-basis: 100%; }

/* Die drei Termin-Arten tragen ihre Farbe auch im Formular (E11). */
.feld-deadline::after,
.feld-wiedervorlage::after {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-left: .35rem;
  border-radius: 999px;
}
.feld-deadline::after      { background: var(--deadline); }
.feld-wiedervorlage::after { background: var(--wiedervorlage); }

/* --- Die Aufgabenliste --------------------------------------------------- */

.aufgaben { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.aufgabe {
  padding: .7rem .8rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--rand);
  border-radius: var(--rundung);
}
.aufgabe.ist-ueberfaellig { border-left-color: var(--ueberfaellig); }

.aufgabe-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .35rem;
}
/* Der Titel ist seit Etappe 3 ein Link auf die Detailansicht. Er soll
   trotzdem wie eine Ueberschrift aussehen und nicht wie ein blauer Link -
   sichtbar wird er erst beim Beruehren und beim Tastatur-Fokus. */
.aufgabe-titel { font-weight: 600; color: inherit; text-decoration: none; }
a.aufgabe-titel:hover,
a.aufgabe-titel:focus-visible { text-decoration: underline; }
.aufgabe-zeile { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.aufgabe-fehlt { margin: .4rem 0 0; font-size: .75rem; color: var(--deadline); }

/* Marken tragen Bedeutung, keine Dekoration - deshalb feste Farben. */
.marke {
  display: inline-block;
  padding: .1rem .45rem;
  font-size: .75rem;
  border-radius: 999px;
  background: var(--hintergrund);
  color: var(--text-leise);
  white-space: nowrap;
}
.marke-wer           { background: var(--grund-blass); color: var(--grund-dunkel); }
.marke-offen         { background: #fff4e6; color: #b45309; font-weight: 600; }
.marke-deadline      { background: #fff0e6; color: var(--deadline); }
.marke-wiedervorlage { background: #f1edfd; color: var(--wiedervorlage); }
.marke-spaet         { background: var(--ueberfaellig); color: #fff; font-weight: 600; }
.marke-flag          { background: #eef2f7; color: #334155; }
/* Wiederkehrende Aufgabe (Etappe 6). Bewusst zurueckhaltend: Sie ist eine
   Eigenschaft der Aufgabe, kein Termindruck - die vier bedeutungstragenden
   Farben aus E11 (Deadline, Wiedervorlage, Check-in, ueberfaellig) bleiben
   ihr deshalb fern. */
.marke-wiederholung  { background: #eef2f7; color: #475569; }
.marke-flag.flag-projekt       { background: #f1edfd; color: #5535b8; }
.marke-flag.flag-arbeitsgruppe { background: #e3f5f8; color: #0b6f80; }

.marke-status { background: var(--hintergrund); border: 1px solid var(--rand); }
.status-neu                     { background: #fff4e6; color: #b45309; border-color: #ffe0b3; }
.status-besprechen              { background: var(--grund-blass); color: var(--grund-dunkel); border-color: #d6ddfc; }
.status-in_arbeit               { background: #e6f4ff; color: #1264a3; border-color: #cbe4f9; }
.status-wartet_auf_rueckmeldung { background: #f1edfd; color: var(--wiedervorlage); border-color: #e0d7fa; }
.status-erledigt                { background: #e8f7ed; color: var(--erledigt); border-color: #cdead6; }
.status-gecancelt               { background: #f1f2f4; color: var(--text-leise); }


/* --- Nummerierte Anleitung (Seite "Passwort vergessen") ------------------ */

.schritte {
  margin: .5rem 0 1rem;
  padding-left: 1.4rem;
  display: grid;
  gap: .45rem;
  line-height: 1.5;
}
.schritte code {
  padding: .1rem .35rem;
  font-size: .875rem;
  background: var(--hintergrund);
  border: 1px solid var(--rand);
  border-radius: 6px;
}

/* --- Liste, Ansichten und Inbox (Schritt 5) ------------------------------ */

.ansichten {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  margin-bottom: .9rem;
}

.ansicht {
  padding: .45rem .8rem;
  font-size: .875rem;
  text-decoration: none;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 999px;
}
.ansicht:hover { border-color: var(--grund); }
.ansicht.ist-aktiv {
  background: var(--grund);
  border-color: var(--grund);
  color: #fff;
  font-weight: 600;
}
/* Die Inbox steht bewusst etwas abseits: Sie ist kein Blickwinkel auf
   dieselbe Liste, sondern ein eigener Arbeitsvorrat. */
.ansicht-inbox { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; }

.zaehler {
  display: inline-grid;
  place-items: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 .35rem;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  background: var(--deadline);
  border-radius: 999px;
}

.abschnitt-titel .zaehler { margin-left: .5rem; vertical-align: middle; }

.aufgabe-text {
  margin: .1rem 0 .45rem;
  font-size: .875rem;
  color: var(--text-leise);
}

.aufgabe-fuss {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .55rem;
}

.knopf-haken {
  padding: .35rem .8rem;
  font: inherit;
  font-size: .875rem;
  color: var(--erledigt);
  background: #e8f7ed;
  border: 1px solid #cdead6;
  border-radius: 999px;
  cursor: pointer;
}
.knopf-haken:hover { background: var(--erledigt); color: #fff; border-color: var(--erledigt); }
.knopf-haken::before { content: "\2713"; margin-right: .35rem; font-weight: 700; }

/* Abgehakt heisst: bleibt lesbar, tritt aber zurueck. */
.aufgabe.ist-abgeschlossen { opacity: .62; border-left-color: var(--erledigt); }
.aufgabe.ist-abgeschlossen .aufgabe-titel { text-decoration: line-through; }

.marke-prio.prio-niedrig  { background: #f1f2f4; color: var(--text-leise); }
.marke-prio.prio-hoch     { background: #fff4e6; color: #b45309; font-weight: 600; }
.marke-prio.prio-dringend { background: var(--deadline); color: #fff; font-weight: 600; }

/* Eine faellige Wiedervorlage traegt ihre Farbe voll, statt nur blass. */
.marke-wiedervorlage.ist-faellig {
  background: var(--wiedervorlage);
  color: #fff;
  font-weight: 600;
}

.leer { text-align: center; }
.leer p { margin: .3rem 0 .8rem; }

/* In der Inbox steht die Wer-Auswahl je Zeile - dort ohne eigenen Rahmen,
   damit die Zeile nicht wie eine Schachtel in einer Schachtel wirkt. */
.aufgabe .wahl {
  margin-top: .5rem;
  padding: 0;
  border: none;
  background: none;
}

/* Am Handy muessen Knoepfe mit dem Daumen sicher zu treffen sein.
   Richtwert 44px - darunter trifft man daneben. Gilt fuer alles, was in
   einer Aufgabenzeile angetippt wird. */
@media (max-width: 60rem) {
  .aufgabe-fuss button,
  .aufgabe-fuss .knopf-schlicht,
  .knopf-haken {
    min-height: 2.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .chip-weg { width: 2rem; height: 2rem; }
}

/* --- Startseite: die vier Bloecke (Schritt 6) ---------------------------- */
/* Die Ueberschrift traegt die Farbe ihrer Termin-Art (E11) - man erkennt am
   Rand, worum es geht, ohne zu lesen. */

.abschnitt-titel { display: flex; align-items: center; gap: .5rem; }

.titel-spaet         { color: var(--ueberfaellig); }
.titel-deadline      { color: var(--deadline); }
.titel-wiedervorlage { color: var(--wiedervorlage); }

.zaehler-deadline      { background: var(--deadline); }
.zaehler-wiedervorlage { background: var(--wiedervorlage); }

.fusszeile {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 1.4rem 0 .6rem;
}
.fusszeile a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .9rem;
  font-size: .875rem;
  text-decoration: none;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
}
.fusszeile a:hover { border-color: var(--grund); }

.leer h2 { margin-top: 0; }
.hinweis-text.leise { color: var(--text-leise); font-size: .8125rem; }


/* --- Aufraeumen wie in einem Postfach (Etappe 3) --------------------------
   Nur in der Ansicht "Erledigt": vorne anhaken, oben loeschen.
   Der Haken ist bewusst gross - am Handy muss ihn ein Daumen treffen,
   ohne den Titel daneben aufzurufen. */

.massen-leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
  padding: .5rem .75rem;
  background: var(--flaeche, #f8f9fa);
  border-radius: var(--rundung-klein);
}

.massen-alle {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  cursor: pointer;
  /* Trefferflaeche fuer den Daumen, auch wenn der Text kurz ist. */
  min-height: 2.75rem;
}

.massen-alle input { width: 1.25rem; height: 1.25rem; }

.aufgabe-haken {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  margin-right: .25rem;
  align-self: center;
  cursor: pointer;
}


/* --- Der Verlauf (E23): Updates und Historie in einem Strang -------------
   Updates stehen kraeftig, Historieneintraege leise - man soll auf einen
   Blick sehen, was ein Mensch geschrieben hat und was die App mitnotiert
   hat. Die Zeitspalte ist schmal und gleichbleibend, damit die Zeilen
   untereinander fluchten. */

.update-form {
  display: flex;
  align-items: flex-end;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.update-form .feld { flex: 1 1 18rem; margin-bottom: 0; }
/* Am Handy muss der Daumen ihn sicher treffen: 44px ist der Richtwert,
   ohne diese Zeile waere er 43px hoch. Nachgemessen am 28.08.2026. */
.update-form button { min-height: 2.875rem; }

.verlauf { list-style: none; margin: 0; padding: 0; }

.verlauf-eintrag {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: .25rem .75rem;
  align-items: baseline;
  padding: .5rem 0;
  border-top: 1px solid var(--linie, #e9ecef);
}

.verlauf-zeit {
  font-size: .8125rem;
  color: var(--text-leise, #868e96);
  font-variant-numeric: tabular-nums;
}

.verlauf-marke {
  display: inline-block;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-leise, #868e96);
}

.verlauf-text { margin: 0; grid-column: 2; }
.verlauf-leise { color: var(--text-leise, #868e96); font-size: .875rem; }
.verlauf-update .verlauf-text { font-weight: 500; }
.verlauf-mehr { margin-top: .75rem; font-size: .875rem; }

/* Am Handy ist fuer zwei Spalten kein Platz - die Zeit rueckt nach oben. */
@media (max-width: 32rem) {
  .verlauf-eintrag { grid-template-columns: 1fr; }
  .verlauf-text { grid-column: 1; }
}

.verlauf-schalter {
  margin-top: 1rem;
  font-size: .8125rem;
}
.verlauf-schalter a { color: var(--text-leise, #868e96); }


/* Der schwebende Speichern-Knopf (E37).

   GLEICHE FORM, ANDERE FUELLUNG: Er sieht aus wie der Quick-Task-Knopf,
   ist aber hell statt farbig gefuellt. So sind die beiden nebeneinander
   nie zu verwechseln - und der Quick-Task-Knopf bleibt der auffaelligste
   der App, so wie es seit Etappe 0 gedacht ist.

   Warum KEINE eigene Farbe: In ActiGO tragen Farben Bedeutung, keine
   Dekoration (E11) - orange ist die Deadline, violett die Wiedervorlage,
   gruen der Check-in, rot ueberfaellig. Eine davon fuer "Speichern" zu
   benutzen wuerde die Zuordnung verwaessern, und eine neue zu erfinden
   erst recht. */
.schweb-speichern {
  background: var(--flaeche);
  color: var(--grund);
  border: 2px solid var(--grund);
  box-shadow: 0 4px 14px rgba(22, 24, 29, .18);
  /* DER RAHMEN DARF NICHT DICK AUFTRAGEN: Ohne diesen Ausgleich waere der
     Knopf durch seine 2px Rand oben und unten insgesamt 4px hoeher als der
     Quick-Task-Knopf - und der waere dadurch um zwei Pixel nach oben
     gerutscht. Nachgemessen am 28.08.2026; die Leiste richtet zusaetzlich
     an den Unterkanten aus, damit so etwas gar nicht erst wirken kann. */
  padding: calc(.875rem - 2px) calc(1.25rem - 2px);
}
.schweb-speichern:hover:not(:disabled) { background: var(--grund-blass); }

/* Ein Notnetz fuer sehr schmale Geraete: Wird es wirklich eng, faellt die
   Beschriftung weg - der Haken allein ist eindeutig genug, und der
   Quick-Task-Knopf behaelt seine volle Breite.
   Nachgemessen: Bei 375 px belegen beide Knoepfe zusammen 289 px, es passt
   also mit Text. Die Schwelle liegt deshalb bei 20rem (320 px) und greift
   im Alltag nie - erst darunter oder bei stark vergroesserter Schrift. */
@media (max-width: 20rem) {
  .schweb-speichern .quick-text { display: none; }
  .schweb-speichern { padding-left: 1rem; padding-right: 1rem; }
}


/* Die Verschiebe-Knoepfe der Wiedervorlage (W11). Sie stehen unter dem
   Datumsfeld, nicht daneben - am Handy waere daneben kein Platz, und ein
   Knopf, den man nur auf dem Laptop trifft, ist keiner. */
.wv-knoepfe {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}
.wv-knopf {
  min-height: 2.75rem;      /* Daumenmass */
  white-space: nowrap;
}


/* --- Zwei Felder nebeneinander sollen auf EINER Hoehe stehen -------------
   `.feld` ist ein Raster. Stehen zwei davon nebeneinander und hat eines
   mehr Zeilen als das andere (die Wiedervorlage hat seit W11 zusaetzlich
   ihre Verschiebe-Knoepfe), streckt das Raster die WENIGEREN Zeilen auf
   dieselbe Gesamthoehe - und schiebt damit das Eingabefeld nach unten.
   Gemessen am 28.08.2026: 19 Pixel Versatz, die Beschriftung 41 statt
   22 Pixel hoch, das Datumsfeld 68 statt 48.

   `align-content: start` laesst die Zeilen bei ihrer natuerlichen Hoehe
   und beginnt oben. Dann fluchten Beschriftungen und Eingabefelder,
   egal wie viel darunter noch folgt. */
.feld-paar .feld { align-content: start; }


/* --- Filter und Suche (Etappe 3) ----------------------------------------
   Die Leiste ist eingeklappt, solange nichts gefiltert ist - sonst stuende
   ueber jeder Aufgabenliste ein halber Bildschirm Bedienung. */

.filter {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  margin-bottom: 1rem;
  overflow: hidden;
}

.filter > summary {
  padding: .875rem 1rem;
  cursor: pointer;
  font-weight: 600;
  font-size: .9375rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;      /* Daumenmass */
  box-sizing: border-box;
}

.filter > summary::marker { color: var(--text-leise); }
.filter[open] > summary { border-bottom: 1px solid var(--rand); }

.filter-form { padding: 1rem; }

.filter-schalter {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* Ein kleiner Schalter fuer Nebensaechliches - anders als die grossen
   Schalter im Aufgabenformular, wo jede Zeile eine eigene Entscheidung ist. */
.feld-schalter-klein {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  min-height: 2.75rem;
  cursor: pointer;
}
.feld-schalter-klein input { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; }

/* Warum diese Zeile im Suchergebnis steht (E33). Leise gesetzt: Es ist eine
   Erklaerung, keine Eigenschaft der Aufgabe. */
.aufgabe-grund {
  margin: .35rem 0 0;
  font-size: .8125rem;
  color: var(--text-leise);
  font-style: italic;
}


/* --- Der Reiter "Mitarbeiter" (Etappe 3) --------------------------------
   Ein Klick auf den Namen zeigt seit dem 28.08.2026 die AUFGABEN dieser
   Person; zum Aendern der Angaben gibt es einen eigenen Knopf. Die
   haeufigere Frage bekommt den groesseren Weg. */

.personen-suche {
  display: flex;
  align-items: flex-end;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.personen-suche .feld { flex: 1 1 16rem; margin-bottom: 0; }
.personen-suche button { min-height: 2.875rem; }

/* Wie viele offene Aufgaben liegen bei dieser Person? Eine Arbeitshilfe,
   ausdruecklich KEINE Leistungsmessung (E5) - deshalb nur eine Anzahl,
   keine Quote, keine Rangfolge und keine Ampelfarbe. */
.offen-marke {
  font-size: .8125rem;
  color: var(--text-leise);
  text-decoration: none;
  white-space: nowrap;
}
.offen-marke:hover { text-decoration: underline; }

.person-bearbeiten {
  font-size: .8125rem;
  padding: .45rem .75rem;
  white-space: nowrap;
}

.hinweis-karte {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-bottom: 1rem;
}

/* Am Handy braucht die rechte Seite der Kachel eine eigene Zeile - sonst
   quetschen sich Check-in-Marke und Bearbeiten-Knopf nebeneinander. */
@media (max-width: 32rem) {
  .person-rechts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
  }
}


/* --- Die Filterleiste mit Tags (E42) -------------------------------------
   Zwei Zeilen mit zwei verschiedenen Aufgaben: oben eingrenzen, unten
   finden. Dazwischen steht als Tags, was gerade gilt. */

.filterleiste {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  padding: 1rem;
  margin-bottom: 1rem;
}

.filterzeile { position: relative; }
.filterzeile .feld { margin-bottom: 0; }

/* Die Tags: was gerade gilt. Jeder mit seinem eigenen x - so laesst sich
   ein Filter Stueck fuer Stueck abbauen, ohne von vorn anzufangen. */
.filter-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
}

.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .5rem .4rem .75rem;
  background: var(--grund-blass);
  color: var(--grund-dunkel);
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 500;
  min-height: 2.25rem;
  box-sizing: border-box;
}

/* Das x muss der Daumen sicher treffen, ohne den Tag selbst zu erwischen.
   Gemessen am 28.08.2026: 24px waren zu klein (Richtwert 44). Es waechst
   deshalb am Handy, ohne den Tag optisch aufzublaehen. */
.filter-tag-weg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  color: var(--grund-dunkel);
  text-decoration: none;
  font-size: 1.15rem;
  line-height: 1;
}

@media (max-width: 32rem) {
  .filter-tag { min-height: 2.75rem; padding-left: .875rem; }
  .filter-tag-weg { width: 2.25rem; height: 2.25rem; }
}
.filter-tag-weg:hover { background: rgba(66, 99, 235, .18); }

.filter-alle-weg { font-size: .8125rem; color: var(--text-leise); }

.filter-hinweis {
  margin: .6rem 0 0;
  font-size: .8125rem;
  color: var(--text-leise);
}

/* Zeile 2 - klar abgesetzt, damit die beiden Fragen nicht verschwimmen. */
.findezeile {
  display: flex;
  align-items: flex-end;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rand);
}
.findezeile .feld { flex: 1 1 18rem; margin-bottom: 0; }
.findezeile button { min-height: 2.875rem; }

/* Ein Vorschlag, der schon im Filter steht - sichtbar, aber nicht klickbar.
   Ihn wegzulassen waere schlechter: Man suchte ihn und faende nichts. */
.vorschlag.ist-gesetzt { opacity: .55; cursor: default; }


/* ==========================================================================
   Das Mitarbeiter-Cockpit: Check-in-Kontext (§20) und Gespraeche (§18)
   Etappe 4. Mobil zuerst (Bauregel 11) - die Zahlen liegen am Handy
   nebeneinander in einem Raster, das von selbst umbricht.
   ========================================================================== */

.kontext { margin-bottom: 1rem; border-left: 3px solid var(--checkin); }

.kontext-titel {
  margin: 0 0 .75rem;
  font-size: 1rem;
  font-weight: 600;
}
.kontext-titel .leise { font-weight: 400; }

/* Ein Raster statt fester Spalten: Am Handy stehen zwei Zahlen
   nebeneinander, auf dem Laptop mehr - ohne eigene Regel dafuer.
   WARUM DIE SPALTEN GEDECKELT SIND: Mit `1fr` zogen sie sich ueber die
   ganze Kartenbreite. Nachgemessen waren "4 neue Aufgaben" und "1 erledigt"
   dadurch 440 Pixel auseinander und lasen sich wie zwei getrennte Angaben.
   Schlimmer noch: Die Reihe mit zwei Zahlen und die mit drei bekamen
   verschieden breite Spalten und fluchteten nicht mehr untereinander.
   Eine feste Obergrenze loest beides - die Spalten sind in jeder Reihe
   gleich breit, weil sie nur von der Kartenbreite abhaengen. */
.kontext-zahlen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: .35rem .75rem;
  /* Die Breite der ganzen Liste wird gedeckelt, NICHT die der einzelnen
     Spalte. Warum das der Unterschied ist, wurde am 29.08.2026 nachgemessen:
     Bei `minmax(8rem, 10rem)` zaehlt der Browser die Spalten nach dem
     HOECHSTWERT - zwei mal 160 px passen nicht in 299 px, also blieb am
     Handy eine einzige Spalte uebrig und die Zahlen standen untereinander.
     Mit `1fr` als Hoechstwert zaehlt er nach dem Mindestwert, und die
     Obergrenze hier haelt die Zahlen auf dem Laptop trotzdem beieinander. */
  max-width: 30rem;
}
.kontext-zahlen li { font-size: .9375rem; color: var(--text-leise); }
.kontext-zahlen strong {
  font-size: 1.25rem;
  color: var(--text);
  margin-right: .25rem;
}

/* Ueberfaellig ist die einzige Zahl, die eine Farbe traegt - Farben tragen
   in ActiGO Bedeutung, keine Dekoration (E11). Eine Null bleibt deshalb
   unauffaellig: Sie wird nur eingefaerbt, wenn wirklich etwas ansteht. */
.kontext-warnung strong { color: var(--ueberfaellig); }

.kontext-zwischen {
  margin: .9rem 0 .35rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.kontext-liste { list-style: none; margin: 0; padding: 0; }
.kontext-liste li {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .35rem 0;
  border-top: 1px solid var(--rand);
}
.kontext-liste li:first-child { border-top: 0; }

/* --- Die Gespraechshistorie (§18) --------------------------------------- */

.gespraeche-block { margin-top: 2rem; }

.gespraeche { list-style: none; margin: 0; padding: 0; }

.gespraech-zeile {
  display: flex;
  gap: .75rem;
  padding: .75rem 0;
  border-top: 1px solid var(--rand);
}
.gespraech-zeile:first-child { border-top: 0; }

/* Feste Breite fuer das Datum, damit die Titel untereinander fluchten -
   sonst springt die Spalte je nach Monatslaenge. */
.gespraech-datum {
  flex: 0 0 5.5rem;
  font-size: .875rem;
  color: var(--checkin);
  font-variant-numeric: tabular-nums;
}
.gespraech-text { flex: 1 1 auto; min-width: 0; }
.gespraech-titel { display: block; font-weight: 600; }
.gespraech-notiz {
  display: block;
  margin-top: .2rem;
  font-size: .875rem;
  color: var(--text-leise);
  /* Lange Notizen duerfen die Zeile nicht sprengen - am Handy waere sonst
     seitliches Scrollen die Folge. */
  overflow-wrap: anywhere;
}
.gespraech-text .chips { margin-top: .3rem; }

@media (max-width: 32rem) {
  /* Am Handy untereinander: 5,5rem fuer das Datum plus Titel plus Chips
     passen bei 375px nicht nebeneinander. */
  .gespraech-zeile { flex-direction: column; gap: .25rem; }
  .gespraech-datum { flex: none; }
}


/* ==========================================================================
   Die Gespraechsseite: zwei Klappen und der Check-in-Modus (Etappe 4)
   ========================================================================== */

/* Auf- und zuklappen kann `details` von Haus aus - kein JavaScript noetig.
   Der Inhalt bleibt dabei im Formular, auch wenn er zugeklappt ist. */
.klappe {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  box-shadow: var(--schatten);
  margin-bottom: 1rem;
}

.klappe-kopf {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;          /* das Standard-Dreieck weg */
  /* 44 px, damit der Daumen sicher trifft - die Kopfzeile IST der Schalter */
  min-height: 2.75rem;
}
.klappe-kopf::-webkit-details-marker { display: none; }

/* Ein eigenes Dreieck, das sich beim Aufklappen dreht. Ohne einen
   sichtbaren Hinweis wuesste niemand, dass sich hier etwas oeffnet. */
.klappe-kopf::before {
  content: "";
  flex: 0 0 auto;
  width: .5rem; height: .5rem;
  margin-right: .1rem;
  border-right: 2px solid var(--text-leise);
  border-bottom: 2px solid var(--text-leise);
  transform: rotate(-45deg);
  transition: transform .15s ease;
}
.klappe[open] > .klappe-kopf::before { transform: rotate(45deg); }

.klappe-titel { font-weight: 650; font-size: 1.0625rem; }
.klappe-hinweis { font-size: .8125rem; color: var(--text-leise); }

.klappe-inhalt { padding: 0 1.25rem 1.25rem; }

/* --- Der Check-in-Modus: Aufgabe fuer Aufgabe durchgehen (E23) --------- */

.checkin-liste { list-style: none; margin: 0 0 1rem; padding: 0; }

.checkin-zeile {
  padding: .85rem 0;
  border-top: 1px solid var(--rand);
}
.checkin-zeile:first-child { border-top: 0; }

.checkin-kopf {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .4rem;
}
.checkin-titel { font-weight: 600; }

/* Status und Update nebeneinander, am Handy untereinander. Der Status
   bleibt schmal - er hat feste Werte; das Update bekommt den Rest. */
.checkin-eingabe {
  display: flex;
  gap: .75rem;
  align-items: flex-end;
  flex-wrap: wrap;
}
.checkin-eingabe .feld { margin-bottom: 0; }
.checkin-status { flex: 0 1 11rem; }
.checkin-update { flex: 1 1 16rem; }

.neue-vereinbarung {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--rand);
}

.checkin-karte { margin-bottom: 1rem; }
.checkin-karte .feld { margin-bottom: .25rem; max-width: 16rem; }

.gespraeche-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.gespraeche-kopf .abschnitt-titel { margin-bottom: .5rem; }

a.gespraech-titel { color: var(--grund); text-decoration: none; }
a.gespraech-titel:hover { text-decoration: underline; }


/* Ein Knopf, der aussieht wie ein Link.
   WARUM ES DEN BRAUCHT (Saschas Fund vom 29.08.2026): Auf der
   Gespraechsseite steht der Aufgabentitel MITTEN IM FORMULAR. Als Link
   haette er die Seite verlassen, ohne zu speichern - und alles, was bis
   dahin getippt war, waere weg gewesen. Als Speichern-Knopf sichert er
   erst und springt dann. Aussehen soll er trotzdem wie ein Link, denn
   genau das erwartet man von einem Titel. */
button.checkin-titel,
.knopf-wie-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--grund);
  text-align: left;
  cursor: pointer;
}
button.checkin-titel { font-weight: 600; }
button.checkin-titel:hover,
.knopf-wie-link:hover { text-decoration: underline; }


/* --- Woher kommt diese Aufgabe? (§17, W3, Etappe 4) -------------------- */

.herkunft {
  margin: .35rem 0 0;
  font-size: .875rem;
  color: var(--text-leise);
}
.herkunft-marke {
  display: inline-block;
  font-size: .75rem;
  font-weight: 650;
  color: var(--checkin);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: .05rem .5rem;
  margin-right: .25rem;
}

/* Der Zusatz am Update. Bewusst leise: Der SATZ ist die Nachricht, die
   Herkunft nur die Fussnote dazu. */
.verlauf-herkunft {
  font-size: .75rem;
  color: var(--checkin);
  margin-left: .35rem;
}


/* --- Der Reiter "Uebersicht" (E46, E49, E51) - ab Etappe 5 --------------- */

/* Das Zeichen in der Navigation: ein Raster, weil es eine Tabelle ist. */
.sym-raster {
  -webkit-mask-image: var(--sym);
  mask-image: var(--sym);
  --sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9.5h18M3 15h18M9 9.5V20'/%3E%3C/svg%3E");
}

/* NUR AM LAPTOP, NUR AM HANDY (E49).
   ------------------------------------------------------------------------
   Die einzige Stelle im Projekt, an der eine Ansicht nach Bildschirmbreite
   verschwindet - und sie ist bewusst entschieden, nicht stillschweigend
   entstanden. Eine Tabelle mit sieben Spalten ist am Handy kein
   Kompromiss, sondern ein halbes Versprechen.

   Entschieden wird das HIER, in CSS, ueber dieselbe Breite wie ueberall
   sonst (60rem) - nicht auf dem Server ueber die Browserkennung. Die
   laesst sich faelschen, liegt bei Tablets regelmaessig daneben und
   wuesste nichts von einem schmal gezogenen Fenster am Laptop. */
.nur-laptop { display: none; }
.nur-handy  { display: block; }

/* Die Uebersicht darf breiter sein als der Rest der App.
   ------------------------------------------------------------------------
   `.inhalt` ist auf 62rem gedeckelt - eine LESEBREITE. Fuer Text ist das
   richtig: Zeilen, die ueber den halben Bildschirm laufen, liest niemand
   gern. Fuer eine Tabelle mit sieben Spalten ist es zu eng; auf einem
   1920er Bildschirm blieben ueber 1000 Pixel ungenutzt, waehrend die
   Spalten sich draengten (aufgefallen beim Nachmessen zu F-016).

   Deshalb setzt genau EINE Seite den Block `inhalt_breite` auf "breit". */
@media (min-width: 60rem) {
  .inhalt.breit { max-width: 100rem; }
}

@media (min-width: 60rem) {
  .nur-laptop { display: revert; }
  /* Der Navigationspunkt ist ein Flex-Element - "revert" allein machte
     ihn wieder zu einem gewoehnlichen Block, und das Zeichen stuende
     ueber statt neben dem Wort. */
  .navi-punkt.nur-laptop { display: flex; }
  .nur-handy { display: none; }
}

/* Die Tabelle.
   ------------------------------------------------------------------------
   Bewusst ruhig: keine Gitternetzlinien in beide Richtungen, sondern nur
   feine Trennlinien zwischen den Zeilen. Eine Tabelle mit vielen Zeilen
   liest sich zeilenweise, nicht zellenweise. */
.tabelle-rahmen {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  box-shadow: var(--schatten);
  overflow-x: auto;
  margin-top: 1rem;
}

.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;

  /* DIE SPALTEN RICHTEN SICH NACH DEM PLATZ, NICHT NACH DEM INHALT.
     ----------------------------------------------------------------------
     Das ist die Behebung von F-016, den Sascha gemeldet hat: "Prioritaet
     und Deadline erscheinen erst, wenn ein Filter gesetzt wurde."

     Sie erschienen in Wahrheit nie - sie standen RECHTS AUSSERHALB. Ohne
     `table-layout: fixed` misst der Browser jede Spalte am laengsten
     Eintrag darin und laesst die Tabelle so breit werden, wie sie will.
     Nachgemessen am 30.08.2026 bei 1280 Pixeln: Rahmen 910, Tabelle 1086 -
     176 Pixel Ueberstand, und genau die beiden letzten Spalten lagen
     darin. Sobald ein Filter die langen Eintraege wegnahm, schrumpfte die
     Tabelle und die Spalten "kamen zurueck".

     Mit `fixed` gilt die Breite aus der ersten Zeile: Die Prozentangaben
     unten teilen den vorhandenen Platz auf, und die Tabelle passt IMMER -
     bei jedem Fenster, mit und ohne Filter. Nichts verschiebt sich mehr. */
  table-layout: fixed;
}

.tabelle th {
  text-align: left;
  font-size: .75rem;
  font-weight: 650;
  color: var(--text-leise);
  padding: .7rem .75rem;
  border-bottom: 1px solid var(--rand);
  background: var(--hintergrund);
  position: sticky;
  top: 0;
  z-index: 1;
}

.tabelle td {
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--rand);
  vertical-align: top;
  /* Ein sehr langes Wort ohne Leerzeichen (eine Adresse, eine Nummer)
     wuerde die feste Spaltenbreite sonst doch wieder sprengen. */
  overflow-wrap: anywhere;
}

.tabelle tbody tr:last-child td { border-bottom: none; }
.tabelle tbody tr:hover { background: var(--grund-blass); }

/* Ueberfaellig und abgeschlossen tragen dieselbe Bedeutung wie in der
   Liste - Farben sind Bedeutung, keine Dekoration (E11). */
.tabelle tr.ist-ueberfaellig td.spalte-titel {
  box-shadow: inset 3px 0 0 var(--ueberfaellig);
}
.tabelle tr.ist-abgeschlossen td { color: var(--text-leise); }
.tabelle tr.ist-abgeschlossen .aufgabe-titel { text-decoration: line-through; }

/* Spaltenbreiten in PROZENT, nicht in Pixeln.
   ------------------------------------------------------------------------
   Sie teilen den vorhandenen Platz auf, statt ihn zu fordern. Dadurch
   passt die Tabelle auf jedem Bildschirm - an einem breiten Monitor wird
   jede Spalte grosszuegiger, an einem schmalen Laptop enger, aber KEINE
   verschwindet (F-016).

   Der Titel bekommt bewusst keine Angabe: Bei `table-layout: fixed`
   nimmt eine Spalte ohne Breite den ganzen Rest. Das ist genau richtig,
   sobald sich Spalten ab- und zuschalten lassen - der frei werdende Platz
   geht dann an die Spalte, die man immer braucht. */
.tabelle .spalte-beschreibung { width: 17%; }
.tabelle .spalte-flags        { width: 12%; }
.tabelle .spalte-wer          { width: 13%; }
.tabelle .spalte-status       { width: 12%; }
.tabelle .spalte-prioritaet   { width: 10%; }
.tabelle .spalte-deadline     { width: 12%; }
.tabelle .spalte-titel        { font-weight: 600; }   /* Rest: 24% */

/* Die Marken duerfen in der Tabelle umbrechen. In einer Aufgabenzeile
   stehen sie nebeneinander und sollen zusammenbleiben; in einer schmalen
   Spalte wuerde "Wartet auf Rueckmeldung" sonst ueber den Rand ragen. */
.tabelle .marke { white-space: normal; }

/* Das Datum bleibt in einer Zeile, der Ueberfaellig-Hinweis rutscht
   darunter - sonst zwaenge er die Spalte wieder auf 200 Pixel (F-016). */
.tabelle .spalte-deadline .datum { display: block; white-space: nowrap; }

/* Ein langer Beschreibungstext wird auf zwei Zeilen gekuerzt. Der volle
   Text steht im "title" - er ist nicht verloren, nur eingeklappt. */
.gekuerzt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-leise);
}


/* --- Spalten aussuchen und ordnen (E51) --------------------------------- */

/* Zugeklappt ist es eine Zeile, aufgeklappt eine kurze Liste. Das
   Auf- und Zuklappen macht `<details>` - dieselbe Technik wie die beiden
   Klappen auf der Gespraechsseite, und genau wie dort ohne JavaScript. */
.spaltenwahl {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  margin-top: .75rem;
}

.spaltenwahl > summary {
  cursor: pointer;
  padding: .6rem .9rem;
  font-size: .875rem;
  font-weight: 600;
  border-radius: var(--rundung);
}
.spaltenwahl > summary:hover { background: var(--grund-blass); }
.spaltenwahl > summary .leise { font-weight: 400; margin-left: .4rem; }

.spaltenwahl-inhalt { padding: 0 .9rem .9rem; }

.spaltenwahl-hinweis {
  margin: 0 0 .6rem;
  font-size: .8125rem;
}

.spaltenliste {
  list-style: none;
  margin: 0 0 .75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.spaltenliste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .3rem .5rem;
  border-radius: var(--rundung-klein);
}
.spaltenliste li:hover { background: var(--hintergrund); }

/* Eine abgewaehlte Spalte steht weiter unten und tritt zurueck - sie ist
   nicht weg, nur gerade nicht dabei. */
.spaltenliste li.ist-aus { opacity: .55; }

.spalte-haken {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  font-size: .875rem;
}

.spalte-pfeile { display: flex; gap: .25rem; }

/* Die Pfeile sind gewoehnliche Absende-Knoepfe desselben Formulars. Ein
   Klick schickt die Haekchen MIT - deshalb geht beim Verschieben keine
   Auswahl verloren. */
.knopf-pfeil {
  border: 1px solid var(--rand);
  background: var(--flaeche);
  color: var(--text);
  border-radius: var(--rundung-klein);
  width: 1.9rem;
  height: 1.9rem;
  line-height: 1;
  cursor: pointer;
  font-size: .9rem;
}
.knopf-pfeil:hover:not(:disabled) {
  background: var(--grund-blass);
  border-color: var(--grund);
  color: var(--grund-dunkel);
}
/* Am Rand tut der Pfeil nichts - dann sieht man das auch. Besser als ein
   Knopf, der klickbar aussieht und schweigt. */
.knopf-pfeil:disabled { opacity: .3; cursor: default; }

.spaltenwahl-fuss {
  display: flex;
  align-items: center;
  gap: .75rem;
}


/* Der Titel in der Spaltenwahl: nicht abwaehlbar, aber verschiebbar.
   Er zeigt einen festen Haken statt eines Kaestchens - man sieht sofort,
   dass hier nichts zu entscheiden ist. */
.spalte-haken.ist-fest { cursor: default; }
.spalte-fest-zeichen {
  display: inline-grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border-radius: 3px;
  background: var(--rand);
  color: var(--text-leise);
  font-size: .7rem;
}
.spalte-haken.ist-fest .leise { font-size: .75rem; }


/* Sortieren per Klick auf die Ueberschrift (E51) */
.tabelle th a.spalte-sortieren {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: inherit;
  text-decoration: none;
  font: inherit;
}
.tabelle th a.spalte-sortieren:hover { color: var(--grund-dunkel); }
.tabelle th.ist-sortiert { color: var(--grund-dunkel); }
.tabelle th.ist-sortiert a.spalte-sortieren { font-weight: 750; }
/* Das Zeichen belegt seinen Platz auch dann, wenn es leer ist - sonst
   ruckt die Ueberschrift beim Sortieren um ein paar Pixel zur Seite. */
.sortzeichen {
  display: inline-block;
  min-width: .7em;
  font-size: .8em;
}


/* Filtern direkt im Spaltenkopf (E46, Punkt 1) */
.kopf-filter { display: inline-block; margin-left: .25rem; }
.kopf-filter > summary {
  cursor: pointer;
  list-style: none;
  display: inline-block;
  padding: 0 .2rem;
  border-radius: 3px;
  color: var(--text-leise);
  font-size: .8rem;
}
.kopf-filter > summary::-webkit-details-marker { display: none; }
.kopf-filter > summary:hover { background: var(--rand); color: var(--grund-dunkel); }
.kopf-filter[open] > summary { background: var(--grund-blass); color: var(--grund-dunkel); }

/* Die Liste steht IN der Zelle, nicht darueber. Ein schwebendes Menue
   wuerde vom Rahmen der Tabelle abgeschnitten - der hat overflow und
   damit eine Kante. In der Zeile wird der Kopf einfach hoeher. */
.kopf-filter-liste {
  list-style: none;
  margin: .35rem 0 .15rem;
  padding: 0;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.kopf-filter-liste a {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  padding: .15rem .25rem;
  border-radius: 3px;
  color: var(--text-leise);
  text-decoration: none;
  font-size: .75rem;
  white-space: normal;
}
.kopf-filter-liste a:hover { background: var(--grund-blass); color: var(--grund-dunkel); }
.kopf-filter-liste a.ist-gesetzt { color: var(--grund-dunkel); font-weight: 650; }
.kopf-filter-haken { display: inline-block; min-width: .8em; }


/* Spalten mit der Maus ziehen (E51, Nachtrag 30.08.2026) */

/* Der Anfasser steht im HTML, ist aber unsichtbar, bis spalten.js
   geladen hat und die Klasse setzt. Ohne die Datei waere er ein Knopf,
   der nichts tut - und das ist genau das, was ActiGO nirgends anbietet. */
.spalte-griff { display: none; }
.tabelle.kann-ziehen .spalte-griff {
  display: inline-block;
  cursor: grab;
  margin-right: .3rem;
  color: var(--rand);
  letter-spacing: -.15em;
  user-select: none;
}
.tabelle.kann-ziehen th:hover .spalte-griff { color: var(--text-leise); }
.tabelle.kann-ziehen .spalte-griff:active { cursor: grabbing; }

/* Die Spalte, die gerade in der Hand ist. */
.tabelle th.wird-gezogen { opacity: .45; }

/* Wo sie landen wuerde: eine Kante an der Zielspalte. Bewusst nur eine
   Linie und keine Farbflaeche - die Farben tragen in ActiGO Bedeutung
   (E11), und eine neue nur fuers Ziehen zu erfinden wuerde sie
   verwaessern. */
.tabelle th.ist-ziel {
  box-shadow: inset 3px 0 0 var(--grund);
  background: var(--grund-blass);
}


/* Gespeicherte Sichten (E50) */
.sichten {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  margin-top: .5rem;
}
.sichten > summary {
  cursor: pointer;
  padding: .6rem .9rem;
  font-size: .875rem;
  font-weight: 600;
  border-radius: var(--rundung);
}
.sichten > summary:hover { background: var(--grund-blass); }
.sichten > summary .leise { font-weight: 400; margin-left: .4rem; }

.sichten-inhalt { padding: 0 .9rem .9rem; }

.sichten-liste {
  list-style: none;
  margin: 0 0 .9rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.sichten-liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .3rem .5rem;
  border-radius: var(--rundung-klein);
  flex-wrap: wrap;
}
.sichten-liste li:hover { background: var(--hintergrund); }

/* Der Name IST der Ladeknopf - ein Klick springt an die gespeicherte
   Adresse. Mehr passiert nicht, und mehr soll auch nicht passieren. */
.sicht-laden {
  font-weight: 600;
  font-size: .9375rem;
  color: var(--grund-dunkel);
  text-decoration: none;
}
.sicht-laden:hover { text-decoration: underline; }

.sicht-verwalten { display: flex; align-items: center; gap: .35rem; }
.sicht-verwalten input[type=text] {
  font-size: .8125rem;
  padding: .2rem .4rem;
  border: 1px solid var(--rand);
  border-radius: var(--rundung-klein);
  width: 11rem;
}
.sicht-verwalten .knopf-schlicht { font-size: .8125rem; }

.sicht-neu { display: flex; align-items: flex-end; gap: .5rem; flex-wrap: wrap; }
.sicht-neu .feld { flex: 1 1 16rem; }

/* Die Rueckfrage vor dem Ueberschreiben. Sie ist ein Hinweis, keine
   Fehlermeldung - deshalb dieselbe ruhige Farbe wie andere Hinweise. */
.meldung-frage {
  background: var(--grund-blass);
  border: 1px solid #d6ddfc;
  color: var(--text);
  border-radius: var(--rundung);
  padding: .75rem .9rem;
}
.meldung-frage p { margin: 0 0 .6rem; }
.meldung-frage form { display: flex; align-items: center; gap: .6rem; }


/* Der CSV-Export (E52) */
.export {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: .75rem;
}
.export .leise { font-size: .8125rem; }


/* --- Das feste Gespraech: ein Protokoll (E53) --------------------------- */
/* Ein gespeichertes Gespraech ist abgeschlossen und zeigt, was DAMALS
   festgehalten wurde. Der Knopf "Doch noch aendern" macht daraus wieder ein
   Arbeitsblatt. Bewusst zurueckhaltend gestaltet: Es ist eine Rueckschau,
   kein Formular - das soll man sehen, bevor man liest. */

.protokoll-hinweis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.protokoll-hinweis p { margin: 0; }

/* Zeilenumbrueche aus dem Eingabefeld bleiben erhalten - Notizen sind oft
   Stichpunkte untereinander. `pre-wrap` bricht lange Zeilen trotzdem um,
   damit am Handy nichts seitlich hinausragt (Bauregel 11). */
.protokoll-text {
  margin: .25rem 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Der Update-Text gehoert unter den Aufgabentitel, nicht daneben. Die
   Zeilen der Kontext-Liste stehen sonst nebeneinander. */
.kontext-liste li .protokoll-text {
  flex-basis: 100%;
  color: var(--text-leise);
  font-size: .9375rem;
}


/* --- Der sichtbare Weg zu den faelligen Check-ins (E54) ----------------- */
/* Der Filter gab es seit Etappe 4 - aber nur zum Tippen. Wer nicht weiss,
   dass es ihn gibt, findet ihn nie. Der Knopf fuehrt auf GENAU dieselbe
   Adresse; es entsteht kein zweiter Mechanismus (E39). */

.schnellwege { margin: 0 0 1rem; }

.schnellweg {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border: 1px solid var(--checkin);
  border-radius: 999px;
  color: var(--checkin);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  /* 44 px hoch, damit ein Daumen ihn am Handy sicher trifft. */
  min-height: 44px;
  box-sizing: border-box;
}
.schnellweg:hover, .schnellweg:focus-visible { background: #e6f7f2; }
.schnellweg.ist-aktiv { background: var(--checkin); color: #fff; }
.schnellweg .zaehler { background: var(--checkin); color: #fff; }
.schnellweg.ist-aktiv .zaehler { background: rgba(255,255,255,.25); }


/* --- Der Block "Check-in faellig" auf der Startseite (E55) -------------- */
/* Eine Zeile je Mensch. Der ganze Name ist der Weg ins Gespraech - was hier
   steht, ist faellig, und ein Klick erledigt es. */

.titel-checkin  { color: var(--checkin); }
.zaehler-checkin { background: var(--checkin); }
.marke-checkin  { background: #e6f7f2; color: var(--checkin); }

.checkin-faellig { list-style: none; margin: 0; padding: 0; }
.checkin-faellig li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .6rem .9rem;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  margin-bottom: .5rem;
}
.checkin-zeile-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  text-decoration: none;
  color: var(--text);
  /* Der Name traegt den Weg - er darf deshalb den ganzen freien Platz
     nehmen, damit die Trefferflaeche gross ist und nicht nur das Wort. */
  flex: 1 1 auto;
  min-height: 44px;
}
.checkin-zeile-link:hover strong { text-decoration: underline; }


/* --- "Naechste Wiederholung angelegt" (W7, Etappe 6) -------------------- */
/* Erscheint NUR in der Zeile, die gerade abgehakt wurde. Gruen wie der
   Check-in? Nein - diese Farbe traegt eine andere Bedeutung (E11). Hier
   genuegt ein ruhiger Hinweis: Es ist eine Mitteilung, keine Frist. */
.aufgabe-wiederholt {
  margin: .5rem 0 0;
  font-size: .8125rem;
  color: var(--text-leise);
}
.aufgabe-wiederholt a { color: var(--grund); }

/* Wo steht diese Aufgabe in ihrer Reihe? (W7, Etappe 6) */
.reihe-weiter {
  margin: .5rem 0 0;
  font-size: .875rem;
  color: var(--text-leise);
}


/* --- Der Reiter "Einstellungen" (E20, E31, W9) - Etappe 6 --------------- */
/* Eine Zeile je Flag: Name und Art zusammen aendern, die Zahlen darunter.
   Mobil zuerst (Bauregel 11): untereinander; ab 60rem nebeneinander. */

.flag-verwaltung { list-style: none; margin: 0; padding: 0; }

.flag-zeile {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  padding: .75rem .9rem;
  margin-bottom: .6rem;
}

.flag-form {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.flag-form .feld { margin: 0; }
.flag-form .knopf { align-self: flex-start; }

.flag-zahlen { margin: .5rem 0 0; font-size: .8125rem; }
.flag-zahlen a { color: var(--grund); }
/* Loeschen sieht nach Loeschen aus - aber es fuehrt zu einer Rueckfrage,
   nicht direkt zur Tat. Deshalb ein Link und kein roter Knopf. */
.flag-loeschen { color: var(--ueberfaellig) !important; }

.rueckfrage-knoepfe {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

@media (min-width: 60rem) {
  .flag-form {
    flex-direction: row;
    align-items: flex-end;
  }
  /* Der Name bekommt den Platz, die Art nur so viel, wie sie braucht -
     "Arbeitsgruppe" ist das laengste Wort darin. */
  .flag-form .flag-name { flex: 1 1 auto; }
  .flag-form .flag-art  { flex: 0 0 12rem; }
  .flag-form .knopf { align-self: auto; }
}

/* Ein Hinweis, der zu einem Feld gehoert, aber nicht IN dessen Label steht */
.feld-hinweis-eigen { margin: -.25rem 0 1rem; }