@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600&display=swap');

:root{
  --cream:#f7f4ee;
  --cream-2:#f0ebe1;
  --ink:#171412;
  --ink-soft:#4a4440;
  --gold:#b3894a;
  --gold-light:#d9b876;
  --line:rgba(23,20,18,0.12);
  --radius:2px;
  --maxw:1400px;
  --pink:#ff3f9e;
  --pink-deep:#e8248a;
}

*{box-sizing:border-box;}
/* Der wachsende Logo-Trenner ragt bewusst seitlich über den Bildschirm.
   "clip" auf html UND body schneidet das ab, ohne einen Scroll-Container zu
   erzeugen (position:sticky des Hero-Kreuzes bleibt dadurch funktionsfähig). */
html{overflow-x:clip;}
/* WICHTIG: bewusst KEIN html{scroll-behavior:smooth} — das lässt Chrome auch
   normales Mausrad-/Trackpad-Scrollen künstlich abbremsen/verzögern (nicht
   nur programmatische Sprünge), wodurch sich die ganze Seite trotz Scrollen
   erst nach einer spürbaren Verzögerung bewegt. Die einzige Stelle, die
   wirklich sanftes Scrollen braucht (Tages-Kreuz-Ergebnis), erzwingt das
   gezielt selbst per JS (scrollIntoView({behavior:'smooth'})) — dafür ist
   diese globale Regel nicht nötig. */
body{
  margin:0;
  /* Das wachsende Logo im Abschnitts-Trenner ragt bewusst seitlich über den
     Bildschirm hinaus. "clip" schneidet das sauber ab, OHNE — anders als
     "hidden" — einen Scroll-Container zu erzeugen; das gepinnte Hero-Kreuz
     (position:sticky) funktioniert dadurch unverändert weiter. */
  overflow-x:clip;
  background:var(--pink);
  color:#fff;
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:'Playfair Display',serif;font-weight:600;margin:0;}
.eyebrow{
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;opacity:.85;font-weight:600;
}

nav.main-nav{display:flex;gap:clamp(16px,3vw,34px);font-size:.86rem;letter-spacing:.02em;color:#fff;}
nav.main-nav a{opacity:.88;transition:opacity .2s;color:#fff;}
nav.main-nav a:hover{opacity:1;}

/* ---------- Hero / Mosaic ---------- */
/* Scrollbereich fuer den Zoom in den Buchstaben-Mix, plus etwas Puffer am
   Ende: das Ausfaden zur Kreuzform ist zeitgesteuert (3s, siehe
   enterGallerySettle() in main.js) und startet sofort, sobald der Zoom
   fertig ist — der Puffer gibt nur etwas Spielraum, damit man dabei nicht
   sofort ungewollt weiter in den langen Kreuz-Balken (.cross-tail)
   weiterscrollt. */
/* War vorher 420vh — deutlich verkürzt, damit man nicht mehrere Bildschirm-
   höhen lang scrollen muss, bevor die Kreuz-Galerie fertig ist und es mit
   dem Rest der Seite weitergeht (mehrfach gemeldet: "Seite bewegt sich
   nicht"). Der Zoom-Effekt selbst bleibt gleich, läuft nur über eine
   kürzere Scrollstrecke ab. */
.hero-spacer{position:relative;height:220vh;}
.hero-sticky{
  position:sticky;top:0;z-index:0;height:100vh;width:100%;overflow:hidden;
  background:var(--pink);
  transition:background-color 1s ease;
}
.hero-sticky.reveal-full{background:var(--pink);}
.tile-grid{
  position:absolute;top:7cm;left:0;right:0;bottom:0;z-index:1;
  display:grid;
  grid-auto-rows:1fr;
  gap:2px;
  background:var(--pink);
  -webkit-mask-image:url('../assets/img/logo_mask.png');
  mask-image:url('../assets/img/logo_mask.png');
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:44% auto;
  mask-size:44% auto;
  will-change:mask-size;
  transition:mask-size 1.7s cubic-bezier(.16,.9,.2,1), -webkit-mask-size 1.7s cubic-bezier(.16,.9,.2,1);
}
.hero-sticky.pre-mask .tile-grid{
  -webkit-mask-size:0% auto;
  mask-size:0% auto;
}
.tile-grid .tile{
  background-size:cover;background-position:center;
  filter:grayscale(.15) brightness(.92);
  opacity:.96;
  transform:none;
  transition:transform 1.15s cubic-bezier(.16,.9,.2,1), opacity .85s ease;
  will-change:transform,opacity;
}
.hero-sticky.pre-tiles .tile-grid .tile{
  opacity:0;
  transform:scale(var(--s,.55)) rotate(var(--r,0deg)) translate(var(--tx,0px),var(--ty,0px));
}
/* Die Galerie liegt HINTER dem HOLY-Logo, im selben Bildschirm: anfangs ist
   nur das Logo auf Pink zu sehen (Galerie unsichtbar). Beim Reinzoomen ins
   Logo blendet die volle Nahaufnahmen-Fläche dahinter ein (--reveal-opacity,
   von updateFullGridReveal() gesetzt), bis der ganze Bildschirm voller
   Close-ups ist. Im Scroll-Puffer danach (noch im selben Pin) faden alle
   Kacheln AUSSER der Kreuzform aus (--fade-opacity, von
   updateFullGridSettle() gesetzt), sodass nur noch die reine Kreuzform aus
   Nahaufnahmen übrig bleibt. Der Kreuz-Längsbalken geht danach im normalen
   Scrollfluss (.cross-tail) länger als ein Bildschirm weiter. */
.hero-sticky.reveal-full .tile-grid{opacity:0;pointer-events:none;transition:opacity .15s ease;}
.tile-grid-full{
  position:absolute;top:7cm;left:0;right:0;bottom:0;z-index:0;
  display:grid;
  gap:2px;
  /* WICHTIG: kein overflow:hidden hier — der Kreuz-Heiligenschein (.cross-
     halo) hängt als Kind DIESES Elements (siehe initCrossHalos() in
     main.js), damit sein z-index wirklich mit dem der .card-Kacheln
     verglichen wird (ein eigener Stapelkontext hier würde das verhindern).
     Sein Anker liegt knapp OBERHALB der ersten Grid-Zeile — overflow:hidden
     würde genau den sichtbaren oberen Bogen abschneiden. #hero-sticky
     (Elternelement, 100vh) hat selbst overflow:hidden und begrenzt die
     Fläche weiterhin nach aussen. */
  overflow:visible;
  opacity:var(--reveal-opacity,0);
  transition:opacity .35s ease;
}
@media(max-width:640px){
  .tile-grid-full,.tile-grid{ top:4cm; }
}

/* ---------- Kreuz-Heiligenschein: 7 kleine, freigestellte Kreuze umkreisen
   (und atmen) die Spitze des grossen und des kleinen Kreuzes — gleicher Stil
   wie der Ring um den About-Text, aber kleiner. Liegt per z-index HINTER der
   Kreuzform/dem Grid, sodass der untere Bogen des Rings hinter dem Kreuz
   verschwindet und nur der obere Bogen (im freien Raum darüber) sichtbar
   bleibt — wie ein Heiligenschein, der über der Spitze schwebt. ---------- */
.cross-halo{
  position:absolute;pointer-events:none;z-index:1;
  animation:breathScale 7s ease-in-out infinite;
}
.cross-halo-item{
  position:absolute;width:auto;margin:0;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
  opacity:.85;animation:breathItemPulse 7s ease-in-out infinite;
}
.cross-halo-item img{height:100%;width:auto;display:block;}
.tile-grid-full .card{
  position:relative;overflow:hidden;cursor:zoom-in;background:var(--pink);z-index:0;
}
/* Kreuz-Kacheln bleiben IMMER eine Ebene höher als die restlichen (blossen
   Hintergrund-)Kacheln: der Heiligenschein verschwindet dahinter. */
.tile-grid-full .card.cross-tile{ z-index:2; }
/* .halo-zone (Hintergrund-Kacheln in Reichweite des Heiligenscheins) bekommt
   dieselbe erhöhte Ebene NUR, solange diese Kacheln noch ihr eigenes Foto
   zeigen (vor dem Ausfaden) — sonst würde ein einzelnes Ring-Kreuz, das über
   Hintergrund- UND Kreuz-Kachel gleichzeitig ragt, halb sichtbar/halb
   verdeckt aussehen. NACH dem Ausfaden (.settling/.settled, siehe
   enterGallerySettle() in main.js) sind diese Kacheln nur noch blosses Pink
   ohne Foto — dann MUSS die Ebene wieder auf die Hintergrund-Basis zurück,
   sonst würde dieses leere Pink dauerhaft ein Stück des Heiligenscheins
   verdecken, obwohl dort gar kein Kreuz mehr zu sehen ist. */
.tile-grid-full:not(.settling):not(.settled) .card.halo-zone{ z-index:2; }
.tile-grid-full .card .layer.close{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .5s ease,filter .5s ease,opacity .5s linear;
  filter:grayscale(.1) brightness(.94);
  opacity:var(--fade-opacity,1);
}
.tile-grid-full .card:hover .layer.close{transform:scale(1.08);filter:grayscale(0) brightness(1);}

/* Die Nicht-Kreuz-Kacheln fangen schon während des Reinzoomens an, langsam
   auszufaden (--fade-opacity wird scrollgesteuert gesetzt, siehe
   updateFullGridPreFade() in main.js — nutzt die normale, unten definierte
   Basis-Transition). Sobald der Zoom fertig ist, holt diese ~2s-Transition
   den Rest zeitgesteuert (enterGallerySettle()), bis die Kreuzform ganz
   vollständig ist. */
.tile-grid-full.settling .card:not(.cross-tile) .layer.close{
  transition:transform .5s ease,filter .5s ease,opacity 2s ease;
}
/* Handy: schnellerer Gesamtablauf (0.5s Start + schnellerer Zoom, siehe
   autoZoomOnMobile() in main.js) — das Ausfaden der Nicht-Kreuz-Kacheln
   muss darum ebenfalls schneller gehen, sonst zieht sich der Rest der
   Sequenz unnötig in die Länge. Muss zum setTimeout(...,1100) in
   enterGallerySettle() passen. */
@media(max-width:640px){
  .tile-grid-full.settling .card:not(.cross-tile) .layer.close{
    /* langsameres, weicheres Ausblenden auf dem Handy — muss zum setTimeout
       (2800ms) in enterGallerySettle() passen */
    transition:transform .5s ease,filter .5s ease,opacity 2.8s ease;
  }
}

/* Kreuz-Kacheln bleiben immer sichtbar — auch wenn der Rest der Fläche
   ausgefadet wird, ignorieren sie --fade-opacity. */
.tile-grid-full .card.cross-tile .layer.close{opacity:1;transition:transform .5s ease,filter .5s ease;}

/* Erst wenn die Nicht-Kreuz-Kacheln WIRKLICH (fast) unsichtbar sind, werden
   sie unklickbar/nicht mehr hoverbar — nicht schon ab dem ersten Ausfaden,
   sonst wirken sie "weg", obwohl sie noch grösstenteils sichtbar sind. */
.tile-grid-full.settled .card:not(.cross-tile){pointer-events:none;}

/* Random-Spotlight: alle 11s bleibt kurz nur ein zufälliges Bild sichtbar,
   der Rest wird pink (ausgeblendet), dann wieder alle sichtbar. Nur
   relevant, solange die volle Fläche noch nicht ausgefadet ist. */
.tile-grid-full:not(.settling) .card.spotlight-dim:not(.cross-tile) .layer.close{opacity:0;}
.tile-grid-full:not(.settling) .card.spotlight-dim:not(.cross-tile){pointer-events:none;}

/* Kurzer, kunstvoller Glitch-Effekt bevor sich das Grossbild öffnet — läuft
   genau während der Hover-Wartezeit (0.5s), dann übernimmt der Zoom. */
.tile-grid-full .card.glitch .layer.close{
  animation:cardGlitch .5s steps(1,end) 1;
}
.tile-grid-full .card.glitch .layer.close::after{
  content:'';position:absolute;inset:0;background:inherit;background-size:cover;background-position:center;
  mix-blend-mode:screen;opacity:0;animation:cardGlitchRGB .5s steps(1,end) 1;
}
@keyframes cardGlitch{
  0%   { transform:scale(1) translate(0,0); filter:grayscale(.1) brightness(.94) hue-rotate(0deg); clip-path:inset(0 0 0 0); }
  8%   { transform:scale(1.02) translate(-4px,1px); filter:hue-rotate(25deg) saturate(1.6); clip-path:inset(10% 0 55% 0); }
  16%  { transform:scale(1.01) translate(3px,-2px); filter:hue-rotate(-20deg) saturate(1.4); clip-path:inset(60% 0 5% 0); }
  24%  { transform:scale(1.03) translate(-2px,0); filter:hue-rotate(15deg); clip-path:inset(25% 0 40% 0); }
  32%  { transform:scale(1.01) translate(2px,2px); filter:hue-rotate(-10deg); clip-path:inset(0 0 70% 0); }
  40%  { transform:scale(1.04) translate(-3px,-1px); clip-path:inset(45% 0 15% 0); }
  50%  { transform:scale(1.02) translate(1px,1px); filter:hue-rotate(8deg); clip-path:inset(0 0 0 0); }
  65%  { transform:scale(1.06) translate(-1px,0); filter:grayscale(0) brightness(1) hue-rotate(0deg); }
  100% { transform:scale(1.08) translate(0,0); filter:grayscale(0) brightness(1); clip-path:inset(0 0 0 0); }
}
@keyframes cardGlitchRGB{
  0%{ opacity:0; transform:translate(0,0); }
  10%{ opacity:.55; transform:translate(3px,0) scale(1.02); filter:sepia(1) saturate(6) hue-rotate(300deg); }
  25%{ opacity:.5; transform:translate(-4px,1px) scale(1.02); filter:sepia(1) saturate(6) hue-rotate(180deg); }
  40%{ opacity:.4; transform:translate(2px,-1px) scale(1.03); }
  60%{ opacity:.25; transform:translate(-2px,0) scale(1.05); }
  100%{ opacity:0; transform:translate(0,0) scale(1.08); }
}
/* Fortsetzung des langen Kreuz-Längsbalkens, direkt im Anschluss an den
   gepinnten Hero, im normalen Scrollfluss — dieselben Spalten wie
   .tile-grid-full (siehe crossColumns() in main.js), damit es nahtlos
   weitergeht. */
.cross-tail{position:relative;background:var(--pink);overflow:hidden;}
.tile-grid-tail{position:relative;display:grid;gap:2px;height:100%;}
.cross-tail .card{position:relative;overflow:hidden;cursor:zoom-in;background:var(--pink);}
.cross-tail .card .layer.close{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .5s ease,filter .5s ease;
  filter:grayscale(.1) brightness(.94);
}
.cross-tail .card:hover .layer.close{transform:scale(1.08);filter:grayscale(0) brightness(1);}
.cross-tail .card.glitch .layer.close{
  animation:cardGlitch .5s steps(1,end) 1;
}
.cross-tail .card.glitch .layer.close::after{
  content:'';position:absolute;inset:0;background:inherit;background-size:cover;background-position:center;
  mix-blend-mode:screen;opacity:0;animation:cardGlitchRGB .5s steps(1,end) 1;
}

/* ---------- Kleine Kreuze — eigene, kleinere Nahaufnahmen-Kreuz-Galerie,
   nach demselben Prinzip wie oben (Close-ups bilden ein Kreuz), aber als
   eigenständige, kompakte Grafik statt vollbild-gepinntem Zoom. Proportional
   verkleinert: grosses Kreuz 30 x 15 cm, kleines Kreuz 12 x 7.5 cm. ---------- */
.small-cross-section{background:var(--pink);color:#fff;text-align:center;padding:min(8vw,80px) 0 min(10vw,90px);}
.small-cross-section .section-head{margin-left:auto;margin-right:auto;text-align:center;max-width:600px;padding:0 24px;}
.small-cross-wrap{display:flex;justify-content:center;position:relative;z-index:0;}
.small-cross-head{margin-top:min(6vw,48px) !important;}
@media(max-width:640px){
  /* Auf dem Handy war der Titel unter dem kleinen Kreuz spürbar näher dran
     als beim grossen Kreuz oben — dort sorgt die eigene Sektion (.post-
     gallery-nav) für mehr Abstand. Gleicher, grosszügigerer Abstand wie
     dort erzwingen. */
  .small-cross-head{margin-top:40px !important;}
}
.small-cross-grid{position:relative;display:grid;gap:2px;}
.small-cross-grid .card{position:relative;overflow:hidden;cursor:zoom-in;background:var(--pink);z-index:2;}
.small-cross-grid .card .layer.close{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .5s ease,filter .5s ease;
  filter:grayscale(.1) brightness(.94);
}
.small-cross-grid .card:hover .layer.close{transform:scale(1.08);filter:grayscale(0) brightness(1);}
.small-cross-grid .card.glitch .layer.close{
  animation:cardGlitch .5s steps(1,end) 1;
}
.small-cross-grid .card.glitch .layer.close::after{
  content:'';position:absolute;inset:0;background:inherit;background-size:cover;background-position:center;
  mix-blend-mode:screen;opacity:0;animation:cardGlitchRGB .5s steps(1,end) 1;
}

.hero-scrollhint{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  color:#fff;opacity:.8;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.hero-scrollhint .line{width:1px;height:34px;background:currentColor;opacity:.6;animation:hintmove 1.8s ease-in-out infinite;}
@keyframes hintmove{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}51%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

/* ---------- Nav/Info nach der Galerie ---------- */
.post-gallery-nav{
  background:var(--pink);color:#fff;
  padding:min(8vw,80px) clamp(20px,5vw,56px);
  text-align:center;
  position:relative;
}
.post-gallery-nav-inner{max-width:680px;margin:0 auto;position:relative;z-index:1;}

/* ---------- Muster-Glitch über der GANZEN Seite ---------- */
.global-glitch-overlay{
  position:fixed;inset:0;z-index:250;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 100 100'><g fill='none' stroke='white' stroke-width='1' stroke-opacity='0.9'><circle cx='50' cy='50' r='25'/><circle cx='75' cy='50' r='25'/><circle cx='62.5' cy='71.65' r='25'/><circle cx='37.5' cy='71.65' r='25'/><circle cx='25' cy='50' r='25'/><circle cx='37.5' cy='28.35' r='25'/><circle cx='62.5' cy='28.35' r='25'/></g></svg>");
  background-repeat:repeat;background-size:140px 140px;background-position:center;
  opacity:0;transform:scale(1);transform-origin:center;
  /* Timing/Skalierung wird pro Glitch zufällig per JS gesetzt (main.js: globalPatternGlitch) */
}

/* ---------- Audio-Toggle ---------- */
.audio-toggle{
  position:fixed;right:18px;bottom:18px;z-index:260;
  width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;
  transition:background .2s;
}
.audio-toggle:hover{background:rgba(255,255,255,.3);}
.audio-icon-off{display:none;}
.audio-toggle.muted .audio-icon-on{display:none;}
.audio-toggle.muted .audio-icon-off{display:inline;}

/* ---------- Sprach-Toggle — exakt derselbe visuelle Stil wie .audio-toggle
   (Kreis, halbtransparentes Weiss, Blur), nur oben statt unten. ---------- */
.lang-toggle{
  position:fixed;right:18px;top:18px;z-index:260;
  width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:600;letter-spacing:.03em;
  font-family:'Inter',sans-serif;
  transition:background .2s;
}
.lang-toggle:hover{background:rgba(255,255,255,.3);}
.post-gallery-nav .eyebrow{color:#fff;opacity:.85;}
.post-gallery-nav h1{
  font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.25;margin-top:12px;color:#fff;
}
.post-gallery-nav .main-nav{
  display:flex;justify-content:center;gap:clamp(16px,3vw,34px);
  margin-top:28px;font-size:.86rem;letter-spacing:.04em;text-transform:uppercase;
}
.post-gallery-nav .main-nav a{opacity:.88;transition:opacity .2s;}
.post-gallery-nav .main-nav a:hover{opacity:1;text-decoration:underline;}

/* ---------- Section shell ---------- */
.section{padding:min(11vw,120px) clamp(20px,5vw,56px);max-width:var(--maxw);margin:0 auto;}
.section-tight{padding-top:min(4vw,40px);}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head h2{font-size:clamp(1.7rem,3vw,2.5rem);margin-top:10px;line-height:1.15;}
.section-head p{color:var(--ink-soft);margin-top:16px;line-height:1.6;font-size:.98rem;}

/* ---------- Kleines Logo als Trenner zwischen den Abschnitten ----------
   Ruhige Endlos-Animation: drei identische Logos liegen übereinander und
   laufen zeitversetzt durch denselben Ablauf — sie starten in der jetzigen
   Grösse, wachsen langsam auf das Dreifache und blenden dabei aus, während
   das nächste hinter ihnen einblendet und nachwächst. Dadurch sind immer
   drei Logos gleichzeitig zu sehen, in verschiedenen Stadien.

   Das Logo wird bewusst NICHT beschnitten (kein overflow am Trenner): es soll
   beim Wachsen frei über Schrift und Kreuze der Nachbarabschnitte hinauswachsen.
   - "overflow:visible" (Standard) heisst: nichts wird abgeschnitten. Ein früher
     hier verwendetes "overflow:clip + overflow-clip-margin" kennen nicht alle
     Handy-Browser — dort wurde das Logo beim Ausfaden hart abgeschnitten.
   - Damit das seitlich Überstehende trotzdem keine Scrollleiste erzeugt, ist
     das seitliche Abschneiden einmal zentral auf html/body gesetzt (siehe ganz
     oben in dieser Datei).
   - Der hohe z-index hebt den Trenner über die Nachbarabschnitte, deren
     Hintergrund und Kacheln das Gold sonst verdecken würden. ---------- */
.section-divider{
  --logo-h:clamp(150px,20vw,260px);   /* Ausgangsgrösse des Logos — wie bisher */
  position:relative;z-index:20;
  overflow:visible;
  /* bewusst KEIN display:flex hier — die Logo-Ebenen positionieren sich selbst
     absolut und zentrieren intern; ein Flex-Elternteil war genau der Auslöser
     der Safari-Verschiebung. */
  padding:clamp(16px,3vw,32px) 20px;
  height:calc(var(--logo-h) * 1.9);
}
/* Jedes Logo sitzt in einer eigenen, bildschirmfüllenden Ebene, die das Bild
   per Flexbox mittig hält. Bewusst OHNE "left:50% + translate(-50%)": genau
   diese Kombination verrutscht in Safari, wenn das Elternelement selbst ein
   Flex-Container ist (auf dem iPhone stand das Logo dadurch rechts statt
   mittig). So bleibt für die Animation nur noch ein reines scale() übrig. */
.section-divider .logo-layer{
  position:absolute;inset:0;
  /* Rein dekorativ: Klicks und Berührungen gehen hindurch. Ohne das würden
     die überstehenden Logo-Ebenen (sie ragen bewusst weit über den Trenner
     hinaus, z-index:20) die darunterliegenden Kreuz-Kacheln blockieren —
     die untersten Werke liessen sich dann nicht mehr anklicken. */
  pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  transform:scale(1);
  transform-origin:center center;
  opacity:0;
  animation:logoBloom 30s linear infinite;
  /* bewusst KEIN will-change: das erzwingt auf dem Handy eine eigene
     GPU-Ebene, die bei stark vergrössertem Inhalt verrutschen kann. */
}
.section-divider .logo-layer img{
  height:var(--logo-h);width:auto;max-width:none;
}
.section-divider .logo-layer:nth-child(2){ animation-delay:-10s; }
.section-divider .logo-layer:nth-child(3){ animation-delay:-20s; }
/* Deckkraft-Verlauf so gewählt, dass immer genau EIN Logo kräftig zu sehen
   ist und die beiden anderen als zarte Schatten davor bzw. dahinter liegen —
   sonst überlagern sich drei gleich starke Logos zu einem unruhigen Knäuel. */
@keyframes logoBloom{
  /* Einblenden bei halber Grösse (0.5), dann ruhig aufwachsen bis 3.6 —
     das Logo wächst also vor dem endgültigen Ausblenden nochmals rund 20%
     weiter als zuvor. */
  0%   { transform:scale(.5);   opacity:0; }
  22%  { opacity:1; }
  45%  { opacity:.55; }
  70%  { opacity:.16; }
  100% { transform:scale(3.6);  opacity:0; }
}
/* Wer Bewegung reduziert haben will, sieht einfach ein ruhiges Logo. */
/* Handy: der Trenner braucht nicht so hoch zu sein wie am Desktop — das
   wachsende Logo darf inzwischen ohnehin über den Rand hinausragen (siehe
   overflow-clip-margin oben). Vorher entstanden dadurch unnötig grosse
   Abstände zwischen Logo und den angrenzenden Texten. */
@media(max-width:900px){
  .section-divider{
    /* 1.2 -> 1.6 und Polster 12 -> 16px: rund ein Drittel mehr Luft ober- und
       unterhalb des Logos (204px -> 272px), damit es mehr Platz hat. */
    height:calc(var(--logo-h) * 1.6);
    padding:16px 20px;
  }
}
@media(prefers-reduced-motion: reduce){
  .section-divider .logo-layer{ animation:none;opacity:0;transform:none; }
  .section-divider .logo-layer:first-child{ opacity:1; }
}

/* ---------- Intro strip after hero ---------- */
.intro-strip{
  background:var(--cream-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.intro-grid{
  max-width:var(--maxw);margin:0 auto;padding:64px clamp(20px,5vw,56px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
}
.intro-grid .num{font-family:'Playfair Display',serif;font-size:2.1rem;color:var(--gold);margin-bottom:6px;}
.intro-grid p{color:var(--ink-soft);font-size:.92rem;line-height:1.55;margin:0;}
@media(max-width:820px){.intro-grid{grid-template-columns:1fr;gap:28px;}}

/* ---------- About ---------- */
.about-section{background:var(--pink);color:#fff;position:relative;overflow:hidden;padding-top:120px;padding-bottom:120px;}
.about-section .section-head{position:relative;z-index:1;margin-left:auto;margin-right:auto;text-align:center;max-width:760px;}
.about-section .section-head p{color:rgba(255,255,255,.85);}
.about-section .section-head p + p{margin-top:22px;}
.about-section .eyebrow{color:#fff;}

/* Atem-Kugel: freigestellte Kreuz-Ausschnitte umkreisen den Text (sehr
   langsame Rotation, ca. 1 Umdrehung/Minute, per JS) und atmen dabei sanft
   (Grössen-Puls am Ring + Opazitäts-Puls je Medaillon) — rein dekorativ,
   hinter dem Text. */
.breath-ring{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  animation:breathScale 7s ease-in-out infinite;
}
.breath-item{
  position:absolute;
  opacity:.8;animation:breathItemPulse 7s ease-in-out infinite;
}
.breath-item-cutout{
  height:92px;width:auto;
  margin-top:-46px;
  transform:translateX(-50%);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.28));
}
.breath-item-cutout img{height:100%;width:auto;display:block;}
@keyframes breathScale{
  0%,100%{ transform:scale(.92); }
  50%{ transform:scale(1.05); }
}
@keyframes breathItemPulse{
  0%,100%{ opacity:.55; }
  50%{ opacity:.85; }
}
@media(max-width:900px){
  .breath-ring{ display:none; } /* zu wenig Platz — Ring würde den Text überlagern */
}

/* ---------- Wort-Zoom: einzelne Wörter werden ab und zu langsam gross und wieder klein ---------- */
/* Nur für Screenreader/Suchmaschinen sichtbar — für aussagekräftigere
   Überschriften (SEO), ohne das visuelle Design zu verändern. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.word-glitch{
  position:relative;display:inline-block;transform-origin:center;
  transform:scale(1);
}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(232,36,138,.88);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.modal-overlay.open{opacity:1;pointer-events:auto;}
.modal{
  background:var(--pink);color:#fff;max-width:1280px;width:100%;max-height:92vh;overflow:auto;
  display:grid;grid-template-columns:1.35fr 1fr;border-radius:3px;position:relative;
  transform:translateY(16px) scale(.98);transition:transform .35s ease;
}
.modal-overlay.open .modal{transform:translateY(0) scale(1);}
.modal-media{background:var(--pink);display:flex;align-items:center;justify-content:center;padding:26px;min-height:320px;position:relative;cursor:zoom-in;overflow:hidden;}
.modal-media img{max-height:84vh;object-fit:contain;transition:transform .25s ease;}
/* Lupe/Zoom in der Grossansicht: Hover über das Bild vergrössert es an genau
   der Stelle, über der die Maus steht (transform-origin wird per JS aus der
   Mausposition gesetzt, siehe modalMedia mousemove in main.js). */
.modal-media img.zoomed{transform:scale(3.3);cursor:zoom-out;}
@media(max-width:900px){
  /* Auf Touch-Geräten gibt es keinen Hover — Lupe bleibt hier aus. */
  .modal-media img.zoomed{transform:none;}
}
/* Gleicher Glitch-Übergang wie bei "Ganz gross" (bigview), jetzt beim
   Durchblättern (Pfeile/Pfeiltasten) im Werk-Modal wiederverwendet — nutzt
   dieselben Keyframes (bigviewPinkFlash / bigviewGlitchShift, siehe unten). */
.modal-media::after{
  content:'';position:absolute;inset:0;background:var(--pink);
  mix-blend-mode:screen;opacity:0;pointer-events:none;z-index:1;
}
.modal-media.switching::after{
  animation:bigviewPinkFlash .55s steps(1,end) 1;
}
.modal-media.switching img{
  animation:bigviewGlitchShift .55s steps(1,end) 1;
}
.modal-body{padding:44px 40px;display:flex;flex-direction:column;}
.modal-body .n{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:.85;}
.modal-body h3{font-size:1.9rem;margin-top:10px;line-height:1.2;color:#fff;}
.modal-body .price{font-size:1.15rem;margin-top:16px;color:#fff;opacity:.9;}
.modal-body .desc{margin-top:20px;color:#fff;opacity:.85;line-height:1.65;font-size:.94rem;}
.modal-body .desc .desc-tag{font-weight:700;letter-spacing:.02em;opacity:1;}
.modal-body .desc .desc-material{font-style:italic;opacity:.75;}
.modal-actions{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:10px;}
.btn-solid{
  background:#4c3cc9;color:#fff;text-align:center;padding:15px 20px;border-radius:999px;
  font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;transition:opacity .2s,background .2s;border:none;cursor:pointer;
  font-family:'Inter',sans-serif;
}
.btn-solid:hover{opacity:.88;background:#5b48e6;}
.btn-ghost{
  text-align:center;padding:14px 20px;border-radius:999px;font-size:.8rem;letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.4);color:#fff;
}
.modal-close{
  position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;
  background:var(--pink);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:1.1rem;z-index:2;box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.modal-close:hover{background:var(--pink-deep);}
/* Auf dem Handy sass das X genau unter dem fixen EN-Sprachbutton (der oben
   rechts über allem klebt) — beide Kreise überlagerten sich. Fix: X wandert
   auf dem Handy nach oben LINKS, dort ist nichts im Weg. Nur mobil, am
   Desktop bleibt alles wie bisher. */
@media(max-width:900px){
  .modal-close{ right:auto; left:16px; }
}

/* Pfeile im Werkbild, um innerhalb derselben Galerie (grosses oder kleines
   Kreuz) vor- und zurückzublättern, ohne das Modal zu schliessen. */
.modal-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  background:rgba(0,0,0,.28);color:#fff;border:1px solid rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:1.6rem;line-height:1;z-index:6;transition:background .2s,transform .2s;
  font-family:'Inter',sans-serif;
}
.modal-nav:hover{background:rgba(0,0,0,.5);}
.modal-prev{left:14px;}
.modal-next{right:14px;}
.modal-prev:hover{transform:translateY(-50%) translateX(-2px);}
.modal-next:hover{transform:translateY(-50%) translateX(2px);}
@media(max-width:760px){
  .modal{grid-template-columns:1fr;}
  .modal-media{min-height:240px;}
  .modal-nav{width:38px;height:38px;font-size:1.3rem;}
}

/* ---------- Tages-Kreuz-Karte ---------- */
.daycross-section{background:var(--pink);color:#fff;text-align:center;}
.daycross-section .section-head{margin-left:auto;margin-right:auto;text-align:center;max-width:560px;}
.daycross-section .section-head p{color:rgba(255,255,255,.85);}
.daycross-section .eyebrow{color:#fff;}

.daycross-form{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin:30px 0 10px;
}
.daycross-input{
  background:#fff;border:none;border-radius:999px;padding:13px 20px;
  font-size:.9rem;color:var(--pink-deep);font-family:'Inter',sans-serif;
  min-width:200px;
}
.daycross-form .btn-solid{padding:13px 26px;border:none;}

.daycross-result{
  max-width:640px;margin:36px auto 0;
  display:none;opacity:0;transition:opacity .5s ease;
}
.daycross-result.show{display:block;opacity:1;}
.daycross-card{
  background:#fff;border-radius:4px;overflow:hidden;text-align:left;
  display:grid;grid-template-columns:1fr 1.1fr;
}
.daycross-media{background:#fff;display:flex;align-items:center;justify-content:center;padding:24px;}
.daycross-media img{max-height:44vh;width:100%;object-fit:contain;}
.daycross-text{background:var(--pink-deep);color:#fff;padding:30px 28px;display:flex;flex-direction:column;justify-content:center;}
.daycross-text .eyebrow{color:#fff;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85;}
.daycross-text h3{font-size:1.4rem;margin-top:10px;margin-bottom:16px;}
.daycross-text p{color:rgba(255,255,255,.92);line-height:1.6;font-size:.95rem;}
@media(max-width:640px){
  .daycross-card{grid-template-columns:1fr;}
}

/* ---------- Grosse Bilder-Ansicht ---------- */
.bigview-section{background:#fff;color:var(--pink-deep);text-align:center;}
.bigview-section .section-head{margin-left:auto;margin-right:auto;text-align:center;max-width:600px;}
.bigview-section .section-head p{color:rgba(0,0,0,.6);}
.bigview-section .eyebrow{color:var(--pink);}

.bigview{max-width:1100px;margin:34px auto 0;position:relative;}
.bigview-stage{
  position:relative;background:var(--cream);border-radius:8px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  height:min(78vh,900px);min-height:420px;
  box-shadow:0 14px 40px rgba(232,36,138,.18);
  cursor:pointer;user-select:none;
}
.bigview-stage img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
}
.bigview-stage::after{
  content:'';position:absolute;inset:0;background:var(--pink);
  mix-blend-mode:screen;opacity:0;pointer-events:none;
}
.bigview-stage.switching::after{
  animation:bigviewPinkFlash .55s steps(1,end) 1;
}
.bigview-stage.switching img{
  animation:bigviewGlitchShift .55s steps(1,end) 1;
}
@keyframes bigviewPinkFlash{
  0%   { opacity:0; }
  8%   { opacity:.75; }
  22%  { opacity:.3; }
  36%  { opacity:.6; }
  55%  { opacity:.25; }
  75%  { opacity:.4; }
  100% { opacity:0; }
}
@keyframes bigviewGlitchShift{
  0%   { transform:translate(0,0) scale(1); filter:hue-rotate(0deg) saturate(1); clip-path:inset(0 0 0 0); }
  8%   { transform:translate(-10px,3px) scale(1.01); filter:hue-rotate(315deg) saturate(3); clip-path:inset(12% 0 52% 0); }
  18%  { transform:translate(8px,-4px) scale(1.02); filter:hue-rotate(330deg) saturate(2.6); clip-path:inset(55% 0 8% 0); }
  30%  { transform:translate(-6px,0) scale(1.01); filter:hue-rotate(305deg) saturate(2.2); clip-path:inset(30% 0 35% 0); }
  44%  { transform:translate(4px,3px) scale(1.02); filter:hue-rotate(320deg) saturate(1.8); clip-path:inset(0 0 65% 0); }
  60%  { transform:translate(-3px,-2px) scale(1.01); filter:hue-rotate(300deg); clip-path:inset(48% 0 10% 0); }
  78%  { transform:translate(2px,0) scale(1.005); filter:hue-rotate(0deg); clip-path:inset(0 0 0 0); }
  100% { transform:translate(0,0) scale(1); filter:none; clip-path:inset(0 0 0 0); }
}
.bigview-info{margin:18px 0 4px;}
.bigview-n{display:none;}
.bigview-title{
  font-family:'Playfair Display',serif;font-size:1.3rem;
  color:var(--pink-deep);min-height:1.4em;
}
.bigview-meta{
  margin-top:4px;font-size:.82rem;letter-spacing:.02em;color:rgba(0,0,0,.55);
  min-height:1.2em;
}
.bigview-meta .desc-tag{font-style:italic;}
.bigview-desc{display:none;}
.bigview-fullscreen-btn{
  display:inline-block;margin-top:10px;background:transparent;border:1px solid var(--pink);
  color:var(--pink-deep);padding:11px 22px;border-radius:999px;font-size:.78rem;letter-spacing:.05em;
  text-transform:uppercase;cursor:pointer;transition:background .2s;font-family:'Inter',sans-serif;
}
.bigview-fullscreen-btn:hover{background:rgba(232,36,138,.08);}

/* Vollbild-Modus: das ganze Bigview-Element geht per Fullscreen-API in den
   Vollbild-Modus — Bild füllt den Bildschirm wie ein Bildschirmschoner,
   Klick/Tap/Leertaste blättert weiter, automatischer Wechsel läuft normal
   weiter. */
.bigview:fullscreen{
  background:var(--pink);display:flex;flex-direction:row;align-items:stretch;justify-content:center;gap:0;
  max-width:none;margin:0;box-sizing:border-box;padding:clamp(16px,3vw,44px);width:100vw;height:100vh;
}
.bigview:fullscreen .bigview-stage{
  height:100%;width:auto;flex:1 1 auto;min-width:0;max-width:100%;border-radius:4px;box-shadow:none;background:var(--pink);
}
.bigview:fullscreen .bigview-stage::after{background:var(--pink-deep);}
/* Info-Panel rechts vom Bild — wie das Modal: eigener Kasten, immer lesbar,
   nicht mehr als Text-Overlay über dem Bild. */
.bigview:fullscreen .bigview-info{
  position:static;text-align:left;margin:0;flex:0 0 380px;max-width:380px;
  display:flex;flex-direction:column;justify-content:center;align-self:center;
  background:var(--pink-deep);color:#fff;padding:44px 38px;border-radius:4px;
  box-shadow:0 14px 40px rgba(0,0,0,.35);margin-left:clamp(16px,3vw,40px);
  max-height:100%;overflow:auto;
}
.bigview:fullscreen .bigview-n{
  display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:.85;
}
.bigview:fullscreen .bigview-title{
  color:#fff;text-shadow:none;font-size:1.7rem;margin-top:10px;line-height:1.2;
}
.bigview:fullscreen .bigview-meta{
  color:rgba(255,255,255,.9);text-shadow:none;margin-top:16px;font-size:1rem;
}
.bigview:fullscreen .bigview-desc{
  display:block;margin-top:22px;color:rgba(255,255,255,.85);line-height:1.65;font-size:.9rem;
}
.bigview:fullscreen .bigview-desc .desc-material{font-style:italic;opacity:.75;}
.bigview:fullscreen .bigview-fullscreen-btn{
  position:absolute;top:20px;right:20px;background:rgba(0,0,0,.4);border-color:rgba(255,255,255,.5);color:#fff;
}
.bigview:fullscreen .bigview-fullscreen-btn:hover{background:rgba(0,0,0,.6);}
@media(max-width:820px){
  .bigview:fullscreen{flex-direction:column;overflow:auto;}
  .bigview:fullscreen .bigview-stage{flex:0 0 auto;height:52vh;width:100%;}
  .bigview:fullscreen .bigview-info{
    flex:0 0 auto;max-width:100%;width:100%;margin:16px 0 0;align-self:stretch;max-height:none;
  }
}

/* ---------- Footer ---------- */
footer{
  border-top:1px solid rgba(255,255,255,.25);padding:48px clamp(20px,5vw,56px) 60px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;
  font-size:.84rem;color:#fff;background:var(--pink);max-width:var(--maxw);margin:0 auto;
}
footer a:hover{opacity:.8;}

/* ---------- Responsive nav ---------- */
@media(max-width:760px){
  nav.main-nav{display:none;}
}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* Shop noch nicht offen */
.btn-solid.is-soon{background:#ff3f9e;color:#fff;cursor:default;opacity:1;letter-spacing:.06em;}
.btn-solid.is-soon:hover{background:#ff3f9e;opacity:1;}