/* Seas of Love® Register */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&family=Cormorant+Garamond:wght@400;500&display=swap');

:root {
  --teal:       #088080;
  --dunkelblau: #001345;
  --gold:       #C28F3F;
  --sand:       #E3D9C1;
  --creme:      #FBF8F1;
  --weiss:      #FFFFFF;
  --schwarz:    #000C2A;
  --rot:        #DA0000;
  --linie:      #E6DECB;
  --grau:       #7A7568;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--dunkelblau);
  font-family: 'Montserrat', -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
}

h1, h2, h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  color: var(--dunkelblau);
  margin: 0 0 .6rem;
  letter-spacing: .01em;
}

h1 { font-size: 30px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }

/* Links: Dunkelblau mit feinem Goldstrich, kein Gruen mehr (Wanja 02.10.2026). */
a { color: var(--dunkelblau); text-decoration-color: rgba(194, 143, 63, .55); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

.eyebrow {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
}


/* --- Anmeldung --- */

.anmelden-huelle {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.anmelden {
  width: 100%;
  max-width: 400px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 2.5rem 2rem;
  text-align: center;
}

.anmelden h1 { margin-bottom: .2rem; }

.anmelden .unterzeile {
  color: var(--grau);
  font-size: 13px;
  margin: 0 0 2rem;
}

.anmelden form { text-align: left; }


/* --- Formulare --- */

label {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grau);
  margin: 0 0 .4rem;
}

input[type=text],
input[type=password],
input[type=email],
input[type=search],
input[type=date],
input[type=month],
input[type=number],
input[type=tel],
input[type=url],
input[type=time],
input[type=datetime-local],
select,
textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--linie);
  border-radius: 4px;
  background: var(--weiss);
  font-family: inherit;
  font-size: 15px;
  font-weight: 300;
  color: var(--dunkelblau);
  margin: 0 0 1.2rem;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
}

/* KNOPFHOEHE, 16.09.2026 gesenkt
   Die Knoepfe kamen aus der Website-Formensprache: dort ist ein Knopf
   eine Einladung und darf gross sein. Hier ist er ein Werkzeug, das
   zwanzig Mal am Tag gedrueckt wird, und dann wirkt dieselbe Groesse
   klobig. Das Gold traegt die Aufmerksamkeit ohnehin allein. */
button, .knopf {
  display: inline-block;
  background: var(--gold);
  color: var(--weiss);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 9px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: 1.45;
  vertical-align: middle;
}

/* Knoepfe, die nebeneinander stehen, brauchen Luft. Ohne das kleben
   sie zu einem Balken zusammen und man trifft den falschen. */
button + button,
button + .knopf,
.knopf + button,
.knopf + .knopf { margin-left: .45rem; }

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
}

/* Im Flex-Behaelter macht der Abstand schon die Luecke. */
.knopfreihe button + button, .knopfreihe button + .knopf,
.knopfreihe .knopf + button, .knopfreihe .knopf + .knopf { margin-left: 0; }

button:hover, .knopf:hover { background: #a87a33; }

button.voll { width: 100%; }

.knopf.stiller {
  background: transparent;
  color: var(--dunkelblau);
  border: 1px solid var(--linie);
}


/* --- Meldungen --- */

.meldung {
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 14px;
  margin: 0 0 1.4rem;
  text-align: left;
}

.meldung.fehler  { background: #FCEEEE; color: #8A1A1A; }
.meldung.erfolg  { background: #F3EEE2; color: #001345; }
.meldung.hinweis { background: #FAF3E4; color: #7A5A1C; }


/* --- Rahmen --- */

.kopf {
  background: var(--schwarz);
  color: var(--weiss);
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  height: 62px;
}

.kopf .marke {
  text-decoration: none;
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  letter-spacing: .04em;
  color: var(--sand);
}

/* Das Menue steht in der Mitte, wie auf der Website auch.
   Damit es wirklich mittig sitzt und nicht nur im uebrigen Platz,
   bekommen Marke und Name links und rechts dieselbe Grundbreite —
   der klassische Dreispalter. Seit dem Menue nur noch sechs Eintraege
   hat (16.09.2026), klebte es sonst links am Logo. */
.kopf .marke { flex: 1 1 0; }

.kopf nav {
  display: flex;
  flex: 0 1 auto;
  justify-content: center;
  gap: 2.1rem;
  white-space: nowrap;
}

.kopf .wer {
  flex: 1 1 0;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  white-space: nowrap;
}

.kopf nav a {
  color: var(--weiss);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .75;
}

.kopf nav a:hover, .kopf nav a.aktiv { opacity: 1; color: var(--gold); }

/* ------------------------------------------------------------------
   Die Sitzungsuhr
   ------------------------------------------------------------------
   Sie steht links vom Namen und ist die meiste Zeit gar nicht da. In
   den letzten fuenf Minuten taucht sie auf, golden und ruhig; in der
   letzten Minute wird sie rot. Dass sie auftaucht, ist die Meldung —
   deshalb darf sie sich danach zurueckhalten. */

.sitzungsuhr {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-right: 1rem;
  padding: 3px 4px 3px 10px;
  border: 1px solid rgba(194, 143, 63, .55);
  border-radius: 999px;
  background: rgba(194, 143, 63, .1);
  animation: sitzungsuhr-auf .45s ease-out;
}

@keyframes sitzungsuhr-auf {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

.sitzungsuhr[hidden] { display: none; }

.sitzungsuhr-zeit {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--gold);
}

.sitzungsuhr-knopf {
  background: var(--gold);
  color: var(--schwarz);
  font-size: 9px;
  letter-spacing: .12em;
  padding: 3px 9px;
  border-radius: 999px;
  line-height: 1.5;
  margin: 0;
}

.sitzungsuhr-knopf:hover { background: var(--weiss); }
.sitzungsuhr-knopf:disabled { opacity: .5; cursor: default; }

/* Die letzte Minute. */
.sitzungsuhr--eilig {
  border-color: rgba(218, 0, 0, .7);
  background: rgba(218, 0, 0, .14);
}

.sitzungsuhr--eilig .sitzungsuhr-zeit { color: #ff8a8a; }

.sitzungsuhr--eilig .sitzungsuhr-knopf {
  background: var(--rot);
  color: var(--weiss);
  animation: sitzungsuhr-puls 1.6s ease-in-out infinite;
}

@keyframes sitzungsuhr-puls {
  0%, 100% { opacity: 1; }
  50%      { opacity: .62; }
}

@media (prefers-reduced-motion: reduce) {
  .sitzungsuhr, .sitzungsuhr--eilig .sitzungsuhr-knopf { animation: none; }
}

@media (max-width: 640px) {
  .sitzungsuhr { margin-right: .5rem; padding-left: 8px; }
  .sitzungsuhr-zeit { font-size: 11px; }
}

.kopf .wer { font-size: 12px; color: var(--sand); }
.kopf .wer a { color: var(--sand); opacity: .6; margin-left: .8rem; text-decoration: none; }
.kopf .wer a:hover { opacity: 1; color: var(--gold); }
/* Der eigene Name fuehrt zur Passwortseite — deshalb ohne die
   Zurueckhaltung der Nebenlinks, er ist ja kein Nebenlink. */
.kopf .wer a:first-child { opacity: 1; margin-left: 0; }

.inhalt {
  max-width: 1240px;
  margin: 0 auto;
  padding: 2.5rem 2rem 4rem;
}

/* Die Kundenkarte darf breiter sein als alles andere: dort stehen zwei
   Spalten nebeneinander, und der halbe Bildschirm lag bisher brach. */
.inhalt--breit { max-width: 1600px; }

/* DIE FLUCHT, 16.09.2026 — dritter und letzter Anlauf
   Die Frage war: Karten haben innen 1.8rem Abstand, loser Text stand
   am aeusseren Rand, und das sah schief aus. Zwei Anlaeufe haben den
   Text nach rechts geschoben — beide falsch. Der Grund ist einfach:
   in diesem Register liegt fast alles in Kaesten. Ein Text, der
   weiter rechts steht als der Kasten unter ihm, wirkt nicht
   buendig, sondern eingerueckt und heimatlos.
   Also: alles an der linken Kante, eine einzige senkrechte Linie
   ueber die ganze Seite. Nicht die Position der Ueberschriften war
   das Problem, sondern ihr Gewicht — sie waren zu leise, um eine
   Kante zu halten. Das loest die Typografie, nicht der Abstand. */

/* Ueberschriften zwischen den Kaesten. Damit sie die Kante halten
   koennen, bekommen sie einen goldenen Strich darueber — dasselbe
   Prinzip wie auf der Website: kein Trennstrich quer durch, sondern
   ein Zeichen, das etwas eroeffnet. */
.inhalt > h2 {
  position: relative;
  margin: 2.4rem 0 1rem;
  padding-top: .95rem;
  font-size: 1.45rem;
  letter-spacing: .01em;
}

.inhalt > h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.4rem;
  height: 2px;
  background: var(--gold);
}

/* Der Seitentitel traegt die Seite. Eyebrow dichter heran, damit
   beide als ein Block gelesen werden, und der Titel etwas fester. */
.inhalt > .eyebrow { margin-bottom: .1rem; }
.inhalt > h1 { margin-top: 0; letter-spacing: -.005em; }

/* ENGER GESETZT — 24.09.2026
   Ein leerer Kasten kostete eine halbe Bildschirmhoehe. Notizen und
   Wiedervorlage standen bei Anna-Katharina Benz beide leer da und nahmen
   zusammen mehr Platz als die Programmtabelle. Etwa ein Fuenftel weniger
   Polster, im ganzen Register, damit es nirgends auseinanderfaellt. */
.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 1.1rem 1.3rem;
  margin: 0 0 .7rem;
}

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 0 0 1.6rem;
}

.kachel {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 1.2rem 1.4rem;
}

.kachel .zahl {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  line-height: 1.1;
  color: var(--dunkelblau);
}

.kachel .bezeichnung {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grau);
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }

th {
  text-align: left;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grau);
  font-weight: 400;
  padding: 0 1.2rem .6rem 0;
  border-bottom: 1px solid var(--linie);
}

/* Oben ausrichten, nicht mittig: sobald eine Zelle zwei Zeilen hat, hängen
   sonst alle Nachbarn in der Mitte und die Zeile wirkt verrutscht.
   Und Abstand nach rechts — ohne ihn klebt eine rechtsbündige Zahl direkt
   am Text der nächsten Spalte ("119,00 €thrivepay"). */
td {
  padding: .8rem 1.2rem .8rem 0;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}

th:last-child, td:last-child { padding-right: 0; }

.fuss {
  text-align: center;
  font-size: 12px;
  color: var(--grau);
  padding: 0 0 2.5rem;
}


/* --- Ergänzungen 12.09.2026 --- */

.leise { color: var(--grau); }

a.kachel { display: block; color: inherit; text-decoration: none; }
a.kachel:hover { border-color: var(--gold); }

/* Suche */
/* Der Suchknopf war bisher ein paar Pixel hoeher als das Feld daneben:
   Feld und Knopf haben unterschiedliche Schriftgroessen, und beide
   bekamen ihre Hoehe aus dem Innenabstand. Zwei Kanten, die fast gleich
   sind, sehen schlimmer aus als zwei, die klar verschieden sind.
   Jetzt bestimmt das Feld die Hoehe, und der Knopf zieht sich darauf. */
.suche { display: flex; gap: .6rem; align-items: stretch; }
.suche input { flex: 1; min-width: 0; margin: 0; }
.suche button { padding-top: 0; padding-bottom: 0; }
.suche-info { font-size: 12px; color: var(--grau); margin: .5rem 0 1.4rem; }

/* Personenliste */
.liste { list-style: none; margin: 0 0 1.6rem; padding: 0; border-top: 1px solid var(--linie); }
.liste li { border-bottom: 1px solid var(--linie); }
.liste a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .2rem 1rem;
  padding: .9rem .6rem;
  color: inherit;
  text-decoration: none;
}
.liste a:hover { background: var(--weiss); }
.liste .name { font-weight: 500; }
.liste .mail { font-size: 13px; color: var(--grau); word-break: break-all; }
.liste .rechts { text-align: right; font-size: 12px; color: var(--grau); }
.liste .leer { padding: 1.2rem .6rem; color: var(--grau); }

.marker {
  display: inline-block;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  margin: .2rem 0 0 .3rem;
}
.marker.mighty { background: #F3EEE2; color: #001345; }
.marker.sperre { background: #FCEEEE; color: #8A1A1A; }
.marker.zeiger { background: #F1EFEA; color: #6B6455; }

/* Aufklappbare Karte */
details.karte { padding: 0; }
details.karte > summary {
  cursor: pointer;
  list-style: none;
  padding: .8rem 1.3rem;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dunkelblau);
}
details.karte > summary::-webkit-details-marker { display: none; }
details.karte > summary::before { content: "+ "; }
details.karte[open] > summary::before { content: "– "; }
details.karte > .karte-inhalt { padding: 0 1.3rem 1.1rem; }

/* Formularraster */
.raster { display: grid; grid-template-columns: 1fr; gap: 0 1.2rem; }
.raster .breit { grid-column: 1 / -1; }
/* DER HINWEISTEXT, 16.09.2026 richtiggestellt
   Er hatte ein NEGATIVES oberes Mass: -.9rem. Das war fuer genau eine
   Stelle gedacht — direkt unter einem Eingabefeld, wo er anschliessen
   soll, weil das Feld selbst schon 1.2rem Abstand nach unten hat.
   Verwendet wurde die Klasse aber ueberall: unter Tabellen, unter
   Grafiken, unter Zahlenreihen. Dort zog dasselbe Mass ihn in die
   Zeile darueber hinein — bei „Jahr fuer Jahr" lag der Satz quer
   ueber den Jahreszahlen, anderswo klebte er nur.
   Jetzt umgekehrt: Abstand ist die Regel, Ankleben die Ausnahme, und
   die Ausnahme steht als solche da. */
.feldhinweis {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  color: var(--grau);
  margin: 1.5rem 0 0;
}

/* Die Ausnahme: unmittelbar unter einem Feld gehoert er ans Feld.

   DER ZWEITE ANLAUF, 16.09.2026. Vorher zog ein negativer Abstand von
   -.9rem den Hinweis an das Feld heran. Das setzte voraus, dass das
   Feld darueber 1.2rem Abstand nach unten hat — und genau das galt
   fuer „month" und „file" nicht, weil beide in der Liste oben fehlten.
   Auf sicherungen.php lag der Satz deshalb quer ueber dem Feld.

   Jetzt zieht nichts mehr nach oben. Stattdessen gibt das Feld seinen
   eigenen Abstand ab, wenn ein Hinweis folgt. Kann ein Browser :has()
   nicht, steht der Hinweis eben etwas lockerer darunter — nie mehr
   darueber. */
input + .feldhinweis,
select + .feldhinweis,
textarea + .feldhinweis {
  margin: .15rem 0 1.2rem;
}

input:has(+ .feldhinweis),
select:has(+ .feldhinweis),
textarea:has(+ .feldhinweis) {
  margin-bottom: .4rem;
}

/* Die Dateiauswahl malt der Browser selbst; Rahmen und Innenabstand
   wuerden sie nur verunstalten. Den Abstand nach unten braucht sie
   trotzdem. */
input[type=file] { margin: 0 0 1.2rem; max-width: 100%; }
.pflicht { color: var(--rot); }

@media (min-width: 640px) {
  .raster { grid-template-columns: 1fr 1fr; }
}

/* Schmale Bildschirme */
@media (max-width: 640px) {
  .kopf { height: auto; flex-wrap: wrap; gap: .4rem 1.2rem; padding: .8rem 1rem; }
  .kopf .marke { flex: 0 1 auto; }
  .kopf nav {
    order: 3;
    flex: 1 1 100%;
    justify-content: flex-start;
    gap: 1.2rem;
    white-space: normal;
  }
  .kopf .wer { flex: 0 1 auto; margin-left: auto; }

  /* Auf dem Handy links: rechtsbuendig sieht nur dann gut aus, wenn
     die Zeile nicht umbricht. Sie bricht hier aber fast immer um. */
  .brille, .band { justify-content: flex-start; padding-left: 1rem; padding-right: 1rem; }

  .inhalt { padding: 1.6rem 1rem 3rem; }
  .karte { padding: 1.2rem 1.1rem; }

  .inhalt > h2 { font-size: 1.25rem; margin-top: 1.8rem; }
  details.karte > summary { padding: 1rem 1.1rem; }
  details.karte > .karte-inhalt { padding: 0 1.1rem 1.2rem; }
  .suche button { padding-left: 18px; padding-right: 18px; }
  .tabelle-huelle { overflow-x: auto; }
}

/* Kundenkarte */
tr.beendet td { color: var(--grau); }
tr.misslungen td { background: #FCEEEE; }
.eyebrow a { color: var(--gold); text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
.tabelle-huelle { overflow-x: auto; }

/* Die Klappe für die selten gebrauchten Filter. Sie soll wie eine
   Zeile aussehen, nicht wie eine zweite Karte. */
.filter-mehr { margin: .9rem 0 0; border-top: 1px solid #f0e9dc; padding-top: .7rem; }

.filter-mehr > summary {
  cursor: pointer;
  list-style: none;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8a7f6a;
  font-weight: 600;
}

.filter-mehr > summary::-webkit-details-marker { display: none; }
.filter-mehr > summary::before { content: "▸ "; }
.filter-mehr[open] > summary::before { content: "▾ "; }
.filter-mehr[open] > summary { margin-bottom: .8rem; }
.filter-mehr > summary:hover { color: var(--gold); }

/* Filterzeile */
.filterzeile { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }
.filterzeile > span { display: block; }
.filterzeile label { margin-bottom: .25rem; }
.filterzeile select { margin: 0; padding: 8px 10px; font-size: 14px; }
.filterzeile .filter-knoepfe { display: flex; gap: .5rem; align-items: center; }
.filterzeile button, .filterzeile .knopf { padding: 10px 18px; font-size: 11px; }

/* Programme in der Liste */
.chips { display: block; margin-top: .4rem; }
.chip {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .04em;
  background: #F3EEE2;
  color: #001345;
  border-radius: 3px;
  padding: 3px 8px;
  margin: 0 .3rem .3rem 0;
  white-space: nowrap;
}
.chip-datum { opacity: .7; margin-left: .3rem; }
.chip-alt { background: #F1EEE6; color: var(--grau); }
.chip-kaputt { background: #FCEEEE; color: #8A1A1A; }
.chip-mehr { background: transparent; color: var(--grau); border: 1px solid var(--linie); }

/* Auswahl und Bulk */
.liste li { display: flex; align-items: flex-start; }
.liste li.leer { display: block; }
.liste li > a { flex: 1; min-width: 0; }
.haken { display: flex; align-items: center; padding: 1rem .7rem 0 .2rem; margin: 0; }
.haken input { width: auto; margin: 0; }
.haken-alle { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--dunkelblau); padding: 0; gap: .5rem; }
.bulkleiste { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; justify-content: space-between; padding: 1rem 1.3rem; }
.bulk-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; }
.bulk-knoepfe button { padding: 12px 20px; font-size: 11px; }

/* --- Ergänzungen 12.09.2026, Übersicht und Liste --- */

.kacheln--klein .kachel { padding: .9rem 1.1rem; }
.kacheln--klein .zahl { font-size: 24px; }
.kachel--wach { border-color: var(--gold); }
.kachel--wach .zahl { color: var(--gold); }
.kachel--rot { border-color: #E9B7B7; }
.kachel--rot .zahl { color: var(--rot); }

.schnell { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.6rem; }

.zweispalt { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }

@media (min-width: 900px) {
  .zweispalt { grid-template-columns: 1fr 1fr; align-items: start; }
}

.verlauf { list-style: none; margin: 0; padding: 0; }
.verlauf li { display: grid; grid-template-columns: 76px 1fr; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--linie); font-size: 13px; }
.verlauf li:last-child { border-bottom: none; }
.verlauf li.misslungen { background: #FCEEEE; }
.verlauf-zeit { color: var(--grau); font-size: 12px; }
.verlauf a { text-decoration: none; }
.verlauf a:hover { text-decoration: underline; }

/* Luft zwischen Suche und Filtern */
.suche { margin-bottom: 1.4rem; }
.karte--filter { padding: 1.1rem 1.3rem; margin-bottom: 1.6rem; }

.werkzeuge { font-size: 13px; margin: 0 0 1rem; }

/* Community ist der Boden, den jeder hat: Gold, nie Teal wie ein Programm */
.chip-community {
  background: #F6EEDC;
  color: #8A6320;
  border: 1px solid #E0CFA6;
  padding: 2px 8px;
}

/* Das Blaettern stand zuerst gross und mittig ueber der Liste und nahm
   dort eine Handbreit Platz weg, den die Liste selbst besser brauchen
   kann. Es ist eine Steuerung, kein Inhalt: klein, rechts, in einer
   Zeile. Oben und unten dieselbe. */
.blaettern { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
             justify-content: flex-end; font-size: 12px; color: var(--grau);
             margin: 0 0 .7rem; }
.blaettern .knopf {
  padding: 5px 10px;
  font-size: 10px;
  letter-spacing: .12em;
}

/* Das Sprungfeld. Bei vierundsiebzig Seiten ist es der Unterschied
   zwischen einem Klick und dreiundsiebzig. */
.blaettern-sprung {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0 .3rem;
}

.blaettern-sprung label {
  color: var(--grau);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.blaettern-sprung input[type=number] {
  width: 3.4rem;
  padding: 4px 6px;
  font-size: 12px;
  text-align: center;
}

/* --- Kundenkarte, Notizen, Zeilenaktionen --- */

.karte--naechstes { border-left: 3px solid var(--gold); }
.karte--rot { border-left: 3px solid var(--rot); }
.naechstes-zeile { font-size: 16px; margin: 0 0 .4rem; }
.naechstes-nah { color: var(--rot); }

.zeilen-aktionen { white-space: nowrap; }
.zeilen-aktionen a { margin-right: .8rem; font-size: 13px; }
.zeilen-aktionen a:last-child { margin-right: 0; }

.notizen { list-style: none; margin: 0; padding: 0; }
.notizen li { border-top: 1px solid var(--linie); padding: .8rem 0; }
.notiz-kopf { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); margin-bottom: .3rem; }
.notiz-text { display: block; font-size: 14px; }

/* --- Kopfband der Kundenkarte, 12.09.2026 --- */

.kopfband {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.4rem;
  background: var(--schwarz);
  color: var(--creme);
  border-radius: 6px;
  padding: 1.6rem 1.8rem;
  margin: 0 0 1.8rem;
}

@media (min-width: 900px) {
  .kopfband { grid-template-columns: 112px 1fr auto; align-items: start; }
}

.kopfband-bild {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--gold);
  background: #0B1A3D;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

@media (min-width: 900px) {
  .kopfband-bild { width: 112px; height: 112px; }
}

.kopfband-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kopfband-initialen {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 34px;
  color: var(--gold);
  letter-spacing: .04em;
}

.kopfband-text { min-width: 0; }
.kopfband h1 { color: var(--weiss); margin: 0 0 .3rem; font-size: 32px; line-height: 1.15; }

.kopfband-zeile {
  margin: 0 0 .5rem;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.kopfband-zeile a { color: var(--sand); text-decoration: none; border-bottom: 1px solid rgba(227,217,193,.35); }
.kopfband-zeile a:hover { color: var(--weiss); border-bottom-color: var(--gold); }

.kopfband-nummer {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(194,143,63,.5);
  border-radius: 3px;
  padding: 2px 8px;
}

.kopfband-leise { margin: 0 0 .7rem; font-size: 13px; color: rgba(227,217,193,.72); }
.nie-drin { color: var(--gold); }

.kopfband-bio {
  margin: 0 0 1rem;
  font-size: 14px;
  font-style: italic;
  color: rgba(251,248,241,.9);
  max-width: 62ch;
  line-height: 1.6;
}

/* Abzeichen: klein und still. Sie sind Beleg, keine Dekoration. */
.abzeichenreihe {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0 .5rem .4rem 0;
  vertical-align: middle;
}

/* Groesser seit dem 16.09.2026 — bei 22 Pixeln erkannte man die
   Abzeichen nicht, und ein Abzeichen, das man nicht erkennt, ist
   keins. */
.abzeichen {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  max-width: 34px;
  max-height: 34px;
  opacity: .8;
  transition: opacity .15s ease;
}

.abzeichen:hover { opacity: 1; }

.abzeichen img {
  width: 34px;
  height: 34px;
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
  display: block;
}

.abzeichen-ersatz {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(194,143,63,.4);
  color: var(--gold);
  font-size: 11px;
}

.abzeichen-name {
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--creme);
  background: rgba(0,12,42,.95);
  border: 1px solid rgba(194,143,63,.4);
  border-radius: 3px;
  padding: 3px 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 5;
}

.abzeichen:hover .abzeichen-name { opacity: 1; }

.tagreihe { display: inline-flex; flex-wrap: wrap; gap: .4rem; margin: 0; vertical-align: middle; }

.tagmarke {
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--gold);
  border: 1px solid rgba(194,143,63,.45);
  border-radius: 3px;
  padding: 3px 9px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.tagmarke:hover { background: var(--gold); color: var(--schwarz); }

.kopfband-aktionen { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.kopfband-aktionen .knopf.stiller { background: transparent; color: var(--sand); border: 1px solid rgba(227,217,193,.4); }
.kopfband-aktionen .knopf.stiller:hover { border-color: var(--gold); color: var(--weiss); }
.kopfband-stand { font-size: 11px; color: rgba(227,217,193,.5); letter-spacing: .05em; }

@media (max-width: 899px) {
  .kopfband { grid-template-columns: 72px 1fr; padding: 1.2rem; gap: 1rem; }
  .kopfband-bild { width: 72px; height: 72px; }
  .kopfband h1 { font-size: 24px; }
  .kopfband-aktionen { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* Bild und Marken in der Menschenliste */
.liste-bild {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--linie);
  flex: none;
  background: var(--sand);
}

.liste-initialen {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--linie);
  background: var(--sand);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  flex: none;
}

.chip-tag { background: #F6EEDC; color: #8A6320; }

/* Tastenkürzel-Hinweis */
.kuerzel {
  font-size: 11px;
  color: var(--grau);
  letter-spacing: .06em;
}

.kuerzel kbd {
  font-family: inherit;
  font-size: 10px;
  border: 1px solid var(--linie);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 1px 5px;
  background: var(--weiss);
  color: var(--dunkelblau);
}

/* Die Listenzeile bekommt eine Spalte für das Bild */
.liste a { grid-template-columns: auto 1fr auto; align-items: start; }
.liste a > span:not(.rechts) { min-width: 0; }

@media (max-width: 599px) {
  .liste a { grid-template-columns: auto 1fr; }
  .liste .rechts { grid-column: 2; text-align: left; }
}

/* Mehrere Produkte zusammen wählen */
.wahlliste { list-style: none; margin: 0 0 1.4rem; padding: 0; border-top: 1px solid var(--linie); }
.wahlliste li { border-bottom: 1px solid var(--linie); }

.wahlliste label {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem .3rem;
  margin: 0;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  color: var(--dunkelblau);
}

.wahlliste label:hover { background: var(--weiss); }
.wahlliste input { width: auto; margin: 0; }
.wahl-name { flex: 1; min-width: 0; }
.wahl-dauer { font-size: 12px; color: var(--grau); white-space: nowrap; }

.endtabelle { width: 100%; border-collapse: collapse; }
.endtabelle th { text-align: left; font-weight: 400; padding: .6rem .8rem .6rem 0; vertical-align: top; border-bottom: 1px solid var(--linie); }
.endtabelle td { padding: .5rem 0; border-bottom: 1px solid var(--linie); width: 190px; }

/* Am Bildschirm klebten Ende und Betrag aneinander: die Zellen haben
   keinen seitlichen Innenabstand, also endete das Datumsfeld genau
   dort, wo das Betragsfeld anfing. Zwei Rahmen, die sich beruehren,
   sehen aus wie ein Fehler. */
.endtabelle td + td { padding-left: .9rem; }
.endtabelle input { margin: 0; }

/* Live-Suche: der Trefferbereich wird beim Nachladen kurz ruhiger */
#treffer { transition: opacity .12s ease; }
#treffer.sucht { opacity: .45; }

/* Knopf, der wie ein Link aussieht */
.nurtext {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--dunkelblau);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nurtext:hover { color: var(--gold); }


/* ------------------------------------------------------------------
   Geld, Zeitstrahl, Zettel
   ------------------------------------------------------------------ */

/* Zahlen rechtsbündig und in gleichbreiten Ziffern, damit Spalten stimmen */
td.geld, th.geld, .geld {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Das Wertband unter der Kundenkarte: wo dieser Mensch steht */
/* DAS ZAHLENBAND NIMMT DIE GANZE BREITE — 24.09.2026
   Wanja: „Das wäre ideal, wenn die irgendwie geil aufgeteilt sind und
   nicht so nach links an die Kante rangerutscht, sondern immer
   automatisch zentriert und das Feld ganz einnehmen."
   Jeder Teil bekommt denselben Anteil und steht darin mittig. Ob es
   drei Zahlen sind oder sechs, die Zeile sieht gleich aus. */
.wertband {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem 1rem;
  margin: 0 0 .5rem;
  padding: 1rem 1.6rem;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-top: none;
  border-radius: 0 0 6px 6px;
}

.wertband-teil {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  justify-content: center;
  gap: .5rem;
}

/* Die erste Zahl ist die Antwort auf die häufigste Frage. Sie bleibt am
   linken Rand, damit das Auge einen Anfang hat, und die letzte am
   rechten, damit die Zeile auch ein Ende hat. */
.wertband-teil:first-child  { justify-content: flex-start; }
.wertband-teil:last-of-type { justify-content: flex-end; }

.wertband-zahl {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 26px;
  line-height: 1.2;
  color: var(--dunkelblau);
  font-variant-numeric: tabular-nums;
}

.wertband-geld .wertband-zahl { color: var(--gold); font-size: 30px; }

.wertband-wort {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grau);
}

.wertband-luecke {
  flex-basis: 100%;
  margin-top: .4rem;
  font-size: 12px;
  color: var(--grau);
}

/* Sitzt das Wertband direkt unter dem Kopfband, verschmelzen beide */
.kopfband:has(+ .wertband) { border-radius: 6px 6px 0 0; margin-bottom: 0; }

/* Ältere Browser ohne :has() zeigen einfach zwei getrennte Kästen — auch gut */

/* Betrag direkt in der Zugangstabelle ändern */
.betragform { display: flex; align-items: center; gap: .4rem; margin: 0; justify-content: flex-end; }
.betragform input { width: 88px; margin: 0; padding: 6px 8px; font-size: 13px; text-align: right; }
.endtabelle-geld { display: table-cell; white-space: nowrap; }
.endtabelle-geld input { width: 110px; text-align: right; }
.endtabelle-geld .einheit { margin-left: .4rem; color: var(--grau); font-size: 13px; }
.endtabelle-kopf th { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--grau); }

.liste .rechts-geld {
  display: inline-block;
  font-size: 14px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.kachel--gold { border-color: var(--sand); background: linear-gradient(180deg, #FFFDF7 0%, var(--weiss) 100%); }
.kachel--gold .zahl { color: var(--gold); font-size: 26px; }
.kacheln--geld { margin-bottom: 1.4rem; }


/* ==================================================================
   ABLAUFKURVE — 24.09.2026 neu gebaut
   ==================================================================

   Vorher drei stehende Säulen in einem 160 Pixel hohen Kasten. Eine
   leere Säule wurde trotzdem sechs Prozent hoch gezeichnet, damit sie
   sichtbar blieb, und damit sahen null und eins fast gleich aus. Die
   Zahlen hier sind meist einstellig; ein bildschirmhoher Balken für
   eine einzige Verlängerung ist keine Darstellung, sondern eine
   Übertreibung.

   Jetzt drei liegende Zeilen. Null bekommt keinen Balken, sondern eine
   leere Bahn und eine graue Null. Gold von dunkel nach hell: je näher
   der Termin, desto schwerer wiegt er. Eine Farbe, drei Helligkeiten,
   kein Regenbogen. */

.kurve { list-style: none; margin: .8rem 0 0; padding: 0; }

.kurve-summe {
  margin: 0 0 .2rem;
  font-size: 14px;
  color: var(--dunkelblau);
}

.kurve-summe strong {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--gold);
}

.kurve-zeile {
  display: grid;
  grid-template-columns: 8.5rem 1fr 2.6rem;
  align-items: center;
  gap: 0 1rem;
  padding: .45rem .4rem;
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
}

.kurve-zeile:hover { background: rgba(194, 143, 63, .08); }

.kurve-wort {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grau);
}

/* Die Bahn ist immer da, auch wenn nichts darin steht. Sie zeigt, wie
   viel Platz die Zahl hätte einnehmen können. */
.kurve-bahn {
  height: 8px;
  border-radius: 4px;
  background: rgba(0, 19, 69, .06);
}

.kurve-balken {
  display: block;
  height: 100%;
  min-width: 10px;
  border-radius: 4px;
}

.kurve-balken--30 { background: #8B6520; }
.kurve-balken--60 { background: var(--gold); }
.kurve-balken--90 { background: #E2C68C; }

.kurve-zahl {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  text-align: right;
  color: var(--dunkelblau);
  font-variant-numeric: tabular-nums;
}

.kurve-zahl--null { color: #B9B2A2; }

@media (max-width: 560px) {
  .kurve-zeile { grid-template-columns: 6.5rem 1fr 2.2rem; gap: 0 .6rem; }
}


/* Zeitstrahl: eine Spur, das Neueste oben */
.spur { list-style: none; margin: 1rem 0 0; padding: 0 0 0 1.2rem; border-left: 1px solid var(--linie); }

.spur-jahr {
  margin: 1.4rem 0 .6rem -1.2rem;
  padding-left: 1.2rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px;
  color: var(--grau);
}

.spur-jahr:first-child { margin-top: 0; }

.spur-punkt {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: .8rem;
  align-items: baseline;
  padding: .55rem 0;
  border-bottom: 1px solid #F2EDE0;
}

.spur-punkt::before {
  content: '';
  position: absolute;
  left: -1.2rem;
  top: 1.05rem;
  width: 7px;
  height: 7px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--linie);
}

.spur-start::before  { background: var(--teal); }
.spur-ende::before   { background: var(--grau); }
.spur-kommt::before  { background: var(--gold); }
.spur-kaputt::before { background: var(--rot); }
.spur-notiz::before  { background: var(--sand); }
.spur-zettel::before { background: var(--gold); }
.spur-inhalt::before { background: var(--teal); opacity: .5; }

.spur-datum { font-size: 12px; color: var(--grau); font-variant-numeric: tabular-nums; }
.spur-titel { font-size: 14px; }
.spur-betrag { margin-left: .6rem; color: var(--gold); font-variant-numeric: tabular-nums; }

.spur-art {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grau);
  white-space: nowrap;
}

.spur-zukunft { opacity: .5; }

@media (max-width: 720px) {
  .spur-punkt { grid-template-columns: 52px 1fr; }
  .spur-art { grid-column: 2; }
}


/* Wiedervorlagen */
.zettelliste { list-style: none; margin: 0; padding: 0; }

.zettelliste li {
  padding: .6rem 0;
  border-bottom: 1px solid var(--linie);
}

.zettelliste li:last-child { border-bottom: none; padding-bottom: .2rem; }

.zettel-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .7rem;
  margin: 0;
}

.zettel-datum {
  font-size: 12px;
  color: var(--dunkelblau);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

/* Wann und von wem: dieselbe kleine Schrift, damit die Kopfzeile eine
   Zeile bleibt und nicht drei Größen durcheinander zeigt. */
.zettel-lage,
.zettel-wer {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grau);
}

.zettel-lage--jetzt { color: var(--rot); }

/* Abhaken ganz rechts. Als Teil der Kopfzeile darf es mitumbrechen und
   kann deshalb nicht mehr aus dem Kasten rutschen. */
.zettel-haken { margin: 0 0 0 auto; }

.zettel-text {
  display: block;
  margin: .15rem 0 0;
  font-size: 14px;
  line-height: 1.5;
}

.zettelliste li.erledigt { opacity: .45; }
.zettelliste li.erledigt .zettel-text { text-decoration: line-through; }

.meldung.zettel { border-left: 3px solid var(--gold); background: var(--weiss); }

@media (max-width: 720px) {
  .wertband { gap: 0 1.4rem; padding: .9rem 1.1rem; }
  .wertband-zahl, .wertband-geld .wertband-zahl { font-size: 22px; }
}


/* Paketteile beim Freischalten: bei Palace sind es dreißig */
.teileliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0 1.4rem;
  border-top: 1px solid var(--linie);
  margin-bottom: 1rem;
}

.teileliste .teil {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: 0;
  padding: .5rem .2rem;
  border-bottom: 1px solid var(--linie);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  color: var(--dunkelblau);
}

.teileliste .teil:hover { background: var(--weiss); }
.teileliste .teil input { width: auto; margin: 0; flex: none; }
.teileliste .teil > span:first-of-type { flex: 1; min-width: 0; }
.teileliste .teil .leise { font-size: 12px; white-space: nowrap; }


/* ------------------------------------------------------------------
   Rolle, Programmbilder, Auskunft
   ------------------------------------------------------------------ */

/* Host und Moderator sollen erkennbar sein, ohne zu schreien */
.marker.rolle {
  background: var(--teal);
  color: var(--weiss);
  border-color: var(--teal);
}

.kopfband .marker.rolle { background: var(--gold); border-color: var(--gold); color: var(--schwarz); }

/* Programmbilder — Fotocover, wie die Magazine-Cover der Programmseite */
.programmkopf { display: flex; align-items: center; gap: 1.1rem; margin-bottom: .3rem; }
.programmkopf h1 { margin: 0; }

.programmbild {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--linie);
  flex: none;
}

.programmbild-gross {
  max-width: 320px;
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--linie);
  display: block;
}

.programmbild-klein {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--linie);
  vertical-align: middle;
  margin-right: .5rem;
  flex: none;
}

@media (max-width: 720px) {
  .programmkopf { gap: .8rem; }
  .programmbild { width: 64px; height: 64px; }
}

/* Rohdaten — Meldungen von ThriveCart im Original ansehen */
.rohdaten {
  background: var(--schwarz);
  color: var(--sand);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  padding: 1rem 1.1rem;
  border-radius: 4px;
  overflow-x: auto;
  white-space: pre;
  margin: .4rem 0 0;
  max-height: 32rem;
  overflow-y: auto;
}

.klein { font-size: 12.5px; }

/* netto / brutto an einer Zahl.
   Im Haus wird nur netto gerechnet. Damit trotzdem niemand raten muss,
   welche Zahl er vor sich hat, steht das Wort klein daneben — leise
   genug, um nicht zu stören, deutlich genug, um es zu lesen. */
.einheit {
  font-size: .82em;
  letter-spacing: .06em;
  text-transform: lowercase;
  color: var(--grau);
  font-weight: 400;
}

th .einheit { display: inline-block; }

@media (max-width: 720px) {
  .rohdaten { font-size: 11px; padding: .7rem .8rem; }
}

/* Geldseite — Balken für Monate und Tage */
.balken {
  display: block;
  height: 7px;
  background: rgba(0, 12, 42, .06);
  border-radius: 4px;
  overflow: hidden;
  margin: 3px 0;
}

.balken-teil { display: block; height: 100%; border-radius: 4px; }
.balken-teil--geschrieben { background: var(--dunkelblau); opacity: .35; }
.balken-teil--eingegangen { background: var(--gold); }

.tagbalken {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
  padding: .3rem 0 0;
  border-bottom: 1px solid var(--linie);
  margin-bottom: .9rem;
}

.tagbalken-saeule {
  flex: 1 1 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  min-width: 4px;
}

.tagbalken-fuellung {
  display: block;
  width: 100%;
  background: var(--gold);
  border-radius: 2px 2px 0 0;
  min-height: 0;
}

.tagbalken-saeule:hover .tagbalken-fuellung { background: var(--teal); }

.tabelle tr.jetzt { background: rgba(194, 143, 63, .07); }

@media (max-width: 720px) {
  .tagbalken { height: 84px; gap: 2px; }
}


/* ------------------------------------------------------------------
   Kundenkarte: zwei Spalten
   ------------------------------------------------------------------
   Links, was man liest und tut: Programme, Notizen, Zugänge, Geld.
   Rechts, was man nachschlägt: Stammdaten, Wiedervorlage, ActiveCampaign,
   Verlauf. Unter 1100px steht wieder alles untereinander, Hauptspalte
   zuerst — auf dem Telefon ist die Seitenspalte das Nachschlagewerk.
   ------------------------------------------------------------------ */

.kundenraster {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  /* Derselbe Abstand wie zwischen zwei Kästen untereinander. Sonst
     sieht man die Ordnung nicht, man sieht nur Zufall. */
  gap: 0 .7rem;
  align-items: start;
}

.kunde-seite { position: sticky; top: 1.2rem; }

@media (max-width: 1099px) {
  .kundenraster { grid-template-columns: 1fr; }
  .kunde-seite  { position: static; }
}

/* Karten, die von Natur aus lang sind: eine feste Höhe und innen scrollen.
   Die Kopfzeile der Tabelle bleibt dabei stehen, sonst weiß nach zwanzig
   Zeilen niemand mehr, welche Spalte was ist. */
.karte-scroll {
  max-height: 26rem;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid var(--linie);
  border-radius: 4px;
}
.karte-scroll table { margin: 0; }
.karte-scroll thead th {
  position: sticky;
  top: 0;
  background: var(--weiss);
  box-shadow: inset 0 -1px 0 var(--linie);
  z-index: 1;
}

/* Zwischenüberschrift innerhalb einer Karte */
.blockkopf {
  margin: 1.6rem 0 .6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linie);
}
.karte .blockkopf:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }

/* Rechnungen: goldener Grund, damit sie sich von Programmen unterscheiden */
.chip-beleg {
  background: #F6EEDC;
  color: #8A6320;
  border: 1px solid #E0CFA6;
}
.chip-beleg strong { margin-left: .4rem; }

/* Aufklappbare Karte: die Zahl hinter dem Titel soll leiser sein */
details.karte > summary strong { font-weight: 600; }

/* Der Zeitstrahl ist keine Tabelle, braucht innen aber denselben Rahmen */
.spur-huelle { padding: .2rem 1rem; }
.spur-huelle .spur { margin: .6rem 0; }


/* Herkunft eines Programms: ThriveCart, Lexoffice, DigiMember, Mighty.
   Drei Systeme wussten bisher jedes für sich, was ein Mensch hat. Hier
   steht an jeder Zeile, woher die Zeile kommt — leise, aber lesbar. */
.quellenreihe { display: inline-block; margin-top: .25rem; }
.quelle {
  display: inline-block;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grau);
  border: 1px solid var(--linie);
  border-radius: 3px;
  padding: 1px 6px;
  margin: 0 .3rem .2rem 0;
}
.quelle--mighty     { color: #001345; border-color: #E3D9C1; }
.quelle--thrivecart { color: #8A6320; border-color: #E0CFA6; }
.quelle--digimember { color: var(--grau); }

.programmtabelle td { vertical-align: top; }
.programmtabelle td strong { font-size: 15px; }

/* Baumpflege: Kunden der Vorgängertätigkeit, die es weiter gibt. Umsatz der
   GmbH, aber kein Mentoring — sie sollen erkennbar sein, ohne zu stören. */
.marker.baum { background: #EAF1E6; color: #3F5B33; }

/* Dubletten — eine Seite überfliegen, einmal bestätigen.
   Der Balken bleibt unten stehen, damit der Knopf erreichbar ist, egal
   wie weit man gelesen hat. Abgehakte Gruppen treten zurück, ohne zu
   verschwinden: man soll sehen, was man gerade nicht tut. */

/* Kopfzeile einer Gruppe: Schalter links, Name und Geld daneben. */
.dubgruppe .blockkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem 1.2rem;
  margin: 0 0 .8rem;
  padding-top: 0;
  border-top: none;
}

.dubschalter {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  cursor: pointer;
  white-space: nowrap;
}

.dubschalter input { width: 1.05rem; height: 1.05rem; accent-color: var(--gold); }

.dubgruppe { transition: opacity .15s ease; }

/* 25.09.2026: war .42 und sah damit aus wie „geht nicht". Eine nicht
   vorgehakte Gruppe ist aber nur ein Vorschlag mit Vorbehalt: Haken bei
   „zusammenführen" setzen, dann wird sie normal. */
.dubgruppe--aus { opacity: .72; }

.dubgruppe--aus .dubschalter { color: var(--grau); }

.dubbalken {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1rem 1.4rem;
  background: var(--schwarz);
  color: #fff;
  border-radius: 6px;
  box-shadow: 0 -6px 24px rgba(0, 19, 69, .18);
}

.dubbalken-text { font-size: 13px; letter-spacing: .04em; }

.dubbalken-text strong { font-size: 17px; }

.dubbalken-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; }

@media (max-width: 620px) {
  .dubbalken { flex-direction: column; align-items: stretch; text-align: center; }
  .dubbalken-knoepfe { justify-content: center; }
}

/* Rechnungsempfänger von Hand zuordnen — Feld und Knopf in einer Zeile,
   damit die Tabellenzeile nicht auseinanderfällt. */
.rehand { display: flex; gap: .5rem; align-items: center; }
.rehand input { margin: 0; font-size: 13px; padding: 8px 10px; }
.rehand button { padding: 8px 14px; font-size: 10px; white-space: nowrap; }

/* Rechnungsanschrift unter dem Kopfband. Leise, aber da — sie ist das
   Erste, was man braucht, wenn jemand anruft oder etwas zurückgeht. */
.anschriftzeile {
  margin: -.4rem 0 1.2rem;
  font-size: 13px;
  color: var(--grau);
}

.anschriftzeile-wort {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-right: .6rem;
}

/* Offener Betrag im Wertband: rot, weil er eine Handlung verlangt. */
.wertband-offen .wertband-zahl { color: var(--rot); }

/* „Mehr zeigen" unter einer gekürzten Liste. */
.mehrzeile {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0 0;
  flex-wrap: wrap;
}

.mehrzeile button { padding: 9px 18px; font-size: 10px; }

/* Firmenkunde ohne Teilnehmer: eine Rechnung, kein Programm. */
.marker.firma { background: #EEF0F6; color: #3C4763; }

/* Die Ampel auf der Übersicht. Grün ist absichtlich nur ein Punkt:
   ein Band, das jeden Tag grün leuchtet, sieht man nach einer Woche
   nicht mehr — und dann auch das rote nicht. */
.ampel-gruen { color: #2E7D5B; font-size: 1.1em; line-height: 1; }


/* Gesperrte Menschen ------------------------------------------------
   Eine Sperre in einer Reihe kleiner Schildchen uebersieht man. Wer
   gesperrt ist, darf nichts bekommen, nichts kaufen und nicht
   angeschrieben werden — das gehoert gross und rot unter den Namen,
   und der Knopf zum Freischalten gehoert weg. */

.kopfband.gesperrt { box-shadow: 0 0 0 3px #DA0000; }

.sperrband {
  background: #DA0000;
  color: #FFFFFF;
  border-radius: 4px;
  padding: .75rem 1rem .85rem;
  margin: 0 0 .9rem;
}

.sperrband-titel {
  display: block;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0 0 .35rem;
}

.sperrband p {
  margin: .2rem 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #FFFFFF;
}

.sperrband strong { color: #FFFFFF; font-weight: 700; }

.kein-zugang {
  display: inline-block;
  border: 1px solid #DA0000;
  background: rgba(218, 0, 0, .08);
  color: #DA0000;
  border-radius: 4px;
  padding: 15px 20px;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}


/* ===================================================================
   Die Brille
   ===================================================================
   Eine Gruppe, nicht ueber die Breite verteilt: Wort und Namen stehen
   beieinander. Abgesetzt ist sie hell und ruhig, aufgesetzt golden und
   unuebersehbar.

   Seit dem 16.09.2026 rechts statt links. Wanjas Begruendung, und sie
   ist richtig: „Seas of Love® Register" links ist eine Marke und will
   fuer sich stehen. Blick und Offen sind Werkzeuge — sie gehoeren zu
   „Abmelden" auf die rechte Seite, in dieselbe Flucht. */

.brille {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .7rem;
  align-items: center;
  justify-content: flex-end;
  padding: .55rem 2rem;
  background: #f6f2e9;
  color: #8a7f6a;
  border-bottom: 1px solid #e6ded0;
  font-family: Montserrat, system-ui, -apple-system, sans-serif;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.brille-wort { font-weight: 600; }

.brille-wahl {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .3rem;
  padding: .15rem;
  border: 1px solid #e0d6c4;
  border-radius: 999px;
  background: #fffdf8;
}

.brille-wahl a {
  display: inline-block;
  padding: .25rem .8rem;
  border-radius: 999px;
  color: #8a7f6a;
  text-decoration: none;
  letter-spacing: 1.6px;
  transition: background .15s ease, color .15s ease;
}

.brille-wahl a:hover { color: var(--gold, #C28F3F); }

.brille-wahl a.an {
  background: var(--schwarz, #000C2A);
  color: var(--creme, #E3D9C1);
  font-weight: 600;
}

/* Aufgesetzt: Gold, weiss, unuebersehbar. */

.brille--auf {
  background: linear-gradient(90deg, #C28F3F 0%, #d6a75a 55%, #C28F3F 100%);
  color: #FFFFFF;
  border-bottom-color: #a97c34;
}

.brille--auf .brille-wort { color: #FFFFFF; letter-spacing: 2px; }

.brille--auf .brille-leise {
  color: rgba(255, 255, 255, .85);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}

.brille--auf .brille-wahl {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .45);
}

.brille--auf .brille-wahl a { color: #FFFFFF; }
.brille--auf .brille-wahl a:hover { color: #FFFFFF; background: rgba(255,255,255,.2); }
.brille--auf .brille-wahl a.an { background: #FFFFFF; color: #a97c34; }

@media (max-width: 600px) {
  .brille { padding: .55rem 1rem; }
}


/* ===================================================================
   Aufgaben auf der Uebersicht
   =================================================================== */

.aufgabe {
  padding: .9rem 0;
  border-top: 1px solid #f0eade;
}

.aufgabe:first-of-type { border-top: none; padding-top: 0; }

.aufgabe-kopf {
  display: flex;
  gap: .7rem;
  align-items: baseline;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.aufgabe-zahl {
  font-family: Catchy, Georgia, serif;
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--gold, #C28F3F);
  line-height: 1;
}


/* ===================================================================
   Auf wessen Tisch was liegt
   ===================================================================
   Ein Block je Mensch statt einer Tabellenzeile je Aufgabe: so sieht
   man auf einen Blick, wie voll ein Tisch ist. */

.tische {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1rem;
  margin: 1.2rem 0 0;
}

.tisch {
  display: flex;
  gap: .9rem;
  padding: 1rem 1.1rem;
  border: 1px solid #e6ded0;
  border-radius: 6px;
  background: #fffdf8;
}

.tisch-kreis {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gold, #C28F3F);
  color: var(--gold, #C28F3F);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Catchy, Georgia, serif;
  font-size: 17px;
  letter-spacing: .5px;
}

.tisch-inhalt { min-width: 0; flex: 1; }

.tisch-name {
  margin: 0 0 .1rem;
  font-size: 1.05rem;
  font-weight: 600;
  display: flex;
  gap: .6rem;
  align-items: baseline;
  flex-wrap: wrap;
}

.tisch-sehen {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold, #C28F3F);
  border: 1px solid var(--gold, #C28F3F);
  border-radius: 999px;
  padding: .2rem .7rem;
  white-space: nowrap;
}

.tisch-sehen:hover { background: var(--gold, #C28F3F); color: #FFFFFF; }

.tisch-liste { list-style: none; margin: .6rem 0 0; padding: 0; }

.tisch-liste li {
  display: flex;
  gap: .7rem;
  align-items: baseline;
  padding: .35rem 0;
  border-top: 1px solid #f3eee2;
  font-size: 14px;
}

.tisch-liste li:first-child { border-top: none; }
.tisch-liste a { text-decoration: none; }
.tisch-liste a:hover { text-decoration: underline; }

.tisch-zahl {
  margin-left: auto;
  font-family: Catchy, Georgia, serif;
  font-size: 1.25rem;
  color: var(--gold, #C28F3F);
  line-height: 1;
}

.tisch-zahl.still { color: #b9b0a0; }

@media (max-width: 480px) {
  .tisch { flex-direction: column; }
}


/* ===================================================================
   Cockpit — Ziel, Geld, Menschen
   =================================================================== */

.kz-ueber {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #a1967f;
  margin: 0 0 .2rem;
  font-weight: 600;
}

/* --- Das Ziel --- */

.kz-ziel { background: linear-gradient(180deg, #fffdf8 0%, #fdf8ee 100%); }

.kz-balken {
  height: 14px;
  border-radius: 999px;
  background: #ece4d4;
  overflow: hidden;
  margin: 1.1rem 0 .7rem;
}

.kz-balken-voll {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #C28F3F 0%, #d6a75a 100%);
  transition: width .6s ease;
}

.kz-balken-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: baseline;
  margin: 0;
}

.kz-balken-zeile strong {
  font-family: Catchy, Georgia, serif;
  font-size: 1.9rem;
  font-weight: 400;
  color: var(--gold, #C28F3F);
  line-height: 1;
}

.kz-anteil {
  margin-left: auto;
  font-family: Catchy, Georgia, serif;
  font-size: 1.5rem;
  color: #a1967f;
}

.kz-satz { margin: .8rem 0 0; font-size: 14px; line-height: 1.55; }

/* --- Zahlenfelder --- */

/* Sieben Kacheln nebeneinander gehen rechnerisch auf und sehen
   trotzdem gequetscht aus: eine einzige lange Beschriftung bricht um,
   waehrend die anderen einzeilig bleiben, und schon steht die Reihe
   schief. Also mehr Mindestbreite — dann bricht lieber die REIHE um
   als der Text. */
.kz-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: .7rem;
  margin: 1.1rem 0;
}

.kz-feld {
  display: block;
  padding: .85rem 1rem;
  border: 1px solid #ece4d4;
  border-radius: 6px;
  background: #fffdf8;
  text-decoration: none;
  color: inherit;
}

a.kz-feld:hover { border-color: var(--gold, #C28F3F); }

.kz-zahl {
  display: block;
  font-family: Catchy, Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--dunkelblau, #001345);
}

.kz-feld--gross .kz-zahl { font-size: 2rem; color: var(--gold, #C28F3F); }

.kz-wort {
  display: block;
  margin-top: .25rem;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #a1967f;
}

/* --- Die Kurve --- */

.kz-kurve {
  display: block;
  width: 100%;
  height: 130px;
  margin: .4rem 0 0;
  overflow: visible;
}

.kz-kurve-fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem;
  margin: .3rem 0 .9rem;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #a1967f;
}

.kz-kurve-fuss .kz-spitze { color: var(--gold, #C28F3F); font-weight: 600; }

@media (max-width: 600px) {
  .kz-balken-zeile strong { font-size: 1.5rem; }
  .kz-feld--gross .kz-zahl { font-size: 1.6rem; }
  .kz-kurve { height: 100px; }
}


/* --- Was ihr gebaut habt -------------------------------------------
   Dunkel und golden zwischen den hellen Karten: das ist die Stelle,
   an der die Seite nicht fragt, sondern feststellt. */

.kz-stolz {
  background: var(--fastschwarz, #000C2A);
  color: var(--creme, #E3D9C1);
  border-radius: 6px;
  padding: 1.5rem 1.6rem 1.3rem;
  margin: 0 0 1.4rem;
}

.kz-stolz-ueber {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(227, 217, 193, .6);
  margin: 0 0 1rem;
  font-weight: 600;
}

.kz-stolz-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.2rem;
}

.kz-stolz-zahl {
  display: block;
  font-family: Catchy, Georgia, serif;
  font-size: 2.2rem;
  line-height: 1.05;
  color: var(--gold, #C28F3F);
}

.kz-stolz-wort {
  display: block;
  margin-top: .3rem;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(227, 217, 193, .7);
}

.kz-stolz-satz {
  margin: 1.2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(227, 217, 193, .18);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(227, 217, 193, .9);
}

.kz-stolz-satz strong { color: var(--gold, #C28F3F); }

@media (max-width: 600px) {
  .kz-stolz-zahl { font-size: 1.7rem; }
}


/* --- Achse, Aufklapper, Kanaele, Kaeufe ---------------------------- */

.kz-achse {
  position: relative;
  height: 1.1rem;
  margin: .1rem 0 .2rem;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 1.4px;
  color: #a1967f;
}

.kz-achse span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}

.kz-achse span:first-child { transform: none; }

.kz-kurve-fuss { justify-content: space-between; }

.kz-vergleich {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid #ece4d4;
}

.kz-stolz-naechst { border-top: none; padding-top: 0; margin-top: .5rem; }

.kz-feld--rekord { border-color: #e2d3b4; background: #fdf8ee; }

.kz-aufklapp { margin: .6rem 0 0; }

.kz-aufklapp > summary {
  cursor: pointer;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #a1967f;
  padding: .4rem 0;
}

.kz-kanaele { list-style: none; margin: .5rem 0 0; padding: 0; }

.kz-kanaele li {
  display: flex;
  gap: .8rem;
  align-items: baseline;
  padding: .35rem 0;
  border-top: 1px solid #f3eee2;
  font-size: 14px;
}

.kz-kanaele li:first-child { border-top: none; }

.kz-kanal-zahl {
  margin-left: auto;
  font-family: Catchy, Georgia, serif;
  font-size: 1.1rem;
  color: var(--gold, #C28F3F);
}

.kz-kaeufe { list-style: none; margin: 1rem 0 .9rem; padding: 0; }

.kz-kaeufe li {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  align-items: baseline;
  padding: .5rem 0;
  border-top: 1px solid #f3eee2;
  font-size: 14px;
}

.kz-kaeufe li:first-child { border-top: none; }

.kz-kauf-tag {
  flex: none;
  width: 3.4rem;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  color: #a1967f;
}

.kz-kauf-wer { font-weight: 600; }
.kz-kauf-wer a { text-decoration: none; }
.kz-kauf-wer a:hover { text-decoration: underline; }
.kz-kauf-was { color: #6f6754; }

.kz-kauf-geld {
  margin-left: auto;
  font-family: Catchy, Georgia, serif;
  font-size: 1.1rem;
  color: var(--gold, #C28F3F);
  white-space: nowrap;
}

/* Die Navigation bleibt oben stehen — sie ist die Abkuerzung zu allem. */

/* Kopf, Brille und Band kleben gemeinsam, nicht jedes fuer sich.
   Vorher hatte jedes seinen eigenen Abstand von oben — 0, 3.1rem,
   5.6rem — und die mussten zur Hoehe der jeweils darueberliegenden
   Leiste passen. Taten sie nicht: beim Scrollen rutschte das Band
   unter die Brille. Ein Stapel, der als Ganzes klebt, braucht keine
   solchen Zahlen und geht auch nicht kaputt, wenn eine Leiste einmal
   hoeher wird. */
.kopfstapel {
  position: sticky;
  top: 0;
  z-index: 40;
}

@media (max-width: 700px) {
  .kopfstapel { position: static; }
}


/* Zuletzt geschehen: zugeklappt, in voller Breite, unauffaellig. */

.kz-verlauf > summary {
  cursor: pointer;
  list-style: none;
}

.kz-verlauf > summary::-webkit-details-marker { display: none; }

.kz-verlauf > summary {
  display: flex;
  align-items: baseline;
  gap: .8rem;
}

.kz-verlauf > summary h2 {
  margin: 0;
  font-size: 1.3rem;
  text-transform: none;
  letter-spacing: 0;
}

.kz-verlauf > summary::after {
  content: "aufklappen";
  margin-left: auto;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #a1967f;
}

.kz-verlauf[open] { padding-bottom: 1.2rem; }
.kz-verlauf .verlauf { margin-top: 1.1rem; }

.kz-verlauf[open] > summary::after { content: " zuklappen"; }


/* Die Spalten der Kurve: unsichtbar, aber sie nehmen die Maus an. */

.kz-spalte { cursor: crosshair; }
.kz-spalte:hover { fill: rgba(194, 143, 63, .08); }

/* Das Stolz-Band traegt jetzt sechs Zahlen — drei je Reihe, damit es
   ruhig bleibt und nicht wie eine Tabelle wirkt. */

.kz-stolz-reihe { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); row-gap: 1.4rem; }
.kz-stolz-zahl { font-size: 1.9rem; }


/* ------------------------------------------------------------------
   Das Aufgabenband
   ------------------------------------------------------------------

   Steht auf jeder Seite unter der Brille. Der leere Zustand ist
   Absicht und muss leise aussehen: ein Band, in dem immer etwas steht,
   liest nach einer Woche niemand mehr. Deshalb zwei Zustaende — still
   und wach — und nur einer davon zieht den Blick. */

.band {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .6rem;
  align-items: center;
  justify-content: flex-end;
  padding: .5rem 2rem;
  background: #fbf8f1;
  border-bottom: 1px solid #e6ded0;
  font-family: Montserrat, system-ui, -apple-system, sans-serif;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.band--still { background: #fdfbf7; }

.band-wort {
  font-weight: 600;
  color: #8a7f6a;
  margin-right: .2rem;
}

.band-leer {
  color: #b3a891;
  letter-spacing: 1.4px;
}

.band-punkt {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .28rem .6rem .28rem .7rem;
  border: 1px solid #e0d6c4;
  border-radius: 999px;
  background: #fff;
  color: var(--dunkelblau, #001345);
  text-decoration: none;
  transition: border-color .12s, background .12s;
}

.band-punkt:hover {
  border-color: var(--gold, #C28F3F);
  background: #fffdf8;
}

.band-zahl {
  display: inline-flex;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .3rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--gold, #C28F3F);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0;
  font-weight: 600;
}

/* Laut ist, was schiefgegangen ist oder ueberfaellig. Sonst nichts —
   sonst waere wieder alles gleich wichtig. */
.band-punkt--laut { border-color: #e6b8b8; background: #fff8f8; }
.band-punkt--laut .band-zahl { background: var(--rot, #DA0000); }

@media (max-width: 700px) {
  .band { padding: .5rem 1rem; }
}


/* Ueberschrift eines Abschnitts auf der Uebersicht, der frueher eine
   eigene Seite war. */
.abschnitt-titel {
  margin: 2.8rem 0 1rem;
  font-size: 13px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #8a7f6a;
  font-family: Montserrat, system-ui, -apple-system, sans-serif;
  font-weight: 600;
}


/* ------------------------------------------------------------------
   Die grossen Vorhaben
   ------------------------------------------------------------------

   Bestaende, die abgearbeitet werden. Eine Zahl, die steht, entmutigt.
   Ein Balken, der waechst, nicht. */

.vorhaben { margin: 0 0 1.6rem; }
.vorhaben:last-child { margin-bottom: 0; }

.vorhaben-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem .8rem;
  margin: 0 0 .5rem;
}

.vorhaben-kopf a {
  font-family: Catchy, Georgia, serif;
  font-size: 19px;
  text-decoration: none;
}

.vorhaben-wer {
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #8a7f6a;
}

.vorhaben-zahl {
  margin-left: auto;
  font-size: 13px;
  color: #6f6555;
  white-space: nowrap;
}

.balken {
  height: 8px;
  border-radius: 999px;
  background: #ece4d5;
  overflow: hidden;
}

.balken span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #97700E 0%, #F0CA60 50%, #AD7F06 100%);
}

.vorhaben-wozu {
  margin: .5rem 0 0;
  font-size: 13px;
  color: #6f6555;
  max-width: 74ch;
}


/* ==================================================================
   Geld — der Arbeitsteil
   ==================================================================
   Die Geldseite war ein Bericht. Jetzt steht oben eine Liste, die man
   leer bekommt, und darunter erst die Zahlen. Das Aussehen folgt dem:
   die Arbeit ist hell und greifbar, das Gewesene ruhig. */

.karte--arbeit { border-left: 3px solid var(--gold); }

.geld-leer {
  margin: .8rem 0 0;
  padding: 1rem 1.2rem;
  background: #f3f8f8;
  border-left: 3px solid var(--teal);
  border-radius: 4px;
  font-size: 14px;
}

.geld-spanne { display: inline-flex; flex-wrap: wrap; gap: .4rem; margin-left: .6rem; }

.geld-spanne a {
  padding: .3rem .6rem;
  border: 1px solid #e6ded0;
  border-radius: 4px;
  text-decoration: none;
  font-size: 12px;
}

.geld-spanne a.an { background: #f6f2e9; border-color: var(--gold); color: #8a6516; }

table.geld-arbeit { width: 100%; }
table.geld-arbeit th.geld-haken, table.geld-arbeit td.geld-haken { width: 2rem; }
table.geld-arbeit td { vertical-align: top; }

.geld-wann {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.geld-zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.geld-fehlt { color: var(--rot); }
.rechts { text-align: right; }

.geld-fertig td { opacity: .55; }
.geld-tat { white-space: nowrap; }

/* Die Zeile unter jedem offenen Eingang: ein Feld für „was hast du
   getan" und der Knopf. Absichtlich eine eigene Zeile — in der Tabelle
   daneben wäre sie zu eng, und was hier hineingeschrieben wird, ist
   später der Beleg dafür, dass geliefert wurde. */
.geld-unterzeile td {
  border-top: none;
  padding-top: 0;
  padding-bottom: .9rem;
}

.geld-fertig-form { display: flex; gap: .5rem; align-items: center; max-width: 44rem; }
.geld-fertig-form input[type=text] { flex: 1; margin: 0; font-size: 13px; padding: 7px 10px; }

.geld-sammel {
  display: flex;
  gap: .8rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 1rem 0 0;
}

.geld-offen-summe { margin: .6rem 0 1rem; font-size: 15px; }
.geld-offen-summe strong { color: var(--rot); font-size: 19px; font-variant-numeric: tabular-nums; }

/* Die Trennlinie zwischen Arbeit und Bericht. */
.geld-trenner {
  margin: 2.6rem 0 .6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linie);
}

.versteckt { display: none; }

@media (max-width: 700px) {
  .geld-fertig-form { flex-wrap: wrap; }
  .geld-fertig-form input[type=text] { flex: 1 1 100%; }
}

/* Der Hinweis auf den Mighty-Import, in der Anlegen-Karte. */
.anlegen-oder {
  margin: 0 0 1.2rem;
  padding: .6rem .8rem;
  background: #f6f2e9;
  border-radius: 4px;
  font-size: 13px;
  color: #6f6754;
}


/* ==================================================================
   Aufklappbare Karten — neu am 16.09.2026
   ==================================================================
   Sie sahen misraten aus, und zwar aus drei Gruenden gleichzeitig:
   ein uebrig gebliebener Listenpunkt vor der Ueberschrift, eine
   Ueberschrift ohne den goldenen Strich, den alle anderen h2 haben,
   und ein Inhalt, der beim Aufklappen ohne Abstand an die Zeile
   darueber stiess.
   Jetzt: eigener Pfeil links, Ueberschrift wie ueberall, und beim
   Aufklappen eine feine Linie, die Kopf und Inhalt trennt. */

details.karte.kz-verlauf { padding: 0; }

.kz-verlauf > summary {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1.15rem 1.8rem;
  cursor: pointer;
  list-style: none;
  border-radius: 6px;
}

.kz-verlauf > summary::-webkit-details-marker { display: none; }
.kz-verlauf > summary::marker { content: ""; }
.kz-verlauf > summary:hover { background: #fbf8f1; }

/* Der Pfeil. Dreht sich beim Aufklappen. */
.kz-verlauf > summary::before {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  border-left: 6px solid var(--gold);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  transition: transform .18s ease;
}

.kz-verlauf[open] > summary::before { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .kz-verlauf > summary::before { transition: none; }
}

.kz-verlauf > summary h2 {
  margin: 0;
  padding: 0;
  font-size: 1.3rem;
  text-transform: none;
  letter-spacing: .01em;
}

/* Kein goldener Strich davor: den Platz nimmt hier der Pfeil ein. */
.kz-verlauf > summary h2::before { display: none; }

.kz-verlauf > summary::after {
  content: "aufklappen";
  margin-left: auto;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #a1967f;
}

.kz-verlauf[open] > summary::after { content: "zuklappen"; }

/* Alles nach dem summary ist der Inhalt. */
.kz-verlauf[open] > summary { border-bottom: 1px solid var(--linie); border-radius: 6px 6px 0 0; }
.kz-verlauf > *:not(summary) { margin-left: 1.8rem; margin-right: 1.8rem; }
.kz-verlauf[open] > *:not(summary):first-of-type { margin-top: 1.3rem; }
.kz-verlauf[open] { padding-bottom: 1.4rem; }
.kz-verlauf .tabelle-huelle { margin-left: 0; margin-right: 0; }

@media (max-width: 640px) {
  .kz-verlauf > summary { padding: 1rem 1.1rem; }
  .kz-verlauf > *:not(summary) { margin-left: 1.1rem; margin-right: 1.1rem; }
  .kz-verlauf > summary::after { display: none; }
}


/* Die Datumszeile unter den Tagesbalken. */
.tagbalken-achse {
  display: flex;
  gap: 2px;
  margin: .35rem 0 .9rem;
}

.tagbalken-marke {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 9px;
  letter-spacing: .04em;
  color: #a1967f;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Wochenenden blasser: eine Luecke am Sonntag ist keine Nachricht. */
.tagbalken-saeule--frei .tagbalken-fuellung { opacity: .45; }


/* ==================================================================
   Dashboard — Monat für Monat, Jahr für Jahr, Woher das Geld kommt
   ==================================================================
   Vom 16.09.2026, als die Seite „Geld" abgeschafft wurde. Was davon
   wirklich gebraucht wird, steht jetzt hier: der Überblick, den es
   sonst nirgends gibt — ThriveCart und Lexoffice nebeneinander. */

table.kz-monate { width: 100%; }
table.kz-monate th { white-space: nowrap; }
table.kz-monate td { vertical-align: middle; }
.kz-monate-balken { width: 34%; min-width: 9rem; }
.kz-zahl-klein { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.kz-monate tr.jetzt td { background: #fdfbf5; }

.kz-laeuft {
  margin-left: .45rem;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a1967f;
}

/* Die beiden Balken teilen sich eine Skala. Der obere ist der Anspruch
   (hell, umrissen), der untere das Geld (voll) — so liest man auf
   einen Blick, ob das eine dem anderen gefolgt ist. */
.kz-balken {
  display: block;
  height: 5px;
  background: #f3eee2;
  border-radius: 3px;
  overflow: hidden;
}

.kz-balken + .kz-balken { margin-top: 3px; }

.kz-balken-teil { display: block; height: 100%; border-radius: 3px; }
.kz-balken-teil--geschrieben { background: #d8cbb0; }
.kz-balken-teil--eingegangen { background: var(--gold); }

.kz-legende {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .55rem;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #a1967f;
  font-weight: 500;
}

.kz-punkt {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.kz-punkt--geschrieben { background: #d8cbb0; }
.kz-punkt--eingegangen { background: var(--gold); }


/* Jahr für Jahr: drei große Zahlen nebeneinander, keine Tabelle.
   Es sind drei Werte — eine Tabelle dafür wäre Aufwand ohne Gewinn. */
.kz-jahre {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1.2rem;
  margin: 1.1rem 0 .3rem;
}

.kz-jahr { border-left: 2px solid #f0e9dc; padding-left: .9rem; }
.kz-jahr--jetzt { border-left-color: var(--gold); }

.kz-jahr-zahl {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--dunkelblau);
}

.kz-jahr--jetzt .kz-jahr-zahl { color: var(--gold); }

.kz-jahr-wort {
  display: block;
  margin-top: .25rem;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8a7f6a;
}


/* Woher das Geld kommt: Ring links, Aufschlüsselung rechts. */
.kz-quellen {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 1.6rem 2.2rem;
  align-items: center;
  margin: 1.2rem 0 0;
}

.kz-ring-huelle { margin: 0; }
.kz-ring { width: 100%; height: auto; display: block; }

/* Kein Drehen beim Zeichnen: der Versatz in stroke-dashoffset beginnt
   bei 25 und laeuft rueckwaerts, damit oben angefangen wird. */
.kz-ring circle { transform: rotate(-90deg); transform-origin: 50% 50%; }

.kz-ring-zahl {
  text-anchor: middle;
  font-family: 'Cormorant Garamond', serif;
  font-size: 4.6px;
  fill: var(--dunkelblau);
}

.kz-ring-wort {
  text-anchor: middle;
  font-family: Montserrat, system-ui, sans-serif;
  /* Versalien mit Sperrung sind die Hausschrift fuer Beschriftungen —
     aber bei zwei Pixeln Hoehe werden daraus graue Streifen. Hier
     also normale Schreibweise, etwas groesser, ungesperrt. Die Regel
     dahinter: eine Formensprache gilt, bis sie unleserlich wird. */
  font-size: 2.1px;
  letter-spacing: 0;
  font-weight: 500;
  fill: #8a7f6a;
}

.kz-quellen-liste { display: grid; gap: 1.2rem; }

.kz-quelle { display: flex; gap: .7rem; align-items: flex-start; }
.kz-quelle .kz-punkt { margin-top: .35rem; }
.kz-quelle-text { min-width: 0; }

.kz-quelle-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--dunkelblau);
}

.kz-quelle-anteil {
  margin-left: .5rem;
  font-size: 11px;
  letter-spacing: .1em;
  color: #a1967f;
  font-weight: 500;
}

.kz-quelle-geld {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.45rem;
  line-height: 1.25;
  color: var(--dunkelblau);
  font-variant-numeric: tabular-nums;
}

.kz-quelle-leise {
  display: block;
  font-size: 12px;
  line-height: 1.55;
  color: #8a7f6a;
}

.kz-quellen-satz {
  margin: 1.4rem 0 0;
  padding: .85rem 1.1rem;
  background: #f6f2e9;
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .kz-quellen { grid-template-columns: 1fr; }
  .kz-ring-huelle { max-width: 13rem; margin: 0 auto; }
  .kz-monate-balken { display: none; }
}


/* Die Huelle um die Kurve. Sie traegt den Punkt, der nicht mitgezerrt
   werden darf — das SVG darunter streckt sich absichtlich. */
.kz-kurve-huelle { position: relative; line-height: 0; }

.kz-kurve-punkt {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  pointer-events: auto;
  cursor: help;
  box-shadow: 0 0 0 2px #fff;
}


/* ==================================================================
   Die Werkstatt
   ==================================================================
   Die Karten hier hatten bis zum 16.09.2026 GAR KEIN eigenes Aussehen:
   .werkzeug, .was, .zahlen und die Zuständigkeitszeile .wer waren im
   Stilblatt nicht vorhanden. Deshalb sahen sie aus wie hingeworfen —
   die Zahlen mitten im Fließtext, die Knöpfe aneinandergeklebt, die
   Zuständigkeit als graue Zeile mittendrin.
   Jetzt: Zuständigkeit als Kopfzeile, Erklärung als Fließtext, Zahlen
   in einem eigenen ruhigen Block, Knöpfe unten in einer Reihe. */

.werkzeuge-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem;
  align-items: start;
  margin: 0 0 1.4rem;
}

.karte.werkzeug {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  height: 100%;
}

/* Wer zuständig ist, steht oben — nicht mittendrin. */
.karte.werkzeug > .wer {
  order: -1;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #a1967f;
  font-weight: 600;
}

.karte.werkzeug > h2 {
  margin: 0;
  padding: 0;
  font-size: 1.25rem;
}

.karte.werkzeug > h2::before { display: none; }

.karte.werkzeug .was {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: #4a4a52;
}

/* Die Zahlen: eigener Block, damit sie nicht im Satz untergehen. */
.karte.werkzeug .zahlen {
  margin: .25rem 0 0;
  padding: .7rem .85rem;
  background: #faf7f0;
  border-radius: 5px;
  font-size: 13px;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

.karte.werkzeug .zahlen strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  color: var(--dunkelblau);
  font-weight: 400;
}

.karte.werkzeug .zahlen .einheit,
.karte.werkzeug .zahlen .leise { font-size: 11px; color: #a1967f; }
.karte.werkzeug .zahlen .dringend { color: var(--rot); }

/* Die Knopfreihe steht immer ganz unten, auch wenn die Karte daneben
   mehr Text hat — sonst tanzen die Knöpfe auf verschiedenen Hoehen. */
.karte.werkzeug > p:last-child { margin: auto 0 0; padding-top: .35rem; }

.karte.werkzeug > p:last-child .knopf,
.karte.werkzeug > p:last-child button {
  margin: .25rem .4rem 0 0;
}

.karte.werkzeug > p:last-child .knopf + .knopf { margin-left: 0; }

/* Die Verzeichniskarten unten: nur Links, keine Zahlen. */
.karte.werkzeug > p a { word-break: break-word; }

@media (max-width: 640px) {
  .werkzeuge-raster { grid-template-columns: 1fr; }
}


/* Die Rechnungsanschrift auf der blauen Karte. */
.kopfband-anschrift {
  margin: 0 0 .7rem;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(227, 217, 193, .85);
}

.kopfband-anschrift-wort {
  display: block;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(227, 217, 193, .55);
  margin-bottom: .1rem;
}

.kopfband-anschrift-teil { margin-left: .8rem; }
.kopfband-anschrift a { color: var(--sand); }


/* „In der App" auf der Kundenkarte: Arten, Monatsbild, letzte Schritte. */
.app-arten { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 0; }

.app-art {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .65rem;
  background: #f6f2e9;
  border-radius: 999px;
  font-size: 12px;
  color: #6f6754;
}

.app-art-zahl {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--dunkelblau);
}

.app-monate {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 70px;
  margin: 1.1rem 0 .3rem;
}

.app-monat {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  height: 100%;
  cursor: help;
}

.app-monat-saeule { background: var(--teal); border-radius: 2px 2px 0 0; }

.app-monat-wort {
  margin-top: .25rem;
  text-align: center;
  font-size: 9px;
  color: #a1967f;
  font-variant-numeric: tabular-nums;
}


/* Die Blase beim Überfahren der Kurve, samt senkrechter Linie.
   Ersetzt die <title>-Tooltips: die kamen erst nach einer Sekunde
   Stillhalten und verschwanden bei jeder Bewegung. */
.kz-strich {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(138, 127, 106, .45);
  pointer-events: none;
}

.kz-blase {
  position: absolute;
  transform: translate(-50%, calc(-100% - 14px));
  white-space: nowrap;
  background: var(--schwarz, #000C2A);
  color: var(--sand, #E3D9C1);
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 11.5px;
  line-height: 1.4;
  letter-spacing: .02em;
  padding: 6px 10px;
  border-radius: 4px;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 12, 42, .18);
  z-index: 2;
}

.kz-blase::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--schwarz, #000C2A);
}

.kz-blase--links  { transform: translate(-8px, calc(-100% - 14px)); }
.kz-blase--links::after  { left: 14px; }
.kz-blase--rechts { transform: translate(calc(-100% + 8px), calc(-100% - 14px)); }
.kz-blase--rechts::after { left: auto; right: 9px; }

.kz-blase[hidden], .kz-strich[hidden] { display: none; }


/* ==================================================================
   Der Kopf auf der Breite der Seite — 16.09.2026
   ==================================================================
   Die drei Kopfzeilen (die blaue Leiste, die Brille, das Offen-Band)
   liefen bisher von Fensterkante zu Fensterkante, während der Inhalt
   darunter in seiner Spalte steht. Dadurch stand „Seas of Love®
   Register" weiter links als alles andere auf der Seite und „Abmelden"
   weiter rechts. Jetzt teilen sich alle drei dieselbe Flucht wie der
   Inhalt: derselbe Innenabstand, dieselbe Höchstbreite. */

.kopf,
.brille,
.band {
  padding-left: max(2rem, calc((100% - 1600px) / 2 + 2rem));
  padding-right: max(2rem, calc((100% - 1600px) / 2 + 2rem));
}

/* Die Reiter: mehr Luft und etwas größer, damit sie als Reiter zu
   erkennen sind und nicht als verstreute Wörter. */
.kopf nav { gap: 3rem; }

.kopf nav a {
  font-size: 12px;
  letter-spacing: .2em;
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
}

.kopf nav a.aktiv {
  border-bottom-color: var(--gold);
  opacity: 1;
}

@media (max-width: 1100px) {
  .kopf nav { gap: 1.9rem; }
}

@media (max-width: 640px) {
  .kopf, .brille, .band { padding-left: 1rem; padding-right: 1rem; }
  .kopf nav { gap: 1.2rem; }
  .kopf nav a { font-size: 11px; letter-spacing: .14em; }
}


/* ==================================================================
   Zwei Korrekturen am Kopfband — 16.09.2026, zweiter Anlauf
   ==================================================================

   ABZEICHEN SCHRUMPFTEN.
   Sie standen bei Wanja kleiner da als bei Melanie, bei gleicher
   Regel. Der Grund ist Flexbox: in einer vollen Zeile darf sich jedes
   Element verkleinern, und width/max-width halten das nicht auf — nur
   flex-shrink tut das. Wanjas Zeile ist voller, also schrumpften seine.
   Wer viel geleistet hat, bekam die kleineren Abzeichen. */

.abzeichen { flex: 0 0 auto; }
.abzeichen img { flex: 0 0 auto; }

/* DIE KNOPFSPALTE.
   „Zugang geben" stand eingerückt, weil die schmaleren Knöpfe darunter
   die Spalte aufspannten und alle linksbündig hingen — es sah aus, als
   sei der wichtigste Knopf verrutscht. Jetzt sind alle gleich breit und
   beginnen an derselben Kante. „Stand" rutscht ans untere Ende der
   Spalte und nach rechts: es ist eine Fußnote, kein Knopf. */

.kopfband-aktionen {
  align-items: stretch;
  height: 100%;
}

.kopfband-aktionen .knopf { width: 100%; text-align: center; }

.kopfband-stand {
  margin-top: auto;
  padding-top: .6rem;
  text-align: right;
}

@media (max-width: 899px) {
  .kopfband-aktionen { align-items: center; height: auto; }
  .kopfband-aktionen .knopf { width: auto; }
  .kopfband-stand { margin-top: 0; padding-top: 0; text-align: left; }
}

/* Der Hinweis, dass die Suche gelockert wurde. */
.suche-locker {
  display: inline-block;
  margin-top: .3rem;
  padding: .35rem .7rem;
  background: #f6f2e9;
  border-left: 2px solid var(--gold);
  border-radius: 3px;
  color: #6f6754;
}


/* ==================================================================
   DAS REGISTER AM TELEFON — 16.09.2026
   ==================================================================

   Gemessen, nicht geraten: jede Seite wurde in einem 390 Pixel breiten
   Rahmen geladen und danach gefragt, welches Element ueber den rechten
   Rand hinausragt. Zwei Antworten kamen immer wieder, und beide waren
   echte Fehler, keine Geschmacksfrage.

   ERSTENS: DAS MENUE BRACH NICHT UM.
   Es gab dafuer laengst eine Regel — sie setzte white-space: normal.
   Das hilft aber nur bei Text. Das Menue ist ein Flex-Kasten, und ein
   Flex-Kasten bricht erst um, wenn man ihm flex-wrap: wrap sagt. Also
   standen fuenf Eintraege in einer Zeile von 493 Pixeln, und jede Seite
   des Registers liess sich auf dem Telefon seitlich schieben.

   ZWEITENS: DIE KUNDENKARTE WAR BREITER ALS DAS TELEFON.
   638 Pixel auf 390. Auch hier gab es die Regel schon: unter 1099px
   wird aus zwei Spalten eine. Aber "1fr" heisst in einem Raster
   "minmax(auto, 1fr)", und auto laesst sich von seinem Inhalt
   aufspannen. In der Spalte steht eine Tabelle. Die Tabelle war breit,
   also wurde die Spalte breit, also wurde die Seite breit — obwohl die
   Tabellenhuelle eigentlich fuer sich scrollen sollte.

   Merksatz fuer das naechste Mal: ein Raster mit "1fr" kann von seinem
   Inhalt gesprengt werden, eines mit "minmax(0, 1fr)" nicht. Ueberall
   dort, wo eine Tabelle in einer Spalte stehen kann, gehoert die Null
   hinein.
   ------------------------------------------------------------------ */

/* --- Das Menue: fuenf Punkte, eine Zeile ---

   Erster Anlauf war Umbruch — zwei Zeilen Menue. Wanja wollte es
   anders, und er hat recht: fuenf Woerter, die in zwei Zeilen stehen,
   sehen aus wie zwei Menues. Sie passen in eine Zeile, wenn Schrift
   und Sperrung mit der Fensterbreite mitgehen.

   Gerechnet, nicht geraten: die fuenf Woerter haben zusammen 45
   Buchstaben. Bei Schriftgroesse F belegen sie rund 31,5 × F Pixel,
   dazu 45 × Sperrung × F. Mit 2,3vw und .04em bleibt auf jedem Telefon
   von 320 bis 640 Pixeln Luft — und ab 640 greift die Sperrung nicht
   mehr nach unten, weil clamp bei 11px deckelt, der Groesse, die am
   Bildschirm gilt. */

@media (max-width: 640px) {
  .kopf {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Der Markenname und der eigene Name teilen sich die erste Zeile.
     Bei 19 Pixeln Schrift passte das auf einem 393er Telefon nicht —
     „Abmelden" stand halb ueber dem Rand. */
  .kopf .marke { font-size: 16px; }
  .kopf .wer   { font-size: 11px; }

  .kopf nav {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: clamp(.25rem, 1.4vw, 1rem);
  }

  .kopf nav a {
    font-size: clamp(8px, 2.3vw, 11px);
    letter-spacing: .04em;
    white-space: nowrap;
    /* Eine Flaeche, die ein Daumen trifft — acht Pixel Schrift allein
       sind keine. */
    padding: .55rem 0;
  }

  .kopf .wer a { padding: .4rem 0; display: inline-block; }
}

/* Auf den schmalsten Geräten etwas weniger Rand, damit die Menüzeile
   nicht auf acht Pixel Schrift heruntergerechnet werden muss.

   Der eigene Name braucht hier keine eigene Regel: .kopf bricht ohnehin
   um, und mit „Sophie Malik-Grimm" bei 320 Pixeln getestet — die Zeile
   rutscht dann von selbst nach unten. */
@media (max-width: 380px) {
  .kopf { padding-left: .7rem; padding-right: .7rem; }
}


/* --- Raster, in denen Tabellen stehen koennen --- */

@media (max-width: 1099px) {
  .kundenraster { grid-template-columns: minmax(0, 1fr); }
}

/* Die Huelle scrollt selbst — dann darf sie ihre Umgebung auch nicht
   aufspannen. min-width: 0 ist genau das Gegengift zum auto oben. */
.tabelle-huelle {
  max-width: 100%;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}

.karte,
.karte-inhalt,
.kunde-haupt,
.kunde-seite,
.raster > *,
.kundenraster > * { min-width: 0; }


/* --- Was ein Daumen treffen muss --- */

@media (max-width: 640px) {

  /* Auf der Menschen-Liste stehen 52 Haekchen zum Auswaehlen. Mit
     13 Pixeln Kantenlaenge sind sie am Bildschirm eine Zielscheibe,
     am Telefon ein Gluecksspiel. */
  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
  }

  /* Kleine Zahlenfelder ("pro Seite") waren 26 Pixel hoch. */
  input[type="number"] { min-height: 38px; }

  /* Die Nebenlinks im Fuss stehen dicht an dicht in einer Zeile. */
  .fuss a {
    display: inline-block;
    padding: .35rem 0;
  }

  /* Knoepfe: eine Reihe nebeneinander wird auf dem Telefon zu einer
     Reihe untereinander, sonst quetschen sie sich. */
  .knopfreihe { flex-wrap: wrap; }
  .knopfreihe > * { flex: 1 1 auto; }
}


/* --- Der Hinweis, dass eine Tabelle seitlich weitergeht ---
   Am Bildschirm sieht man den Rand der Karte und ahnt es. Auf dem
   Telefon endet die Tabelle einfach, und niemand kommt auf die Idee
   zu wischen. Ein schmaler Schatten am rechten Rand sagt es leise. */

@media (max-width: 720px) {
  .tabelle-huelle {
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(0,19,69,.14), rgba(0,19,69,0)),
      radial-gradient(farthest-side at 100% 50%, rgba(0,19,69,.14), rgba(0,19,69,0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}


/* --- Die Filtermaske auf der Menschen-Liste ---
   Am Bildschirm sitzen die Felder nebeneinander und duerfen so breit
   sein, wie ihr Inhalt es verlangt. Untereinander gestapelt sieht
   dasselbe unruhig aus: ein Feld ist 74 Pixel breit, das naechste 314.
   Auf dem Telefon bekommen deshalb alle dieselbe Breite. */

@media (max-width: 640px) {
  .karte--filter .filterzeile > span,
  .karte--filter .filterzeile > label { flex: 1 1 100%; min-width: 0; }

  .karte--filter .filterzeile select,
  .karte--filter .filterzeile input { width: 100%; }

  .karte--filter button[type="submit"] { width: 100%; }
}


/* --- Lange Wörter, die niemand umbrechen kann ---
   Zwei Stellen sprengten das Telefon, obwohl kein Kasten zu breit war:
   der Dateiname einer Sicherung
   (Seas_of_Love__Host_and_Member_Activity_Report_2026…) und die
   Protokolle der Läufe. Unterstriche sind für den Zeilenumbruch keine
   Gelegenheit, also stand das Wort einfach über den Rand hinaus — und
   die ganze Seite ließ sich schieben.

   „anywhere" statt „break-word": nur das erste erlaubt dem Kasten
   selbst, schmaler zu werden. In der Tabellenhülle wird es wieder
   zurückgenommen, dort sollen die Spalten breit bleiben und scrollen. */

/* ZWEITER ANLAUF, noch am selben Abend.
   Zuerst stand hier „overflow-wrap: anywhere" auf dem ganzen Inhalt.
   Das war die Notbremse gegen zwei lange Woerter — und sie hat als
   Nebenwirkung erlaubt, JEDES Wort an jeder Stelle zu brechen. Genau
   daraus wurde auf „Zugang geben" die Buchstabensaeule „A B U N D A N
   C E"; in den Menschen-Zeilen haette es frueher oder spaeter eine
   lange Adresse mitten im Wort zerlegt.

   Jetzt umgekehrt: „break-word" ist die Regel — es bricht nur ein Wort,
   das allein nicht in die Zeile passt, und laesst die Breite der
   Kaesten in Ruhe. „anywhere" steht nur noch dort, wo ein Kasten selbst
   schmaler werden MUSS: beim Dateinamen einer Sicherung und beim
   Protokoll. */

@media (max-width: 720px) {
  .inhalt { overflow-wrap: break-word; }
  .tabelle-huelle { overflow-wrap: normal; }

  .kz-kauf-was,
  .protokoll,
  code, kbd, samp { overflow-wrap: anywhere; }

  /* Ein Protokoll mit 33.000 Pixeln langen Zeilen ist am Telefon kein
     Protokoll mehr. Es darf umbrechen. */
  .protokoll {
    white-space: pre-wrap;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* Die Chips auf den Listen ("True Love Business: 2026-08-25") tragen
   nowrap, damit sie am Bildschirm nicht mitten im Programmnamen
   brechen. Auf 390 Pixeln passt ein solcher Chip nicht mehr in eine
   Zeile — dort ist ein Umbruch das kleinere Übel. */
@media (max-width: 720px) {
  .chip { white-space: normal; }
}


/* ==================================================================
   Der Kopf zwischen Telefon und Bildschirm — 16.09.2026, Nachtrag
   ==================================================================

   Die Messung bei 768 Pixeln hat einen Bereich aufgedeckt, den nie
   jemand angesehen hatte: das Tablet und das halb geöffnete
   Browserfenster. Unter 640px brach der Kopf um, ab 900px passte er
   sowieso — dazwischen stand das Menü in einer Zeile von 885 Pixeln,
   und JEDE Seite des Registers ließ sich seitlich schieben.

   Der Kopf bekommt seine zweizeilige Form deshalb schon ab 1200px:
   Marke und Name in der ersten Zeile, das Menü darunter über die volle
   Breite. Alles andere — Ränder, Kartenabstände, Schriftgrößen —
   bleibt davon unberührt und wechselt weiterhin erst bei 640px.

   Warum 1200 und nicht 900: der Markenname braucht 245 Pixel, das Menü
   rund 710, der Name rechts 120 — zusammen mit den Abständen sind das
   etwa 1130. Darunter musste bisher etwas nachgeben, und nachgegeben
   hat der Markenname: „Seas of Love®" stand über „Register". Er bricht
   jetzt nicht mehr um; stattdessen wechselt der ganze Kopf rechtzeitig
   in die zweizeilige Form.
   ------------------------------------------------------------------ */

.kopf .marke { white-space: nowrap; }

@media (max-width: 1200px) {
  .kopf {
    height: auto;
    min-height: 62px;
    flex-wrap: wrap;
    padding-top: .7rem;
    padding-bottom: .7rem;
    gap: .3rem 1.2rem;
  }

  .kopf .marke { flex: 0 1 auto; }

  .kopf .wer { flex: 1 1 auto; justify-content: flex-end; }

  .kopf nav {
    order: 3;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    white-space: nowrap;
  }

  .kopf nav a { padding: .45rem 0; }
}

/* Der Abstand zwischen den Menuepunkten gilt nur oberhalb der
   Telefonbreite. Darunter rechnet ihn der Block „fuenf Punkte, eine
   Zeile" aus der Fensterbreite aus — und diese Regel hier steht
   spaeter in der Datei, wuerde ihn also ueberschreiben. Deshalb die
   untere Grenze. */
@media (min-width: 641px) and (max-width: 1200px) {
  .kopf nav { gap: 1.5rem; }
}


/* Das Protokoll sprengte auch den Bildschirm.
   Die Regel weiter oben galt nur bis 720px — dabei sind die Zeilen in
   mighty-archiv.php 33.000 Pixel lang, und das ist auf einem 1440er
   Bildschirm genauso zu viel wie auf einem Telefon. Am Bildschirm darf
   das Protokoll seitlich scrollen, am Telefon bricht es um; die Seite
   selbst bleibt in beiden Fällen ruhig. */

.protokoll {
  max-width: 100%;
  overflow-x: auto;
}


/* ==================================================================
   NACH WANJAS FOTOS — 16.09.2026, später Abend
   ==================================================================

   Vier Stellen aus den Bildschirmfotos vom Telefon. Eine davon hatte
   ich am selben Abend selbst verursacht.
   ------------------------------------------------------------------ */


/* --- 1. „A B U N D A N C E" — senkrecht, Buchstabe für Buchstabe ---

   Auf der Seite „Zugang geben" stand der Programmname als eine Spalte
   einzelner Buchstaben. Zwei Ursachen, die zusammenkamen:

   .endtabelle gibt den beiden Datenspalten je 190 Pixel fest. Auf
   einem 393er Telefon bleibt für die erste Spalte nichts übrig. Und
   mein eigenes overflow-wrap: anywhere von vorhin erlaubte dem
   Browser, das Wort an JEDER Stelle zu brechen — also nach jedem
   Buchstaben.

   Beides ist repariert: Tabellenzellen brechen wieder nur dort, wo ein
   Wort allein zu lang ist (break-word statt anywhere), und auf dem
   Telefon ist die Tabelle gar keine Tabelle mehr, sondern ein Block je
   Programm: Name oben, Ende und Betrag nebeneinander darunter. */

@media (max-width: 720px) {

  /* Die Notbremse von vorhin gilt nicht mehr in Zellen. break-word
     bricht nur ein Wort, das allein nicht in die Zeile passt, und
     lässt die Spaltenbreite in Ruhe. */
  th, td { overflow-wrap: break-word; }

  .endtabelle,
  .endtabelle tbody { display: block; }

  /* .endtabelle-kopf allein waere (0,1,0) und damit SCHWAECHER als
     „.endtabelle tr" darunter (0,1,1) — die Kopfzeile waere sichtbar
     geblieben. Deshalb beide Klassen. */
  .endtabelle tr.endtabelle-kopf { display: none; }

  .endtabelle tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem .9rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--linie);
  }

  .endtabelle tr:last-child { border-bottom: 0; }

  .endtabelle th {
    grid-column: 1 / -1;
    border: 0;
    padding: 0;
    font-size: 15px;
  }

  .endtabelle td {
    border: 0;
    padding: 0;
    width: auto;
    min-width: 0;
  }

  /* Ohne Kopfzeile weiß niemand mehr, welches Feld welches ist. Die
     Beschriftung steht deshalb am Feld selbst — data-wort im HTML. */
  .endtabelle td::before {
    content: attr(data-wort);
    display: block;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--grau);
    margin: 0 0 .25rem;
  }

  .endtabelle td input { margin: 0; width: 100%; }
  .endtabelle-geld { display: block; white-space: nowrap; }
  .endtabelle-geld input { width: calc(100% - 1.4rem); text-align: right; }
  .endtabelle-geld .einheit { margin-left: .35rem; }
}


/* --- 2. Die Fußzeile ---

   Sie war eine einzige lange Textzeile mit &middot; dazwischen,
   zentriert. Auf dem Telefon lief sie über beide Ränder hinaus: links
   war „Landkarte" angeschnitten, rechts „suchen".

   Jetzt ist sie eine umbrechende Reihe mit echten Abständen — und die
   Tastenkürzel sind auf dem Telefon weg. Eine Taste, die es dort nicht
   gibt, ist kein Hinweis, sondern Ballast. */

.fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: .35rem 1.15rem;
  padding: 0 1.5rem 2.5rem;
}

.fuss-name { color: var(--grau); }

.fuss a {
  color: var(--dunkelblau);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.fuss a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.kuerzel {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
  align-items: baseline;
}

@media (max-width: 720px) {
  .kuerzel { display: none; }
  .fuss { gap: .5rem 1.1rem; padding-bottom: 2rem; }
  .fuss a { padding: .3rem 0; }
}


/* --- 3. Die Werkzeugkiste in der Werkstatt ---

   Die Karten am Fuß der Werkstatt listeten ihre Werkzeuge als einen
   Fließtext aus Links mit Mittelpunkten dazwischen. Am Bildschirm ging
   das gerade noch; auf dem Telefon brach jeder zweite Linkname um und
   der Mittelpunkt landete allein am Zeilenanfang.

   Jetzt eine echte Liste: am Bildschirm nebeneinander, auf dem Telefon
   untereinander, und jeder Eintrag hat eine Fläche, die ein Daumen
   trifft. */

.werkzeugliste {
  list-style: none;
  margin: .8rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
}

.werkzeugliste a {
  display: inline-block;
  padding: .2rem 0;
  color: var(--dunkelblau);
  text-decoration: none;
  border-bottom: 1px solid rgba(194, 143, 63, .45);
}

.werkzeugliste a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

@media (max-width: 720px) {
  .werkzeugliste {
    flex-direction: column;
    gap: 0;
  }

  .werkzeugliste li { border-top: 1px solid #f0e9dc; }
  .werkzeugliste li:first-child { border-top: 0; }

  .werkzeugliste a {
    display: block;
    padding: .7rem 0;
    border-bottom: 0;
  }
}


/* ==================================================================
   DIE KUNDENKARTE AUF DEM TELEFON — 16.09.2026, Wanjas dritte Runde
   ==================================================================

   Drei Beobachtungen aus seinen Fotos, und eine davon erklärt ein
   Verhalten, das wie ein Fehler des Registers aussah, aber keiner war.
   ------------------------------------------------------------------ */


/* --- 1. Warum die Seite nach dem Zurückspringen hineingezoomt war ---

   Das ist kein Fehler im Register, sondern iOS Safari: Tippt man ein
   Feld an, dessen Schrift KLEINER ALS 16 PIXEL ist, zoomt Safari
   ungefragt hinein, damit man lesen kann, was man schreibt. Der Zoom
   bleibt danach stehen — auch wenn man zurück auf die Liste geht.
   Genau das zeigt Wanjas zweites Bild: er hatte „Wanja" ins Suchfeld
   getippt, und die Liste kam vergrößert zurück.

   Die Felder des Registers hatten 15, 14 und 13 Pixel. Auf dem Telefon
   haben sie jetzt alle 16 — das ist die Schwelle, unter der Safari
   eingreift, und zugleich die Größe, bei der ein Daumen trifft.

   Die Regel muss jede spätere Feldregel überstimmen, deshalb stehen die
   drei Sonderfälle hier namentlich. */

@media (max-width: 900px) {
  input,
  select,
  textarea,
  /* Dieselbe Schreibweise wie oben in der Grundregel — „input" allein
     waere schwaecher als „input[type=text]" und haette verloren. */
  input[type=text],
  input[type=password],
  input[type=email],
  input[type=search],
  input[type=date],
  input[type=month],
  input[type=number],
  input[type=tel],
  input[type=url],
  input[type=time],
  input[type=datetime-local],
  .filterzeile select,
  .betragform input,
  .rehand input,
  .blaettern-sprung input[type=number],
  .geld-fertig-form input[type=text] {
    font-size: 16px;
  }
}


/* --- 2. Die Knöpfe auf der Kundenkarte ---

   Am breiten Bildschirm stehen sie untereinander und sind alle gleich
   breit. Unter 900 Pixeln legte eine Regel sie nebeneinander und gab
   jedem seine natürliche Breite — „Zugang geben" 154, „Notiz
   schreiben" 172, „In Mighty öffnen" 180. Drei Knöpfe, drei Breiten,
   in zwei ungleichen Zeilen.

   Sie stehen jetzt auch dort untereinander und alle gleich breit. Das
   ist zugleich die Antwort auf „am Browser ist das auch so": es war
   dieselbe Regel, die auch ein schmales Fenster am Rechner trifft. */

@media (max-width: 899px) {
  .kopfband-aktionen {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: .6rem;
  }

  .kopfband-aktionen .knopf {
    width: 100%;
    text-align: center;
  }

  .kopfband-stand {
    margin-top: .3rem;
    padding-top: 0;
    text-align: left;
  }
}


/* --- 3. Das Bild links ließ dem Text 235 von 323 Pixeln ---

   Auf einem 393er Telefon blieb neben dem Bild eine Spalte von 235
   Pixeln, und in die sollten Name, Adresse, Rechnungsanschrift, ein
   Zitat und die Abzeichen hinein. Jede Zeile brach zwei-, dreimal um.

   Unter 560 Pixeln steht das Bild deshalb oben und der Text darunter
   über die volle Breite. Es kostet eine Bildhöhe und gewinnt ein
   Drittel Zeilenlänge. */

@media (max-width: 560px) {
  .kopfband {
    grid-template-columns: minmax(0, 1fr);
    gap: .9rem;
  }

  .kopfband-bild,
  .kopfband-initialen {
    width: 64px;
    height: 64px;
  }

  .kopfband-text { grid-column: 1 / -1; }
  .kopfband h1 { font-size: 22px; line-height: 1.2; }
  .kopfband-bio { margin-top: .8rem; }
}


/* --- Knopfreihen in Formularen, auf dem Telefon ---

   Dasselbe Bild wie auf der Kundenkarte, nur unten im Formular: „Jetzt
   freischalten" 193 Pixel, „Andere Produkte wählen" 250 — zwei Knöpfe,
   zwei Breiten, nebeneinander gequetscht.

   Auf dem Telefon stehen sie untereinander und gleich breit. Der
   wichtigste oben, weil er im Markup zuerst steht. */

@media (max-width: 560px) {
  .raster .breit > button,
  .raster .breit > .knopf,
  .knopfreihe > button,
  .knopfreihe > .knopf {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 0 .6rem;
  }

  .raster .breit > button:last-child,
  .raster .breit > .knopf:last-child,
  .knopfreihe > button:last-child,
  .knopfreihe > .knopf:last-child { margin-bottom: 0; }
}


/* --- „Zugang geben" stand links heraus ---

   Es war nicht der goldene Knopf, der falsch saß, sondern die drei
   darunter: die Regel „.knopf + .knopf { margin-left: .45rem }" gibt
   Knöpfen Abstand, die NEBENEINANDER stehen. In der Spalte der
   Kundenkarte schob sie jeden Knopf ab dem zweiten um 7 Pixel nach
   rechts — und der erste sah dadurch eingerückt aus.

   Am Bildschirm genauso wie am Telefon, weil die Spalte dort schon
   immer eine Spalte war. Ein Abstand nach links hat in einer Spalte
   nichts zu suchen. */

.kopfband-aktionen .knopf + .knopf,
.kopfband-aktionen .knopf + button,
.kopfband-aktionen button + .knopf {
  margin-left: 0;
}

.kopfband-aktionen > * { max-width: 100%; }


/* --- Das Euro-Zeichen stand außerhalb der Karte ---

   Dieselbe Falle wie bei der Kopfzeile der Endtabelle, nur eine Ebene
   tiefer: „.endtabelle td input" ist genauer (0,1,2) als
   „.endtabelle-geld input" (0,1,1) — die Regel, die dem Betragsfeld
   Platz für das € lassen sollte, hat also nie gegriffen. Das Feld nahm
   die volle Zellbreite, und das € rutschte 20 Pixel nach draußen.

   Statt mit einer gerechneten Breite nachzubessern, teilen sich Feld
   und Zeichen die Zelle jetzt selbst auf: die Beschriftung nimmt eine
   eigene Zeile, das € so viel wie es braucht, das Feld den Rest. Da
   kann nichts mehr hinausragen, egal wie schmal das Telefon ist. */

@media (max-width: 720px) {
  .endtabelle td.endtabelle-geld {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 .35rem;
    white-space: normal;
  }

  .endtabelle td.endtabelle-geld::before { flex: 1 1 100%; }

  .endtabelle td.endtabelle-geld input {
    /* Basis 0, nicht auto: ein Textfeld bringt von sich aus rund 160
       Pixel Wunschbreite mit — mehr, als die Zelle hat. Mit „auto"
       nahm es die ganze Zeile und schob das € in eine dritte. Mit 0
       nimmt es, was nach dem € uebrig bleibt. */
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    text-align: right;
  }

  .endtabelle td.endtabelle-geld .einheit {
    flex: 0 0 auto;
    margin-left: 0;
  }
}


/* --- Ende und Betrag: untereinander statt nebeneinander ---

   Wanja hat dieselbe Stelle zum dritten Mal gemeldet, und ich konnte
   sie in meinem Testbrowser nie sehen. Der Grund ist eine Eigenheit
   von Safari auf dem iPhone: ein Feld vom Typ „date" hat dort eine
   eigene Mindestbreite und schrumpft NICHT unter die Breite seines
   Inhalts, auch wenn width: 100% dasteht. In der Zelle war also kein
   Platzproblem — das Feld hat sich schlicht geweigert, schmaler zu
   werden, und ist unter das Nachbarfeld gewandert.

   Statt weiter an Breiten zu drehen, die ich nicht nachstellen kann:
   auf dem Telefon steht jedes Feld in seiner eigenen Zeile. Dann gibt
   es nichts mehr, wogegen ein Feld sich sperren könnte. Es kostet eine
   Zeile Höhe und ist dafür auf jedem Gerät richtig.

   Die zwei Zeilen darunter sind Sicherheitsgurt: appearance: none
   nimmt dem Feld die aufgezwungene Eigenbreite, min-width: 0 erlaubt
   ihm zu schrumpfen. Beides schadet nirgends. */

@media (max-width: 600px) {
  .endtabelle tr {
    grid-template-columns: minmax(0, 1fr);
    gap: .7rem;
  }

  .endtabelle td { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .endtabelle td input,
  .endtabelle td input[type=date] {
    min-width: 0;
    max-width: 100%;
    -webkit-appearance: none;
    appearance: none;
  }
}


/* --- Datumsfelder überall, nicht nur in der Endtabelle ---

   „Start für alle" steht nicht in der Endtabelle, sondern im Formular
   darüber — und meine Deckelung galt nur für „.endtabelle td input".
   Also ragte genau dieses eine Feld weiter über den Kartenrand hinaus.
   Die Regel gehört jedem Datumsfeld, egal wo es steht. */

@media (max-width: 720px) {
  input[type=date],
  input[type=month],
  input[type=time],
  input[type=datetime-local] {
    max-width: 100%;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
  }
}


/* --- Das € gehört in die Beschriftung, nicht neben das Feld ---

   Solange das € rechts neben dem Feld steht, nimmt es ihm rund zwanzig
   Pixel — und dann ist das Betragsfeld schmaler als das Datumsfeld
   darüber. Zwei Felder untereinander, die fast gleich breit sind,
   sehen schlimmer aus als zwei, die klar verschieden sind.

   Auf dem Telefon steht die Einheit deshalb in der Beschriftung:
   BETRAG (€). Das Feld nimmt die volle Breite wie alle anderen. */

@media (max-width: 600px) {
  .endtabelle td.endtabelle-geld::before { content: attr(data-wort) " (€)"; }
  .endtabelle td.endtabelle-geld .einheit { display: none; }

  .endtabelle td.endtabelle-geld input {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }
}


/* --- Die Community steht oben und sieht anders aus ---

   Sie ist kein Programm, sondern der Boden: jeder Zugang gibt sie
   ohnehin mit. In der alphabetischen Liste stand sie zwischen „Saturn
   Code" und „Seas of Love® Palace" und war von vierzig Programmen
   nicht zu unterscheiden.

   Jetzt: eigene Liste ganz oben, sandfarben hinterlegt, mit einem
   goldenen Streifen links und einem Satz, der sagt was sie ist. */

.wahlliste--boden {
  border-top: 0;
  margin-bottom: .4rem;
}

.wahlliste--boden li {
  border-bottom: 0;
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  background: #faf6ec;
}

.wahlliste--boden label:hover { background: #f6f0e1; }

.wahl-boden-wort {
  display: block;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8a6320;
  margin-top: .2rem;
}


/* --- Der Strich, der „nichts" heißt ---

   Die Betragsspalte ist rechtsbündig, weil dort Zahlen stehen. Ein
   Platzhalterstrich rutschte damit an den rechten Rand und stand zwei
   Zentimeter neben seiner Spaltenüberschrift — Wanjas Auge sieht so
   etwas sofort, und es hat recht: ein Strich ist kein Betrag, sondern
   die Auskunft, dass hier keiner steht. Er gehört unter die
   Überschrift wie jede andere Auskunft auch. */

td.geld > .leise {
  display: block;
  text-align: left;
}


/* ==================================================================
   Das Marken-R                                    (16.09.2026)
   ==================================================================

   Markenregel von Seas of Love: das ® läuft klein und hochgestellt
   nebenher, es ruft nicht. In voller Schriftgröße wirkt es wie ein
   Ausrufezeichen hinter dem Namen.

   Gesetzt wird es von einer Stelle in rahmen.php, die jede Textstelle
   der Seite durchgeht — auch Programmnamen aus der Datenbank. Hier
   steht nur, wie es dann aussieht. */

.marken-r {
  font-size: .58em;
  vertical-align: super;
  line-height: 0;
  letter-spacing: 0;
  font-weight: 400;
  /* Etwas Luft davor, sonst klebt es am letzten Buchstaben. */
  margin-left: .08em;
  /* Ein Hauch blasser als der Text daneben — dadurch tritt es zurück,
     ohne zu verschwinden. */
  opacity: .72;
}

/* In Überschriften ist die Serifenschrift ohnehin größer; dort darf
   das Zeichen noch eine Spur kleiner sein. */
h1 .marken-r, h2 .marken-r { font-size: .42em; }

/* In den sehr gesperrten Kapitälchen würde der Buchstabenabstand das
   Zeichen weit nach rechts schieben. */
.eyebrow .marken-r, .marke .marken-r, .knopf .marken-r { letter-spacing: 0; margin-left: 0; }


/* ==================================================================
   Der Weg zurück                                   (16.09.2026)
   ==================================================================

   Auf der Kundenkarte und beim Zugang-Geben stand bisher nur die
   Brotkrume — ein kleiner Goldtext, den man erst suchen muss. Wer von
   der Menschenliste in eine Karte geht und wieder heraus will, soll
   dafür nicht die Browsertaste brauchen.

   Der Knopf ist bewusst still: er ist ein Weg, keine Handlung. */

.zurueck {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .5rem;
  padding: .45rem .9rem .45rem .7rem;
  border: 1px solid var(--linie);
  border-radius: 4px;
  background: var(--weiss);
  color: var(--grau);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.zurueck:hover {
  border-color: var(--gold);
  color: var(--dunkelblau);
}

.zurueck::before {
  content: '\2039';
  font-size: 17px;
  line-height: 1;
  /* Der Pfeil sitzt sonst eine Spur zu hoch. */
  margin-top: -2px;
}

/* Unter einem Formular steht er neben dem Weiter-Knopf und soll dort
   auf derselben Höhe sitzen wie dieser. */
.knopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
  margin-top: 1.2rem;
}

.knopfzeile .zurueck { margin: 0; }

/* Auf dem Telefon untereinander und über die ganze Breite — zwei
   schmale Knöpfe nebeneinander trifft man mit dem Daumen nicht. */
@media (max-width: 520px) {

  .knopfzeile { flex-direction: column-reverse; align-items: stretch; }

  .knopfzeile button,
  .knopfzeile .knopf,
  .knopfzeile .zurueck { width: 100%; justify-content: center; }
}


/* Heute                                            (16.09.2026)

   Die Kachel „heute" stand schon einmal auf dem Dashboard und war
   verschwunden. Sie ist die einzige Zahl dort, die sich im Lauf eines
   Tages noch ändert — ThriveCart meldet sofort, Lexware wird stündlich
   geholt. Deshalb ein ruhiger Teal-Rand: man soll sie finden, ohne dass
   sie lauter ist als die Jahreszahl daneben. */

.kz-feld--heute {
  border-color: rgba(8, 128, 128, .35);
  background: #f4faf9;
}

.kz-feld--heute .kz-zahl { color: var(--dunkelblau); }


/* ==================================================================
   Die Nutzung — ein Strahl, zwei Quellen        (16.09.2026)
   ==================================================================

   DigiMember und die App liegen jetzt in einer Linie. Damit man beim
   Hinsehen erkennt, wo die eine aufhört und die andere anfängt, zwei
   ruhige Zeichen: die Zählung der beiden Quellen oben, und ein
   goldener Strich im Monatsbild an der Stelle des Wechsels.

   Bewusst leise. Der Wechsel ist eine technische Tatsache, kein
   Ereignis — für den Menschen, um den es geht, ging es einfach
   weiter. */

.nutz-quellen {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1rem;
}

.nutz-quelle {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  padding: .3rem .7rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grau);
  background: var(--weiss);
}

.nutz-quelle-zahl {
  font-size: 13px;
  letter-spacing: 0;
  color: var(--dunkelblau);
}

.nutz-quelle--dm  { border-color: #e2d3b4; }
.nutz-quelle--app { border-color: rgba(8, 128, 128, .35); }
.nutz-quelle--app .nutz-quelle-zahl { color: var(--dunkelblau); }

/* Der Monat, ab dem die App übernimmt. Der Strich sitzt links an der
   Säule, damit er die Grenze markiert und nicht den Monat selbst. */
.app-monat--wechsel {
  position: relative;
  padding-left: 3px;
}

.app-monat--wechsel::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 14px;
  width: 1px;
  background: var(--gold);
  opacity: .6;
}

/* Die Zwischenüberschrift in einer aufgeklappten Karte — der
   Vertragsstrahl sitzt unter den Zahlungen. */
.karte-inhalt .blockkopf {
  margin: 2rem 0 .8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linie);
}


/* Acht Kacheln in einer Reihe                      (16.09.2026)

   Mit „heute" sind es beim Geld acht Zahlen. Die freie Aufteilung
   (auto-fit, mindestens 12,5rem) brach die achte in eine zweite Zeile —
   eine einzelne Kachel unter sieben sieht aus wie ein Versehen.

   Deshalb bekommt diese Reihe eine feste Zahl Spalten je Breite.
   minmax(0, 1fr) statt 1fr, weil 1fr an einer langen Zahl aufreißt. */

@media (min-width: 1180px) {
  .kz-reihe--acht { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .kz-reihe--acht .kz-zahl { font-size: clamp(15px, 1.5vw, 21px); }
  .kz-reihe--acht .kz-feld { padding: .8rem .7rem; }
  .kz-reihe--acht .kz-wort { letter-spacing: .08em; }
}

@media (min-width: 760px) and (max-width: 1179px) {
  .kz-reihe--acht { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 759px) {
  .kz-reihe--acht { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Adressen suchen                                  (17.09.2026)

   Ein Feld und ein Knopf in einer Tabellenzelle. Die Zeile ist lang
   genug; das Feld darf schmal sein, eine E-Mail liest man auch in
   einem schmalen Feld. */

.ad-form {
  display: flex;
  gap: .4rem;
  align-items: center;
  margin: 0;
}

.ad-form input[type=email] {
  min-width: 0;
  width: 12rem;
  margin: 0;
  padding: .4rem .6rem;
  font-size: 13px;
}

.ad-form button {
  flex: none;
  padding: .45rem .8rem;
  font-size: 11px;
  letter-spacing: .1em;
}

/* Auf dem Telefon untereinander — zwei schmale Dinge nebeneinander
   trifft der Daumen nicht. */
@media (max-width: 700px) {
  .ad-form { flex-direction: column; align-items: stretch; }
  .ad-form input[type=email] { width: 100%; }
  .ad-form button { width: 100%; }
}


/* ==================================================================
   Kurven, die nicht kleinreden                     (17.09.2026)
   ==================================================================

   Wanja: „im Januar 2024 hatten wir 32 Tsd. Umsatz, im Mai 2026 206
   Tsd., das ist fast sechs Mal so viel. Kann es sein, dass die Grafik
   das kleiner aussehen lässt?"

   Gerechnet wurde richtig — die Skala beginnt bei null. Der Fehler lag
   im Seitenverhältnis: 130 Pixel hoch, auf einem breiten Bildschirm
   1400 Pixel breit. Elf zu eins. In so einem Streifen ist jeder
   Anstieg flach, auch der steilste.

   Jetzt mitwachsend in der Höhe, gedeckelt, damit sie nicht zur Wand
   wird. Es soll nicht schmeicheln — aber auch nicht schrumpfen. */

.kz-kurve {
  height: clamp(190px, 17vw, 280px);
}

@media (max-width: 900px) {
  .kz-kurve { height: clamp(170px, 34vw, 220px); }
}

@media (max-width: 600px) {
  .kz-kurve { height: 165px; }
}

/* Die Skala am Rand: oben der beste Monat, unten die Null. Damit ist
   die Kurve nachprüfbar statt nur hübsch. */
.kz-skala {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  padding: 0 .35rem;
  background: rgba(251, 248, 241, .82);
  border-radius: 3px;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: .1em;
  line-height: 1.6;
  color: var(--grau);
  pointer-events: none;
}

.kz-skala--oben  { color: var(--gold); }
.kz-skala--unten { top: 100%; transform: translateY(-115%); }

/* Wie stark gewachsen — als Zahl, nicht als Gefühl. */
.kz-wachstum {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--dunkelblau);
  font-weight: 500;
}


/* Der Vorjahresbalken in „Monat für Monat".
   Blass und schmal: er ist der Vergleich, nicht die Aussage. */

.kz-balken--vorjahr { height: 7px; margin-top: .2rem; background: #f3eee2; }
.kz-balken-teil--vorjahr { background: #cfc4ad; }
.kz-punkt--vorjahr { background: #cfc4ad; }

.kz-faktor {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--dunkelblau);
  font-weight: 500;
}

.kz-faktor--minus { color: var(--grau); }

/* Etwas mehr Platz für die Balken — Unterschiede brauchen Strecke. */
.kz-monate-balken { width: 40%; }


/* Der Fuß unter der Kurve trägt seit dem 17.09.2026 drei Angaben statt
   zwei. Auf 320 px wurde daraus eine Buchstabensäule — die Ansichts-
   prüfung hat es im selben Durchgang gemeldet, in dem es entstand.
   Also umbrechen statt quetschen. */

.kz-kurve-fuss > span { min-width: 0; }

@media (max-width: 760px) {
  .kz-kurve-fuss { flex-direction: column; gap: .25rem; }
  .kz-kurve-fuss > span { width: 100%; }
}


/* ==================================================================
   DER KOPF DER KUNDENKARTE — 24.09.2026
   ==================================================================

   Wanja: „Mach du das richtig geil und vor allem übersichtlich. Das
   meiste davon brauchen wir nur im Streitfall."

   Also drei Ebenen statt einer Mischzeile:

     1. Name, und daneben die Nummer, unter der wir diesen Menschen
        führen.
     2. Wie man ihn erreicht und unter welchen Nummern er in den
        anderen Häusern steht.
     3. Die Schilder, in einer eigenen Zeile.

   Zustände gehören nicht in dieselbe Zeile wie eine Adresse. Eine
   Adresse ändert sich alle paar Jahre, ein Schild jede Woche. */

.kopfband h1 .kopfband-nummer {
  vertical-align: middle;
  position: relative;
  top: -4px;
  margin-left: .7rem;
}

/* Die Zeile mit Mailadresse, Telefon und den fremden Kundennummern.
   Lexware und die USt-IdNr. stehen still daneben: man sucht sie, wenn
   man sie braucht, und liest sie sonst nicht mit. */
.kopfband-kennzahl {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(227, 217, 193, .6);
  white-space: nowrap;
}

/* Die Schilderzeile. */
.kopfband-marken {
  margin: 0 0 .7rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
}

/* In der gemeinsamen Zeile brauchten die Schilder einen eigenen
   Abstand nach links. In einer Reihe für sich macht das `gap`. */
.kopfband-marken .marker { margin: 0; }

/* Zwei neue Schilder.

   „Unternehmer" trägt Sand und Gold, weil es kein Alarm ist: es sagt,
   dass jemand das selbst erklärt hat, und es ist im Streitfall unsere
   Antwort auf einen Widerruf.

   „N Downloads offen" ist bernsteinfarben: es ist keine Sperre, aber
   es ist eine Schuld. Wir haben Geld genommen und noch nicht geliefert. */
.marker.unternehmer { background: #EFE7D6; color: #6B4E17; }
.marker.warten      { background: #FBEFD9; color: #8A5A14; }

@media (max-width: 640px) {
  .kopfband h1 .kopfband-nummer {
    display: inline-block;
    top: 0;
    margin: .35rem 0 0;
  }
}


/* ==================================================================
   EINE KLAPPE INNERHALB EINER KARTE — 24.09.2026
   ==================================================================

   `details.karte` ist der ganze Kasten. Manchmal gehört aber nur ein
   Teil eines Kastens weggeklappt: die einundvierzig ActiveCampaign-Tags
   auf der Kundenkarte sind nützlich, aber man liest sie nicht im
   Vorbeigehen, man sucht einen bestimmten. */

.klappe { margin: .7rem 0 0; }

.klappe > summary {
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dunkelblau);
}

.klappe > summary::-webkit-details-marker { display: none; }
.klappe > summary::before { content: "+ "; }
.klappe[open] > summary::before { content: "– "; }
.klappe > .klappe-inhalt { margin-top: .6rem; }


/* ==================================================================
   DAS WERTBAND MITTEN IN EINER KARTE — 24.09.2026
   ==================================================================

   `.wertband` ist dafür gebaut, unter der blauen Kopfkarte zu sitzen:
   oben randlos, unten rund, damit beide zu einem Stück verschmelzen.

   Im Geldkasten steht es mitten in einem weißen Kasten, und dort sah
   derselbe Rahmen aus wie ein Kasten im Kasten, der links herunter und
   rechts wieder hochläuft. Also kein Rahmen, nur zwei Linien. */

.wertband--inline {
  /* Eingegangen links, berechnet rechts. Nebeneinander am linken Rand
     sah die halbe Zeile leer aus, und zwei Zahlen, die nebeneinander
     kleben, verwechselt man leichter als zwei, die sich gegenüber
     stehen. */
  justify-content: space-between;
  background: transparent;
  border: none;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  border-radius: 0;
  padding: .9rem 0;
  margin: 0 0 1.1rem;
}


/* Lexware als Herkunftsmarke bei den Programmen. Bis zum 24.09.2026
   hieß es dort LEXOFFICE und im Geldblock lexware, und die Marke trug
   keine eigene Farbe. Jetzt heißt beides Lexware, in einem ruhigen
   Blau: es ist die Herkunft „hat jemand von Hand geschrieben", und die
   soll sich von ThriveCart unterscheiden, wo es von allein durchläuft. */
.quelle--lexware { color: #3C4763; border-color: #C9D0E0; }
.quelle--app     { color: #001345; border-color: #E3D9C1; }


/* ==================================================================
   DER KOPFSTREIFEN — 24.09.2026
   ==================================================================

   Wanja: „wenn die reine Kundenkarte mit runterwandert, wenn man weiter
   ihre Akte runterscrollt."

   Nicht die ganze blaue Karte. Die ist sechs Zentimeter hoch und würde
   beim Lesen der Geldtabelle ein Drittel des Bildschirms wegnehmen.
   Stattdessen ein Streifen mit dem, was man beim Scrollen wirklich noch
   wissen muss: wer das ist, welche Nummer, wie viel bezahlt, wie viel
   offen, und ob etwas gesperrt ist.

   NUR AM GROSSEN BILDSCHIRM. Auf dem Telefon ist der Bildschirm das
   knappe Gut; ein festgeklebter Streifen wäre dort kein Gewinn, sondern
   ein Verlust. Unter 900 Pixel ist er nicht da. */

.kopfstreifen {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem 1.2rem;
  padding: .5rem 1.2rem;
  margin: 0 0 1rem;
  background: var(--schwarz);
  color: var(--creme);
  border-radius: 4px;
  font-size: 13px;
  box-shadow: 0 2px 10px rgba(0, 12, 42, .18);
}

/* `hidden` allein reicht nicht: die Regel oben mit `display: flex`
   sticht das eingebaute `display: none` aus. */
.kopfstreifen[hidden] { display: none; }

.kopfstreifen-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19px;
  line-height: 1.2;
}

.kopfstreifen-nr {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}

.kopfstreifen-geld,
.kopfstreifen-offen {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.kopfstreifen-geld  { color: var(--gold); }
.kopfstreifen-offen { color: #FF7A7A; }

.kopfstreifen-wort {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(227, 217, 193, .6);
}

/* Der Weg zurück nach oben. Rechtsbündig, damit er nicht mitliest. */
.kopfstreifen-hoch {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sand);
  text-decoration: none;
  border-bottom: 1px solid rgba(227, 217, 193, .35);
}

.kopfstreifen-hoch:hover { color: var(--weiss); border-bottom-color: var(--gold); }

.kopfstreifen .marker { margin: 0; }

@media (max-width: 900px) {
  .kopfstreifen { display: none; }
}


/* ==================================================================
   DER BRIEFUMSCHLAG AN DER MAILADRESSE — 24.09.2026
   ==================================================================

   Wanjas Idee: „Man könnte einen Briefumschlag als kleines Logo
   reinsetzen. Dann ist klar, dass wir von dieser Person das
   Einverständnis haben, und wenn das nicht da ist, dann fehlt es."

   Er steht an der Mailadresse, weil er eine Frage an die Mailadresse
   beantwortet: dürfen wir an diese hier werben.

   Vier Zustände, drei Farben. Gold heißt ja. Rot heißt abgemeldet, und
   das ist ein Verbot. Grau heißt: der Klick fehlt, oder wir wissen es
   nicht. Der durchgestrichene Umschlag trägt die Aussage auch ohne
   Farbe, für den Fall, dass jemand Rot und Gold nicht unterscheidet. */

.brief {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.brief--ja        { color: var(--gold); }
.brief--weg       { color: #FF7A7A; }
.brief--offen     { color: rgba(227, 217, 193, .55); }
.brief--unbekannt { color: rgba(227, 217, 193, .35); }

/* Der Satz steht im Titel für die Maus und hier für alles andere:
   Vorleseprogramme, Tastaturbedienung, Ausdruck. Sichtbar ist er
   nicht, vorhanden schon. */
.brief-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* Die Schilder im Kopf so klein wie möglich. Sie sind Ausnahmemeldung,
   nicht Inhalt: wer keine hat, soll keine sehen, und wer eine hat,
   soll sie bemerken, ohne dass sie den Namen überstimmt. */
.kopfband-marken .marker,
.kopfstreifen .marker {
  font-size: 9px;
  letter-spacing: .1em;
  padding: 1px 6px;
}


/* ==================================================================
   NOTIZEN UND ZETTEL IN EINEM KASTEN — 24.09.2026
   ==================================================================

   Ein Feld, darunter ein Datum, das leer bleiben darf. Ohne Datum wird
   es eine Notiz, mit Datum ein Zettel. Damit muss sich niemand vorher
   entscheiden, was er gerade schreibt, und ein Kasten fällt weg.

   Gelesen werden die beiden weiter getrennt: eine Notiz ist ein
   Protokoll, ein Zettel ist eine Aufgabe, und eine Aufgabe, die
   zwischen Protokollen liegt, übersieht man. */

.blockkopf-klein {
  margin: 1rem 0 .4rem;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--grau);
}

.blockkopf-klein:first-child { margin-top: 0; }

.notizform { margin: 1rem 0 0; }

/* Das Datum und der Knopf stehen nebeneinander: das Datum ist die
   kleinere Entscheidung und soll den Knopf nicht nach unten schieben. */
.notizform-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .6rem;
  /* Wanja: „Bei Notieren und Woran erinnern? Datum ist so viel
     Abstand." Stimmte: das Textfeld trug unten 1.2rem und darauf kamen
     noch einmal .7rem. Jetzt trägt das Textfeld nichts und der Abstand
     steht nur hier. */
  margin: .5rem 0 .4rem;
}

.notizform textarea { margin-bottom: 0; }

.notizform-datum { flex: 1 1 170px; }
.notizform-datum label { margin-bottom: .25rem; }

/* WARUM DER KNOPF TIEFER STAND ALS DAS DATUMSFELD — 24.09.2026
   Jedes Eingabefeld im Register traegt unten 1.2rem Abstand, damit
   untereinander stehende Felder Luft haben. Hier stehen Feld und Knopf
   NEBENEINANDER, und `align-items: flex-end` richtet sich nach der
   Unterkante einschliesslich dieses Abstands. Der Knopf rutschte also
   genau um diese 1.2rem nach unten. */
.notizform-datum input { width: 100%; margin-bottom: 0; }

/* Wanja: „Speichern-Button neben Feldern so groß wie das Feld
   selbst." Ein Eingabefeld ist 11px oben und unten plus Zeile, ein
   Knopf war 9px. Nebeneinander sah der Knopf aus, als sei er
   hineingerutscht. */
.notizform-fuss button {
  flex: 0 0 auto;
  margin-bottom: 0;
  padding-top: 12px;
  padding-bottom: 12px;
}

@media (max-width: 520px) {
  .notizform-datum { flex-basis: 100%; }
}


/* ==================================================================
   ZUGANG GEBEN: KAUFBARES OBEN, BESONDERES UNTEN — 24.09.2026
   ==================================================================

   Wanja: „Das sind Sachen, die laufen automatisiert, die sind bei einer
   regulären Vergabe gar nicht nötig."

   Der Grace Chat- und Feed-Raum und die festen Aufzeichnungsräume
   stehen deshalb unter einer Trennlinie. Erreichbar, aber nicht im Weg. */

.wahl-trenner {
  margin: 1.6rem 0 .6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linie);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--grau);
}

.wahl-trenner .leise {
  display: block;
  margin-top: .3rem;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  max-width: 62ch;
}

/* Sie sind da, aber sie drängen sich nicht auf. */
.wahlliste--besonders { opacity: .8; }
.wahlliste--besonders:hover { opacity: 1; }


/* ==================================================================
   DIE ERFOLGSMELDUNG — 24.09.2026
   ==================================================================

   Wanja: „Sieht man nicht ganz eindeutig, dass es jetzt gespeichert
   ist. Wie so eine Art von Erfolgsmeldung wäre eigentlich super. Gerade
   wenn ich weiter unten was bearbeiten würde und dann nur oben
   gespeichert steht."

   Genau das war das Problem: die Meldung stand am Kopf der Seite, die
   Arbeit passierte am Fuß. Wer unten eine Notiz schrieb, sah oben
   nichts.

   Jetzt kommt sie rechts oben ins Bild, bleibt dort auch beim Scrollen,
   bleibt vier Sekunden und geht dann von selbst. Ein Klick nimmt sie
   sofort weg.

   DIE FARBE TRÄGT DIE AUSSAGE NICHT ALLEIN. Erfolg ist Teal, ein
   Hinweis Gold, ein Fehler Rot, aber der Text sagt in jedem Fall, was
   geschehen ist: „Notiz gespeichert", nicht nur „Gespeichert". */

.toast {
  position: fixed;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: min(26rem, calc(100vw - 2.4rem));
  padding: .8rem 1rem .8rem 1.2rem;
  border-radius: 5px;
  border-left: 3px solid var(--teal);
  background: var(--weiss);
  color: var(--dunkelblau);
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 6px 24px rgba(0, 12, 42, .16);
  animation: toast-herein .45s ease-out;
}

.toast--hinweis { border-left-color: var(--gold); }
.toast--fehler  { border-left-color: var(--rot); }

.toast-text { flex: 1 1 auto; }

.toast-zu {
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: 0 .2rem;
  margin: 0;
  color: var(--grau);
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
}

.toast-zu:hover { color: var(--dunkelblau); background: none; }

/* RUHIG STATT RUCKARTIG — 24.09.2026
   Wanja: „Die Erfolgsmeldung ist so ein einmaliges Aufflackern. Das
   wirkt ganz merkwürdig."
   Das Hineinrutschen von oben war der Grund. Ein Streifen, der von
   rechts oben hereinspringt und nach vier Sekunden wieder weg ist,
   sieht aus wie ein Zucken. Jetzt blendet er sich ein, ohne sich zu
   bewegen, bleibt zehn Sekunden und geht langsam wieder. */
@keyframes toast-herein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Sie geht so leise, wie sie gekommen ist. */
.toast--weg {
  opacity: 0;
  transition: opacity .9s ease;
}

/* Wer das Mitwackeln von Oberflächen abgestellt hat, bekommt sie ohne
   Bewegung. Sie ist dann trotzdem da. */
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .toast--weg { transition: none; }
}

@media (max-width: 640px) {
  .toast { top: .6rem; right: .6rem; left: .6rem; max-width: none; }
}




/* ==================================================================
   DAS ARCHIV STEHT IN DER LINKEN SPALTE — 24.09.2026
   ==================================================================

   Es stand eine Stunde lang über die ganze Breite unter dem
   Zweispaltigen. Das sah gut aus und hatte einen Fehler, den Wanja
   gefunden hat:

   „Wenn ich die Stammdaten öffne und bearbeite, dann rutschen die
   ganzen Felder, die unten stehen, die springen plötzlich nach ganz
   unten. Und das Gleiche gilt, wenn ich die Tags öffne."

   Genau so ist es. Eine Zeile über die ganze Breite muss unter der
   LÄNGEREN der beiden Spalten anfangen. Wer rechts etwas aufklappt,
   schiebt damit alles nach unten, was links steht, obwohl es damit
   nichts zu tun hat.

   Jetzt stehen die fünf in der linken Spalte, so breit wie die Notizen
   darüber, ohne Trennlinie. Links eine Spalte, rechts eine Spalte,
   beide stehen für sich, und nichts springt mehr.

   Das kostet der Geldtabelle ein Drittel Breite. Den Tausch ist es
   wert: eine engere Tabelle sieht man einmal, springende Kästen stören
   bei jedem Klick. */

.kunde-archiv { margin-top: .2rem; }


/* Der Weg zurück steht unter dem Kopf, nicht darüber. Ganz oben las man
   ihn, bevor man wusste, wen man vor sich hat; hier steht er dort, wo
   man mit diesem Menschen fertig ist. */
.zurueckzeile { margin: 0 0 .45rem; }


/* ==================================================================
   ZUGÄNGE IN DER APP: EINE LISTE, KEINE TABELLE — 24.09.2026
   ==================================================================

   Wanja: „Da steht jetzt Community, dann steht daneben Seas of Love
   Community, dann der Start, dann das Ende, dann noch der Betrag, dann
   der Status und dann die Quelle und bleibt für immer."

   Sieben Angaben je Zeile, sechs davon ohne Frage dahinter. Geblieben
   sind drei: welches Programm, seit wann, bis wann. Und gezeigt wird
   nur noch, was gerade läuft. */

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

.zugangsliste li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .9rem;
  padding: .55rem 0;
  border-top: 1px solid var(--linie);
}

.zugangsliste li:first-child { border-top: none; padding-top: .2rem; }

.zugang-name { flex: 1 1 14rem; }

/* Seit wann und bis wann: eine Zeitangabe, nicht zwei Sätze. Klein,
   grau, mit gleich breiten Ziffern, damit die Daten untereinander
   stehen wie in einem Kalender. */
.zugang-zeit {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .55rem;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--grau);
  font-variant-numeric: tabular-nums;
}

/* Das Ende ist die eine Angabe, wegen der man herschaut. Dunkelblau,
   und rot, sobald es näher als dreißig Tage ist. */
.zugang-bis      { color: var(--dunkelblau); }
.zugang-bis--nah { color: var(--rot); }

.zugang-dauer {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Die Handlungen stehen rechts und lesen sich nicht mit. */
.zugang-tun {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

/* Verlängern und beenden führen beide auf eine Seite, auf der etwas
   getan wird. Bis zum 24.09.2026 sahen sie aus wie zwei Wörter im Text.
   Klein und umrandet, nicht gold gefüllt: sie sind eine Möglichkeit,
   keine Aufforderung. Gold wird erst der Rahmen unter dem Zeiger. */
.zugang-knopf {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--linie);
  border-radius: 3px;
  background: var(--weiss);
  color: var(--grau);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.7;
  text-decoration: none;
  white-space: nowrap;
}

.zugang-knopf:hover,
.zugang-knopf:focus-visible {
  border-color: var(--gold);
  background: rgba(194, 143, 63, .07);
  color: #6B4E17;
}

/* Das Programmschild. Die Community bekommt Sand, damit auf einen Blick
   klar ist, was der Boden ist und was ein Programm: der Boden ist bei
   jedem gleich, das Programm ist das, wofür jemand bezahlt hat. */
.programmschild {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid rgba(0, 19, 69, .16);
  border-radius: 3px;
  background: rgba(0, 19, 69, .045);
  color: var(--dunkelblau);
  font-size: 13px;
  line-height: 1.4;
}

.programmschild--boden {
  border-color: rgba(194, 143, 63, .4);
  background: rgba(194, 143, 63, .1);
  color: #6B4E17;
}


/* Die Beträge, weggeklappt. Sie standen als Eingabefeld in jeder Zeile
   und machten aus der Liste ein Formular. */
.betragsliste { list-style: none; margin: .4rem 0 0; padding: 0; }

.betragsliste li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .8rem;
  padding: .35rem 0;
}

.betrag-name { flex: 1 1 12rem; font-size: 14px; }


/* ==================================================================
   ENGE FORMULARE — 24.09.2026
   ==================================================================

   Wanja zu den Stammdaten: „das gerne auch kompakter gestalten bitte."

   Das Maß unter einem Eingabefeld ist 1,2 rem. Das ist richtig für ein
   Formular mit vier Feldern, das für sich auf einer Seite steht. Bei
   vierzehn Feldern in einer Klappe in der schmalen Spalte kommen daraus
   allein 27 Zentimeter Luft.

   `formular-eng` zieht dieses Maß zusammen, ohne die Felder selbst zu
   verkleinern: ein Feld bleibt gut zu treffen, nur der Abstand zum
   nächsten schrumpft. Der Hinweis rückt an sein Feld heran, statt in
   der Mitte zwischen zweien zu schweben. */

.formular-eng .raster { gap: 0 .9rem; }

.formular-eng label { margin: 0 0 .25rem; }

.formular-eng input[type=text],
.formular-eng input[type=email],
.formular-eng input[type=date],
.formular-eng input[type=tel],
.formular-eng select,
.formular-eng textarea {
  padding: 8px 11px;
  margin: 0 0 .7rem;
  font-size: 14px;
}

.formular-eng input + .feldhinweis,
.formular-eng select + .feldhinweis,
.formular-eng textarea + .feldhinweis {
  margin: -.5rem 0 .75rem;
  line-height: 1.45;
}

.formular-eng h3.blockkopf { margin: 1rem 0 .5rem; padding-top: .9rem; }

.formular-eng button { margin-top: .1rem; }


/* Die beiden Sperren standen als zwei Absätze untereinander, jeder mit
   eigenem Maß und drei Stilangaben direkt im HTML. Nebeneinander in
   einer Zeile, und die Angaben stehen dort, wo Stil hingehört. */
.sperrhaken {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.6rem;
  margin: 0 0 .8rem;
}

.sperrhaken label {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dunkelblau);
}

.sperrhaken input[type=checkbox] { width: auto; margin: 0; }


/* „Grund der Buchungssperre" braucht in der schmalen rechten Spalte zwei
   Zeilen, „Sperrgrund" nur eine. Dadurch begann das rechte Feld tiefer
   als das linke, und die beiden Hinweise darunter standen versetzt.

   Beide Beschriftungen bekommen hier den Platz von zwei Zeilen. Das ist
   eine Zeile Luft über „Sperrgrund" und dafür zwei Felder, die auf einer
   Linie anfangen. Unter 640 Pixel steht ohnehin eines unter dem anderen,
   dort gilt es nicht. */
@media (min-width: 640px) {
  /* Zwei Zeilen sind bei 11 Pixeln und 18,7 Pixeln Zeilenhoehe genau
     37,4 Pixel, also 3.4em. Nachgemessen, nicht geschaetzt: mit 2.9em
     standen die beiden Felder noch fuenf Pixel versetzt. */
  .sperrgruende > div > label { min-height: 3.4em; }
}


/* ==================================================================
   ROHTEXT UND SCHRITTE — 24.09.2026
   ==================================================================

   Eine Antwort einer fremden Schnittstelle zeigt man ungekürzt. Das
   Interessante daran ist fast immer das, was man nicht erwartet hat,
   und das steht selten in den ersten drei Zeilen. Also ein Kasten mit
   fester Schriftbreite, der umbricht statt seitlich wegzulaufen, und
   der bei langen Antworten scrollt statt die Seite zu sprengen. */

.rohtext {
  margin: .4rem 0 1.2rem;
  padding: .9rem 1.1rem;
  max-height: 32rem;
  overflow: auto;
  background: #FCFAF4;
  border: 1px solid var(--linie);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  color: var(--dunkelblau);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Eine nummerierte Reihenfolge, in der wirklich eines nach dem anderen
   kommt. Die Ziffer in Gold, damit sie führt und nicht nur zählt. */
.schritte {
  counter-reset: schritt;
  list-style: none;
  margin: .8rem 0 0;
  padding: 0;
}

.schritte li {
  counter-increment: schritt;
  position: relative;
  padding: 0 0 .7rem 2.1rem;
  line-height: 1.6;
}

.schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: -.1rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  color: var(--gold);
}

.schritte li:last-child { padding-bottom: 0; }


/* --- Felder in einer Zeile mit Knoepfen (24.09.2026) ---
   Wanja: „eine Zeile da immer noch komisch verrutscht. Schau mal, ob du
   das global klaerst, das gibt es oft."

   Die Ursache ist immer dieselbe: jedes Eingabefeld hat oben in dieser
   Datei 1,2rem Abstand nach unten, damit Formulare, die untereinander
   stehen, Luft haben. Steht ein Feld aber in einer ZEILE neben Knoepfen
   (Flexbox, mittig ausgerichtet), rechnet der Browser diesen Abstand mit
   und hebt das Feld um die Haelfte an. Darum sass etwa das Datumsfeld im
   Warteraum hoeher als „in alle Raeume".

   Hier bekommen Felder in allen Zeilenbehaeltern des Registers keinen
   Abstand nach unten. Wer eine neue Zeile aus Feld und Knopf baut, gibt
   ihr die Klasse `in-zeile`, dann gilt das auch dort. */
:where(.in-zeile, .filterzeile, .raumwerkzeug, .raumwerkzeug-teil, .knopfreihe,
       .bulkleiste, .bulk-knoepfe, .filter-knoepfe, .werkzeuge, .uz-suche, .st-kopf)
  :is(input, select, textarea) {
  margin-bottom: 0;
}

:where(.in-zeile, .raumwerkzeug, .raumwerkzeug-teil, .knopfreihe) { align-items: center; }

/* Nachtrag 25.09.2026: dieselbe Verschiebung in den zweispaltigen
   Formularen (`raster`), wo links ein Feld mit Beschriftung und rechts
   nur ein Knopf steht, etwa „Probemail schicken" auf der Download-Seite.
   Der Knopf stand oben in seiner Zelle, das Feld wegen der Beschriftung
   tiefer. Jetzt sitzt der Knopf unten, auf der Hoehe des Feldes, und das
   Feld verliert in solchen Zeilen seinen Abstand nach unten. */
.raster > div:has(> :is(button, .knopf):only-child) { align-self: end; }
/* Nur in Zeilen aus genau zwei Zellen (Feld und Knopf), damit
   mehrzeilige Formulare ihre Luft zwischen den Feldern behalten. */
.raster:has(> div:nth-of-type(2):last-of-type > :is(button, .knopf):only-child) > div > :is(input, select) { margin-bottom: 0; }

/* Nachtrag 25.09.2026: Zeilen, die nur per style="display:flex" gebaut
   sind (etwa die Namenssuche bei den Dubletten), bekommen dieselbe
   Regel. So faellt auch eine Zeile nicht mehr heraus, die niemand mit
   `in-zeile` markiert hat. */
:where(form, div, p, span)[style*="display:flex"] > :is(input, select, textarea),
:where(form, div, p, span)[style*="display: flex"] > :is(input, select, textarea) { margin-bottom: 0; }

/* --- Zettel verschieben (02.10.2026) --- */
.zettel-schieben { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; align-items: center; margin: .45rem 0 0; font-size: 12px; }
.zettel-schieben form { display: flex; flex-wrap: wrap; gap: .2rem .8rem; align-items: center; margin: 0; }
.zettel-schieben-wort { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--grau); }
.zettel-schieben input[type="date"] { width: auto; margin: 0; padding: .2rem .45rem; font-size: 12px; }
.zettel-schieben .nurtext { font-size: 12px; }

/* --- Zugeklappte Karten auf dem Dashboard (02.10.2026) --- */
.kz-klapp-inhalt { padding: .2rem 1.8rem 1.4rem; border-top: 1px solid var(--linie); }
.kz-klapp-inhalt > :first-child { margin-top: 1rem; }
@media (max-width: 640px) { .kz-klapp-inhalt { padding: .2rem 1rem 1.2rem; } }