/* =============================================================================
   Bewegungs- und Rastersystem hinter allen Modulen des Hauses.
   (Wortmarke und Monogramm-Regel stehen zentral in zz-corporate.css, nicht hier.)

   Haltung: Bewegung ist Handwerk, kein Effekt. Eine Kurve, vier Dauern, wenige
   Mechanismen — konsequent angewandt wirkt das teuer. Viele verschiedene Effekte
   wirken billig. Deshalb ist hier alles zentral definiert; Module benutzen die
   Klassen, erfinden nie eigene Zeiten.
   ============================================================================= */

:root{
  /* EINE Kurve fuer alles, was sich bewegt (Ausklang, kein Zurueckfedern) */
  --e:cubic-bezier(.22,1,.36,1);
  --e-in:cubic-bezier(.55,0,.9,.4);
  /* Ruecklauf des Bildes: gerader Ausklang, damit die Flaeche schnell steht */
  --e-out:cubic-bezier(.33,1,.68,1);
  /* Vier Dauern. Mehr braucht niemand. */
  --t-xs:180ms;   /* Zustand am Bedienelement: Farbe, Unterstrich */
  --t-s:320ms;    /* kleine Flaechen: Chips, Zeilen, Panels */
  --t-m:560ms;    /* Ebenenwechsel: Schubladen, Overlays */
  --t-l:900ms;    /* grosse Flaechen: Bildwand, Kapitelwechsel */
  --t-img:1100ms; /* Bildbewegung — bewusst langsamer als alles andere */
  --t-in:1500ms;  /* Bild hinein: lang, man soll es kaum bemerken */
  --t-out:500ms;  /* Bild heraus: kurz, damit die Flaeche schnell ruhig wird */
  --stagger:70ms; /* Versatz zwischen Geschwistern */
}

/* ---------------------------------------------------------------- REVEAL
   Erscheinen beim Scrollen. Nur Deckkraft und ein kurzer Weg nach oben —
   kein Zoom, kein Drehen, kein Springen. Einmalig, nie beim Zurueckscrollen. */
[data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity var(--t-l) var(--e),transform var(--t-l) var(--e)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="mask"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);
  transition:clip-path var(--t-l) var(--e)}
[data-reveal="mask"].in{clip-path:inset(0 0 0 0)}
[data-reveal="rise"]{transform:translateY(28px)}
[data-reveal="fade"]{transform:none}
/* Gestaffeltes Erscheinen von Geschwistern */
[data-stagger]>*{opacity:0;transform:translateY(12px);
  transition:opacity var(--t-m) var(--e),transform var(--t-m) var(--e)}
[data-stagger].in>*{opacity:1;transform:none}
[data-stagger].in>*:nth-child(1){transition-delay:0ms}
[data-stagger].in>*:nth-child(2){transition-delay:calc(var(--stagger)*1)}
[data-stagger].in>*:nth-child(3){transition-delay:calc(var(--stagger)*2)}
[data-stagger].in>*:nth-child(4){transition-delay:calc(var(--stagger)*3)}
[data-stagger].in>*:nth-child(5){transition-delay:calc(var(--stagger)*4)}
[data-stagger].in>*:nth-child(6){transition-delay:calc(var(--stagger)*5)}
[data-stagger].in>*:nth-child(7){transition-delay:calc(var(--stagger)*6)}
[data-stagger].in>*:nth-child(8){transition-delay:calc(var(--stagger)*7)}

/* Zeilenweiser Auftritt grosser Ueberschriften: jede Zeile eigener Vorhang */
.line-mask{display:block;overflow:hidden}
.line-mask>span{display:block;transform:translateY(105%);
  transition:transform var(--t-l) var(--e)}
.in .line-mask>span,.line-mask.in>span{transform:none}
.line-mask:nth-child(2)>span{transition-delay:90ms}
.line-mask:nth-child(3)>span{transition-delay:180ms}

/* ----------------------------------------------------------------- HOVER
   Bilder bewegen sich langsam und wenig. Der Zoom ist so klein, dass man ihn
   eher spuert als sieht — genau das trennt teuer von billig. */
.hov{overflow:hidden;position:relative}
/* Asymmetrisch: langsam hinein, schnell heraus — so machen es die grossen
   Haeuser, und genau das trennt teuer von billig. Der Ruhezustand liegt
   minimal ueber 1, damit die Kante beim Skalieren nicht flimmert. */
.hov>img,.hov>.im{transform:scale(1.006);will-change:transform;
  transition:transform var(--t-out) var(--e-out)}
a:hover .hov>img,a:hover .hov>.im,.hov:hover>img,.hov:hover>.im{
  transform:scale(1.05);transition:transform var(--t-in) var(--e)}
/* Zweites Bild statt Zoom — der ruhigere Weg, wenn es ein Alternativmotiv gibt */
.hov-swap>.b{position:absolute;inset:0;opacity:0;transition:opacity var(--t-m) var(--e)}
a:hover .hov-swap>.b,.hov-swap:hover>.b{opacity:1}
/* Unterstrich, der aus der Mitte waechst */
.u-line{position:relative}
.u-line::after{content:"";position:absolute;left:0;right:0;bottom:-.25em;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:50% 50%;
  transition:transform var(--t-s) var(--e)}
a:hover .u-line::after,.u-line:hover::after{transform:scaleX(1)}
/* Zeile, die beim Zeigen leicht einrueckt */
.shift{transition:padding-left var(--t-s) var(--e)}
.shift:hover{padding-left:.7rem}
/* Flaeche, die sich beim Zeigen aufhellt statt zu wackeln */
.lift{transition:background var(--t-s) var(--e),color var(--t-s) var(--e)}

/* ------------------------------------------------------------ NAVIGATION
   Oeffnet von oben, der Inhalt darunter tritt einen Schritt zurueck.
   Zwei Bewegungen gleichzeitig, dieselbe Kurve, dieselbe Dauer. */
.pane{position:fixed;left:0;right:0;z-index:55;overflow:hidden;
  clip-path:inset(0 0 100% 0);transition:clip-path var(--t-m) var(--e)}
.pane.open{clip-path:inset(0 0 0 0)}
.pane-in{transform:translateY(-14px);transition:transform var(--t-m) var(--e)}
.pane.open .pane-in{transform:none}
body.pane-open .page-shift{transform:scale(.994);transition:transform var(--t-m) var(--e)}
.page-shift{transition:transform var(--t-m) var(--e);transform-origin:50% 0}
/* Verdunkelung */
.veilx{position:fixed;inset:0;z-index:50;background:rgba(22,19,15,.32);
  opacity:0;visibility:hidden;transition:opacity var(--t-m) var(--e),visibility 0s linear var(--t-m)}
.veilx.open{opacity:1;visibility:visible;transition:opacity var(--t-m) var(--e),visibility 0s}

/* ------------------------------------------------------- KOPF BEIM SCROLL
   Der Kopf schrumpft einmal und bleibt dann. Kein Ein- und Ausblenden bei
   jeder Scrollrichtung — das ist unruhig. */
.hdr-shrink{transition:padding var(--t-m) var(--e),background var(--t-m) var(--e)}

/* ------------------------------------------------------------- LAUFBAND
   Endlos laufende Zeile. Haelt an, wenn man darauf zeigt. */
.marquee{overflow:hidden;white-space:nowrap;display:flex;gap:0}
.marquee>span{display:inline-block;padding-right:2.5rem;animation:mq 34s linear infinite}
.marquee:hover>span{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-100%)}}

/* -------------------------------------------------------------- ZIEHBAR
   Bildstrecke, die man mit der Maus ziehen kann. */
.dragx{cursor:grab;user-select:none}
.dragx.grabbing{cursor:grabbing}
.dragx.grabbing *{pointer-events:none}

/* ------------------------------------------------------- SEITENWECHSEL
   Wo der Browser es kann, blendet er zwischen zwei Seiten ueber — sonst passiert
   schlicht nichts (kein Ersatz-Effekt, der dann anders aussieht). */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out var(--t-s) var(--e-in) both}
::view-transition-new(root){animation:vt-in var(--t-m) var(--e) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

/* ---------------------------------------------------------- RESPEKTVOLL
   Wer Bewegung abbestellt hat, bekommt keine. Ohne Ausnahme. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;
    transition-duration:1ms!important;scroll-behavior:auto!important}
  [data-reveal],[data-stagger]>*{opacity:1!important;transform:none!important;clip-path:none!important}
  .line-mask>span{transform:none!important}
  .marquee>span{animation:none}
}

/* =============================================================================
   RASTER-SYSTEM — die Breitenverhaeltnisse, aus denen alle Module gebaut sind.
   Ein Modul waehlt eine Aufteilung, nie eigene Prozentwerte.
   ============================================================================= */
.g{display:grid;gap:var(--gap,clamp(.8rem,1.6vw,1.4rem));align-items:start}
.g.tight{gap:0}                        /* randlos: Bilder beruehren sich */
.g.air{gap:clamp(1.6rem,3.4vw,3.2rem)}
.g.mid{align-items:center}
.g.base{align-items:end}

/* Zwei Flaechen */
.g-50-50{grid-template-columns:1fr 1fr}
.g-60-40{grid-template-columns:6fr 4fr}
.g-40-60{grid-template-columns:4fr 6fr}
.g-67-33{grid-template-columns:2fr 1fr}
.g-33-67{grid-template-columns:1fr 2fr}
.g-70-30{grid-template-columns:7fr 3fr}
.g-30-70{grid-template-columns:3fr 7fr}
.g-75-25{grid-template-columns:3fr 1fr}
.g-25-75{grid-template-columns:1fr 3fr}
.g-80-20{grid-template-columns:4fr 1fr}
/* Gleiche Flaechen */
.g-33{grid-template-columns:repeat(3,1fr)}
.g-25{grid-template-columns:repeat(4,1fr)}
.g-20{grid-template-columns:repeat(5,1fr)}
.g-16{grid-template-columns:repeat(6,1fr)}
/* Ungleiche Dreier */
.g-50-25-25{grid-template-columns:2fr 1fr 1fr}
.g-25-50-25{grid-template-columns:1fr 2fr 1fr}
.g-25-25-50{grid-template-columns:1fr 1fr 2fr}
/* Zwoelferraster fuer freie Platzierung */
.g-12{grid-template-columns:repeat(12,1fr)}
.c1{grid-column:span 1}.c2{grid-column:span 2}.c3{grid-column:span 3}
.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}
.c7{grid-column:span 7}.c8{grid-column:span 8}.c9{grid-column:span 9}
.c10{grid-column:span 10}.c11{grid-column:span 11}.c12{grid-column:span 12}
/* Vertikaler Versatz — die Spannung im Raster */
.off-s{margin-top:clamp(1.5rem,5vh,3.5rem)}
.off-m{margin-top:clamp(3rem,10vh,7rem)}
.off-l{margin-top:clamp(5rem,16vh,11rem)}

/* Bildformate — feste Auswahl, keine freien Werte je Instanz */
.r-1-1{aspect-ratio:1/1}.r-4-5{aspect-ratio:4/5}.r-3-4{aspect-ratio:3/4}
.r-2-3{aspect-ratio:2/3}.r-4-3{aspect-ratio:4/3}.r-3-2{aspect-ratio:3/2}
.r-16-9{aspect-ratio:16/9}.r-21-9{aspect-ratio:21/9}.r-9-16{aspect-ratio:9/16}
.r-full{height:100%}

/* Bildflaeche: immer randlos in ihrer Zelle, immer mit ruhigem Grund darunter */
.im{background:var(--surface) center/cover no-repeat;width:100%;display:block}
.im.tone{filter:grayscale(1);transition:filter var(--t-img) var(--e)}
a:hover .im.tone,.im.tone:hover{filter:grayscale(0)}

/* Mobiles Umbrechen: alle Zweispalter werden einspaltig, Dreier bleiben Dreier
   wenn sie randlos sind (Bildwand), sonst zwei. */
@media(max-width:900px){
  .g-50-50,.g-60-40,.g-40-60,.g-67-33,.g-33-67,.g-70-30,.g-30-70,
  .g-75-25,.g-25-75,.g-80-20,.g-50-25-25,.g-25-50-25,.g-25-25-50{grid-template-columns:1fr}
  .g-25,.g-20,.g-16{grid-template-columns:repeat(2,1fr)}
  .g-33:not(.tight){grid-template-columns:repeat(2,1fr)}
  .off-s,.off-m,.off-l{margin-top:0}
  [class*="c"].c1,[class*="c"].c2,[class*="c"].c3,[class*="c"].c4,
  [class*="c"].c5,[class*="c"].c6,[class*="c"].c7,[class*="c"].c8,
  [class*="c"].c9,[class*="c"].c10,[class*="c"].c11{grid-column:1/-1}
}
@media(max-width:560px){
  .g-33.tight,.g-20,.g-16{grid-template-columns:1fr}
  .g-25{grid-template-columns:repeat(2,1fr)}
}