/* =============== KIPP-VERGLEICH SINGLE-INSTANCE — PIN-MOTOR (Iteration 3) =============== */
/* Nur auf slider2.html. Zwei Overlay-Ebenen mit gepinnten Klonen:
   .skin-a (links geclippt) = Original-Look (Inter),  .skin-b (rechts geclippt) = Pirata-Skin.
   Die echten Elemente sind versteckt (nur Positions-Anker). */

@font-face {
    font-family: 'Pirata One';
    src: url('../fonts/PirataOne-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}

/* line-height 1.2 NUR auf die KLONE (.skin-ov) — NIE auf echte Elemente (die echte MALEREI/Anchors
   duerfen NICHT angefasst werden, sonst verschieben sich die Bloecke darunter -> A-Anchors rutschen).
   Logo bewusst NICHT (war 17:00 nie 1.2). Der B-MALEREI-Offset wird separat in JS getunt. */
.skin-ov .main-heading,
.skin-ov .konzept-heading, .skin-ov .konzept-heading-anchor,
.skin-ov .rivus-anchor-filled, .skin-ov .rivus-anchor-outline, .skin-ov .rivus-anchor-gray,
.skin-ov .gesichten-anchor-filled, .skin-ov .gesichten-anchor-outline, .skin-ov .gesichten-anchor-gray {
    line-height: 1.2 !important;
}

/* --- Overlay-Ebenen --- */
/* transform => Containing-Block fuer die fixed-gepinnten Klone + Clip-Kontext;
   pointer-events:none => Taps gehen an die echte Seite darunter. */
.skin-ov {
    position: fixed; inset: 0;
    pointer-events: none; transform: translateZ(0);
}
/* Hinten (filled/graue Anker) hinter Inhalt; Vorne (outline/Captions) ueber Inhalt aber UNTER
   Rahmen; Top (Logo/Treppenlink) ueber allem. */
.skin-back  { z-index: 1; }
.skin-mid   { z-index: 50; }         /* Caption-Gradient: ueber Bild, UNTER outline */
.skin-backfill { z-index: 75; }      /* Filled-Schriften: UEBER Gradient, UNTER outline */
/* Content-Boxen (position:fixed, sonst z10) zwischen Filled (75) und Outline (100) heben.
   Nur im aktiven Kipp-Modus (body.cmp-active) — im Fallback bleibt die echte Seite unberuehrt. */
body.cmp-active .content-box-wrapper, body.cmp-active .content-box-wrapper-2 { z-index: 85 !important; }
.skin-front { z-index: 100; }        /* outline: > Inhalt, < Rahmen (Frame-Border 999) */
.skin-over  { z-index: 200; }        /* Treppentext: UEBER outline, < Rahmen */
.skin-top   { z-index: 2147483000; }
/* Burger-Menue MUSS ueber ALLEN Klonen liegen — v.a. ueber dem Treppenlink-Klon (skin-top, z 2147483000).
   NUR .nav-menu zu heben reicht NICHT: sie sitzt in .main-nav, das per z-index (mobile 9999) einen eigenen
   Stacking-Context bildet -> ihr z-index ist dort gefangen, nach aussen zaehlt nur .main-nav (9999) < Klone.
   Also den KONTEXT-ROOT (.main-nav) heben, sobald das Menue offen ist (.nav-menu.active). Nur im Kipp-Modus;
   echte Nav unberuehrt. Klone haben pointer-events:none -> Burger/X bleiben klickbar. */
body.cmp-active .main-nav:has(.nav-menu.active) { z-index: 2147483646 !important; }

/* Pinkes Header-Rahmen-Pendant (rechte Haelfte) fuer die orangen Streifen (Light-Mode).
   Streifen sind kurz/oben -> vertikal an der OBEREN Trennlinien-Position clippen (--xt), sonst
   ergibt der geneigte Schnitt hier einen zu steilen Winkel. Klon-Inhalt (Nav/Logo) ausblenden. */
.skin-frame-b {
    clip-path: polygon(var(--xt, 100%) 0, 100% 0, 100% 100%, var(--xt, 100%) 100%);
    -webkit-clip-path: polygon(var(--xt, 100%) 0, 100% 0, 100% 100%, var(--xt, 100%) 100%);
    /* Rein visuelles Pendant — Taps muessen an das ECHTE Element darunter gehen. Der Klon steht
       im DOM direkt HINTER dem Original (gleicher z-index), lag also darueber und schluckte auf
       der rechten Haelfte jeden Tap: der Header-Klick zur Startseite (data-href am <header>,
       Binding in script.js) funktionierte nur links, auf dem B-MARTIN-ZANKER nicht. */
    pointer-events: none;
}
.skin-frame-b > * { visibility: hidden !important; }
/* Nur die soliden Pendants ohne Blur (der geneigte Clip loest den Bleed; der echte Header/Nav-Blur
   darf bleiben). */
.skin-frame-b { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body:not(.dark-mode) .skin-frame-b { background-color: #EDA4E3 !important; }
/* Dark-Mode: B-Banner OPAK statt blurry (A bleibt der frosted Header rgba(51,51,51,0.75)).
   Gleiche Farbe wie der Dark-Header (#333333), nur ohne Transparenz/Blur (backdrop-filter:none
   steht schon oben). Der geneigte Clip (frame()) haelt es auf der rechten B-Haelfte. */
body.dark-mode .skin-frame-b { background-color: #333333 !important; }

/* iOS-Safari-Leisten: die Safe-Area-Streifen (script.js, z 99999) liegen sonst UNTER meinen
   Overlays (skin-top z 2,1 Mrd.) -> Safari sampelt transparent -> schwarze Leisten. Hier ueber
   ALLE Overlays heben. Oben (transparente Statusleiste) zeigt #safe-area-top direkt + das rechts
   geclippte pinke Pendant (skin-frame-b, dieselbe id) -> zweigeteilt. Unten sampelt Safari EINE
   Farbe (kein harter Split moeglich) -> Rahmenfarbe wie im Original. */
body.cmp-active #safe-area-top, body.cmp-active #safe-area-bottom, body.cmp-active #safe-area-bottom-dark { z-index: 2147483647 !important; }
/* Mindesthoehe fuer die Sampling-Streifen — NUR iPad/Desktop (>= 600px): Dort ist
   env(safe-area-inset-*) oft 0 (iPad-Safari ohne Notch), die Streifen haetten Hoehe 0 und schieden
   als Sampling-Kandidat aus -> Safari sampelt das randbuendige transparente skin-top-Overlay
   (z 2,1 Mrd) -> schwarze Leisten. 4px (> 3px-Kriterium) machen den Streifen zum obersten gueltigen
   Kandidaten (der Rahmen liegt bei top:0 orange -> 4px unsichtbar). NICHT auf iPhone/In-App-Browser
   (< 600px): dort hat der echte Notch schon Hoehe, und ohne Notch (In-App) wuerde die 4px-Linie
   ueber dem versetzten Rahmen sichtbar. */
@media (min-width: 600px) {
    body.cmp-active #safe-area-top,
    body.cmp-active #safe-area-top-dark { height: max(env(safe-area-inset-top), 4px) !important; }
}
/* Unterer Sampling-Streifen (alle Breiten): weit unter den Viewport-Rand verlaengern -> deckt die
   Reveal-Zone der iOS-URL-Leiste beim ersten Scroll ab (auf MOBILE ist body::before display:none,
   die vorige Verlaengerung griff dort nicht -> dieser cremefarbene Streifen ist am Boden der
   Deckungs-Kandidat). Hoehe = env + 300px haelt die Oberkante an der urspruenglichen Position und
   erfuellt zugleich das Sampling->=3px-Kriterium (iPad inset=0). */
body.cmp-active #safe-area-bottom,
body.cmp-active #safe-area-bottom-dark {
    bottom: -300px !important;
    /* +4px: haelt die Oberkante an der Mobile-Position (safe-area-bottom ist dort env+4px hoch,
       schliesst buendig an die 4px angehobene Nav an) -> kein 4px-Spalt. Die 304px machen den
       Streifen zugleich hoch genug fuers Sampling (iPad inset=0). Er waechst nur nach UNTEN,
       deckt also keine klickbaren Nav-Links ab. */
    height: calc(env(safe-area-inset-bottom, 0px) + 304px) !important;
}
/* Oberer Dark-ZWILLING (nur slider2): iOS 26 re-sampelt die obere Leiste nur beim Zwilling-Wechsel,
   nicht beim Farb-Swap am selben Element. Im Light versteckt, im Dark statt #safe-area-top sichtbar
   (#1a1a1a). Ohne !important, damit der JS-Round-Trip (inline display) das Re-Sampling ausloesen kann. */
#safe-area-top-dark {
    position: fixed; left: 0; right: 0; top: 0;
    height: env(safe-area-inset-top);
    background-color: #1a1a1a;
    pointer-events: none;
    z-index: 2147483647;
    display: none;
}
body.cmp-active.dark-mode #safe-area-top { display: none; }
body.cmp-active.dark-mode #safe-area-top-dark { display: block; }
/* Zentrierte Ueberschriften: Pirata hat andere Breite als Inter -> im Klon zentrieren,
   damit sie mittig ueber dem Original sitzen (statt an der Inter-Boxkante). */
.skin-ov .logo-text,
.skin-ov .main-heading { text-align: center !important; }
/* Anchor-Schriften einzeilig (keine GESICHTEN-Silbentrennung/Umbruch). overflow sichtbar. */
.skin-ov .rivus-anchor-filled, .skin-ov .rivus-anchor-outline, .skin-ov .rivus-anchor-gray,
.skin-ov .gesichten-anchor-filled, .skin-ov .gesichten-anchor-outline, .skin-ov .gesichten-anchor-gray,
.skin-ov .konzept-heading, .skin-ov .konzept-heading-anchor {
    white-space: nowrap !important; overflow: visible !important;
}
/* MYTHUS/GESICHTEN B-Zentrierung + Groessen-Angleich passieren in JS (slider-solo, anchorB):
   Pirata wird auf A-Breite skaliert und mittig gesetzt (text-align allein wirkt nicht, da die
   Klone nur Text-Breite haben). */
/* Die Trennlinie liegt NICHT mehr auf den Overlay-Ebenen: jede von ihnen ist eine eigene
   Vollbild-Compositing-Flaeche, und jede clip-path-Aenderung invalidiert sie komplett — bei
   bewegter Linie also 12 Vollbilder pro Frame. Den Clip tragen jetzt die einzelnen Klone
   (slider-solo.js -> updateCloneClips); dort ist die schmutzige Flaeche nur noch so gross wie
   der Klon, und Klone abseits der Linie bekommen gar keinen mehr. Der Hintergrund-Split
   (.skin-bg-b) laeuft ueber ein transform statt einen Clip, s. body.kipp-bgtf weiter unten. */

/* --- Hintergrund-Split (rechte Haelfte pink, hinter dem Inhalt) --- */
.skin-bg-b {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: #EDA4E3;
    clip-path: polygon(var(--xt, 100%) 0, 100% 0, 100% 100%, var(--xb, 100%) 100%);
    -webkit-clip-path: polygon(var(--xt, 100%) 0, 100% 0, 100% 100%, var(--xb, 100%) 100%);
}
.skin-bg-b.dark { display: none; } /* Dark-Mode: Original-Hintergrund behalten */
/* Hintergrund-Split OHNE Clip: ein grosses einfarbiges Rechteck, dessen linke Kante per TRANSFORM
   auf die Trennlinie gelegt und mitgeneigt wird (slider-solo.js -> applyClip). Grund: ein Clip
   invalidiert die Ebene, und gemalt wird dann genau der sichtbare Teil — je mehr der Bildschirm
   von der B-Seite bedeckt ist, desto teurer wird der Fuellvorgang, jedes Frame neu. Genau das
   machte starke Kipplagen schlechter als die Mittelstellung. Ein transform dagegen malt nichts
   neu, es verschiebt nur die fertige Flaeche. Hoehe/Breite mit Reserve fuer die Neigung. */
body.kipp-bgtf .skin-bg-b {
    /* Nur so gross wie noetig: nach rechts reicht gut eine Viewportbreite senkrecht zur Linie,
       nach oben/unten je 20% Hoehe Reserve fuer die Neigung. Groesser hiesse nur unnoetig viel
       Flaeche im Grafikspeicher. */
    inset: auto; left: 0; top: 0; width: 120vw; height: 140vh;
    clip-path: none; -webkit-clip-path: none;
    transform-origin: 0 0; will-change: transform;
}

/* Scroll-Blitzer (iOS-URL-Leiste): Beim Ein-/Ausblenden der Safari-Leiste aendert sich die
   Viewport-Hoehe; die an bottom:0 / bottom:19px verankerten fixierten Rahmen ziehen einen Frame
   verzoegert nach und geben darunter kurz den orangen html/body-Hintergrund frei (unten faellt es
   auf, weil der Rahmen dort creme ist; oben waere es orange-auf-orange). Fix (nur slider2): die
   unteren Rahmen-/Streifen-Elemente weit unter den Viewport-Rand verlaengern -> die Reveal-Zone ist
   vorab in Rahmenfarbe abgedeckt (creme hell / #1a1a1a dark — wie die Elemente ohnehin gefaerbt
   sind). body::before ist volle Breite und z9997 (oberstes Boden-Element) -> deckt beide Seiten. */
body.cmp-active::before { bottom: -220px !important; height: 240px !important; }
body.cmp-active .background-stripe-left,
body.cmp-active .background-stripe-right { bottom: -220px !important; }
body.cmp-active .frame-border-left,
body.cmp-active .frame-border-right { bottom: -220px !important; }

/* --- Captions als CONTAINER-Klone (voller Kontext -> korrekte Texte/Zeilen). Zwei Klone pro Seite:
   grad (mid) zeigt nur den Gradient, txt (over) nur den Treppentext. info-active liegt am
   Container-Klon (per JS gespiegelt). --- */
.skin-grad img, .skin-grad .image-clip, .skin-grad .words-stair { visibility: hidden !important; }
.skin-txt img, .skin-txt .image-clip { visibility: hidden !important; }
.skin-txt .image-info { background: none !important; }
.skin-txt .image-info::after { display: none !important; }
/* Container-ID-Regeln (z.B. #ben-image-with-info .words-stair{visibility:hidden}) greifen durch den
   Klon -> im txt-Klon den Treppentext wieder sichtbar machen (Reveal laeuft ueber opacity/transform). */
.skin-txt .words-stair,
.skin-txt .image-info { visibility: visible !important; }

/* Kappe (::after) je Seite (Light) / dunkles Grau (Dark) */
.skin-a:not(.dark) .image-info::after { --cap: 255,102,51 !important; }
.skin-b:not(.dark) .image-info::after { --cap: 237,164,227 !important; }
.skin-a.dark .image-info::after,
.skin-b.dark .image-info::after { --cap: 51,51,51 !important; }
/* Aktiver Fade-Verlauf (info-active am Container-Klon) */
.skin-a:not(.dark) .info-active .image-info {
    background: linear-gradient(to bottom, transparent 15%, rgba(255,102,51,0.85) calc(100% - 15px), rgba(255,102,51,1) 100%) !important;
}
.skin-b:not(.dark) .info-active .image-info {
    background: linear-gradient(to bottom, transparent 15%, rgba(237,164,227,0.85) calc(100% - 15px), rgba(237,164,227,1) 100%) !important;
}
.skin-a.dark .info-active .image-info,
.skin-b.dark .info-active .image-info {
    background: linear-gradient(to bottom, transparent 15%, rgba(51,51,51,0.85) calc(100% - 15px), rgba(51,51,51,1) 100%) !important;
}
.skin-ov .image-info { isolation: isolate; }
.skin-ov .words-stair { position: relative; z-index: 2; }
/* Einfahr-Animation sichtbar (Opacity WAEHREND des Slides faden, statt erst am Ende) */
.skin-ov .words-stair__line p {
    transition: transform 0.4s ease-in-out, opacity 0.35s ease-out !important;
}
/* Reveal wie Original: info-active am Container schiebt Zeilen hoch + blendet ein */
.skin-ov .info-active .words-stair__line p {
    transform: translate3d(0, -41px, 0) !important;
    opacity: 1 !important;
}
/* Treppentext = seitenseitiger #stair-ghost (echte Position/Reveal/Zeilen). Nur hier hochziehen:
   ueber den Gradient (z 50) und Outline (100), unter den Rahmen (999). Das ist die A-Seite (creme). */
body.cmp-active #stair-ghost { z-index: 250 !important; }
/* B-Seite: rechts geclippter Klon des Ghosts DARUEBER (z 251). Gruen im Light, creme im Dark. */
.skin-ghostb { z-index: 251 !important; }
/* Der Klon liegt NICHT in #stair-ghost -> die ghost-spezifische 3D-Perspektive (Winkel + scheinbare
   Groesse) fehlt sonst. Aus styles.css (#stair-ghost .words-stair, @media max-width:980px) gespiegelt. */
.skin-ghostb .words-stair {
    transform: perspective(700px) rotateY(-8deg) !important;
    transform-origin: left bottom !important;
    margin: 0 !important;
}
/* Schnitt-Element mit FESTEM overflow-Rechteck: es wird per transform auf die Trennlinie gedreht,
   der Halter darin traegt die Gegendrehung (slider-solo.js -> placeGhostCut). Grund: der Klon oben
   steht unter perspective(); ein wechselnder clip-path zwang das ganze 3D-Gebilde samt laufender
   Animation jeden Frame neu zu rastern. Ein transform malt nichts neu. Das Rechteck ist bewusst
   viel groesser als der Text (und bei neutraler Stellung schneidet es nichts weg). */
.skin-ghost-cut {
    position: absolute; left: -600px; top: -600px; width: 1600px; height: 1600px;
    overflow: hidden; transform-origin: 0 0; will-change: transform;
}
.skin-ghost-hold {
    position: absolute; left: 600px; top: 600px;
    transform-origin: 0 0; will-change: transform;
}
.skin-ghostb .words-stair__line p,
.skin-ghostb .words-stair p { color: #3DFFA7 !important; }
.skin-ghostb.dark .words-stair__line p,
.skin-ghostb.dark .words-stair p { color: #E9E9E4 !important; }
/* Reveal wie der echte Ghost: Basis +42px/unsichtbar, .reveal -> -42px/sichtbar (0.35s). */
.skin-ghostb .words-stair__line p {
    opacity: 0 !important;
    transform: translate3d(0, 42px, 0) !important;
    transition: opacity 0.35s ease, transform 0.35s ease !important;
}
.skin-ghostb.reveal .words-stair__line p {
    opacity: 1 !important;
    transform: translate3d(0, -42px, 0) !important;
}
/* Ausgang wie der echte Ghost (deactivateStairGhost in script.js): weiter NACH OBEN auf -84px,
   ausblenden, 0.8s. Ohne diese Regel fiel der Klon beim Schliessen nur in seine Grundstellung
   (+42px) zurueck — er fuhr also nach UNTEN weg, waehrend die A-Seite nach oben verschwand.
   Wer die Werte hier aendert, muss deactivateStairGhost mitziehen (und umgekehrt). */
/* Hilfsklasse fuer den Neustart der Einfahrt: setzt die Zeilen OHNE Animation auf die
   Grundstellung zurueck (s. writeGhost in slider-solo.js). Ohne sie interpoliert die Transition
   aus der Ausgangsposition (oben) weiter — der Text faehrt dann von OBEN ein statt von unten. */
.skin-ghostb.noanim .words-stair__line p { transition: none !important; }
.skin-ghostb.exit .words-stair__line p {
    opacity: 0 !important;
    transform: translate3d(0, -84px, 0) !important;
    transition: opacity 0.8s ease, transform 0.8s ease !important;
}

/* Jeder Klon bekommt eine EIGENE Compositing-Ebene. Bisher wurden sie in die grossen
   Overlay-Ebenen hineingemalt — jede Bewegung (und sie bewegen sich in JEDEM Frame mit dem
   Scrollen) liess ihre Flaeche dort neu rastern, bei grosser Auszeichnungsschrift der teuerste
   Posten pro Frame. Mit eigener Ebene ist das Verschieben eine reine Compositor-Sache: die
   fertige Textur wird bewegt, nichts wird neu gemalt. Die Ebenen sind so gross wie der Klon
   (nicht wie der Bildschirm) — rund 350 KB bei DPR 3, in Summe ein Bruchteil dessen, was die
   Vollbild-Ebenen ohnehin belegen. #kipp-noprom schaltet es zum Vergleich ab. */
/* AUSGENOMMEN: Kontur-Schriften. Sie zeichnen mit -webkit-text-stroke, und der Strich liegt
   mittig auf dem Umriss — seine aeussere Haelfte ragt damit ueber die Elementbox hinaus.
   iOS-Safari rastert eine eigene Ebene aber nur bis zur Box und kappt den Ueberstand; am Geraet
   bestaetigt: unter #kipp-noprom ist die Fahne des blackletter-T vollstaendig, mit Ebene fehlt
   sie. Playwrights WebKit stellt das NICHT nach (dort war die Kontur in jeder lokalen Messung
   vollstaendig, auch mit erzwungenem clip-path:none, overflow:visible und padding-right) — wer
   hier etwas aendert, kann sich also nicht auf den lokalen Test verlassen.
   Die Kontur-Klone werden dadurch wieder in die (bildschirmgrosse) Overlay-Ebene gemalt; dort
   gibt es das Problem nicht. Es sind vier von rund 47 Klonen, die uebrigen bleiben promotet. */
body:not(.kipp-noprom) .skin-ov > *:not([class*="outline"]),
body:not(.kipp-noprom) .skin-frame-b {
    will-change: transform;
    /* Die Ebene wird nur so gross gerastert wie die "visual overflow"-Flaeche des Elements, und
       die endet bei der Box — die Pirata-Glyphen ragen aber ueber ihre Box hinaus (gemessen 3,2px
       rechts). Genau das fehlte am Geraet, erst an der Kontur, nach deren Ausnahme dann an der
       Fuellung: es war nie ein Kontur-Problem, sondern eins jeder Glyphe mit Ueberstand.
       box-shadow mit Spread vergroessert die visual-overflow-Flaeche und ist die einzige
       Eigenschaft dafuer, die das LAYOUT nicht anfasst (padding wuerde offsetWidth aendern — und
       daran haengen die B-Breitenkoeffizienten kB und die Positionierung). Vollstaendig
       transparent, kostet also nichts zu malen. */
    box-shadow: 0 0 0 16px transparent;
}

/* Die AUS-Blende beim Scrollstart auf den Compositor holen.
   Beim ersten Scroll-Event schliesst script.js den Klappentext (clearInfoOverlay). Damit starten
   in genau diesem Moment zwei Animationen: die Treppentext-Zeilen fahren 0,8s auf -84px/opacity 0
   (deactivateStairGhost, gespiegelt auf .skin-ghostb.exit) und der Gradient blendet 0,2s aus.
   Animiert werden nur opacity und transform — beides koennte der Compositor allein erledigen.
   Ohne eigene Ebene tut er es nicht: die Zeilen werden in den Ghost hineingemalt, und der steht
   unter perspective(700px) rotateY(-8deg). Safari rastert also 0,8s lang jeden Frame das ganze
   3D-Gebilde neu — genau waehrend der Scroll anlaeuft. Das sind die ersten 10-15px.
   will-change legt die Ebenen an, sobald der Ghost befuellt wird — also beim TIPPEN, wenn die
   Seite steht, nicht erst beim Scrollstart. Danach ist die Blende reines Ueberblenden fertiger
   Texturen. Die Ebenen existieren nur, solange der Klappentext offen ist (deactivateStairGhost
   leert den Ghost per innerHTML danach wieder). #kipp-nofade schaltet es zum Vergleich ab. */
body.cmp-active:not(.kipp-nofade) #stair-ghost .words-stair__line p,
body:not(.kipp-nofade) .skin-ghostb .words-stair__line p {
    will-change: opacity, transform;
}
body.cmp-active:not(.kipp-nofade) .image-info::after {
    will-change: opacity;
}

/* --- Diagnose-Schalter (URL-Hash, s. readFlags in slider-solo.js) ---
   Trennt den Fall "ruckelt nur mit offenem Klappentext" in seine drei Verdaechtigen auf:
   #kipp-nograd  = die grossen Caption-Gradient-Flaechen weg
   #kipp-notext  = der B-Klon des Treppentexts weg
   #kipp-noanim  = alle Ein-/Ausfahr-Animationen (echte Seite UND Klone) stehen still */
body.kipp-nograd .skin-cap-pin { display: none !important; }
body.kipp-notext .skin-ghostb  { display: none !important; }
body.kipp-noanim #stair-ghost,
body.kipp-noanim #stair-ghost *,
body.kipp-noanim .skin-ov,
body.kipp-noanim .skin-ov *,
body.kipp-noanim .image-info,
body.kipp-noanim .image-info::after {
    transition: none !important;
    animation: none !important;
}

/* --- B-Skin: Pirata + Farben (nur rechte Klone) --- */
.skin-b .logo-gif  { display: none !important; }
.skin-b .logo-text { display: block !important; }
.skin-b .logo-text,
.skin-b .main-heading,
.skin-b .konzept-heading,
.skin-b .konzept-heading-anchor,
.skin-b .rivus-anchor-filled,
.skin-b .rivus-anchor-outline,
.skin-b .rivus-anchor-gray,
.skin-b .gesichten-anchor-filled,
.skin-b .gesichten-anchor-outline,
.skin-b .gesichten-anchor-gray {
    font-family: 'Pirata One', 'Inter', sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}
/* Ueberschriften-Farbe: Light #333366, Dark #EDA4E3 */
.skin-b .logo-text,
.skin-b .main-heading-filled,
.skin-b .konzept-heading-filled,
.skin-b .rivus-anchor-filled,
.skin-b .gesichten-anchor-filled { color: #333366 !important; }
.skin-b .main-heading-outline,
.skin-b .konzept-heading-outline,
.skin-b .rivus-anchor-outline,
.skin-b .gesichten-anchor-outline {
    -webkit-text-stroke-color: #333366 !important;
    text-stroke-color: #333366 !important;
}
.skin-b.dark .logo-text,
.skin-b.dark .main-heading-filled,
.skin-b.dark .konzept-heading-filled,
.skin-b.dark .rivus-anchor-filled,
.skin-b.dark .gesichten-anchor-filled { color: #EDA4E3 !important; }
.skin-b.dark .main-heading-outline,
.skin-b.dark .konzept-heading-outline,
.skin-b.dark .rivus-anchor-outline,
.skin-b.dark .gesichten-anchor-outline {
    -webkit-text-stroke-color: #EDA4E3 !important;
    text-stroke-color: #EDA4E3 !important;
}
/* Aufklapp-Pfeil (B-Klon): Light pink wie der B-Hintergrund. Dark: B-Klon aus -> Original (dunkel)
   gilt auf beiden Seiten. currentColor treibt den SVG-stroke. */
.skin-b .block-arrow {
    color: #EDA4E3 !important;
    background: none !important; border: none !important; outline: none !important;
    box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important;
    padding: 6px !important; /* wie Original (.content-box .block-arrow), sonst SVG 6px zu weit links */
}
.skin-b.dark .block-arrow { display: none !important; }

/* Treppenlink unten: Light #FF4004, Dark #3DFFA7 (gruen) */
.skin-b #bottom-stair-menu a {
    color: #FF4004 !important;
    -webkit-text-stroke-color: #FF4004 !important;
    text-stroke-color: #FF4004 !important;
}
.skin-b.dark #bottom-stair-menu a {
    color: #3DFFA7 !important;
    -webkit-text-stroke-color: #3DFFA7 !important;
    text-stroke-color: #3DFFA7 !important;
}

/* =============== QUERFORMAT-HINWEIS (nur Smartphone im Landscape) =============== */
/* NICHT an .cmp-active gekoppelt -> greift auch im Fallback (alte Landing). Sichtbar NUR bei:
   Querformat + kurze Kante (im Landscape = Hoehe) <= 500px + grober Zeiger (Touch). Das trifft
   Smartphones quer; iPad/Desktop im Landscape haben Hoehe > 500px bzw. pointer:fine -> ausgeschlossen. */
#rotate-hint {
    display: none;
    position: fixed; inset: 0;
    z-index: 2147483647;
    background: #E9E9E4;
    color: #333333;
    align-items: center; justify-content: center;
    text-align: center;
    -webkit-user-select: none; user-select: none;
}
body.dark-mode #rotate-hint { background: #1a1a1a; color: #E9E9E4; }
.rotate-hint__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 24px; }
.rotate-hint__icon { width: 60px; height: 60px; transform-origin: 50% 50%; animation: rotate-hint-turn 2.6s ease-in-out infinite; }
.rotate-hint__text { font-family: 'Inter', sans-serif; font-size: 17px; line-height: 1.4; margin: 0; max-width: 24ch; }
/* Dreh-Demo: Handy von quer (wie gerade gehalten) nach hochkant, lange halten, schnell zuruecksetzen. */
@keyframes rotate-hint-turn {
    0%, 18% { transform: rotate(-90deg); }
    42%, 90% { transform: rotate(0deg); }
    100% { transform: rotate(-90deg); }
}
@media (prefers-reduced-motion: reduce) {
    .rotate-hint__icon { animation: none; transform: rotate(0deg); }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
    #rotate-hint { display: flex; }
}

/* =============== iOS-ERKLAER-OVERLAY + PILLE ("Kippen") =============== */
/* Dunkelt den Bildschirm ab (Fokus auf die Pille + Hinweistext) und bereitet auf den iOS-Bewegungs-
   dialog vor. Per JS erzeugt, nur iOS. NICHT an cmp-active gekoppelt (erscheint vor Aktivierung). */
#tilt-overlay {
    position: fixed; inset: 0;
    z-index: 2147483646;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 28px;
    padding: 32px;
    box-sizing: border-box;
    text-align: center;
    background: rgba(0, 0, 0, 0.72);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    -webkit-tap-highlight-color: transparent;
    animation: tilt-overlay-in 0.3s ease both;
}
.tilt-overlay__text {
    margin: 0;
    max-width: 24ch;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.45;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
/* Pille: zweifarbig links orange / rechts pink, dazwischen ein schraeger Trennstrich im Winkel der
   Start-Trennlinie (oben rechts, unten links -> gradient-Winkel > 90deg). */
#tilt-prompt {
    -webkit-appearance: none; appearance: none;
    border: 0; margin: 0;
    padding: 15px 42px;
    border-radius: 999px;
    overflow: hidden;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 22px;
    line-height: 1;
    color: #fff;
    background: linear-gradient(94deg, #FF6633 0 50%, #EDA4E3 50% 100%);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
    animation: tilt-prompt-in 0.45s ease both;
}
.tilt-prompt__text {
    position: relative;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    letter-spacing: 0.03em;
}
@keyframes tilt-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tilt-prompt-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    #tilt-overlay, #tilt-prompt { animation: none; }
}