/* ============================================================================
   COREFRAME · die gemeinsame Huelle der vier Unterseiten

   Die Landingpage behauptet in Akt 5 "Eine Marke. Durch jede Oberflaeche." und
   zeigt darunter vier Aufnahmen dieser Seiten. Damit das keine Behauptung
   bleibt, tragen sie dieselbe Handschrift: dieselbe Leiste, denselben Akzent,
   dieselbe Bahn.

   Bewusst NEBEN styles.css, nicht hinein. Das Blatt ist gewachsen, blockweise
   Eingriffe haben dort schon zweimal Regeln mitgerissen, und die Huelle laesst
   sich so in einer Zeile wieder abhaengen.

   Wird nach styles.css geladen, shell.js nach app.js.
   ========================================================================== */

:root {
  --header-h: 76px;
  --bahn: #c0603c;          /* dieselbe Bahn wie auf der Landingpage */
  --bahn-w: 4px;
  /* Terrakotta eine Stufe tiefer, fuer Schrift auf einer Terrakotta-Toenung.
     --terra selbst steht dort nur auf 4,14:1. Gleiche Farbe, nicht die
     zweite: 6,5:1 auf Ivory, 5,9:1 auf der Toenung. */
  --terra-tief: #8f3a20;
}

/* Das hidden-Attribut hat in der UA-Tabelle nur display:none, und jede Regel
   im Blatt schlaegt das. `.estimate small { display: block }` hat genau das
   getan: die Budgetwarnung im Konfigurator stand von Anfang an da, auch ohne
   gewaehlten Umfang. */
[hidden] { display: none !important; }

/* overflow-x: hidden auf dem body macht den body zum Scrollcontainer, und
   position: sticky darin klebt an einem Kasten, der selbst nie scrollt. Die
   Leiste unten braucht sticky. clip beschneidet genauso, ohne einen
   Scrollcontainer aufzumachen. */
body { overflow-x: clip; }

/* styles.css setzt scroll-behavior: smooth. Zusammen mit dem eigenen Nachlauf
   in shell.js faellt natives Smooth-Scrollen jeden Frame in sich zusammen und
   Anker kommen nie an. Dieselbe Falle wie auf der Landingpage. */
html { scroll-behavior: auto; }


/* ============================================================== 1 · LEISTE ==
   76 Pixel, klebend, Wortmarke links, Ort in der Mitte, eine runde Pille
   rechts mit dem Terrakotta-Punkt statt des Pfeils. Der Pfeil bleibt den
   Knoepfen im Fliesstext, die wirklich woanders hinfuehren.

   Sie sitzt auf --pad, dem Gutter DIESER Seite, nicht auf dem der
   Landingpage: eine Leiste, die nicht auf derselben Kante steht wie der Text
   darunter, faellt staerker auf als ein paar Pixel Unterschied zum Nachbarn. */

.site-header {
  position: sticky;
  top: 0;
  min-height: var(--header-h);
  padding: 0 var(--pad);
  border-bottom: 1px solid transparent;
  background: color-mix(in oklab, var(--paper) 86%, transparent);
  backdrop-filter: blur(12px);
  transition: border-color 240ms cubic-bezier(0.4, 0, 0.1, 1),
              background-color 240ms cubic-bezier(0.4, 0, 0.1, 1);
}
.site-header.is-stuck { border-bottom-color: var(--line); }

.config-page .site-header { background: color-mix(in oklab, var(--paper) 86%, transparent); }

.wordmark-logo { height: 22px; width: auto; }

.header-context {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Die Pillen werden rund. Die Hauptpille traegt den Terrakotta-Punkt. */
.site-header .pill,
.site-header .icon-pill {
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 550;
  letter-spacing: 0.01em;
}
.site-header .pill {
  gap: 9px;
  background: var(--ink);
  color: var(--paper);
  border-color: transparent;
}
.site-header .pill::after {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--terra);
}
@media (hover: hover) and (pointer: fine) {
  .site-header .pill:hover { background: var(--ink-2); }
}

/* Der Menue-Knopf traegt keinen Punkt: er fuehrt nirgendwohin, er klappt auf. */
.site-header .icon-pill {
  gap: 8px;
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
/* Ohne Gate klebt der Hover-Zustand auf Beruehrgeraeten nach dem Tippen. */
@media (hover: hover) and (pointer: fine) {
  .site-header .icon-pill:hover { background: color-mix(in oklab, var(--ink) 7%, transparent); }
}
.site-header .menu-dots {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 3px;
  align-items: center;
}
.site-header .menu-dots i {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.1, 1),
              background-color 240ms cubic-bezier(0.4, 0, 0.1, 1);
}
.site-header .icon-pill[aria-expanded="true"] .menu-dots i:first-child {
  background: var(--terra);
  transform: scale(1.5);
}

/* Unter 560 Pixel passen Marke, Aktion und Menue nicht nebeneinander. Das
   Logo wird dann auf das Zeichen beschnitten. */
@media (max-width: 560px) {
  .site-header { grid-template-columns: auto 1fr auto; gap: 10px; }
  .header-context { display: none; }
  .wordmark-logo { width: 26px; object-fit: cover; object-position: left center; }
  .site-header .icon-pill span:first-child { display: none; }
  .site-header .icon-pill { padding: 0 12px; }
  /* styles.css versteckt die Aktions-Pille hier ganz. Genau dafuer wird das
     Logo aber auf das Zeichen beschnitten: damit Marke, AKTION und Menue
     nebeneinander passen. Ohne die Aktion ist die Leiste auf dem Telefon nur
     noch Marke plus Menue, und der eine Weg der Seite steckt zwei Klicks
     tief. Gemessen passen die drei bei 390 Pixel in 233. */
  .header-actions .pill { display: inline-flex; }
  .site-header .pill { padding: 0 14px; font-size: 12px; }
}


/* ================================================ 2 · CLIENT UND ADMIN =====
   Keine Leiste, sondern Kopfzeile und Seitenspalte. Beide bekommen dieselbe
   Hoehe, damit Wortmarke und Aktionen auf einer Linie sitzen. Ohne das steht
   die Marke in der Spalte auf einer anderen Grundlinie als die Kopfzeile
   daneben, und genau das faellt an einer Arbeitsflaeche auf. */

.workspace-sidebar > .wordmark {
  display: flex;
  align-items: center;
  min-height: var(--header-h);
  margin: 0 0 18px;
}
.workspace-topbar {
  min-height: var(--header-h);
  align-items: center;
  margin-bottom: 44px;
}


/* ================================================================ 3 · BAHN ==
   Derselbe rundgekappte Terrakotta-Strich wie auf der Landingpage, in drei
   Formen, je nachdem was die Seite ist. Drei Formen, eine Grammatik: dieselbe
   Farbe, dieselbe runde Kappe, immer die Bedeutung "hier entlang". */

/* --- Shop: gezeichnet, laeuft beim Scrollen durch das ganze main ---------- */

.bahn-host { position: relative; }
.bahn-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
}
.bahn-host > *:not(.bahn-wrap) { position: relative; z-index: 1; }
.bahn { width: 100%; height: 100%; display: block; }
.bahn path {
  fill: none;
  stroke: var(--bahn);
  stroke-width: 22;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Hinter dem Text, aber nicht gegen ihn: bei voller Deckkraft liest sich der
     Bogen als Strich quer durch die Ueberschrift statt als Band dahinter. */
  opacity: 0.72;
}

/* Auf dem Telefon tritt die gezeichnete Bahn ganz zurueck: eine einspaltige
   Seite hat keine freie Bahn, und Taupe auf Terrakotta ist nicht mehr lesbar. */
@media (max-width: 860px) {
  .bahn-wrap { display: none; }
}

/* --- Konfigurator: waagerecht als Fortschritt durch die vier Schritte ----- */

.config-progress { gap: 8px; }
.progress-segment {
  height: var(--bahn-w);
  border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 11%, transparent);
}
/* scaleX statt width: width ist Layout, scaleX laeuft auf der GPU. Die runde
   Kappe kommt hier ohnehin vom Elternteil (overflow: hidden plus radius), also
   verzieht sich beim Skalieren nichts. */
.progress-segment::after {
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--bahn);
  transition: transform 500ms cubic-bezier(0.4, 0, 0.1, 1);
}
.progress-segment.is-complete::after,
.progress-segment.is-current::after { transform: scaleX(1); }

/* --- Client und Admin: senkrecht in der Seitenspalte ---------------------- */

.workspace-nav {
  position: relative;
  padding-left: 16px;
}
/* Die Spur laeuft ueber alle Eintraege, die Marke sitzt auf dem aktuellen.
   Ihre Lage kommt aus shell.js vom echten Eintrag, nicht aus einer
   gerechneten Zeilenhoehe: die Eintraege sind unterschiedlich hoch, sobald
   einer umbricht. */
.workspace-nav::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  bottom: 4px;
  width: var(--bahn-w);
  border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 11%, transparent);
}
/* Bewegt wird ueber transform, nicht ueber top. Die Hoehe bleibt eine echte
   Hoehe und wird nicht animiert: die Eintraege sind gleich hoch, sie aendert
   sich also ohnehin nicht, und ueber scaleY wuerde die runde Kappe mitgezogen. */
.workspace-nav .bahn-mark {
  position: absolute;
  left: 3px;
  top: 0;
  width: var(--bahn-w);
  height: var(--mark-h, 0px);
  border-radius: 999px;
  background: var(--bahn);
  transform: translateY(var(--mark-t, 0px));
  transition: transform 420ms cubic-bezier(0.4, 0, 0.1, 1);
}


/* ============================================================ 4 · AKZENT ====
   Die Token standen nach der Umstellung warm, aber der Akzent kam auf den
   Unterseiten nirgends vor. Jetzt traegt ihn, was Aktion und Weg ist.

   Die Regel dahinter: Terrakotta traegt Aktion und Weg, Champagner traegt
   Flaeche. Terrakotta kommt nur dorthin, wo die Regel die Schriftfarbe gleich
   mitbestimmt; ein Austausch an der Wurzel braeche die Regeln, die dunkle
   Schrift auf helle Flaeche setzen. */

.cart-count,
.workspace-nav .is-active::before { background: var(--terra); }

/* Die Seitenspalte ist DUNKEL. var(--ink) darauf sind 1,26:1: der aktive
   Eintrag waere der einzige unlesbare in der ganzen Spalte gewesen. Aktiv
   heisst hier heller als der Rest, nicht dunkler. */
.workspace-nav a.is-active { color: var(--paper); font-weight: 550; }

.menu-nav a[aria-current="page"] { color: var(--terra); }


/* ============================================================= 5 · FOKUS ====
   app.js setzt beim Schrittwechsel den Fokus auf die Ueberschrift des aktiven
   Schritts (renderStep -> activeHeading.focus({ preventScroll: true })), damit
   ein Screenreader den neuen Schritt vorliest. Die h1 tragen dafuer
   tabindex="-1", stehen also NICHT in der Tabreihenfolge: niemand kann sie mit
   der Tastatur ansteuern, der Fokus kommt dort immer programmatisch an.

   Was der Browser darauf malt, kommt aus seiner eigenen Tabelle
   (outline: auto) und ist kraeftig blau: neben Terrakotta, Espresso und Ivory
   die einzige kalte Farbe auf der ganzen Seite, und sie liegt um Display-Type
   in 76 Pixel Groesse. Der Ring wird deshalb nicht entfernt, sondern
   uebersetzt: derselbe Terrakotta wie an jedem anderen fokussierten Element in
   styles.css, nur duenner und weiter abgesetzt, weil er nicht um einen Knopf
   liegt, sondern um eine Zeile.

   Ganz weglassen waere vertretbar (ein nicht tabbares Ziel muss keinen Ring
   tragen, WCAG 2.4.7 gilt der Tastaturbedienung), aber es kostet etwas: wer
   "Weiter" mit der Tastatur ausloest, sieht sonst nicht, wohin der Fokus
   gesprungen ist, und weiss beim naechsten Tab nicht, wo er anfaengt.

   :focus-visible, nicht :focus. Der Unterschied ist hier kein feiner: die
   Regel darf nur die Darstellung des Rings tauschen, nicht die
   Tastaturbedienung abschalten. Alles andere auf den vier Seiten behaelt
   seinen Ring ohnehin -- die Regel steht auf .config-step h1 und sonst
   nirgends.

   Nachgemessen an den drei Wegen zu Schritt 2, weil die Heuristik des
   Browsers hier nicht offensichtlich ist:

     echter Mausklick auf "Weiter"   :focus ja, :focus-visible NEIN, kein Ring
     Tab bis "Weiter", dann Enter    :focus-visible ja, Ring
     element.click() aus dem Skript  :focus-visible ja, Ring

   Der blaue Rahmen im Kontaktbogen lab/auswahl/gross-2-vorwahl.png stammt
   also aus der dritten Zeile: check-auswahl.mjs klickt im Dokument und nicht
   mit der Maus, und ohne echte Zeigereingabe zaehlt Chrome den
   programmatischen Fokus als sichtbar. Ein Kunde mit der Maus hat den Ring nie
   gesehen -- ein Kunde auf der Tastatur schon, und der bekommt jetzt
   Terrakotta. */

.config-step h1:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 10px;
  border-radius: 3px;
  /* Der Ring liegt sonst um den BLOCKKASTEN, und der ist 14ch breit. Bei
     "Was bauen wir?" sind das 94 Pixel Leerraum rechts vom Fragezeichen, und
     ein gerundetes Rechteck mit Luft darin liest sich auf einer Seite voller
     Formularfelder wie ein Eingabefeld. fit-content legt ihn um den Text.
     Der Umbruch bleibt, wo er war: max-width: 14ch deckelt beide Faelle, die
     Zeilenkaesten aller vier Ueberschriften stehen mit und ohne auf demselben
     Pixel (gemessen bei 1440, 900 und 390). Bei den drei langen Zeilen aendert
     sich ohnehin nichts, sie stossen an denselben Deckel. */
  width: fit-content;
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header .menu-dots i,
  .progress-segment::after,
  .workspace-nav .bahn-mark { transition: none; }
  .progress-segment.is-complete::after,
  .progress-segment.is-current::after { transform: scaleX(1); }
}


/* ============================================== 6 · EINWILLIGUNG UND VERSAND
   Was der Konfigurator braucht, seit er eine Anfrage wirklich absetzt: eine
   Einwilligung, einen Koeder gegen Bots und eine Zeile, die sagt, was gerade
   passiert.

   Hier und nicht in styles.css, aus demselben Grund wie der Rest der Huelle:
   das Blatt ist gewachsen und blockweise Eingriffe haben dort schon zweimal
   Regeln mitgerissen. */

.consent {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  max-width: 680px;
  margin-top: 6px;
}

/* Nicht .field label: das ist Mono, 10px und Grossbuchstaben, also fuer eine
   Feldbeschriftung gedacht. Eine Einwilligung ist Fliesstext und muss sich
   lesen lassen, sonst wird sie weggeklickt statt gelesen. */
.consent label {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
  cursor: pointer;
}

.consent label a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--terra);
  cursor: pointer;
}

/* Aus dem Bild geschoben, nicht display:none und nicht [hidden]: beides lesen
   einfache Bots, und ein Feld, das sie nicht sehen, fuellen sie auch nicht
   aus. Der Koeder soll fuer sie da sein und fuer Menschen nicht. Deshalb
   ausserdem aria-hidden und tabindex="-1" im Markup: wer die Seite hoert oder
   sich durchtabbt, stolpert sonst ueber eine Faxnummer. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.config-status {
  max-width: 680px;
  margin: 24px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.config-status a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Fehler und Hinweis tragen die Bahnfarbe an der Kante, nicht als Flaeche:
   Terrakotta auf Ivory steht bei 5,1:1 und traegt Text, ein Fehlerkasten
   ganz in Terrakotta traegt ihn nicht mehr. Die Farbe zeigt hin, der Text
   erklaert. Kein Kaltrot: die Seite hat keins, und eins einzufuehren waere
   ein zweiter Akzent fuer einen einzigen Zustand. */
.config-status.is-fehler,
.config-status.is-hinweis { border-left-color: var(--terra); color: var(--ink); }
.config-status.is-ok { border-left-color: var(--terra); color: var(--ink); }
.config-status.is-warte { border-left-color: var(--muted); }

/* Ein Knopf, der gerade sendet, darf nicht so aussehen wie einer, der
   wartet. Kein Spinner: die Uebertragung dauert Bruchteile einer Sekunde,
   und ein Rad, das einmal aufblitzt, ist unruhiger als eine ruhige Flaeche. */
.config-nav button[disabled] {
  opacity: .55;
  cursor: default;
}


/* ================================== 7 · RECHTSTEXTE UND BESTAETIGUNGSSEITE
   Drei neue Seiten teilen sich diese Regeln: impressum, datenschutz, danke.
   Sie liegen bewusst NICHT im Router (PAGES kennt sie nicht): sie werden
   gelesen und nicht angeflogen, und ein Flug braucht ein Standbild in
   assets/pages/, das bei jeder Textaenderung veralten wuerde. */

.rechtstext,
.danke-shell {
  padding: 0 var(--pad) 120px;
}

/* Fliesstext bricht bei etwa 68 Zeichen. Die Seite hat sonst ein weites
   Raster, aber ein Rechtstext ueber 1400 Pixel Breite wird nicht gelesen,
   sondern ueberflogen, und das ist bei genau diesen beiden Texten der
   falsche Modus. */
.rechtstext > h2,
.rechtstext > p,
.rechtstext > .entwurf-hinweis {
  max-width: 68ch;
}

.rechtstext > h2 {
  margin: 46px 0 14px;
  font-size: clamp(19px, 2.1vw, 23px);
  letter-spacing: -.01em;
}

.rechtstext > p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.68;
}

.rechtstext a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rechtstext-stand {
  margin-top: 52px !important;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
}

/* Ein Platzhalter muss beim Ueberfliegen auffallen, sonst geht er live.
   Terrakotta traegt auf Ivory 5,1:1, also genug fuer Text; die gepunktete
   Unterkante macht ihn auch dort erkennbar, wo jemand die Farbe nicht sieht.
   Farbe allein ist nie das einzige Signal. */
/* Terrakotta traegt auf Ivory 5,1:1 -- aber nicht auf einer Toenung aus
   Terrakotta. Gemessen 4,14:1, also durchgefallen. Die Toenung bleibt, weil
   sie das ist, was einen Platzhalter beim Ueberfliegen einer langen Seite
   findbar macht; stattdessen geht die Schrift eine Stufe tiefer. Derselbe
   Ton, nur dunkler: kein zweiter Akzent, nur ein zweiter Wert davon. */
.platzhalter {
  padding: 1px 5px;
  border-bottom: 1px dotted var(--terra);
  border-radius: 3px;
  background: color-mix(in oklab, var(--terra) 9%, transparent);
  color: var(--terra-tief);
  font-family: var(--mono);
  font-size: .92em;
}

.entwurf-hinweis {
  display: grid;
  gap: 8px;
  margin: 34px 0 8px;
  padding: 18px 20px;
  border: 1px solid var(--terra);
  border-left-width: 3px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--terra) 6%, transparent);
}

.entwurf-hinweis strong {
  color: var(--terra-tief);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.entwurf-hinweis span {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
}

/* ---------------------------------------------------------- Bestaetigung --
   Die Referenz ist das Einzige, was der Besuch von dieser Seite mitnimmt,
   also bekommt sie das Gewicht einer Ueberschrift und nicht das einer
   Fussnote. */

.danke-referenz {
  display: grid;
  gap: 6px;
  max-width: 520px;
  margin: 8px 0 56px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.danke-referenz strong {
  font-size: clamp(26px, 3.6vw, 36px);
  font-family: var(--mono);
  letter-spacing: .02em;
  color: var(--ink);
}

.danke-referenz small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.danke-h2 {
  margin: 0 0 20px;
  font-size: clamp(19px, 2.1vw, 23px);
}

.danke-schritte { margin-bottom: 56px; }

.danke-kontakt { max-width: 68ch; }

.danke-kontakt p {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.68;
}

.danke-kontakt a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Impressum muss von jeder Seite aus erreichbar sein. Der Konfigurator hat
   keine Fusszeile und die beiden Arbeitsflaechen auch nicht, also haengt es
   dort an der Navigation: im Menue und unten in der Seitenspalte. */
.menu-legal {
  display: flex;
  gap: 18px;
  margin: 22px 0 0;
}
/* Beide Orte stehen auf DUNKLEM Grund: die Seitenspalte auf Espresso, das
   Menue auf der aufgezogenen Flaeche. --muted ist ein warmes Taupe fuer
   helle Flaechen und kam hier auf 2,70:1. Genommen wird derselbe Wert wie
   bei den Nachbarn (Profilzeile, Menuetext), also Weiss mit Deckkraft. */
.menu-legal a,
.workspace-legal a {
  color: rgba(255, 255, 255, .62);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.workspace-legal {
  display: flex;
  gap: 16px;
  margin: 14px 0 0;
  padding-top: 14px;
  /* --line ist eine dunkle Linie fuer helle Flaechen und waere hier
     unsichtbar. */
  border-top: 1px solid rgba(255, 255, 255, .12);
}
@media (hover: hover) and (pointer: fine) {
  .menu-legal a:hover,
  .workspace-legal a:hover { color: #fff; }
}

/* Ohne gueltige Referenz steht dort ein Satz und keine Kennung. Der darf
   nicht im Schriftgrad einer Kennung stehen, sonst liest er sich wie eine. */
.danke-referenz strong.is-leer {
  font-family: inherit;
  font-size: clamp(17px, 2vw, 21px);
  color: var(--muted);
}


/* Der Richtwert-Block zeigt seit dem Entfernen der Preise einen SATZ statt
   einer Zahl. styles.css setzt dort bis zu 62px -- richtig fuer "ab 10.000 €",
   voellig falsch fuer "Den Rahmen legen wir gemeinsam fest.". Der Satz
   braucht Lesegroesse und Zeilenabstand, nicht Display-Type. */
.estimate-value {
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* Kleintext auf DUNKLEN Panels.

   styles.css setzt dort --muted, und das ist ein warmes Taupe fuer helle
   Flaechen: auf Espresso gemessen 2,70:1. Aufgefallen ist es erst, als das
   Protokoll im Admin in ein dunkles Panel wanderte -- die Zeitangaben waren
   praktisch unsichtbar. Dieselbe Falle wie bei den Rechtliches-Links in der
   Seitenspalte, nur eine Stelle weiter.

   Weiss mit Deckkraft, wie bei allen anderen Nachbarn auf dunklem Grund. */
.dark-panel .activity-item small,
.dark-panel .task-item small,
.dark-panel .timeline-item small {
  color: rgba(255, 255, 255, .62);
}