/* --------------------------------------------------------------------
   Die öffentliche Seite — zerspano.de

   Kevin am 15.09.2026: „Die Website darf nicht wie eine klassische
   Unternehmenshomepage aussehen. Sie soll sich wie die Website eines
   modernen Softwareunternehmens anfühlen, gleichzeitig aber den
   industriellen Charakter von Zerspano behalten."

   Eigene Datei, nicht in app.css. Die Anwendung soll bedienbar sein,
   die Seite soll überzeugen — das sind zwei verschiedene Aufgaben, und
   eine gemeinsame Datei hätte früher oder später die eine zugunsten
   der anderen verbogen. Geteilt werden nur die Farbmarken aus app.css;
   das hält beides beieinander, ohne es zu verschmelzen.

   Industriell heißt hier nicht grau: eine ruhige, tiefe Fläche, ein
   kühles Blau als einzige Farbe, dazu ein warmes Orange nur dort, wo
   es brennt (Notfall). Große Typografie, viel Luft, wenig Linien.
   -------------------------------------------------------------------- */

.seite {
  /* Kevin am 15.09.2026: „das Logo, die Schrift und Farben wie bei
     Zerspano Software." Deshalb stehen hier **genau** die Werte aus
     app.css (dunkle Fassung) - nicht ähnliche. Eine Verkaufsseite, die
     eine Spur anders aussieht als das Produkt dahinter, fällt beim
     ersten Klick auf „Anmelden" auf.

     Die Marken heißen `--akzent`, `--schrift` und so weiter - genau
     wie in der Anwendung. Damit greifen auch mitgelieferte Teile wie
     das Logo (`_logo.html`), ohne dass sie etwas davon wissen müssen;
     vorher war das Logo schwarz auf schwarz, weil `--akzent` hier
     schlicht nicht vergeben war. */
  --grund:        #14171c;
  --flaeche:      #1b1f26;
  --flaeche-2:    #21262e;
  --rand:         #2e343d;
  --rand-stark:   #414a55;
  --schrift:      #e6e9ee;
  --schrift-matt: #98a2b0;
  --akzent:       #559bec;
  --akzent-hell:  #17263a;
  --akzent-text:  #0d1117;
  --gut:          #4ac48a;
  --warn:         #e0a458;
  --fehler:       #f27a72;

  /* Die Kurznamen der Seite zeigen auf dieselben Werte. Sie bleiben,
     damit die Vorlagen kurz lesbar sind. */
  --s-grund:       var(--grund);
  --s-flaeche:     var(--flaeche);
  --s-flaeche-2:   var(--flaeche-2);
  --s-rand:        var(--rand);
  --s-schrift:     var(--schrift);
  --s-matt:        var(--schrift-matt);
  --s-akzent:      var(--akzent);
  --s-akzent-2:    #7ab4f2;
  --s-akzent-tief: var(--akzent-hell);
  --s-feuer:       var(--fehler);
  --s-gut:         var(--gut);

  background: var(--grund);
  color: var(--schrift);
  /* Dieselbe Schrift wie in der Anwendung - dort steht sie in
     app.css als `font: 15px/1.5 "Segoe UI", …`. Hier größer, weil
     eine Seite zum Lesen da ist und eine Maske zum Arbeiten. */
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* Das Logo aus `_logo.html`: Bildzeichen im Akzent, Wortmarke in der
   Schriftfarbe - genau wie in der Anwendung. */
.seite .zlogo { display: block; height: 30px; width: auto; }
.seite .zlogo-zeichen { fill: var(--akzent); }
.seite .zlogo-wort { fill: var(--schrift); }

.seite *, .seite *::before, .seite *::after { box-sizing: border-box; }

.seite a { color: var(--s-akzent-2); text-decoration: none; }
.seite a:hover { text-decoration: underline; }

.s-mitte { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.s-schmal { max-width: 820px; margin: 0 auto; padding: 0 24px; }

/* --- Kopfzeile: bleibt oben stehen, Anmelden immer sichtbar -------- */
.s-kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20, 23, 28, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--s-rand);
}
.s-kopf-innen {
  display: flex; align-items: center; gap: 28px;
  max-width: 1180px; margin: 0 auto; padding: 14px 24px;
}
.s-marke { display: flex; align-items: center; flex: 0 0 auto; }
.s-marke .zlogo { height: 28px; }
.s-fuss .s-marke .zlogo { height: 26px; }
/* Kein Umbruch: eine Leiste, die in zwei Reihen faellt, sieht aus wie
   ein Fehler - und war einer (15.09.2026). Passt etwas nicht mehr,
   gehoert es in die Fusszeile, nicht in eine zweite Zeile. */
.s-nav {
  display: flex; gap: 20px; flex: 1 1 auto; flex-wrap: nowrap;
  min-width: 0;
}
.s-nav a { white-space: nowrap; }
.s-nav a {
  color: var(--s-matt); font-size: 15px; font-weight: 500;
  padding: 4px 0; border-bottom: 2px solid transparent;
}
.s-nav a:hover, .s-nav a.aktiv {
  color: var(--s-schrift); text-decoration: none;
  border-bottom-color: var(--s-akzent);
}
.s-kopf-rechts { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
/* Oben sind die Knoepfe schmaler als im Text - drei nebeneinander
   brauchen den Platz. */
.s-kopf-rechts .s-knopf { padding: 9px 16px; font-size: 14.5px; gap: 6px; }

.s-knopf {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 8px;
  border: 1px solid var(--s-rand); background: transparent;
  color: var(--s-schrift); font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.s-knopf:hover { background: var(--s-flaeche-2); text-decoration: none; }
.s-knopf.haupt {
  background: var(--akzent); border-color: var(--akzent);
  color: var(--akzent-text);
}
.s-knopf.haupt:hover { background: var(--s-akzent-2); border-color: var(--s-akzent-2); }
.s-knopf.gross { padding: 15px 30px; font-size: 17px; }

/* Klappmenü für kleine Bildschirme. Auf dem Schreibtisch unsichtbar,
   dort steht die Navigation ausgeschrieben da. */
.s-klappmenue { display: none; position: relative; }
.s-klappmenue summary {
  list-style: none; cursor: pointer; font-size: 22px; line-height: 1;
  padding: 8px 10px; border: 1px solid var(--s-rand); border-radius: 8px;
  color: var(--s-schrift);
}
.s-klappmenue summary::-webkit-details-marker { display: none; }
.s-klappmenue nav {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 210px; display: flex; flex-direction: column; gap: 2px;
  background: var(--s-flaeche); border: 1px solid var(--s-rand);
  border-radius: 12px; padding: 10px;
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9);
}
.s-klappmenue nav a {
  color: var(--s-schrift); padding: 10px 12px; border-radius: 8px;
  font-size: 16px;
}
.s-klappmenue nav a:hover { background: var(--s-flaeche-2); text-decoration: none; }

/* --- Held ---------------------------------------------------------- */
.s-held { padding: 96px 0 72px; position: relative; overflow: hidden; }
.s-held::before {
  content: ""; position: absolute; inset: -40% 20% auto -10%;
  height: 620px; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 50%,
              rgba(85, 155, 236, .14), transparent 70%);
}
.s-held-innen { position: relative; }
.s-augenbraue {
  display: inline-block; margin-bottom: 18px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--s-akzent-tief); color: var(--s-akzent-2);
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
}
.s-held h1 {
  margin: 0 0 20px;
  font-size: clamp(38px, 6vw, 68px); line-height: 1.06;
  font-weight: 700; letter-spacing: -.025em; text-wrap: balance;
  max-width: 17ch;
}
.s-held h1 em { font-style: normal; color: var(--s-akzent); }
.s-held-text {
  font-size: clamp(17px, 2.2vw, 21px); color: var(--s-matt);
  max-width: 62ch; margin: 0 0 32px;
}
.s-knopfzeile { display: flex; gap: 14px; flex-wrap: wrap; }
.s-unterzeile {
  margin-top: 18px; font-size: 14px; color: var(--s-matt);
  display: flex; gap: 18px; flex-wrap: wrap;
}
.s-unterzeile span { display: inline-flex; align-items: center; gap: 6px; }

/* --- Abschnitte ---------------------------------------------------- */
.s-block { padding: 80px 0; }
.s-block.dunkler { background: var(--s-flaeche); border-block: 1px solid var(--s-rand); }
.s-block h2 {
  margin: 0 0 14px;
  font-size: clamp(28px, 4vw, 42px); line-height: 1.15;
  font-weight: 700; letter-spacing: -.02em; text-wrap: balance;
}
.s-block .s-vorspann {
  font-size: 18px; color: var(--s-matt); max-width: 62ch; margin: 0 0 40px;
}
.s-kapitel {
  font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--s-akzent); margin: 0 0 12px;
}

/* --- Gitter und Karten --------------------------------------------- */
.s-gitter {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}
.s-gitter.zwei { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }
.s-karte {
  background: var(--s-flaeche); border: 1px solid var(--s-rand);
  border-radius: 14px; padding: 26px;
  transition: border-color .15s ease, transform .15s ease;
}
.s-karte:hover { border-color: #33404f; }
.s-karte h3 {
  margin: 0 0 10px; font-size: 19px; font-weight: 650;
  display: flex; align-items: center; gap: 10px;
}
.s-karte p { margin: 0; color: var(--s-matt); font-size: 15.5px; }
.s-karte .s-zeichen { font-size: 22px; line-height: 1; }
.s-karte.hell { background: var(--s-flaeche-2); }

/* --- Problem → Lösung ---------------------------------------------- */
.s-problem { display: grid; gap: 10px; }
.s-problem li {
  list-style: none; padding: 12px 0 12px 34px; position: relative;
  color: var(--s-matt); border-bottom: 1px solid var(--s-rand);
  font-size: 16.5px;
}
.s-problem li:last-child { border-bottom: none; }
.s-problem li::before {
  content: "✕"; position: absolute; left: 4px; top: 12px;
  color: #6b4a4a; font-weight: 700;
}
.s-loesung {
  margin-top: 34px; padding: 26px 30px; border-radius: 14px;
  background: var(--s-akzent-tief); border: 1px solid #1d3a5e;
  font-size: clamp(20px, 3vw, 27px); font-weight: 650; line-height: 1.3;
}

/* --- Video und Schaubilder ----------------------------------------- */
.s-bildrahmen {
  border: 1px solid var(--s-rand); border-radius: 14px;
  background: var(--s-flaeche); overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9);
}
.s-bildrahmen img, .s-bildrahmen video { display: block; width: 100%; height: auto; }
.s-bildleiste {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px; border-bottom: 1px solid var(--s-rand);
  background: var(--s-flaeche-2);
}
.s-bildleiste i {
  width: 11px; height: 11px; border-radius: 50%; background: #39424f;
  display: block;
}
.s-bildleiste span {
  margin-left: 10px; font-size: 12.5px; color: var(--s-matt);
  font-family: ui-monospace, Consolas, monospace;
}
.s-fehlt {
  padding: 60px 26px; text-align: center; color: var(--s-matt);
  font-size: 15px; border: 1px dashed var(--s-rand); border-radius: 10px;
  margin: 18px;
}
.s-bildunterschrift {
  margin: 12px 0 0; font-size: 14px; color: var(--s-matt);
}

/* --- Zahlen -------------------------------------------------------- */
.s-zahlen {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}
.s-zahl { text-align: center; padding: 22px 12px; }
.s-zahl b {
  display: block; font-size: clamp(30px, 5vw, 46px); font-weight: 700;
  line-height: 1.1; color: var(--s-schrift);
  font-variant-numeric: tabular-nums;
}
.s-zahl span { font-size: 14.5px; color: var(--s-matt); }

/* --- Preise -------------------------------------------------------- */
.s-preis {
  background: var(--s-flaeche); border: 1px solid var(--s-rand);
  border-radius: 16px; padding: 30px;
}
.s-preis.betont { border-color: var(--s-akzent); }
.s-preis-zahl {
  font-size: 44px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.s-preis-zahl small { font-size: 16px; font-weight: 500; color: var(--s-matt); }
.s-liste { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 9px; }
.s-liste li {
  padding-left: 26px; position: relative; color: var(--s-matt);
  font-size: 15.5px;
}
.s-liste li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--s-gut); font-weight: 700;
}
.s-modultabelle { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.s-modultabelle td {
  padding: 13px 0; border-bottom: 1px solid var(--s-rand);
  vertical-align: top;
}
.s-modultabelle tr:last-child td { border-bottom: none; }
.s-modultabelle .preis {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.s-modultabelle .dabei { color: var(--s-gut); font-weight: 600; }
.s-modultabelle .was { color: var(--s-matt); font-size: 14.5px; }

/* --- Marker -------------------------------------------------------- */
.s-marke-klein {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  background: var(--s-akzent-tief); color: var(--s-akzent-2);
}
.s-marke-klein.gut { background: #12291f; color: var(--s-gut); }
.s-marke-klein.feuer { background: #2e1a12; color: var(--s-feuer); }

/* --- FAQ ----------------------------------------------------------- */
.s-faq { border-top: 1px solid var(--s-rand); }
.s-faq details { border-bottom: 1px solid var(--s-rand); }
.s-faq summary {
  padding: 20px 40px 20px 0; cursor: pointer; font-size: 18px;
  font-weight: 600; position: relative; list-style: none;
}
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 17px;
  font-size: 24px; color: var(--s-akzent); font-weight: 400;
}
.s-faq details[open] summary::after { content: "−"; }
.s-faq .antwort { padding: 0 40px 22px 0; color: var(--s-matt); }
.s-faq .antwort p { margin: 0 0 12px; }
.s-faq .antwort p:last-child { margin-bottom: 0; }

/* --- Die Netzwerkkarte --------------------------------------------- */
.s-kartenzeichen {
  display: flex; justify-content: center; gap: 22px; flex-wrap: wrap;
  margin-top: 14px; font-size: 13px; color: var(--s-matt);
}
.s-kartenzeichen span { display: inline-flex; align-items: center; gap: 7px; }
.s-kartenzeichen i {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block;
}
/* Der Hinweis, dass die volle Karte ein Beispiel ist. Er muss auffallen
   - sonst liest ihn niemand, und dann steht dort eine Behauptung. */
.s-beispiel {
  margin-top: 14px; padding: 11px 15px;
  border: 1px dashed var(--s-rand); border-radius: 10px;
  background: rgba(255,255,255,.02);
}

/* --- Fußzeile ------------------------------------------------------ */
.s-fuss {
  background: var(--s-flaeche); border-top: 1px solid var(--s-rand);
  padding: 56px 0 30px; font-size: 15px;
}
/* Vier Spalten, fest benannt: die Marke breiter, daneben die drei
   Listen gleich breit. Hier stand einmal
   `1.4fr repeat(auto-fit, minmax(140px, 1fr))` - das ist ungueltig:
   `auto-fit` und eine `fr`-Spalte duerfen nicht in derselben Angabe
   stehen. Der Browser wirft dann die ganze Zeile weg, und die Fusszeile
   fiel in eine einzige Spalte zusammen (15.09.2026). */
.s-fuss-gitter {
  display: grid;
  gap: 40px 48px;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  align-items: start;
}
.s-fuss-gitter > div { min-width: 0; }
.s-fuss h4 {
  margin: 0 0 16px; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--s-matt); font-weight: 700;
}
.s-fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.s-fuss a { color: var(--s-matt); }
.s-fuss a:hover { color: var(--s-schrift); }
.s-fuss-unten {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--s-rand);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--s-matt); font-size: 14px;
}

/* --- Sanfte Einblendung beim Scrollen ------------------------------ */
.s-auf { opacity: 0; transform: translateY(18px); }
.s-auf.da { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s ease; }
@media (prefers-reduced-motion: reduce) {
  .s-auf, .s-auf.da { opacity: 1; transform: none; transition: none; }
}

/* --- Kleine Bildschirme -------------------------------------------- */
@media (max-width: 1120px) {
  .s-nav { gap: 14px; font-size: 14px; }
  .s-kopf-rechts .s-knopf { padding: 8px 12px; font-size: 14px; }
}
@media (max-width: 900px) {
  .s-nav { display: none; }
  .s-klappmenue { display: block; }
  .s-kopf-innen { gap: 14px; }
  .s-held { padding: 64px 0 48px; }
  .s-block { padding: 56px 0; }
  /* Die Marke ueber die volle Breite, die drei Listen darunter. */
  .s-fuss-gitter { grid-template-columns: repeat(3, 1fr); }
  .s-fuss-gitter > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .seite { font-size: 16px; }
  .s-knopfzeile .s-knopf { width: 100%; justify-content: center; }
  .s-fuss-gitter { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
}

/* Die Seite ist dunkel gehalten - hell wäre ein anderes Gesicht, nicht
   dieselbe Seite in anderer Farbe. Der Umschalter der Anwendung wirkt
   deshalb hier nicht; drinnen entscheidet ihn weiterhin jeder selbst. */

/* --- Die Kategorien im Schaufenster des Shops ---------------------- */
.s-shopvorschau {
  display: grid; gap: 12px;
  grid-template-columns: 1fr 1fr;
}
.s-shopvorschau .s-shopkachel:first-child { grid-column: 1 / -1; }
.s-shopkachel {
  display: grid; gap: 4px; align-content: start;
  padding: 14px 16px; border: 1px solid var(--s-rand);
  border-radius: 12px; background: rgba(255,255,255,.02);
}
.s-shopkachel .zeichen { font-size: 22px; }
.s-shopkachel small { color: var(--s-matt); font-size: 12px; }

/* Der Knopf fuer Haendler. Er steht neben "Kostenlos testen" und muss
   sich davon unterscheiden, ohne lauter zu sein: ein Haendler kommt
   nicht wegen der Software her, sondern wegen des Shops - und faende
   unter "Kostenlos testen" das Falsche (15.09.2026). */
.s-knopf.haendler {
  border-color: var(--s-akzent);
  color: var(--s-akzent);
  background: rgba(85, 155, 236, .08);
}
.s-knopf.haendler:hover { background: rgba(85, 155, 236, .16); }

/* Das Anmeldeformular fuer Haendler. */
.s-formular { display: grid; gap: 14px; }
.s-formular label { display: grid; gap: 5px; font-size: 14px; }
.s-formular small { color: var(--s-matt); font-size: 12px; }
.s-formular input {
  width: 100%; padding: 9px 11px; border-radius: 9px;
  border: 1px solid var(--s-rand); background: var(--s-grund);
  color: var(--s-schrift); font: inherit; font-size: 15px;
}
.s-formular input:focus {
  outline: 2px solid var(--s-akzent); outline-offset: 1px;
}
.s-feldpaar { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.s-hinweis.fehler {
  padding: 12px 15px; border-radius: 10px;
  border: 1px solid #a3403a; background: rgba(163, 64, 58, .14);
}
/* Die drei Schritte bis zur Freischaltung. */
.s-schritte { list-style: none; counter-reset: schritt; padding: 0; margin: 0;
  display: grid; gap: 14px; }
.s-schritte li {
  counter-increment: schritt; display: grid; gap: 3px;
  padding-left: 38px; position: relative;
}
.s-schritte li::before {
  content: counter(schritt); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: rgba(85, 155, 236, .14); color: var(--s-akzent);
}
.s-schritte span { color: var(--s-matt); font-size: 14px; }
.s-klein { color: var(--s-matt); font-size: 13px; }

/* --- Die Baustelle -------------------------------------------------
   Eine einzelne, ruhige Seite. Sie erbt die Farben der Homepage, aber
   nicht ihr Geruest: ein volles Menue auf einer Baustellenseite waere
   ein Widerspruch (16.09.2026). */
body.baustelle {
  /* `box-sizing` ist hier kein Zierrat: ohne es rechnet der Browser die
     Polsterung **zur** Hoehe dazu, und die Seite wird um genau diese
     52 Pixel hoeher als das Fenster - man muss auf dem Telefon wischen,
     obwohl nichts weiter unten steht (16.09.2026).
     `dvh` statt `vh`, weil die Leiste des Handy-Browsers mitwandert. */
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(85,155,236,.10), transparent 70%),
    var(--s-grund);
}
.b-mitte {
  width: 100%;
  max-width: 620px;
  text-align: center;
}
.b-marke { margin-bottom: 34px; }
.b-marke .zlogo { height: 34px; }
.b-kapitel {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--s-akzent);
  font-weight: 700;
}
.baustelle h1 {
  margin: 0 0 22px;
  font-size: clamp(28px, 6vw, 42px);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.b-vorspann {
  margin: 0 auto 14px;
  max-width: 52ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--s-matt);
}
.b-kontakt {
  margin: 32px auto 0;
  padding: 18px 22px;
  max-width: 52ch;
  border: 1px solid var(--s-rand);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  display: grid;
  gap: 4px;
  font-size: 15px;
}
.b-kontakt span { color: var(--s-matt); font-size: 14px; }
.b-kontakt a { font-weight: 600; }
.b-unten {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.b-knopf {
  display: inline-flex;
  padding: 10px 22px;
  border-radius: 9px;
  border: 1px solid var(--s-rand);
  color: var(--s-schrift);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.b-knopf:hover { background: rgba(255,255,255,.05); text-decoration: none; }
.b-rechtliches { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.b-rechtliches a { color: var(--s-matt); font-size: 13.5px; }
.b-rechtliches a:hover { color: var(--s-schrift); }

/* Auf dem Telefon soll die Baustelle **ohne Scrollen** dastehen. Kevin
   ruft sie dort auf, und eine Seite mit vier Saetzen, bei der man
   wischen muss, wirkt laenger als sie ist (16.09.2026). */
@media (max-height: 900px), (max-width: 560px) {
  body.baustelle { padding: 26px 18px; }
  .b-marke { margin-bottom: 22px; }
  .b-marke .zlogo { height: 28px; }
  .baustelle h1 { margin-bottom: 16px; }
  .b-vorspann { font-size: 15.5px; margin-bottom: 11px; }
  .b-kontakt { margin-top: 22px; padding: 14px 18px; }
  .b-unten { margin-top: 26px; gap: 16px; }
}

/* --- Die Kopfzeile auf dem Telefon ---------------------------------
   Drei Knoepfe plus Menuesymbol sind 417 Pixel breit. Auf einem Handy
   mit 390 Pixeln schiebt sich damit die **ganze Seite** seitlich weg -
   und das sieht aus wie kaputt, nicht wie eng (16.09.2026).
   Oben bleibt deshalb ein Knopf; die anderen stehen im Klappmenue. */
@media (max-width: 700px) {
  .s-kopf-rechts .s-knopf.nur-gross { display: none; }
  .s-kopf-innen { gap: 10px; }
  .s-kopf-rechts { min-width: 0; }
}
@media (max-width: 420px) {
  .s-kopf-rechts .s-knopf { padding: 8px 13px; font-size: 13.5px; }
  .s-marke .zlogo { height: 24px; }
}

/* Ein Kind im Raster darf sich standardmaessig so breit machen, wie
   sein laengster unteilbarer Inhalt ist - auch breiter als sein Fach.
   Auf dem Telefon schob das die Seite um fuenfzehn Pixel nach rechts
   (16.09.2026). `min-width: 0` nimmt ihm diese Erlaubnis; der Inhalt
   bricht dann um, statt auszubrechen. */
.s-gitter > *,
.s-fuss-gitter > *,
.s-kacheln > * { min-width: 0; }