/* ============================================================================
   GRUNDSCHICHT — der Startpunkt jeder neuen Flaeche
   v1.1 · Stand 2026-09-20 · [hidden]-Regel (design-repertoire v1.23) · v1.0 · Stand 2026-08-24 · gehoert zu design-repertoire v1.11

   WOZU: Die sechs Punkte, die im A/B vom 24.08.2026 nachweislich gewonnen haben,
   stehen hier als Code — nicht als Regel, an die man sich erinnert. Wer eine neue
   Seite oder Flaeche beginnt, kopiert diese Datei ZUERST hinein. Danach ist der
   Berührschutz da, sind die drei Barrierefreiheits-Signale da und stehen die
   richtigen Kurven bereit.

   ALLE WERTE SIND KOPIERT, NICHT GESCHAETZT. Abschnitt 33 sagt woertlich:
   einen Wert, der dort steht, nie approximieren — kopieren.
   Quelle: bewegungen.md Abschnitt 33 (Apple-Physik) · Sperrliste ebenda.
   ========================================================================= */

/* v1.1 (20.09.2026): das hidden-Attribut hat Klassen-Spezifitaet — jede spaetere display:-Regel schluege es.
   Ohne diese Zeile blieben im 3D-Hero drei "versteckte" Knoepfe sichtbar (display: flex gewann). */
[hidden] { display: none !important; }

:root {
  /* --- Kurven ------------------------------------------------------------
     Die EINGEBAUTEN CSS-Kurven sind fuer Oberflaechen zu schwach.
     `ease-out` als Schluesselwort ist ein Befund, keine Loesung.            */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);    /* Standard fuer Bedienelemente */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* Bewegung ueber den Schirm    */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* Schublade / Blatt (iOS)      */

  /* --- Dauern ------------------------------------------------------------
     Sperrliste: UI-Dauer ueber 300 ms braucht einen Grund.                  */
  --dauer-sofort: 120ms;  /* Druckzustand, Umschalter          */
  --dauer-ui:     200ms;  /* Standard: Knopf, Reiter, Hinweis  */
  --dauer-flaeche:320ms;  /* Menue, Schublade, Aufdecken       */
  --staffel:       60ms;  /* Versatz je Element (30–80 ms)     */

  /* --- Groessen ---------------------------------------------------------- */
  --treffer-min: 44px;    /* kleinste Trefferflaeche am Finger */
}

/* ============================================================================
   1 · BERUEHRSCHUTZ — der groesste Einzelposten aus dem A/B
   Ohne diesen Block verbraucht der erste Tipper auf dem Handy den
   Ueberfahr-Zustand: der Nutzer tippt einmal ins Leere. Ueber die Haelfte der
   Besucher kommt vom Handy.
   REGEL: Es gibt keine `:hover`-Regel ausserhalb dieses Blocks.
   ========================================================================= */
@media (hover: hover) and (pointer: fine) {
  .knopf:hover      { background: var(--knopf-bg-hover, #333); }
  .karte:hover      { border-color: var(--karte-rand-hover, #666); }
  /* NIE hier hinein: transform: translateY(...) an einem Klickziel.
     Ein Ziel, das sich unter dem Zeiger wegbewegt, wird verfehlt.          */
}

/* Am Finger: sichtbare Rueckmeldung kommt aus dem DRUCK, nicht aus dem Ueberfahren. */
.knopf:active,
.karte:active { transform: scale(0.97); transition-duration: var(--dauer-sofort); }

/* Kein grauer Kasten beim Antippen auf iOS/Android. */
.knopf, .karte, a, button { -webkit-tap-highlight-color: transparent; }

/* Trefferflaeche: Poka Yoke — zu klein kann gar nicht erst entstehen. */
.knopf, button, a.knopf { min-height: var(--treffer-min); min-width: var(--treffer-min); }

/* ============================================================================
   2 · DIE DREI BARRIEREFREIHEITS-SIGNALE
   Wir kannten bis zum 24.08.2026 nur das erste von dreien.
   Zielgruppe 40+ mit Haus — genau dort sind diese Einstellungen aktiv.
   ========================================================================= */

/* 2a — Bewegung reduzieren.
   KERNSATZ: Reduziert heisst NICHT "keine Rueckmeldung", sondern eine
   sanftere, nicht-vestibulaere Entsprechung. Farb- und Deckkraftwechsel,
   die dem Verstehen dienen, BLEIBEN.                                        */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* Schieben/Federn/Parallaxe -> kurze Ueberblendung, Ueberschwingen raus. */
  .aufdecken, .menue, .schublade {
    transition: opacity 120ms linear !important;
    transform: none !important;
  }
}

/* 2b — Durchsichtigkeit reduzieren.
   Bei unserer Vorliebe fuer Glasflaechen die eigentliche Wunde:
   Unschaerfe raus, Flaeche deckend.                                         */
@media (prefers-reduced-transparency: reduce) {
  .glas, .menue, .fenster, [class*="backdrop"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--flaeche-deckend, #14110e) !important;
  }
}

/* 2c — Mehr Kontrast.
   Fast deckende Flaechen mit definiertem, kontrastierendem Rahmen.          */
@media (prefers-contrast: more) {
  .glas, .menue, .fenster, .karte {
    background: var(--flaeche-deckend, #14110e) !important;
    border: 1px solid var(--rand-stark, #fff) !important;
    backdrop-filter: none !important;
  }
  .knopf { border: 1px solid currentColor; }
}

/* ============================================================================
   3 · EINTRITT UND AUSTRITT
   Sperrliste: `scale(0)` als Eintritt ist verboten — nichts in der echten
   Welt erscheint aus dem Nichts. Und `ease-in` an einem Bedienelement ist
   ein Fehler (am 24.08. in handwerk.md gefunden und entfernt).
   ========================================================================= */
.eintritt {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--dauer-ui) var(--ease-out),
              transform var(--dauer-ui) var(--ease-out);
  /* NIE `transition: all` — Eigenschaften einzeln nennen. */
}
.eintritt[data-offen="true"] { opacity: 1; transform: scale(1); }

/* Ein ausgeloestes Menue waechst aus SEINEM Ausloeser, nicht aus der Mitte.
   Der Ursprung wird beim Oeffnen gesetzt: el.style.setProperty('--ursprung', ...) */
.menue { transform-origin: var(--ursprung, top left); }

/* ============================================================================
   4 · WAS HIER BEWUSST FEHLT
   Das Haeufigkeits-Tor kann diese Datei nicht ersetzen: Ein Element, das der
   Nutzer 100+ mal am Tag beruehrt, bekommt GAR KEINE Bewegung — das ist kein
   Ermessen. Vor dem Animieren also weiterhin: SKILL.md, "Das Tor davor".
   ========================================================================= */