/* GRID.Whisper – nur noch das, was ES ALLEIN AUF DER STARTSEITE GIBT.
   Tokens, Kopf-/Fusszeile, Formular und Link-Vorschau stehen in base.css und werden von
   BEIDEN Seiten geladen. Hier steht ausschliesslich, was unter dem Formular kommt: die
   drei Merkmale, der Sicherheitstext und die Fragen.

   Diese Datei ist am 03.08.2026 von 668 auf rund 130 Zeilen geschrumpft. Der Grund ist
   nicht Sparsamkeit. Ersatzlos entfallen sind: die vier Marketing-Baender, die drei
   SVG-Mockups und das Zero-Knowledge-Diagramm. Die Mockups bildeten die App nach – und
   die App steht jetzt echt und bedienbar darueber. Eine gezeichnete Kopie dessen, was
   zwei Zentimeter hoeher in Betrieb ist, war eine zweite Wahrheit ueber die eigene
   Oberflaeche und bei jeder Aenderung als erstes veraltet.

   Nebenbei loest das eine ganze Fehlerklasse: die beiden Fehler, die frueher erst im
   Screenshot auffielen, sassen genau dort – Diagrammbeschriftungen in #004aff auf
   dunklem Grund, und ein Kopieren-Knopf weiss auf weiss. Was es nicht gibt, kann nicht
   unlesbar werden. */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

#security,
#faq {
  scroll-margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   DIE DREI BELEGSPALTEN

   Vorher standen hier drei nackte Merkmalzeilen: eine Kennzeichnung, ein Satz.
   Ein Merkmal ist eine Behauptung – "verschluesselt im Browser" glaubt man oder
   nicht. Ein BELEG nennt dazu, woran die Behauptung haengt, und genau das ist der
   Unterschied, den dieses Produkt verkauft.

   ZWEITER UND LETZTER KASTEN DER SEITE. Der erste ist die Werkbank. Beide tragen
   dieselbe Flaeche (--beleg ist --tm-surface, siehe base.css); unterschieden
   werden sie ueber Kante und Tiefe – die Werkbank traegt --werkbank-kante und den
   vollen Schatten, der Beleg eine Haarlinie und den flachen.

   DIE HAARLINIE IST HIER ZIERDE UND KEINE BEDEUTUNGSTRAGENDE KANTE, und das ist
   ausdruecklich in Ordnung: --linie erreicht gegen den Grund nur 1.24:1 (hell)
   bzw. 1.33:1 (dunkel). Sie muss die 3:1 aus WCAG 1.4.11 nicht erreichen, weil
   an ihr nichts haengt – der Block ist Text und kein Bedienelement, und seine
   Lesbarkeit misst pruefe/kontrast.mjs an den drei Textstufen darauf. Beim
   Zeigen wechselt sie auf --werkbank-kante, und die ist gemessen.
   -------------------------------------------------------------------------- */

.belege {
  max-width: var(--seite);
  margin: 2.4rem auto 0;
  padding: 0 var(--rand);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.beleg {
  background: var(--beleg);
  border: 1px solid var(--linie);
  border-radius: var(--radius-karte);
  box-shadow: var(--tiefe-flach);
  padding: 1.1rem 1.2rem 1.2rem;
}

.beleg:hover {
  border-color: var(--werkbank-kante);
  box-shadow: var(--tiefe);
}

.beleg p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
}

/* Die Begruendung tritt zurueck, aber nicht ueber die Farbe allein: --nebentext
   faellt im HELLmodus mit --kennzeichnung zusammen (das Paket fuehrt dort
   denselben Wert). Die Stufe macht deshalb die GROESSE, und die wirkt in beiden
   Modi. */
.beleg-grund {
  margin-top: 0.55rem !important;
  font-size: 0.78rem !important;
  color: var(--nebentext);
}

/* --------------------------------------------------------------------------
   DIE BUEHNE – Sicherheit auf dunklem Grund

   Die einzige dunkle Flaeche im hellen Produkt. Sie kommt aus dem Paket
   (--tm-stage) und ist AUSDRUECKLICH NICHT --tm-text-1: das ist eine Textfarbe,
   die im Dunkelmodus ins Helle kippt, und genau daran sind am 04.08.2026 drei
   andere Dienste haengengeblieben.

   FLACH UND OHNE VERLAUF. Radiale Verlaeufe und Verlaufsnaehte fallen auf grossen
   Bildschirmen als Flecken auf – an dieser Seite im Juli 2026 belegt und danach
   entfernt. Eine Flaeche, zwei Haarlinien, fertig.

   Sie laeuft ueber die volle Breite und nicht nur ueber die Seitenbreite: eine
   dunkle Flaeche, die in der Mitte endet, sieht aus wie ein Kasten, den jemand
   vergessen hat. Der INHALT haelt trotzdem die Seitenbreite ein.
   -------------------------------------------------------------------------- */

/* DIE KANTE TRAEGT DIE ABHEBUNG, nicht die Fuellung – dieselbe Regel wie bei der
   Werkbank und aus demselben gemessenen Grund. Im HELLmodus ist die Buehne ein
   dunkles Band auf weissem Grund und braucht die Kante gar nicht. Im DUNKELmodus
   liegt sie bei 1.35:1 gegen den Grund: sichtbar wird sie dort erst durch die
   Kante.

   --werkbank-kante und NICHT --tm-stage-3, und das ist der zweite Befund des
   Kontrastlaufs: die dritte Buehnentiefe erreicht im Dunkelmodus 1.40:1 gegen den
   Grund. Sie ist eine Flaechentiefe und keine Kante – als Kante haette sie das
   Band im Dunkeln unsichtbar gelassen. --werkbank-kante ist die Rolle fuer genau
   diesen Zweck und erreicht 3.64:1 (dunkel) bzw. 3.47:1 (hell). */
.buehne {
  background: var(--buehne);
  border-top: 1px solid var(--werkbank-kante);
  border-bottom: 1px solid var(--werkbank-kante);
  margin-top: 3rem;
  padding: 2.8rem 0;
}

.buehne-inhalt {
  max-width: var(--seite);
  margin-inline: auto;
  padding: 0 var(--rand);
  display: grid;
  /* Kennzeichnung und Ueberschrift ueber beide Spalten, darunter der Satz und
     die Einschraenkung nebeneinander. minmax(0, …) statt blossem fr: ohne die
     Null als Mindestbreite kann eine Rasterspalte nicht unter ihren Inhalt
     schrumpfen, und eine lange Zeile Festbreitenschrift schoebe die Spalte
     ueber den Rand hinaus. */
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  column-gap: 2.6rem;
  align-items: start;
}

.buehne-inhalt > .kennz,
.buehne-inhalt > h2 {
  grid-column: 1 / -1;
}

@media (max-width: 980px) {
  .buehne-inhalt {
    grid-template-columns: 1fr;
    row-gap: 1.2rem;
  }
}

.buehne .kennz {
  color: var(--buehne-leise);
}

.buehne h2 {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--buehne-text);
  margin: 0 0 0.9rem;
}

/* Der Rahmen ist 1180px breit, die ZEILE nicht. Ohne diese Grenze liefe der Satz
   ueber rund 140 Zeichen, und das Auge findet den Zeilenanfang nicht wieder. */
.buehne p {
  margin: 0 0 0.9rem;
  max-width: var(--lesespalte);
  font-size: 0.92rem;
  color: var(--buehne-fliess);
}

.buehne-text p:last-child {
  margin-bottom: 0;
}

/* Was der Dienst NICHT leistet, gehoert nicht ins Kleingedruckte. Auf der Buehne
   traegt der Seitenakzent --buehne-akzent: das ist die einzige Stelle, an der
   eine der beiden Bedeutungsfarben eine dritte Rolle bekaeme, und das Paket loest
   es genau dafuer auf – --tm-stage-accent ist der Orangeton, der auf der Buehne
   messbar ist (7.31:1 hell, 7.81:1 dunkel). Die Aussage betrifft den Schluessel,
   also ist Orange hier richtig und kein Regelbruch. */
/* Die zweite Buehnentiefe, und der einzige Ort, an dem sie gebraucht wird: was
   der Dienst NICHT leistet, sitzt eine Stufe tiefer als der Rest. Rundung nur
   rechts – an der bedeutungstragenden Akzentkante links bleibt sie 0. */
.buehne .rechtegrenze {
  border-left: 2px solid var(--buehne-akzent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--buehne-tief);
  padding: 0.8rem 1rem 0.8rem 0.9rem;
  color: var(--buehne-leise);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Fragen – native <details>, eine Linie je Frage, kein Aufklapp-Kasten
   -------------------------------------------------------------------------- */

.fragen {
  max-width: var(--seite);
  margin: 2.4rem auto 0;
  padding: 0 var(--rand);
}

.frage {
  border-top: 1px solid var(--linie);
}

.frage:last-of-type {
  border-bottom: 1px solid var(--linie);
}

.frage > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.9rem 1.8rem 0.9rem 0;
  position: relative;
  color: var(--ueberschrift);
  font-size: 0.94rem;
}

.frage > summary::-webkit-details-marker {
  display: none;
}

.frage > summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 0.85rem;
  font-family: var(--mono);
  color: var(--kennzeichnung);
}

.frage[open] > summary::after {
  content: "−";
}

.frage > summary:hover {
  color: var(--blau-text);
}

.frage > p {
  margin: 0 0 1rem;
  max-width: var(--lesespalte);
  font-size: 0.9rem;
}

/* GEMESSEN AM 04.08.2026, und ohne die Messung waere es durchgerutscht: hier
   stand ".merkmale" weiter, obwohl der Abschnitt seit dieser Etappe ".belege"
   heisst. Drei Spalten auf 390px passen nicht nebeneinander – die Startseite lief
   waagerecht ueber den Rand hinaus. Im BILD ist das nicht zu sehen: der
   Screenshot ist so breit wie das Fenster und schneidet einfach ab. Der
   Abnahmelauf misst deshalb scrollWidth gegen clientWidth und meldet "quer=JA".
   Eine umbenannte Klasse in einer Media Query ist tote Konfiguration, und tote
   Konfiguration meldet sich nie selbst. */
@media (max-width: 640px) {
  .belege {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
}