/* Farben, Schrift und Formen nach dem Design-Handbuch (Fassung 1.0) und dem
   Design-System-Artifact zusammenbesser - wie doku und print:
     Papier #EFEADD     Grund            Tiefgruen #2E3630  Text, Dunkelgrund
     Salbei dunkel #59655D  Band, Flaechen mit weissem Text
     Terrakotta #BA806A Akzent (Linien, Marker, nie Textfarbe)
     Terra dunkel #8F5B45  Terrakotta, wo sie Text sein muss
   Die Namen der Variablen sind die alten geblieben, damit die Regeln darunter
   nicht angefasst werden muessen; nur die Werte stammen jetzt aus dem Handbuch.
   Kein #000000, keine Schatten, keine Pillen (Radius 6,4 px).
   Raleway fuer Ueberschriften, Source Sans 3 fuer alles andere; beide liegen
   im Abbild, nichts kommt von Google. */

@font-face {
  font-family: "Raleway";
  font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(/statisch/schriften/raleway-latin-variable.woff2) format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/statisch/schriften/source-sans-3-latin-variable.woff2) format("woff2");
}

:root {
  color-scheme: light;

  --clay:       #BA806A;   /* Terrakotta */
  --salbei:     #6D7A71;   /* nur Flaechen und Linien, nie Text */

  --grund:      #EFEADD;   /* Papier */
  --flaeche:    #F7F4EC;   /* Karte, wie in doku */
  --kante:      #E5E1D4;   /* Mappe */
  --ink:        #2E3630;   /* Tiefgruen */
  --ink-2:      #5F6A62;   /* Grau, 4,69:1 auf Papier */
  --ink-3:      #5F6A62;

  --band:       #59655D;   /* Salbei dunkel, weisser Text 6,1:1 */
  --band-ink:   #FFFFFF;
  --band-ink-2: #EFEADD;
  --band-kante: #6D7A71;

  --mark:       #BA806A;
  --mark-leise: #E3CCBF;
  --warn:       #8F5B45;   /* Terra dunkel, 4,66:1 auf Papier */

  --schrift:  "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --anzeige:  "Raleway", "Avenir Next", "Segoe UI", sans-serif;
  --pille: 6.4px;
}

/* Kein Dunkelmodus: doku und print kennen keinen, und der Auftritt ist
   „viel heller Grund" (Handbuch). Wer eine dunkle Fassung braucht, nimmt das
   Theme „Dunkel (Tiefgruen)" des Design-Systems - als eigene Aufgabe. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--ink);
  font-family: var(--schrift);
  font-size: 1.0625rem;      /* 17 px, Handbuch: Fliesstext nie unter 16 px */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- Kopfband --- */

.kopf { background: var(--band); color: var(--band-ink); }

.kopf-innen {
  max-width: 76rem; margin: 0 auto;
  padding: 1rem clamp(1rem, 4vw, 2.5rem) 0.9rem;
  display: flex; flex-wrap: wrap; gap: 0.9rem 1.5rem; align-items: center;
}

.kopf-logo { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; }
/* Auf dem dunklen Band steht die Negativfassung des Logos (Handbuch: auf
   dunklem Grund _negativ), keine helle Platte mehr. */
.kopf-logo img {
  height: 44px; width: auto; display: block;
}
.kopf-logo span {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--band-ink-2);
  padding-left: 0.9rem; border-left: 1px solid var(--band-kante);
}

.kopf-rechts {
  margin-left: auto; display: flex; align-items: center;
  font-size: 0.8rem; color: var(--band-ink-2);
}

.navi { background: var(--band); border-top: 1px solid var(--band-kante); }
.navi-innen {
  max-width: 76rem; margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  display: flex; gap: 0.3rem; overflow-x: auto;
}
.navi a {
  padding: 0.75rem 1rem; text-decoration: none; font-size: 0.85rem;
  font-weight: 600; color: var(--band-ink-2); white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.navi a:hover { color: var(--band-ink); }
.navi a[aria-current="page"] { color: var(--band-ink); border-bottom-color: var(--clay); }

.zeitwahl {
  max-width: 76rem; margin: 0 auto;
  padding: 1.2rem clamp(1rem, 4vw, 2.5rem) 0;
  display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center;
}
.zeitwahl > span {
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); margin-right: 0.3rem;
}
.zeitwahl a {
  font-size: 0.78rem; font-weight: 600; text-decoration: none;
  padding: 0.36rem 0.95rem; border: 1px solid var(--kante);
  border-radius: var(--pille); color: var(--ink-2); background: var(--flaeche);
}
.zeitwahl a:hover { border-color: var(--salbei); color: var(--ink); }
.zeitwahl a[aria-current="true"] {
  background: var(--band); border-color: var(--band); color: #FFFFFF;
}

/* --- Inhalt --- */

main { max-width: 76rem; margin: 0 auto; padding: 1.6rem clamp(1rem, 4vw, 2.5rem) 5rem; }

h1, h2 { font-family: var(--anzeige); }
h1 {
  font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 300; line-height: 1.15;
  letter-spacing: 0.01em; margin: 0 0 0.25rem; text-wrap: balance;
}
.unterzeile { color: var(--ink-2); margin: 0 0 2rem; font-size: 0.9rem; }

h2 {
  font-size: 1.25rem; font-weight: 400; letter-spacing: 0.01em; line-height: 1.2;
  margin: 2.6rem 0 1rem; padding-top: 1.1rem;
  border-top: 2px solid var(--kante);
}
h2:first-of-type { margin-top: 0.8rem; }
.hinweis { font-size: 0.82rem; color: var(--ink-3); margin: 0.8rem 0 0; max-width: 46rem; }

/* --- Kennzahlen --- */

.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1px; background: var(--kante); border: 1px solid var(--kante);
  border-radius: 6px; overflow: hidden; margin: 0 0 1rem;
}
.kpi { background: var(--flaeche); padding: 1.15rem 1.15rem 1.25rem;
  display: flex; flex-direction: column; gap: 0.25rem; }
.kpi b {
  font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 700; line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink);
}
.kpi span {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-2);
}
.kpi em { font-style: normal; font-size: 0.8rem; color: var(--ink-2); }

/* --- Verlauf --- */

.verlauf {
  display: flex; align-items: stretch; gap: 4px;
  padding: 1.3rem 1rem 0.9rem; background: var(--flaeche);
  border: 1px solid var(--kante); border-radius: 6px; overflow-x: auto;
}
.saeule {
  flex: 1 1 0; min-width: 48px;
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 0.35rem;
}
.saeule-wert {
  font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
/* Die Spur gibt die feste Hoehe, gegen die sich die Prozentwerte der Balken
   aufloesen. Ohne sie kollabieren alle Balken auf ihre Mindesthoehe - ein
   Prozentwert braucht eine Elternhoehe, die feststeht. */
.saeule-spur {
  display: flex; align-items: flex-end;
  width: 100%; height: 110px;
}
.saeule-balken {
  display: block; width: 100%; min-height: 3px;
  background: var(--mark-leise); border-radius: 4px 4px 0 0;
}
.saeule.jetzt .saeule-balken { background: var(--mark); }
.saeule.jetzt .saeule-wert { color: var(--ink); }
.saeule-monat {
  font-size: 0.7rem; color: var(--ink-3); white-space: nowrap;
  padding-top: 0.35rem; border-top: 1px solid var(--kante);
  width: 100%; text-align: center;
}
.saeule-monat small { font-size: 0.62rem; opacity: 0.75; margin-left: 1px; }
.saeule.jetzt .saeule-monat { color: var(--ink); font-weight: 700; }

/* --- Balken --- */

.bars { display: grid; gap: 2px; max-width: 48rem; }
.bar {
  display: grid; grid-template-columns: minmax(7rem, 15rem) 1fr auto;
  align-items: center; gap: 0.85rem; padding: 0.22rem 0.4rem; border-radius: 4px;
}
.bar:hover { background: var(--flaeche); }
.bar-name { font-size: 0.82rem; line-height: 1.3; overflow-wrap: anywhere; }
.bar-name small { display: block; color: var(--ink-3); font-size: 0.72rem; }
.bar-spur { height: 14px; }
.bar-fuell {
  display: block; height: 100%; background: var(--mark);
  border-radius: 0 var(--pille) var(--pille) 0; min-width: 3px;
}
.bar-fuell.leise { background: var(--mark-leise); }
.bar-wert {
  font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums;
  min-width: 3.6rem; text-align: right;
}
.bar-wert small { display: block; font-weight: 500; font-size: 0.7rem; color: var(--ink-3); }

/* --- Tabelle --- */

.tabelle-rahmen {
  overflow-x: auto; background: var(--flaeche);
  border: 1px solid var(--kante); border-radius: 6px;
}
table { border-collapse: collapse; width: 100%; min-width: 26rem; font-size: 0.85rem; }
th, td { text-align: left; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--kante); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th {
  font-size: 0.68rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 600; border-bottom: 2px solid var(--kante);
}
td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
/* Gleiche Behandlung wie .bar-wert small: eigene Zeile, leiser, nicht fett -
   sonst klebt der Zusatz fett hinter der Zahl und streitet mit ihr. */
td.num small { display: block; font-weight: 500; font-size: 0.7rem; color: var(--ink-3); }
td.warn { color: var(--warn); font-weight: 700; }

/* --- Meldungen --- */

.meldung {
  padding: 0.95rem 1.2rem; background: var(--flaeche);
  border-left: 4px solid var(--clay); border-radius: 0 6px 6px 0;
  margin: 0 0 1.5rem; font-size: 0.88rem;
}
.meldung.schlimm { border-left-color: var(--warn); }
.meldung p { margin: 0.35rem 0 0; }
.meldung p:first-child { margin-top: 0; }

.leer { color: var(--ink-3); font-size: 0.88rem; }

/* Form und Maß des Anmeldeknopfs. Farben setzt der gemeinsame Abschnitt unten
   (`.anmelde-karte .knopf`); er setzt weder Größe noch Schrift noch Rahmenstil,
   sondern setzt diese Grundregel voraus. Der Rahmen ist Maß, nicht Zeichnung:
   die 51 px setzen sich aus denselben Teilen zusammen wie bei den Feldern. */
button.knopf {
  width: 100%; height: 51px; padding: 12px 16px;
  font: inherit; font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.01em;
  border: 2px solid; border-radius: 0; cursor: pointer;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* --- Zwei Reihen auf einer Achse (Seite Geschäft) --- */

.reihe-titel {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-2);
  margin: 1.4rem 0 0.5rem;
}
.reihe-titel:first-of-type { margin-top: 0; }
.verlauf.schmal { padding: 1rem 1rem 0.7rem; }
.verlauf.schmal .saeule-spur { height: 74px; }
.saeule.umsatz .saeule-balken { background: var(--salbei); opacity: 0.45; }
.saeule.umsatz.jetzt .saeule-balken { background: var(--salbei); opacity: 1; }

/* --- Verbundgrafik: drei Reihen in einem Bild --- */

.verbund-legende {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem;
  margin: 0 0 0.7rem; font-size: 0.78rem; color: var(--ink-2);
}
.legende-punkt { display: flex; align-items: baseline; gap: 0.4rem; font-weight: 600; }
.legende-punkt i {
  width: 11px; height: 11px; border-radius: 3px; flex: 0 0 11px;
  align-self: center;
}
.legende-punkt.besuche i { background: var(--mark-leise); }
.legende-punkt.umsatz  i { background: var(--salbei); border-radius: 50%; }
.legende-punkt.termine i { background: var(--clay); border-radius: 50%; }
/* Die Spanne gehoert in die Legende, weil jede Reihe auf ihr eigenes Maximum
   bezogen ist. Ohne diese Zahl waere die Grafik nicht lesbar, sondern huebsch. */
.legende-punkt b {
  font-weight: 600; color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.legende-hinweis {
  margin-left: auto; color: var(--ink-3); font-weight: 500;
  font-size: 0.74rem; font-style: italic;
}

.verbund-rahmen {
  background: var(--flaeche); border: 1px solid var(--kante);
  border-radius: 6px; padding: 0.9rem 0.8rem 0.4rem;
}
.verbund { display: block; width: 100%; height: auto; }

.verbund-boden { stroke: var(--kante); stroke-width: 1; }
.verbund-balken { fill: var(--mark-leise); opacity: 0.55; }
.verbund-balken.jetzt { fill: var(--mark); opacity: 1; }

.verbund-linie { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.verbund-linie.umsatz  { stroke: var(--salbei); }
.verbund-linie.termine { stroke: var(--clay); }
.verbund-punkt { stroke: var(--flaeche); stroke-width: 2; }
.verbund-punkt.umsatz  { fill: var(--salbei); }
.verbund-punkt.termine { fill: var(--clay); }

.verbund-zahl {
  font-size: 13px; font-weight: 700; text-anchor: middle;
  font-variant-numeric: tabular-nums;
}

/* Besuchszahl im Balken. Der Balken ist eine getoente Flaeche ueber der Karte,
   nicht Vollton - deshalb traegt die normale Textfarbe hier in beiden Themes.
   Wo der Balken zu niedrig ist, steht die Zahl darueber und wird leiser: Dort
   grenzt sie an den Kartenhintergrund, nicht an den Balken. */
.verbund-balkenzahl {
  font-size: 13px; font-weight: 700; text-anchor: middle;
  font-variant-numeric: tabular-nums; fill: var(--ink);
  /* Saum in Kartenfarbe, unter der Schrift gezeichnet. Er traegt zweimal:
     wo eine Linie hinter der Zahl laeuft, und auf dem hervorgehobenen Balken,
     der heller ist als die uebrigen. In beiden Themes richtig herum, weil
     --flaeche und --ink gemeinsam umschlagen. */
  stroke: var(--flaeche); stroke-width: 3px; paint-order: stroke;
  stroke-linejoin: round;
}
.verbund-balkenzahl.aussen { fill: var(--ink-3); font-weight: 600; }
.verbund-zahl.termine { fill: var(--clay); }
.verbund-monat {
  font-size: 13px; text-anchor: middle; fill: var(--ink-3);
}
.verbund-monat.jetzt { fill: var(--ink); font-weight: 700; }


.navi-innen { gap: 0; align-items: stretch; }
.navi-gruppe {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0 1.4rem 0 0; margin-right: 1.4rem;
  border-right: 1px solid var(--band-kante);
}
.navi-gruppe:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.navi-bereich {
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--band-ink-2); opacity: 0.8;
  white-space: nowrap;
}
.navi-seiten { display: flex; gap: 0.2rem; }

/* --- Zeitraumleiste --- */

.zeitleiste { background: var(--flaeche); border-bottom: 1px solid var(--kante); }
.zeitleiste-innen {
  max-width: 76rem; margin: 0 auto;
  padding: 0.75rem clamp(1rem, 4vw, 2.5rem);
  display: flex; flex-wrap: wrap; gap: 0.8rem 1.6rem; align-items: center;
}

.zeit-pager { display: flex; align-items: center; gap: 0.6rem; }
.zeit-pager strong {
  font-size: 0.9rem; font-weight: 700; min-width: 11rem; text-align: center;
}
.zeit-pager a, .zeit-pager .aus {
  display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem; border-radius: var(--pille);
  border: 1px solid var(--kante); text-decoration: none;
  font-size: 1.1rem; line-height: 1; color: var(--ink-2);
}
.zeit-pager a:hover { border-color: var(--salbei); color: var(--ink); background: var(--grund); }
.zeit-pager .aus { opacity: 0.3; }

.zeit-arten { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.zeit-arten a {
  font-size: 0.76rem; font-weight: 600; text-decoration: none;
  padding: 0.3rem 0.8rem; border: 1px solid var(--kante);
  border-radius: var(--pille); color: var(--ink-2);
}
.zeit-arten a:hover { border-color: var(--salbei); color: var(--ink); }
.zeit-arten a[aria-current="true"] {
  background: var(--band); border-color: var(--band); color: #FFFFFF;
}

.zeit-frei {
  display: flex; gap: 0.45rem; align-items: center; margin-left: auto;
  font-size: 0.74rem; color: var(--ink-3);
}
.zeit-frei label { display: flex; gap: 0.3rem; align-items: center; }
.zeit-frei input {
  font: inherit; font-size: 0.76rem; padding: 0.25rem 0.5rem;
  color: var(--ink); background: var(--grund);
  border: 1px solid var(--kante); border-radius: 4px;
}
.zeit-frei button {
  font: inherit; font-size: 0.74rem; font-weight: 600; cursor: pointer;
  padding: 0.3rem 0.85rem; border-radius: var(--pille);
  border: 1px solid var(--kante); background: var(--grund); color: var(--ink-2);
}
.zeit-frei button:hover { border-color: var(--salbei); color: var(--ink); }

@media (max-width: 60rem) {
  .zeit-frei { margin-left: 0; }
  .navi-gruppe { border-right: 0; margin-right: 0.8rem; padding-right: 0; }
}

.odoo-link {
  font-size: 0.76rem; font-weight: 600; text-decoration: none;
  color: var(--ink-2); border-bottom: 1px solid var(--kante);
  white-space: nowrap;
}
.odoo-link:hover { color: var(--ink); border-bottom-color: var(--salbei); }

/* =====================================================================
   GEMEINSAM — dieser Abschnitt steht WOERTLICH GLEICH in
   `doku-zusammenbesser`, `controlling-zusammenbesser` und
   `print-zusammenbesser`. Wer hier etwas aendert, aendert es in allen
   dreien (Ansage Gunnar, 28.10.2026).

   Deshalb keine Variablen der jeweiligen Anwendung: feste Markenfarben
   aus dem Handbuch und eine eigene Schriftvariable. Das Controlling steht
   sonst noch auf der alten Palette — an diesen beiden Stellen nicht.
   ===================================================================== */

/* Der Abschnitt bringt seine Schriften selbst mit. Das Controlling fuehrt
   sonst Montserrat; ohne diese beiden Zeilen saehe sein Anmeldeschirm anders
   aus als die der anderen, und „gleich" waere er nur im Aufbau. Die Dateien
   liegen in jedem Abbild unter demselben Weg; nichts kommt von Google. */
@font-face {
  font-family: "Raleway";
  font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(/statisch/schriften/raleway-latin-variable.woff2) format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/statisch/schriften/source-sans-3-latin-variable.woff2) format("woff2");
}

.anmelde-buehne, .profil {
  --gemeinsam-anzeige: "Raleway", "Avenir Next", "Segoe UI", sans-serif;
  --gemeinsam-text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* Auch der Fliesstext gehoert dazu: Die Felder erben sonst die Schrift der
   jeweiligen Anwendung, und dann stehen in der einen Montserrat-Ziffern und
   in der anderen Source-Sans-Ziffern. */
.anmelde-buehne, .profil-klappe { font-family: var(--gemeinsam-text); }

/* --- Anmeldung ------------------------------------------------------- */
/* DER ANMELDESCHIRM IST IN ALLEN EIGENEN ZUSAMMENBESSER-ANWENDUNGEN GLEICH.
   Raster vom Controlling, Farben und Schriften aus dem Handbuch (Ansage
   Gunnar, 28.10.2026). Wer ihn hier aendert, aendert ihn auch in
   `doku-zusammenbesser` und `controlling-zusammenbesser`.

   Zwei Flaechen ueber die volle Hoehe. Die linke traegt Salbei dunkel und
   das Logo in der Negativfassung; die rechte den Papierton. Der Sprung
   zwischen den Haelften ist deutlich, aber beide bleiben Markenflaechen —
   kein Schwarz, kein Weiss.

   Feste Markenfarben statt Tokens: EIN Aussehen, unabhaengig davon, welche
   Variablen die jeweilige Anwendung sonst fuehrt. Das Controlling steht
   heute noch auf der alten Palette; an dieser Stelle nicht. */

.anmelde-buehne {
  min-height: 100dvh;
  display: grid; grid-template-columns: 1fr;
  background: #EFEADD;                       /* Papier */
}

/* Drei Reihen: Das Logo steht in der mittleren und damit in der wirklichen
   senkrechten Mitte der Flaeche, der Spruch sitzt am Fuss der unteren. Die
   beiden Randreihen sind `minmax(0, 1fr)` und nicht `1fr` — sonst schoebe
   die Hoehe des Spruchs die untere Reihe auf und das Logo saesse messbar zu
   hoch. */
.anmelde-signatur {
  background: #59655D; color: #EFEADD;       /* Salbei dunkel auf Papier */
  display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  justify-items: center;
  padding: 3rem 2rem;
}

/* Der Block ist so breit wie das Logo und so hoch wie das Logo — mehr nicht.
   Der Spruch haengt absolut darunter und zaehlt fuer die Hoehe nicht mit.
   Genau das haelt das Logo in der senkrechten Mitte: Ein langer Spruch
   reicht weiter nach unten, statt das Logo nach oben zu schieben. */
.signatur-block { grid-row: 2; width: min(88%, 300px); position: relative; }

.anmelde-logo { display: block; width: 100%; height: auto; }

/* Rechts an der Logokante ausgerichtet, nicht links: Das Lockup laeuft dort
   mit „ZUSAMMEN" und „BESSER" auf eine gemeinsame Kante aus, und der Block
   nimmt sie auf.

   Linksbuendig mit Balken an der Kante — die aelteste Form, ein Zitat als
   Zitat zu kennzeichnen, und die einzige, die ohne waagerechte Linie
   auskommt. Der Balken steht in Terrakotta hell: Das normale Terrakotta
   waere auf dem dunklen Grund zu leise (Handbuch, Abschnitt 3).

   Nicht kursiv, obwohl das bei Zitaten die Gewohnheit ist: Kursiv ist eine
   Auszeichnung fuer ein paar Woerter, ueber drei Zeilen wird der Grauwert
   unruhig. Anfuehrungszeichen und Balken zeichnen bereits aus. */
.spruch {
  position: absolute; top: 100%; right: 0; margin: 1.5rem 0 0;
  width: 85%;
  padding: .1rem 0 .1rem 1rem; border: 0;
  border-left: 2px solid #D9A88E;            /* Terrakotta hell */
}
.spruch p {
  margin: 0 0 .5rem;
  font-family: var(--gemeinsam-anzeige); font-weight: 300;
  font-size: .9375rem; line-height: 1.6; font-style: normal;
  text-wrap: pretty;
}
.spruch cite {
  display: block; font-style: normal;
  font-size: .75rem; font-weight: 400; line-height: 1.6; opacity: .9;
}
/* Werk und Jahr eine Spur leiser als der Name — die Fundstelle belegt, sie
   soll nicht mitreden. */
.spruch cite span { display: block; opacity: .8; }

.anmelde-feldseite { display: grid; place-items: center; padding: 2rem 1.5rem; }

/* Frei stehend: kein Rahmen, kein Hintergrund, kein Schatten. Das ist der
   Kern der Wirkung — neben dem Formular steht nichts, was den Blick haelt. */
.anmelde-karte {
  width: 100%; max-width: 23.75rem;
  background: transparent; border: 0; padding: 0; color: #2E3630;
}

.marke-zeile {
  margin: 0 0 .75rem;
  font-family: var(--gemeinsam-anzeige);
  font-size: .75rem; font-weight: 600; line-height: 1.55;
  letter-spacing: .22em; text-transform: uppercase; color: #5F6A62;
}

/* Groesse und Abstaende wie im Controlling, aber **mager**: Das Handbuch
   (Abschnitt 4) setzt Ueberschriften auf 400 und ausdruecklich nicht fett.
   Die 800 des Controllings gehoeren zu dessen alter Palette. */
.anmelde-karte h1 {
  font-family: var(--gemeinsam-anzeige);
  font-size: 2.125rem; font-weight: 400; letter-spacing: .01em;
  line-height: 1.2; margin: 0 0 1.5rem; color: #2E3630;
}

.anmelde-karte .meldung { margin: 0 0 1.4rem; background: #FFFFFF; }

/* 16 px zwischen zwei Feldgruppen und ebenso vom letzten Feld zum Knopf —
   der untere Abstand hier leistet beides. */
.feld { display: block; margin: 0 0 1rem; }
.feld span {
  display: block;
  font-family: var(--gemeinsam-anzeige);
  font-size: .75rem; font-weight: 600; letter-spacing: .08em;
  line-height: 1.55; text-transform: uppercase; color: #5F6A62;
  margin-bottom: .5rem;
}
/* Eckig, und zwar Feld wie Knopf. Hoehen fest, damit sie in allen drei
   Anwendungen gleich sind. 17 px im Feld, sonst zoomt iOS beim Antippen. */
.feld input {
  width: 100%; height: 46px; padding: 10px 12px;
  font: inherit; font-size: 1.0625rem; font-weight: 400;
  color: #2E3630; background: #FFFFFF;
  border: 2px solid #6D7A71; border-radius: 0;
}
.feld input:focus-visible { border-color: #BA806A; outline: 2px solid #BA806A; }

.anmelde-karte .knopf {
  width: 100%; height: 46px; border-radius: 0;
  background: #59655D; border-color: #59655D; color: #FFFFFF;
}
.anmelde-karte .knopf:hover { background: #2E3630; border-color: #2E3630; }

@media (min-width: 48rem) {
  .anmelde-buehne { grid-template-columns: minmax(20rem, 42%) 1fr; }
  .anmelde-signatur { padding: 3.5rem; }
  .signatur-block { width: min(100%, 360px); }
  .anmelde-feldseite { padding: 3rem 2rem; justify-items: start; }
  .anmelde-karte { max-width: 25rem; }
}

/* Schmal steht der Spruch im Fluss und nicht absolut: Auf einem Telefon
   haengt er sonst aus der farbigen Flaeche heraus und liegt im Papierton.
   Das Logo darf dort ein Stueck wandern — ueberlappender Text nicht. */
@media (max-width: 47.99rem) {
  .anmelde-signatur { grid-template-rows: auto; align-content: center; }
  .spruch { position: static; width: 100%; margin: 1.25rem 0 0; }
}

/* --- Benutzerbereich ------------------------------------------------- */
/* IN ALLEN EIGENEN ZUSAMMENBESSER-ANWENDUNGEN GLEICH. Vorbild ist das
   Controlling; dazugekommen sind die Kacheln zu den Schwesteranwendungen.
   Wer das hier aendert, aendert es auch in `doku-zusammenbesser` und
   `controlling-zusammenbesser`. Feste Markenfarben statt Tokens, damit es
   ueberall gleich aussieht. */

.profil { position: relative; }

/* Der Ausloeser ist eine Pille, nicht nur der Kreis: Der Rand liegt im
   Ruhezustand durchsichtig da und wird bei Hover und im offenen Zustand
   sichtbar. So bleibt der Kopf ruhig, und der Knopf antwortet trotzdem. */
.profil > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .4rem .2rem .2rem;
  min-height: 44px;
  border: 1px solid transparent; border-radius: 999px;
  transition: border-color .12s, background .12s;
}
.profil > summary::-webkit-details-marker { display: none; }
.profil > summary::marker { content: ""; }
.profil > summary:hover { border-color: #C9CFC9; }
.profil[open] > summary { border-color: #C9CFC9; background: #FFFFFF; }
.profil > summary:focus-visible { outline: 2px solid #BA806A; outline-offset: 2px; }

.profil-pfeil { flex: 0 0 auto; color: #5F6A62; transition: transform .15s; }
.profil[open] .profil-pfeil { transform: rotate(180deg); color: #2E3630; }

.profil-kreis {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%;
  background: #59655D; color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--gemeinsam-anzeige);
  font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  user-select: none;
}

.profil-klappe {
  position: absolute; top: calc(100% + .55rem); right: 0; z-index: 20;
  min-width: 17rem;
  /* Rechts verankert, aber nie breiter als der Bildschirm: sonst klebt die
     Klappe auf schmalen Geraeten am Rand oder schiebt die Seite auf. */
  max-width: calc(100vw - 1.5rem);
  background: #FFFFFF; color: #2E3630;
  border: 1px solid #E5E1D4;
  box-shadow: 0 12px 28px rgba(46, 54, 48, .18);
  padding: .4rem;
}

.profil-wer {
  display: grid; gap: .15rem;
  padding: .5rem .6rem .6rem;
  border-bottom: 1px solid #E5E1D4; margin-bottom: .3rem;
}
.profil-wer strong { font-family: var(--gemeinsam-anzeige); font-size: .9rem; line-height: 1.3; }
/* Ein langer Login soll die Klappe nicht aufziehen. */
.profil-wer small { color: #5F6A62; font-size: .75rem; overflow-wrap: anywhere; }

.profil-klappe > a,
.profil-abmelden button {
  display: block; width: 100%; text-align: left;
  padding: .5rem .6rem;
  text-decoration: none; font-size: .85rem; font-weight: 600; color: #5F6A62;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; line-height: inherit;
}
.profil-klappe > a:hover,
.profil-abmelden button:hover { background: #EFEADD; color: #2E3630; }

/* Die Kacheln: drei nebeneinander, die eigene mitgezaehlt und gekennzeichnet.
   Nebeneinander statt untereinander, weil sie zusammen EINE Sache sind — wo
   sonst noch etwas liegt. Untereinander laesen sie sich wie drei weitere
   Menuepunkte. */
.profil-kacheln {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem;
  padding: .3rem 0; margin: .3rem 0;
  border-top: 1px solid #E5E1D4; border-bottom: 1px solid #E5E1D4;
}
/* `.profil-kacheln .kachel` und nicht nur `.kachel`: Das Controlling traegt
   weiter oben ein `.profil-klappe a { background: none; ... }`, das die
   Kacheln sonst schlaegt — es ist spezifischer als eine einzelne Klasse.
   Der Abschnitt soll sich selbst tragen und nicht davon abhaengen, was in
   der jeweiligen Anwendung darueber steht. */
.profil-kacheln .kachel {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .55rem .25rem; min-height: 68px;
  text-decoration: none; text-align: center;
  color: #5F6A62; background: #EFEADD;
  border: 1px solid transparent;
}
.profil-kacheln a.kachel:hover { background: #FFFFFF; border-color: #BA806A; color: #2E3630; }
.profil-kacheln a.kachel:focus-visible { outline: 2px solid #BA806A; outline-offset: 1px; }
.profil-kacheln .kachel-zeichen { width: 20px; height: 20px; flex: 0 0 auto; }
.profil-kacheln .kachel-name {
  font-family: var(--gemeinsam-anzeige);
  font-size: .62rem; font-weight: 600; letter-spacing: .06em;
  line-height: 1.25; text-transform: uppercase; hyphens: auto;
}
/* Die eigene Anwendung: kein Ziel, sondern eine Ortsangabe. Deshalb kein
   Zeigefinger, kein Hover — und der Salbeiton, den auch der Kreis traegt. */
.profil-kacheln .kachel.hier {
  background: #59655D; color: #FFFFFF; cursor: default;
}

/* Abmelden ist von den uebrigen Punkten abgesetzt — es beendet etwas,
   waehrend die anderen nur woandershin fuehren. */
.profil-abmelden { margin-top: .3rem; }

/* ===== Ende des gemeinsamen Abschnitts ===== */




/* --- Marketing: Redaktionsplan und Kanaele --------------------------------
   Der Plan ist eine lange Tabelle mit zwei Ebenen je Zelle: oben der Titel des
   Entwurfs, darunter sein Datum. Dieselbe Behandlung wie bei .bar-wert small -
   eigene Zeile, leiser, nicht fett -, damit die Zeile beim Ueberfliegen eine
   Zeile bleibt. */
td strong + small {
  display: block;
  margin-top: 0.15rem;
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--ink-3);
}

/* Auf der Kanalseite steht links der Name der Angabe, rechts der Wert. Die
   Kopfspalte traegt deshalb keine Grossbuchstaben wie eine Tabellenueberschrift
   - sie ist eine Beschriftung, keine Spaltenueberschrift. */
th[scope="row"] {
  width: 17rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
}

.offen-liste {
  margin: 0.3rem 0 1.6rem 1.1rem;
  padding: 0;
  font-size: 0.85rem;
  color: var(--ink-2);
}
.offen-liste li { margin: 0.3rem 0; }

/* --- Redaktionsplan: Handlung zuerst -------------------------------------
   Die Seite fuehrte frueher mit Kennzahlen und Abwaegung; die Handlung stand
   mittendrin. Jetzt traegt die Nummer das Auge, und was eilt, ist rot. */
h2.erste { margin-top: 0.6rem; }

/* Ungeschnitten und nur so breit wie noetig. Als breites Band ueber die volle
   Spalte kappt ein 4:3-Gruppenfoto genau das, worauf es ankommt — die
   Gesichter liegen oben und unten, nicht in der Mitte. */
.kopfbild {
  margin: 0 0 2.2rem; max-width: 30rem;
  border-radius: 10px; overflow: hidden; background: var(--flaeche);
}
.kopfbild img { display: block; width: 100%; height: auto; }
.kopfbild figcaption { padding: 0.55rem 0.9rem; font-size: 0.78rem; color: var(--ink-3); }

.schritte { list-style: none; counter-reset: schritt; margin: 0 0 2.6rem; padding: 0; }
.schritte li {
  counter-increment: schritt; position: relative;
  padding: 0 0 1.1rem 3.1rem; margin: 0 0 1.1rem;
  border-bottom: 1px solid var(--kante);
}
.schritte li:last-child { border-bottom: 0; margin-bottom: 0; }
.schritte li::before {
  content: counter(schritt); position: absolute; left: 0; top: -0.15rem;
  font-family: var(--anzeige); font-size: 1.6rem; font-weight: 700;
  line-height: 1; color: var(--salbei);
}
.schritte li.eilt::before { color: var(--warn); }
.schritt-was { margin: 0 0 0.5rem; font-size: 1.02rem; line-height: 1.45; }
.marke {
  display: inline-block; margin-left: 0.4rem; padding: 0.08rem 0.5rem;
  border-radius: 999px; background: var(--warn); color: #fff;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; vertical-align: 0.14em;
}
.schritt-wo {
  display: grid; grid-template-columns: 7.5rem 1fr;
  gap: 0.15rem 0.8rem; margin: 0; font-size: 0.84rem;
}
.schritt-wo dt { color: var(--ink-3); }
.schritt-wo dd { margin: 0; color: var(--ink-2); }

/* Zugeklapptes. Was begruendet statt anweist, steht hier drin. */
.falte { border-top: 1px solid var(--kante); }
.falte:last-of-type { border-bottom: 1px solid var(--kante); margin-bottom: 1.6rem; }
.falte > summary {
  cursor: pointer; padding: 0.8rem 0.2rem;
  font-weight: 600; font-size: 0.92rem; color: var(--ink-2);
}
.falte > summary:hover, .falte[open] > summary { color: var(--ink); }
.falte > :not(summary):last-child { margin-bottom: 1.3rem; }

/* Der Bildstreifen. Was fehlt, ist hier genauso wichtig wie was da ist -
   deshalb bekommt die zu kleine Aufnahme einen Rand statt zu fehlen. */
.bildstreifen {
  display: grid; gap: 1rem; margin: 0 0 2.6rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.bildkarte { margin: 0; background: var(--flaeche); border-radius: 10px; overflow: hidden; }
.bildkarte img { display: block; width: 100%; height: 9.5rem; object-fit: cover; }
.bildkarte figcaption { padding: 0.7rem 0.85rem 0.9rem; display: grid; gap: 0.28rem; }
.bildkarte strong { font-size: 0.92rem; }
.bildkarte .masse { font-size: 0.72rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bildkarte .taugt { font-size: 0.8rem; color: var(--ink-2); line-height: 1.4; }
.bildkarte.luecke { outline: 2px solid var(--warn); outline-offset: -2px; }
.bildkarte.luecke .masse { color: var(--warn); font-weight: 700; }