/* ═══════════════════════════════════════════════════════════════════
   EDELSCHICHT — liegt über der bestehenden Gestaltung und fasst sie
   nicht an. Sie tut drei Dinge: Typografie ordnen, Bildern Raum geben,
   Bewegung dosieren. Keine fremden Server, keine Bibliothek.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · Typografie ────────────────────────────────────────────────
   Grosse Schrift braucht engere Laufweite, kleine Schrift mehr. Das
   macht den Unterschied zwischen „gross gesetzt" und „gut gesetzt". */
h1,h2,.big,.quote,.hero-claim{
  letter-spacing:-.035em;
  text-wrap:balance;
  font-kerning:normal;
  font-variant-ligatures:common-ligatures;
}
h1{letter-spacing:-.05em}
p,li{text-wrap:pretty;hanging-punctuation:first last}
.kicker,.eyebrow,.num,.pill,.result small{font-feature-settings:"case" 1}
input,.result strong,.meter-row span,td,th{font-variant-numeric:tabular-nums}

/* ── 2 · Bewegung ──────────────────────────────────────────────────
   Ein leises Aufsteigen beim Erscheinen. Wer im Geraet Bewegung
   reduziert hat, sieht alles sofort und ohne Uebergang. */
.auf{opacity:0;transform:translateY(22px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.auf.da{opacity:1;transform:none}
.auf.v1{transition-delay:.09s} .auf.v2{transition-delay:.18s} .auf.v3{transition-delay:.27s}
@media(prefers-reduced-motion:reduce){
  .auf{opacity:1;transform:none;transition:none}
}

/* ── 3 · Bildbuehne ────────────────────────────────────────────────
   Die Plakate sind das Teuerste an dieser Seite. Sie bekommen Rand,
   Ruhe und eine Bildunterschrift statt einer Bildschriftzeile. */
.buehne{padding:clamp(64px,9vw,140px) clamp(22px,6vw,80px)}
.buehne-kopf{display:flex;align-items:baseline;justify-content:space-between;
  gap:24px;border-bottom:1px solid currentColor;padding-bottom:16px;margin-bottom:clamp(26px,4vw,54px);opacity:.99}
.buehne-kopf .zahl{font-size:var(--s-mini);letter-spacing:.24em;opacity:.55}
.lookbook{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px)}
.lb{margin:0;position:relative;overflow:hidden}
.lb img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  /* height:auto ist Pflicht: das height-Attribut im HTML setzt sonst eine feste
     Hoehe und aspect-ratio greift gar nicht. */
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.lb:hover img{transform:scale(1.03)}
.lb figcaption{display:flex;justify-content:space-between;gap:12px;
  margin-top:12px;font-size:var(--s-mini);letter-spacing:.18em;text-transform:uppercase;opacity:.72}
@media(max-width:820px){.lookbook{grid-template-columns:1fr;gap:34px}}

/* ── 4 · Ruhiger Moment: eine Nahaufnahme über die ganze Breite ──── */
.detail{position:relative;min-height:min(88svh,760px);display:grid;place-items:center;
  text-align:center;color:#fff;overflow:hidden}
.detail-bild{position:absolute;inset:0;background-position:center;background-size:cover;
  transform:scale(1.04)}
.detail:after{content:'';position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 50%,rgba(0,0,0,.15) 0%,rgba(0,0,0,.72) 100%)}
.detail-text{position:relative;z-index:2;padding:40px clamp(22px,7vw,90px);max-width:900px}
.detail-text p{font-size:var(--s-gross);line-height:1.15;margin:0}
.detail-text .kicker,.detail-text .eyebrow{margin-bottom:18px;display:block}

/* ── 5 · Schaltflaechen: Fuellung steigt von unten, kein Ruckeln ─── */
.button,.btn{position:relative;overflow:hidden;isolation:isolate;
  transition:color .35s ease,border-color .35s ease}
.button:before,.btn:before{content:'';position:absolute;inset:0;z-index:-1;
  background:currentColor;opacity:.001;transform:translateY(100%);
  transition:transform .42s cubic-bezier(.2,.7,.2,1)}
.button:hover:before,.btn:hover:before{transform:translateY(0);opacity:.12}
.button:hover{transform:none}

/* ── 6 · Haarlinien und Atem ───────────────────────────────────────
   Abstand ist das billigste Luxusmerkmal, das es gibt. */
.section,.buehne{position:relative}
.linie{height:1px;background:currentColor;opacity:.16;margin:0}

/* ── Bilder nie zwingen ────────────────────────────────────────────
   Die Motive haben unterschiedliche Formate: quadratisch, hochkant,
   3:4. Ein festes Seitenverhaeltnis schneidet ihnen entweder Schrift
   ab oder zieht sie in die Laenge. Sie behalten deshalb ihr eigenes
   Format — die Spalte richtet sich nach dem Bild, nicht umgekehrt. */
/* `aspect-ratio:auto` verwarf auch das Verhaeltnis aus den width/height-
   Attributen. Ein noch nicht geladenes Bild hatte damit Hoehe 0 — die Figur
   blieb 31 px hoch (nur die Bildunterschrift), kam nie in den Sichtbereich,
   also loeste weder die Einblendung noch das lazy-Laden aus. Zwei der drei
   Galeriebilder erschienen dadurch NIE. Ohne die Zeile nimmt der Browser das
   Verhaeltnis aus den Attributen als Platzhalter und nach dem Laden das echte
   — genau die Absicht: kein erzwungenes Format, aber reservierter Platz. */
.lb img{height:auto;object-fit:contain}
.lookbook{align-items:start}
img.photo{height:auto;object-fit:contain}

/* Absender: NO DECAF ist eine Idee von CultCaffè — das gehoert sichtbar
   in die Fusszeile, nicht nur in den Text. */
.cc-logo{width:112px;height:auto;display:block;margin-bottom:10px;opacity:.9}

/* ── Der offene Reiter ist erkennbar ──────────────────────────────────────
   Ein Unterstrich in der Markenfarbe, nicht nur eine andere Textfarbe: Der
   Strich ist auch dann eindeutig, wenn jemand Farben schlecht unterscheidet.
   Der Knopf rechts („Zum Shop", „Eigenlabel anfragen") bleibt aussen vor —
   er ist ein Aufruf, kein Reiter. */
.navlinks a.aktiv, .nav a.aktiv{
  font-weight:700;
  position:relative;
  text-decoration:none;
}
.navlinks a.aktiv::after, .nav a.aktiv::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:2px;
  background:currentColor;
  opacity:.9;
}
.navlinks a.aktiv:hover{ text-decoration:none }
.nav-cta.aktiv::after, a.shop.aktiv::after{ display:none }