/* ============================================================
   start.css — die Startseite

   Stand bis 07.09.2026 als 970-Zeilen-<style> im Kopf von
   index.html. Dadurch war die Startseite die einzige Seite, deren
   Aussehen man nicht neben den anderen lesen konnte — und genau dort
   sind die sieben Formsprachen entstanden, die der Relaunch vom
   20.08.2026 wieder einsammeln musste.

   Setzt brand.css (Tokens) und layout.css (Kopf, Fuss, Knoepfe)
   voraus. Was hier doppelt zu layout.css steht, gewinnt — diese
   Datei wird spaeter noch entschlackt.
   ============================================================ */

/* Tokens kommen aus /css/brand.css — hier nur die Akzent-Aliase.
   Cyan war der alte Startseiten-Look; die Marke ist jetzt ueberall
   dieselbe. */
:root {
  --accent: var(--brand);
  --accent-2: var(--brand);
  --accent-dim: var(--brand-dim);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
/* Sanftes Scrollen nur fuer die, die Bewegung wollen: ein Anker-
   sprung ist fuer Reduced-Motion-Nutzer sonst eine Sekunde Animation,
   die sie explizit abbestellt haben. */
@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; }

/* Die Partikel-Schicht (#bg-canvas, js/backdrop.js) stand hier bis
   08.09.2026. Das erzeugte index.html hat kein Canvas mehr, das Skript
   ist geloescht; die Bestellseiten haben ihre eigene Regel in order.css.
   Korn kommt aus brand.css. */

.shell { position: relative; z-index: 1; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* Hier standen bis 07.09.2026 die alte Kopfzeile, der Hero mit der
   Schluesselkarte, das Kennzahlenband, das Regal aus Produkt-Tafeln
   und der alte vierspaltige Fuss. Alle fuenf sind entfallen: Kopf und
   Fuss stehen in layout.css, das Raster und das Zahlenband in
   shop.css, und der Hero ist dem Shop-Kopf gewichen.

   Gemessen, nicht geschaetzt: die Selektoren dieser Bloecke kamen im
   erzeugten index.html null mal vor. */

/* ---- Knoepfe: flach ----
   Vorher lagen hier Verlauf, Lichtkante, dunkler Rand, farbiger
   Schatten, ein Streiflicht und ein durchlaufender Pfeil uebereinander
   — sechs Effekte auf einem Knopf. Jeder fuer sich war vertretbar,
   zusammen war es Krawall.

   Geblieben ist das Noetige: eine volle Flaeche in der Signalfarbe,
   dunkle Schrift, beim Ueberfahren etwas heller. Ein Knopf muss
   aussehen wie ein Knopf, nicht wie ein Gegenstand. */
.btn-primary { background: var(--brand); color: var(--bg); }
.btn-primary:hover { background: #e6e6e8; }
.btn-ghost {
  background: transparent; color: var(--text);
  border-color: var(--line-2);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.26);
}
.btn-lg { padding: 14px 24px; font-size: 15px; border-radius: 11px; }

/* Der Pfeil rueckt beim Ueberfahren ein Stueck nach. Vorher liefen
   hier zwei Pfeile durch ein Fenster — huebsch, aber ein Effekt zu
   viel neben allem anderen. */
.arr { display: inline-block; font-size: 1em; }
.btn:hover .arr { transform: translateX(3px); }

/* ---- Ablauf: die drei Schritte unter dem Sortiment ----
   Der Ablauf ist eine Nebenbei-Information: er beantwortet "und
   dann?", er verkauft nicht. Als Streifen steht er da, wo die Frage
   aufkommt, statt als eigener Abschnitt mit Kopf.

   Lag bis 07.09.2026 im Bereich zwischen Hero und Section-Scaffold —
   und ging beim Ausraeumen der alten Startseite mit, weil dort nach
   KOMMENTARBEREICHEN geloescht wurde statt je Klasse. Wieder da. */
.ablaufstreifen {
  list-style: none; margin: var(--s-6) 0 0; padding: var(--s-6) 0 0;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6);
}
/* Bis 08.09.2026 stand der Streifen in 11/15/13px — ein Fluestern
   zwischen Kacheln und dem naechsten Kapitel. Er bleibt Nebeninformation,
   aber eine, die man ohne Buecken lesen kann. */
.ablaufstreifen li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 4px; align-items: baseline; }
.ablaufstreifen .n { grid-row: span 2; font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: 0.08em; }
.ablaufstreifen b { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.ablaufstreifen span:not(.n) { font-size: 14px; color: var(--muted); line-height: 1.55; }
@media (max-width: 760px) { .ablaufstreifen { grid-template-columns: 1fr; gap: 16px; } }

/* ---- Section scaffold ---- */
section { position: relative; }
#produkte, #ablauf, #faq { scroll-margin-top: 84px; }
.sec { padding: var(--s-8) 0; }
/* Linksbuendig. Ein zentrierter Kopf ueber jedem Abschnitt ist das
   Standardgeruest generierter Seiten; ausserdem liest sich Fliesstext
   mit fester linker Kante schlicht besser.

   Die Linie oben ist der Uebergang, der vorher fehlte: Abschnitte
   hoerten einfach auf und fingen wieder an. Das Etikett sitzt MITTEN
   auf der Linie und stanzt sie mit der Seitenfarbe aus — so beginnt
   jeder Abschnitt sichtbar, statt nur weiter unten zu stehen. */
.sec-head {
  position: relative;
  border-top: 1px solid var(--line);
  margin: 0 0 var(--s-7);
}
.sec-head h2 { max-width: 620px; font-size: var(--t-3xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; }
.sec-head p { max-width: 620px; color: var(--muted); margin-top: 16px; font-size: 16.5px; line-height: 1.6; }
.sec-head p a { color: var(--brand); font-weight: 600; }

/* ---- Ablauf: dieselbe Zeile wie die Produkte ----
   Vorher eine Zeitleiste mit eigener Schiene und Punkten — eine achte
   Formsprache auf einer Seite, die schon genug hatte. Jetzt dasselbe
   Raster wie die Produktliste: 44px Rinne, darin dasselbe 34er
   Quadrat, rechts daneben Titel und Text. Zwei Abschnitte, die sich
   reimen, statt zweier, die konkurrieren. */
/* Die Schiene: eine Senkrechte durch alle Schrittnummern. Drei
   Kaesten untereinander sind eine Liste; drei Kaesten auf einer
   Linie sind ein Prozess. Sie zeichnet sich beim Erscheinen von
   oben nach unten — dieselbe Bewegung wie die Kontur im FAQ. */
.schritte { position: relative; border-top: 1px solid var(--line); list-style: none; }
.schritte::before {
  content: ""; position: absolute;
  left: calc(var(--s-1) + 17px); top: 0; bottom: 0; width: 1px;
  background: var(--line-2);
}
.js .schritte::before { transform: scaleY(0); transform-origin: top; }
.js .schritte.in::before { animation: konturHoch 0.9s cubic-bezier(0.33, 1, 0.68, 1) 0.15s both; }
.schritt {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0 var(--s-5);
  padding: var(--s-5) var(--s-1);
  border-bottom: 1px solid var(--line);
}
.schritt-n {
  position: relative;
  grid-row: span 2; align-self: center;
  width: 34px; height: 34px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2);
  background: var(--bg); /* stanzt die Schiene aus */
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--brand);
}
.schritt h3 { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.02em; }
.schritt p { grid-column: 2; font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-top: 5px; max-width: 62ch; }

/* ---- Die Probe: echt neben falsch ----
   Fuenfte Fassung dieses Blocks, und die erste mit der richtigen
   Frage. Alle vorherigen ERZAEHLTEN von Sicherheit (Band, Linie,
   Rahmen, Siegel); die Ueberschrift verspricht aber „woran Sie
   ERKENNEN". Erkennen lernt man am Beispiel, nicht am Absatz — so
   bringen es Banken bei: echt und falsch nebeneinander.

   Die Seitensprache liefert die Semantik: die Eckwinkel (die
   Bildsprache des Gepruueften) fassen NUR das echte Exemplar, und
   Helligkeit trennt — echt liegt im Licht, falsch liegt im Dunkeln
   und ist durchgestrichen. Kein Schild, kein Schloss; die Symbole
   sind verbrannt (siehe NoScript-Redesign). */
.pruefung-satz {
  font-size: clamp(17px, 2vw, 21px); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.35;
  color: var(--text); max-width: 34ch;
  text-wrap: balance; margin-bottom: 26px;
}
.pruefung {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-5); align-items: stretch;
}
@media (max-width: 760px) { .pruefung { grid-template-columns: 1fr; } }
.probe { position: relative; padding: 22px 24px 20px; }
.probe-label {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  margin-bottom: 18px;
}
.probe.echt .probe-label { color: var(--text); }
.probe.falsch .probe-label { color: var(--faint); }

/* Nur das Echte bekommt die Eckwinkel — der Rahmen IST das
   Echtheitszeichen. Das Falsche bekommt gar nichts: fuer es
   buergt niemand. */
.probe.echt::before, .probe.echt::after,
.probe-ecken::before, .probe-ecken::after {
  content: ""; position: absolute;
  width: 16px; height: 16px;
  border-color: var(--line-2); border-style: solid; border-width: 0;
}
.probe-ecken { position: absolute; inset: 0; pointer-events: none; }
.probe.echt::before       { left: 0; top: 0;    border-top-width: 1px; border-left-width: 1px; }
.probe.echt::after        { right: 0; top: 0;   border-top-width: 1px; border-right-width: 1px; }
.probe-ecken::before      { left: 0; bottom: 0; border-bottom-width: 1px; border-left-width: 1px; }
.probe-ecken::after       { right: 0; bottom: 0; border-bottom-width: 1px; border-right-width: 1px; }
/* Echt liegt im Licht. */
.probe.echt {
  background: radial-gradient(340px 150px at 30% 0%,
              rgba(255, 255, 255, 0.05), transparent 75%);
}

/* Das echte Exemplar: die Adresszeile. Das Einzige, was ein Kunde
   wirklich pruefen kann, als das gezeigt, was er sieht. */
.probe-adresse {
  display: flex; align-items: baseline; gap: 2px;
  font-family: var(--mono); font-size: 13.5px;
  border: 1px solid var(--line-2); border-radius: 9px;
  padding: 11px 15px;
  background: rgba(255, 255, 255, 0.03);
  white-space: nowrap; overflow: hidden;
}
.probe-adresse .dim { color: var(--faint); }
.probe-adresse .hell { color: var(--text); font-weight: 600; }

/* Das falsche Exemplar: die Nachricht, die es nie geben wird —
   gedimmt und durchgestrichen. Der Strich laeuft diagonal ueber
   die ganze Blase: durchgestrichen wie ein Fehler im Dokument. */
/* 0,75 statt tiefer: bei 0,68 fiele der Blasentext auf 4,15:1 und
   damit unter die Schwelle. Das Exemplar soll dunkel WIRKEN, aber
   lesbar BLEIBEN — das Dunkle tragen Strich, Label und Rand. */
.probe-dm { position: relative; opacity: 0.75; }
.probe-dm-kopf {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--muted); margin-bottom: 8px;
}
.probe-dm-avatar {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg-2); border: 1px solid var(--line);
  flex: none;
}
.probe-dm-blase {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 14px; font-size: 13px; color: var(--muted);
  line-height: 1.55;
}
/* Der Strich ist ein SVG, kein Verlauf: eine Verlaufs-Diagonale
   aliast bei flachem Winkel zu einer Treppe. Eine Vektorlinie
   bleibt bei jedem Winkel eine Linie. */
.probe-strich {
  position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px);
  pointer-events: none; overflow: visible;
}
.probe-strich line {
  stroke: var(--faint); stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.probe p {
  font-size: 13px; color: var(--muted); line-height: 1.65;
  margin-top: 14px; max-width: 44ch;
}
.probe p strong { color: var(--text); font-weight: 600; }

/* ---- FAQ: der Rahmen entsteht beim Aufklappen ----
   Vier Fassungen liegen hinter dieser. Karten, dann graue Fuellung
   beim Oeffnen, dann eine weisse Kante links, dann gar kein
   Aufklappen mehr. Die letzte war zu weit gedacht: alles offen
   heisst auf dem Handy dreimal so viel Scrollen, und es nimmt der
   Seite die Bewegung, die sie an dieser Stelle vertraegt.

   Jetzt klappt es wieder auf — aber der Zustand wird nicht mehr
   durch eine hellere Flaeche gezeigt, sondern durch eine Kontur, die
   sich um die Antwort ZIEHT. Vier Linien im Uhrzeigersinn, dieselbe
   Bewegung wie sonst nirgends auf der Seite, und sie beantwortet
   genau die Frage, die ein Klick stellt: was ist jetzt anders?

   Keine Fuellung, kein Schatten. Nur Linien, eine Nummer und ein
   Plus, das zum Minus wird. */
.faq { border-top: 1px solid var(--line); counter-reset: faq; }
details {
  position: relative;
  border-bottom: 1px solid var(--line);
  counter-increment: faq;
}
summary {
  position: relative;
  list-style: none; cursor: pointer; padding: 18px var(--s-1);
  display: flex; align-items: center; gap: 16px;
  font-size: 15px; font-weight: 600; color: var(--muted);
  transition: color 0.22s ease;
}
summary::-webkit-details-marker { display: none; }
/* Die Nummer macht aus der Liste ein Register — und gibt dem Auge
   einen Ankerpunkt links, wo sonst nichts steht. */
summary::before {
  content: counter(faq, decimal-leading-zero);
  flex: 0 0 auto; width: 24px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--faint);
  transition: color 0.24s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
summary .ic { flex-shrink: 0; margin-left: auto; color: var(--faint); transition: color 0.22s ease; }
summary .ic .ic-v {
  transform-box: view-box; transform-origin: 8px 8px;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
details:hover summary { color: var(--text); }
details:hover summary::before,
details:hover summary .ic { color: var(--muted); }
details[open] summary { color: var(--text); }
details[open] summary::before { color: var(--brand); transform: translateX(3px); }
details[open] summary .ic { color: var(--brand); }
details[open] summary .ic .ic-v { transform: scaleY(0); }

/* ---- Die Kontur um die Antwort ----
   Vier Linien aus zwei Elementen: .faq-body traegt oben und unten,
   .faq-rahmen links und rechts. Sie starten eingefahren und ziehen
   sich nacheinander auf, sobald details[open] gilt. */
.faq-body {
  position: relative;
  margin: 0 var(--s-1) 20px calc(var(--s-1) + 40px);
  padding: 16px 18px;
  max-width: 72ch;
}
.faq-rahmen { position: absolute; inset: 0; pointer-events: none; }
.faq-body::before, .faq-body::after,
.faq-rahmen::before, .faq-rahmen::after {
  content: ""; position: absolute; background: var(--line-2);
}
.faq-body::before   { left: 0; right: 0; top: 0; height: 1px; transform: scaleX(0); transform-origin: left; }
.faq-rahmen::before { top: 0; bottom: 0; right: 0; width: 1px; transform: scaleY(0); transform-origin: top; }
.faq-body::after    { left: 0; right: 0; bottom: 0; height: 1px; transform: scaleX(0); transform-origin: right; }
.faq-rahmen::after  { top: 0; bottom: 0; left: 0; width: 1px; transform: scaleY(0); transform-origin: bottom; }

/* Keyframes, KEINE Uebergaenge — und das ist der ganze Punkt.
   Ein Uebergang braucht einen Vorher-Wert zum Interpolieren. Beim
   ersten Aufklappen entsteht die Antwort aber gerade erst im
   Renderbaum: es gibt kein Vorher, also sprang die Kontur sofort auf
   Endstand. Ab dem zweiten Mal existierte das Element schon (dank
   content-visibility bleibt es erhalten) und es lief — genau das
   Muster, das man als "nur beim ersten Mal kaputt" sieht.
   Eine Animation laeuft dagegen auch auf einem Element, das gerade
   erst erscheint. */
@keyframes konturQuer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes konturHoch { from { transform: scaleY(0); } to { transform: scaleY(1); } }
details[open] .faq-body::before   { animation: konturQuer 0.34s cubic-bezier(0.33, 1, 0.68, 1) 0.02s both; }
details[open] .faq-rahmen::before { animation: konturHoch 0.34s cubic-bezier(0.33, 1, 0.68, 1) 0.24s both; }
details[open] .faq-body::after    { animation: konturQuer 0.34s cubic-bezier(0.33, 1, 0.68, 1) 0.46s both; }
details[open] .faq-rahmen::after  { animation: konturHoch 0.34s cubic-bezier(0.33, 1, 0.68, 1) 0.68s both; }

.faq-body p { color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.faq-body strong { color: var(--text); font-weight: 600; }
/* Unterstrichen, nicht nur heller: ein Link, den man allein an der
   Helligkeit erkennt, ist fuer Farbsehschwaeche keiner. */
.faq-body a {
  color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.42);
  text-decoration-thickness: 1px;
}
.faq-body a:hover { text-decoration-color: currentColor; }
/* Wo der Browser es kann, waechst die Zeile mit, statt zu springen. */
@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  details::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                content-visibility 0.4s allow-discrete;
  }
  details[open]::details-content { block-size: auto; }
}
@media (max-width: 760px) {
  .faq-body { margin-left: var(--s-1); margin-right: 0; }
}
/* ---- Schlusszeichen ----
   Die Seite endete bisher einfach: letzte Fusszeile, Schnitt. Jetzt
   steht unter allem der Markenname, riesig und nur als Kontur —
   kaum heller als der Grund, unten angeschnitten, wie gepraegt
   statt gedruckt. Der Abgang eines Dokuments, nicht einer Liste. */
/* .schluss (der Markenname als Kontur unter dem Fuss) steht seit dem
   08.09.2026 in layout.css: die Produktseiten tragen ihn jetzt auch. */

/* ---- Responsive ---- */
@media (max-width: 900px) {
  /* Navigation klappt jetzt aus, statt ersatzlos zu verschwinden. */
  .nav-links {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--e2); box-shadow: var(--kante), var(--tiefe);
    border-bottom: 1px solid var(--line);
    padding: var(--s-2) var(--s-5) var(--s-4);
  }
  .nav-links.offen { display: flex; }
  .nav-links a {
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
  }
  .nav-links a:last-child { border-bottom: none; }
  header { position: sticky; }
  .nav { position: relative; }
  /* Auf schmalen Bildschirmen konkurriert der Kauf-Knopf mit dem
     Menueknopf um den Platz — der Hero-Knopf steht ohnehin gleich
     darunter. */
  .nav-kauf { display: none; }
  /* Drei Kennzahlen passen hier noch nebeneinander (bei 900px sind das
     je 268px). Auf zwei Spalten fiele die dritte allein in eine zweite
     Zeile — genau die Unwucht, wegen der diese Zeile ueberhaupt
     umgebaut wurde. */
  .stats { grid-template-columns: repeat(3, 1fr); row-gap: var(--s-5); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .hero { padding: 64px 0 48px; }
  .sec { padding: var(--s-7) 0; }
  /* Unter 540px wird die dritte Spalte zu schmal fuer
     "SPAETESTENS AKTIVIERT". Also zwei Spalten — und die dritte
     Kennzahl nimmt bewusst die ganze Breite, statt verwaist
     danebenzustehen. */
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats .stat:last-child { grid-column: 1 / -1; }
  .foot-grid { grid-template-columns: 1fr; }
}
/* ---- Ruhe, wenn der Nutzer sie eingestellt hat ----
   Bewusst ganz am Schluss: Media Queries erhoehen die Spezifitaet
   nicht. Stuenden diese Regeln weiter oben, gewaenne die spaeter
   notierte Animation, und die Einstellung liefe ins Leere. */
@media (prefers-reduced-motion: reduce) {
  .btn:hover:not(:active) { transform: none; }
  .btn:hover .arr { transform: none; }
  .nav-links a::after, .foot-col a::after { transition: none; }
  /* Der Lichtstreifen ueber dem Siegel und die Kontur, die sich um
     die geoeffnete Antwort zieht, fallen weg. Die Eckwinkel und die
     Kontur selbst bleiben sichtbar — nur der Weg dorthin entfaellt. */
  summary, summary::before, summary .ic, summary .ic .ic-v { transition: none; }
  .faq-body::before, .faq-body::after,
  .faq-rahmen::before, .faq-rahmen::after {
    transition: none; transform: none;
  }
  details[open] .faq-body::before, details[open] .faq-body::after,
  details[open] .faq-rahmen::before, details[open] .faq-rahmen::after { animation: none; }
  .js .schritte::before { transform: none; }
  .js .schritte.in::before { animation: none; }
  details::details-content { transition: none; }
}