/* ═══════════════════════════════════════════════════════════════════
   HERO-WISCHER — Startseite, erster Bildschirm
   Beide Fassungen nebeneinander: links dunkel, rechts hell, dazwischen
   eine Kante zum Ziehen. Was beim Loslassen den Bildschirm fuellt, wird
   zur Wahl fuer die ganze Website.

   Der Griff verschwindet nie. Nach der Entscheidung parkt er am Rand
   und laesst sich jederzeit wieder hereinziehen — eine Entscheidung
   darf keine Einbahnstrasse sein.
   ═══════════════════════════════════════════════════════════════════ */

/* --wipe = Position der Kante von links, in Prozent */
.hero-wipe-host {
  --wipe: 50%;
}

/* Die helle Zweitfassung liegt deckungsgleich ueber dem dunklen Hero und
   wird von links weggeschnitten. Reine Anschauung: nicht anklickbar,
   nicht in der Tab-Reihenfolge, fuer Screenreader nicht vorhanden. */
/* Liegt bewusst UEBER der Navigationsleiste (z-index 100), damit auch
   sie mitwischt. Weil die Ebene keine Zeigerereignisse annimmt, bleibt
   die echte Leiste darunter voll bedienbar. */
.hero-wipe-layer {
  position: absolute;
  inset: 0;
  z-index: 110;
  overflow: hidden;
  pointer-events: none;
}

/* Breit: Naht senkrecht. Schmal: waagerecht — dort ist der Hero
   gestapelt, und eine senkrechte Naht koennte den zentrierten Text
   gar nicht auf eine Seite bringen. */
.hero-wipe-host[data-wipe-achse="x"] .hero-wipe-layer {
  clip-path: inset(0 0 0 var(--wipe));
}

.hero-wipe-host[data-wipe-achse="y"] .hero-wipe-layer {
  clip-path: inset(var(--wipe) 0 0 0);
}

/* Die Kopie des Heros fuellt die Ebene deckungsgleich */
.hero-wipe-layer .hero-wipe-copy {
  position: absolute;
  inset: 0;
  min-height: 0;
}

/* clip-path macht die Ebene zum Bezugsrahmen fuer feste Positionen —
   die Leisten-Kopie landet dadurch von selbst deckungsgleich auf der
   echten. Zeigerereignisse nimmt sie keine an. */
.hero-wipe-layer .main-nav {
  pointer-events: none;
}

/* light.css faerbt die Leiste ueber [data-theme="light"] .main-nav mit
   einem festen Wert — ein Attribut an der Leiste selbst kommt dagegen
   nicht an. Diese Ausnahme ist spezifischer und holt sie zurueck auf
   die dunkle Seite, solange gewischt wird. */
[data-theme="light"] .main-nav[data-theme="dark"] {
  background: var(--bg-nav);
  border-bottom-color: var(--border-subtle);
  isolation: auto;
}

/* Die Kopie darf sich nicht selbst nochmal aufbauen */
.hero-wipe-layer .hero-wipe-layer,
.hero-wipe-layer .hero-wipe-handle {
  display: none;
}

.hero-wipe-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--wipe);
  z-index: 111;
  width: 56px;
  margin-left: -28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: ew-resize;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Die Naht. Sie trennt Dunkel von Papier und muss auf BEIDEN Seiten
   lesbar sein — deshalb ein neutrales Warmgrau statt einer Themenfarbe:
   hell genug fuer #121820, dunkel genug fuer #FAF6EF. Ein Haarstrich
   genuegt, Prominenz holt der Griff. */
.hero-wipe-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: #8A8580;
  transition: opacity 0.25s ease;
}

/* Der Griff: eckig, randbetont, ohne Schatten — wie der Rest des Hauses */
.hero-wipe-grip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 56px;
  height: 56px;
  border: 1px solid #8A8580;
  border-radius: 12px;
  background: var(--bg-elevated);
  color: var(--text-headline);
  /* Beide Effekte teilen sich EIN transform. Getrennt geschrieben
     wuerde der Hover den Randversatz ueberschreiben und der geparkte
     Griff spraenge beim Drueberfahren aus dem Bild. */
  --grip-shift: 0px;
  --grip-scale: 1;
  --grip-dreh: 0deg;
  --grip-x: 0px;
  --grip-y: 0px;
  transform: translate(var(--grip-x), var(--grip-y)) scale(var(--grip-scale)) rotate(var(--grip-dreh));
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.hero-wipe-handle:hover .hero-wipe-grip {
  --grip-scale: 1.06;
}

/* Sonar. Sonaris heisst Sonar — der Ping ist der Name als Bewegung,
   nicht als Dekor. Er laeuft nur, solange die Einladung gilt: nach der
   ersten Beruehrung waere er Laerm. */
.hero-wipe-ping {
  position: absolute;
  inset: -1px;
  border: 1px solid var(--blue-clarity);
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  animation: sonarPing 2.8s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}

.hero-wipe-ping-2 { animation-delay: 1.4s; }

.hero-wipe-host.has-interacted .hero-wipe-ping,
.hero-wipe-host.is-geparkt .hero-wipe-ping {
  animation: none;
  opacity: 0;
}

@keyframes sonarPing {
  0%   { transform: scale(1);    opacity: 0.65; }
  70%  { transform: scale(1.85); opacity: 0; }
  100% { transform: scale(1.85); opacity: 0; }
}

/* Ohne Bewegung faellt der Ping weg — dann muss der Rahmen die
   Auffindbarkeit allein tragen. */
@media (prefers-reduced-motion: reduce) {
  .hero-wipe-grip { border-color: var(--blue-clarity); border-width: 2px; }
}

/* Der Hinweis sagt einmal, was Sache ist, und verschwindet dann */
.hero-wipe-hint {
  position: absolute;
  top: calc(50% + 42px);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #8A8580;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.hero-wipe-host.has-interacted .hero-wipe-hint,
.hero-wipe-host.is-geparkt .hero-wipe-hint {
  opacity: 0;
}

.hero-wipe-handle:hover .hero-wipe-grip {
  border-color: var(--blue-clarity);
}

.hero-wipe-grip::before,
.hero-wipe-grip::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.hero-wipe-grip::before { border-right: 6px solid currentColor; }
.hero-wipe-grip::after  { border-left:  6px solid currentColor; }

/* Der Versatz greift auf der jeweils aktiven Achse */
.hero-wipe-host[data-wipe-achse="x"] .hero-wipe-grip { --grip-x: var(--grip-shift); --grip-y: 0px; }
.hero-wipe-host[data-wipe-achse="y"] .hero-wipe-grip { --grip-x: 0px; --grip-y: var(--grip-shift); --grip-dreh: 90deg; }

/* ── SCHMAL: die Naht liegt waagerecht ─────────────────────────────── */
.hero-wipe-host[data-wipe-achse="y"] .hero-wipe-handle {
  left: 0;
  right: 0;
  width: auto;
  margin-left: 0;
  top: var(--wipe);
  bottom: auto;
  height: 56px;
  margin-top: -28px;
  cursor: ns-resize;
}

.hero-wipe-host[data-wipe-achse="y"] .hero-wipe-handle::before {
  left: 0;
  right: 0;
  top: 50%;
  bottom: auto;
  width: auto;
  height: 1px;
  margin-left: 0;
  margin-top: -0.5px;
}

/* Auf dem Handy gibt es fuer Beschriftungen keinen freien Platz: ueber
   dem Griff steht die Unterzeile, unter ihm beginnt die Illustration,
   unten sitzen Denkraum-Knopf und Scroll-Pfeil. Jede Position
   kollidierte mit etwas. Sie entfallen deshalb — die Teilung sagt es
   ohnehin selbst: dunkel oben, hell unten. Der pingende Griff mit den
   Pfeilen traegt die Aufforderung allein. */
.hero-wipe-host[data-wipe-achse="y"] .hero-wipe-hint,
.hero-wipe-host[data-wipe-achse="y"] .hero-wipe-label {
  display: none;
}

.hero-wipe-host[data-wipe-achse="y"].is-geparkt .hero-wipe-handle {
  /* Der Hero ist auf kleinen Geraeten HOEHER als der Bildschirm. Am
     Anschlag unten parkte der Griff deshalb unterhalb der Falz und war
     nicht mehr zu sehen. Die Klammer haelt ihn im sichtbaren Bereich —
     unterhalb der Navigationsleiste, oberhalb der Unterkante. */
  top: clamp(96px, var(--wipe), calc(100vh - 48px));
  left: 0;
  right: 0;
  height: 56px;
  margin-top: -28px;
}

/* Der weiche Nachlauf gilt fuer beide Achsen */
.hero-wipe-host.is-settling .hero-wipe-handle {
  transition: clip-path 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              left 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              top 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Beschriftung der beiden Seiten, in der Hausschrift fuer Marken */
.hero-wipe-label {
  position: absolute;
  top: 108px;
  z-index: 111;
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8A8580;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.hero-wipe-layer,
.hero-wipe-grip {
  transition: opacity 0.25s ease;
}

.hero-wipe-label-dark  { left: 28px; }
.hero-wipe-label-light { right: 28px; color: #655C53; }

/* Beim Ziehen laeuft die Kante ohne Nachlauf mit dem Zeiger */
.hero-wipe-host.is-dragging .hero-wipe-layer,
.hero-wipe-host.is-dragging .hero-wipe-handle {
  transition: none;
}

.hero-wipe-host.is-settling .hero-wipe-layer,
.hero-wipe-host.is-settling .hero-wipe-handle {
  transition: clip-path 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              left 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── GEPARKT ─────────────────────────────────────────────────────────
   Kein Nebeneinander mehr, die Seite sieht normal aus. Der Griff bleibt
   aber stehen: er ist der Rueckweg. Ohne ihn waere die Entscheidung
   eine Einbahnstrasse. */
.hero-wipe-host.is-geparkt .hero-wipe-layer {
  visibility: hidden;
}

.hero-wipe-host.is-geparkt .hero-wipe-label {
  opacity: 0;
}

/* Keine Naht ohne Teilung */
.hero-wipe-host.is-geparkt .hero-wipe-handle::before {
  opacity: 0;
}

/* Nur noch der Griff auf halber Hoehe, nicht die volle Spalte — sonst
   laege ein 44 px breiter Streifen ueber dem Hero-Inhalt. */
.hero-wipe-host.is-geparkt .hero-wipe-handle {
  top: 50%;
  bottom: auto;
  height: 56px;
  margin-top: -28px;
}

/* Am Anschlag haengt der Griff sonst halb aus dem Bild. Er rueckt nach
   innen, damit er ganz sichtbar und anfassbar bleibt. */
.hero-wipe-host.is-geparkt[data-wipe-anschlag="ende"] .hero-wipe-grip {
  --grip-shift: -32px;
}

.hero-wipe-host.is-geparkt[data-wipe-anschlag="anfang"] .hero-wipe-grip {
  --grip-shift: 32px;
}

.hero-wipe-host.is-geparkt .hero-wipe-grip {
  opacity: 0.55;
  transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.hero-wipe-host.is-geparkt .hero-wipe-handle:hover .hero-wipe-grip,
.hero-wipe-host.is-geparkt .hero-wipe-handle:focus-visible .hero-wipe-grip {
  opacity: 1;
}

@media (max-width: 480px) {
  .hero-wipe-label { top: 76px; font-size: 10px; }
  .hero-wipe-label-dark  { left: 16px; }
  .hero-wipe-label-light { right: 16px; }
}