/* ═══════════════════════════════════════════════════════════════════
   CULTCAFFÈ — HAUSFARBEN
   Abgelesen am 18.08.2026 direkt von cultcaffe.at (berechnete Werte der
   ausgelieferten Seite, nicht geschaetzt):
     #502C1D  Hauptfarbe, Ueberschriften und Marke   (196 Fundstellen)
     #3B342B  dunkler Grund
     #F5EFEA  heller Grund · #F8F3EF zweite Stufe
     #333333  Fliesstext
     #807C75  Grauton
   Das Logo im Original traegt #553918 — als Akzent uebernommen.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --cc-braun:#502C1D;
  --cc-logo:#553918;
  --cc-dunkel:#3B342B;
  --cc-hell:#F5EFEA;
  --cc-hell2:#F8F3EF;
  --cc-text:#333333;
  --cc-grau:#807C75;
}

/* ══════════════════════════════════════════════════════════════════════════
   SCHRIFTHIERARCHIE NACH CULTCAFFÈ            (Sir, 24.08.2026)
   ══════════════════════════════════════════════════════════════════════════
   Gemessen an cultcaffe.at bei 1440 px Fensterbreite:

      Abschnittstitel   35 px / 35   600
      Untertitel        25 px / 30   700
      Kleiner Titel     18 px / 18   600
      Navigation        18 px / 20   600   GROSS, gesperrt 0,4
      Fliesstext        16 px / 24   400
      Klein, Links      12 px / 18   400

   Diese sechs Stufen sind EXAKT uebernommen. CultCaffe hoert bei 35 px auf —
   das ist ein Shop, keine Markenseite. Fuer die zwei Groessen, die ein Hero
   braucht, ist ihre Reihe mit DEMSELBEN Schritt fortgesetzt (x1,39, der
   Durchschnitt ihrer oberen Stufen): 35 → 49 → 68.

   Alles waechst fliessend mit der Fensterbreite; die genannten Werte sind
   die Obergrenze bei 1440 px und darueber.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* KORREKTUR: Die erste Fassung setzte die Reihe ZWEI Stufen ueber CultCaffe
     fort — die Hero-Zeile wurde damit groesser als vorher (68 statt 52 px),
     also das Gegenteil einer Angleichung. Jetzt endet die Seite eine einzige
     Stufe ueber ihrem groessten Wert. */
  /* Sir, 24.08.2026: die Hero-Zeile der Startseite soll wieder groesser sein.
     Nicht die ganze Stufe anheben — daran haengen auch Zitate und der
     Abschlussblock. Die Hero-Zeile bekommt deshalb eine eigene Stufe, einen
     Schritt der CultCaffe-Reihe hoeher: 49 x 1,39 = 68. */
  --s-hero:     clamp(42px, 5.9vw, 82px);
  --s-display:  clamp(32px, 3.6vw, 49px);   /* Hero — 35 x 1,39, eine Stufe  */
  --s-gross:    clamp(26px, 2.7vw, 35px);   /* Abschnittstitel  = CultCaffe  */
  --s-titel:    clamp(21px, 2.0vw, 25px);   /* Untertitel       = CultCaffe  */
  --s-unter:    clamp(19px, 1.9vw, 25px);   /* Vorspann         = CultCaffe  */
  --s-klein:    18px;                       /* kleiner Titel    = CultCaffe  */
  --s-text:     16px;                       /* Fliesstext       = CultCaffe  */
  --s-mini:     12px;                       /* Klein, Links     = CultCaffe  */

  --z-display:  1.12;
  --z-titel:    1.0;
  --z-unter:    1.2;
  --z-text:     1.5;
}

:root{
  --paper:var(--cc-hell);
  --ink:var(--cc-text);
  --espresso:var(--cc-braun);
  --gold:var(--cc-logo);
  --cream:var(--cc-hell2);
  --line:rgba(51,51,51,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);line-height:1.5}
a{color:inherit}
.nav{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(18px,4vw,64px);color:white;background:linear-gradient(to bottom,rgba(0,0,0,.42),transparent)}
.brand{font-size:var(--s-unter);letter-spacing:.04em;text-decoration:none}
.navlinks{display:flex;gap:24px;align-items:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.navlinks a{text-decoration:none}
.button{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;border:1px solid currentColor;text-decoration:none;text-transform:uppercase;letter-spacing:.13em;font-size:12px;transition:.2s ease}
.button:hover{transform:translateY(-2px);background:var(--ink);color:white;border-color:var(--ink)}
.button.light:hover{background:white;color:var(--ink);border-color:white}
/* ── Held ────────────────────────────────────────────────────────────
   Das Plakat wird NICHT beschnitten. Es ist quadratisch, das Fenster ist es
   nie — jeder Ausschnitt hat bei irgendeiner Groesse etwas abgeschnitten:
   mal die Gesichter, mal die eingebrannte Schrift. Es steht deshalb ganz da,
   rechts, ueber die volle Hoehe; der Text sitzt links daneben auf dem
   Hausbraun. Nichts ueberlagert sich, nichts faellt weg, auf jedem Geraet. */
.hero{min-height:100svh;position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,var(--bildspalte,52%));
  align-items:center;color:var(--cc-hell);background:var(--cc-dunkel)}
.hero-art{position:relative;grid-column:2;justify-self:end;width:100%;height:100%;
  background:url('assets/sereno-amalfi.webp') center right/contain no-repeat}
.hero-art.art-couple{background-image:url('assets/sereno-couple.webp')}
/* Weicher Uebergang zur Textseite, damit die Kante des Bildes nicht schneidet. */
.hero:after{content:'';position:absolute;top:0;bottom:0;left:calc(100% - var(--bildspalte,52%) - 90px);
  width:180px;z-index:1;pointer-events:none;
  background:linear-gradient(to right,var(--cc-dunkel),rgba(59,52,43,0))}
.hero-inner{position:relative;z-index:2;grid-column:1;grid-row:1;display:block;
  padding:120px clamp(22px,4vw,54px) 64px clamp(22px,7vw,100px);max-width:820px}
.hero-copy{max-width:900px}
.kicker{font-size:12px;text-transform:uppercase;letter-spacing:.28em;font-weight:700}
h1,h2,h3{font-weight:400;margin:0}
h1{font-size:var(--s-hero);line-height:var(--z-display);letter-spacing:-.04em}
.hero-sub{font-size:var(--s-unter);margin:20px 0 28px;max-width:790px;line-height:1.12}
.section{padding:clamp(70px,10vw,140px) clamp(22px,7vw,100px)}
.intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,7vw,100px);align-items:center}
.intro h2{font-size:var(--s-gross);line-height:var(--z-titel)}
.intro p{font-size:var(--s-unter);max-width:640px}
.quote{font-size:var(--s-gross);line-height:var(--z-titel);text-align:center;max-width:1120px;margin:auto}
.moments{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 clamp(16px,3vw,44px) clamp(70px,9vw,120px)}
.moment{position:relative;aspect-ratio:1/1;overflow:hidden;margin:0}
.moment img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .5s ease}
.moment:hover img{transform:scale(1.025)}
.moment:after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 55%)}
.moment span{position:absolute;z-index:2;left:24px;bottom:24px;color:white;font-size:var(--s-titel)}
.split{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;background:var(--cc-hell2)}
.split-img{background:url('assets/sereno-woman.webp') center/cover no-repeat;aspect-ratio:1/1;min-height:0}
.split-copy{padding:clamp(60px,8vw,110px);display:flex;flex-direction:column;justify-content:center}
.split-copy h2{font-size:var(--s-gross);line-height:var(--z-titel)}
.split-copy p{font-size:var(--s-text);max-width:570px}
.blend{margin:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;font-size:var(--s-mini);letter-spacing:.14em;text-transform:uppercase}
.cta{background:var(--espresso);color:var(--cream);text-align:center}
.cta h2{font-size:var(--s-display);line-height:var(--z-display);margin-bottom:28px}
.cta p{font-size:var(--s-unter);max-width:700px;margin:0 auto 32px}
.footer{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:30px clamp(22px,7vw,100px);font-size:12px;letter-spacing:.08em;background:var(--cc-dunkel);color:var(--cc-hell)}
.footer img{width:120px;height:auto;filter:brightness(0) invert(1);opacity:.9}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
.footer a{text-decoration:none}
.story-hero{min-height:78svh;position:relative;display:grid;align-items:end;color:white;background:var(--espresso)}
.story-hero:after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(59,52,43,.78),rgba(59,52,43,.10))}
.story-hero .hero-inner{padding-top:170px}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,7vw,90px);align-items:start}
.story-grid h2{font-size:var(--s-gross);line-height:var(--z-titel)}
.story-grid p{font-size:var(--s-text)}
.signature{font-style:italic;font-size:var(--s-titel);color:var(--gold)}
.smallnote{font-size:var(--s-mini);opacity:.72}
/* ── Kopfzeile: oben durchsichtig, beim Scrollen deckend ──────────────
   Der Verlauf allein reicht nur, solange der Held darunter liegt. Weiter
   unten lief heller Text durch die weisse Schrift — unlesbar. */
.nav{transition:background .25s ease}
.nav.gescrollt{background:rgba(59,52,43,.95);backdrop-filter:blur(10px)}

/* ── Menueschalter fuers Handy ───────────────────────────────────────── */
.burger{display:none;background:none;border:0;padding:10px;margin:-10px;cursor:pointer}
.burger span{display:block;width:26px;height:2px;margin:5px 0;background:currentColor;
  transition:transform .25s ease,opacity .2s ease}
.nav.burgerAuf .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.burgerAuf .burger span:nth-child(2){opacity:0}
.nav.burgerAuf .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Tastaturbedienung sichtbar machen ───────────────────────────────── */
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ── Bewegung nur, wenn erwuenscht ───────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .moment:hover img{transform:none}
}

@media(max-width:820px){
  .nav{background:rgba(59,52,43,.95);padding:14px 22px;flex-wrap:wrap}
  .burger{display:block;color:#fff}
  .navlinks{display:none;width:100%;flex-direction:column;align-items:flex-start;
    gap:0;padding:8px 0 4px;font-size:var(--s-mini);letter-spacing:.16em}
  .nav.burgerAuf .navlinks{display:flex}
  .navlinks a{padding:14px 2px;width:100%;border-bottom:1px solid rgba(255,255,255,.14)}
  .navlinks a:last-child{border-bottom:0}
  .navlinks a.shop{margin-top:12px;width:auto;border:1px solid currentColor;padding:13px 22px}

  /* Hochkant ist das quadratische Plakat immer breiter als hoch — jeder
     Ausschnitt schneidet Schrift an. Deshalb steht es oben in voller Breite
     und der Text darunter auf Espressogrund. Vollbild bleibt Vollbild, nur
     die Aufteilung wechselt. */
  .hero,.story-hero{min-height:auto}
  /* DAS hat gefehlt: Ohne diese Zeile bleibt der Hero zweispaltig — am iPhone
     180 px Text neben 195 px Bild. Die Absicht darueber (Bild oben, Text
     darunter) griff nie, weil das Raster nie umgestellt wurde. */
  .hero{grid-template-columns:1fr;grid-template-rows:auto auto}
  .hero-art{grid-column:1;grid-row:1;top:0;width:100%;height:auto;aspect-ratio:1/1;
    justify-self:stretch;background-size:cover;background-position:center;
    background-repeat:no-repeat}
  .hero-inner{grid-column:1;grid-row:2;padding:34px 22px 44px}
  /* Der weiche Uebergang gehoert zur SENKRECHTEN Kante zwischen Text und Bild.
     Gestapelt gibt es diese Kante nicht mehr — der Schleier lag als heller
     Streifen ueber dem linken Viertel des Fotos. */
  .hero:after{display:none}
  .hero-copy{max-width:none}
  .hero-claim{font-size:var(--s-display);line-height:var(--z-display)}
  h1{font-size:clamp(58px,20vw,96px)}
  .intro,.split,.story-grid{grid-template-columns:1fr}
  .moments{grid-template-columns:1fr}
  /* 70vh je Bild hiess: dreimal Vollbild scrollen, bis Text kommt. */
  .moment,.split-img{aspect-ratio:1/1}
  .split-copy{padding:52px 22px}
  .footer{align-items:flex-start;flex-direction:column;gap:16px}
}

/* Sehr schmale Geraete: die Wortmarke darf die Zeile nicht sprengen. */
@media(max-width:380px){
  .brand{font-size:var(--s-unter)}
  .brand span{display:none}
}

/* Die Wortmarke steht im Plakat. Unsere Ueberschrift wiederholt sie nicht,
   sie sagt, worum es geht — „SERENO" bleibt fuer Vorleseprogramme und
   Suchmaschinen im Text stehen, nur eben unsichtbar. */
.nur-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.hero-claim{font-weight:400;
  font-size:var(--s-hero);line-height:var(--z-display);letter-spacing:-.02em;
  margin:16px 0 34px;max-width:15ch;text-shadow:0 2px 30px rgba(0,0,0,.35)}

/* ═══════════════════════════════════════════════════════════════════
   SCHRIFTSYSTEM
   Fraunces traegt die Ueberschriften, Jost den Rest. Fraunces ist eine
   variable Schrift: „opsz" stellt die Zeichnung auf die Groesse ein, in
   der sie steht — grosse Grade werden feiner, kleine kraeftiger. Genau
   das macht den Unterschied zwischen gesetzt und gut gesetzt.
   ═══════════════════════════════════════════════════════════════════ */
body{font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-optical-sizing:auto;font-weight:400;line-height:1.6;letter-spacing:.005em}
h1,h2,h3,.brand,.quote,.hero-claim,.signature,.split-copy h2,.intro h2,.cta h2{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;font-weight:400}
h1,.hero-claim{font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 1;letter-spacing:-.035em}
h2,.quote{font-variation-settings:'opsz' 96,'WONK' 1}
h3{font-variation-settings:'opsz' 48}
.brand{font-variation-settings:'opsz' 72;font-weight:500;letter-spacing:.06em}
.kicker,.button,.navlinks,.moment span,.lb figcaption,.blend,.footer{
  font-family:'Jost',system-ui,sans-serif;font-weight:500}
.kicker,.blend,.lb figcaption{letter-spacing:.2em}
.button{font-weight:600;letter-spacing:.14em}
.intro p,.split-copy p,.story-grid p,.cta p,.recht p,.recht li{font-size:var(--s-text);line-height:var(--z-text)}
strong,b{font-weight:600}
.signature{font-variation-settings:'opsz' 72,'WONK' 1;font-style:normal}

/* ── Feinsatz: Laufweite und Zeilenabstand ─────────────────────────
   Dieselbe Handschrift wie bei NO DECAF, damit die Marken zusammen
   gelesen werden koennen. Fraunces hat lange Oberlaengen — enge
   Zeilenabstaende lassen grosse Grade sonst zusammenkleben.
   ═══════════════════════════════════════════════════════════════ */
.hero-claim{line-height:1.06;letter-spacing:-.03em}
.intro h2,.split-copy h2,.story-grid h2{line-height:1.02;letter-spacing:-.03em}
.cta h2{line-height:.96;letter-spacing:-.04em}
.quote{line-height:1.1;letter-spacing:-.025em}
.kicker{letter-spacing:.17em;line-height:1.7}
.button{letter-spacing:.07em}
.navlinks{gap:28px}
.navlinks a{letter-spacing:.01em}
.intro p,.split-copy p,.story-grid p,.cta p{max-width:60ch}
.blend{letter-spacing:.12em;line-height:1.6}
.lb figcaption{letter-spacing:.14em}
.buehne-kopf .zahl{letter-spacing:.2em}
.signature{line-height:1.2;letter-spacing:-.01em}
.detail-text p{line-height:1.18;letter-spacing:-.02em}
.moment span{letter-spacing:-.01em}
.footer{letter-spacing:.02em;line-height:1.7}

/* Kopfzeile ueber dem Bild: ein schmaler Verlauf haelt die Menuepunkte
   lesbar, egal was im Motiv darunter liegt — ohne einen Balken zu setzen. */
.nav:not(.gescrollt){background:linear-gradient(to bottom,rgba(59,52,43,.55),rgba(59,52,43,0))}

/* ── Die Rösterei ───────────────────────────────────────────────────────────
   CultCaffès Blatt bringt seine eigene Gestaltung mit: Überschrift, Text,
   Logo, Adresse. Es wird deshalb VOLLSTAENDIG gezeigt und nirgends
   angeschnitten — jeder Ausschnitt würde ihre Typografie zerschneiden.
   Der Text daneben bleibt kurz und wiederholt nichts, was im Bild steht. */
.roesterei{background:var(--cc-hell2)}
.roesterei-innen{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:center;max-width:1180px;margin:0 auto}
.roesterei-text h2{font-size:var(--s-gross);line-height:var(--z-titel);margin:10px 0 18px}
.roesterei-text p{font-size:var(--s-text);line-height:var(--z-text);max-width:44ch;margin-bottom:26px}
.roesterei-bild{margin:0}
.roesterei-bild img{display:block;width:100%;height:auto;border-radius:3px;
  box-shadow:0 18px 60px rgba(59,52,43,.22)}

@media(max-width:820px){
  .roesterei-innen{grid-template-columns:1fr;gap:26px}
  /* Bild zuerst: es traegt die Aussage, der Text ordnet sie nur ein. */
  .roesterei-bild{order:-1}
}

/* „Schonend entkoffeiniert" — leiser Nachsatz zur Blend-Angabe (Sir, 02.09.2026).
   Nimmt die Laufweite der Blend-Zeile auf, bleibt aber deutlich zurueckhaltender. */
.schonend{margin:-14px 0 26px;font-size:14px;letter-spacing:.12em;
  text-transform:uppercase;opacity:.62;line-height:1.6}