/* =====================================================
   Stoffwechsel & SHE – Entwurf
   Leitidee: Stoffwechsel = frech (dunkel, laut, eng)
             SHE         = brav  (hell, ruhig, weit)
===================================================== */

:root{
  /* Stoffwechsel – warm, dunkel, Holz/Leder/Messing */
  --sw-bg:      #17120f;
  --sw-bg-2:    #221a15;
  --sw-text:    #f4efe9;
  --sw-muted:   rgba(244,239,233,.72);
  --sw-accent:  #d08a45;

  /* SHE – hell, kühl, viel Luft */
  --she-bg:     #f6f3ef;
  --she-bg-2:   #ebe5dd;
  --she-text:   #2b2724;
  --she-muted:  rgba(43,39,36,.68);
  --she-accent: #b2564c;

  --maxw: 1240px;
  --pad:  clamp(20px, 5vw, 64px);

  --f-loud:  "Anton", "Arial Narrow", sans-serif;
  --f-soft:  "Cormorant Garamond", Georgia, serif;
  --f-body:  "Archivo", system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  color:var(--she-text);
  background:var(--she-bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.08}
p{margin:0 0 1em}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
/* Die Startposition der Scroll-Animationen schiebt Elemente bis zu 40px zur
   Seite. Hier abgeschnitten – am <html> oder <body> wird die Angabe auf den
   Viewport uebertragen und greift dann nicht. */
.sec,.store{overflow-x:clip}
.sec{padding:clamp(70px,9vw,130px) 0}

.eyebrow{
  display:block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;margin-bottom:18px;color:var(--she-accent);
}
.sec-head{max-width:720px;margin-bottom:clamp(38px,5vw,64px)}
.sec-head h2{font-family:var(--f-soft);font-weight:300;font-size:clamp(2rem,4.4vw,3.4rem)}
.sec-sub{margin-top:16px;color:var(--she-muted);font-size:1.05rem}

.btn{
  display:inline-block;padding:14px 30px;border-radius:2px;text-decoration:none;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  border:1px solid transparent;cursor:pointer;transition:.22s;
}
.btn-sw{background:var(--sw-accent);color:#17120f;border-color:var(--sw-accent)}
.btn-sw:hover{background:transparent;color:var(--sw-accent)}
.btn-she{background:transparent;color:var(--she-accent);border-color:var(--she-accent)}
.btn-she:hover{background:var(--she-accent);color:#fff}
.btn-light{background:#fff;color:#17120f;border-color:#fff}
.btn-light:hover{background:transparent;color:#fff}

/* =====================================================
   HEADER
===================================================== */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);height:68px;
  background:rgba(23,18,15,.0);
  transition:background .3s, box-shadow .3s;
  mix-blend-mode:difference;
}
.site-header.solid{
  background:var(--sw-bg);mix-blend-mode:normal;
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}
.brand{text-decoration:none;display:flex;align-items:baseline;gap:8px;color:#fff}
.brand-sw{font-family:var(--f-loud);font-size:19px;letter-spacing:.06em}
.brand-amp{opacity:.5;font-size:13px}
.brand-she{font-family:var(--f-soft);font-style:italic;font-size:21px}
.site-nav{display:flex;gap:26px}
.site-nav a{
  color:#fff;text-decoration:none;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:500;opacity:.85;transition:.2s;
}
.site-nav a:hover{opacity:1}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px;gap:5px;flex-direction:column}
.nav-toggle span{display:block;width:24px;height:2px;background:#fff}

/* =====================================================
   1 · HERO – zwei Panels, je ein vertikaler Swiper
===================================================== */
.hero{
  position:relative;display:flex;height:100vh;min-height:620px;overflow:hidden;
}
@supports (height:100svh){.hero{height:100svh}}

.hero-panel{
  position:relative;flex:1 1 50%;overflow:hidden;
  transition:flex-grow .55s cubic-bezier(.22,.61,.36,1);
}
/* frech vs. brav: die Seite, auf der die Maus liegt, bekommt mehr Raum */
@media(hover:hover) and (min-width:900px){
  .hero:hover .hero-panel{flex-grow:.86}
  .hero:hover .hero-panel:hover{flex-grow:1.28}
}

.hero-swiper{height:100%}
.hero-slide{position:relative;overflow:hidden}
.hero-shot{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.hero-slide::after{content:"";position:absolute;inset:0}

.hero-sw .hero-slide::after{
  background:linear-gradient(180deg,rgba(23,18,15,.62) 0%,rgba(23,18,15,.30) 20%,rgba(23,18,15,.80) 44%,rgba(23,18,15,.93) 66%,rgba(23,18,15,.97) 100%);
}
.hero-she .hero-slide::after{
  background:linear-gradient(180deg,rgba(246,243,239,.50) 0%,rgba(246,243,239,.26) 20%,rgba(246,243,239,.86) 44%,rgba(246,243,239,.96) 66%,rgba(246,243,239,.99) 100%);
}

.hero-panel{
  /* Innen = Richtung Bildmitte, Aussen = Seite mit den Bedienelementen.
     Die Pfeile stehen bis ~64px von der Aussenkante – ohne reservierte Spalte
     laeuft die Kicker-Zeile mitten durch sie hindurch. */
  --gutter-innen: clamp(26px,3.4vw,54px);
  --gutter-aussen: clamp(84px,6vw,112px);
}
.hero-inner{
  position:absolute;inset:auto 0 0 0;z-index:2;
  /* Der Abstand nach unten muss das Logo freihalten: es sitzt bei bottom:34px
     und wird bis 112px hoch. Sonst laeuft der CTA in den Schriftzug. */
  padding-bottom:clamp(132px, calc(6.2vw + 80px), 192px);
}
.hero-sw  .hero-inner{padding-left:var(--gutter-aussen);padding-right:var(--gutter-innen)}
.hero-she .hero-inner{padding-right:var(--gutter-aussen);padding-left:var(--gutter-innen)}
.hero-kicker{
  display:block;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;
  font-weight:600;margin-bottom:14px;
}
.hero-title{margin-bottom:16px}
.hero-text{max-width:38ch;margin-bottom:24px;font-size:1rem}
.hero-cta{
  display:inline-block;text-decoration:none;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;padding-bottom:5px;
}

/* — Stoffwechsel: laut — */
.hero-sw{background:var(--sw-bg);color:var(--sw-text)}
.hero-sw .hero-kicker{color:var(--sw-accent)}
.hero-sw .hero-title{
  font-family:var(--f-loud);font-weight:400;
  font-size:clamp(2.3rem,4.6vw,4.2rem);
  letter-spacing:.01em;text-transform:uppercase;
}
.hero-sw .hero-text{color:var(--sw-muted)}
.hero-sw .hero-cta{color:var(--sw-accent);border-bottom:2px solid var(--sw-accent)}

/* — SHE: leise — */
.hero-she{background:var(--she-bg);color:var(--she-text)}
/* Panel liegt rechts -> Text an die Aussenkante, spiegelt das linke Panel.
   max-width am Absatz braucht margin-left:auto, sonst bliebe die Box links.
   Unter 900px zurueckgesetzt (siehe Responsive). */
.hero-she .hero-inner{text-align:right}
.hero-she .hero-text{margin-left:auto}
.hero-she .hero-kicker{color:var(--she-accent)}
.hero-she .hero-title{
  font-family:var(--f-soft);font-weight:300;
  font-size:clamp(2.2rem,4.2vw,3.8rem);letter-spacing:.005em;
}
.hero-she .hero-text{color:var(--she-muted)}
.hero-she .hero-cta{color:var(--she-accent);border-bottom:1px solid var(--she-accent)}

/* Navigation je Panel */
.hero-nav{
  position:absolute;z-index:5;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
/* Bedienelemente an die Aussenkanten, damit die Mitte ruhig bleibt */
.hero-sw  .hero-nav{left:clamp(18px,2vw,30px)}
.hero-she .hero-nav{right:clamp(18px,2vw,30px)}
.hero-btn{
  /* flex:none – als Flex-Element in der Zeile wuerden die Buttons sonst
     schrumpfen (gemessen 28x34) und aus dem Kreis ein Oval machen. */
  flex:none;
  width:34px;height:34px;border-radius:50%;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:14px;
  transition:.2s;line-height:1;
}
.hero-sw .hero-btn{border:1px solid rgba(244,239,233,.3);color:rgba(244,239,233,.75)}
.hero-sw .hero-btn:hover{border-color:var(--sw-accent);color:var(--sw-accent)}
.hero-she .hero-btn{border:1px solid rgba(43,39,36,.25);color:rgba(43,39,36,.65)}
.hero-she .hero-btn:hover{border-color:var(--she-accent);color:var(--she-accent)}

.hero-dots{display:flex;flex-direction:column;gap:7px}
.hero-dots .swiper-pagination-bullet{
  flex:none;
  width:7px;height:7px;margin:0!important;opacity:1;transition:.25s;
}
.hero-sw .swiper-pagination-bullet{background:rgba(244,239,233,.32)}
.hero-sw .swiper-pagination-bullet-active{background:var(--sw-accent);height:20px;border-radius:4px}
.hero-she .swiper-pagination-bullet{background:rgba(43,39,36,.25)}
.hero-she .swiper-pagination-bullet-active{background:var(--she-accent);height:20px;border-radius:4px}

/* Logo unten im Panel */
.hero-label{position:absolute;z-index:5;bottom:34px}
/* Logos als Buchstuetzen aussen – die Scroll-Pille sitzt mittig dazwischen */
.hero-sw  .hero-label{left:var(--gutter-aussen)}
.hero-she .hero-label{right:var(--gutter-aussen)}
.hero-label img{width:auto;object-fit:contain}
/* Die Wortmarke ist 2,9:1 breit, das SHE-Signet nur 1,3:1 – SHE braucht rund
   die 1,7-fache Hoehe, damit beide optisch gleich schwer wirken. */
.hero-sw .hero-label img{height:clamp(38px,3.6vw,66px);filter:invert(1)}
.hero-she .hero-label img{height:clamp(64px,6.2vw,112px)}

.hero-scroll{
  position:absolute;z-index:7;left:50%;bottom:22px;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;text-decoration:none;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  background:#17120f;color:#f4efe9;padding:11px 22px;border-radius:40px;
  white-space:nowrap;
}
.hero-scroll span{animation:bob 1.9s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* =====================================================
   2 · WIR
===================================================== */
.sec-wir{background:var(--she-bg)}
.wir-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,80px);align-items:center}
.wir-text h2{font-family:var(--f-soft);font-weight:300;font-size:clamp(2rem,4vw,3.2rem);margin-bottom:22px}
.lead{font-size:1.2rem;line-height:1.55}
.wir-text p:not(.lead){color:var(--she-muted)}
.wir-facts{display:flex;gap:clamp(22px,4vw,52px);margin-top:34px;padding-top:28px;border-top:1px solid rgba(43,39,36,.14)}
.wir-facts div{display:flex;flex-direction:column}
.wir-facts strong{font-family:var(--f-loud);font-size:2.3rem;line-height:1;color:var(--she-accent)}
.wir-facts span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-top:8px;color:var(--she-muted)}
.wir-img{margin:0}
.wir-img img{width:100%;height:clamp(320px,52vh,540px);object-fit:cover}

/* =====================================================
   3 · DIE GESCHÄFTE
===================================================== */
.sec-stores{background:var(--she-bg-2);padding-bottom:0}
.store{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:clamp(420px,62vh,620px)}
.store--sw{background:var(--sw-bg);color:var(--sw-text)}
.store--she{background:var(--she-bg)}
.store--she .store-media{order:2}

.store-media{position:relative;overflow:hidden}
.store-swiper{height:100%}
.store-swiper .swiper-slide{height:100%}
.store-swiper img{width:100%;height:100%;object-fit:cover;min-height:300px}
.store-nav{position:absolute;z-index:5;right:18px;bottom:18px;display:flex;gap:8px}
.store-btn{
  flex:none;
  width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:15px;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.35);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:.2s;
}
.store-btn:hover{background:rgba(0,0,0,.72)}

/* min-width:0 – Vorsorge: ein Grid-Element kann sonst nicht unter seine
   Min-Content-Breite schrumpfen und schiebt die Spalte auf. */
.store-body{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:clamp(34px,5vw,74px)}
.store-media{min-width:0}
/* Shoplogo ueber der Textspalte – macht ohne Lesen klar, um welches Haus es geht */
.store-logo{width:auto;align-self:flex-start;margin-bottom:clamp(20px,2.4vw,30px)}
.store--sw  .store-logo{height:38px;filter:invert(1)}   /* schwarze Wortmarke auf dunklem Grund */
.store--she .store-logo{height:56px}                     /* Signet bleibt schwarz/rot */

.store-adr{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;margin-bottom:16px}
.store--sw .store-adr{color:var(--sw-accent)}
.store--she .store-adr{color:var(--she-accent)}
.store--sw h3{font-family:var(--f-loud);font-weight:400;text-transform:uppercase;font-size:clamp(1.7rem,3vw,2.7rem);margin-bottom:20px}
.store--she h3{font-family:var(--f-soft);font-weight:300;font-size:clamp(1.7rem,3vw,2.7rem);margin-bottom:20px}
.store--sw p{color:var(--sw-muted)}
.store--she p{color:var(--she-muted)}
/* abgesetzter Nebensatz – Haltung, keine Aufzaehlung */
.store-note{font-size:15px;font-style:italic;margin-bottom:18px}
.store--sw .store-note{color:var(--sw-accent)}
.store--she .store-note{color:var(--she-accent)}

.store-brands{font-size:13.5px;letter-spacing:.03em;padding-top:16px;margin-top:6px}
.store--sw .store-brands{border-top:1px solid rgba(244,239,233,.16)}
.store--she .store-brands{border-top:1px solid rgba(43,39,36,.14)}
.store-body .btn{align-self:flex-start;margin-top:16px}

/* Stoffwechsel-Block: Bild links, Text rechts – deshalb rechtsbuendig.
   Damit steht der Text an der Aussenkante und spiegelt den SHE-Block.
   Wird unter 900px wieder zurueckgesetzt (siehe Responsive). */
/* kein align-items:flex-end – die Absaetze wuerden auf Inhaltsbreite schrumpfen
   und die Trennlinie ueber den Marken liefe nicht mehr durch.
   text-align reicht; nur Logo und Button brauchen die Achsen-Ausrichtung. */
.store--sw .store-body{text-align:right}
.store--sw .store-logo{align-self:flex-end}
.store--sw .store-body .btn{align-self:flex-end}

/* =====================================================
   4 · MARKEN
===================================================== */
.sec-marken{background:var(--she-bg);overflow:hidden}
.marken-band{overflow:hidden;padding:12px 0 6px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marken-track{display:flex;gap:clamp(38px,6vw,86px);align-items:center;width:max-content;animation:marquee 34s linear infinite}
.marken-track img{height:40px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.62;transition:.25s}
.marken-track img:hover{filter:none;opacity:1}
.marken-band:hover .marken-track{animation-play-state:paused}

/* NOTBEHELF – bitte entfernen, sobald die schwarze MAC-Standardversion vorliegt.
   Die gelieferte Datei hat hellgraue Schrift (RGB 199) und erreicht auf dem
   Cremegrund nur 1,3:1 Kontrast (WCAG verlangt 3:1 für grafische Objekte).
   Die Datei selbst bleibt unveraendert, abgedunkelt wird nur die Darstellung. */
.marken-track img[alt="MAC"]{filter:grayscale(1) brightness(.30)}
.marken-track img[alt="MAC"]:hover{filter:brightness(.30)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Markenliste nach Geschaeft getrennt – die Zuordnung ist bestaetigt */
.marken-split{
  display:grid;grid-template-columns:2.6fr 1fr;gap:clamp(28px,4vw,64px);
  margin-top:clamp(38px,4.5vw,60px);
}
.marken-spalte{padding-top:20px;border-top:2px solid}
.marken-spalte--sw{border-color:var(--sw-accent)}
.marken-spalte--she{border-color:var(--she-accent)}
.marken-spalte h3{font-size:1.1rem;letter-spacing:.02em;margin-bottom:6px}
.marken-spalte--sw h3{font-family:var(--f-loud);font-weight:400;text-transform:uppercase;letter-spacing:.06em}
.marken-spalte--she h3{font-family:var(--f-soft);font-weight:400;font-size:1.35rem}
.marken-adr{
  display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;margin-bottom:14px;
}
.marken-spalte--sw .marken-adr{color:var(--sw-accent)}
.marken-spalte--she .marken-adr{color:var(--she-accent)}
.marken-spalte p{margin:0;font-size:14.5px;line-height:1.8;color:var(--she-muted)}

/* =====================================================
   5 · TEAM
===================================================== */
.sec-team{background:var(--she-bg-2)}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px)}
.team-card{margin:0;text-align:center}
.team-card img{
  width:100%;max-width:220px;margin:0 auto 20px;border-radius:50%;
  background:#fff;
}
.team-card h3{font-family:var(--f-soft);font-weight:400;font-size:1.55rem;margin-bottom:10px}
.team-card p{font-size:14.5px;line-height:1.6;color:var(--she-muted);font-style:italic}

/* =====================================================
   6 · PRIVATE SHOPPING
===================================================== */
.sec-private{position:relative;color:#fff;text-align:center;overflow:hidden}
.private-bg{position:absolute;inset:0;background-size:cover;background-position:center 30%}
.private-bg::after{content:"";position:absolute;inset:0;background:rgba(23,18,15,.72)}
.private-inner{position:relative;z-index:2;max-width:760px;text-align:center}
.private-inner .eyebrow{color:var(--sw-accent)}
.sec-private h2{font-family:var(--f-loud);font-weight:400;text-transform:uppercase;font-size:clamp(1.9rem,4vw,3.2rem);margin-bottom:22px}
.sec-private p{color:rgba(255,255,255,.82);font-size:1.08rem;margin-bottom:30px}

/* =====================================================
   7 · KONTAKT
===================================================== */
.sec-kontakt{background:var(--she-bg)}
.kontakt-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,5vw,86px)}
.kontakt-form h2{font-family:var(--f-soft);font-weight:300;font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:28px}
.kontakt-form label{display:block;margin-bottom:16px;font-size:13px;letter-spacing:.06em;color:var(--she-muted)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kontakt-form input[type=text],
.kontakt-form input[type=email],
.kontakt-form textarea{
  width:100%;margin-top:7px;padding:12px 14px;font:inherit;font-size:15px;
  border:1px solid rgba(43,39,36,.2);background:#fff;color:var(--she-text);border-radius:2px;
}
.kontakt-form input:focus,.kontakt-form textarea:focus{outline:2px solid var(--she-accent);outline-offset:-1px}
.check{display:flex!important;align-items:flex-start;gap:10px;margin:20px 0 24px}
.check input{margin-top:3px}
.form-ok{margin-top:18px;color:var(--she-accent);font-weight:600}

.kontakt-info{display:flex;flex-direction:column;gap:32px}
.info-block h3{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--she-accent);margin-bottom:14px}
.info-block p{margin-bottom:12px}
.info-block a{text-decoration:none;border-bottom:1px solid rgba(43,39,36,.25)}
.oeff{border-collapse:collapse;width:100%}
.oeff td{padding:7px 0;border-bottom:1px solid rgba(43,39,36,.1);font-size:15px}
.oeff td:first-child{width:90px;color:var(--she-muted)}

/* =====================================================
   FOOTER
===================================================== */
.site-footer{background:var(--sw-bg);color:var(--sw-muted);padding:clamp(52px,6vw,80px) 0 26px;font-size:14.5px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.foot-brand{display:block;margin-bottom:14px;color:var(--sw-text);font-size:17px}
.foot-brand b{font-family:var(--f-loud);font-weight:400;letter-spacing:.04em}
.foot-brand i{font-family:var(--f-soft);font-size:20px}
.site-footer h4{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sw-accent);margin-bottom:12px}
.site-footer a{text-decoration:none;border-bottom:1px solid rgba(244,239,233,.2)}
.site-footer a:hover{color:var(--sw-accent)}
.foot-bottom{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:46px;padding-top:22px;border-top:1px solid rgba(244,239,233,.12);
  font-size:12.5px;opacity:.7;
}

/* =====================================================
   HERO-CAPTIONS
   Rein ueber CSS: Swiper setzt bei jedem Wechsel die Klasse
   `swiper-slide-active` um, dadurch laeuft die Staffelung von
   selbst erneut – auch beim Zurueckwischen.
   Der Versatz ist kleiner als bei den Sektionen, weil die
   Bewegung hier zusaetzlich zum Slidewechsel passiert.
===================================================== */
.js .hero-slide .hero-kicker,
.js .hero-slide .hero-title,
.js .hero-slide .hero-text,
.js .hero-slide .hero-cta{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),
             transform .62s cubic-bezier(.22,.61,.36,1);
}
.js .hero-slide.captions-an .hero-kicker,
.js .hero-slide.captions-an .hero-title,
.js .hero-slide.captions-an .hero-text,
.js .hero-slide.captions-an .hero-cta{opacity:1;transform:none}

/* Die Verzoegerungen zaehlen ab dem Moment, in dem der Slide steht –
   `captions-an` wird erst bei slideChangeTransitionEnd gesetzt. */
.js .hero-slide.captions-an .hero-kicker{transition-delay:.06s}
.js .hero-slide.captions-an .hero-title {transition-delay:.15s}
.js .hero-slide.captions-an .hero-text  {transition-delay:.26s}
.js .hero-slide.captions-an .hero-cta   {transition-delay:.35s}

/* Stoffwechsel wieder knapper und schneller als SHE */
.js .hero-sw .hero-slide .hero-kicker,
.js .hero-sw .hero-slide .hero-title,
.js .hero-sw .hero-slide .hero-text,
.js .hero-sw .hero-slide .hero-cta{
  transform:translateY(15px);
  transition-duration:.44s;
  transition-timing-function:cubic-bezier(.16,.84,.44,1);
}
.js .hero-sw .hero-slide.captions-an .hero-kicker{transition-delay:.04s}
.js .hero-sw .hero-slide.captions-an .hero-title {transition-delay:.11s}
.js .hero-sw .hero-slide.captions-an .hero-text  {transition-delay:.19s}
.js .hero-sw .hero-slide.captions-an .hero-cta   {transition-delay:.26s}

/* =====================================================
   SCROLL-ANIMATIONEN
   Startzustand haengt an `.js` – ohne JavaScript ist alles
   sofort sichtbar, und es flackert nichts, weil die Klasse
   schon im <head> gesetzt wird.
   Die Klasse `.sichtbar` wird beim Verlassen wieder entfernt,
   dadurch laeuft die Bewegung beim Zurueckscrollen erneut.
===================================================== */
.js [data-animate]{
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),
             transform .62s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--verzoegerung, 0ms);
  /* kein will-change: opacity und transform werden ohnehin composited,
     19 dauerhaft befoerderte Ebenen kosten nur Speicher. */
}

/* Der Startzustand haengt an :not(.sichtbar) statt an einer eigenen
   Sichtbar-Regel. Sonst haetten die Varianten unten dieselbe Spezifitaet
   wie `.sichtbar`, stuenden spaeter im Stylesheet und wuerden gewinnen –
   die Elemente kaemen nie auf transform:none zurueck. */
.js [data-animate]:not(.sichtbar){opacity:0}
.js [data-animate=""]:not(.sichtbar),
.js [data-animate="hoch"]:not(.sichtbar)  {transform:translateY(34px)}
.js [data-animate="links"]:not(.sichtbar) {transform:translateX(-40px)}
.js [data-animate="rechts"]:not(.sichtbar){transform:translateX(40px)}

/* Stoffwechsel ist der frechere Laden – hier kommt es schneller und knapper.
   SHE bleibt beim ruhigeren Grundtempo. */
.js .store--sw [data-animate]{
  transition-duration:.34s;
  transition-timing-function:cubic-bezier(.16,.84,.44,1);
}
.js .store--sw [data-animate="links"]:not(.sichtbar) {transform:translateX(-26px)}
.js .store--sw [data-animate="rechts"]:not(.sichtbar){transform:translateX(26px)}

/* Team-Karten nacheinander */
.js .team-card:nth-child(1){--verzoegerung:0ms}
.js .team-card:nth-child(2){--verzoegerung:90ms}
.js .team-card:nth-child(3){--verzoegerung:180ms}
.js .team-card:nth-child(4){--verzoegerung:270ms}
/* Markenspalten nacheinander */
.js .marken-spalte--sw {--verzoegerung:0ms}
.js .marken-spalte--she{--verzoegerung:140ms}

/* =====================================================
   RESPONSIVE
===================================================== */
@media(max-width:1024px){
  .team-grid{grid-template-columns:repeat(2,1fr);gap:40px}
  .footer-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:899px){
  .site-header{mix-blend-mode:normal;background:var(--sw-bg)}
  .nav-toggle{display:flex;z-index:62;position:relative}

  /* Menue als Vollflaeche unter dem Header */
  .site-nav{
    display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
    position:fixed;inset:68px 0 0 0;z-index:58;
    gap:2px;padding:0 var(--pad);
    background:var(--sw-bg);
    opacity:0;visibility:hidden;transform:translateY(-12px);
    transition:opacity .28s ease, transform .28s ease, visibility 0s .28s;
  }
  .site-nav a{
    font-family:var(--f-loud);font-size:clamp(1.6rem,7vw,2.4rem);
    letter-spacing:.02em;padding:10px 0;opacity:1;
  }
  body.menue-offen{overflow:hidden}
  body.menue-offen .site-nav{
    opacity:1;visibility:visible;transform:none;transition-delay:0s;
  }
  /* Burger wird zum Kreuz */
  .nav-toggle span{transition:transform .28s ease, opacity .18s ease}
  body.menue-offen .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.menue-offen .nav-toggle span:nth-child(2){opacity:0}
  body.menue-offen .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* Hero: Panels untereinander, Swiper wischt horizontal */
  .hero{flex-direction:column;height:auto;min-height:0}
  .hero-panel{flex:none;height:78vh;min-height:480px}
  .hero-panel:first-child{margin-top:68px}
  .hero-scroll{display:none}
  /* mobil sitzen die Pfeile unten rechts, keine seitliche Spalte noetig */
  .hero-inner,
  .hero-sw .hero-inner,
  .hero-she .hero-inner{
    padding-left:clamp(26px,3.4vw,54px);
    padding-right:clamp(26px,3.4vw,54px);
    padding-bottom:104px;
  }
  /* gestapelt liest sich beides linksbuendig besser */
  .hero-she .hero-inner{text-align:left}
  .hero-she .hero-text{margin-left:0}

  /* Bedienelemente unten rechts, Logo unten links – in BEIDEN Panels gleich,
     sonst ueberlagern sich Logo und Pfeile (Desktop-Regeln zuruecksetzen) */
  .hero-nav,
  .hero-sw .hero-nav,
  .hero-she .hero-nav{
    top:auto;bottom:20px;left:auto;right:18px;
    transform:none;flex-direction:row;gap:10px;
  }
  .hero-label,
  .hero-sw .hero-label,
  .hero-she .hero-label{left:clamp(26px,3.4vw,54px);right:auto;bottom:22px}
  .hero-sw .hero-label img{height:24px}
  .hero-she .hero-label img{height:40px}

  .hero-dots{flex-direction:row}
  .hero-sw .swiper-pagination-bullet-active,
  .hero-she .swiper-pagination-bullet-active{height:7px;width:20px;border-radius:4px}

  .wir-grid,.kontakt-grid{grid-template-columns:1fr}
  .wir-img{order:-1}
  .store{grid-template-columns:1fr}
  .store--sw .store-logo{height:30px}
  .store--she .store-logo{height:46px}
  /* gestapelt liest sich alles linksbuendig besser */
  .store--sw .store-body{text-align:left}
  .store--sw .store-logo,
  .store--sw .store-body .btn{align-self:flex-start}
  .store--she .store-media{order:0}
  .store-media{height:52vh;min-height:300px}
}

@media(max-width:560px){
  .marken-split{grid-template-columns:1fr;gap:30px}
  .team-grid{grid-template-columns:1fr;gap:44px}
  .footer-grid{grid-template-columns:1fr;gap:26px}
  .field-row{grid-template-columns:1fr}
  .wir-facts{flex-wrap:wrap;gap:24px}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .marken-track{animation:none}
  /* nichts einblenden lassen – sofort da */
  .js [data-animate]:not(.sichtbar){opacity:1!important;transform:none!important}
  .js .hero-slide .hero-kicker,
  .js .hero-slide .hero-title,
  .js .hero-slide .hero-text,
  .js .hero-slide .hero-cta{opacity:1!important;transform:none!important}
}