/* Craftship — handgeschriebenes Stylesheet.
 *
 * Fuers Handy zuerst (384 Pixel), grosse Flaechen zum Tippen, ein Formular je
 * Seite. Keine fremden Schriften, keine fremden Quellen, kein Bild von aussen,
 * kein JavaScript. Bewegung nur, wenn das Geraet sie nicht abbestellt hat.
 *
 * Die Linie: warmes Off-White statt Weiss, Anthrazit statt Schwarz, EIN
 * kraeftiger warmer Akzent (Kupfer). Abgeschaut — nicht kopiert — ist die
 * Machart: grosse ruhige Flaechen, eine zweifarbige Ueberschrift, runde
 * Knoepfe, Karten statt Tabellen. Farben, Schrift und Texte sind eigene.
 */

/* ── Bausteine (Metis' Optik-Vorgabe, Abschnitt 2) ──────────────────────
   ⭐ ALLES kommt aus dieser einen Stelle. Kommt "mehr Kante" oder "weniger",
   ist das eine Aenderung HIER und nicht an fuenfzig Regeln. Die Werte sind
   Metis' Vorgabe, nicht meine Erfindung; wo dort etwas fehlte, steht der
   naechstliegende Wert aus Abschnitt 2 und eine Zeile im Bautagebuch. */
:root {
  /* Tinte und Grund — der Grund ist DUNKLER als vorher (#faf9f6), damit
     weisse Karten sich durch den Ton abheben und nicht durch eine Haarlinie.
     Das ist Metis' Festlegung O5. */
  --tinte:        #15181c;
  --tinte-mittel: #2b3138;
  --tinte-leicht: #5a6470;
  --papier:       #f3efe7;
  --papier-tief:  #e9e4d9;
  --karte:        #ffffff;
  --linie:        #e2dcd0;
  --linie-stark:  #cfc7b8;

  /* Marke. `--akzent` bleibt #b4531a — sein Wort: kein neuer Stil. Neu sind
     die TIEFEN Toene, die eine Kante und einen Verlauf ueberhaupt erst
     moeglich machen. */
  --akzent:        #b4531a;
  --akzent-unten:  #9e4715;   /* unteres Ende des Verlaufs der Haupttaste */
  --akzent-dunkel: #8a3d11;   /* Text auf Weiss, Schrift der Nebentaste */
  --akzent-kante:  #7a340d;   /* die Kante unter der Haupttaste */
  --akzent-sanft:  #fcefe3;

  /* ⚠️ ABWEICHUNG von Metis' Vorgabe (#2f7d4f): #2b7347.
     Ihr Gruen auf ihrem gruenen Kasten ergibt 4,32:1 — unter der Schranke
     von 4,5:1, die sie selbst in O-08 gesetzt hat. Sie hat die Farbpaare
     ausdruecklich NICHT nachgerechnet; das steht so in ihrer Vorgabe. Mit
     #2b7347 sind es 4,94:1, der Ton bleibt derselbe. Gefunden hat das die
     neu gebaute Kontrastpruefung beim ersten Lauf. */
  --gruen:      #2b7347;
  --gruen-sanft:#e3f1e7;
  --rot:        #b3261e;
  --rot-sanft:  #fdf3f2;
  --rot-linie:  #e9c6c3;
  --blau:       #1f6fb2;
  --blau-sanft: #e6f0f9;
  --stern:      #e0a100;
  --stern-leer: #d8d1c3;

  /* Ecken. Die Taste ist NICHT mehr ganz rund: eine Pille mit Kante wirkt
     wie eine Wurst, die Taste braucht eine Standflaeche (Metis O1). */
  --rund:       12px;   /* Feld */
  --rund-taste: 14px;   /* Taste */
  --rund-karte: 18px;   /* Karte */
  --rund-gross: 18px;   /* Altname, zeigt auf die Karte */
  --rund-klein: 12px;   /* kleine Taste */
  --rund-voll:  999px;  /* Chip, Zaehler, Abzeichen */

  /* Tiefe. Drei Stufen, und die Kante der Taste ist KEIN Schatten, sondern
     eine harte Flaeche darunter — nur so sieht sie wie ein Koerper aus. */
  --schatten-1: 0 1px 2px rgba(21,24,28,.06), 0 6px 16px rgba(21,24,28,.07);
  --schatten-2: 0 2px 4px rgba(21,24,28,.08), 0 12px 28px rgba(21,24,28,.12);
  --schatten-3: 0 -2px 12px rgba(21,24,28,.10);
  --schatten-innen: inset 0 2px 3px rgba(21,24,28,.06);
  --schatten: var(--schatten-1);        /* Altname */
  --schatten-tief: var(--schatten-2);   /* Altname */

  /* Abstaende: 8 · 12 · 16 · 24 · 32 */
  --a1: 8px; --a2: 12px; --a3: 16px; --a4: 24px; --a5: 32px;

  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --nachgeben: 60ms;   /* Uebergang auf Versatz und Schatten */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Stolperstelle 7 aus dem Bauauftrag: Der graublaue Antipp-Schleier des
   Browsers legt sich UEBER den Gedrueckt-Zustand — am Handy sieht man dann
   den Schleier und nicht das Nachgeben. Die Taste antwortet selbst. */
a, button, summary, label, input[type="submit"] { -webkit-tap-highlight-color: transparent; }

/* Weicher Seitenwechsel — eine Zeile, kein Programm. Wirkt in neuem Chrome,
   anderswo passiert nichts (Metis 3.5; keine Abhaengigkeit). */
@view-transition { navigation: auto; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Kopfzeile — EINE Reihe, 56 hoch (Metis 3.5, Festlegung O2) ───────
   Vorher: drei Reihen angemeldet, 180 von 915 Bildpunkten = ein Fuenftel des
   Bildschirms, bevor der Inhalt anfing. Jetzt links das Zeichen mit dem
   Namen, rechts EIN Knopf — angemeldet das Konto-Symbol, abgemeldet die
   kleine Taste "Anmelden". Alle Wege liegen in der Leiste unten,
   "Abmelden" unter "Mein Konto" (Festlegung O7). */
.kopf {
  background: var(--tinte);
  color: #fff;
  height: 56px;
  padding: 0 var(--a3);
  display: flex;
  gap: var(--a2);
  align-items: center;
  justify-content: space-between;
}
.kopf-titel {
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: center;
  gap: var(--a1);
  min-height: 44px;          /* S6-01: auch der Titel ist eine Tippflaeche */
}
/* Das Zeichen: 32 x 32, Ecke 9, Marken-Verlauf, weisses "H". Gezeichnet,
   nicht geladen — kein fremdes Material. */
.kopf-zeichen {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(160deg, var(--akzent) 0%, var(--akzent-kante) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: #fff; line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.kopf-weg { display: flex; align-items: center; gap: var(--a1); }
.kopf-weg a { color: #fff; text-decoration: none; }
/* Der Konto-Knopf in der Kopfzeile: 44 x 44, nur das Symbol. */
.kopf-konto {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--rund-voll);
  background: rgba(255,255,255,.1); color: #fff;
}
.kopf-konto svg { width: 22px; height: 22px; }
.kopf-konto:active { background: rgba(255,255,255,.2); }
.knopf-schlicht {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.35); color: #fff;
  border-radius: var(--rund-klein); padding: 0 var(--a2); font: inherit; font-size: 15px;
  font-weight: 600; min-height: 44px; cursor: pointer;      /* S6-01 */
  display: inline-flex; align-items: center;
}
.knopf-schlicht:hover { border-color: #fff; }
.knopf-schlicht:active { background: rgba(255,255,255,.2); }
.abmelden-form { margin: 0; }

/* ── Leiste unten — nur angemeldet (Metis 3.5) ────────────────────────── */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--karte);
  box-shadow: var(--schatten-3);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}
.leiste-ziel {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; height: 64px;
  color: var(--tinte-leicht); text-decoration: none;
  font-size: 14px; font-weight: 600;
  position: relative;
}
.leiste-ziel svg { width: 24px; height: 24px; }
.leiste-ziel .leiste-pille {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 28px; border-radius: var(--rund-voll);
}
.leiste-ziel-aktiv { color: var(--akzent-dunkel); }
.leiste-ziel-aktiv .leiste-pille { background: var(--akzent-sanft); }
/* Oben ein 3 px hoher Balken am aktiven Ziel. */
.leiste-ziel-aktiv::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--akzent);
}
.leiste-ziel:active { background: var(--papier); }
/* Der Zaehler ungelesener Nachrichten sitzt AM Symbol. */
.leiste-zaehler {
  position: absolute; top: 4px; left: 50%; margin-left: 4px;
  background: var(--akzent); color: #fff; border-radius: var(--rund-voll);
  min-width: 18px; height: 18px; padding: 0 4px;
  font-size: 12px; font-weight: 700; line-height: 18px; text-align: center;
}
/* ⚠️ Stolperstelle 3: Die feste Leiste verdeckt Inhalt, wenn die Seite unten
   keine Luft hat. 88 Bildpunkte plus der sichere Rand des Geraets. */
/* 72 statt 88: Die Leiste ist 64 hoch — 8 Bildpunkte Luft darueber genuegen,
   und 16 gesparte Bildpunkte zaehlen, wenn ein Schritt hoechstens 915 hoch
   sein darf (O-05). Gemessen: ohne diese Zeile verdeckt die Leiste die
   letzte Zeile der Fusszeile. */
body.mit-leiste .fuss { margin-bottom: calc(72px + env(safe-area-inset-bottom)); }
body.mit-leiste { padding-bottom: 0; }

/* ── Blatt ─────────────────────────────────────────────────────────────── */
.blatt { flex: 1; width: 100%; max-width: 54rem; margin: 0 auto; padding: var(--a2) var(--a3) var(--a2); }
.blatt-weit { max-width: 64rem; }

/* Metis' Schriftgroessen (Abschnitt 2): Seitentitel 26/30 Staerke 800,
   Abschnitt 20/26 Staerke 700, Text 17/26. Vorher 28-34 fuer den Titel —
   das sind bei 412 Pixeln schnell zwei Zeilen und 64 Bildpunkte. */
h1 { font-size: 26px; line-height: 30px; letter-spacing: -.01em; margin: 0 0 var(--a1); font-weight: 800; }
h2 { font-size: 20px; line-height: 26px; letter-spacing: -.01em; margin: var(--a4) 0 var(--a2); font-weight: 700; }
h3 { font-size: 17px; line-height: 24px; margin: var(--a3) 0 6px; font-weight: 700; }
p  { margin: 0 0 var(--a2); }
a  { color: var(--akzent-dunkel); text-underline-offset: 2px; }

.vorspann { font-size: 1.05rem; color: var(--tinte-mittel); max-width: 40rem; }

/* ── Kopfbild der Startseite ───────────────────────────────────────────── */
.kopfbild {
  background: linear-gradient(170deg, var(--papier-tief) 0%, var(--papier) 62%);
  border-bottom: 1px solid var(--linie);
  padding: var(--a4) var(--a3);
}
.kopfbild-innen {
  width: 100%; max-width: 54rem; margin: 0 auto;
  display: flex; flex-direction: column; gap: 1.25rem;
}
.kopfbild-ueberzeile {
  text-transform: uppercase; letter-spacing: .09em; font-size: 0.88rem;
  font-weight: 700; color: var(--akzent-dunkel); margin: 0;
}
/* Zweizeilig und ZWEIFARBIG: "Leute frei?" in Tinte, "Leute gesucht?" in
   der Markenfarbe — 34/38, Staerke 800 (Metis, Abschnitt 4). Die zweite
   Zeile kommt aus dem festen Text und traegt die Klasse `zweite`. */
/* ⚠️ GEMESSEN, nicht geschaetzt (05.10.2026, 23:20): Slinfis neue Ueberschrift
   „Kapazitäten gesucht?" braucht bei 34 px genau 380 px — und 380 px ist
   exakt die Kastenbreite am Handy (412 minus zweimal Polster). Sie brach
   darum in ZWEI Zeilen um.

   ⛔ Und „passt gerade eben" waere keine Loesung, sondern ein Zufall: hier
   misst ein Chromium mit der Schrift DIESES Servers, auf Slinfis Geraet
   steht die SYSTEMSCHRIFT (`--schrift`), und die ist breiter oder schmaler.
   Darum wird die Schrift mitgefuehrt, mit echtem Spielraum.

   Die Zahl kommt aus einer Messung, nicht aus dem Gefuehl: „Unterstützung
   gesucht?" braucht bei 34 px 446 px. Der Kasten ist (Fensterbreite minus
   32). Soll der Text hoechstens 90 % davon fuellen, ist
   6,1vw die Grenze — gemessen 86,8 % bei 412 px, 87,9 % bei 360 px,
   88,9 % bei 320 px. 34 px bleibt die Obergrenze; sie greift erst ab etwa
   557 px Fensterbreite, wo der Kasten sie traegt.

   ⚠️ Der Preis ist sichtbar: am Handy steht die Ueberschrift jetzt mit rund
   25 px statt 34. Das ist die Folge der laengeren Worte, nicht eine
   Geschmacksentscheidung — wer sie kuerzt, darf die Zahl wieder anheben
   (und muss neu messen). */
.kopfbild h1 { font-size: clamp(19px, 6.1vw, 34px); line-height: 1.12;
               letter-spacing: -.02em;
               font-weight: 800; margin: 0 0 var(--a2); }
.kopfbild h1 .zweite { display: block; color: var(--akzent); }
.kopfbild-text { color: var(--tinte-mittel); margin: 0 0 var(--a3); max-width: 32rem; }
/* Die Bildflaeche — 05.10.2026, Slinfis Wort 19:10 und 22:12.
   Hier standen die Zeichnung mit den zwei Werkstaetten und zwei aufgelegte
   Karten ("3 Leute im Angebot" gegen "1 Person gesucht"). Zusammen lasen sie
   sich als Tausch drei-gegen-eins, und die Haeuser fand er kindisch verspielt.
   Beides ist weg; `.kopfbild-figur`, `.kopfbild-bild` als Vollbild und die
   `.aufgelegt`-Karten gibt es nicht mehr.

   Die Flaeche bleibt und ist heute SELBST das Bild: Markenverlauf, Ecke 18
   und Schatten Stufe 2 wie bei jeder Karte, das Zeichen gross darin.
   ⭐ Kommt Animas Startbild, ist der Austausch EIN Schritt — in der Vorlage
   weicht das <span> einem <img class="kopfbild-bild">, hier bleibt alles
   stehen: `.kopfbild-bild` ist fertig und fuellt die Flaeche randlos. */
/* ⛔ KEIN KASTEN. Slinfi am 05.10.2026, 22:47: „das Bild soll in die seite
   sanft einfliessen und nicht nur abgegrenzt in dem Kasten stehen."
   Hier standen bis 22:50 Rahmen, Ecke 18 und Schatten Stufe 2 — also genau
   die Kartengestalt, die er nicht will. Alle drei sind weg.

   Statt einer Kante traegt die Flaeche eine WEICHE: `mask-image` blendet sie
   nach OBEN, nach unten und zu beiden Seiten in den Seitengrund aus. Zwei Verlaeufe,
   mit `intersect` verrechnet — unten UND seitlich, nicht entweder-oder.
   ⚠️ Kennt ein Browser `mask-composite` nicht, verrechnet er die beiden
   Masken mit `add`: dann ist die Flaeche fast ueberall deckend, also
   OHNE Verlauf statt unsichtbar. Das ist der Ausfall, den man will.

   Das Mass 1216/832 ist Folios Bildformat. So steht der Platz vor dem Bild
   schon in der richtigen Hoehe und nichts springt, wenn es kommt. */
.kopfbild-flaeche {
  position: relative;
  aspect-ratio: 1216 / 832;
  /* Randlos ueber die volle Breite: das Polster von `.kopfbild` (--a3)
     wieder herausgerechnet. Ab 40rem steht die Flaeche im Raster neben dem
     Wort — dort wird das zurueckgenommen. */
  margin: var(--a2) calc(-1 * var(--a3)) calc(-1 * var(--a4));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(120% 150% at 50% 20%, var(--akzent-sanft) 0%, rgba(255,255,255,0) 70%);
  -webkit-mask-image:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 13%, #000 58%, rgba(0,0,0,0) 100%),
    linear-gradient(to right, rgba(0,0,0,0) 0%, #000 14%, #000 86%, rgba(0,0,0,0) 100%);
          mask-image:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 13%, #000 58%, rgba(0,0,0,0) 100%),
    linear-gradient(to right, rgba(0,0,0,0) 0%, #000 14%, #000 86%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
/* Unser Zeichen gross und leise auf der auslaufenden Flaeche — dieselbe Form
   wie das kleine in der Kopfzeile, nur als Wasserzeichen statt als Kachel:
   die Kachel steht 300 Bildpunkte darueber schon einmal. Es ist Schmuck,
   darum `aria-hidden`, kein Text, kein Tippziel. Es steht da, SOLANGE kein
   Startbild in `statisch/bilder/` liegt. */
.kopfbild-zeichen {
  font-size: 7.5rem; line-height: .78; font-weight: 800;
  letter-spacing: -.04em;
  color: var(--akzent); opacity: .17;
  pointer-events: none; user-select: none;
}
/* Das Startbild, wenn es da ist: fuellt die Flaeche randlos und erbt deren
   weiche Kante — hier KEINE eigene Ecke und kein Schatten, sonst waere der
   Kasten zurueck. */
.kopfbild-bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
  object-fit: cover;
}

/* ── Die drei Schritte ─────────────────────────────────────────────────── */
.schritte { list-style: none; margin: var(--a4) 0 0; padding: 0; display: grid; gap: var(--a1); }
.schritt {
  background: var(--karte); border: 0; border-radius: 14px;
  box-shadow: var(--schatten-1);
  padding: var(--a2); display: flex; gap: var(--a2); align-items: center;
}
.schritt-zahl {
  flex: none; width: 1.9rem; height: 1.9rem; border-radius: var(--rund-voll);
  background: var(--akzent-sanft); color: var(--akzent-dunkel);
  font-weight: 750; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
}
.schritt-wort { font-weight: 650; margin: 0; }
.schritt-text { margin: .1rem 0 0; color: var(--tinte-leicht); font-size: 0.94rem; }

/* ── Formulare ─────────────────────────────────────────────────────────── */
/* ── Felder — das Gegenstueck zur Taste: leicht EINGELASSEN ───────────── */
.feld { margin: 0 0 var(--a2); display: flex; flex-direction: column; gap: 6px; }
.feld label { font-weight: 600; font-size: 15px; }
.feld input, .feld select, .feld textarea {
  font: inherit;
  font-size: 17px;            /* unter 16 zoomt das Handy beim Tippen (S1-24) */
  padding: 0 var(--a2);
  border: 1.5px solid var(--linie-stark);
  border-radius: var(--rund);
  background: var(--karte);
  color: var(--tinte);
  width: 100%;
  min-height: 54px;
  box-shadow: var(--schatten-innen);
}
.feld textarea { padding: var(--a2); }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: var(--schatten-innen), 0 0 0 4px rgba(180,83,26,.18);
}
/* ── Auswahlfeld: der Pfeil ─────────────────────────────────────────────
   ⛔ MANNIS BEFUND 1 AUS RUNDE 3, und der schwerste des Tages: Hier stand ein
   `data:image/svg+xml` als Pfeil. Unsere eigene Content-Security-Policy sagt
   `img-src 'self'` — und `'self'` erlaubt `data:` NICHT. Der Browser hat den
   Pfeil blockiert und das woertlich gemeldet:
     "Loading the image 'data:image/svg+xml,…' violates the following Content
      Security Policy directive: img-src 'self'. The action has been blocked."
   Ergebnis: ein Auswahlfeld OHNE Pfeil, das wie ein leeres Textfeld aussieht
   — auf dem ERSTEN Bildschirm des Betriebsassistenten. Mannis Satz: "das ist
   der einzige Befund, bei dem ein Fremder denkt 'da fehlt was'".

   ⚠️ Gemessen hatte ich die Seite — aber nur die HOEHE des Feldes, nie, ob
   der Pfeil WIRKLICH ankommt. Ein Bild, das die eigene Richtlinie verbietet,
   faellt beim Messen von Abstaenden nicht auf.

   Der Pfeil ist jetzt GEZEICHNET, nicht geladen: zwei Farbverlaeufe ergeben
   ein Dreieck. Verlaeufe sind kein Bild-Abruf — sie beruehren `img-src`
   nicht, brauchen keine Lockerung der Richtlinie und keine zweite Datei. */
.feld select {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--tinte-leicht) 50%),
    linear-gradient(135deg, var(--tinte-leicht) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 2px),
    calc(100% - 15px) calc(50% - 2px);
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
}
.feld select:focus {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--akzent) 50%),
    linear-gradient(135deg, var(--akzent) 50%, transparent 50%);
}
.feld textarea { min-height: 7.5rem; resize: vertical; line-height: 1.5; }
.feld select[multiple] { min-height: 10rem; }
.feld-hilfe { color: var(--tinte-leicht); font-size: 14px; }
.feld-fehler input, .feld-fehler select, .feld-fehler textarea {
  border-color: var(--rot);
  box-shadow: var(--schatten-innen), 0 0 0 4px rgba(179,38,30,.15);
}
.fehlerwort { color: var(--rot); font-size: 15px; font-weight: 600; }
.fehlerwort::before { content: "\26A0\FE0E  "; }

/* Zwei kurze Felder duerfen nebeneinander: Postleitzahl ein Drittel, Ort
   zwei Drittel; "von" und "bis" je zur Haelfte (Metis 3.2). */
.feldpaar { display: grid; gap: var(--a2); margin: 0 0 var(--a2); }
.feldpaar > .feld { margin: 0; }
.feldpaar-plz-ort { grid-template-columns: 1fr 2fr; }
.feldpaar-halb { grid-template-columns: 1fr 1fr; }

.feldgruppe {
  border: 1px solid var(--linie); border-radius: var(--rund);
  background: var(--karte); padding: 1rem 1rem .2rem; margin: 0 0 1.25rem;
}
.feldgruppe > legend {
  font-weight: 700; font-size: 0.95rem; padding: 0 .4rem; color: var(--tinte);
}
.feldgruppe-text { color: var(--tinte-leicht); font-size: 0.9rem; margin: -.4rem 0 1rem; }

/* ── Tasten — "klickbare Knoepfe … 3D-Knoepfe" ─────────────────────────
   Sein Wort, und der eigentliche Auftrag. Drei Dinge machen eine Taste zum
   Koerper, und alle drei fehlten vorher vollstaendig:
     1. eine LICHTKANTE oben (inset) — da trifft das Licht auf
     2. eine KANTE unten als harte Flaeche (0 4px 0 <dunkel>) — die Standhoehe
     3. ein WURFSCHATTEN darunter — sie steht ueber dem Grund
   Und beim Druecken gibt sie nach: 3 Bildpunkte runter, Kante auf 1,
   Wurfschatten klein. Vorher stand im ganzen Stylesheet KEIN einziges
   `:active` (Metis hat es gezaehlt).

   ⚠️ Unter jeder Taste muessen 4 Bildpunkte Platz bleiben, sonst schneidet
   das naechste Element die Kante ab (Stolperstelle 2). Darum `margin-bottom`
   an der Taste selbst und nicht nur im Umfeld. */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: linear-gradient(180deg, var(--akzent) 0%, var(--akzent-unten) 100%);
  color: #fff; border: 0;
  border-radius: var(--rund-taste);
  padding: 0 var(--a4);
  min-height: 56px;
  margin-bottom: 4px;                       /* Platz fuer die Kante */
  font: inherit; font-size: 17px; font-weight: 700;
  text-decoration: none; text-align: center; cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 4px 0 var(--akzent-kante),
    0 8px 16px rgba(122,52,13,.28);
}
.knopf:hover { filter: brightness(1.05); }
.knopf:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 1px 0 var(--akzent-kante),
    0 2px 6px rgba(122,52,13,.25);
}
/* Fokus mit der Tastatur: ein Umriss, der auf JEDEM Grund sichtbar ist —
   dunkel mit Abstand, nicht die Markenfarbe auf Markenfarbe. */
.knopf:focus-visible, .chip:focus-within, .kachel:focus-within,
.leiste-ziel:focus-visible, .karte-weg:focus-visible {
  outline: 3px solid var(--tinte); outline-offset: 3px;
}
.knopf[disabled], .knopf[aria-disabled="true"] {
  background: #d9d2c5; color: #7b8088; box-shadow: none; cursor: not-allowed;
  transform: none;
}

/* Je Bildschirm EINE Haupttaste; die zweite Handlung ist eine Nebentaste. */
.knopf-zweit {
  background: var(--karte); color: var(--akzent-dunkel);
  border: 1px solid var(--linie-stark);
  box-shadow: 0 3px 0 var(--linie-stark), 0 6px 12px rgba(21,24,28,.08);
}
.knopf-zweit:hover { background: #fbf8f2; filter: none; }
.knopf-zweit:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--linie-stark), 0 2px 5px rgba(21,24,28,.08);
}

.knopf-klein {
  min-height: 44px; padding: 0 var(--a3); font-size: 15px;
  border-radius: var(--rund-klein);
  background: var(--karte); color: var(--akzent-dunkel);
  border: 1px solid var(--linie-stark);
  box-shadow: 0 2px 0 var(--linie-stark);
  margin-bottom: 2px;
}
.knopf-klein:hover { background: #fbf8f2; filter: none; }
.knopf-klein:active { transform: translateY(1px); box-shadow: none; }

.knopf-gefahr {
  background: var(--karte); color: var(--rot);
  border: 1px solid var(--rot-linie);
  box-shadow: 0 2px 0 var(--rot-linie);
  min-height: 44px; font-size: 15px; border-radius: var(--rund-klein);
  margin-bottom: 2px;
}
.knopf-gefahr:hover { background: var(--rot-sanft); filter: none; }
.knopf-gefahr:active { transform: translateY(1px); box-shadow: none; }

.knopf-gross { display: flex; width: 100%; }
.drei-knoepfe { display: grid; gap: var(--a2); margin: var(--a4) 0; }

@media (prefers-reduced-motion: no-preference) {
  .knopf { transition: transform var(--nachgeben) ease, box-shadow var(--nachgeben) ease,
                       filter .15s ease, background-color .15s ease; }
}

/* ── Zwei grosse Kacheln nebeneinander (Art des Eintrags, Uebersicht) ─── */
.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a2); margin: 0 0 var(--a4); }
.kachel {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 96px; padding: var(--a2);
  border-radius: var(--rund-taste); border: 1.5px solid var(--linie-stark);
  background: var(--karte); color: var(--tinte);
  box-shadow: 0 2px 0 var(--linie-stark), 0 6px 12px rgba(21,24,28,.07);
  font-size: 15px; font-weight: 600; text-align: center; text-decoration: none;
  cursor: pointer;
}
.kachel svg { width: 28px; height: 28px; }
.kachel:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--linie-stark); }
.kachel-haupt {
  background: linear-gradient(180deg, var(--akzent) 0%, var(--akzent-unten) 100%);
  color: #fff; border: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 4px 0 var(--akzent-kante),
              0 8px 16px rgba(122,52,13,.28);
}
.kachel-haupt:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 0 var(--akzent-kante); }
/* Die Kachel ist ein Auswahlpunkt: der Punkt bleibt da, nur unsichtbar
   (Stolperstelle 5 — unsichtbar heisst nicht entfernt). */
.kachel input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.kachel:has(input:checked) {
  background: var(--akzent-sanft); border-color: var(--akzent); color: var(--akzent-dunkel);
  box-shadow: var(--schatten-innen);
}

/* ── Chips — Auswahl zum Antippen statt Kaestchenliste (Metis 3.3) ────── */
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  /* ⚠️ ABWEICHUNG von Metis' Vorgabe (dort 48): 46. Die Chips von Schritt 2
     brechen auf fuenf Zeilen um, und fuenf mal zwei Bildpunkte waren der
     Unterschied zwischen 950 und unter 915 (O-05). 46 bleibt ueber der
     Tippflaechen-Schranke von 44 (S6-01) — darunter waere es eine stille
     Verschlechterung, nicht eine Abstimmung. Steht im Bautagebuch. */
  min-height: 46px; padding: 0 var(--a2);
  border-radius: var(--rund-voll); border: 1.5px solid var(--linie-stark);
  background: var(--karte); color: var(--tinte);
  box-shadow: 0 2px 0 var(--linie-stark);
  font-size: 16px; font-weight: 600; cursor: pointer;
  margin-bottom: 2px;
}
.chip:hover { background: #fbf8f2; }
/* Bauliste Punkt 11: die Rolle der Plattform steht unter jeder Seite — leise,
   aber lesbar. `--tinte-leicht` auf `--papier` ist mit 5,24:1 geprueft (die
   Kontrastliste kennt das Paar schon), also keine neue Farbe und kein neues
   Paar fuer `kontrast_pruefen.py`. */
.fuss-rolle {
  margin: var(--a1) 0 0; color: var(--tinte-leicht);
  max-width: 44rem; margin-inline: auto;
}
/* Bauliste Punkt 1 (06.10.2026): Die drei Formen der Zusammenarbeit tragen
   lange Beschriftungen ("Mitarbeiter voruebergehend ueberlassen") — als Pille
   nebeneinander braechen sie auf drei Zeilen um und waeren nicht mehr als
   drei Moeglichkeiten zu lesen. Darum volle Breite, eine je Zeile, Ecke wie
   eine Karte statt rund. Alles andere (Haken, Fokus, Tippflaeche 46) erbt
   `.chip` — eine zweite Gestalt waere eine zweite Stelle zum Pflegen. */
.chip-weit {
  display: flex; width: 100%; justify-content: flex-start;
  border-radius: var(--rund);
  /* ⚠️ KEIN senkrechtes Polster und nur 2 px Abstand: `min-height: 46` aus
     `.chip` traegt die Tippflaeche schon (S6-01 verlangt 44). Mit `var(--a2)`
     rundherum und `var(--a1)` Abstand waren die drei Zeilen 243 Bildpunkte
     hoch, und "Eintrag anlegen" riss damit O-06. So sind es 153.
     ⛔ `min-height` NICHT unter 46 setzen — das waere die Tippflaeche, und
     die ist aus Mannis Befund 23 (Handy mit Handschuh) gesetzt. */
  padding: 0 var(--a2);
  margin-bottom: 2px; text-align: left; line-height: 1.3;
}
/* Das Kaestchen bleibt im Formular und mit der Tastatur erreichbar — es ist
   nur unsichtbar. Der Fokus zeigt sich AM CHIP (Stolperstelle 5). */
.chip input {
  position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0;
  margin: 0; cursor: pointer;
}
.chip:has(input:checked) {
  background: var(--akzent-sanft); border-color: var(--akzent); color: var(--akzent-dunkel);
  box-shadow: var(--schatten-innen);
}
.chip:has(input:checked)::before { content: "\2713"; font-weight: 800; }
.chip:active { transform: translateY(1px); box-shadow: none; }

/* Kennzahl-Chips in Karten — nicht antippbar, nur Angabe. */
.zahlchips { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--a1) 0 0; padding: 0; list-style: none; }
.zahlchip {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 28px; padding: 0 10px; border-radius: var(--rund-voll);
  background: var(--papier); color: var(--tinte-mittel);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* ── Fortschritt bei Schritten (Metis 3.8) ────────────────────────────── */
.fortschritt { margin: 0 0 var(--a2); }
.fortschritt-balken { display: flex; gap: 6px; margin: 0 0 6px; }
.fortschritt-balken span {
  flex: 1; height: 6px; border-radius: 3px; background: var(--linie);
}
.fortschritt-balken .erledigt, .fortschritt-balken .jetzt { background: var(--akzent); }
/* Die Fortschrittszeile IST die Ueberschrift des Schritts (Mannis Befund 7
   aus Runde 3 — vorher stand "Schritt 1 von 3" zweimal auf dem Bildschirm).
   Sie bleibt optisch eine leise Zeile; dass sie ein `h1` ist, merkt nur ein
   Vorleseprogramm. */
h1.fortschritt-wort, .fortschritt-wort {
  margin: 0; font-size: 14px; line-height: 20px;
  color: var(--tinte-leicht); font-weight: 600; letter-spacing: 0;
}

/* ── Karten ────────────────────────────────────────────────────────────── */
/* ── Karten — weiss, ohne Rand, mit Schatten ──────────────────────────
   Die Tiefe kommt vom Ton des Grundes und vom Schatten, nicht von einer
   Haarlinie (Metis O5). Vorher: weisse Kaesten auf fast weissem Grund,
   getrennt nur durch eine Linie — alles lag auf einer Ebene. */
.karte {
  background: var(--karte); border: 0;
  border-radius: var(--rund-karte); padding: var(--a3); margin: 0 0 var(--a2);
  box-shadow: var(--schatten-1);
}
.karte-angehoben { box-shadow: var(--schatten-2); }
.karte-titel { font-weight: 700; margin: 0 0 2px; font-size: 18px; line-height: 1.33; letter-spacing: -.01em; }
.karte-zeile { margin: 2px 0; color: var(--tinte-mittel); font-size: 15px; }

/* Trefferkarte ganz antippbar: der Verweis spannt sich UEBER die Karte.
   ⚠️ Stolperstelle 6: Eine zweite Taste in der Karte (der Verweis auf den
   Betrieb) darf nicht verschluckt werden — sie liegt DARUEBER, nicht
   darunter. Darum `position: relative; z-index: 1` an allem, was in der
   Karte selbst ein Weg ist. */
.karte-klickbar { position: relative; }
.karte-weg { position: absolute; inset: 0; z-index: 0; border-radius: var(--rund-karte); }
.karte-weg span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.karte-klickbar a:not(.karte-weg),
.karte-klickbar button,
.karte-klickbar form { position: relative; z-index: 1; }
.karte-klickbar:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(21,24,28,.06); }
.karte-klickbar::after {
  content: "\203A"; position: absolute; right: var(--a3); top: var(--a3);
  color: var(--tinte-leicht); font-size: 22px; line-height: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .karte-klickbar { transition: transform var(--nachgeben) ease, box-shadow var(--nachgeben) ease; }
}
.karte-kopf { display: flex; gap: .7rem; align-items: flex-start; }
/* Der Textteil einer Karte neben dem Symbol — nimmt den Rest der Breite. */
.karte-inhalt { flex: 1; min-width: 0; }
/* Ueberschrift, die oben in einer Karte sitzt: kein Abstand nach oben. */
.karte-ueberschrift { margin-top: 0; }
/* Ueberschrift in einer Zeile mit anderen Angaben: gar kein Abstand. */
.ohne-abstand { margin: 0; }
.karte-fuss { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }

.symbol { flex: none; width: 2.4rem; height: 2.4rem; border-radius: var(--rund); background: var(--akzent-sanft);
          display: flex; align-items: center; justify-content: center; color: var(--akzent-dunkel); }
.symbol svg { width: 1.4rem; height: 1.4rem; }

/* ── Kaesten ───────────────────────────────────────────────────────────── */
/* ── Kaesten: Flaeche zart, links ein 4-px-Balken, Ecke 14 (Metis 3.8) ── */
.hinweiskasten, .fehlerkasten, .testkasten, .bauhinweis, .leerbefund {
  border-radius: 14px; padding: var(--a2) var(--a3); margin: 0 0 var(--a3);
  border: 0; border-left: 4px solid currentColor;
}
.hinweiskasten { background: var(--gruen-sanft); border-left-color: var(--gruen); color: var(--tinte); }
.fehlerkasten  { background: var(--rot-sanft); border-left-color: var(--rot); color: var(--rot); font-weight: 600; }
.testkasten    { background: var(--akzent-sanft); border-left-color: var(--akzent); color: var(--tinte); }
.testkasten-wort { margin: 0 0 .6rem; font-weight: 700; }
.testkasten ul { margin: 0; padding: 0; list-style: none; }
.testkasten li { margin: .5rem 0; padding: .6rem .7rem; background: var(--karte);
                 border: 0; border-radius: var(--rund); box-shadow: var(--schatten-1); }
.testkasten code { font-size: 0.92rem; word-break: break-all; color: var(--tinte); }

/* Der Bau-Hinweis ist ein Gesetzeszitat — ruhig gesetzt, nicht als Warnung. */
.bauhinweis {
  background: var(--akzent-sanft); border-left-color: var(--akzent);
  font-size: 15px; color: var(--tinte-mittel); line-height: 1.5;
}
.bauhinweis p { margin: 0 0 .5rem; }
.bauhinweis p:last-child { margin: 0; }

/* Die sichtbare erste Zeile des Kastens (O3). `summary` steht in der
   Tippflaechen-Messung von S6-01 drin — darum min-height 44, nicht nur
   Innenabstand. `list-style: none` samt ::-webkit-details-marker, weil der
   Standard-Pfeil in Chromium ueber die Pseudo-Klasse laeuft und sonst
   doppelt neben dem eigenen Zeichen steht. */
.bauhinweis > summary {
  display: flex; align-items: center; gap: .5rem;
  min-height: 44px; margin: 0; cursor: pointer;
  font-weight: 600; color: var(--tinte); list-style: none;
}
.bauhinweis > summary::-webkit-details-marker { display: none; }
.bauhinweis > summary::before {
  content: "▸"; color: var(--akzent); font-size: 1.1em; line-height: 1;
}
.bauhinweis[open] > summary::before { content: "▾"; }
.bauhinweis[open] > summary { margin-bottom: .6rem; }
.bauhinweis > summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Leerer Zustand: Symbol, ein Satz, und wo sinnvoll eine Nebentaste — nie
   nur eine graue Zeile (Metis 3.8). */
.leerbefund {
  background: var(--karte); border-left: 4px solid var(--linie-stark);
  color: var(--tinte-leicht); box-shadow: var(--schatten-1);
  display: flex; gap: var(--a2); align-items: flex-start;
}
.leerbefund svg { flex: none; width: 40px; height: 40px; color: var(--linie-stark); }

/* ── Abzeichen — die Art an der Farbe erkennen (Metis 3.8) ────────────── */
.marke-test, .marke-art {
  display: inline-flex; align-items: center;
  min-height: 26px; padding: 0 10px; border-radius: var(--rund-voll);
  font-size: 14px; font-weight: 700; letter-spacing: .01em; vertical-align: middle;
  border: 0;
}
.marke-test { background: var(--akzent-sanft); color: var(--akzent-dunkel); }
.marke-art  { background: var(--papier-tief); color: var(--tinte-mittel); }
/* Bedarf blau, Kapazitaet gruen — so sieht man die Art, ohne zu lesen. */
.marke-bedarf    { background: var(--blau-sanft);  color: var(--blau); }
.marke-kapazitaet{ background: var(--gruen-sanft); color: var(--gruen); }

/* ── Betriebs-Zeichen — Farbe kommt ins Bild (Metis 3.7) ──────────────── */
/* Jeder Betrieb bekommt eine Kachel mit seinem Gewerk-Symbol in der Farbe
   seiner Gruppe. Das bringt Abwechslung in Listen, OHNE dass jemand etwas
   hochlaedt — und ohne fremdes Material. */
.betriebszeichen {
  flex: none; width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--akzent-sanft); color: var(--akzent-dunkel);
}
.betriebszeichen svg { width: 26px; height: 26px; }
.betriebszeichen-gross { width: 72px; height: 72px; border-radius: 20px; }
.betriebszeichen-gross svg { width: 38px; height: 38px; }
.gruppe-wasser { background: #e6f0f9; color: #1f6fb2; }
.gruppe-strom  { background: #fbf1d6; color: #8a6100; }
.gruppe-holz   { background: #f3e7db; color: #7a4a21; }
.gruppe-stein  { background: #e9edf1; color: #4a5563; }
.gruppe-metall { background: #e1f1f0; color: #1e6e6e; }
.gruppe-gruen  { background: #e3f1e7; color: #2f7d4f; }
.gruppe-sonst  { background: #fcefe3; color: #8a3d11; }

/* ── Kennzahl-Kacheln im Profil (Metis, Abschnitt 4, Festlegung O8) ───── */
.kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--a1); margin: 0 0 var(--a4); }
.kennzahl {
  background: var(--karte); border-radius: var(--rund); padding: var(--a2) var(--a1);
  box-shadow: var(--schatten-1); text-align: center;
}
.kennzahl-wert { display: block; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kennzahl-wort { display: block; font-size: 14px; color: var(--tinte-leicht); }

.meldungen { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.meldung { background: var(--gruen-sanft); border: 1px solid #c4d7c6; border-radius: var(--rund);
           padding: .8rem 1rem; margin: 0 0 .5rem; }

.nebenweg { margin: 1.2rem 0; color: var(--tinte-mittel); }

/* ── Filter zum Aufklappen (S6-02, ohne JavaScript) ───────────────────── */
.filterblock { border: none; margin: 0; padding: 0; }
.filter-aufklappen {
  display: flex; align-items: center; gap: .5rem;
  min-height: 48px; padding: .6rem .2rem;
  font-weight: 650; font-size: 1rem; color: var(--akzent-dunkel);
  cursor: pointer; list-style: none;
}
.filter-aufklappen::-webkit-details-marker { display: none; }
.filter-aufklappen::before {
  content: "\25B8"; display: inline-block; font-size: 1.1rem; color: var(--akzent);
}
.filterblock[open] > .filter-aufklappen::before { content: "\25BE"; }
.filter-aufklappen:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ── Sternreihe zum Antippen (S6-03, ohne JavaScript) ─────────────────── */
.sternwahl { display: flex; flex-direction: column; gap: .4rem; }
.sternzeile {
  display: flex; align-items: center; gap: .75rem;
  min-height: 52px; padding: .5rem .75rem;
  border: 1px solid var(--linie); border-radius: var(--rund);
  background: var(--karte); cursor: pointer; font-size: 1rem;
}
.sternzeile:hover { border-color: var(--akzent); background: var(--akzent-sanft); }
.sternzeile input[type="radio"] { width: 24px; height: 24px; flex: none; accent-color: var(--akzent); }
/* Die ganze Zeile zeigt die Auswahl, nicht nur der kleine Punkt. */
.sternzeile:has(input:checked) { border-color: var(--akzent); background: var(--akzent-sanft); }
.sternzeile:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }
.sternzeile-sterne { color: var(--stern); font-size: 1.25rem; letter-spacing: .08em; white-space: nowrap; }

.start-knoepfe { display: grid; gap: var(--a1); margin: 0 0 var(--a4); }

/* ── Trefferliste ──────────────────────────────────────────────────────── */
.treffer { list-style: none; margin: 0; padding: 0; }
.treffer > li { margin: 0 0 .85rem; }
.treffer-kopf { display: flex; justify-content: space-between; align-items: baseline;
                gap: .75rem; flex-wrap: wrap; margin: 0 0 .9rem; }
.treffer-zahl { color: var(--tinte-leicht); font-size: 0.94rem; }

.sterne { color: var(--stern); font-weight: 700; white-space: nowrap; letter-spacing: .04em;
          font-size: 20px; font-variant-numeric: tabular-nums; }
/* ⚠️ `.sterne-leer` traegt ZWEI Bedeutungen, und das ist mir beim Umbau der
   Farben auf die Fuesse gefallen: INNERHALB einer Sternreihe sind es die
   leeren Sterne (blass, #d8d1c3 — das ist dort richtig), AUSSERHALB ist es
   leiser TEXT. Mit der neuen Sternfarbe standen damit ganze Saetze im
   Profil in Blassbeige auf Weiss — unlesbar, und kein Test hat es gemerkt,
   weil kein Test Farben von Fliesstext liest. Gesehen habe ich es auf dem
   Bildschirmfoto der echten Seite (Sicht-Auflage).
   Darum: leere Sterne nur IN der Reihe blass, Text in Tinte-leicht. */
.sterne-leer { color: var(--tinte-leicht); font-weight: 400; letter-spacing: 0; }
.sterne .sterne-leer { color: var(--stern-leer); }
.sterne-gross { font-size: 28px; }
.sterne-zahl { font-weight: 800; color: var(--tinte); font-variant-numeric: tabular-nums; }

.blaettern { display: flex; gap: .75rem; align-items: center; justify-content: center;
             margin: 1.5rem 0; flex-wrap: wrap; }

.suchform { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund);
            padding: 1rem 1rem .2rem; margin: 0 0 1.4rem; box-shadow: var(--schatten); }
/* Feldgruppe, die nur gruppiert und nicht umrahmt (die Karte rahmt schon). */
.feldgruppe-blank { border: none; padding: 0; margin: 0; background: none; }

/* ── Nachrichten ───────────────────────────────────────────────────────── */
.unterhaltung { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.nachricht {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: .8rem .9rem; margin: 0 0 .7rem;
}
.nachricht-kopf { font-size: 0.88rem; color: var(--tinte-leicht); margin: 0 0 .35rem; }
.nachricht-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.nachricht-eigen { border-left: 4px solid var(--akzent); background: var(--akzent-sanft); }
.ungelesen-zahl {
  background: var(--akzent); color: #fff; border-radius: var(--rund-voll);
  padding: .05rem .5rem; font-size: 0.88rem; font-weight: 700; margin-left: .3rem;
}

/* ── Fuss ──────────────────────────────────────────────────────────────── */
/* Die Fusszeile stand mit 150 px plus 40 px Abstand auf JEDER Seite — 190
   Bildpunkte, die bei einem Schritt von "Betrieb anlegen" (Soll 915) ein
   Fuenftel des Bildschirms sind. Gemessen am 05.10. beim Optik-Durchgang.
   Der absichernde Satz bleibt unveraendert; Wege und Stand teilen sich jetzt
   eine Zeile. */
.fuss {
  border-top: 1px solid var(--linie);
  background: var(--papier-tief);
  padding: var(--a2) var(--a3);
  margin-top: var(--a4);
  font-size: 14px;
  color: var(--tinte-leicht);
  text-align: center;
}
.fuss-wort { margin: 0 0 4px; font-weight: 700; color: var(--tinte-mittel); }
.fuss-wege { margin: 0; display: inline-flex; gap: var(--a2); justify-content: center; flex-wrap: wrap; }
.fuss-stand { margin: 0; font-size: 14px; display: inline; }
.fuss-wege a { min-height: 32px; }

/* S6-01: Keine Schrift unter 14 Bildpunkten — bei 17px Grund sind .82rem
   knapp 14, darum sind alle kleinen Groessen auf .88rem angehoben. Und jede
   Tippflaeche mindestens 44 Bildpunkte hoch: Mannis Befund 23, am Handy mit
   Handschuh. */
.kopf-weg a, .fuss-wege a, .nebenweg a, .karte-fuss a, .blaettern a {
  display: inline-flex; align-items: center; min-height: 44px;
}
.treffer .karte-titel a { display: inline-block; min-height: 44px; line-height: 1.35; }
/* Der Betriebsname in der Trefferkarte fuehrt zum Profil — also eine
   Tippflaeche, keine Beschriftung (Mannis Befund 18 haengt daran). */
.treffer .karte-zeile a, .karte-zeile a {
  display: inline-flex; align-items: center; min-height: 44px;
}
.marke-test, .marke-art, .treffer-zahl, .nachricht-kopf, .feld-hilfe,
.fehlerwort, .karte-zeile, .sternzeile-wort, .testkasten code,
.schritt-text, .bauhinweis, .fuss, table, .leerbefund {
  font-size: 0.88rem;
}
/* Eine Beschriftung, die ein Bedienelement ENTHAELT, ist selbst die
   Tippflaeche — die bleibt 44 hoch (Mannis Befund 23, am Handy mit
   Handschuh). Eine Beschriftung, die nur UEBER einem Feld steht, ist das
   nicht: das Feld darunter ist 54 hoch und traegt die Eingabe. Die 44 kosten
   dort 24 Bildpunkte je Feld, und vier Felder machten Metis' Vorgabe
   "ein Schritt hoechstens 915" unerreichbar (gemessen 944 statt 915). */
label:has(input[type=checkbox]), label:has(input[type=radio]) {
  display: inline-flex; align-items: center; min-height: 44px;
}
.feld > label { display: block; line-height: 1.3; }
/* Verweise, die fuer sich allein in einer Zeile stehen, sind Tippflaechen. */
.bauhinweis a, .leerbefund a, .vorspann a { display: inline-flex; align-items: center; min-height: 44px; }

table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid var(--linie); }
th { font-weight: 650; color: var(--tinte-mittel); }

.nurlesbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Breiter Bildschirm ────────────────────────────────────────────────── */
/* ⚠️ GEMESSEN am 05.10.2026, 23:25 — und erst dadurch gefunden:
   Der Zweispalter stand bei 40rem (640 px). Dort ist die WORTSPALTE aber nur
   327 px breit (1,15 von 2 Anteilen, minus 40 px Fuge), waehrend die Schrift
   gleichzeitig auf 2,9rem = 46 px sprang. Gemessen: Text 547 px in einer
   Spalte von 327 px — 168 %. Slinfis neue Ueberschrift brach dort in zwei
   Zeilen um, und zwar von 640 px aufwaerts bis ins Breitbild.

   Die kurze Ueberschrift davor hat das verdeckt. Darum zwei Aenderungen:
   der Zweispalter beginnt erst bei 53rem (848 px) — dann traegt die
   Wortspalte 446 px und damit die 34 px —, und die Schrift waechst dort
   gefuehrt bis 36 px statt in einem Sprung auf 46.

   ⛔ Nicht nachgemessen heisst hier geraten: welche Breite reicht, haengt am
   WORT. Wer die Ueberschrift aendert, misst neu. */
@media (min-width: 53rem) {
  /* Gemessen: die Wortspalte ist hier 446 px (bei 848) bis 474 px (ab 896,
     wo `.kopfbild-innen` auf 54rem anschlaegt). „Unterstützung gesucht?"
     braucht bei 34 px 446 px — also traegt der Zweispalter KEINE 34 px,
     obwohl mehr Fenster da ist. 32 px fuellen 89 %, 28 px am Anfang 82 %. */
  .kopfbild h1 { font-size: clamp(28px, 3.2vw, 32px); }
  .kopfbild-innen { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 2.5rem; }
  .kopfbild-wort { grid-column: 1; }
  /* Nebeneinander ist die Flaeche keine volle Breite mehr, also kommt das
     herausgerechnete Polster zurueck — die weiche Kante bleibt. */
  .kopfbild-flaeche { grid-column: 2; margin: 0; }
}

@media (min-width: 40rem) {
  body { font-size: 17px; }
  h1 { font-size: 2rem; }
  .kopfbild { padding: 3rem 1rem 2.5rem; }
  .schritte { grid-template-columns: repeat(3, 1fr); }
  .drei-knoepfe { grid-template-columns: repeat(3, 1fr); }
  .blatt { padding: 2rem 1.5rem 3rem; }
}

/* Bewegung nur, wenn das Geraet sie nicht abbestellt hat. */
@media (prefers-reduced-motion: no-preference) {
  .knopf, .knopf-schlicht { transition: background-color .15s ease, border-color .15s ease; }
  .karte { transition: box-shadow .15s ease; }
  .treffer > li .karte:hover { box-shadow: var(--schatten-tief); }
}

/* Kaestchen — EINE Gestalt fuer JEDES, egal wo es steht (05.10.2026).
   Drei Dinge standen dem im Weg, alle gemessen:
   1. Ein einzelnes Kaestchen ist ein Flex-Element von `.feld` und wurde von
      `align-items: stretch` auf volle Breite gezogen; dazu erbte es Polster
      und Rahmen von `.feld input` — gross, mittig, in Browser-Blau.
   2. `.feld input` setzt `min-height: 46px` (Zeile weiter oben). **min-height
      schlaegt height**, egal in welcher Reihenfolge die Regeln stehen: die
      Kaestchen waren danach 22x46 statt 22x22. Darum hier `min-height: 0`.
   3. Der Selektor hing an `.feld` — und die Kaestchen einer Mehrfachauswahl
      stehen dort GAR NICHT drin: ihr `<div>` sprengt das umgebende `<p>`, der
      Browser haengt sie daneben. Gemessen am 05.10. auf der echten Adresse:
      "qualifikationen 13x13 accent=auto NICHT in .feld". Der Selektor gilt
      jetzt fuer jedes Kaestchen der Anwendung; Kaestchen gibt es hier nur in
      Formularen. */
input[type="checkbox"] {
    width: 22px; height: 22px;
    min-height: 0;
    flex: none;
    margin: 0;
    padding: 0;
    border: 0;
    accent-color: var(--akzent);
}
/* Kaestchen neben der Beschriftung, nicht darunter — und die ganze Zeile
   antippbar (mindestens 44 Bildpunkte, S6-01). */
.kaestchenzeile, label:has(input[type="checkbox"]) {
    display: flex; align-items: center; gap: .6rem;
    min-height: 44px;
    font-weight: 500;
}
.feld-kaestchen { gap: .15rem; }
.feld-kaestchen label { font-weight: 500; }

/* --- Stufe 8 ------------------------------------------------------------ */
/* S8-04: Je Merkmal eine Zeile. Auf dem Handy bricht sie um, statt zu
   schrumpfen — eine zweite Zeile ist lesbar, 11 Bildpunkte Schrift nicht. */
.merkmalsliste { list-style: none; margin: .4rem 0 .9rem; padding: 0; }
.merkmalszeile {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
    padding: .45rem 0; border-bottom: 1px solid var(--linie);
}
.merkmalszeile:last-child { border-bottom: 0; }
.merkmalswort { flex: 1 1 10rem; font-weight: 600; }

/* S8-07: Eigenangaben. Der Haken sagt "angegeben", nicht "geprueft" — darum
   ein schlichtes Zeichen und keine gruene Bestaetigungsfarbe. */
.angabenliste { list-style: none; margin: 0 0 .6rem; padding: 0; }
.angabenzeile { padding: .4rem 0 .4rem 1.6rem; position: relative; }
.angabenzeile::before {
    content: "\2713"; position: absolute; left: 0; top: .4rem;
    color: var(--tinte-leicht); font-weight: 700;
}

/* ── Schritte von "Betrieb anlegen" ───────────────────────────────────── */
/* Eine Legende ist keine Ueberschrift: sie traegt das Wort fuer eine
   Chip-Gruppe und muss darum wie eine Feldbeschriftung aussehen. */
.feld-legende { font-weight: 600; font-size: 15px; padding: 0; margin: 0 0 6px; line-height: 1.3; }
.feldgruppe-blank > legend { font-weight: 600; font-size: 15px; padding: 0; }
fieldset.feldgruppe-blank { margin: 0 0 var(--a2); }

/* Die freiwilligen Nachweise im dritten Schritt — zugeklappt, damit der
   Schritt auf einen Bildschirm passt. `details`, kein Programm. */
.nachweise {
  background: var(--karte); border-radius: 14px; padding: var(--a2) var(--a3);
  margin: 0 0 var(--a2); box-shadow: var(--schatten-1);
}
.nachweise > summary {
  display: flex; align-items: center; gap: var(--a1);
  min-height: 44px; cursor: pointer; font-weight: 600; list-style: none;
}
.nachweise > summary::-webkit-details-marker { display: none; }
.nachweise > summary::before { content: "\25B8"; color: var(--akzent); font-size: 18px; }
.nachweise[open] > summary::before { content: "\25BE"; }
.nachweise > summary:focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; }

/* ── Musterseite (O-02) ────────────────────────────────────────────────── */
/* Die festen Abbilder: eine Taste kann nicht gleichzeitig in Ruhe, gedrueckt
   und im Fokus stehen — darum stehen die beiden Zustaende hier als starre
   Kopien daneben. `muster-starr` nimmt ihnen die Reaktion, damit niemand sie
   fuer eine echte Taste haelt. */
.muster-reihe { display: flex; flex-wrap: wrap; gap: var(--a4); margin: 0 0 var(--a4); }
.muster-fall { display: flex; flex-direction: column; gap: 6px; }
.muster-wort { font-size: 14px; color: var(--tinte-leicht); font-weight: 600; }
.muster-starr { pointer-events: none; }
.muster-gedrueckt {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 0 var(--akzent-kante),
              0 2px 6px rgba(122,52,13,.25);
}
.muster-fokus { outline: 3px solid var(--tinte); outline-offset: 3px; }
.muster-zeichen { list-style: none; margin: 0 0 var(--a4); padding: 0;
                  display: flex; flex-wrap: wrap; gap: var(--a3); }
.muster-zeichen li { display: flex; flex-direction: column; align-items: center; gap: 6px;
                     font-size: 14px; color: var(--tinte-leicht); font-weight: 600; }

/* ── Trefferkarte: Preis hervorgehoben, Betrieb mit Sternen ───────────── */
.zahlchip-preis { background: var(--akzent-sanft); color: var(--akzent-dunkel); font-weight: 700; }
.karte-betrieb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
                 margin-top: var(--a1); }
.karte-betrieb a { color: var(--tinte-mittel); text-decoration: none; font-weight: 600; }
.karte-betrieb a:hover { text-decoration: underline; }
/* Der Winkel rechts braucht Platz — sonst laeuft der Titel darunter. */
.karte-klickbar .karte-inhalt { padding-right: var(--a4); }

/* ── Kopfkarte (Uebersicht, Profil) ───────────────────────────────────── */
.kopfkarte .karte-kopf { align-items: center; }
/* Der kleine Stift rechts in der Kopfkarte — eine Tippflaeche, kein Zeichen. */
.stiftknopf {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--rund-klein);
  background: var(--papier); color: var(--akzent-dunkel);
}
.stiftknopf svg { width: 20px; height: 20px; }
.stiftknopf:active { background: var(--akzent-sanft); }

/* ── Umschalt-Leiste (Suche): Alle · Angebote · Bedarfe ───────────────── */
/* Verbundene Chips, aber GEWOEHNLICHE VERWEISE — kein Schalter mit
   Programm. Die Liste laedt neu; das ist der Preis fuer "kein JavaScript"
   und auf einem Handy nicht zu merken. */
.umschalter {
  display: flex; margin: 0 0 var(--a2);
  background: var(--papier-tief); border-radius: var(--rund-voll); padding: 3px;
}
.umschalt-teil {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; border-radius: var(--rund-voll);
  color: var(--tinte-mittel); text-decoration: none;
  font-size: 15px; font-weight: 600; text-align: center;
}
.umschalt-teil-aktiv {
  background: var(--karte); color: var(--akzent-dunkel);
  box-shadow: 0 1px 2px rgba(21,24,28,.1);
}
.umschalt-teil:active { background: rgba(255,255,255,.6); }

/* Die Zahl gesetzter Filter am Aufklapper. */
.filter-zahl {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--rund-voll);
  background: var(--akzent); color: #fff; font-size: 13px; font-weight: 700;
}
.suchform { background: none; border: 0; box-shadow: none; padding: 0; margin: 0 0 var(--a3); }
.filter-aufklappen { min-height: 44px; }

/* ── Profil ───────────────────────────────────────────────────────────── */
.profil-name { margin: 0 0 2px; font-size: 22px; line-height: 1.27; font-weight: 800;
               letter-spacing: -.01em; }
.zahlchips-gross { margin: 0 0 var(--a4); }
.zahlchips-gross .zahlchip { min-height: 34px; font-size: 15px; padding: 0 var(--a2); }
/* Die Nachweise mit einem gruenen Haken — der Haken sagt "angegeben", und
   der Satz darueber sagt "nicht geprueft". Beides gehoert zusammen. */
.angabenliste-haken .angabenzeile { padding-left: 0; display: flex; align-items: center; gap: var(--a1); }
.angabenliste-haken .angabenzeile::before { content: none; }
.angabenliste-haken svg { flex: none; width: 20px; height: 20px; color: var(--gruen); }

/* ── Bewertung: je Merkmal EINE Zeile (Mannis Befund 4 aus Runde 3) ─────
   Vorher: 20 Auswahlzeilen untereinander, 2320 Bildpunkte = 2,5 Bildschirme.
   Die Sterne sind Auswahlpunkte — unsichtbar, aber da und mit der Tastatur
   erreichbar (dasselbe Muster wie bei den Chips). Angetippt wird der Stern.

   ⚠️ Die Faerbung laeuft RUECKWAERTS: `flex-direction: row-reverse` plus
   `~` faerbt beim Zeigen auf den dritten Stern auch den ersten und zweiten
   mit — ohne JavaScript geht das nur so, weil CSS keinen Weg nach LINKS
   kennt. Die Reihe steht im HTML darum von 5 nach 1 und wird hier gedreht. */
.sternraster { display: grid; gap: var(--a2); margin: 0 0 var(--a3); }
/* ⚠️ Die Breite ist hier knapp und war beim ersten Versuch um DREI
   Bildpunkte zu knapp: 380 breit, minus 32 Innenrand = 348 nutzbar; Wort 112
   + Abstand 12 + Reihe 228 = 352. Die Reihe rutschte unter das Wort, und aus
   einer Zeile wurden zwei (103 statt 60 Bildpunkte je Merkmal). Innenrand
   und Abstand sind darum enger, das Wort darf schrumpfen, die Sternreihe
   nicht — ein Stern unter 44 Bildpunkten waere keine Tippflaeche mehr
   (S6-01). */
.sternmerkmal {
  border: 0; margin: 0; padding: var(--a2);
  background: var(--karte); border-radius: 14px; box-shadow: var(--schatten-1);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--a1); flex-wrap: wrap;
}
.sternmerkmal .sternreihe { flex: none; }
.sternmerkmal-wort { flex: 1 1 auto; min-width: 0; }
.sternmerkmal-fehler { box-shadow: var(--schatten-1), 0 0 0 2px var(--rot); }
.sternmerkmal-wort { padding: 0; font-size: 15px; font-weight: 600; }
.sternreihe { display: flex; flex-direction: row-reverse; gap: 2px; }
.sternknopf {
  position: relative; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  /* ⚠️ 40 BREIT, 44 HOCH. Die Schranke aus S6-01 misst die HOEHE einer
     Tippflaeche — die bleibt 44. Vier Bildpunkte Breite je Stern sind der
     Unterschied, ob "Zuverlaessigkeit" und "Arbeitsqualitaet" neben ihrer
     Sternreihe stehen oder darueber: mit 44 passten nur zwei der vier
     Merkmale in eine Zeile (gemessen 68/99/68/99 Bildpunkte). */
  width: 40px; height: 44px;
  font-size: 26px; line-height: 1; color: var(--stern-leer);
}
.sternknopf input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; }
/* Der gewaehlte Stern und alle LINKS davon (im gedrehten Fluss: danach). */
.sternknopf:has(input:checked), .sternknopf:has(input:checked) ~ .sternknopf { color: var(--stern); }
.sternreihe:hover .sternknopf { color: var(--stern-leer); }
.sternknopf:hover, .sternknopf:hover ~ .sternknopf { color: var(--stern); }
.sternknopf:has(input:focus-visible) { outline: 3px solid var(--tinte); outline-offset: -2px; border-radius: var(--rund-klein); }

/* ── Stundensatz und "Verhandlungsbasis" ──────────────────────────────────
   Mannis Befund 8 aus Runde 3 hat das Geldfeld aufgeklappt. Erst das
   Bildschirmfoto der ECHTEN Adresse zeigte, was das Aufklappen anrichtet:
   Der Satz "Zum Beispiel 42,50 — Komma oder Punkt …" stand in einer halben
   Spalte und brach ueber SECHS Zeilen, waehrend rechts neben dem Kaestchen
   "Verhandlungsbasis" ein leeres Loch blieb. 214 Bildpunkte fuer ein Feld
   und ein Kaestchen — und die zwei Bildpunkte, an denen O-06 haengen blieb,
   kamen von genau hier.
   Darum kein Zwei-Spalten-Kasten mehr, sondern EIN Raster ueber beide
   Felder: Beschriftung oben ueber die ganze Breite, darunter der Betrag
   links und das Kaestchen rechts, die Erklaerung wieder ueber die ganze
   Breite darunter — dort bricht sie zweizeilig statt sechszeilig.
   `display: contents` loest dafuer den `<p>`-Kasten des Betragsfeldes auf,
   damit seine Teile selbst Rasterfelder werden. Der Kasten trug weder Farbe
   noch Rahmen (`.feld-fehler` faerbt nur das `input`), es geht also nichts
   verloren; das Kaestchen behaelt seinen eigenen Kasten und seine 44 hohe
   Tippflaeche. */
.feldpaar-preis {
  grid-template-columns: 1fr 1fr;
  column-gap: var(--a2);
  row-gap: 6px;
  align-items: center;
}
.feldpaar-preis > .feld:not(.feld-kaestchen) { display: contents; }
.feldpaar-preis > .feld:not(.feld-kaestchen) > label { grid-column: 1 / -1; grid-row: 1; }
.feldpaar-preis > .feld:not(.feld-kaestchen) > input { grid-column: 1; grid-row: 2; }
.feldpaar-preis > .feld:not(.feld-kaestchen) > .feld-hilfe { grid-column: 1 / -1; grid-row: 3; }
.feldpaar-preis > .feld:not(.feld-kaestchen) > .fehlerwort { grid-column: 1 / -1; grid-row: 4; }
.feldpaar-preis > .feld-kaestchen { grid-column: 2; grid-row: 2; margin: 0; }

/* ══════════════════════════════════════════════════════════════════════
   KOMFORT-UMBAU 06.10.2026 — Branchenseiten, Wege, Tooltips, Dokumente
   [Bauliste Punkt 14]

   Zwei Regeln gelten hier wie ueberall sonst in dieser Datei:
   * Mindestens 44 Bildpunkte Antippflaeche fuer alles, was ein Daumen
     treffen soll (O-14). Ein Fragezeichen in Schriftgroesse ist am Handy
     nicht zu treffen.
   * Die Ampel traegt IMMER ein WORT neben der Farbe. Rund jeder zwoelfte
     Mann unterscheidet Rot und Gruen nicht zuverlaessig; eine Information,
     die nur in der Farbe steckt, ist fuer ihn keine.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Ampel am GEWERK (nie am Betrieb) ───────────────────────────────── */
.ampel {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: .82rem; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--linie-stark); background: var(--papier-tief);
  color: var(--tinte-mittel);
}
.ampel::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.ampel-gruen { color: var(--gruen); background: var(--gruen-sanft); border-color: #bcd9c6; }
.ampel-gelb  { color: #8a5a00;      background: #fdf3df;          border-color: #e8d4a4; }
.ampel-rot   { color: var(--rot);   background: var(--rot-sanft);  border-color: var(--rot-linie); }

.ampelkasten { border-left: 4px solid var(--linie-stark); }
.ampelkasten-gruen { border-left-color: var(--gruen); }
.ampelkasten-gelb  { border-left-color: #c58a00; }
.ampelkasten-rot   { border-left-color: var(--rot); }

.karte-klein { font-size: .82rem; color: var(--tinte-leicht); margin: 4px 0 0; }

/* ── Fragezeichen-Chip (Bauliste 4) ─────────────────────────────────── */
.tipp { display: inline-block; vertical-align: middle; margin: 0 2px; }
.tipp > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;              /* O-14: Daumenflaeche */
  margin: -11px 0;                        /* ohne das reisst die Zeile auf */
  border-radius: 50%;
  color: var(--akzent-dunkel); font-weight: 700;
}
.tipp > summary::-webkit-details-marker { display: none; }
.tipp > summary:hover { background: var(--akzent-sanft); }
.tipp > summary > span[aria-hidden] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid currentColor; font-size: .82rem; line-height: 1;
}
.tipp[open] > summary > span[aria-hidden] { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.tipp-text {
  display: block; margin: 6px 0 2px; padding: 10px 12px;
  background: var(--akzent-sanft); border-radius: var(--rund);
  font-size: .9rem; color: var(--tinte-mittel);
}

/* ── Branchenliste: EINE Spalte am Handy ────────────────────────────── */
.branchenliste { list-style: none; margin: var(--a2) 0 0; padding: 0; display: grid; gap: var(--a1); }
.branchenzeile { padding: 0; }
.branchenzeile-weg { display: block; padding: 14px 16px; text-decoration: none; color: inherit; min-height: 44px; }
.branchenzeile-weg:hover { background: var(--papier); }
.branchenzeile-kopf { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.branchenzeile .karte-titel { color: var(--akzent-dunkel); }

.suchleiste { display: flex; gap: 8px; flex-wrap: wrap; margin: var(--a2) 0 0; }
.suchleiste input { flex: 1 1 10rem; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--linie-stark); border-radius: var(--rund); background: var(--karte); }
.zurueckweg { margin: 0 0 var(--a1); font-size: .9rem; }

/* ── Wege-Aufklapper ────────────────────────────────────────────────── */
.wegkarte { padding: 0; }
.wegkarte > summary {
  list-style: none; cursor: pointer; display: flex; gap: 10px; align-items: center;
  justify-content: space-between; flex-wrap: wrap; padding: 13px 16px; min-height: 44px;
  font-weight: 600;
}
.wegkarte > summary::-webkit-details-marker { display: none; }
.wegkarte > summary::after { content: "▾"; color: var(--tinte-leicht); font-size: .8rem; }
.wegkarte[open] > summary::after { content: "▴"; }
.wegkarte-titel { flex: 1 1 10rem; }
.wegkarte-inhalt { padding: 0 16px 14px; }
.geht { font-size: .8rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.geht-ja      { color: var(--gruen); background: var(--gruen-sanft); }
.geht-bedingt { color: #8a5a00;      background: #fdf3df; }
.geht-nein    { color: var(--rot);   background: var(--rot-sanft); }
.weg-ja      { border-left: 4px solid var(--gruen); }
.weg-bedingt { border-left: 4px solid #c58a00; }
.weg-nein    { border-left: 4px solid var(--rot-linie); }

.wegschritte { margin: var(--a2) 0 0; padding-left: 1.3rem; display: grid; gap: 10px; }
.wegschritte li { padding-left: 4px; }
.quellen { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; font-size: .9rem; }
.quellen li { overflow-wrap: anywhere; }
.karte-achtung { border-left: 4px solid var(--akzent); }
.fehlt { color: var(--tinte-leicht); }
.frist { border-left: 3px solid var(--akzent); padding-left: 10px; }

/* ══ Dokumente zum Ausdrucken ══════════════════════════════════════════
   Eigene Flaeche ohne Kopf- und Fussleiste. Am Bildschirm wie eine Karte,
   auf Papier ohne Rahmen und ohne die Bedienteile. */
.blatt-seite { background: var(--papier); margin: 0; padding: 0 0 40px; }
.blatt-leiste { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 12px 16px; background: var(--papier-tief); border-bottom: 1px solid var(--linie); }
.blatt-marke { margin: 12px 16px 0; font-size: .85rem; color: var(--tinte-leicht); }
.dokumentblatt {
  max-width: 52rem; margin: 12px auto 0; padding: 22px 20px 28px;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund-karte);
}
.blatt-kopf h1 { font-size: 1.25rem; margin: 0 0 4px; }
.blatt-unterzeile { margin: 0 0 var(--a2); color: var(--tinte-leicht); font-size: .9rem; }
.blatt-fuss { margin-top: var(--a3); padding-top: 12px; border-top: 1px solid var(--linie);
  font-size: .8rem; color: var(--tinte-leicht); }
.blatt-fuss p { margin: 0 0 4px; }
.dabschnitt { font-size: 1rem; margin: var(--a3) 0 8px; padding-bottom: 4px;
  border-bottom: 1px solid var(--linie); }
.dtext { margin: 0 0 10px; font-size: .92rem; line-height: 1.55; }
.dhinweis { margin: 10px 0; padding: 10px 12px; background: var(--papier-tief);
  border-left: 3px solid var(--linie-stark); border-radius: 6px; font-size: .85rem; }
.dhinweis-luecke { border-left-color: var(--akzent); }

/* Ein Feld: Beschriftung, darunter der Wert oder eine leere Linie.
   ⛔ Die leere Linie bekommt KEINEN Platzhaltertext — auf dem Ausdruck saehe
   "bitte eintragen" wie eine Angabe aus. */
.dfeld { display: grid; gap: 2px; margin: 0 0 10px; }
.dfeld-wort { font-size: .78rem; color: var(--tinte-leicht); }
.dfeld-wert { min-height: 26px; padding: 3px 2px; border-bottom: 1px solid var(--linie-stark);
  font-size: .95rem; overflow-wrap: anywhere; }
.dfeld-leer { border-bottom-style: solid; }
@media (min-width: 40rem) { .dfeld { display: inline-grid; width: calc(50% - 10px); margin-right: 16px; }
  .dfeld-breit { width: 100%; margin-right: 0; } }

.dhaken { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 8px; font-size: .9rem; }
.dkasten { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 3px;
  border: 1.5px solid var(--tinte-mittel); border-radius: 3px; }
.dfragen { margin: 0; padding-left: 1.3rem; display: grid; gap: 10px; font-size: .9rem; }
.djanein { white-space: nowrap; color: var(--tinte-leicht); }
.dunterschrift { display: grid; gap: var(--a2); margin-top: var(--a2); }
@media (min-width: 40rem) { .dunterschrift { grid-template-columns: 1fr 1fr; gap: var(--a3); } }
.dlinie { height: 34px; border-bottom: 1px solid var(--tinte-mittel); }
.dlinie-wort { margin: 4px 0 0; font-size: .75rem; color: var(--tinte-leicht); }

@media print {
  .nicht-drucken { display: none !important; }
  .blatt-seite { background: #fff; padding: 0; }
  .dokumentblatt { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; }
  .dhinweis { background: #fff; border-left: 2px solid #999; }
  .tipp { display: none; }
  a { color: inherit; text-decoration: none; }
  @page { margin: 16mm 14mm; }
}

/* Die Ausfuellhilfe am Bildschirm — nie auf dem Ausdruck (Codex 06.10.2026). */
.blatt-hilfe {
  max-width: 52rem; margin: 12px auto 0; padding: 12px 16px;
  background: var(--akzent-sanft); border: 1px solid var(--linie);
  border-left: 4px solid var(--akzent); border-radius: var(--rund);
  font-size: .88rem;
}
.blatt-hilfe p { margin: 0 0 8px; }
.blatt-hilfe p:last-child { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════
   FUEHRUNGS-ASSISTENT (07.10.2026) — eine Frage je Bildschirm
   Slinfis Wort 06:27: „wir fuehren euch mit klaren Fragen durch den Prozess".
   ══════════════════════════════════════════════════════════════════════ */

/* Die vierte Ampelfarbe: GRAU heisst „das koennen wir nicht entscheiden".
   ⭐ Kein neues Farbpaar: Tinte-mittel auf Papier-tief steht in
   `kontrast_pruefen.py` schon als „Ampel ohne Einordnung" und als
   „Chip-Text auf Papier-tief" — beide gruen gerechnet. Hier stehen dieselben
   zwei Werte noch einmal ausdruecklich, damit die Klasse auffindbar ist und
   nicht nur zufaellig so aussieht wie die Vorgabe. */
.ampel-grau { color: var(--tinte-mittel); background: var(--papier-tief); border-color: var(--linie-stark); }
.ampelkasten-grau { border-left-color: var(--linie-stark); }

/* Ein grosser Knopf je Antwort, untereinander (O-14: 44 Bildpunkte sind das
   Minimum, hier sind es deutlich mehr — getippt wird im Stehen). */
.antwortknoepfe { display: grid; gap: var(--a2); margin: 0 0 var(--a2); }
.antwortknoepfe .knopf {
  flex-direction: column; gap: 2px; align-items: flex-start;
  text-align: left; padding: 14px var(--a3); min-height: 56px;
  line-height: 1.3; white-space: normal;
}
.antwort-wort { font-weight: 650; }
/* „vorgeschlagen" / „bisher gewaehlt" — die Marke sitzt IM Knopf und erbt
   darum seine Schriftfarbe. Ein eigener Farbwert waere ein Paar, das
   niemand nachgerechnet hat. */
.antwort-marke { font-size: .8rem; font-weight: 500; opacity: .85; }

/* Woher ein Vorschlag kommt (Punkt 2: vorgeschlagen, aber ANGEZEIGT). */
.vorbelegt { border-left: 3px solid var(--akzent); padding-left: 10px; }

/* Bei Gelb und Grau: der Satz zum Einzelfall, hervorgehoben ohne Farbe. */
.einzelfall { font-weight: 650; }

/* „Ihre Angaben" auf der Ergebnisseite. */
.angabenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a1); }
.angabe-aendern { margin-left: 8px; font-size: .9rem; white-space: nowrap; }

.quellen { margin: var(--a2) 0 0; padding-left: 1.3rem; display: grid; gap: 6px; }

/* Pruefbogen: die Antwortkette je Weg, eng gesetzt — hier liest ein
   Gegenleser am Schreibtisch, nicht ein Meister am Handy. */
.pruefschritte { margin: var(--a1) 0 0; padding-left: 1.2rem; display: grid; gap: 4px; font-size: .92rem; }
.pruefschritte li { color: var(--tinte-mittel); }

/* Beschriftung der Ampel (Auflage ③, 07.10.2026): Sie sagt etwas ueber den
   AUFNEHMENDEN Betrieb. Ohne Beschriftung liest sie jeder als Aussage ueber
   den eigenen. */
.ampel-beschriftung { margin: 0 0 var(--a2); color: var(--tinte-mittel); font-size: .92rem; }

/* ⚠️ NACH DEM ANSEHEN DES ERSTEN HANDY-FOTOS (07.10.2026): Aletheias
   Einstiegsfrage hat ACHT Antworten, jede ein ganzer Satz. Mit 14 Bildpunkten
   Polsterung und halbfetter Schrift war die Seite 2250 Bildpunkte hoch — bei
   915 Bildpunkten Bildschirm also zweieinhalb Schirme fuer EINE Frage.
   Jetzt: normale Schriftstaerke, 12 Polsterung, engere Zeilen. Die 44er
   Antippflaeche (O-14) ist weiterhin deutlich uebertroffen (min-height 52). */
.antwortknoepfe { gap: 10px; }
.antwortknoepfe .knopf { padding: 12px var(--a3); min-height: 52px; font-size: 15px; }
.antwort-wort { font-weight: 600; }

/* ── Schnellcheck (craftship-14): drei Fragen in EINER Karte ───────────────
   ⚠️ GEMESSEN am ersten Handy-Foto (412 x 915): Mit drei Karten war die Seite
   2127 Bildpunkte hoch und der Knopf „Pruefen" sass unter dem Falz — bei
   einer Seite, deren ganzer Zweck „nicht so viele wenn und aber" ist (sein
   Partner am 07.10.2026, 07:34). Eine Karte, engere Abstaende. Die
   Tippflaechen der Chips (46) bleiben unberuehrt. */
.schnellfragen { padding-bottom: var(--a2); }
.schnellfrage-zwei { margin-top: var(--a3); }
.schnellfragen .vorbelegt { margin: 2px 0 6px; border-left: 3px solid var(--akzent); padding-left: 8px; }
.schnellfragen .feld { margin-bottom: 0; }
.schnellfragen .chips { margin-top: 2px; }

/* craftship-18: Honigtopf (Aegis B4) - fuer Menschen unsichtbar, ohne JavaScript. */
.honigtopf { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.feld-haken label { display: flex; gap: .5em; align-items: flex-start; font-weight: normal; }
.feld-haken input[type="checkbox"] { margin-top: .3em; }
.rechtstext-entwurf { border: 2px dashed #c58a00; padding: .6em .9em; margin: 0 0 1em; }
.rechtstext .platzhalter { background: #fff3c4; }
/* craftship-21 (Aegis N1): gebremster Versand ist eine WARNUNG, kein Erfolg - nicht gruen. */
.hinweiskasten.versand-gebremst { background: #fff3c4; border-left-color: #c58a00; }