/* Komponenten-Stylesheet der Oberflaeche. Kein einziger fester Wert steht
   hier: alle Farben kommen aus den Variablen des Farbsatzes
   (farbsatz.css), alle Groessen aus masse.css - beide Dateien werden aus
   dem castellan-Design-Modul erzeugt (.sandcastle/design/tokens.css,
   Ticket 92, scripts/design_sync.py). Dieses Stylesheet nennt nur noch
   die Namen (var(--...)); neue Werte zuerst in tokens.css benennen.
   Regeln zur Bedienbarkeit: docs/oberflaeche.md Abschnitt 4. */

/* --- Schrift: DM Sans, selbst gehostet (app/static/fonts/dm-sans,
       SIL OFL 1.1, siehe OFL.txt) - nie von Google. Die Gewichte stehen
       hier als Zahlen: @font-face-Beschreibungen koennen keine CSS-
       Variablen lesen (var() gilt dort nicht); die Namen --gewicht-*
       gelten im Rest des Stylesheets. --- */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/dm-sans/dm-sans-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/dm-sans/dm-sans-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/dm-sans/dm-sans-latin-700-normal.woff2") format("woff2");
}

* {
  box-sizing: border-box;
}

/* --- Groessen des klebenden Rahmens (Issue 67): die beiden Hoehen
       --kopf-hoehe und --fuss-hoehe (je 65 px) stehen im Design-Modul
       (masse.css, erzeugt aus .sandcastle/design/tokens.css) und werden
       hier EINMAL benannt und nur benutzt - so rasten der klebende
       Tabellenkopf (top) und die klebende Detailspalte (top/max-height)
       an EINER Groesse ein statt an geratenen Werten. --- */

/* --- Platz fuer den Scrollbalken IMMER freihalten (Issue 27): sobald
       Balken fest eingeblendet sind (Windows bzw. macOS-Einstellung
       "Immer"), kostet der Balken einer LANGEN Seite (die Firmenliste)
       Breite, kurze Seiten behalten sie - der Kopf-Inhalt springt.
       "stable" reserviert den Rand des Fensters fuer den Balken auch auf
       kurzen Seiten: kurz und lang haben dieselbe Inhaltsbreite, und
       "Listen"/"Abmelden" stehen auf jeder Seite an derselben
       Stelle. --- */
html {
  scrollbar-gutter: stable;
}

/* --- Basis: viel weisse (bzw. dunkle) Flaeche, ruhig, klare Schrift --- */
body {
  margin: 0;
  min-height: var(--hoehe-fenster);
  display: flex;
  flex-direction: column;
  background-color: var(--farbe-flaeche);
  color: var(--farbe-text);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--schrift-normal); /* Fliesstext - nie kleiner als 16 px */
  font-weight: var(--gewicht-normal);
  line-height: var(--zeile-weit);
}

/* --- Groessenstufen (Abschnitt 3) --- */
h1 {
  font-size: var(--schrift-titel); /* Titel */
  font-weight: var(--gewicht-fett);
  line-height: var(--zeile-eng);
  margin: 0 0 var(--abstand-6);
}

h2 {
  font-size: var(--schrift-abschnitt); /* Abschnitt */
  font-weight: var(--gewicht-halbfett);
  line-height: var(--zeile-normal);
  margin: 0 0 var(--abstand-2);
}

.klein {
  font-size: var(--schrift-klein); /* Daten, Hinweise - nie kleiner */
  line-height: var(--zeile-text);
}
p.klein {
  color: var(--farbe-text-leise);
  margin: 0 0 var(--abstand-7);
}

/* --- Fokusring: sichtbar auf allem Bedienbaren (mind. 2 px, mit Abstand) --- */
:focus-visible {
  outline: var(--linie-dick) solid var(--farbe-fokus);
  outline-offset: var(--abstand-1);
}

/* --- Kopf: Logo plus Abmelden (nur mit Sitzung) ---
   Klebend (Issue 67): der Seitenkopf bleibt beim Rollen OBEN am
   Fensterrand, deckend (die Seite laeuft unter ihm durch - die Flaeche
   kommt aus dem Farbsatz) und ueber allem anderen (z. 3, ueber dem
   klebenden Tabellenkopf mit z. 1). Seine Hoehe ist FEST
   (var(--kopf-hoehe), s. oben): der Tabellenkopf rastet an
   var(--kopf-hoehe) Pixel-genau an seiner Unterkante ein. */
.kopf {
  display: flex;
  position: sticky;
  top: 0;
  z-index: var(--ebene-kopf);
  height: var(--kopf-hoehe);
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-7);
  padding: var(--abstand-5) var(--abstand-9);
  background-color: var(--farbe-flaeche);
  border-bottom: var(--linie-duenn) solid var(--farbe-linie);
}

.kopf-logo {
  display: block;
  height: var(--logo-hoehe);
  width: auto;
}

/* Logo-Link (Issue 18): fuehrt auf die Startseite - angemeldet leitet
   "/" zu Meine Listen weiter, abgemeldet zeigt "/" die
   Anmeldeseite. Kein eigener Text: der Name des Links ist der alt-Text
   des Logos (Markenname aus der Einstellung). Tippflaeche am Handy
   mind. 44 x 44 px; der Fokusring kommt aus der globalen
   :focus-visible-Regel. */
.kopf-logo-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tippflaeche); /* Tippflaeche */
  min-width: var(--tippflaeche);
  text-decoration: none;
}

/* Die Kopf-Navigation (Issue 27): der Menuepunkt "Listen" und
   daneben "Abmelden" stehen rechts im Kopf; Logo links und Links rechts
   liegen auf einer Mittellinie. Der zugangliche Name der Navigation
   ("Hauptmenue") kommt aus dem Textkatalog (rahmen.hauptmenue). */
.kopf-nav {
  display: flex;
  align-items: center; /* gemeinsame Mittellinie mit dem Logo */
  gap: var(--abstand-4);
}

.kopf-menuepunkt,
.kopf-abmelden,
.fuss a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tippflaeche); /* Tippflaeche - dieselbe wie beim Abmelden */
  padding: 0 var(--abstand-6);
  color: var(--farbe-text);
  text-decoration: none;
}

/* Der Menuepunkt ist UEBERALL gleich breit (Schriftstaerke 600 - der
   fette Schnitt der Markierung gehoert dauerhaft dazu): seine linke
   Kante haengt damit nicht am Zustand der Seite, und "Listen"/
   "Abmelden" stehen mit festem Balken pixelgenau an derselben Stelle
   wie auf jeder anderen Seite (Issue 27, Kriterium 2). */
.kopf-menuepunkt {
  font-weight: var(--gewicht-halbfett);
}

.kopf-menuepunkt:hover,
.kopf-abmelden:hover,
.fuss a:hover {
  text-decoration: underline;
}

/* "Hier bist du" (Issue 27, Wahl 4A): auf GENAU /bestellungen kommt die
   Unterstreichung dazu (aria-current="page"); die Markierung haengt nie
   nur an einer Farbe (Rot-Gruen-Regel - Form: Unterstreichung neben dem
   stetigen fetten Schnitt), auf den uebrigen Seiten steht kein
   aria-current. */
.kopf-menuepunkt[aria-current="page"] {
  text-decoration-line: underline;
}

/* --- Inhalt --- */
.inhalt {
  flex: 1;
  width: 100%;
  max-width: var(--breite-inhalt);
  margin: 0 auto;
  padding: var(--abstand-9);
}

/* breites Inhaltselement fuer Seiten mit zweispaltigem Inhalt: die
   Firmenliste mit Tabelle + Detailspalte (LEAD-T3b); am grossen
   Bildschirm nutzt die Liste den Platz bis 1600 px (Issue 18) - die
   schmalen Seiten (Anmelden, Meine Listen, Impressum) bleiben bei
   den 672 px der Regel darueber */
.inhalt--weit {
  max-width: var(--breite-weit);
}

/* --- Formular --- */
.feld-etikett {
  display: block;
  font-weight: var(--gewicht-halbfett);
  margin: var(--abstand-7) 0 var(--abstand-3);
}

.feld {
  display: block;
  width: 100%;
  max-width: var(--breite-formular);
  min-height: var(--tippflaeche); /* Tippflaeche */
  padding: var(--abstand-5) var(--abstand-6);
  font: inherit;
  color: var(--farbe-text);
  background-color: var(--farbe-flaeche);
  border: var(--linie-dick) solid var(--farbe-feldrand);
  border-radius: var(--radius);
}

.feld::placeholder {
  color: var(--farbe-text-leise);
  opacity: 1;
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tippflaeche); /* Tippflaeche */
  min-width: var(--tippflaeche);
  margin: var(--abstand-7) 0 0;
  padding: var(--abstand-5) var(--abstand-8);
  font: inherit;
  font-weight: var(--gewicht-halbfett);
  text-decoration: none; /* auch als Knopf-Link (Fehlerseiten) nicht unterstrichen */
  color: var(--farbe-akzent-schrift); /* Knopfton = --farbe-akzent, nie die Markenfarbe */
  background-color: var(--farbe-akzent);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}

/* --- Karten der Bestellungen --- */
.karten {
  list-style: none;
  margin: var(--abstand-7) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-6);
}

.karte {
  display: block;
  min-height: var(--tippflaeche);
  padding: var(--abstand-7) var(--abstand-8);
  background-color: var(--farbe-flaeche-2);
  border-radius: var(--radius);
  color: var(--farbe-text);
  text-decoration: none;
}

.karte:hover .anzahl {
  text-decoration: underline;
}

.karte .klein {
  margin: 0;
}

.karte .anzahl {
  margin: var(--abstand-4) 0 0;
  font-weight: var(--gewicht-halbfett);
}

/* --- Fortschrittsleiste in vier Schritten --- */
/* Issue 26: die vier Schritte stehen ueberall UNTEREINANDER (am Handy wie
   am Rechner eine Spalte, kein Raster): links das Symbol im runden Feld
   (40 px), rechts davon Name (fett) und Zustandswort (leise) untereinander.
   Eine senkrechte Linie verbindet die Symbolfelder: jedes Stueck ist
   reines CSS (::before am Schritt - kein zusaetzliches HTML fuers
   Vorleseprogramm) und liegt hinter dem Symbol; bis zum aktuellen Schritt
   kraeftig (var(--farbe-text)), danach leise (var(--farbe-linie)). Haken,
   Ring und Wort tragen die Bedeutung weiter - Farbe nie allein. */
.leiste {
  list-style: none;
  margin: var(--abstand-9) 0;
  padding: 0;
  display: flex;
  flex-direction: column; /* eine Spalte in jeder Breite */
  gap: var(--abstand-10); /* Abstand zwischen zwei Schritten */
}

.leiste-schritt {
  position: relative; /* das Linien-Stueck (::before) haengt am Schritt */
  display: grid;
  grid-template-columns: var(--symbol-feld) minmax(0, 1fr); /* Symbol links, Text rechts */
  grid-template-areas:
    "symbol name"
    "symbol zustand";
  column-gap: var(--abstand-7);
}

.leiste-symbol {
  grid-area: symbol;
  position: relative; /* der Puls (::after) haengt am Symbolfeld */
  z-index: var(--ebene-ueber); /* die Symbole liegen ueber der Linie (::before, die liegt auf der Grund-Ebene) */
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--symbol-feld); /* rundes Feld - die Mittellinie liegt bei der halben Breite */
  height: var(--symbol-feld);
  border-radius: 50%;
  background-color: var(--farbe-flaeche); /* deckend: die Linie endet am Feldrand */
}

.leiste-name {
  grid-area: name;
  font-weight: var(--gewicht-halbfett);
  line-height: var(--zeile-normal);
}

.leiste-zustand {
  grid-area: zustand;
  font-size: var(--schrift-klein);
  line-height: var(--zeile-text);
  color: var(--farbe-text-leise);
}

.leiste-schritt--aktuell .leiste-name,
.leiste-schritt--aktuell .leiste-zustand {
  font-weight: var(--gewicht-fett); /* fett: aktuelle Bedeutung steht nicht nur in der Farbe */
  color: var(--farbe-text);
}

/* Das Linien-Stueck je Schritt: von der Mitte des eigenen Symbols bis zur
   Mitte des naechsten (Schritthoehe + Leisten-Abstand, s. Regel oben); am
   letzten Schritt kein Stueck. Grundton leise - erledigte Schritte
   verbinden kraeftig, zusammen erreicht die starke Linie genau den
   aktuellen Schritt. */
.leiste-schritt::before {
  content: "";
  position: absolute;
  left: var(--versatz-linie); /* Feldmitte minus halbe Strichbreite */
  top: calc(var(--symbol-feld) / 2); /* Mitte des Symbolfelds */
  width: var(--linie-dick);
  height: calc(100% + var(--abstand-10));
  background-color: var(--farbe-linie); /* nach dem aktuellen Schritt: leise */
  pointer-events: none;
  z-index: var(--ebene-grund);
}

.leiste-schritt:last-child::before {
  content: none; /* der letzte Schritt verbindet nicht weiter */
}

.leiste-schritt--erledigt::before {
  background-color: var(--farbe-text); /* bis zum aktuellen Schritt */
}

.haekchen {
  color: var(--farbe-erfolg); /* Haekchen bei fertig - immer mit Text */
}

.kreis {
  width: var(--symbol-kreis);
  height: var(--symbol-kreis);
}

.kreis--gefuellt { /* aktueller Schritt: der gefuellte Punkt in der Mitte */
  color: var(--farbe-text);
}

.kreis--leer { /* nur Strukturanker - der Ring der offenen Schritte ist CSS */
  color: var(--farbe-text-leise);
}

/* Symbole im 40-px-Feld je Zustand (Form + Wort tragen die Bedeutung):
   erledigt = gefuellter Kreis mit Haken; aktuell = Ring mit Punkt in der
   Mitte (der Ring ist reines CSS am Symbolfeld); offen = duenner, leiser
   Ring. */
.leiste-schritt--erledigt .leiste-symbol {
  background-color: var(--farbe-erfolg); /* gefuellter Kreis */
}

.leiste-schritt--erledigt .haekchen {
  color: var(--farbe-flaeche); /* Haken AUF dem Kreis */
}

.leiste-schritt--aktuell .leiste-symbol {
  border: var(--linie-dick) solid var(--farbe-text); /* Ring um den Punkt */
}

.leiste-schritt--offen .leiste-symbol {
  border: var(--linie-dick) solid var(--farbe-text-leise); /* duenner, leiser Ring */
}

.leiste-schritt--offen .kreis--leer {
  display: none; /* das SVG bleibt Strukturanker (tests) - der Ring ist CSS */
}

/* Der Puls am aktuellen Schritt: ein Ring am Symbolfeld (reines CSS, per
   Pflicht ::after, ueber der Linie), der langsam waechst und verblasst -
   nur transform/opacity, 2 s, endlos. Bei "Bewegung reduzieren" nimmt ihm
   die Regel am Dateiende (prefers-reduced-motion) Bewegung und Wiederholung:
   der Ring steht dann still. */
.leiste-schritt--aktuell .leiste-symbol::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: var(--linie-dick) solid var(--farbe-text);
  pointer-events: none;
  animation: leiste-puls var(--dauer-puls) ease-out infinite;
}

@keyframes leiste-puls {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    /* bis 1,45 gewachsen (reine Keyframes-Zahl ohne Einheit, nur hier; in
       der Regel oben liest der Browser var(--dauer-puls) fuer die Dauer) */
    transform: scale(1.45);
    opacity: 0;
  }
}

/* --- Saetze und Karten unter der Leiste --- */
.bestellzeile {
  margin: 0;
  color: var(--farbe-text-leise);
}

.zustandsatz {
  margin: 0 0 var(--abstand-7);
}

.hinweis-karte {
  padding: var(--abstand-7) var(--abstand-8);
  background-color: var(--farbe-flaeche-2);
  border-radius: var(--radius);
}

.hinweis-karte p {
  margin: 0;
  color: var(--farbe-text-leise);
}

.warnung {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-6);
  padding: var(--abstand-7) var(--abstand-8);
  background-color: var(--farbe-flaeche-2);
  border: var(--linie-dick) solid var(--farbe-fehler);
  border-radius: var(--radius);
}

.warnung p {
  margin: 0;
}

.warnzeichen {
  color: var(--farbe-fehler); /* Warnzeichen + Text - nie nur Farbe */
  flex-shrink: 0;
}

/* --- Firmenliste der gelieferten Bestellung (LEAD-T3a, Abschnitt 8) --- */
.listen-kopf {
  margin: 0;
  color: var(--farbe-text-leise);
}

.listen-kopf .haekchen {
  /* Haekchen vor dem Wort "fertig" - Form + Wort, Farbe nie der einzige
     Traeger; das Wort daneben ist die Textalternative */
  margin: 0 var(--abstand-2);
  vertical-align: var(--versatz-haekchen);
}

.listen-zusammenfassung {
  margin: 0;
}

.liste-leer {
  margin: var(--abstand-7) 0 0;
  color: var(--farbe-text-leise);
}

/* --- Download der Firmenliste (LEAD-T4, Issue 24): der EINE Akzent-Knopf
   der Seite ist ein einfacher Link (<a class="knopf download-knopf") -
   ein Klick laedt sofort die CSV (download-Attribut), das Menue und das
   Excel-Format entfallen. Am Rechner rechts neben der Ueberschrift, am
   Handy in voller Breite unter der Zusammenfassung. Der Ton kommt von
   .knopf (Akzent, Tippflaeche, Fokusring); hier steht nur die Breite. */
.listen-kopfzeile {
  display: flex;
  flex-direction: column; /* Handy: unter der Zusammenfassung */
  align-items: stretch;
}

.download-knopf {
  width: 100%; /* Handy: volle Breite */
}

/* am Rechner: rechts neben der Ueberschrift */
@media (min-width: 900px) {
  .listen-kopfzeile {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .download-knopf {
    width: auto;
  }
}

/* Rufnummer - Abschnitt 3: 20 px, 600, Ziffern gleich breit. In der
   Tabelle am Rechner reiner Text (Issue 25 - angerufen wird ueber den
   "Anrufen"-Knopf in der Detailspalte), in den Karten am Handy bleibt
   die Nummer ein antippbarer tel:-Link (dort gibt es die Detailspalte
   nicht). Grundgestaltung gilt fuer beide (span und Link). */
.rufnummer {
  color: var(--farbe-text);
  font-size: var(--schrift-gross);
  font-weight: var(--gewicht-halbfett);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

/* nur der Link in den Karten deutet beim Ueberfahren an, dass er antippbar
   ist - die Text-Nummer der Tabelle unterstreicht sich nicht (Issue 25) */
.firma-karte .rufnummer:hover {
  text-decoration: underline;
}

/* Tabelle am Rechner (ab 900 px) - echte Tabelle mit Spaltenkoepfen:
   default (unter 900 px) ausgeblendet, dort zeigen die Karten die Firmen */
.firmen-tabelle {
  display: none;
  width: 100%;
  border-collapse: collapse;
  margin: var(--abstand-6) 0 0;
}

.firmen-tabelle th,
.firmen-tabelle td {
  text-align: left;
  vertical-align: top;
  padding: var(--abstand-5) var(--abstand-6) var(--abstand-5) 0;
  border-bottom: var(--linie-duenn) solid var(--farbe-linie);
}

/* Die Spaltenkoepfe (Abschnitt 3 "klein") kleben beim Rollen EINE Ebene
   unter dem klebenden Seitenkopf (Issue 67): alle fuenf rasten beim
   Rollen an var(--kopf-hoehe) ein - direkt an dessen Unterkante (die
   Hoehe des Kopfes und der Klebepunkt sind dieselbe Groesse, Abstand
   0 px) - waehrend die 50 Zeilen hindurchlaufen. Die deckende Flaeche
   kommt aus dem Farbsatz (die Zeilen scheinen nicht durch, und nichts
   rollt unter den klebenden Kopf: der hat z. 3, diese Kopfzeile 1),
   darunter der Rand wie bei den Zellen. Nur am Rechner wirksam: unter
   900 px ist die Tabelle aus (dort stehen die Karten, ohne Kopfzeile -
   dort aendert sich nichts). Die Detailspalte klebt daneben unter dem
   Kopf weiter (top: Kopfhohe + 16 px, Regel unten, Issue 67) - beide
   kleben unabhaengig voneinander. */
.firmen-tabelle thead th {
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
  font-weight: var(--gewicht-halbfett);
  position: sticky;
  top: var(--kopf-hoehe); /* EINE Ebene unter dem klebenden Seitenkopf (Issue 67) */
  z-index: var(--ebene-ueber); /* die Kopfzeile liegt ueber den Zeilen, die unter ihr rollen */
  background-color: var(--farbe-flaeche); /* deckend, aus dem Farbsatz */
  border-bottom: var(--linie-duenn) solid var(--farbe-linie);
}

/* Die ganze Zeile waehlt (Issue 25): der Klick irgendwo in die Zeile
   loest (im Skript firmen-auswahl.js) den Firmenname-Link der Zeile aus -
   die Zeile zeigt deshalb den Mauszeiger und einen Hover-Ton aus dem
   Farbsatz. Die gewaehlte Zeile bleibt wie heute markiert (Flaeche und
   fett, Regel darueber). */
.firmen-tabelle tbody tr {
  cursor: pointer;
}

.firmen-tabelle tbody tr:hover {
  background-color: var(--farbe-flaeche-2);
}

.firmen-name {
  display: block;
  font-weight: var(--gewicht-halbfett);
  overflow-wrap: break-word; /* erst brechen, wo ein Wort nicht passt (Issue 18) */
  color: var(--farbe-text); /* der Firmenname waehlt die Firma - Link */
  text-decoration: none;
}

.firmen-name:hover {
  text-decoration: underline;
}

.firmen-domain {
  display: block; /* Domain klein unter der Firma, als Text (LEAD-T3b linkt) */
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
  overflow-wrap: break-word; /* erst brechen, wo ein Wort nicht passt (Issue 18) */
}

/* gewaehlte Zeile: abgesetzte Flaeche UND fett (Form + Gewicht), nicht nur
   eine andere Farbe - die Zeile gehoert zur Firma in der Detailspalte */
.firmen-tabelle tr[aria-current="true"] {
  background-color: var(--farbe-flaeche-2);
}

.firmen-tabelle tr[aria-current="true"] .firmen-name {
  font-weight: var(--gewicht-fett);
}

/* Tabelle und Detailspalte: unter 900 px sind beide aus (dort tragen die
   Karten die Details), ab 900 px steht die Spalte rechts neben der
   Tabelle - am grossen Bildschirm im Verhaeltnis 3 : 2 (Spalte
   mindestens 360 px), im Schmalband 900-1199 px 7 : 3 mit Spalte ab
   300 px (Issue 67, Regeln im Block darunter). Die Spalte ist klebend
   (Issue 18, Issue 67): beim Rollen bleibt sie UNTER dem klebenden
   Seitenkopf stehen (top: Kopfhohe + 16 px); ihre Hoehe ist auf das
   sichtbare Restband zwischen Seitenkopf und Fusszeile begrenzt
   (16 px Luft oben und unten) - ist ihr Inhalt hoeher, rollt sie in sich
   selbst. Die Umbruch-Regeln der Spalte (anywhere zum break-word ab
   900 px, nowrap fuer Rufnummern) stehen im Block darunter. */
.firmen-ansicht {
  margin: var(--abstand-6) 0 0;
}

.firma-detailspalte {
  display: none;
}

@media (min-width: 900px) {
  .firmen-ansicht {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(var(--breite-spalte), 2fr);
    gap: var(--abstand-9);
    align-items: start;
  }

  .firmen-ansicht .firmen-tabelle {
    margin: 0;
  }

  .firma-detailspalte {
    display: block; /* Detailspalte nur am Rechner (LEAD-T3b) */
    position: sticky; /* klebt UNTER dem Seitenkopf (Issues 18 und 67) */
    top: calc(var(--kopf-hoehe) + var(--abstand-7)); /* Kopfhoehe + 16 px Luft (Issue 67) */
    max-height: calc(var(--hoehe-fenster) - var(--kopf-hoehe) - var(--fuss-hoehe) - var(--abstand-10)); /* Restband zwischen klebendem Kopf und klebendem Fuss */
    overflow-y: auto;
    background-color: var(--farbe-flaeche-2);
    border-radius: var(--radius);
    padding: var(--abstand-7) var(--abstand-8);
  }
}

/* Schmalband (900-1199 px, Issue 67): hier passt die Tabelle neben die
   360-px-Spalte nicht mehr - sonst wuerde ihr Inhalt hinter die
   Infokarte ragen. Drei Hebel halten sie LINKS der Spalte: die Spalte
   schrumpft bis 300 px (Verhaeltnis 7 : 3), der Inhalt darf sich
   verkleinern (Regel unten: Name, Domain und Zellen brechen im Wort,
   die Rufnummer in sich) und der Tabellen-Behaelter schneidet (clip)
   ab, falls der Inhalt selbst dann noch breiter ist - hinter der Spalte
   landet nie etwas. Zur Verkleinerung: die Mindestbreite der Tabelle
   haengt sonst am laengsten EINZELTOKEN je Zelle (die Domain
   "muster-garten-und-landschaftsbau-einzelunternehmen.example",
   ein Gewerk wie "Landschaftsbau", die 8 Ziffern der Rufnummer) -
   bei 900 px lief sie so einen halben Zentimeter an dem Behaelter
   vorbei, und der Spaltenkopf "Google" endete HINTER der Infokarte
   (Playwright-Gate, Reparatur 1). clip ist bewusst KEIN overflow-x:
   auto: eine Rolleiste waere ein Scrollfeld, und in einem Scrollfeld
   rastet der klebende Tabellenkopf am BEHAELTER statt am Fensterrand
   ein - clip haelt ihn am Fenster. */
@media (min-width: 900px) and (max-width: 1199px) {
  .firmen-ansicht {
    grid-template-columns: minmax(0, 7fr) minmax(var(--breite-spalte-schmal), 3fr);
  }

  .firmen-tabellen-bereich {
    overflow-x: clip;
  }

  .firmen-tabelle .rufnummer {
    white-space: normal;
  }

  /* Der Text der Tabelle gibt in sich nach und haelt damit die
     Mindestbreite der TABELLE unter der Behaelter-Breite: die Zelle
     folgt der Breite, die der Behaelter ihr bietet, statt am
     laengsten Token haengenzubleiben (Gate-Reparatur 1). anywhere
     bricht im Wort NUR dort, wo ein Token auf seiner Zeile nicht
     mehr passt; die Verteilung der Spalten folgt weiter dem Inhalt.
     Der Direkttext der Zellen (Branche, Mitarbeiter, Google) erbt
     die Regel ueber die Zelle; Name und Domain tragen eigene
     Umbruch-Regeln (break-word) und muessen es daher AUSDRUECKLICH
     bekommen. Die Spaltenkoepfe bleiben unangetastet: ihre Worte
     (rund 48-88 px) halten jede Spalte ohnehin ueber der
     Text-Minimalbreite, so bleibt die Mindestbreite der Tabelle
     (rund 330 px) unter der schmalsten Behaelter-Breite (513 px
     bei 900 px Fenster). */
  .firmen-tabelle .firmen-name,
  .firmen-tabelle .firmen-domain,
  .firmen-tabelle td {
    overflow-wrap: anywhere;
  }
}

/* Eckdaten zweispaltig in der Detailspalte ab 1200 px Fensterbreite
   (Issue 18); in den Karten am Handy bleiben sie einspaltig */
@media (min-width: 1200px) {
  .firma-detailspalte .detail-eckdaten {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--abstand-7);
  }
}

/* Karten am Handy (unter 900 px) - dieselben Firmen wie in der Tabelle */
.firma-karten {
  margin: var(--abstand-6) 0 0;
}

.firma-karte {
  margin: 0 0 var(--abstand-6);
  padding: var(--abstand-7) var(--abstand-8);
  background-color: var(--farbe-flaeche-2); /* Karte auf leicht abgesetzter Flaeche */
  border-radius: var(--radius);
}

.firma-karte .rufnummer {
  display: inline-block;
  padding: var(--abstand-3) 0; /* Tippflaeche am Handy */
}

.karte-grund {
  margin: var(--abstand-2) 0 0;
}

.karte-details {
  margin: var(--abstand-4) 0 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein); /* Daten - nie kleiner als 14 px */
  line-height: var(--zeile-text);
}

/* Ab 900 px (Rechner): die Tabelle, nicht die Karten; unter 900 px
   (Handy) zeigen die Karten - je Breite zeigt das CSS genau eine Ansicht */
@media (min-width: 900px) {
  .firmen-ansicht .firmen-tabelle {
    display: table;
  }

  .firma-karten {
    display: none;
  }
}

/* --- Detail einer Firma (LEAD-T3b, Abschnitt 9): EIN Baustein in der
       Spalte am Rechner und in den Karten am Handy --- */
.firma-detail-name {
  font-size: var(--schrift-abschnitt); /* Namens-Ueberschrift: Abschnitt-Stufe, fett */
  font-weight: var(--gewicht-fett);
  line-height: var(--zeile-normal);
  margin: 0;
  overflow-wrap: anywhere; /* am Handy bricht auch ein langer Einzeltoken */
}

.detail-telefon {
  margin: var(--abstand-6) 0 0;
}

.detail-nummer {
  margin: 0;
  font-size: var(--schrift-gross); /* Rufnummer: 20 px, 600, Ziffern gleich breit */
  font-weight: var(--gewicht-halbfett);
  line-height: var(--zeile-normal);
  font-variant-numeric: tabular-nums;
  /* am Handy darf eine ueberlange Nummer umbrechen, uebersteht aber nie
     waagrecht; ab 900 px greift die Rufnummern-Regel weiter unten */
  overflow-wrap: anywhere;
}

.detail-nummer-zusatz {
  margin: var(--abstand-1) 0 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein); /* Daten - nie kleiner */
  line-height: var(--zeile-text);
}

/* der Anrufen-Knopf ist NICHT der Akzent-Knopf - den behaelt der Download */
.anruf-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tippflaeche); /* Tippflaeche */
  min-width: var(--tippflaeche);
  margin: var(--abstand-4) 0 0;
  padding: var(--abstand-5) var(--abstand-8);
  font: inherit;
  font-weight: var(--gewicht-halbfett);
  text-decoration: none;
  color: var(--farbe-text);
  background-color: var(--farbe-flaeche);
  border: var(--linie-dick) solid var(--farbe-feldrand);
  border-radius: var(--radius);
}

.detail-links {
  margin: var(--abstand-6) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--abstand-7);
}

.detail-link,
.detail-beleg-link {
  color: var(--farbe-text);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.detail-abschnitt {
  margin: var(--abstand-7) 0 0;
}

.detail-ueberschrift {
  font-size: var(--schrift-abschnitt); /* Abschnitt-Stufe */
  font-weight: var(--gewicht-halbfett);
  line-height: var(--zeile-normal);
  margin: 0 0 var(--abstand-2);
}

.detail-abschnitt-text {
  margin: 0;
  overflow-wrap: anywhere;
}

.detail-eckdaten {
  margin: 0;
}

.detail-eckdatum {
  margin: 0 0 var(--abstand-4);
}

.detail-eckdaten dt {
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein); /* Daten - nie kleiner */
  line-height: var(--zeile-text);
}

.detail-eckdaten dd {
  margin: 0;
  overflow-wrap: anywhere;
}

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

.detail-beleg {
  margin: 0 0 var(--abstand-4);
}

.detail-beleg-zitat {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Umbrueche am Rechner (Issue 18): die Bausteine der Detailspalte brechen
   nur noch dort, wo ein Wort nicht in die Zeile passt; unter 900 px
   (Karten am Handy) halten die Grundregeln oben sie mit anywhere davon
   ab, waagrecht ueberzustehen. Dieser Block steht bewusst NACH den
   Grundregeln - sonst gewaenne dort die spaetere anywhere-Regel. Die
   Rufnummern der Tabelle (.rufnummer) und des Bausteins (.detail-nummer)
   brechen ab 900 px nie um. */
@media (min-width: 900px) {
  .firma-detail-name,
  .detail-abschnitt-text,
  .detail-eckdaten dd,
  .detail-beleg-zitat,
  .detail-link,
  .detail-beleg-link {
    overflow-wrap: break-word;
  }

  /* bei .detail-nummer entfaellt das anywhere der Grundregel - eine
     ueberlange Nummer braeche sonst trotz nowrap an beliebiger Stelle.
     In der TABELLE darf die Nummer im Schmalband (900-1199 px, Block
     oben) ausnahmsweise umbrechen (Issue 67); ab 1200 px, wo die
     Tabelle neben die unversehrte 360-px-Spalte passt, gilt die
     Einzeiligkeit unveraendert. */
  .rufnummer,
  .detail-nummer {
    white-space: nowrap;
  }

  .detail-nummer {
    overflow-wrap: normal;
  }
}

/* "Mehr erfahren" in jeder Karte am Handy: klappt den Baustein in der
   Karte auf (ohne Seitenwechsel, ohne JavaScript) */
.karte-mehr {
  margin: var(--abstand-4) 0 0;
}

.karte-mehr > summary {
  min-height: var(--tippflaeche); /* Tippflaeche */
  padding: var(--abstand-3) 0;
  font-weight: var(--gewicht-halbfett);
  cursor: pointer;
}

.karte-mehr > summary::marker,
.karte-mehr > summary::-webkit-details-marker {
  color: var(--farbe-text-leise);
}

/* --- Rechtstext der Rechtsseiten (Issue 79 und 80): der Markdown-Text aus
   docs/rechtstexte/, zerlegt in Ueberschriften (h2/h3), Absaetze (Zeilum-
   brueche der Datei als br), ungeordnete Listen und Pipe-Tabellen -
   Groessen aus Abschnitt 3, Farben nur aus dem Farbsatz (der Linktext
   unterstrichen: die Bedeutung "Link" steht nie nur in der Farbe). --- */
.rechtstext {
  margin: var(--abstand-9) 0 0;
}

.rechtstext p {
  margin: var(--abstand-6) 0 0;
}

.rechtstext a {
  color: var(--farbe-text);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

/* Listen der Datei (Issue 80, Datenschutz): eingerueckt, jeder Eintrag
   tragt das Zeichen des Listenstils - Bedeutung nur durch die Struktur. */
.rechtstext ul {
  margin: var(--abstand-6) 0 0;
  padding-left: var(--abstand-9);
}

.rechtstext li {
  margin: var(--abstand-2) 0 0;
}

/* Technische Bezeichner aus Backtick-Spaenen (Issue 80): Karton neben der
   Seitenflaeche, Rand wie die Linien - kein zweiter Schriftton noetig. */
.rechtstext code {
  font-family: ui-monospace, monospace;
  padding: var(--linie-duenn) var(--abstand-2);
  background-color: var(--farbe-flaeche-2);
  border: var(--linie-duenn) solid var(--farbe-linie);
  overflow-wrap: anywhere;
}

.rechtstext-tabelle {
  width: 100%;
  border-collapse: collapse;
  margin: var(--abstand-6) 0 0;
}

.rechtstext-tabelle th,
.rechtstext-tabelle td {
  text-align: left;
  vertical-align: top;
  padding: var(--abstand-5) var(--abstand-6) var(--abstand-5) 0;
  border-bottom: var(--linie-duenn) solid var(--farbe-linie);
  overflow-wrap: anywhere;
}

/* Spaltenkoepfe wie die Daten der Liste: klein, aber nie kleiner als 14 px */
.rechtstext-tabelle th {
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
  font-weight: var(--gewicht-halbfett);
}

/* --- Fuss: Impressum und Datenschutz (Ziele baut LEAD-T1c) ---
   Klebend (Issue 67): die Fusszeile bleibt am UNTEREN Fensterrand
   (position: sticky; bottom: 0), deckend (die Seite laeuft unter ihr
   durch) und ueber dem Inhalt; auf kurzen Seiten steht sie wie bisher
   am Seitenende (= fensterrand). Der Rand oben bleibt.
   Schlank am Handy: der <=-480-px-Block am DATEIENDE. Er muss NACH dieser
   Grundregel stehen (gleichwertige Regeln: die spaetere gewinnt) - sonst
   gewinnt hier das groessere Futter (10 px) und das Umknicken in Reihen
   (wrap) und die Fusszeile waechst am Handy ueber 90 px, statt <= 56 px
   zu bleiben (Playwright-Gate, Reparatur 1). */
.fuss {
  position: sticky; /* klebt unten am Fensterrand (Issue 67) */
  bottom: 0;
  z-index: var(--ebene-kopf);
  display: flex;
  /* Wenn der Stand (Issue 36) neben den beiden Links nicht mehr passt
     (z. B. 320 px), faellt er auf die eigene Zeile - die Fusszeile darf
     nie waagerecht ueber den Rand hinausragen. Am Handy (unter 480 px)
     steht sie als EINE Reihe - die schlanke Regel am Dateiende; am
     Rechner bleibt das Umbruch-Verhalten wie bisher. */
  flex-wrap: wrap;
  gap: var(--abstand-4);
  padding: var(--abstand-5) var(--abstand-9);
  background-color: var(--farbe-flaeche); /* deckend, aus dem Farbsatz */
  border-top: var(--linie-duenn) solid var(--farbe-linie);
}

/* Der Code-Stand rechts in der Fusszeile (Issue 36): schlichter Text -
   kein Knopf, kein Link (die Adresse /version ist reiner Endpunkt, steht
   in keiner Navigation); die Bedeutung tragt der Text selbst, nie nur
   eine Farbe. Die Farbe kommt aus dem Farbsatz: --farbe-text erfuellt die
   Kontrast-Regel (>= 4,5 : 1) in hell UND dunkel.

   (margin-left: auto schiebt den Stand neben die beiden Links nach
   rechts; align-self: center haelt ihn auf der Mittellinie der Zeile,
   die Links bleiben mit ihrer 44-px-Tippflaeche unangetastet.) */
.fuss-stand {
  margin-left: auto;
  align-self: center;
  color: var(--farbe-text);
}

/* --- Anschmiegung an schmale Bildschirme ---
   Bewusst NACH den Grundregeln von .fuss und .fuss-stand (gleichwertige
   Regeln: die spaetere gewinnt). Vor dem Umzug stand dieser Block davor:
   das groessere Futter (10 px) und wrap der Grundregel gewannen dann am
   Handy, und die Fusszeile wurde 93 px hoch statt <= 56 px
   (Playwright-Gate, Reparatur 1). Kopf und Inhalt aendern sich durch den
   Standort nicht: ihre Grundregeln stehen ohnehin weiter oben. */
@media (max-width: 480px) {
  .kopf {
    padding: var(--abstand-5) var(--abstand-7); /* Hoehe unveraendert (Issue 67): --kopf-hoehe gilt in jeder Breite */
  }

  /* Der Fuss bleibt klein (Issue 67): 44 px Zielflaeche + 2 x 4 px Futter
     + 1 Rand = 53 px. Eine Reihe (nowrap): nicht in Reihen umbrechen,
     sondern die Texte geben nach - Rueckmeldung und Stand (die beiden
     nachgiebigen Elemente brechen in sich, hoechstens in 2 Zeilen; 2 x
     1,4 x 14 px = 39 px - die Zeile bleibt schmaler als 44 px und die
     Gesamt-Hoehe bleibt unter 56 px), Impressum und Datenschutz halten
     ihre Breite (flex-shrink: 0). Ganz am Ende (unter ~260 px) bricht
     anywhere im Wort, falls auch das nicht reicht - niemals wird
     waagrecht ueberlaufen. */
  .fuss {
    padding: var(--abstand-2) var(--abstand-6);
    flex-wrap: nowrap;
    gap: var(--abstand-2);
    font-size: var(--schrift-klein); /* klein-Stufe (Abschnitt 3): die 4 Texte passen in eine Reihe */
    line-height: var(--zeile-normal); /* 2 umgebrochene Zeilen = 39 px, schmaler als die 44-px-Reihe */
    overflow-wrap: anywhere; /* nur ganz am Ende: brechen statt waagrecht laufen */
  }

  .fuss a {
    padding: 0; /* keins: die 14-px-Texte sind selbst breiter als 44 px (Tippflaeche) */
    flex-shrink: 0; /* Impressum und Datenschutz bleiben ganz (auch das Wort) */
  }

  /* nur Rueckmeldung und Stand geben nach (Rueckmelde-Link zurueck von
     der Regel oben): sie sind es, die in sich umbrechen, wenn es eng wird */
  .fuss .fuss-feedback {
    flex-shrink: 1;
  }

  .inhalt {
    padding: var(--abstand-7);
  }

  /* die Leiste (Issue 26) braucht hier nichts: sie steht in jeder Breite
     als Spalte untereinander */
}

/* --- Bewegung reduzieren (Abschnitt 4.9) --- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --- Textseiten (Issue 93): die wiederverwendbare Gestaltung fuer
   laengere Textseiten (Impressum und Datenschutz, spaeter weitere).
   Sebastian, 11.10.2026: "nicht jede neue Seite von Grund auf layouten" -
   die Klasse .textseite kommt auf den Textkasten (.rechtstext.textseite),
   .inhalt--textseite am Rahmen-Inhalt stellt auf die Textseiten-Breite um.

   Die Regeln stehen bewusst am DATEIENDE: der Regelbaum bis zum oberen
   Block ist die Pruefdatei des Tickets 92 (tests/design_werte_vorher.json,
   pixelgleich) - neue Regeln kommen nur DAHINTER hinzu, bestehende
   Deklarationen bleiben Ort und Wert unveraendert.

   Abstand vor Ueberschriften: die Ueberschrift gehoert sichtlich zum
   FOLGENDEN Text - oben mehr als zwischen zwei Absaetzen (die messen 12 px,
   --abstand-6), unten weniger als oben. h3 (Unterkapitel) etwas weniger
   oben als h2 (Abschnitt). Massgeblich ist der sichtbare Abstand (Rander
   fallen zusammen): h2 -> h3 direkt nebeneinander misst zusaetzlich max(10, 24)
   = 24 px, der h2-Block darueber bleibt mit 32 px groesser als unten. --- */
.textseite p,
.textseite ul {
  max-width: var(--breite-lese); /* Fliesstext bleibt auf der Lesebreite */
}

.textseite h2 {
  margin: var(--abstand-10) 0 var(--abstand-5); /* oben 32 px, unten 10 px */
}

.textseite h3 {
  margin: var(--abstand-9) 0 var(--abstand-5); /* oben 24 px, unten 10 px */
}

/* Rahmen-Inhalt der Rechtsseiten: die Textseiten-Breite statt der
   Standard-Spalte (672 px) - die Tabelle laeuft darueber heraus. */
.inhalt--textseite {
  max-width: var(--breite-textseite);
}

/* Der Tabellenrahmen: der Rahmen traegt Rand und Rundung und rollt auf
   schmalen Bildschirmen WAAGERECHT IN SICH (overflow-x: auto) - die Seite
   selbst bleibt ohne waagerechten Ueberlauf. Der Rahmen ist Tastatur-Ziel
   (Vorleseprogramme und Tastatur muessen den rollenden Inhalt erreichen;
   axe: scrollable-region-focusable). Die Tabelle drin behaelt ihre
   Spaltenkoepfe und Zeilenraender (Klasse .rechtstext-tabelle), ohne eigenen
   Abstand nach oben (der Rahmen traegt ihn) und ohne Rand der letzten Zeile
   (sonst verdoppelt sich die Linie am Rahmenboden). */
.textseite-tabelle {
  margin: var(--abstand-6) 0 0;
  overflow-x: auto;
  padding: 0 var(--abstand-5); /* Luft am Rahmenrand, links wie rechts */
  border: var(--linie-duenn) solid var(--farbe-linie);
  border-radius: var(--radius);
}

.textseite-tabelle .rechtstext-tabelle {
  margin: 0;
}

.textseite-tabelle tbody tr:last-child td {
  border-bottom: none; /* der Rahmen schliesst - keine Doppel-Linie */
}

/* Kein Umbruch mitten im Wort (Issue 93): in Tabellenzellen brechen Woerter
   nur, wenn ein Einzeltoken breiter als die Zelle ist (break-word):
   die anywhere-Regel der Grundgestaltung (.rechtstext-tabelle oben) bleibt
   fuer die Seiten OHNE Textseiten-Klasse; hier gilt die feinere. Woerter
   IN Links und code-Spaenen erben die feinere Regel der Zelle (ihre eigene
   anywhere-Regel aus dem Fliesstext bleibt nur im Fliesstext wirksam); an
   Trennstrichen (Login-Mail) bricht die Zeilenschaltung weiter als an der
   Wortgrenze - gemessen in rechtliches_layout.spec.ts. */
.textseite-tabelle th,
.textseite-tabelle td {
  overflow-wrap: break-word;
}

.textseite-tabelle th a,
.textseite-tabelle td a,
.textseite-tabelle th code,
.textseite-tabelle td code {
  overflow-wrap: break-word;
}

/* --- Ihr Arbeitsstand (Issue 69): der Abschnitt am ENDE der Detailspalte
   (nach Belege, abgesetzt vom Rest - Linie oben) und am Handy in den
   Karten. Der Baustein steht in EINER Teilvorlage (_arbeitsstand.html) in
   der Spalte und in den Karten: die zwei Auswahlen stehen am Rechner
   nebeneinander (ab 900 px, der Standort der Detailspalte), am Handy
   (393 px und darunter) untereinander. Felder, Groessen und Farben
   kommen nur aus dem Design-Modul (masse.css / farbsatz.css). --- */
.arbeitsstand {
  margin: var(--abstand-9) 0 0; /* Abstand nach oben wie ein Abschnitt */
  padding: var(--abstand-8) 0 0;
  border-top: var(--linie-duenn) solid var(--farbe-linie);
}

.arbeitsstand-kopf {
  display: flex;
  flex-wrap: wrap; /* schmaler Falles steht der Zeitpunkt unter dem Titel */
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-1) var(--abstand-5);
}

.arbeitsstand-titel {
  font-size: var(--schrift-abschnitt); /* Abschnitt-Stufe, halbfett */
  font-weight: var(--gewicht-halbfett);
  line-height: var(--zeile-normal);
  margin: 0;
}

.arbeitsstand-zeitpunkt {
  margin: 0; /* rechts neben der Ueberschrift, leise (Daten/Hinweise) */
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
  line-height: var(--zeile-text);
  font-variant-numeric: tabular-nums;
}

.arbeitsstand-formular {
  margin: 0;
}

.arbeitsstand-auswahlen {
  display: grid;
  gap: var(--abstand-5);
  margin: var(--abstand-7) 0 0;
}

/* ab 900 px: die zwei Auswahlen NEBENEINANDER (Detailspalte); unter 900 px
   (Handy, 393 px) ohne Spalten: untereinander (Issue 69) */
@media (min-width: 900px) {
  .arbeitsstand-auswahlen {
    grid-template-columns: 1fr 1fr;
  }
}

.arbeitsstand-feld {
  display: block;
  margin: 0;
}

.arbeitsstand-feld-name {
  display: block; /* sichtbare Beschriftung ueber dem Feld */
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
  line-height: var(--zeile-text);
}

.arbeitsstand-auswahl,
.arbeitsstand-notiz {
  width: 100%;
  margin: var(--abstand-2) 0 0;
  padding: var(--abstand-3) var(--abstand-4);
  font: inherit;
  font-size: var(--schrift-normal); /* Fliesstext - nie unter 16 px */
  line-height: var(--zeile-text);
  color: var(--farbe-text);
  background-color: var(--farbe-flaeche);
  border: var(--linie-dick) solid var(--farbe-feldrand);
  border-radius: var(--radius);
  min-height: var(--tippflaeche); /* Tippflaeche am Handy */
}

.arbeitsstand-notiz {
  display: block;
  resize: vertical; /* in sich breiter/niedriger ziehen - nie ueber die Spalte */
}

.arbeitsstand-notiz-feld {
  margin: var(--abstand-5) 0 0;
}

/* Rueckmelde-Zeile am Ende des Abschnitts (role="status"): "Automatisch
   gespeichert" - nach dem Speichern "Gespeichert um HH:MM Uhr" oder bei
   Fehler der Fehlersatz; Vorleseprogramme kuendigen die Aenderung an. */
.arbeitsstand-hinweis {
  margin: var(--abstand-5) 0 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
  line-height: var(--zeile-text);
}

/* Die Hoehe der klebenden Spalte (Issue 69, nachgeschoben): ihr Inhalt ist
   seit dem Arbeitsstand-Abschnitt hoeher als das Restband zwischen klebendem
   Kopf und klebendem Fuss - die Spalte rollt in sich selbst (wie heute).
   Damit ihre Unterkante aber auch auf der UNGEROLLTEN Seite im Fenster
   bleibt, zaehlt die Begrenzung zusaetzlich drei Breiten Luft: das
   Restband (32 px) plus der Raum, den die Kopfzeile der Liste vor der
   Spalte beansprucht (64 px). Die Regel steht bewusst NACH der Grundregel
   oben - spaeter gewinnt. */
@media (min-width: 900px) {
  .firma-detailspalte {
    max-height: calc(var(--hoehe-fenster) - var(--kopf-hoehe) - var(--fuss-hoehe) - 3 * var(--abstand-10));
  }
}

/* --- Filterleiste nach Arbeitsstand (Issue 70) --- */
/* EINE Zeile direkt ueber der Liste, linksbuendig unter der Ueberschrift
   (die Suchzeile daneben ist ein eigenes Ticket). Sechs Links im
   Knopf-Aussehen - am Handy umbrechend (Reihe bricht, je Knopf bleibt
   ganz) und je mindestens so hoch wie die Tippflaeche. Alle Groessen und
   Farben aus dem Design-Modul. */
.filterleiste {
  display: flex;
  flex-wrap: wrap; /* am Handy brechen die Knoepfe in Reihen */
  gap: var(--abstand-3) var(--abstand-4);
  margin: var(--abstand-7) 0 0;
}

.filter-knopf {
  display: inline-flex; /* vertikal mittig in der Tippflaeche */
  align-items: center;
  min-height: var(--tippflaeche); /* Knoepfe am Handy >= 44 px (AC 5) */
  padding: var(--abstand-3) var(--abstand-5);
  font: inherit;
  font-size: var(--schrift-normal); /* Fliesstext - nie unter 16 px */
  font-weight: var(--gewicht-halbfett);
  color: var(--farbe-text);
  background-color: var(--farbe-flaeche-2); /* Knopfflache wie die Karten */
  border: var(--linie-duenn) solid var(--farbe-linie);
  border-radius: var(--radius);
  text-decoration: none; /* der gewaehlte Knopf unterstreicht (Regel unten) */
  cursor: pointer;
  white-space: nowrap; /* je Knopf bleibt ganz - die Reihe bricht */
}

/* Der gewaehlte Knopf (genau einer, aria-current="true"): F E T T und
   unterstrichen - nicht nur farbig (Farbe ist nie der einzige Traeger);
   dazu der dickere Rand als Form-Marke. */
.filter-knopf[aria-current="true"] {
  font-weight: var(--gewicht-fett);
  border: var(--linie-dick) solid var(--farbe-feldrand);
}

/* Unterstreichen an den Text-Span (in einem Flex-Knopf erbt die
   Schreiblinie nicht sicher auf die Zeilen) - sichtbar am Text selbst. */
.filter-knopf[aria-current="true"] .filter-knopf-text {
  text-decoration: underline;
}

/* --- Der Arbeitsstand in der Liste (Issue 70): die Zellen der drei
   neuen Spalten --- Erreicht und Ergebnis als Text-Etikett (das Wort
   traegt die Bedeutung), ohne Stand-Zeile der Strich in leise Farbe.
   Das Datum der "Zuletzt"-Zelle steht ausgerichtet (tabular-nums). Die
   Zellen geben in sich nach (anywhere): drei weitere Spalten druecken
   die Mindestbreite der Tabelle - ohne die Nachgib-Regel wuerde sie in
   der Schmalbreite und ab 1200 px hinter die Detail-Spalte ragen (die
   Schmalband-Regel oben wird so zur Grundregel; die Rufnummer haelt
   auch da in sich, ausser im Schmalband). Die Regel steht am
   Dateiende: spaeter gewinnt, der Pixelgleich-Mainstand bleibt
   unangetastet. */
.firmen-tabelle .firmen-name,
.firmen-tabelle .firmen-domain,
.firmen-tabelle td {
  overflow-wrap: anywhere;
}

.stand-etikett {
  display: inline-block; /* Etikett: Rand + Flache + Radius um das Wort */
  padding: var(--abstand-1) var(--abstand-3);
  font-size: var(--schrift-klein); /* Daten - nie kleiner als 14 px */
  line-height: var(--zeile-text);
  color: var(--farbe-text);
  background-color: var(--farbe-flaeche);
  border: var(--linie-duenn) solid var(--farbe-linie);
  border-radius: var(--radius);
}

/* der Strich in den leeren Stand-Zellen (ohne Zeile - AC 1, Issue 70):
   leise wie die Spaltenkoepfe */
.stand-leer {
  color: var(--farbe-text-leise);
}

.stand-zuletzt {
  font-variant-numeric: tabular-nums; /* Datum und Uhrzeit rasten ausgerichtet */
}

/* Karten am Handy (Issue 70): der Arbeitsstand je Wert eine eigene Zeile
   mit Spaltenwort, leere Werte samt Wort entfallen - gleicher Ton wie der
   Zeile der Daten darueber */
.karte-stand {
  margin: var(--abstand-2) 0 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein); /* Daten - nie kleiner als 14 px */
  line-height: var(--zeile-text);
  overflow-wrap: anywhere; /* Zellen am Handy geben in sich nach */
}

/* --- Gate-Reparatur zur Filterleiste (Issue 70): LAGE und SPALTENBREITEN ---
   Die Leiste steht als Gitter-Reihe in der LINKEN Ansichtsspalte (Reihe 1,
   ueber der Tabelle): so bleibt sie wo sie war (direkt ueber der Liste,
   unter der Kopfzeile), ohne die Detailspalte nach unten zu druecken - die
   Spalte erhaelt ihre Lage aus dem main-Stand zurueck (top = Kopfzeile +
   Abstand, Unterkante innerhalb des Fensters auf dem ersten Bildschirm).
   Sie ueberbrueckt beide Reihen und rollt wie bisher. Unter 900 px ist der
   Blockfluss unveraendert (Karten unter der Leiste). */
@media (min-width: 900px) {
  .firmen-ansicht .filterleiste {
    grid-column: 1;
    grid-row: 1;
  }

  .firmen-ansicht .firmen-tabellen-bereich {
    grid-column: 1;
    grid-row: 2;
  }

  .firmen-ansicht .firma-detailspalte {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* Die 8 Spalten der Firmentabelle am breiten Schirm (Reparatur zur
   dritten Spalten-Serie, Gate-Reparatur): die automatische Verteilung
   presst die Firmenspalte auf das Minimum - ALLE Namen brachen um.
   Zuerst die Spaltenabgabe der Ansicht: ab 1600 px haelt der breite
   Schirm der Tabelle etwas mehr Raum (Verhaeltnis 5 : 3 statt 3 : 2 -
   die Detailspalte bleibt ueber ihrer Mindestbreite). Die
   Prozentbreiten geben jede Spalte ihren Anteil: die Firma haelt die
   Breite (die Namen bleiben einzeilig, hoechstens die laengsten),
   Telefon haelt die Nummer einzeilig (nowrap der Regel oben), die
   Daten-Zellen im Notfall in sich nach (anywhere, Regel oben).
   Prozent, keine festen Werte - wie der Waechter es verlangt. */
@media (min-width: 1600px) {
  .firmen-ansicht {
    grid-template-columns: minmax(0, 25fr) minmax(var(--breite-spalte), 15fr);
  }

  .firmen-tabelle tbody td {
    font-size: var(--schrift-klein); /* Daten der 8-Spalten-Tabelle */
  }

  .firmen-tabelle th:nth-child(1),
  .firmen-tabelle tbody td:nth-child(1) {
    width: 35%; /* Firma: die Namen bleiben einzeilig */
  }

  .firmen-tabelle th:nth-child(2),
  .firmen-tabelle tbody td:nth-child(2) {
    width: 19.5%; /* Telefon: die Nummer einzeilig (nowrap) */
  }

  .firmen-tabelle th:nth-child(3),
  .firmen-tabelle tbody td:nth-child(3) {
    width: 5%; /* Branche */
  }

  .firmen-tabelle th:nth-child(4),
  .firmen-tabelle tbody td:nth-child(4) {
    width: 8%; /* Mitarbeiter */
  }

  .firmen-tabelle th:nth-child(5),
  .firmen-tabelle tbody td:nth-child(5) {
    width: 8%; /* Google */
  }

  .firmen-tabelle th:nth-child(6),
  .firmen-tabelle tbody td:nth-child(6) {
    width: 5.5%; /* Erreicht */
  }

  .firmen-tabelle th:nth-child(7),
  .firmen-tabelle tbody td:nth-child(7) {
    width: 6%; /* Ergebnis */
  }

  .firmen-tabelle th:nth-child(8),
  .firmen-tabelle tbody td:nth-child(8) {
    width: 13%; /* Zuletzt: Datum und Uhrzeit */
  }
}

/* --- Das Firmenblatt (Issue 105): die Liste in voller Breite und die
   Firma als Blatt am unteren Fensterrand --- Ab 900 px steht die Tabelle
   ALLEIN in der Liste (die Detailspalte rechts daneben ist aufgehoben)
   und nutzt die volle Fensterbreite: die Maximalbreite des breiten Rahmens
   (1600 px) gilt auf der Liste nicht mehr, und die Seitenluft wird auf
   24 px geschnurt, die der Tabelle ihre volle Breite
   laesst. Eine Wahl setzt das FIRMENBLATT in den festen Platz
   (#firma-blatt-platz, der immer in der Antwort steht): ein unten FEST
   sitzendes Blatt in voller Breite, das die Fusszeile verdeckt, solange
   es offen ist. Ohne Wahl bleibt der Platz LEER - kein Blatt, keine
   zweite Spur.

   Die bisherigen Regeln der Detailspalte bleiben oben stehen (der Waechter
   haelt ihre Reihenfolge und Werte fest); dieser Block ueberschreibt sie
   bewusst: die Lage (fixed statt klebend), die Hoehe (das Blatt-Mass
   statt des Restband-Rechnens), die Ebene (ueber dem klebenden Kopf und
   der Fusszeile) und das Rollen in sich selbst (bewusst erneut
   deklariert). Werte aus dem Design-Modul. */
@media (min-width: 900px) {
  /* die Liste in voller Breite: die 1600-px-Maximalbreite des Rahmens
     ist hier aufgehoben, die Seitenluft schrumpft auf 24 px (die Tabelle
     laeuft bis an die Fensterbreite abzueglich dieser Luft) */
  .inhalt--weit {
    max-width: none;
    padding: var(--abstand-9);
  }

  /* EINE Gitterspur: die zweite Spalte der bisherigen Aufteilung ist
     aufgehoben - die Tabelle erhaelt die volle Breite */
  .firmen-ansicht {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Bezugsrahmen der Abdunkelung (inset) und Raum fuer das offene Blatt:
     solange das Blatt offen ist, steht unter seiner Oberkante so viel
     Seitenhoehe, wie das Blatt hoch ist - die gewaehlte Zeile kann das
     Fenster hinaufrollen, bis sie GANZ ueber der Blatt-Oberkante steht
     (AC 4), und verschwindet nicht dahinter. */
  .firmenliste {
    position: relative; /* Bezugsrahmen des Schleiers */
  }

  .firmenliste.blatt-offen {
    padding-bottom: var(--hoehe-blatt);
  }

  /* die Abdunkelung der Liste unter dem offenen Blatt: sie FAENGT KEINE
     Klicks ab (die Zeilen bleiben klickbar), liegt ueber dem Inhalt der
     Liste (0 und 1), aber unter dem klebenden Kopf (3) und dem Blatt (4) */
  .firmenliste.blatt-offen::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--farbe-schleier-blatt);
    pointer-events: none;
    z-index: var(--ebene-schleier);
  }

  /* Daten-Zellen der 8-Spalten-Tabelle im kleinen Mass (wie bisher ab
     1600 px, jetzt fuer die ganze Breite) */
  .firmen-tabelle tbody td {
    font-size: var(--schrift-klein);
  }

  /* --- Das Blatt selbst: fixed am unteren Fensterrand, volle Breite ---
     Die alte Klebe-Lage (sticky, top, Restband-Maxima) ist hierdurch
     ausser Kraft: das Blatt sitzt unten ueber ALLEM (auch ueber dem
     klebenden Kopf, Ebene unter dem Blatt), verdeckt die Fusszeile und
     rollt in sich selbst (overflow-y bewusst erneut deklariert). Die
     Hoehengrenze kommt aus dem Design-Modul. */
  aside.firma-detailspalte {
    position: fixed; /* das Blatt sitzt am unteren Fensterrand (Issue 105) */
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--hoehe-blatt);
    max-height: var(--hoehe-blatt); /* die alte Restband-Grenze entfaellt */
    z-index: var(--ebene-blatt); /* ueber klebendem Kopf und Fuss (je 3) */
    border-radius: var(--radius-blatt) var(--radius-blatt) 0 0;
    box-shadow: 0 var(--schatten-versatz-blatt) var(--schatten-weiche-blatt)
      var(--farbe-schatten-blatt);
    overflow-y: auto; /* das Blatt rollt in sich selbst (bewusst uebernommen) */
    background-color: var(--farbe-flaeche-2);
    padding: var(--abstand-7) var(--abstand-8) var(--abstand-9);
  }

  /* Kopfzeile des Blatts: das Schliessen rechts (Kennung blatt.schlies-
     sen); die Flaeche traegt die Tippflaeche */
  .blatt-kopf {
    display: flex;
    justify-content: flex-end;
  }

  .blatt-schliessen {
    display: inline-flex;
    align-items: center;
    min-height: var(--tippflaeche);
    margin: calc(-1 * var(--abstand-1)) 0 0;
    padding: 0 var(--abstand-4);
    font-size: var(--schrift-klein);
    font-weight: var(--gewicht-halbfett);
    color: var(--farbe-text);
    text-decoration: none;
  }

  .blatt-schliessen:hover {
    text-decoration: underline;
  }
}

/* --- Die 8 Spalten als festes Spaltennetz (Issue 105) --- Ab 1200 px
   verteilt die Tabelle ihre Spalten nach Prozenten (festes Spaltennetz,
   kein automatisches Nachgeben mehr): jede Spalte bleibt einzeilig,
   so sind alle Zeilen gleich hoch; die FIRMA haelt die groesste Spur
   und lange Namen enden mit drei Punkten (der ganze Name steht im
   title des Links, Baustein). Die Etikett-Zellen rasten auf der Zeilenhoehe. */
@media (min-width: 1200px) {
  .firmen-tabelle {
    table-layout: fixed; /* das Spaltennetz nach Prozenten */
  }

  .firmen-tabelle th,
  .firmen-tabelle td {
    white-space: nowrap; /* jede Zelle bleibt einzeilig */
    overflow: hidden; /* was nicht passt, bleibt im Spaltennetz drin */
  }

  /* der Firmenname einzeilig; Namen, die nicht passen, enden mit drei
     Punkten (ellipsis) - der ganze Name steht im title des Links, Baustein */
  .firmen-tabelle .firmen-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* die Branche endet mit drei Punkten (ellipsis); ihr ganzer Text steht
     im title der Zelle, Baustein */
  .firmen-tabelle th:nth-child(3),
  .firmen-tabelle tbody td:nth-child(3) {
    text-overflow: ellipsis;
  }

  .firmen-tabelle th:nth-child(1),
  .firmen-tabelle tbody td:nth-child(1) {
    width: 33%; /* Firma: die groesste Spur (Namen enden mit drei Punkten) */
  }

  .firmen-tabelle th:nth-child(2),
  .firmen-tabelle tbody td:nth-child(2) {
    width: 11%; /* Telefon: die Nummer einzeilig */
  }

  .firmen-tabelle th:nth-child(3),
  .firmen-tabelle tbody td:nth-child(3) {
    width: 9.5%; /* Branche (lange Gewerke enden mit drei Punkten, title im Baustein) */
  }

  .firmen-tabelle th:nth-child(4),
  .firmen-tabelle tbody td:nth-child(4) {
    width: 7.5%; /* Mitarbeiter */
  }

  .firmen-tabelle th:nth-child(5),
  .firmen-tabelle tbody td:nth-child(5) {
    width: 5.5%; /* Google: die 8 Spalten sind Text, keine Balken */
  }

  .firmen-tabelle th:nth-child(6),
  .firmen-tabelle tbody td:nth-child(6) {
    width: 9.5%; /* Erreicht: das Etikett traegt das Wort */
  }

  .firmen-tabelle th:nth-child(7),
  .firmen-tabelle tbody td:nth-child(7) {
    width: 10%; /* Ergebnis: das Etikett traegt das Wort */
  }

  .firmen-tabelle th:nth-child(8),
  .firmen-tabelle tbody td:nth-child(8) {
    width: 14%; /* Zuletzt: Datum und Uhrzeit */
  }

  /* die Etiketten-Zellen bleiben so hoch wie die einzeiligen Zellen:
     engere Zeile, ohne vertikalen Rand - die Zeile rastet auf der
     Zeilenhoehe der einzeiligen Zeilen (AC 1) */
  .firmen-tabelle .stand-etikett {
    line-height: var(--zeile-eng);
    padding: 0 var(--abstand-3);
  }
}

/* das Spaltennetz gilt ab 1600 px UNVERAENDERT weiter: die alte Regel
   (Spaltenbreiten fuer die geteilte Ansicht, oben) wird hierdurch
   ausser Kraft gesetzt - eine Spur, dieselben Prozentanteile. */
@media (min-width: 1600px) {
  .firmen-ansicht {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Der Esc-Hinweis im Blatt-Kopf (Issue 106) --- links in der Kopf-
   zeile des Firmenblatts steht der leise Hinweis "Esc schließt" (Katalog
   blatt.esc_hinweis): klein (Stufe der Hinweise) und in der leisen
   Textfarbe - kein Bedienelement, ohne Fokus. Der Schliessen-Knopf bleibt
   rechts (die Regel des Blatt-Kopfs oben); der Hinweis schiebt sich mit
   dem freien Aussenabstand nach links. Nur Werte aus dem Design-Modul. */
.blatt-esc-hinweis {
  margin-right: auto;
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
}

/* --- Das Firmenblatt in drei Spalten (Issue 107) --- Ab 1200 px faellt
   das Blatt in ein Raster aus drei Spalten ohne Rollen (Verhaeltnis
   1,1 : 1 : 1 aus dem Design-Modul): links die Kopfreihe mit Warum, in
   der Mitte der Arbeitsstand (Tippfelder + Notiz), rechts die Eckdaten
   (zweispaltiges Raster, die Regel ab 1200 px oben greift hier weiter)
   und das Firmenprofil. Die Belege (und, nur am Rand der sichtbaren
   Firmen, der Grund) stehen im Quelltext als LETZTES und liegen im Raster
   UNTER der linken Spalte - die Tastatur laeuft dadurch in genau dieser
   Reihe (Schliessen, Anrufen, Website, LinkedIn, Tippfelder, Notiz,
   Profil-Knopf, Beleg-Links). Arbeitsstand und rechte Spalte ueberbrue-
  cken beide Raster-Reihen; das Raster setzt die linke Spalte mit auto
   (ihrem Inhalt) und gibt den Rest der Zeile 2 - beim Aufklappen des
   Firmenprofils waechst NUR die rechte Spalte (sie rollt in sich, Regel
   unten), keine andere Spalte rueckt. Das Blatt selbst rollt nicht mehr
   in sich (die Regel oben bleibt, sie wird hier ausser Kraft gesetzt):
   kopfzeile + Koerper fuellen das Blatt; der Koerper haelt die Spalten.
   Alle Werte aus dem Design-Modul; die Abstaende im Blatt bleiben bei
   oder unter 12 px (ueberschrieben, nicht geaendert - der main-Stand
   bleibt im Waechter pixelgleich). */
@media (min-width: 1200px) {
  .blatt-schliessen {
    margin: 0; /* in der Kopfzeile ohne den Versatz der Grundregel */
  }

  aside.firma-detailspalte {
    display: flex; /* Kopfzeile + Koerper: der Koerper fuellt den Rest */
    flex-direction: column;
    padding: 0 var(--abstand-8); /* senkrecht: weniger als im Blatt-Budget */
    overflow-y: hidden; /* NICHT das Blatt rollt - die Spalten halten in sich */
  }

  .blatt-koerper {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-areas:
      "eins zwei drei"
      "eins-nach zwei drei";
    grid-template-columns: var(--anteil-blatt-eins) var(--anteil-blatt-zwei) var(--anteil-blatt-drei);
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--abstand-6); /* der groesste Abstand im Blatt: 12 px */
    padding: var(--abstand-2) 0 var(--abstand-9); /* senkrecht 4 + 24 px: Kopfzeile + Polster = 72 px -> Spalten = Blatthoehe - 72 px */
  }

  .blatt-spalte {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-4); /* 8 px zwischen den Bausteinen einer Spalte */
    min-height: 0;
    overflow-y: hidden; /* jede Spalte haelt ihren Inhalt (kein Abschnitt faellt raus) */
  }

  /* Die Kopfteile (Name, Telefon, Ansprechpartner, Links) kleben an der
     Spalten-Flaeche: die eigenen Abstaende der Bausteine entfallen im
     Blatt, die Spalten-Flaeche haelt die 8 px (im Kartenteil am Handy
     bleiben sie). */
  .blatt-spalte .detail-telefon,
  .blatt-spalte .detail-ansprechpartner,
  .blatt-spalte .detail-links,
  .blatt-spalte .firma-detail-name {
    margin: 0;
  }

  .blatt-spalte--eins {
    grid-area: eins;
  }

  .blatt-spalte--eins-nach {
    grid-area: eins-nach;
  }

  .blatt-spalte--zwei {
    grid-area: zwei;
  }

  .blatt-spalte--drei {
    grid-area: drei;
  }

  /* Aufklappen des Firmenprofils (Issue 107): NUR die rechte Spalte rollt
     - die anderen Spalten bleiben, ohne Cuts; zugeklappt steht die Spalte
     oben (scrollTop = 0, nichts zu rollen) */
  .blatt-spalte--drei:has(.profil-knopf[aria-expanded="true"]) {
    overflow-y: auto;
  }

  /* Spalte 3: das ECKDATEN-RASTER zuerst (Ansicht), das Firmenprofil
     darunter - im Quelltext steht das Profil zuerst (wie in den Karten
     am Handy); die Anordnung leistet order in der Spalten-Flaeche. */
  .blatt-spalte--drei .detail-eckdaten-block {
    order: -1; /* Eckdaten zuerst (Ansicht), Quelle: Profil zuerst */
  }

  /* Die Bausteine in den Spalten: die Raster-Flaeche zaehlt die Abstande
     (12 px zwischen den Bausteinen) - die alten Abschnitts-Abstaende
     (16 px) entfallen im Blatt, im Kartenteil am Handy bleiben sie. */
  .blatt-spalte > .detail-abschnitt {
    margin: 0;
  }

  .blatt-spalte > .arbeitsstand {
    margin: 0;
    padding: 0;
    border-top: none; /* die Linie trennt am Handy weiter - im Blatt das Raster */
  }

  /* Spalte 3 muss das Eckdaten-Raster UND das gekuerzte Profil in die
     Spalten-Hoehe halten: die Paar-Abstaende stehen auf der kleinsten
     Einheit (Karten: 8 px), der letzte entfaellt ganz. */
  .blatt-spalte--drei .detail-eckdatum {
    margin-bottom: var(--abstand-1);
  }

  .blatt-spalte--drei .detail-eckdatum:last-child {
    margin-bottom: 0;
  }

  .blatt-spalte--zwei .arbeitsstand-auswahlen {
    grid-template-columns: 1fr; /* die 2x2-Gruppen stehen in der Spalte untereinander */
    gap: var(--abstand-4);
    margin: var(--abstand-6) 0 0;
  }

  .blatt-spalte--zwei .arbeitsstand-feld--erreicht {
    margin: 0; /* der Abstand zur Ueberschrift kommt von der Gruppe des Abschnitts: oben */
  }
}

/* --- Kopf des Firmen-Bausteins (Issue 107) --- Nummer groß und Knopf
   „Anrufen" in einer Zeile: die Bausteine liegen in einem Reihe-Rahmen,
   die Oberkanten auf derselben Hoehe (flex-start - die Knopf-Flaeche ist
   hoeher als die Nummer, ihre Kanten laufen bündig). Darunter der Anspre-
   chpartner als eigene Zeile und die Kopfreihe (Rang/Herkunft + Website/
   LinkedIn) mit den Trennpunkten als Zier (aria-hidden). Die Regeln gelten
   fuer den Baustein im Blatt UND in den Karten am Handy. */
.detail-telefon {
  display: flex;
  flex-wrap: wrap; /* bei einem sehr schmalen Band ruckt der Knopf unter die Nummer */
  align-items: flex-start; /* Oberkanten bündig (die Nummer kleiner als der Knopf) */
  gap: var(--abstand-4) var(--abstand-6);
}

.detail-telefon .anruf-knopf {
  margin: 0; /* in der Reihe: der Abstand haelt die Luecke zwischen beide */
}

.detail-ansprechpartner {
  margin: var(--abstand-6) 0 0;
  font-size: var(--schrift-normal); /* Fliesstext */
  line-height: var(--zeile-text);
}

.detail-trennpunkt {
  color: var(--farbe-text-leise); /* der Trennpunkt ist Zier, leise */
}

/* --- Tippfelder des Arbeitsstands (Issue 107) --- erreich und ergebnis
   sind je EINE 2x2-Gruppe echter Knoepfe (im vorhandenen Formular,
   type="submit"): der gespeicherte Wert traegt aria-pressed="true" und
   den Haken vor dem Text; die anderen Knoepfe stehen leer. Hervorhebung
   nicht nur durch den Haken: der gewaehlte Knopf ist fett und traegt den
   dicken Rand (Form-Marke, wie bei der Filterleiste). Jede Knopfflaeche
   ist mindestens die Tippflaeche (44 px). */
.arbeitsstand-gruppe {
  margin: var(--abstand-2) 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-3);
}

.arbeitsstand-gruppe > button {
  display: inline-flex; /* vertikal mittig in der Knopfflaeche */
  align-items: center;
  justify-content: center;
  min-height: var(--tippflaeche);
  padding: var(--abstand-3) var(--abstand-4);
  font: inherit;
  font-size: var(--schrift-normal); /* Fliesstext - nie unter 16 px */
  font-weight: var(--gewicht-halbfett);
  color: var(--farbe-text);
  overflow-wrap: anywhere; /* lange Werte brechen in sich, nie ueber die Gruppe */
  background-color: var(--farbe-flaeche);
  border: var(--linie-duenn) solid var(--farbe-feldrand);
  border-radius: var(--radius);
  cursor: pointer;
}

.arbeitsstand-gruppe > button[aria-pressed="true"] {
  font-weight: var(--gewicht-fett);
  border: var(--linie-dick) solid var(--farbe-feldrand);
}

/* --- Firmenprofil gekuerzt + Aufklapp-Knopf (Issue 107) --- Zugeklappt
   zeigt das Profil genau 4 Zeilen (max-height aus der Zeilenhoehe des
   Texts: 4 x 1,6 x 16 px); die Regel haengt an html.js-aktiv (das Skript
   setzt das Zeichen beim Start) - ohne JavaScript bleibt der volle Text
   unbeschnitten. Der Knopf erscheint nur, wenn der Text laenger ist als
   die vier Zeilen (das Skript misst ihn und setzt sonst das Zeichen
   hidden am Knopf); sein Klick wechselt nur aria-expanded, der Stylesheet
   hangelt: aufklappt steht der volle Text (max-height entfaellt).
   Aufklappt rollt NUR Spalte 3 (Regel oben), zugeklappt steht sie oben. */
html.js-aktiv .blatt-spalte--drei .detail-profil-text {
  max-height: calc(4 * var(--zeile-weit) * var(--schrift-normal));
  overflow: hidden;
}

html.js-aktiv
  .blatt-spalte--drei:has(.profil-knopf[aria-expanded="true"])
  .detail-profil-text {
  max-height: none; /* der ganze Text, Spalte 3 rollt in sich selbst */
}

.profil-knopf {
  align-self: flex-start; /* der Knopf haengt links unter dem Text */
  display: inline-flex;
  align-items: center;
  min-height: var(--tippflaeche); /* Tippflaeche */
  margin: 0;
  padding: var(--abstand-2) var(--abstand-5);
  font: inherit;
  font-size: var(--schrift-normal);
  font-weight: var(--gewicht-halbfett);
  color: var(--farbe-text);
  background-color: var(--farbe-flaeche);
  border: var(--linie-duenn) solid var(--farbe-feldrand);
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
}

/* --- Blättern in der Kopfreihe des Blatts (Issue 108) --- Links stehen
   die zwei Wechsel (Vorherige/Nächste im GEWÄHLTEN Filter), dazwischen
   der Zähler (n von N); die Kopfreihe hält den Hinweis und Schliessen,
   wie sie heute stehen. Die zwei Links sind echte Knöpfe in der
   Gestalt der Tippfelder (Rahmen, Tippfläche) mit demselben hx-get wie
   der Firmen-Link - am Rand (erste/letzte Firma) steht statt des Links
   ein ausgeschalteter Span ohne Rahmen, nur in der Deckkraft gedämpft:
   opacity aus dem Modul (--deckkraft-leise, 0,65 - der Kontrast bleibt
   über 4,5:1 in beiden Farbsätzen). Der Zähler leise (wie der Hinweis).
   Alle Werte aus dem Design-Modul. */
.blatt-blaettern {
  display: flex;
  align-items: center;
  gap: var(--abstand-3); /* der Zähler zwischen den zwei Links */
}

.blatt-blaettern-link,
.blatt-blaettern-rand {
  display: inline-flex;
  align-items: center;
  min-height: var(--tippflaeche); /* Tippfläche */
  padding: 0 var(--abstand-4);
  font: inherit;
  font-size: var(--schrift-klein);
  font-weight: var(--gewicht-halbfett);
  color: var(--farbe-text);
}

.blatt-blaettern-link {
  overflow-wrap: anywhere; /* nie über die Kopfreihe hinaus */
  background-color: var(--farbe-flaeche);
  border: var(--linie-duenn) solid var(--farbe-feldrand);
  border-radius: var(--radius);
  text-decoration: none;
  white-space: nowrap;
}

.blatt-blaettern-link:hover {
  text-decoration: underline; /* wie die Firmen-Links der Tabelle */
}

.blatt-blaettern-rand {
  opacity: var(--deckkraft-leise); /* ausgeschaltet: leise ohne Rahmen */
}

.blatt-blaettern-zaehler {
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
  white-space: nowrap;
}

.blatt-esc-hinweis {
  margin-left: var(--abstand-6); /* Luft zwischen Blättern und Hinweis */
}