/* D14 Werrewerk · Der Kipp · kipp.css v0.18 · Stand 2026-10-17 (Bild der eigenen Küche aus der Farbwahl)
   Vorlage: Showcase D2 PULPA (d2-limonade/site/kipp.css v2.5, Abschnitt „Der Kipp“). Übernommen ist die Mechanik:
   Sperre bis zum Auslösen (hidden), Phasen start → text → fertig am Abschnitt, gestaffelt erscheinende Sätze, Fokus auf dem Satz,
   reduzierte Bewegung ohne Lauf. Optik für Werrewerk: Statt des wachsenden Kreises kippt die Werrewerk-Welt als Kulisse nach hinten weg
   (ein Blatt mit dem Bild der Küche fällt um seine Unterkante) und gibt den RAVARO-Grund frei.
   Der Kipp ist ein Abschnitt der Seite (#kipp) und bleibt stehen; der Vorhang ist nur die Überblendung dorthin (0,3 s). */

.kipp {
  --kipp-grund: #0E0F12;                  /* RAVARO-Grund und Raster wie im Schluss-Bauteil */
  --kipp-text: #F8F8F8;
  --kipp-leise: #BBBEC3;
  --kipp-raster:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 48px 48px;
  --kipp-dauer-blatt: 950ms;
  --kipp-dauer-text: 420ms;
  --kipp-staffel: 90ms;
  --kipp-rand: clamp(16px, 4.4vw, 112px);
  position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; perspective: 1600px; perspective-origin: 50% 100%;
  background: var(--kipp-raster), var(--kipp-grund); color: var(--kipp-text);
  display: grid; align-items: center; scroll-margin-top: 0;
}
.kipp__innen { position: relative; padding: clamp(72px, 12svh, 180px) var(--kipp-rand); display: flex; flex-direction: column; align-items: flex-start; }
.kipp__mikro { margin: 0; font: 500 clamp(13px, .85vw, 19px)/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .12em; color: var(--kipp-leise); }
.kipp__titel { margin: clamp(14px, 1.4vw, 28px) 0 0; font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 600;
  font-size: clamp(32px, 5.2vw, 150px); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; max-width: 22ch; overflow-wrap: break-word; }
.kipp__titel span { display: block; }
.kipp__titel span + span { margin-top: .18em; }
.kipp__titel:focus, .kipp__titel:focus-visible { outline: none; }        /* Ziel einer Fokus-Übergabe, kein Bedienelement */
.kipp__wahl { margin: clamp(20px, 2.2vw, 48px) 0 0; padding: 14px 20px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 12px;
  font: 500 clamp(15px, 1.15vw, 26px)/1.4 "JetBrains Mono", ui-monospace, monospace; }
.kipp__weiter { margin-top: clamp(24px, 3vw, 56px); min-height: 48px; display: inline-flex; align-items: center; gap: 10px; color: var(--kipp-text);
  font: 500 clamp(16px, 1.1vw, 24px)/1 Inter, system-ui, sans-serif; text-underline-offset: 5px; }
.kipp__weiter:focus-visible { outline: 2px solid var(--kipp-text); outline-offset: 4px; border-radius: 6px; }

/* Die Kulisse: ein Blatt mit dem Bild der Küche, deckungsgleich mit dem Vorhang */
.kipp__blatt, .kipp-vorhang { background: #14100c url("bild/fahrt/f-001.webp") 61% 50% / cover no-repeat; display: grid; place-items: center; }
.kipp__blatt span, .kipp-vorhang span { font: 700 clamp(20px, 3vw, 72px)/1 Archivo, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #D4A853;
  text-shadow: 0 2px 30px rgba(20, 16, 12, .9); padding: 0 16px; text-align: center; }
.kipp__blatt::before, .kipp-vorhang::before { content: ""; position: absolute; inset: 0; background: rgba(20, 16, 12, .45); }
.kipp__blatt span, .kipp-vorhang span { position: relative; }
.kipp__blatt { position: absolute; inset: 0; z-index: 2; display: none; transform-origin: 50% 100%; backface-visibility: hidden; will-change: transform;
  box-shadow: 0 -30px 80px rgba(0, 0, 0, .6); }
.kipp__blatt::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; }
.kipp[data-phase="start"] .kipp__blatt, .kipp[data-phase="kippt"] .kipp__blatt, .kipp[data-phase="text"] .kipp__blatt { display: grid; }
.kipp[data-phase="kippt"] .kipp__blatt, .kipp[data-phase="text"] .kipp__blatt { transform: rotateX(89deg); transition: transform var(--kipp-dauer-blatt) cubic-bezier(.5, 0, .85, .45); }
.kipp[data-phase="kippt"] .kipp__blatt::after, .kipp[data-phase="text"] .kipp__blatt::after { opacity: .7; transition: opacity var(--kipp-dauer-blatt) ease-in; }

.kipp-vorhang { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100dvh; z-index: 40; opacity: 0; transition: opacity 260ms ease; pointer-events: none; }
.kipp-vorhang.da { opacity: 1; }

/* Sätze: erscheinen gestaffelt, sobald das Blatt fast liegt (nur mit Skript verborgen) */
.js .kipp__innen > * { opacity: 0; transform: translateY(14px); transition: opacity var(--kipp-dauer-text) ease-out, transform var(--kipp-dauer-text) ease-out; }
.js .kipp[data-phase="text"] .kipp__innen > *, .js .kipp[data-phase="fertig"] .kipp__innen > * { opacity: 1; transform: none; }
.kipp[data-phase="text"] .kipp__innen > :nth-child(2) { transition-delay: var(--kipp-staffel); }
.kipp[data-phase="text"] .kipp__innen > :nth-child(3) { transition-delay: calc(var(--kipp-staffel) * 3); }
.kipp[data-phase="text"] .kipp__innen > :nth-child(4) { transition-delay: calc(var(--kipp-staffel) * 5); }
.kipp[data-phase="text"] .kipp__innen > :nth-child(5) { transition-delay: calc(var(--kipp-staffel) * 6); }

/* Sperre: bis zum Auslösen stehen Kipp und RAVARO-Schluss nicht im Dokument (kipp.js setzt hidden) */
.kipp[hidden], .fuss-klein[hidden], .kipp-vorhang[hidden] { display: none !important; }

/* v0.18 · Die Küche aus der Farbwahl: kleines Bild (aus denselben Lagen wie im Editor) und die Zeile Front · Stein · Preis */
.kipp__kueche { margin: clamp(20px, 2.2vw, 48px) 0 0; width: min(100%, 520px); }
.kipp__kueche canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; background: #14100c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 18px 40px rgba(0, 0, 0, .5); }
.kipp__kueche canvas[hidden] { display: none; }
.kipp__preis { white-space: nowrap; }
.kipp__kueche figcaption { margin-top: 12px; font: 500 clamp(15px, 1.15vw, 26px)/1.4 "JetBrains Mono", ui-monospace, monospace; color: var(--kipp-text); }
@media (min-width: 900px) {
  .kipp__innen { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 32vw, 860px); column-gap: clamp(32px, 4.4vw, 120px); align-items: start; }
  .kipp__innen > * { grid-column: 1; justify-self: start; }
  .kipp__innen > .kipp__kueche { grid-column: 2; grid-row: 1 / span 4; align-self: center; width: 100%; margin: 0; }
}
@media (max-width: 899px) {
  .kipp__blatt, .kipp-vorhang { background-position: 69% 50%; }
  .kipp__titel { font-size: clamp(30px, 9.4vw, 56px); }
}
@media (prefers-reduced-motion: reduce) {
  .js .kipp__innen > *, .kipp__blatt, .kipp-vorhang { transition: none !important; }
}