/* ============================================================
   layout.css — der Rahmen, den jede Seite teilt

   Bis 06.09.2026 gab es Kopf und Fuss in je FUENF handkopierten
   Fassungen ueber 24 HTML-Dateien, in vier Klassennamensraeumen
   (.kopf in produkt.css UND shop.css woertlich doppelt, #site-header
   inline in index.html, .site-header in order.css, nackte <header> in
   kauf/ und rechtliches/). Eine Aenderung an der Navigation bedeutete
   rund fuenfzehn Dateien — und entsprechend liefen sie auseinander:
   der Shop-Fuss war der einzige ohne Rechtslinks, die Rechtsseiten
   hatten ein eigenes Farbsystem.

   Hier steht der Rahmen genau einmal. Das Markup dazu liegt in
   teile/kopf.html und teile/fuss.html und wird beim Bauen eingesetzt
   (scripts/build-seiten.js).

   Diese Datei wird NACH brand.css und VOR dem Seiten-Stylesheet
   geladen: brand.css bringt die Tokens, layout.css den Rahmen, die
   Seite ihre Eigenheiten.

   Sie enthaelt bewusst KEINE Tokens. Wer hier eine Farbe ausschreibt,
   statt ein Token zu nehmen, baut die naechste Abweichung ein.
   ============================================================ */

/* ---- Grundlage ----
   Stand vorher viermal da: shop.css:14, produkt.css:16, order.css:59
   UND order.css:4304 (zweimal in derselben Datei), dazu inline in
   index.html, kauf/, 404.html und allen vier Rechtsseiten. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-5); }

.visuell-versteckt {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ============================================================
   KOPF
   ============================================================ */

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 10, 11, 0.78);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.kopf-innen {
  display: flex; align-items: center;
  height: 64px; gap: var(--s-4);
}

.marke {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 16px; letter-spacing: -0.02em;
  flex: none;
}
.marke-zeichen { width: 18px; height: 18px; display: inline-block; }
.marke-zeichen svg { width: 100%; height: 100%; fill: var(--brand); display: block; }

/* Die Suche nimmt den Platz, der uebrig bleibt. Sie ist ein Feld, kein
   Kasten: eine Linie unten, mehr nicht. */
.kopf-suche { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.kopf-suche input {
  width: min(340px, 100%); padding: 7px 2px;
  background: none; border: 0; border-bottom: 1px solid var(--line-2);
  color: var(--text); font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.04em;
  transition: border-color 0.18s;
}
.kopf-suche input::placeholder { color: var(--faint); }
.kopf-suche input:focus-visible { outline: none; border-bottom-color: var(--brand); }

.kopf-rechts { display: flex; align-items: center; gap: var(--s-4); flex: none; }

/* Navigationslinks bekommen eine wachsende Unterlinie — dieselbe
   Bediensprache wie im Fuss, nicht eine zweite. */
.kopf-nav { display: flex; align-items: center; gap: var(--s-4); }
.kopf-nav a {
  position: relative;
  font-size: var(--t-sm); color: var(--muted);
  transition: color 0.18s;
}
.kopf-nav a:hover { color: var(--text); }
.kopf-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.22s var(--e2, ease);
}
.kopf-nav a:hover::after { transform: scaleX(1); }
.kopf-nav a[aria-current="page"] { color: var(--text); }
.kopf-nav a[aria-current="page"]::after { transform: scaleX(1); }

.lang-schalter {
  background: none; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 7px;
  padding: 4px 9px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.08em; color: var(--muted);
  transition: color 0.18s, border-color 0.18s;
}
.lang-schalter:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.3); }

/* Unter 720px verschwinden Suche und Navigation aus der Zeile; die
   Suche steht auf den Seiten, die sie brauchen, ohnehin nochmal im
   Inhalt. Ein Burger-Menue fuer drei Links waere mehr Mechanik als
   Nutzen. */
@media (max-width: 720px) {
  .kopf-suche, .kopf-nav { display: none; }
  .kopf-innen { gap: var(--s-3); justify-content: space-between; }
}

/* ============================================================
   KNOEPFE

   Die weisse Flaeche traegt allein: kein Verlauf, kein Schein, kein
   getoenter Schatten. Und der Hover DUNKELT AB — auf Weiss tut
   filter:brightness() ueber 1 nichts, ein kopierter Aufhell-Hover
   ergaebe einen Knopf, der auf Zeigerkontakt nicht reagiert.
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 11px 20px; border-radius: var(--r); cursor: pointer;
  /* PFLICHT: ohne das erbt ein <button class="btn"> die Flaeche des
     Browsers (buttonface). Bei <a class="btn"> faellt es nicht auf,
     weil Links transparent sind — deshalb sah nur "In den Warenkorb"
     auf den Produktseiten betroffen aus: ein grauer Block
     (rgb(107,107,107)) neben dem weissen Kaufknopf, der wie ein
     deaktiviertes Bedienelement wirkte. `color-scheme: dark` in
     brand.css macht diesen Grauton erst so kraeftig; dieselbe Familie
     wie die weisse Widerrufs-Checkbox, die am 06.09.2026 auffiel.
     .btn-haupt setzt seine eigene Flaeche danach. */
  background: transparent;
  border: 1px solid transparent; white-space: nowrap;
  transition: transform 0.16s var(--e1, ease), background 0.18s ease,
              border-color 0.18s ease, color 0.18s ease;
}
/* :not(:active) ist Pflicht — sonst ueberschreibt das Anheben das
   Eindruecken von .press-fx. */
.btn:hover:not(:active) { transform: translateY(-1px); }
/* 0,985 war ein Nachgeben, das man messen, aber nicht spueren konnte —
   bei einem 200px-Knopf sind das 3px. 0,96 fuehlt sich nach Taste an.
   Kurzer Weg hinein, laengerer heraus: das ist der Unterschied zwischen
   einer Taste und einem Gummiband. */
.btn { transition-duration: 0.22s; }
.btn:active { transform: scale(0.96); transition-duration: 0.06s; }
.btn-haupt { background: var(--brand); color: var(--bg); }
.btn-haupt:hover { background: #e6e6e8; }
.btn-rand { border-color: var(--line-2); color: var(--text); }
.btn-rand:hover { border-color: rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.04); }
.btn-gross { padding: 14px 26px; font-size: 15px; }
.btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* ============================================================
   FUSS
   ============================================================ */

.fuss { border-top: 1px solid var(--line); padding: var(--s-7) 0 var(--s-7); margin-top: var(--s-9); }
.fuss-innen {
  display: grid; gap: var(--s-6) var(--s-7);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.fuss-gruppe h3 {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--faint); font-weight: 700; margin-bottom: var(--s-3);
}
.fuss-gruppe ul { list-style: none; display: grid; gap: 8px; }
.fuss-gruppe a {
  position: relative; font-size: var(--t-sm); color: var(--muted);
  transition: color 0.18s;
}
.fuss-gruppe a:hover { color: var(--text); }
.fuss-gruppe a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.22s var(--e2, ease);
}
.fuss-gruppe a:hover::after { transform: scaleX(1); }

.fuss-zeile {
  margin-top: var(--s-7); padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--t-xs); color: var(--faint);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
}

/* ---- Sprunglink ----
   Sichtbar erst beim Tabben. */
.sprunglink {
  position: absolute; left: var(--s-4); top: var(--s-4); z-index: 100;
  padding: 10px 16px; border-radius: var(--r);
  background: var(--brand); color: var(--bg); font-weight: 600; font-size: var(--t-sm);
  transform: translateY(-200%);
}
.sprunglink:focus { transform: none; }

/* ---- Bewegung abschalten ----
   Steht AM ENDE: Media Queries erhoehen die Spezifitaet nicht, eine
   weiter unten notierte Animation gewaenne sonst. */
@media (prefers-reduced-motion: reduce) {
  .kopf-nav a::after, .fuss-gruppe a::after { transition: none; }
  .btn { transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease; }
  .btn:hover:not(:active), .btn:active { transform: none; }
}

/* ---- Warenkorb im Kopf ----
   Der Platz ist fest, auch bei leerem Korb: sonst springt die
   Kopfzeile, sobald der erste Artikel hineingeht. */
.korb-knopf {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  color: var(--muted);
  transition: color 0.18s, background 0.18s;
}
.korb-knopf:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.korb-knopf:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.korb-knopf svg {
  width: 19px; height: 19px;
  stroke: currentColor; fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Die Zahl sitzt AUF dem Zeichen, nicht daneben — daneben waere sie
   eine zweite Marke in der Zeile. */
.korb-zahl {
  position: absolute; top: -1px; right: -1px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: var(--brand); color: var(--bg);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  line-height: 1;
}
/* PFLICHT: display:inline-flex schlaegt das display:none des
   hidden-Attributs. Ohne diese Zeile steht bei leerem Korb eine 0 da.
   Dieselbe Falle wie bei .kachel — sie hat hier schon zweimal
   zugeschlagen. */
.korb-zahl[hidden] { display: none; }

/* ---- Mehrere Aktivierungslinks auf der Danke-Seite ----
   Bei genau einem Abo bleibt der gewohnte einzelne Knopf; ab zwei
   Positionen tritt diese Liste an seine Stelle. Ein Knopf, der nur zum
   ersten von drei Abos fuehrt, verschweigt die anderen beiden. */
.aktivierungen { list-style: none; display: grid; gap: var(--s-3); }
.aktivierungen[hidden] { display: none; }
.aktivierungen .btn { width: 100%; }

/* ---- Der Warenkorb quittiert ----
   Die Zahl zaehlt hoch und das Zeichen macht einen Satz. Beides
   antwortet auf einen Klick und ist danach vorbei — der Korb pulsiert
   nicht vor sich hin. */
@keyframes korbSatz {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.korb-knopf.satz svg { animation: korbSatz 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
.korb-zahl { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.korb-knopf.satz .korb-zahl { transform: scale(1.18); }

/* ---- Der Flug in den Korb ----
   Ein Abbild des Produktbilds fliegt auf einer Kurve zum Korb. Es
   erklaert, WO das Ding gelandet ist — der Zaehler oben rechts wird
   sonst leicht uebersehen. Das Abbild liegt ueber allem, faengt aber
   keine Klicks ab und wird nach dem Flug entfernt. */
.korb-flug {
  position: fixed; z-index: 200;
  border-radius: 12px; overflow: hidden;
  pointer-events: none;
  box-shadow: var(--tiefe);
  will-change: transform, opacity;
}
.korb-flug img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (prefers-reduced-motion: reduce) {
  .korb-knopf.satz svg { animation: none; }
  .korb-knopf.satz .korb-zahl { transform: none; }
}

/* ---- Der Abgang ----
   Der Markenname riesig und nur als Kontur, unten angeschnitten, kaum
   heller als der Grund. Stand bis 08.09.2026 nur in start.css; die
   Produktseiten enden jetzt genauso — dieselbe Unterschrift unter
   jeder Seite, die etwas verkauft. */
.schluss {
  overflow: hidden; margin-top: 48px;
  user-select: none; pointer-events: none;
}
.schluss span {
  display: block; text-align: center; white-space: nowrap;
  font-size: clamp(58px, 13vw, 185px); font-weight: 700;
  letter-spacing: -0.045em; line-height: 0.9;
  transform: translateY(0.13em); /* Unterkante taucht ab */
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.08);
}
@supports not (-webkit-text-stroke: 1px #000) {
  .schluss span { color: rgba(255, 255, 255, 0.045); }
}
@media print, (forced-colors: active) { .schluss { display: none; } }