/* ══ Das Such-Fenster ═════════════════════════════════════════════════════════════════
   ⚑⚑ Warum diese Datei am 25.08.2026 entstanden ist: Percy klickte auf der Startseite auf
   «Suchen» und bekam ein nacktes Eingabefeld unter die Fußzeile geschrieben, statt eines
   Fensters über der Seite. Ursache: `suche.js` hängt das Fenster in JEDE Seite ein, die es
   lädt — seine Regeln standen aber in `shared.css`, und die Startseite lädt `shared.css`
   nicht. Nachgemessen an beiden Ständen: `position: static` statt `fixed`, mitten im
   Textfluss. Das war schon vor dem Umbau der Kopfzeile so; gesehen hat es niemand, weil
   niemand auf der Startseite gesucht hat.

   ⚑ Dieselbe Falle hatte drei Tage lang schon das Warenkorb-Zeichen (0 px breit) und die
   Fußzeile von `cliche.php` (ohne jede Regel). Die Lehre ist immer dieselbe:
   **was der Kopf einhängt, muss seine Regeln beim Kopf haben** — nicht in einer Datei, die
   nur ein Teil der Seiten lädt. `_werkzeuge/kopfzeile_setzen.py` sorgt dafür, dass jede
   Seite mit Kopfzeile diese Datei und `suche.js` bekommt.
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* ⚑⚑ RÜCKFALLKETTEN — und warum sie hier gefehlt haben (25.08.2026).
   Diese Datei ist entstanden, um genau EIN Problem zu lösen: die Startseite lädt
   `shared.css` nicht, darum stand das Such-Fenster dort ungestylt im Textfluss. Beim
   Herausziehen habe ich die Regeln unverändert übernommen — mitsamt 24 nackten
   `--tp-*`-Marken. Die Startseite lädt aber auch `ds/colors_and_type.css` nicht, wo diese
   Marken definiert sind. Ergebnis: das Fenster ging zwar auf, hatte dort aber keinen
   Rahmen, keine Trennlinie, keinen Fokusring und die falschen Schriften.
   Ich habe also beim Beheben der Insel-Falle dieselbe Falle neu gestellt — obwohl
   `ds/kopfzeile.css` und `ds/fusszeile.css` genau davor in ihren Köpfen warnen.
   Gefunden hat es der Kritiker, nicht ich, und mein eigener neuer Prüfstand hat die Seite
   als «in Ordnung» gemeldet: er misst `position`, `display` und Fokus — nicht, ob die
   Marken überhaupt auflösen.
   Ab hier gilt dieselbe Kette wie bei Kopf und Fuß: `--tp-x` · dann der Name der
   Startseite · dann der Wert. Nachgemessen sind beide Namensräume wertgleich. */
.sm {
  --su-gelb:  var(--tp-yellow,     var(--gelb,   #ffcc00));
  /* ⚑ Kein eigenes Schwarz mehr. Die Kette fiel auf der Startseite auf deren `--ink`
     (#1b1b18) zurück, auf allen anderen Seiten auf `--tp-black` (#000000) — ein
     Unterschied, den man nicht sieht, der aber genau das ist, wogegen der
     Quervergleich läuft: dasselbe Teil, auf einer Seite anders. Und Percy hat für
     die Startseite ausdrücklich «kein Schwarz» entschieden (Formsprache B). Also
     überall `--su-ink` = #1b1b18. (25.08.2026) */
  --su-ink:   var(--tp-ink,        var(--ink,    #1b1b18));
  --su-grau:  var(--tp-ink-muted,  var(--label,  #5f5d54));
  --su-linie: var(--tp-border,     var(--linie,  #dad8cf));
  /* ⚑ Der Rückfallwert zieht mit: er greift nur, wo `colors_and_type.css` fehlt, und ein
     Rückfall, der schlechter ist als die Regel, wäre eine stille Verschlechterung. */
  --su-hinweis: var(--tp-hint,     #736f67);
  --su-sanft: var(--tp-bg-soft,    var(--panel,  #f5f3ef));
  --su-sans:  var(--tp-font-sans,  var(--sans,   "Nunito Sans", Arial, sans-serif));
  --su-serif: var(--tp-font-serif, var(--serif,  "EB Garamond", Georgia, serif));
}

.sm { position: fixed; inset: 0; z-index: 200; display: none; }

/* ═══════════════════════════════════════════════════════════════════════════════
   Der Korb-Knopf im Kopf (warenkorb.js) — auf jeder Seite erreichbar, nicht nur im
   Shop. Percy, 13.08.2026: «mach lieber oben rechts im Menü ein Icon davon». Setzt
   sich selbst neben «Suchen», genau wie sich das Such-Modal selbst einhängt — keine
   Seite muss dafür einzeln Markup tragen, nur das Skript einbinden.
   Gelb ist hier eine Fläche, kein Text (Abschnitt 09 CI) — die Zahl bleibt schwarz. */
/* ⚑ Die Regeln des Warenkorb-Zeichens stehen seit 24.08.2026 in
   `ds/kopfzeile.css` — es hängt ausschließlich in der Kopfzeile, und die
   Startseite lädt diese Datei hier nicht. Nicht wieder hierher kopieren. */
.sm.auf { display: block; }
/* ⚑ Der Schleier hinter dem Suchfenster trug bis 26.08.2026 rgba(17,17,17,.28) —
   also #111111, ein Schwarz, das die Palette nicht kennt. Ink ist #1b1b18 =
   rgb(27,27,24) und hat einen warmen Stich; #111 ist kühl und neutral. Gefunden
   hat es die erste Zustandsmessung: im Auslieferungszustand ist dieser Schleier
   unsichtbar, er erscheint nur im geöffneten Suchfenster — und dorthin hatte bis
   dahin keine Farbmessung je geschaut.
   ⚑ Als Zahl geschrieben, nicht als var(): eine Fläche mit Deckkraft braucht die
   Kanäle einzeln, und `color-mix` kommt im ganzen Haus sonst nirgends vor. Wer
   Ink ändert, ändert diese Zeile mit — darum steht der Wert hier ausgeschrieben. */
.sm__grund { position: absolute; inset: 0; background: rgba(27, 27, 24, .28); }
.sm__kasten { position: relative; margin: 8vh auto 0; max-width: 760px; background: var(--tp-white);
  border: 1px solid var(--su-ink); box-shadow: 0 18px 60px rgba(0, 0, 0, .18);
  max-height: 78vh; display: flex; flex-direction: column; }
.sm__kopf { display: flex; align-items: stretch; border-bottom: 1px solid var(--su-ink); }
.sm__feld { flex: 1; border: 0; padding: 20px 22px; font-family: var(--su-serif);
  font-size: var(--tp-t-4); outline: none; background: var(--tp-white); min-width: 0; color: var(--su-ink); }
.sm__feld::placeholder { color: var(--su-hinweis); }
.sm__kopf:has(.sm__feld:focus-visible) { outline: 3px solid var(--su-gelb); outline-offset: -3px; }
.sm__zu { border: 0; border-left: 1px solid var(--su-linie); background: var(--tp-white); cursor: pointer;
  font-family: var(--su-sans); font-size: var(--tp-t-label); letter-spacing: .1em;
  text-transform: uppercase; padding: 0 20px; color: var(--su-grau); }
.sm__zu:hover { background: var(--su-gelb); color: var(--su-ink); }
.sm__leib { overflow-y: auto; padding: 4px 0 8px; }
.sm__gkopf { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 16px 22px 6px; font-family: var(--su-sans); font-size: var(--tp-t-label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--su-grau); }
.sm__gkopf a { color: inherit; text-decoration: none; white-space: nowrap; }
.sm__gkopf a:hover { background: linear-gradient(transparent 58%, var(--su-gelb) 58%); }
.sm__zeile { display: block; padding: 9px 22px; text-decoration: none; color: inherit;
  border-top: 1px solid var(--su-linie); }
.sm__gruppe .sm__zeile:first-of-type { border-top: 0; }
.sm__zeile.an, .sm__zeile:hover { background: var(--su-sanft); }
.sm__zeile.an { box-shadow: inset 3px 0 0 var(--su-gelb); }
.sm__t { font-family: var(--su-serif); font-size: var(--tp-t-klein); }
.sm__n { display: block; font-family: var(--su-sans); font-size: var(--tp-t-label);
  color: var(--su-grau); margin-top: 1px; }
.sm__fuss { border-top: 1px solid var(--su-linie); padding: 10px 22px;
  font-family: var(--su-sans); font-size: var(--tp-t-label); color: var(--su-grau);
  display: flex; justify-content: space-between; gap: 14px; }
.sm__leer { padding: 26px 22px; font-family: var(--su-sans); font-size: var(--tp-t-klein);
  color: var(--su-grau); line-height: 1.6; }
.sm__leer a { color: inherit; }