/* ═══════════════════════════════════════════════════════════════════
   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: 35 / 25 / 18 / 16 / 12.
   Diese Stufen sind exakt uebernommen; fuer den Hero endet die Reihe eine
   einzige Stufe darueber (35 x 1,39 = 49). Identisch zu SERENO — beide
   Seiten teilen sich damit eine Leiter.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* 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(46px, 6.9vw, 96px);
  /* „NOT A BRAND. A COFFEE IDEA." — eine Stufe zwischen Untertitel (25) und
     Abschnittstitel (35): gross genug, um vor dem Vorspann zu stehen, klein
     genug, um der Wortmarke nicht die Schau zu stehlen. */
  --s-anspruch: clamp(18px, 1.9vw, 24px);
  --s-display:  clamp(32px, 3.6vw, 49px);
  --s-gross:    clamp(26px, 2.7vw, 35px);
  --s-titel:    clamp(21px, 2.0vw, 25px);
  --s-unter:    clamp(19px, 1.9vw, 25px);
  --s-klein:    18px;
  --s-text:     16px;
  --s-mini:     12px;
  --z-display:  1.12;
  --z-titel:    1.0;
  --z-unter:    1.2;
  --z-text:     1.5;
}

:root{
  --ink:var(--cc-dunkel);
  --cream:var(--cc-hell);
  --rust:var(--cc-braun);
  --gold:var(--cc-logo);
  --paper:var(--cc-hell2);
  --dark:var(--cc-dunkel);
  --espresso:var(--cc-braun);
  --line:rgba(51,51,51,.18);
  --sand:#D9CBBC;
  /* Satzbreite. Ging beim Farbtausch verloren — ohne sie fiel jeder
     Innenabstand aus, weil calc() mit einer leeren Variable ungueltig ist
     und dann die ganze padding-Angabe verworfen wird. */
  --max:1180px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);line-height:1.55}.nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:18px max(22px,calc((100vw - var(--max))/2));background:rgba(245,239,234,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.brand{font-size:var(--s-titel);letter-spacing:.06em;text-decoration:none;color:var(--ink)}.navlinks{display:flex;gap:22px;align-items:center}.navlinks a,.footer a{color:inherit;text-decoration:none}.navlinks a:hover,.footer a:hover{text-decoration:underline}.nav-cta{border:1px solid var(--ink);padding:9px 13px;border-radius:999px}.hero{min-height:82vh;display:grid;align-items:stretch;grid-template-columns:1.02fr .98fr;background:var(--espresso);color:var(--cream)}.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:72px max(28px,calc((100vw - var(--max))/2)) 72px max(28px,calc((100vw - var(--max))/2));padding-right:56px;padding-top:64px;padding-bottom:64px}.hero-media{min-height:620px;background:center/cover no-repeat url('assets/sereno-couple-vertical.webp')}.eyebrow{font-size:var(--s-mini);font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin-bottom:18px}.hero h1{font-size:var(--s-hero);line-height:var(--z-display);margin:0 0 20px;letter-spacing:-.055em;font-weight:300;letter-spacing:-.045em}.hero h1 span{display:block;font-size:.22em;letter-spacing:.24em;margin-top:25px}.lead{font-size:var(--s-titel);max-width:720px;margin:0 0 28px}.sublead{font-size:var(--s-text);max-width:650px;color:#eadfd2}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}.btn{display:inline-block;border:1px solid currentColor;border-radius:999px;padding:13px 18px;text-decoration:none;color:inherit;font-weight:700}.btn.fill{background:var(--cream);color:var(--espresso);border-color:var(--cream)}.btn.dark{background:var(--ink);color:var(--cream);border-color:var(--ink)}.section{padding:86px max(24px,calc((100vw - var(--max))/2))}.section.tight{padding-top:52px;padding-bottom:52px}.section.dark{background:var(--ink);color:var(--cream)}.section.white{background:var(--cream)}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.big{font-size:var(--s-display);line-height:.95;letter-spacing:-.045em;margin:0 0 24px}.copy{font-size:var(--s-text);max-width:760px}.photo{width:100%;display:block;aspect-ratio:4/5;object-fit:cover;border-radius:2px}.photo.land{aspect-ratio:4/3}.card{border:1px solid currentColor;padding:27px;min-height:245px}.card h3{font-size:var(--s-titel);line-height:1;margin:10px 0 15px}.num{font-size:var(--s-mini);letter-spacing:.18em;opacity:.66}.quote{font-size:var(--s-display);line-height:1.02;letter-spacing:-.04em;max-width:1000px;margin:0}.rule{height:1px;background:currentColor;opacity:.18;margin:34px 0}.category{background:var(--cc-braun);color:#fff}.category .grid2{align-items:start}.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}.compare .box{border:1px solid rgba(255,255,255,.45);padding:24px;min-height:190px}.compare strong{font-size:var(--s-gross);display:block;margin-bottom:10px}.pill{display:inline-block;border:1px solid currentColor;border-radius:99px;padding:7px 11px;font-size:var(--s-mini);letter-spacing:.1em;text-transform:uppercase;margin:3px 5px 3px 0}.banner{min-height:67vh;background-position:center;background-size:cover;display:flex;align-items:flex-end;color:#fff;padding:66px max(24px,calc((100vw - var(--max))/2));position:relative}.banner:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.7))}.banner>*{position:relative;z-index:1}/* Der Bar-Blick statt der Muehle: Maschine, Tassen, Dampf — das ist der
   Moment, um den es auf dieser Seite geht, und CultCaffè steht auf den
   Tassen. Ausschnitt etwas nach oben, damit die Tassen im Bild bleiben. */
.banner.gastro{background-image:url('assets/gastro-bar.webp');background-position:center 38%}.banner.private{background-image:url('assets/sereno-man.webp')}.banner h1{font-size:var(--s-hero);line-height:.9;margin:0;max-width:940px}.revenue-grid,.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.field label{display:block;font-size:var(--s-mini);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}.field input{width:100%;padding:14px;border:1px solid var(--line);background:var(--cream);font-size:var(--s-text)}.result{border-top:1px solid currentColor;padding-top:16px}.result small{display:block;text-transform:uppercase;letter-spacing:.12em}.result strong{font-size:var(--s-gross)}.micro{font-size:var(--s-mini);opacity:.68;max-width:860px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}.step{border-top:1px solid currentColor;padding-top:16px}.step b{display:block;font-size:var(--s-text);margin-bottom:8px}.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:100;display:none;align-items:center;justify-content:center;padding:22px}.modal:target{display:flex}.modalbox{max-width:930px;max-height:90vh;overflow:auto;background:var(--cream);color:var(--ink);padding:38px;position:relative}.close{position:absolute;right:18px;top:8px;font-size:var(--s-gross);text-decoration:none;color:inherit}.meter-row{display:grid;grid-template-columns:180px 1fr 120px;gap:14px;align-items:center;margin:14px 0}.meter{height:14px;background:#ded3c7}.meter span{display:block;height:100%;background:var(--rust)}.formula{font-size:var(--s-titel)}.label-mock{padding:34px;border:1px solid var(--line);background:var(--cream)}.label-mock .your{font-size:var(--s-mini);letter-spacing:.22em;text-transform:uppercase}.label-mock .name{font-size:var(--s-display);line-height:.9;margin:16px 0}.label-mock .nodecaf{font-size:var(--s-titel);font-weight:700;letter-spacing:.12em}.footer{display:flex;justify-content:space-between;gap:20px;padding:28px max(24px,calc((100vw - var(--max))/2));border-top:1px solid var(--line);font-size:var(--s-mini)}.note{border-left:3px solid currentColor;padding-left:18px;max-width:780px}.list{font-size:var(--s-klein);padding-left:20px}.list li{margin:9px 0}@media(max-width:860px){.navlinks{display:none}.hero{grid-template-columns:1fr}.hero-copy{padding:72px 24px}.hero-media{min-height:55vh}.grid2,.grid3,.compare,.revenue-grid,.result-grid,.steps{grid-template-columns:1fr}.section{padding:62px 24px}.banner{padding:50px 24px}.meter-row{grid-template-columns:1fr}.footer{flex-direction:column}.photo{aspect-ratio:4/5}}

/* ── Menueschalter fuers Handy ────────────────────────────────────────
   Vorher stand dort schlicht .navlinks{display:none} — die Navigation war
   am Telefon nicht verschwunden, sondern weg. */
.burger{display:none;background:none;border:0;padding:10px;margin:-10px;color:inherit;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)}
a:focus-visible,button:focus-visible{outline:2px solid var(--rust,#b76c47);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

@media(max-width:860px){
  .nav{flex-wrap:wrap;padding:14px 24px}
  .burger{display:block}
  .navlinks{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:0;padding:8px 0 2px}
  .nav.burgerAuf .navlinks{display:flex}
  .navlinks a{padding:13px 2px;width:100%;border-bottom:1px solid var(--line)}
  .navlinks a:last-child{border-bottom:0}
  .navlinks a.nav-cta{margin-top:10px;width:auto;border:1px solid currentColor}
  /* Das Plakat im Banner traegt Schrift — Ausschnitt so, dass sie steht. */
  .banner.private{background-position:center 20%}
}

/* ═══════════════════════════════════════════════════════════════════
   SCHRIFTSYSTEM — dieselbe Paarung wie bei SERENO, damit die beiden
   Auftritte als eine Familie lesbar sind: Fraunces fuer Ueberschriften,
   Jost fuer alles andere. Beide liegen lokal, beide frei lizenziert.
   Begruendung und Austauschweg: assets/schriften/LIZENZ.md
   ═══════════════════════════════════════════════════════════════════ */
body{font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-optical-sizing:auto;font-weight:400;line-height:1.6}
h1,h2,h3,.brand,.serif,.quote,.big,.formula,.label-mock .name,.compare strong,.card h3{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;font-weight:400}
h1{font-variation-settings:'opsz' 144,'WONK' 1;letter-spacing:-.05em}
.big,.quote{font-variation-settings:'opsz' 96,'WONK' 1;letter-spacing:-.035em}
.card h3,.compare strong{font-variation-settings:'opsz' 48}
.brand{font-variation-settings:'opsz' 72;font-weight:500;letter-spacing:.06em}
.eyebrow,.btn,.navlinks,.num,.pill,.field label,.result small,.step b{
  font-family:'Jost',system-ui,sans-serif;font-weight:500}
.btn{font-weight:600;letter-spacing:.12em}
.eyebrow{letter-spacing:.22em}
.copy,.lead,.sublead,.list li,.micro{font-size:var(--s-klein);line-height:1.7}
.lead{font-size:var(--s-titel);line-height:var(--z-unter)}
strong,b{font-weight:600}
/* Zahlen im Rechner in gleicher Breite — sonst springt die Spalte bei
   jeder Eingabe. */
.result strong,.field input{font-variant-numeric:tabular-nums}

/* ── Feinsatz: Laufweite und Zeilenabstand ─────────────────────────
   Gemessen und nachjustiert, nicht geschaetzt.

   Vorher / nachher:
     Zeile „NOT A BRAND"   Fraunces 27,7px, Zeilenabstand 22,7px  →  Jost 15px, 1,55
                            (Zeilenabstand war KLEINER als die Schrift — beim
                             Umbruch klebten die Zeilen ineinander)
     Ueberschrift h1        0,82  →  0,88   (Fraunces hat lange Oberlaengen)
     Zwischenzeile .big     0,95  →  0,98
     Auszeichnung eyebrow   0,22em →  0,17em (bei 12px war das ein Gitter)
     Schaltflaechen         0,12em →  0,07em (Jost laeuft von Haus aus weit)
   ═══════════════════════════════════════════════════════════════ */
.hero h1{line-height:var(--z-display)}
/* Sir, 24.08.2026: „NOT A BRAND. A COFFEE IDEA." soll am Anfang im Fokus
   stehen und groesser sein als „Voller Espresso …". Die Zeile bekommt deshalb
   die Abschnittstitel-Stufe (35), der Vorspann darunter faellt auf 25.
   Die Sperrung geht von .20em auf .10em zurueck — bei 35 px waeren 27 Zeichen
   mal .20em breiter als die Spalte und die Zeile bräche mitten im Satz um. */
.hero h1 span{font-family:'Jost',system-ui,sans-serif;font-weight:600;
  font-size:var(--s-anspruch);letter-spacing:.10em;line-height:1.22;margin-top:22px;
  font-variation-settings:normal}
.big{line-height:.98;margin-bottom:26px}
.quote{line-height:1.06}
.eyebrow{letter-spacing:.17em;line-height:1.7}
.btn{letter-spacing:.07em}
.navlinks{gap:26px}
.navlinks a{letter-spacing:.01em}
.copy{max-width:62ch}
.card h3{line-height:1.06;letter-spacing:-.015em}
.compare strong{line-height:1.05;margin-bottom:14px}
.num,.result small,.field label{letter-spacing:.13em}
.result strong{letter-spacing:-.02em}
.label-mock .your{letter-spacing:.2em}
.label-mock .name{line-height:.94;letter-spacing:-.03em}
.step b{letter-spacing:.06em}
.list li{margin:12px 0}

/* „Schonend entkoffeiniert" — leiser Nachsatz zur Rezeptur (Sir, 02.09.2026).
   Ersetzt die frueher hier verlinkte Verfahrenserklaerung: sie beschrieb ein
   Verfahren, dessen Bezeichnung nicht abgeglichen war. */
.copy.schonend{font-size:16px;opacity:.66;margin-top:10px;max-width:640px}