/* röststube neun — Konzeptarbeit von VALO Studio, 31.07.2026
   Eigene Designsprache: warm, hell, editorial, konsequente Kleinschreibung. */

:root{
  --pap:#F6F2EA;
  --pap-2:#EDEAE0;
  --ink:#1C1814;
  --ink-2:#5A5148;
  --dim:#8B8175;
  /* Greige-Familie mit Sand-Verlauf (Jan, 31.07.2026) */
  --akz:#575C46;        /* Tiefton: Text, Preise, Bohne, Riesen-Wortmarke */
  --akz-tief:#575C46;
  --akz-mit:#CFCBB6;    /* Flaechen: Fusszeile, Kennzahlenband */
  --akz-hell:#E4E1D4;   /* helle Flaeche */
  --sand-mit:#D9C9A6;   /* Verlauf auf Knoepfen */
  --sand-hell:#EDE2C8;
  --verlauf:linear-gradient(120deg,var(--sand-mit),var(--sand-hell) 55%,var(--sand-mit));
  --line:#DED5C6;
  --px:clamp(1.25rem,5vw,5rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--pap);color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  font-weight:400;font-size:1.02rem;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
/* Überschriften: eigene Display-Schrift, jünger als die Systemschrift der
   ersten Fassung. Bunny Fonts, EU-basiert, keine Cookies (dieselbe Wahl wie
   bei SODA76 SOCIAL) — Fließtext bleibt auf der Systemschrift, damit nur
   ein Schriftschnitt nachgeladen wird. Abgesetzt von den drei anderen
   Prototyp-Schriften (Archivo/Anton, Space Grotesk, Georgia). */
h1,h2,h3,.marke-gross,.streifen b{
  font-family:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
}
img{display:block;width:100%;height:auto}
a{color:inherit}

.konzept-band{
  background:var(--ink);color:var(--pap);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.6rem var(--px);display:flex;gap:1rem;
  justify-content:space-between;flex-wrap:wrap;align-items:center
}
.konzept-band a{color:#E7C9A8}

.infozeile{
  display:flex;gap:.5rem 2.2rem;flex-wrap:wrap;align-items:center;
  padding:.7rem var(--px);border-bottom:1px solid var(--line);
  font-size:.8rem;letter-spacing:.06em;color:var(--ink-2)
}
.infozeile .punkt{display:inline-flex;align-items:center;gap:.5rem}
.infozeile .punkt::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--akz);flex:none}
.infozeile .offen::before{background:#3E8E5A;box-shadow:0 0 0 0 rgba(62,142,90,.55);animation:puls 2.8s ease-out infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(62,142,90,.5)}70%{box-shadow:0 0 0 7px rgba(62,142,90,0)}100%{box-shadow:0 0 0 0 rgba(62,142,90,0)}}
.infozeile .schieb{margin-left:auto}
@media(prefers-reduced-motion:reduce){.infozeile .offen::before{animation:none}}
@media(max-width:44rem){.infozeile .schieb{margin-left:0}}

.kopf{
  position:sticky;top:0;z-index:20;
  display:flex;justify-content:space-between;align-items:baseline;
  padding:1.4rem var(--px);gap:2rem;flex-wrap:wrap;
  background:rgba(246,242,234,.86);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease,padding .3s ease
}
.kopf.gescrollt{border-bottom-color:var(--line);padding-top:.95rem;padding-bottom:.95rem}
@supports not (backdrop-filter:blur(2px)){.kopf{background:var(--pap)}}

/* K6 · Dünne Fortschrittslinie am unteren Rand der Kopfleiste */
.fortschritt{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--akz);transform-origin:0 0;transform:scaleX(0);
  transition:transform .1s linear;
}
.marke{font-size:1.5rem;letter-spacing:-.02em;font-weight:400;text-decoration:none;display:inline-flex;align-items:baseline;gap:.5rem}
.marke .bohne{
  width:.62em;height:.62em;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:var(--akz);position:relative;display:inline-block;transform:rotate(-18deg);flex:none
}
.marke .bohne::after{content:"";position:absolute;inset:0;margin:auto;width:1.5px;height:74%;background:var(--pap);border-radius:2px}
.nav{display:flex;gap:1.6rem;font-size:.94rem}
.nav a{text-decoration:none;color:var(--ink-2);position:relative;padding-bottom:.2rem}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--akz);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav a:hover,.nav a[aria-current]{color:var(--akz-tief)}

.pad{padding:clamp(3.5rem,9vh,7rem) var(--px)}
.pad-t0{padding-top:0}
.voll{padding-left:0;padding-right:0}

h1,h2,h3{font-weight:400;letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
h1{font-size:clamp(2.6rem,8vw,6.4rem)}
h2{font-size:clamp(1.9rem,4.6vw,3.6rem)}
h3{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.25}
.gross{font-size:clamp(1.15rem,2.1vw,1.5rem);line-height:1.55;color:var(--ink-2);max-width:34ch}
.klein{font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
p{max-width:62ch;color:var(--ink-2)}
p+p{margin-top:1rem}

/* Banner-Foto auf den Unterseiten (kaffee.html, standorte.html) — nicht
   zu verwechseln mit dem Video-Kopf der Startseite weiter unten. Beim
   Umbau vom 28.08.2026 aus Versehen mitgelöscht und hier wiederhergestellt,
   weil beide Unterseiten die Klasse noch für ihr Aufmacherfoto brauchen. */
.hero-bild{aspect-ratio:21/9;max-height:74vh;object-fit:cover}
@media(max-width:48rem){.hero-bild{aspect-ratio:4/3;max-height:none}}

/* ======================================================================
   K4 · Video-Kopf (28.08.2026) — ersetzt das statische Café-Foto.
   Die Rösttrommel steht erkennbar im Raum: Fenster, Regal mit Sacklein-
   wand-Säcken laufen im Bild mit, kein reines Bohnen-Makro. Ruhig gehalten
   (kein Scroll-Pinning wie bei Westwelt) — die Marke bleibt die leiseste
   der Prototypen nach der Praxis.
   ====================================================================== */
.kopf-buehne{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:82svh;min-height:82vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--ink);perspective:1000px;
}
.kopf-buehne__medien{position:absolute;inset:0;z-index:0}
.kopf-buehne__film{width:100%;height:100%;object-fit:cover;display:block}
.kopf-buehne__schleier{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(28,24,20,.12) 0%,rgba(28,24,20,.2) 38%,rgba(28,24,20,.88) 100%);
}
.kopf-buehne__text{
  position:relative;z-index:2;padding:var(--px);
  padding-top:clamp(5rem,15vh,8rem);padding-bottom:clamp(2.6rem,6vh,3.6rem);
}
.kopf-buehne h1{color:var(--pap);font-size:clamp(2.4rem,6.4vw,5rem)}
.gross--hell{color:#E7E1D2;margin-top:1.2rem;font-size:clamp(1.05rem,1.7vw,1.3rem);max-width:44ch}
.kopf-buehne .knopfzeile{margin-top:1.4rem;display:flex;gap:.8rem;flex-wrap:wrap}
.kopf-buehne .knopf--hell{border-color:rgba(246,242,234,.5);color:var(--pap)}
.kopf-buehne .knopf--hell:hover{background:var(--pap);color:var(--ink);border-color:var(--pap)}

.kopf-buehne__hinweis{
  position:absolute;z-index:2;left:var(--px);bottom:1rem;
  font-size:.76rem;letter-spacing:.05em;color:#C9C2B2;max-width:none
}

/* Herkunftszeile rechts, auf Höhe der ersten Überschriftenzeile.
   Erste Fassung (03.08.2026) stand frei im Raum und wirkte verrutscht.
   Jetzt sitzt sie in einem eigenen kleinen Block mit senkrechter Linie —
   erkennbar als Absenderangabe, nicht als loser Text. */
.herkunft{position:absolute;z-index:2;right:var(--px);top:clamp(2rem,5vh,3.4rem);
  display:flex;flex-direction:column;gap:.15rem;
  text-align:right;line-height:1.45;padding-right:.9rem;
  border-right:2px solid var(--akz)}
.herkunft span:first-child{font-size:.82rem;letter-spacing:.2em;color:var(--ink);font-weight:500}
.herkunft span:last-child{font-size:.72rem;letter-spacing:.18em;color:var(--ink-2)}
.herkunft--hell{border-right-color:var(--sand-hell)}
.herkunft--hell span:first-child{color:var(--pap)}
.herkunft--hell span:last-child{color:#C9C2B2}
@media(max-width:60rem){
  /* Auf schmalen Bildschirmen stapelt sich die Herkunftszeile über der
     Schlagzeile, statt rechts oben zu schweben — sonst überlagert sie
     die erste Zeile (Fehler vom 28.08.2026, beim Sichten auf dem Handy
     gefunden). Als Flex-Kind von .kopf-buehne fließt sie an ihren Platz. */
  .herkunft{position:static;text-align:left;margin:0 var(--px) .9rem;
    padding:0 0 0 .9rem;border-right:0;border-left:2px solid var(--akz);align-items:flex-start}
  .herkunft--hell{border-left-color:var(--sand-hell)}
}

/* --- Ruhige Raumtiefe (31.07.2026) -------------------------------------
   Die Marke ist handwerklich und leise. Die Tiefe darf man spüren,
   aber nicht bemerken: kleine Wege, lange Übergänge, kein Blitzen. */
.kopf-buehne__text h1 .zeile{display:block;overflow:hidden;padding-bottom:.04em}
.kopf-buehne__text h1 .zeile > span{display:block;transform:translateY(103%);
  animation:zeile-auf 1.15s cubic-bezier(.16,.85,.24,1) forwards}
.kopf-buehne__text h1 .zeile:nth-child(2) > span{animation-delay:.12s}
@keyframes zeile-auf{to{transform:none}}

/* Schalter: Video anhalten/abspielen. Pflicht bei einem endlos loopenden
   Video (WCAG 2.2.2) — sitzt hier statt der größeren „Bewegung aus"
   aus den anderen Prototypen, weil kein Scroll-Pinning mitzuschalten ist. */
.video-schalter{
  position:absolute;z-index:3;right:var(--px);bottom:1.1rem;
  padding:.5rem .95rem;border:1px solid rgba(246,242,234,.4);border-radius:100px;
  background:rgba(28,24,20,.4);color:var(--pap);font-size:.72rem;letter-spacing:.1em;
  cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .25s,border-color .25s
}
.video-schalter:hover{background:var(--akz);border-color:var(--akz)}

@media(max-width:48rem){
  /* Kein festes Seitenverhältnis auf dem Handy: der Text braucht hier mehr
     Zeilen (größere Mindestschriftgröße aus dem clamp), eine harte Höhe
     hätte ihn abgeschnitten (Fehler vom 28.08.2026, beim Sichten gefunden).
     Eine Mindesthöhe genügt, der Rest richtet sich nach dem Inhalt. */
  .kopf-buehne{min-height:70svh;min-height:70vh}
  .video-schalter{right:auto;left:var(--px)}
  .kopf-buehne__hinweis{display:none}
}
@media(prefers-reduced-motion:reduce),(prefers-reduced-data:reduce){
  .kopf-buehne__film{display:none}
  .kopf-buehne__medien{background:var(--ink) url("media/roestraum-poster.png") center/cover no-repeat}
  .video-schalter{display:none}
}

/* Sortenkarten heben sich beim Zeigen leicht aus der Fläche */
.drei{perspective:1400px}
.karte{transform-style:preserve-3d;transition:transform .45s cubic-bezier(.16,.8,.3,1),box-shadow .45s}
.karte:hover{transform:translateZ(26px);box-shadow:0 18px 44px rgba(35,32,24,.13)}

@media(prefers-reduced-motion:reduce){
  .kopf-buehne__text,.karte{transition:none;transform:none!important}
  .kopf-buehne__text h1 .zeile > span{animation:none;transform:none}
}

.zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center}
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.6rem)}
@media(max-width:52rem){.zwei,.drei{grid-template-columns:1fr}}

.karte{background:var(--pap-2);padding:1.6rem;display:flex;flex-direction:column;gap:.6rem}
.karte img{aspect-ratio:1/1;object-fit:cover;margin-bottom:.4rem}
.preis{color:var(--akz-tief);font-variant-numeric:tabular-nums}

.knopf{display:inline-block;border:1px solid var(--ink);padding:.85rem 1.8rem;text-decoration:none;font-size:.94rem;transition:background .25s,color .25s}
.knopf:hover{background:var(--ink);color:var(--pap)}
.knopf.voll-akz{background:var(--verlauf);border-color:transparent;color:var(--ink);font-weight:500}
.knopf.voll-akz:hover{background:var(--akz);border-color:var(--akz);color:var(--pap);font-weight:400}

.streifen{background:var(--akz-hell);border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr)}
.streifen div{padding:1.6rem var(--px);border-left:1px solid rgba(87,92,70,.18)}
.streifen div:first-child{border-left:0}
.streifen b{display:block;font-size:1.6rem;font-weight:400;color:var(--akz)}
@media(max-width:52rem){.streifen{grid-template-columns:1fr 1fr}.streifen div{padding:1.2rem var(--px)}}

.fuss{background:var(--akz-mit);color:var(--ink);padding:clamp(3rem,7vh,5rem) var(--px)}
.fuss a{color:var(--akz);text-decoration:underline;text-underline-offset:3px;opacity:1}
.fuss a:hover{color:var(--ink)}
.fuss .drei{gap:2rem}
.fuss p{color:#4A4A3C}
.fuss .marke-gross{font-size:clamp(3rem,12vw,9rem);line-height:.9;letter-spacing:-.03em;margin-top:2.5rem;color:var(--akz);opacity:.9}

.hinweis{font-size:.82rem;color:var(--dim);max-width:62ch;margin-top:1.2rem}

/* Prototyp-Hinweis am Seitenende (ersetzt das Band im Kopf, 31.07.2026) */
.prototyp-fuss{
  display:flex;gap:1rem 2rem;justify-content:space-between;align-items:center;flex-wrap:wrap;
  padding:1.1rem clamp(1.25rem,5vw,5.5rem);font-size:.82rem;line-height:1.6
}
.prototyp-fuss b{font-weight:600}
.prototyp-fuss{background:#1C1814;color:#F6F2EA;}
.prototyp-fuss a{color:#E7C9A8}

/* ======================================================================
   K1–K3 · Bewegung für die Rösterei (11.08.2026)
   Warm, editorial, ohne Hektik. Alles auf transform, clip-path und opacity.
   ====================================================================== */

/* K1 · Bilder wachsen beim Hereinscrollen von der Mitte auf volle Breite */
img.waechst{
  clip-path:inset(0 12% 0 12%);
  transform:scale(1.06);
  will-change:clip-path,transform;
  transition:clip-path 1.2s cubic-bezier(.19,1,.22,1), transform 1.4s cubic-bezier(.19,1,.22,1);
}
img.waechst.gross{clip-path:inset(0 0 0 0);transform:scale(1)}

/* K2 · Karten heben sich beim Überfahren, das Bild darin zoomt langsam */
.karte{overflow:hidden}
.karte img{transition:transform 1.1s cubic-bezier(.19,1,.22,1)}
.karte:hover img,.karte:focus-within img{transform:scale(1.06)}

/* K3 · Bohnen rieseln im Hintergrund */
.bohnen{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bohnen i{
  position:absolute;top:calc(var(--start,0vh) - 20vh);
  width:var(--gr,12px);height:calc(var(--gr,12px) * 1.45);
  background:var(--akz);border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  rotate:var(--dreh,0deg);will-change:transform;
}
/* Die Bohne bekommt ihre Kerbe über einen hellen Streifen */
.bohnen i::after{
  content:"";position:absolute;inset:14% 45% 14% 45%;
  background:var(--pap);opacity:.55;border-radius:50%;
}
/* :where() hält diese Regel auf Spezifität 0 — sie darf nie eine
   eigene position-Angabe einer Komponente überstimmen (Fund 01.09.2026:
   stach vorher .kopf{position:sticky} aus und legte die Kopfleiste lahm). */
:where(body > *:not(.bohnen)){position:relative;z-index:1}

/* K7 · Kennzahlenband blendet sich gestaffelt ein (28.08.2026) */
.streifen > div{
  opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.16,.8,.3,1);
  transition-delay:var(--verzug,0ms)
}
.streifen > div.zeigt{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  img.waechst{clip-path:none;transform:none;transition:none}
  .karte img{transition:none}
  .karte:hover img{transform:none}
  .bohnen{display:none}
  .streifen > div{opacity:1;transform:none;transition:none}
  .fortschritt{transition:none}
}
@media (prefers-reduced-data: reduce){
  .bohnen{display:none}
  img.waechst{clip-path:none;transform:none}
}