/* =========================================================
   VEEDELKAFFEE – Coffeebike mieten in Köln
   ========================================================= */

/* ---------- Fonts (selbst gehostet, DSGVO-freundlich) ---------- */
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(../fonts/oswald-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(../fonts/oswald-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ptserif-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ptserif-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/ptserif-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/ptserif-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'PT Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/ptserif-400i-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'PT Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/ptserif-400i-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens ---------- */
:root {
  --bg: #0d0d0c;
  --bg-2: #131211;
  --ink: #f5f2ec;
  --ink-85: rgba(245, 242, 236, 0.85);
  --ink-80: rgba(245, 242, 236, 0.8);
  --ink-70: rgba(245, 242, 236, 0.7);
  --ink-60: rgba(245, 242, 236, 0.6);
  --ink-55: rgba(245, 242, 236, 0.55);
  --ink-45: rgba(245, 242, 236, 0.45);
  --line: rgba(245, 242, 236, 0.16);
  --line-soft: rgba(245, 242, 236, 0.12);
  --beige: #d9c9a3;
  --beige-50: rgba(217, 201, 163, 0.5);
  --dark: #111;
  --f-head: 'Oswald', 'Arial Narrow', sans-serif;
  --f-body: 'PT Serif', Georgia, serif;
  --ease: cubic-bezier(0.22, 0.9, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft: cubic-bezier(0.25, 0.8, 0.25, 1);
  --ease-calm: cubic-bezier(0.65, 0, 0.35, 1);
  --maxw: 1060px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); line-height: 1.6; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: var(--ink); }
a:hover { color: var(--beige); }
::selection { background: var(--beige); color: var(--dark); }
:focus-visible { outline: 2px solid var(--beige); outline-offset: 3px; border-radius: 4px; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
section[id], footer { scroll-margin-top: 84px; }
html.is-loading body { overflow: hidden; }
html.is-locked, html.is-locked body { overflow: hidden; }

.skip-link { position: fixed; left: 16px; top: 16px; z-index: 100001; padding: 12px 18px; background: var(--beige); color: var(--dark); font-family: var(--f-head); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border-radius: 999px; transform: translateY(-160%); transition: transform 0.3s var(--ease); }
.skip-link:focus { transform: none; color: var(--dark); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.container { max-width: var(--maxw); margin: 0 auto; }
.container--narrow { max-width: 820px; }
.rel { position: relative; z-index: 1; }
.block { display: block; }
.section { position: relative; padding: clamp(70px, 10vw, 130px) 24px; }

.eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--f-head); font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 14px; }
.eyebrow::before, .eyebrow--center::after { content: ''; flex: none; width: 28px; height: 1px; background: currentColor; opacity: 0.6; transition: transform 1s var(--ease) 0.25s; }
.eyebrow::before { transform-origin: right center; }
.eyebrow--center::after { transform-origin: left center; }
.eyebrow--center { justify-content: center; text-align: center; }
.js .eyebrow:not(.is-in)::before, .js .eyebrow:not(.is-in)::after { transform: scaleX(0); }

.h2 { font-family: var(--f-head); font-weight: 700; text-transform: uppercase; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08; margin: 0 0 44px; }
.h2--center { text-align: center; }
.h2--tight { margin-bottom: 20px; }
.accent { color: var(--beige); }
.nowrap { white-space: nowrap; }
.lead, .body-l { font-size: clamp(16px, 1.9vw, 19px); color: var(--ink-85); }
.body-l { margin: 0 0 16px; }
.body-l--last { margin: 0; }
.body-l em { color: var(--beige); }

/* ---------- Reveal-System ---------- */
.js [data-reveal] { transition: opacity 1.3s var(--ease-soft) var(--d, 0ms), translate 1.3s var(--ease-soft) var(--d, 0ms), transform 0.6s var(--ease), border-color 0.3s ease, color 0.3s ease, box-shadow 0.5s ease, background-color 0.3s ease; }
.js [data-reveal]:not(.is-in):not([data-reveal="fade"]):not([data-reveal="pop"]) { opacity: 0; translate: 0 20px; }
.js [data-reveal="fade"]:not(.is-in) { opacity: 0; }
.js [data-reveal="fade"] { transition: opacity 1.6s var(--ease-soft) var(--d, 0ms), transform 0.6s var(--ease), border-color 0.3s ease, box-shadow 0.5s ease; }



/* Wörter steigen aus einer Maske auf */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.14em 0.04em 0.08em; margin: -0.14em -0.04em -0.08em; }
.split .wi { display: inline-block; will-change: transform; }
.js .split .wi { transform: translateY(110%); transition: transform 1.35s var(--ease-soft) calc(var(--d, 0ms) + var(--i, 0) * 70ms); }
.js .split.is-in .wi { transform: none; }
/* Buchstaben hüpfen nacheinander rein */
.split .c { display: inline-block; }
.js .split .c { transform: translateY(110%) rotate(6deg); transition: transform 1.1s var(--ease-soft) calc(var(--d, 0ms) + var(--i, 0) * 38ms); }
.js .split.is-in .c { transform: none; }

/* ---------- Buttons ---------- */
.btn { --btn-bg: var(--beige); --btn-fg: var(--dark); --btn-fill: var(--ink); --btn-icon-bg: var(--dark); --btn-icon-fg: var(--beige);
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 16px; padding: 10px 10px 10px 34px; min-height: 44px;
  background: var(--btn-bg); color: var(--btn-fg); text-decoration: none; border-radius: 999px;
  font-family: var(--f-head); font-weight: 600; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: transform 0.5s var(--ease), color 0.3s ease, box-shadow 0.4s ease; -webkit-tap-highlight-color: transparent; }
.btn:hover, .btn:focus-visible { color: var(--btn-fg); }
.btn.is-magnet { transition: transform 0.45s var(--ease-soft), color 0.3s ease, box-shadow 0.4s ease; }
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--btn-fill); clip-path: circle(0% at var(--px, 50%) var(--py, 50%)); transition: clip-path 1s var(--ease-soft); }
.btn-label { position: relative; display: block; overflow: hidden; height: 1.25em; line-height: 1.25; }
.btn-label > span { display: block; transition: transform 0.8s var(--ease-soft); }
.btn-label > span::after { content: attr(data-text); display: block; }
.btn-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--btn-icon-bg); color: var(--btn-icon-fg); overflow: hidden; transition: transform 0.5s var(--ease); }
.btn-icon svg { width: 16px; height: 16px; }
.btn:active { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(0.97); }
@media (hover: hover) {
  .btn:hover::before { clip-path: circle(150% at var(--px, 50%) var(--py, 50%)); }
  .btn:hover .btn-label > span { transform: translateY(-50%); }
  .btn:hover .btn-icon svg { animation: arrow-swap 0.9s var(--ease-soft); }
  .btn:hover { box-shadow: 0 14px 40px -12px rgba(217, 201, 163, 0.55); }
  .btn--dark:hover { box-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.6); }
}
@keyframes arrow-swap { 0% { transform: none; } 45% { transform: translateX(160%); } 46% { transform: translateX(-160%); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; } }
.btn--hero { font-size: 17px; padding: 11px 11px 11px 40px; }
.btn--hero .btn-icon { width: 40px; height: 40px; }
.btn--md { margin-top: 6px; }
.btn--sm { font-size: 13px; padding: 6px 6px 6px 20px; gap: 12px; letter-spacing: 0.1em; }
.btn--sm .btn-icon { width: 30px; height: 30px; }
.btn--sm .btn-icon svg { width: 14px; height: 14px; }
.btn--dark { --btn-bg: var(--bg); --btn-fg: var(--ink); --btn-fill: #2a2823; --btn-icon-bg: var(--beige); --btn-icon-fg: var(--dark); }
/* Lichtreflex, der regelmäßig über den Hero-Button wandert */
.btn--shine::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 0; pointer-events: none; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%); transform: skewX(-20deg); animation: shine 6s var(--ease) 3.2s infinite; }
.btn--shine .btn-label, .btn--shine .btn-icon { position: relative; z-index: 1; }
@keyframes shine { 0% { left: -60%; } 16%, 100% { left: 130%; } }

/* ---------- Preloader ---------- */
.preloader { display: none; position: fixed; inset: 0; z-index: 100000; pointer-events: none; }
.js .preloader { display: block; pointer-events: auto; animation: pre-failsafe 0s linear 12s forwards; }
@keyframes pre-failsafe { to { visibility: hidden; opacity: 0; } }
.preloader-layer { position: absolute; inset: 0; will-change: transform; }
.preloader-layer--beige { background: var(--beige); }
.preloader-layer--dark { background: var(--bg); display: flex; align-items: center; justify-content: center; }
.preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; transition: opacity 0.45s ease, transform 0.6s var(--ease); }
.pre-cup { width: 104px; height: 112px; overflow: visible; }
.pre-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pre-draw 1.5s var(--ease-calm) 0.2s forwards; }
.pre-draw--2 { animation-delay: 1s; animation-duration: 0.9s; }
.pre-draw--3 { animation-delay: 1.2s; animation-duration: 1s; }
@keyframes pre-draw { to { stroke-dashoffset: 0; } }
.pre-liquid-level { transform: translateY(70px); animation: pre-fill 2.1s var(--ease-calm) 1s forwards; }
@keyframes pre-fill { to { transform: translateY(41px); } }
.pre-liquid { animation: pre-wave 2.2s linear infinite; }
@keyframes pre-wave { from { transform: translateX(0); } to { transform: translateX(37px); } }
.pre-claim { font-family: var(--f-head); font-weight: 500; font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(217, 201, 163, 0.75); opacity: 0; transform: translateY(8px); animation: pre-claim 1.4s var(--ease-soft) 1.5s forwards; }
@keyframes pre-claim { to { opacity: 1; transform: none; } }
.is-leaving .preloader { pointer-events: none; opacity: 0; transition: opacity 0.6s ease; }
/* Startseite: Vorhänge heben sich nacheinander mit runder Unterkante */
.is-lifting .preloader { pointer-events: none; }
.is-lifting .preloader-inner { opacity: 0; transform: translateY(-28px) scale(0.94); transition: opacity 0.5s ease, transform 1s var(--ease-soft); }
.is-lifting .preloader-layer--dark { transform: translateY(-100%); border-radius: 0 0 50% 50% / 0 0 16vh 16vh; transition: transform 1.25s cubic-bezier(0.76, 0, 0.24, 1) 0.1s, border-radius 1.25s cubic-bezier(0.76, 0, 0.24, 1) 0.1s; }
.is-lifting .preloader-layer--beige { z-index: auto; clip-path: none; background: var(--beige); transform: translateY(-100%); border-radius: 0 0 50% 50% / 0 0 16vh 16vh; transition: transform 1.25s cubic-bezier(0.76, 0, 0.24, 1) 0.28s, border-radius 1.25s cubic-bezier(0.76, 0, 0.24, 1) 0.28s; }
/* Enthüllung: Kaffee flutet aus der Tasse den Bildschirm … */
@property --r { syntax: '<length>'; inherits: false; initial-value: 0px; }
.preloader-layer--beige { z-index: 2; background: radial-gradient(circle at var(--cx, 50%) var(--cy, 50%), #d9bd92 0%, #b3875a 9%, #7f522e 26%, #4f2f19 52%, #2c190d 100%); clip-path: circle(0px at var(--cx, 50%) var(--cy, 50%)); }
.is-flooding .preloader-layer--beige { clip-path: circle(150vmax at var(--cx, 50%) var(--cy, 50%)); transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1); }
.is-flooding .preloader-inner { opacity: 0; transform: scale(0.94); transition: opacity 0.45s ease 0.3s, transform 0.9s var(--ease-soft); }
/* … und öffnet sich wie ein Tropfen in der Crema (Startseite) */
.is-opening .preloader-layer--beige { --r: 160vmax; transition: --r 1.7s cubic-bezier(0.55, 0, 0.2, 1);
  background-image: radial-gradient(circle at var(--cx, 50%) var(--cy, 50%), transparent var(--r), rgba(238, 222, 188, 0.95) calc(var(--r) + 2px), rgba(217, 189, 146, 0.35) calc(var(--r) + 16px), rgba(217, 189, 146, 0) calc(var(--r) + 46px)), radial-gradient(circle at var(--cx, 50%) var(--cy, 50%), #d9bd92 0%, #b3875a 9%, #7f522e 26%, #4f2f19 52%, #2c190d 100%);
  -webkit-mask-image: radial-gradient(circle at var(--cx, 50%) var(--cy, 50%), transparent var(--r), #000 calc(var(--r) + 2px)); mask-image: radial-gradient(circle at var(--cx, 50%) var(--cy, 50%), transparent var(--r), #000 calc(var(--r) + 2px)); }
/* … bzw. zieht sich in den Bogenrahmen des Hero-Fotos zusammen (Unterseiten) */
.preloader-layer--beige.is-framing { transition: clip-path 1.3s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.8s ease 1.15s; }
@keyframes steam { 0% { transform: translateY(4px) scaleY(0.9); opacity: 0; } 30% { opacity: 0.85; } 100% { transform: translateY(-8px) scaleY(1.08); opacity: 0; } }

/* ---------- Scroll-Fortschritt ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1002; pointer-events: none; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, rgba(217, 201, 163, 0.4), var(--beige)); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Topbar (Desktop) ---------- */
.topbar { position: fixed; top: 14px; left: 50%; z-index: 1001; width: min(var(--maxw), calc(100% - 32px)); display: flex; align-items: center; gap: 16px; padding: 7px 7px 7px 22px; border-radius: 999px;
  background: rgba(13, 13, 12, 0.72); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(245, 242, 236, 0.1); box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.7);
  transform: translate(-50%, calc(-100% - 30px)); transition: transform 0.7s var(--ease); }
.topbar.is-visible { transform: translate(-50%, 0); }
.topbar-logo { display: block; flex: none; }
.topbar-logo img { width: 92px; height: auto; }
.topbar-nav { position: relative; display: flex; gap: 2px; margin-left: auto; }
.topbar-nav a { position: relative; z-index: 1; padding: 10px 14px; font-family: var(--f-head); font-weight: 500; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-70); text-decoration: none; transition: color 0.3s ease; }
.topbar-nav a:hover, .topbar-nav a.is-active { color: var(--ink); }
.topbar-pill { position: absolute; top: 0; left: 0; height: 100%; width: 0; border-radius: 999px; background: rgba(245, 242, 236, 0.09); opacity: 0; transition: transform 0.55s var(--ease), width 0.55s var(--ease), opacity 0.3s ease; }
.topbar .btn { margin-left: 8px; }
@media (max-width: 980px) { .topbar-nav { display: none; } .topbar .btn { margin-left: auto; } }
@media (max-width: 760px) { .topbar { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; width: 100%; height: 100svh; min-height: 520px; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; overflow: clip; background-color: var(--bg); background-image: radial-gradient(ellipse 65% 55% at 12% -5%, rgba(217, 201, 163, 0.13), transparent 58%); }
.hero-content { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; max-width: 900px; padding: clamp(28px, 4vw, 60px) clamp(28px, 4.5vw, 72px) 210px; }
.hero-logo { width: clamp(190px, 22vw, 320px); height: auto; margin-bottom: clamp(14px, 1.75vw, 22px); }
.hero-h1 { font-family: var(--f-head); font-weight: 700; text-transform: uppercase; font-size: clamp(34px, 4.4vw, 68px); line-height: 1.12; letter-spacing: 0.01em; margin: 0 0 22px; color: var(--ink); }
.hero-h1 .line { display: block; overflow: hidden; padding: 0.06em 0 0.02em; margin: -0.06em 0 -0.02em; }
.hero-h1 .line > span { display: block; white-space: nowrap; }
.hero-p { font-size: clamp(17px, 1.5vw, 21px); max-width: 720px; margin: 0 0 38px; color: var(--ink-85); }
.hero-sub { display: block; white-space: nowrap; }

.hero-frame-wrap { position: absolute; inset: 0; z-index: 0; }
.hero-frame { position: absolute; inset: 0; overflow: hidden; }
.hero-pan { position: absolute; inset: 0; transform-origin: center; transform: scale(1.15) translate(0%, -13%); }
.hero-par, .hero-zoom { position: absolute; inset: 0; }
.hero-par { will-change: transform; }
.hero-zoom { transform-origin: 60% 60%; }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 13, 12, 1) 0%, rgba(13, 13, 12, 1) 6%, rgba(13, 13, 12, 0.82) 26%, rgba(13, 13, 12, 0.45) 50%, rgba(13, 13, 12, 0.12) 72%, rgba(13, 13, 12, 0) 88%); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 13, 12, 0.45) 0%, transparent 24%, transparent 60%, rgba(13, 13, 12, 0.8) 100%); }
.hero-vignette { position: absolute; inset: 0; box-shadow: inset 0 0 140px rgba(13, 13, 12, 0.6); }

.grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; opacity: 0.05; mix-blend-mode: overlay; }
.grain::before { content: ''; position: absolute; inset: -50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) { .grain::before { animation: grain 0.9s steps(5) infinite; } }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); } 60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(0, 0); } }

.scroll-cue { position: absolute; z-index: 3; left: clamp(28px, 4.5vw, 72px); bottom: 78px; display: flex; align-items: center; gap: 14px; font-family: var(--f-head); font-weight: 500; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-55); }
.scroll-cue-line { position: relative; width: 1px; height: 46px; background: rgba(245, 242, 236, 0.18); overflow: hidden; }
.scroll-cue-line::after { content: ''; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--beige); animation: cue 2.2s var(--ease-io) infinite; }
@keyframes cue { 0% { transform: translateY(0); } 100% { transform: translateY(350%); } }

.ticker { position: absolute; z-index: 4; bottom: 0; left: 0; right: 0; overflow: hidden; padding: 13px 0; background: var(--bg); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.ticker-track { display: flex; width: max-content; font-family: var(--f-head); font-weight: 500; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-55); white-space: nowrap; animation: vk-marquee 40s linear infinite; will-change: transform; }
.js .ticker-track { animation: none; }
.ticker-track span, .ticker-track i { flex: none; margin-right: 34px; font-style: normal; }
.ticker-track i { color: var(--beige); }
@keyframes vk-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Hero-Intro, sobald der Vorhang fällt */
.js .hero-logo { opacity: 0; filter: blur(10px); transform: translateY(12px); transition: opacity 1.6s var(--ease-soft) 0.2s, filter 1.6s var(--ease-soft) 0.2s, transform 1.6s var(--ease-soft) 0.2s; }
.js .hero-h1 .line > span { transform: translateY(110%); transition: transform 1.6s var(--ease-soft); }
.js .hero-h1 .line:nth-child(1) > span { transition-delay: 0.4s; }
.js .hero-h1 .line:nth-child(2) > span { transition-delay: 0.58s; }
.js .hero-p { opacity: 0; transform: translateY(14px); transition: opacity 1.5s var(--ease-soft) 0.85s, transform 1.5s var(--ease-soft) 0.85s; }
.js .hero-cta { opacity: 0; transition: opacity 1.4s var(--ease-soft) 1.1s, transform 0.6s var(--ease-soft), color 0.3s ease, box-shadow 0.4s ease; }
.js .ticker { transform: translateY(100%); transition: transform 1.4s var(--ease-soft) 1.1s; }
.js .scroll-cue { opacity: 0; transition: opacity 1.2s ease 1.9s; }
.js .hero-zoom { transform: scale(1.1); transition: transform 3.8s var(--ease-soft); }
.js .hero-frame { opacity: 0.35; transition: opacity 2.4s ease; }
.is-ready .hero-logo { opacity: 1; filter: none; transform: none; }
.is-ready .hero-h1 .line > span { transform: none; }
.is-ready .hero-p, .is-ready .hero-cta, .is-ready .scroll-cue { opacity: 1; transform: none; }
.is-ready .hero-cta { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); }
.is-ready .ticker, .is-ready .hero-zoom { transform: none; }
.is-ready .hero-frame { opacity: 1; }
.hero .scroll-cue.is-gone { opacity: 0; transition: opacity 0.4s ease; }

@media (max-width: 1100px) {
  .hero-h1 .line > span, .hero-sub { white-space: normal; }
  .hero-content { max-width: none; padding: clamp(40px, 6vw, 72px) clamp(24px, 6vw, 56px) 210px; }
}

/* ---------- Wieso ---------- */
.wieso { overflow: hidden; }
.bigword { position: absolute; left: 50%; transform: translateX(-50%); font-family: var(--f-head); font-weight: 700; font-size: clamp(90px, 22vw, 280px); line-height: 1; text-transform: uppercase; white-space: nowrap; pointer-events: none; will-change: transform; user-select: none;
  color: transparent; -webkit-text-stroke: 1px rgba(245, 242, 236, 0.16);
  background-image: linear-gradient(90deg, rgba(245, 242, 236, 0.1) 0%, rgba(245, 242, 236, 0.1) var(--fill, 0%), transparent var(--fill, 0%)); -webkit-background-clip: text; background-clip: text; }
.bigword--top { top: clamp(70px, 10vw, 140px); }
.bigword--bottom { bottom: clamp(6px, 2.5vw, 45px); }
.wieso .container { position: relative; }
.wieso .h2 { margin-bottom: 34px; }
.card { position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); transition: border-color 0.3s ease, transform 0.9s var(--ease), opacity 0.9s var(--ease); }
.card--dict { padding: clamp(26px, 4.5vw, 48px); }
.card--dict p { position: relative; font-size: clamp(16px, 1.9vw, 19px); color: var(--ink-85); margin: 0 0 16px; }
.card--dict p:first-of-type { margin-top: 18px; }
.card--dict p:last-child { margin-bottom: 0; }
.dict-head { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; margin-bottom: 8px; }
.dict-word { font-family: var(--f-head); font-weight: 700; font-size: clamp(30px, 4vw, 44px); color: var(--beige); line-height: 1; }
.dict-ipa { position: relative; font-size: 16px; color: var(--ink-55); font-style: italic; }
.tw-ghost { visibility: hidden; }
.tw-live { position: absolute; inset: 0; }
.tw-caret { display: inline-block; width: 1px; height: 1em; margin-left: 2px; vertical-align: -0.12em; background: var(--beige); animation: caret 0.9s steps(1) infinite; }
.tw-done .tw-caret { animation: caret 0.9s steps(1) 3, caret-out 0.4s ease 2.7s forwards; }
@keyframes caret { 50% { opacity: 0; } }
@keyframes caret-out { to { opacity: 0; } }

/* Spotlight, der dem Zeiger folgt (Hintergrund + Kontur) */
.spot { position: relative; }
.spot::before, .spot::after { content: ''; position: absolute; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.45s ease; }
.spot::before { inset: 0; z-index: 0; background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), rgba(217, 201, 163, 0.08), transparent 60%); }
.spot::after { inset: -1px; z-index: 2; padding: 1px; background: radial-gradient(240px circle at var(--sx, 50%) var(--sy, 50%), rgba(217, 201, 163, 0.85), transparent 65%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
@media (hover: hover) { .spot:hover::before, .spot:hover::after { opacity: 1; } .card:hover { border-color: rgba(217, 201, 163, 0.35); } }

/* ---------- Anlässe ---------- */
.anlaesse { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.anlass { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--ink); border: 1px solid rgba(245, 242, 236, 0.14); isolation: isolate;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: border-color 0.3s ease, transform 0.7s var(--ease), clip-path 1.1s var(--ease-io) var(--d, 0ms), box-shadow 0.5s ease; -webkit-tap-highlight-color: transparent; }
.anlass.is-tilting { transition: border-color 0.3s ease, transform 0.12s linear, box-shadow 0.5s ease; }
.anlass:hover { color: var(--ink); border-color: rgba(217, 201, 163, 0.7); }
.anlass img { position: absolute; top: -5%; left: -5%; width: 110%; height: 110%; max-width: none; object-fit: cover; filter: saturate(0.82) contrast(1.04) brightness(0.9); transform: translate3d(var(--ix, 0px), var(--iy, 0px), 0) scale(var(--is, 1)); transition: transform 1.6s var(--ease-soft) var(--d, 0ms), filter 0.5s ease; }
.js .anlass:not(.is-in) img { --is: 1.18; }

.anlass.is-tilting img { transition: transform 0.2s linear, filter 0.5s ease; }
.anlass-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 13, 12, 0) 35%, rgba(13, 13, 12, 0.88) 100%); }
.anlass-glare { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 244, 220, 0.22), transparent 55%); pointer-events: none; }
.anlass-text { position: absolute; left: 20px; right: 20px; bottom: 18px; display: flex; flex-direction: column; gap: 4px; }
.anlass-title { font-family: var(--f-head); font-weight: 700; font-size: clamp(20px, 2vw, 24px); text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.1; }
.anlass-desc { font-size: 14.5px; color: rgba(245, 242, 236, 0.78); line-height: 1.4; }
.anlass-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-family: var(--f-head); font-weight: 600; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--beige); }
.anlass-more svg { width: 14px; height: 14px; transition: transform 0.5s var(--ease); }
@media (hover: hover) {
  .anlass:hover { box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.8); }
  .anlass:hover img { filter: saturate(1) contrast(1.05) brightness(0.96); --is: 1.06; }
  .anlass:hover .anlass-glare { opacity: 1; }
  .anlass:hover .anlass-more svg { transform: translateX(6px); }
}
.anlass:active { transform: perspective(900px) scale(0.98); }

.kurs { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); border: 1px solid rgba(217, 201, 163, 0.45); border-radius: 12px; overflow: hidden; background: var(--bg-2); }
.kurs-media { position: relative; z-index: 1; min-height: 280px; overflow: hidden; }
.kurs-media img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; max-width: none; object-fit: cover; filter: saturate(0.82) contrast(1.04) brightness(0.94); will-change: transform; }
.kurs-body { position: relative; z-index: 1; padding: clamp(26px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; }
.kurs-eyebrow { font-family: var(--f-head); font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--beige); }
.kurs-title { font-family: var(--f-head); font-weight: 700; text-transform: uppercase; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.08; margin: 0; color: var(--ink); }
.kurs-body p { margin: 0; font-size: clamp(16px, 1.8vw, 18px); color: var(--ink-85); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { border: 1px solid rgba(245, 242, 236, 0.22); border-radius: 999px; padding: 6px 14px; font-size: 14.5px; transition: border-color 0.3s ease, background 0.3s ease; }
.kurs:hover .chips span { border-color: rgba(217, 201, 163, 0.45); }

@media (max-width: 900px) { .anlaesse { grid-template-columns: 1fr 1fr; } }

/* ---------- Leistungen ---------- */
.event-grid-sec { overflow: visible; }
.grid-bg, .grid-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-size: 38px 38px; }
.grid-bg { background-image: linear-gradient(rgba(245, 242, 236, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(245, 242, 236, 0.045) 1px, transparent 1px); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); }
.grid-glow { opacity: 0; transition: opacity 0.35s ease; background-image: linear-gradient(rgba(217, 201, 163, 0.55) 1px, transparent 1px), linear-gradient(90deg, rgba(217, 201, 163, 0.55) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(circle 170px at var(--gx, 50%) var(--gy, 50%), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 72%), linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: radial-gradient(circle 170px at var(--gx, 50%) var(--gy, 50%), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 72%), linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-composite: intersect; }
@media (min-width: 761px) {
  .grid-bg, .grid-glow { top: -180px; bottom: -180px; }
  .grid-bg { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%); }
  .grid-glow { -webkit-mask-image: radial-gradient(circle 170px at var(--gx, 50%) var(--gy, 50%), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 72%), linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%); mask-image: radial-gradient(circle 170px at var(--gx, 50%) var(--gy, 50%), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 72%), linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%); }
}
.event-h2 { margin-bottom: 14px; }
.event-head .lead { max-width: 640px; margin: 0 0 44px; }
.leistungen-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.leistung { border: 1px solid var(--line); border-radius: 10px; padding: 26px 24px 28px; background: var(--bg-2); display: flex; flex-direction: column; gap: 12px; transition: border-color 0.3s ease, opacity 0.9s var(--ease) var(--d, 0ms), transform 0.9s var(--ease) var(--d, 0ms); }
.leistung > * { position: relative; z-index: 1; }
@media (hover: hover) { .leistung.is-in:hover { border-color: rgba(217, 201, 163, 0.5); transform: translateY(-4px); } }
.leistung-stat { display: flex; align-items: center; gap: 12px; min-height: clamp(34px, 4vw, 46px); }
.stat { font-family: var(--f-head); font-weight: 700; font-size: clamp(34px, 4vw, 46px); line-height: 1; color: var(--beige); font-variant-numeric: tabular-nums; white-space: nowrap; }
.num { display: inline-block; text-align: right; }
.leistung-title { font-family: var(--f-head); font-weight: 600; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; }
.leistung p { margin: 0; font-size: 15.5px; color: var(--ink-80); }
.infinity { width: clamp(58px, 6.4vw, 78px); height: auto; overflow: visible; }
.infinity path { fill: none; stroke-linecap: round; }
.inf-base { stroke: var(--beige); stroke-width: 7; stroke-dasharray: 100; stroke-dashoffset: 0; }
.js .leistung:not(.is-in) .inf-base { stroke-dashoffset: 100; }
.js .inf-base { transition: stroke-dashoffset 2s var(--ease-calm) calc(var(--d, 0ms) + 0.3s); }
.inf-glow { stroke: #fff6e0; stroke-width: 3; stroke-dasharray: 9 91; animation: inf-run 3.2s linear infinite; opacity: 0.9; }
@keyframes inf-run { to { stroke-dashoffset: -100; } }
.cup-mini { height: clamp(34px, 4vw, 46px); width: auto; }

/* ---------- Social Proof ---------- */
.sp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(30px, 5vw, 70px); align-items: center; }
.sp-photo { position: relative; }
.sp-photo-frame { border-radius: 10px; overflow: hidden; aspect-ratio: 3 / 3.4; }
.sp-zoom { width: 100%; height: 100%; filter: saturate(0.82) contrast(1.04) brightness(0.94); will-change: transform; }
.sp-zoom img { width: 100%; height: 100%; object-fit: cover; }
.badge { position: absolute; z-index: 2; right: -26px; bottom: -26px; width: 128px; height: 128px; border-radius: 50%; background: var(--beige); color: var(--dark); display: grid; place-items: center; box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.7); }
.badge-rot { position: absolute; inset: 0; will-change: transform; }
.badge-spin { position: absolute; inset: 0; animation: spin 22s linear infinite; }
.badge-spin svg { width: 100%; height: 100%; overflow: visible; }
.badge text { font-family: var(--f-head); font-weight: 600; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--dark); }
.badge-dom { width: 32px; height: 40px; overflow: visible; }
.badge-dom .dom-body { fill: var(--dark); }
.badge-dom .dom-body path:nth-child(3) { fill: none; stroke: var(--dark); stroke-width: 0.9; }
.badge-dom .dom-cut { fill: var(--beige); }
@keyframes spin { to { transform: rotate(360deg); } }
.js .badge[data-reveal="pop"] { transition: transform 1.6s var(--ease-soft) 0.1s, opacity 1.2s ease 0.1s; }
.js .badge:not(.is-in) { opacity: 0; transform: scale(0.82) rotate(-35deg); }
.sp-h3 { font-family: var(--f-head); font-weight: 600; font-size: clamp(20px, 2.4vw, 26px); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 16px; color: var(--beige); }
.sp-text p { font-size: clamp(16px, 1.9vw, 19px); color: var(--ink-85); margin: 0 0 16px; }
.sp-text p:last-of-type { margin-bottom: 26px; }
.link-cta { position: relative; display: inline-flex; padding: 6px 0; font-family: var(--f-head); font-weight: 600; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--beige); text-decoration: none; transition: color 0.3s ease, opacity 0.9s var(--ease) var(--d, 0ms), transform 0.9s var(--ease) var(--d, 0ms); }
.link-cta::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; opacity: 0.6; transform-origin: right center; }
.link-arrow { display: inline-block; transition: transform 0.5s var(--ease); }
.scp-cta-mob { display: none; align-items: center; gap: 9px; }
.scp-cta-mob svg { flex: none; }
@media (hover: hover) {
  .link-cta:hover { color: var(--ink); }
  .link-cta:hover::after { animation: line-swap 0.8s var(--ease) forwards; }
  .link-cta:hover .link-arrow { transform: translateX(6px); }
}
@keyframes line-swap { 0% { transform: scaleX(1); transform-origin: right center; } 45% { transform: scaleX(0); transform-origin: right center; } 46% { transform-origin: left center; } 100% { transform: scaleX(1); transform-origin: left center; opacity: 1; } }

/* ---------- Preis-CTA ---------- */
.cta { position: relative; overflow: hidden; padding: clamp(110px, 13vw, 190px) 24px; background: var(--beige); color: var(--dark); text-align: center; }
.wave { position: absolute; left: 0; width: 200%; height: clamp(26px, 4vw, 54px); fill: var(--bg); z-index: 1; pointer-events: none; animation: wave-drift 14s linear infinite; }
.wave--top { top: -1px; }
.wave--bottom { bottom: -1px; animation-duration: 18s; animation-direction: reverse; }
@keyframes wave-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cta-inner { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.cta-cup { line-height: 0; }
.cup-level { transform: translateY(70px); transition: transform 2.4s var(--ease-calm) 0.4s; }
.cta-cup.is-in .cup-level, html:not(.js) .cup-level { transform: translateY(41px); }
.cup-liquid { animation: pre-wave 2.2s linear infinite; }
.cup-steam path { opacity: 0; }
.cta-cup.is-in .cup-steam path, html:not(.js) .cup-steam path { animation: steam 3.2s ease-in-out infinite; }
.cta-cup.is-in .cup-steam path:nth-child(1) { animation-delay: 2.4s; }
.cta-cup.is-in .cup-steam path:nth-child(2) { animation-delay: 2.9s; }
.cta-cup.is-in .cup-steam path:nth-child(3) { animation-delay: 3.4s; }
.cta-cup svg { overflow: visible; }
.steam path { animation: steam 2.6s ease-in-out infinite; }
.steam path:nth-child(2) { animation-delay: 0.9s; }
.steam path:nth-child(3) { animation-delay: 1.95s; }
.cta-h2 { font-family: var(--f-head); font-weight: 700; text-transform: uppercase; font-size: clamp(32px, 5vw, 60px); line-height: 1.08; margin: 0; color: var(--dark); }
.cta-h2 .w { padding-bottom: 0.1em; }
.cta-p { font-size: clamp(16px, 1.9vw, 19px); color: rgba(17, 17, 17, 0.8); margin: 0; text-align: center; }
.cta-l1, .cta-l2 { display: inline; white-space: nowrap; }
.cta-l3 { display: block; }
.cta-mail { font-size: 15px; color: rgba(17, 17, 17, 0.65); margin: 6px 0 0; }
.cta-mail a { color: var(--dark); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cta-mail a:hover { color: var(--dark); text-decoration-thickness: 2px; }
@media (min-width: 761px) {
  .cta-inner { max-width: 1120px; }
  .cta-p { width: 100%; }
}
@media (max-width: 1099px) { .cta-l1, .cta-l2 { white-space: normal; } }

.bean { position: absolute; z-index: 1; width: 40px; height: 56px; pointer-events: none; will-change: transform; }
.cta .bean { color: rgba(17, 17, 17, 0.12); --bean-line: var(--beige); }
.bean--cta1 { left: 9%; top: 24%; width: 34px; height: 48px; }
.bean--cta2 { right: 11%; top: 18%; width: 48px; height: 67px; }
.bean--cta3 { left: 16%; bottom: 18%; width: 26px; height: 36px; }
.bean--cta4 { right: 18%; bottom: 22%; width: 30px; height: 42px; }
.bean--cta5 { left: 30%; top: 11%; width: 22px; height: 31px; }
.bean--cta6 { right: 28%; top: 34%; width: 38px; height: 53px; }
.bean--cta7 { left: 4%; top: 56%; width: 44px; height: 62px; }
.bean--cta8 { right: 33%; bottom: 9%; width: 18px; height: 25px; }

/* ---------- Die Bohne ---------- */
.bohne-sec { overflow: hidden; }
.bohne-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(30px, 5vw, 70px); align-items: center; position: relative; z-index: 2; }
.bohne-media { position: relative; overflow: hidden; border-radius: 10px; aspect-ratio: 3 / 3.6; }
.bohne-media img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; max-width: none; object-fit: cover; will-change: transform; }
.bohne-sec .bean { color: rgba(217, 201, 163, 0.13); --bean-line: var(--bg); }
.bean--b1 { left: 3%; top: 12%; width: 30px; height: 42px; }
.bean--b2 { right: 5%; top: 30%; width: 44px; height: 62px; }
.bean--b3 { left: 46%; bottom: 7%; width: 24px; height: 34px; }

/* ---------- Foto-Marquee ---------- */
.foto-sec { padding: 0 24px clamp(70px, 10vw, 130px); }
.foto-gallery { position: relative; max-width: var(--maxw); margin: 0 auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.foto-track { display: flex; width: max-content; padding: 14px 0; animation: vk-marquee 70s linear infinite; will-change: transform; }
.js .foto-track { animation: none; }
.foto-slide { position: relative; flex: none; width: 230px; height: 290px; margin-right: 18px; border-radius: 8px; overflow: hidden; background: var(--bg-2); transition: transform 0.6s var(--ease), box-shadow 0.6s ease; }
.foto-slide img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease), filter 0.5s ease; filter: saturate(0.9); }
@media (hover: hover) and (min-width: 761px) {
  .foto-slide:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 26px 50px -20px rgba(0, 0, 0, 0.85); }
  .foto-slide:hover img { transform: scale(1.08); filter: saturate(1.05); }
}
.foto-count { display: none; }

/* ---------- FAQ ---------- */
.faq-sec { border-top: 1px solid var(--line-soft); }
.faq-h2 { line-height: 1.28; margin-bottom: 40px; }
.faq-stack { display: flex; flex-direction: column; gap: 10px; }
.faq-item { position: relative; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); padding: 0 22px; transition: border-color 0.3s ease, background 0.3s ease; }
.faq-item[open] { border-color: rgba(217, 201, 163, 0.45); background: #161513; }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 44px; padding: 18px 0; cursor: pointer; list-style: none; font-family: var(--f-head); font-weight: 600; font-size: 16.5px; letter-spacing: 0.04em; transition: color 0.3s ease; -webkit-tap-highlight-color: transparent; }
.faq-item summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .faq-item summary:hover { color: var(--beige); } .faq-item:hover { border-color: rgba(217, 201, 163, 0.35); } }
.faq-icon { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(217, 201, 163, 0.4); transition: transform 0.5s var(--ease), background 0.3s ease; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -0.75px 0 0 -5px; background: var(--beige); border-radius: 2px; transition: transform 0.5s var(--ease), background 0.3s ease; }
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon { transform: rotate(180deg); background: var(--beige); }
.faq-item[open] .faq-icon::before, .faq-item[open] .faq-icon::after { background: var(--dark); }
.faq-item[open] .faq-icon::after { transform: rotate(0deg); }
.faq-a { margin: 0; padding: 0 0 20px; font-size: 15.5px; color: var(--ink-80); }

/* ---------- Footer ---------- */
.footer { position: relative; overflow: hidden; border-top: 1px solid var(--line-soft); padding: clamp(50px, 6vw, 80px) 24px 0; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 36px; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-head { font-family: var(--f-head); font-weight: 600; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-60); }
.footer-head--main { color: var(--ink); }
.footer-col a { position: relative; font-size: 15px; color: var(--ink-70); text-decoration: none; transition: color 0.3s ease; }
.footer-col a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform 0.5s var(--ease); }
.footer-col a:hover { color: var(--beige); }
.footer-col a:hover::after { transform: scaleX(1); transform-origin: left center; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(245, 242, 236, 0.1); font-size: 13px; color: var(--ink-45); }
.footer-copy span { display: block; }
.to-top { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--f-head); font-weight: 500; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-60); text-decoration: none; }
.to-top svg { width: 14px; height: 14px; transform: rotate(-90deg); transition: transform 0.5s var(--ease); }
.to-top:hover svg { transform: rotate(-90deg) translateX(4px); }
/* Wortmarke: auf volle Breite eingepasst, zurückhaltend in gedecktem Weiß */
@property --wm { syntax: '<percentage>'; inherits: false; initial-value: 115%; }
.wordmark { max-width: var(--maxw); margin: clamp(36px, 5vw, 64px) auto 0; overflow: hidden; line-height: 0; user-select: none; pointer-events: none; }
.wordmark-text { display: inline-block; font-family: var(--f-head); font-weight: 700; font-size: 15vw; line-height: 0.8; letter-spacing: -0.012em; text-transform: uppercase; white-space: nowrap; padding-top: 0.04em; margin-bottom: -0.035em;
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(180deg, rgba(245, 242, 236, 0.13) 0%, rgba(245, 242, 236, 0.06) 55%, rgba(245, 242, 236, 0.01) 100%); }
.js .wordmark-text { opacity: 0; filter: blur(14px); transform: scale(1.025); -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wm) - 115%), transparent var(--wm)); mask-image: linear-gradient(90deg, #000 calc(var(--wm) - 115%), transparent var(--wm)); --wm: 0%; }
.js .wordmark.is-in .wordmark-text { animation: wm-in 2.6s var(--ease-soft) 0.15s forwards; }
@keyframes wm-in { 0% { opacity: 0; filter: blur(14px); transform: scale(1.025); --wm: 0%; } 35% { opacity: 1; } 100% { opacity: 1; filter: blur(0); transform: none; --wm: 230%; } }

/* ---------- Mobile CTA-Leiste ---------- */
.mbar { display: none; }
@media (max-width: 760px) {
  .mbar { display: block; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 999; transform: translateY(calc(100% + 40px)); transition: transform 0.6s var(--ease); pointer-events: none; }
  .mbar.is-visible { transform: none; pointer-events: auto; }
  html.is-locked .mbar { transform: translateY(calc(100% + 40px)); }
}
.mbar-btn { display: flex; align-items: center; gap: 12px; max-width: 440px; margin: 0 auto; padding: 8px 8px 8px 8px; min-height: 60px; border-radius: 999px; background: var(--beige); color: var(--dark); text-decoration: none; box-shadow: 0 18px 44px -10px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(13, 13, 12, 0.2); -webkit-tap-highlight-color: transparent; transition: transform 0.2s ease; }
.mbar-btn:hover, .mbar-btn:focus-visible { color: var(--dark); }
.mbar-btn:active { transform: scale(0.97); }
.mbar-cup { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--dark); color: var(--beige); }
.mbar-cup svg { width: 22px; height: 24px; }
.mbar-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.mbar-text strong { font-family: var(--f-head); font-weight: 700; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; }
.mbar-text small { font-size: 12.5px; color: rgba(17, 17, 17, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbar-arrow { flex: none; margin-left: auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(17, 17, 17, 0.25); }
.mbar-arrow svg { width: 18px; height: 18px; animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 0%, 60%, 100% { transform: none; } 75% { transform: translateX(4px); } }

/* ---------- Angebots-Popup ---------- */
.modal { position: fixed; inset: 0; z-index: 2147483647; visibility: hidden; pointer-events: none; transition: visibility 0s linear 0.75s; }
.modal.is-open { visibility: visible; pointer-events: auto; transition: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(218, 201, 162, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); clip-path: circle(0px at var(--ox, 50%) var(--oy, 50%)); transition: clip-path 0.75s var(--ease-io); }
.modal.is-open .modal-backdrop { clip-path: circle(150vmax at var(--ox, 50%) var(--oy, 50%)); }
.modal-panel { position: absolute; top: 2vh; right: 2vw; bottom: 2vh; left: 2vw; border-radius: 10px; overflow: hidden; background: var(--bg); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.6); opacity: 0; transform: translateY(30px) scale(0.96); transition: opacity 0.35s ease, transform 0.5s var(--ease); }
.modal.is-open .modal-panel { opacity: 1; transform: none; transition: opacity 0.5s ease 0.2s, transform 0.8s var(--ease) 0.2s; }
.modal-panel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg); opacity: 0; transition: opacity 0.5s ease; }
.modal.is-shown iframe { opacity: 1; transition: opacity 0.8s ease 0.42s; }
.modal-loader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: rgba(217, 201, 163, 0.75); font-family: var(--f-head); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; transition: opacity 0.4s ease; }
.modal-loader svg { overflow: visible; }
.modal-loader svg { width: 104px; height: 112px; }
.modal-loader span { display: none; }
.modal.is-shown .modal-loader { opacity: 0; transition: opacity 0.45s ease; }
.modal-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(217, 201, 163, 0.35); border-radius: 50%; background: rgba(13, 13, 12, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--beige); cursor: pointer; transition: transform 0.5s var(--ease), background 0.3s ease, border-color 0.3s ease; }
.modal-close span, .modal-close span::before { position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; background: currentColor; border-radius: 2px; }
.modal-close span { transform: rotate(45deg); }
.modal-close span::before { content: ''; left: 0; top: 0; margin: 0; transform: rotate(90deg); }
.modal-close:hover { transform: rotate(90deg); background: var(--beige); color: var(--dark); border-color: var(--beige); }
@media (max-width: 760px) {
  .modal-panel { top: max(10px, env(safe-area-inset-top, 0px)); right: 8px; bottom: max(10px, env(safe-area-inset-bottom, 0px)); left: 8px; border-radius: 14px; }
  .modal-close { top: 8px; right: 8px; }
}

/* ---------- Custom Cursor (nur Maus) ---------- */
.cursor { display: none; }
html.has-cursor .cursor { display: block; position: fixed; top: 0; left: 0; z-index: 2147483646; pointer-events: none; }
html.has-cursor, html.has-cursor body, html.has-cursor a, html.has-cursor button, html.has-cursor summary { cursor: none; }
html.has-cursor.is-locked, html.has-cursor.is-locked body, html.has-cursor .modal, html.has-cursor .modal * { cursor: auto; }
html.has-cursor .modal-close { cursor: pointer; }
html.is-locked .cursor { opacity: 0; }
.cursor-dot, .cursor-ring { position: absolute; top: 0; left: 0; border-radius: 50%; will-change: transform; }
.cursor-dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--beige); transition: opacity 0.3s ease, background 0.3s ease; }
.cursor-ring { width: 90px; height: 90px; margin: -45px 0 0 -45px; }
.cursor-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(217, 201, 163, 0.6); transform: scale(0.36); transition: transform 0.45s var(--ease), background 0.35s ease, border-color 0.35s ease; }
.cursor-label { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-head); font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dark); opacity: 0; transform: scale(0.6); transition: opacity 0.3s ease, transform 0.45s var(--ease); }
.cursor.is-hover .cursor-ring::before { transform: scale(0.56); background: rgba(217, 201, 163, 0.12); border-color: rgba(217, 201, 163, 0.85); }
.cursor.is-solid .cursor-ring::before { transform: scale(0.44); background: rgba(217, 201, 163, 0.26); border-color: rgba(217, 201, 163, 0.95); }
.cursor.has-label .cursor-ring::before { transform: scale(1); background: var(--beige); border-color: var(--beige); }
.cursor.has-label .cursor-label { opacity: 1; transform: none; }
.cursor.has-label .cursor-dot { opacity: 0; }
.cursor.is-down .cursor-ring::before { transform: scale(0.3); }
.cursor.is-light .cursor-dot { background: var(--dark); }
.cursor.is-light .cursor-ring::before { border-color: rgba(17, 17, 17, 0.55); }
.cursor.is-light.has-label .cursor-ring::before { background: var(--dark); border-color: var(--dark); }
.cursor.is-light .cursor-label { color: var(--beige); }
.cursor.is-hidden .cursor-dot, .cursor.is-hidden .cursor-ring { opacity: 0; }

/* =========================================================
   Mobil (≤ 760 px)
   ========================================================= */
@media (max-width: 760px) {
  /* Hero: Foto als Vollflächen-Hintergrund hinter dem Text, langsamer Schwenk */
  .hero { min-height: 92vh; align-items: stretch; }
  .hero-frame-wrap { bottom: 44px; }
  .hero-pan { transform: none; }
  .hero-media { object-position: 58% 100%; animation: vk-hero-pan 22s ease-in-out infinite alternate; }
  @keyframes vk-hero-pan { from { object-position: 18% 100%; } to { object-position: 88% 100%; } }
  .hero-scrim { background: linear-gradient(180deg, rgba(13, 13, 12, 0.78) 0%, rgba(13, 13, 12, 0.62) 45%, rgba(13, 13, 12, 0.72) 100%); }
  .hero-content { min-height: 100%; align-items: center; justify-content: center; text-align: center; padding: clamp(46px, 11vw, 78px) 22px clamp(120px, 22vw, 150px); }
  .hero-logo { width: clamp(148px, 40vw, 196px); margin-bottom: 18px; }
  .hero-h1 { font-size: clamp(27px, 7.6vw, 38px); line-height: 1.08; margin-bottom: 16px; }
  .hero-p { font-size: 16px; max-width: 33ch; margin: 0 auto 26px; }
  .hero-sub-tail { display: none; }
  .btn--hero { font-size: 14px; padding: 8px 8px 8px 28px; gap: 14px; }
  .btn--hero .btn-icon { width: 36px; height: 36px; }
  .scroll-cue { display: none; }

  .bigword--top { top: clamp(125px, 34vw, 210px); }
  .bigword--bottom { bottom: clamp(6px, 3vw, 30px); }

  .anlaesse { gap: 10px; }
  .anlass-text { left: 14px; right: 14px; bottom: 14px; }
  .anlass-desc { display: none; }
  .anlass-more { font-size: 11.5px; letter-spacing: 0.12em; }

  .kurs { grid-template-columns: 1fr; }
  .kurs-media { min-height: 210px; }
  .kurs-body { align-items: center; text-align: center; }
  .chips { justify-content: center; }

  /* "Du hast das Event": Sticky-Stapel – Karten schieben sich übereinander */
  .leistungen-stack { display: block; }
  .event-h2 { margin: 0; padding: 12px 0 16px; }
  .event-head .lead { margin: 0 0 24px; padding-bottom: 14px; }
  .leistung { position: sticky; margin: 0 0 18px; box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.55); padding: 16px 18px 18px; gap: 6px; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; }
  .leistung:last-child { margin-bottom: 0; }
  .leistung-stat { min-height: 0; grid-row: 1; grid-column: 1; }
  .stat { font-size: 30px; }
  .infinity { width: 52px; }
  .cup-mini { height: 30px; }
  .leistung-title { grid-row: 1; grid-column: 2; }
  .leistung p { grid-column: 1 / -1; font-size: 15px; line-height: 1.45; }

  /* Social Proof */
  .badge { right: -8px; bottom: -22px; width: 104px; height: 104px; }
  .badge text { font-size: 11px; }
  .badge-dom { width: 26px; height: 33px; }
  .scp-cta-desk { display: none; }
  .scp-cta-mob { display: inline-flex; }

  /* Preis-CTA: jede Zeile für sich, gut lesbar */
  .cta-h2 { text-wrap: balance; }
  .cta-l1, .cta-l2, .cta-l3 { display: block; white-space: normal; }
  .cta-sp { display: none; }
  .cta-p { width: 100%; max-width: 34ch; text-wrap: balance; }
  .bean--cta1 { left: 4%; top: 12%; }
  .bean--cta2 { right: 3%; top: 9%; width: 36px; height: 50px; }
  .bean--cta3 { left: 6%; bottom: 10%; }
  .bean--cta4 { right: 7%; bottom: 13%; }
  .bean--cta5 { left: 26%; top: 5%; }
  .bean--cta6 { right: 5%; top: 46%; width: 30px; height: 42px; }
  .bean--cta7 { left: 2%; top: 44%; width: 28px; height: 39px; }
  .bean--cta8 { right: 30%; bottom: 5%; }

  /* Die Bohne: Bild als kompaktes Banner über dem Text */
  .bohne-grid { display: block; }
  .bohne-media { aspect-ratio: 16 / 10; margin-bottom: 24px; }
  .bohne-sec .bean { display: none; }

  /* Foto-Marquee → Coverflow-Slideshow */
  .foto-gallery { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; padding: 34px 0 14px; overscroll-behavior-x: contain; }
  .foto-gallery::-webkit-scrollbar { display: none; }
  .foto-track { width: max-content; align-items: center; padding: 0 27vw; transform: none !important; }
  .foto-slide { scroll-snap-align: center; width: 60vw; height: 76vw; margin-right: 16px; border-radius: 14px; transform: scale(0.8); opacity: 0.45; box-shadow: 0 26px 54px rgba(0, 0, 0, 0.55); transition: transform 0.5s var(--ease), opacity 0.5s ease; }
  .foto-slide.is-center { transform: scale(1); opacity: 1; }
  .foto-slide.is-clone { display: none; }
  .foto-count { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; font-family: var(--f-head); font-weight: 500; font-size: 12px; letter-spacing: 0.2em; color: var(--ink-60); font-variant-numeric: tabular-nums; }
  .foto-count-bar { position: relative; width: 90px; height: 1px; background: rgba(245, 242, 236, 0.18); overflow: hidden; }
  .foto-count-bar span { position: absolute; inset: 0; background: var(--beige); transform-origin: 0 50%; transform: scaleX(0.077); transition: transform 0.6s var(--ease); }

  /* FAQ: gleicher Sticky-Stapel, Überschrift bleibt sichtbar */
  .faq-stack { display: block; }
  .faq-h2 { padding: 12px 0 16px; margin: 0; }
  .faq-item { position: sticky; margin-bottom: 10px; box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.5); }
  .faq-item:last-child { margin-bottom: 0; }
  .faq-item summary { font-size: 16px; }

  .footer { padding-bottom: 0; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .wordmark { margin-top: 32px; }
}
@media (max-width: 480px) {
  .hero-h1 { font-size: 31px; }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; }
  .pre-liquid-level, .cup-level { transform: translateY(41px); }
  .pre-draw { stroke-dashoffset: 0; }
}

/* =========================================================
   Unterseiten (Anlässe & Barista-Kurs)
   ========================================================= */
[hidden] { display: none !important; }
@property --ring { syntax: '<length>'; inherits: false; initial-value: 35px; }

.sub-hero { position: relative; overflow: clip; display: flex; align-items: center; min-height: min(100svh, 940px); padding: clamp(28px, 4vw, 48px) 24px clamp(64px, 8vw, 110px); background: radial-gradient(ellipse 60% 55% at 12% -5%, rgba(217, 201, 163, 0.13), transparent 60%), var(--bg); }
.sub-hero-grid { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.sub-hero-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.sub-hero .hero-logo { width: clamp(150px, 15vw, 210px); margin-bottom: clamp(28px, 4.5vw, 56px); }
.sub-hero .eyebrow { color: var(--beige); margin-bottom: 18px; }
.js .sub-hero .eyebrow { opacity: 0; transition: opacity 1.4s var(--ease-soft) 0.3s; }
.is-ready .sub-hero .eyebrow { opacity: 1; }
.is-ready .sub-hero .eyebrow::before { transform: none; }
.sub-h1.hero-h1 { font-size: clamp(40px, 5.4vw, 82px); line-height: 1.02; margin: 0 0 24px; }
.sub-h1 .line + .line > span { color: var(--beige); }
.sub-hero .hero-p { font-size: clamp(17px, 1.4vw, 20px); max-width: 32em; margin: 0 0 34px; }
.sub-stats { display: flex; flex-wrap: wrap; gap: 22px 40px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.js .sub-stats { opacity: 0; transition: opacity 1.4s var(--ease-soft) 1.3s; }
.is-ready .sub-stats { opacity: 1; }
.sub-stat { display: flex; flex-direction: column; gap: 4px; }
.sub-stat strong { font-family: var(--f-head); font-weight: 700; font-size: clamp(26px, 2.6vw, 34px); line-height: 1; color: var(--beige); }
.sub-stat span { font-family: var(--f-head); font-weight: 500; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-60); }

.sub-hero-media { position: relative; justify-self: center; width: min(100%, 470px); }
.sub-photo { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 18px 18px; overflow: hidden; background: var(--bg-2); border: 1px solid rgba(217, 201, 163, 0.2); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9); }
.sub-zoom { position: absolute; inset: 0; }
.sub-photo img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; max-width: none; object-fit: cover; filter: saturate(0.85) contrast(1.04) brightness(0.94); will-change: transform; }
.js .sub-photo { opacity: 0; transform: scale(0.97); transition: opacity 1.6s var(--ease-soft) 0.35s, transform 1.8s var(--ease-soft) 0.35s; }
.js .sub-zoom { transform: scale(1.12); transition: transform 3.6s var(--ease-soft) 0.3s; }
.is-ready .sub-photo, .is-ready .sub-zoom { opacity: 1; transform: none; }
.sub-badge { position: absolute; z-index: 2; left: -40px; bottom: 9%; width: 128px; height: 128px; border-radius: 50%; background: var(--bg); border: 1px solid rgba(217, 201, 163, 0.5); display: grid; place-items: center; box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55); }
.sub-badge .badge-spin { animation-duration: 26s; }
.sub-badge text { font-family: var(--f-head); font-weight: 600; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; fill: var(--beige); }
.sub-badge-cup { width: 38px; height: 41px; overflow: visible; }
.js .sub-badge { opacity: 0; transform: scale(0.85) rotate(-30deg); transition: opacity 1.2s ease 1.1s, transform 1.6s var(--ease-soft) 1.1s; }
.is-ready .sub-badge { opacity: 1; transform: none; }
/* Kaffee-Ringe, die sich vom Badge aus ausbreiten */
.sub-rings { position: absolute; z-index: -1; left: 24px; bottom: calc(9% + 64px); width: 1500px; height: 1500px; transform: translate(-50%, 50%); pointer-events: none; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 calc(var(--ring) - 1px), rgba(217, 201, 163, 0.075) calc(var(--ring) - 1px) var(--ring), transparent var(--ring) 70px);
  -webkit-mask-image: radial-gradient(circle, #000 0 16%, transparent 60%); mask-image: radial-gradient(circle, #000 0 16%, transparent 60%); }
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) { .sub-rings { animation: rings 7s linear infinite; } }
@keyframes rings { from { --ring: 1px; } to { --ring: 70px; } }

.sub-ticker { position: relative; overflow: hidden; padding: 13px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }

/* Referenzen + Google-Bewertungen */
.proof { padding: clamp(44px, 6vw, 76px) 24px; }
.proof-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.proof-row--solo { justify-content: center; }
.proof-roll { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.proof-roll .eyebrow { margin: 0; }
.roll { display: block; height: 1.25em; overflow: hidden; font-family: var(--f-head); font-weight: 700; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.25; text-transform: uppercase; letter-spacing: 0.02em; }
.roll-track { display: flex; flex-direction: column; }
.roll-track span { display: block; height: 1.25em; white-space: nowrap; }
.rev-toggle { display: flex; align-items: center; gap: 16px; padding: 14px 22px 14px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.3s ease, background 0.3s ease, opacity 1.3s var(--ease-soft) var(--d, 0ms), translate 1.3s var(--ease-soft) var(--d, 0ms); }
.rev-toggle:hover { border-color: rgba(217, 201, 163, 0.55); }
.rev-stars { color: var(--beige); font-size: 22px; letter-spacing: 3px; line-height: 1; }
.rev-label { display: flex; flex-direction: column; gap: 3px; }
.rev-label strong { font-family: var(--f-head); font-weight: 600; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; }
.rev-label small { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-60); }
.rev-chevron { display: inline-block; font-size: 10px; transition: transform 0.6s var(--ease-soft); }
.rev-toggle[aria-expanded="true"] .rev-chevron { transform: rotate(180deg); }
.reviews { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.9s var(--ease-soft); }
.reviews.is-open { grid-template-rows: 1fr; }
.reviews-inner { overflow: hidden; min-height: 0; }
.rev-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 28px 2px 6px; overscroll-behavior-x: contain; }
.rev-track::-webkit-scrollbar { display: none; }
.rev-card { flex: 0 0 min(360px, 84%); scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 22px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); opacity: 0; transform: translateY(14px); transition: opacity 0.9s var(--ease-soft) calc(var(--i, 0) * 90ms + 0.2s), transform 0.9s var(--ease-soft) calc(var(--i, 0) * 90ms + 0.2s); }
.reviews.is-open .rev-card { opacity: 1; transform: none; }
.rev-card .rev-stars { font-size: 15px; }
.rev-card p { flex: 1; margin: 0; font-size: 15.5px; color: var(--ink-85); }
.rev-card small { font-family: var(--f-head); font-weight: 500; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-45); }
.rev-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0 4px; }
.rev-nav > div { display: flex; gap: 10px; }
.rev-nav a { font-family: var(--f-head); font-weight: 500; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--beige); text-decoration: none; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(217, 201, 163, 0.4); background: transparent; color: var(--beige); cursor: pointer; transition: background 0.3s ease, color 0.3s ease; }
.icon-btn:hover { background: var(--beige); color: var(--dark); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn--prev svg { transform: rotate(180deg); }

/* Highlight-Slider (Hochzeit) */
.hl-sec { padding: clamp(20px, 3vw, 40px) 24px clamp(70px, 9vw, 120px); }
.hl { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--bg-2); }
.hl-media { position: relative; min-height: 440px; overflow: hidden; }
.hl-media img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; max-width: none; object-fit: cover; filter: saturate(0.85) contrast(1.04) brightness(0.92); will-change: transform; }
.hl-body { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: clamp(28px, 4vw, 54px); min-width: 0; }
.hl-track { display: flex; flex: 1; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.hl-track::-webkit-scrollbar { display: none; }
.hl-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding-right: 4px; }
.hl-kicker { display: flex; align-items: center; gap: 12px; font-family: var(--f-head); font-weight: 600; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-60); }
.hl-kicker svg { flex: none; width: 30px; height: 30px; }
.hl-slide h2 { margin: 0; font-family: var(--f-head); font-weight: 700; font-size: clamp(26px, 3vw, 38px); line-height: 1.08; text-transform: uppercase; }
.hl-slide p { margin: 0; font-size: clamp(16px, 1.6vw, 18px); color: var(--ink-85); }
.hl-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hl-dots { display: flex; gap: 8px; }
.hl-dots button { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(245, 242, 236, 0.25); cursor: pointer; transition: width 0.6s var(--ease-soft), background 0.4s ease; }
.hl-dots button::after { content: ''; position: absolute; inset: -14px -6px; }
.hl-dots button.is-active { width: 28px; background: var(--beige); }
.hl-arrows { display: flex; gap: 10px; }

/* Ablauf */
.steps-sec { border-top: 1px solid var(--line-soft); }
.steps-sec .h2 .accent { color: var(--beige); }
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.steps-line { position: absolute; left: 22px; right: 22px; top: 22px; height: 1px; background: var(--line); overflow: hidden; }
.steps-line::after { content: ''; position: absolute; inset: 0; background: var(--beige); transform-origin: left center; transform: scaleX(0); transition: transform 2.6s var(--ease-calm) 0.2s; }
.steps.is-in .steps-line::after, html:not(.js) .steps-line::after { transform: none; }
.step { position: relative; display: flex; flex-direction: column; gap: 18px; --step-gap: 0.75s; }
.js .step { opacity: 0; translate: 0 16px; transition: opacity 1.2s var(--ease-soft) calc(var(--i) * var(--step-gap) + 0.2s), translate 1.2s var(--ease-soft) calc(var(--i) * var(--step-gap) + 0.2s); }
.steps.is-in .step { opacity: 1; translate: none; }
.step-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-family: var(--f-head); font-weight: 700; font-size: 16px; color: var(--beige); background: var(--bg); border: 1px solid rgba(217, 201, 163, 0.45); transition: background 0.8s ease calc(var(--i) * var(--step-gap) + 0.5s), color 0.8s ease calc(var(--i) * var(--step-gap) + 0.5s); }
.steps.is-in .step-num, html:not(.js) .step-num { background: var(--beige); color: var(--dark); }
.step-title { margin-bottom: 6px; font-family: var(--f-head); font-weight: 600; font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; }
.step p { margin: 0; font-size: 15.5px; color: var(--ink-80); }
.needs { margin-top: clamp(34px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; }
.needs .eyebrow { margin: 0; }
.needs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.needs li { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.needs li svg { flex: none; width: 18px; height: 18px; color: var(--beige); }

/* Angebots-CTA (Unterseiten) */
.cta-grid { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 30px 60px; text-align: left; }
.cta-title { display: flex; align-items: center; gap: clamp(18px, 3vw, 34px); }
.cta-title .cta-h2 { font-size: clamp(38px, 5.4vw, 68px); line-height: 1; }
.cta-action { display: flex; flex-direction: column; align-items: center; width: fit-content; gap: 12px; }
.cta-action small { text-align: center; font-size: 14px; color: rgba(17, 17, 17, 0.65); }
.cta-grid--form { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
.cta-grid--form .cta-title { flex-direction: column; align-items: flex-start; }
.cta-lead { margin: 18px 0 0; font-size: clamp(16px, 1.8vw, 19px); color: rgba(17, 17, 17, 0.8); }

/* Kurs-Anfrageformular */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: clamp(22px, 3vw, 34px); border-radius: 16px; background: rgba(13, 13, 12, 0.95); color: var(--ink); color-scheme: dark; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6); text-align: left; }
.form label { display: flex; flex-direction: column; gap: 6px; font-family: var(--f-head); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-70); }
.form .full { grid-column: 1 / -1; }
.form input, .form select, .form textarea { width: 100%; min-height: 46px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font-family: var(--f-body); font-size: 16px; letter-spacing: normal; text-transform: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--beige); box-shadow: 0 0 0 3px rgba(217, 201, 163, 0.18); }
.form .form-check { flex-direction: row; align-items: center; gap: 12px; font-family: var(--f-body); font-size: 15px; letter-spacing: normal; text-transform: none; color: var(--ink-85); }
.form .form-check input { width: 20px; min-height: 0; height: 20px; padding: 0; accent-color: var(--beige); flex: none; }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 4px; }
.form-err { grid-column: 1 / -1; margin: 0; color: #f1a38f; font-size: 15px; }
.form-sent { padding: clamp(28px, 4vw, 44px); border-radius: 16px; background: rgba(13, 13, 12, 0.95); color: var(--ink); text-align: left; }
.form-sent strong { display: block; margin-bottom: 8px; font-family: var(--f-head); font-weight: 700; font-size: 34px; text-transform: uppercase; color: var(--beige); }
.form-sent p { margin: 0; color: var(--ink-85); }
.form .btn:disabled { opacity: 0.6; cursor: wait; }

/* FAQ (Unterseiten) */
.sub-faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 90px); align-items: start; }
.sub-faq-intro { position: sticky; top: 110px; }
.sub-faq-intro .h2 { margin-bottom: 18px; }
.sub-faq-intro p { margin: 0; color: var(--ink-70); }
.sub-faq-intro a { color: var(--beige); }
.faq-list { display: flex; flex-direction: column; gap: 10px; }

/* Weitere Anlässe */
.more-sec { border-top: 1px solid var(--line-soft); }

@media (max-width: 980px) {
  .sub-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
}
@media (max-width: 760px) {
  .sub-hero { min-height: 0; padding: 26px 22px 60px; }
  .sub-hero-grid { grid-template-columns: 1fr; gap: 46px; }
  .sub-hero-text { align-items: center; text-align: center; }
  .sub-hero .hero-logo { width: 150px; margin-bottom: 30px; }
  .sub-hero .eyebrow { justify-content: center; }
  .sub-hero .eyebrow::after { content: ''; flex: none; width: 28px; height: 1px; background: currentColor; opacity: 0.6; }
  .sub-h1.hero-h1 { font-size: clamp(36px, 10.6vw, 50px); }
  .sub-hero .hero-p { font-size: 16.5px; max-width: 34ch; margin: 0 auto 28px; }
  .sub-stats { justify-content: center; gap: 18px 28px; }
  .sub-hero-media { width: min(84%, 380px); }
  .sub-badge { left: -18px; width: 104px; height: 104px; }
  .sub-badge-cup { width: 30px; height: 33px; }
  .proof-row { flex-direction: column; align-items: flex-start; }
  .rev-toggle { width: 100%; }
  .hl { grid-template-columns: 1fr; }
  .hl-media { min-height: 260px; }
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .steps-line { left: 22px; right: auto; top: 22px; bottom: 22px; width: 1px; height: auto; }
  .steps-line::after { transform-origin: center top; transform: scaleY(0); }
  .step { flex-direction: row; align-items: flex-start; gap: 18px; --step-gap: 0.35s; }
  .step-num { flex: none; }
  .step-title { margin-top: 10px; }
  .cta-grid, .cta-grid--form { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .cta-title { flex-direction: column; }
  .cta-grid--form .cta-title { align-items: center; }
  .cta-action { align-items: center; }
  .form { grid-template-columns: 1fr; width: 100%; }
  .form-foot { flex-direction: column; align-items: stretch; }
  .form-foot .btn { justify-content: space-between; }
  .sub-faq { grid-template-columns: 1fr; }
  .sub-faq-intro { position: static; text-align: center; }
  .sub-faq-intro .eyebrow { justify-content: center; }
}
.sub-h1 .line > span { white-space: normal; }

/* Unterseiten mobil: Logo – Bogenfoto mit Badge – Text, editorial gestapelt */
@media (max-width: 760px) {
  .sub-hero { display: block; min-height: 0; padding: 18px 0 46px; background: var(--bg); }
  .sub-hero-grid { display: flex; flex-direction: column; gap: 0; padding: 0; }
  .sub-hero-text { display: contents; }
  .sub-hero-text > a:first-child { order: 0; align-self: center; }
  .sub-hero .hero-logo { width: 124px; margin: 0; }
  .sub-hero-media { order: 1; position: relative; align-self: stretch; width: auto; max-width: 420px; margin: 22px 22px 0; }
  @media (min-width: 465px) { .sub-hero-media { align-self: center; width: 420px; } }
  .sub-photo { aspect-ratio: 4 / 4.5; border-radius: 999px 999px 24px 24px; }
  .sub-photo::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(13, 13, 12, 0) 52%, rgba(13, 13, 12, 0.55) 78%, var(--bg) 100%); }
  .sub-badge { left: auto; right: -4px; bottom: 16%; width: 92px; height: 92px; }
  .sub-badge text { font-size: 11px; }
  .sub-badge-cup { width: 26px; height: 28px; }
  .sub-rings { display: block; width: 1100px; height: 1100px; left: calc(100% - 42px); bottom: calc(16% + 46px);
    background: repeating-radial-gradient(circle, transparent 0 calc(var(--ring) - 1px), rgba(217, 201, 163, 0.12) calc(var(--ring) - 1px) var(--ring), transparent var(--ring) 64px), radial-gradient(circle, rgba(217, 201, 163, 0.24) 0%, rgba(217, 201, 163, 0.09) 24%, transparent 46%);
    -webkit-mask-image: radial-gradient(circle, #000 0 22%, transparent 64%); mask-image: radial-gradient(circle, #000 0 22%, transparent 64%); }
  @media (prefers-reduced-motion: no-preference) { .sub-rings { animation: rings 7s linear infinite; } }
  .sub-hero .eyebrow { order: 2; position: relative; z-index: 2; align-self: center; flex-direction: column; gap: 12px; margin: -66px 22px 50px; text-shadow: 0 1px 10px rgba(13, 13, 12, 0.6); }
  .sub-hero .eyebrow::before { order: 2; transform-origin: center; }
  .sub-hero .eyebrow::after { display: none; }
  .sub-h1.hero-h1 { order: 3; text-align: center; padding: 0 22px; font-size: clamp(34px, 10.2vw, 46px); line-height: 1.02; margin: 0 0 16px; }
  .sub-hero .hero-p { order: 4; text-align: center; padding: 0 22px; font-size: 16px; max-width: none; margin: 0 0 26px; }
  .sub-hero .hero-cta { order: 5; align-self: center; }
  .sub-stats { order: 6; justify-content: center; margin: 30px 22px 0; }
}

/* Morph Tasse ↔ Event-Symbol */
.cup-fill [clip-path] { transition: opacity 0.5s ease; }
.cup-fill.is-morphing .cup-steam path { animation: none !important; opacity: 1; transform: none; transition: opacity 0.4s ease; }
.cup-fill path { stroke-linejoin: round; }
.cta-title .cta-cup .cup-fill { width: 96px; height: 104px; }
@media (max-width: 760px) { .cta-title .cta-cup .cup-fill { width: 84px; height: 91px; } }

/* =========================================================
   Angebotsrechner (/kaffeebar-mieten-koeln/)
   ========================================================= */
.page-angebot { background: radial-gradient(ellipse 70% 40% at 50% -10%, rgba(217, 201, 163, 0.12), transparent 60%), var(--bg); }
.ang { padding: clamp(28px, 5vw, 64px) 20px 120px; }
.ang-intro { max-width: 760px; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.ang-logo img { width: clamp(140px, 16vw, 200px); height: auto; margin-bottom: 22px; }
.ang-h1 { margin: 0 0 12px; font-family: var(--f-head); font-weight: 700; font-size: clamp(32px, 5vw, 56px); line-height: 1.05; text-transform: uppercase; }
.ang-lead { margin: 0 auto; max-width: 36em; color: var(--ink-80); font-size: clamp(16px, 1.6vw, 18px); }
.is-embed .ang { padding-top: 28px; }
.is-embed .ang-logo img { width: 130px; margin-bottom: 14px; }
.is-embed .ang-h1 { font-size: clamp(28px, 4vw, 44px); }
/* Intro wie auf der alten Angebotsseite: Elemente gleiten nacheinander herein */
.intro-wait [data-intro] { opacity: 0; transform: translateY(26px); }
.intro-play [data-intro] { transition: opacity 0.9s cubic-bezier(0.22, 0.9, 0.3, 1), transform 0.9s cubic-bezier(0.22, 0.9, 0.3, 1); transition-delay: var(--d, 0ms); }

.ang-progress { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 26px 0 0; padding: 0; counter-reset: s; }
.ang-progress a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px 6px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-70); text-decoration: none; font-family: var(--f-head); font-weight: 500; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease; }
.ang-progress a span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(245, 242, 236, 0.08); color: var(--ink); font-size: 12px; letter-spacing: 0; transition: background 0.3s ease, color 0.3s ease; }
.ang-progress a.is-active { border-color: rgba(217, 201, 163, 0.6); color: var(--ink); }
.ang-progress a.is-active span { background: var(--beige); color: var(--dark); }

.ang-layout { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.ang-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ang-card { scroll-margin-top: 24px; padding: clamp(22px, 3.4vw, 36px); border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line); }
.ang-step-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 26px; }
.ang-num { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--beige); color: var(--dark); font-family: var(--f-head); font-weight: 700; font-size: 17px; }
.ang-step-head h2 { margin: 2px 0 4px; font-family: var(--f-head); font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.1; text-transform: uppercase; }
.ang-step-head p { margin: 0; color: var(--ink-70); font-size: 15.5px; }

.fld { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0 0 20px; padding: 0; border: 0; }
.fld:last-child { margin-bottom: 0; }
.fld-label { font-family: var(--f-head); font-weight: 500; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-60); padding: 0; }
.fld-label i { font-style: normal; letter-spacing: 0.06em; text-transform: none; color: var(--ink-45); }
legend.fld-label { margin-bottom: 8px; }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.fld-row--street { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.fld-row--city { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.fld-row--dates { grid-template-columns: 1fr; max-width: 360px; }
.fld-row--dates.is-multi { grid-template-columns: 1fr 1fr; max-width: none; }
.inp { width: 100%; min-height: 50px; padding: 13px 15px; border-radius: 12px; border: 1px solid rgba(245, 242, 236, 0.18); background: var(--bg); color: var(--ink); color-scheme: dark; font-family: var(--f-body); font-size: 16px; line-height: 1.3; transition: border-color 0.25s ease, box-shadow 0.25s ease; -webkit-appearance: none; appearance: none; }
textarea.inp { resize: vertical; min-height: 116px; }
.inp::placeholder { color: rgba(245, 242, 236, 0.38); }
.inp:hover { border-color: rgba(245, 242, 236, 0.3); }
.inp:focus { outline: none; border-color: var(--beige); box-shadow: 0 0 0 3px rgba(217, 201, 163, 0.18); }
input[type="date"].inp { min-height: 50px; }
input[type="date"].inp::-webkit-calendar-picker-indicator { filter: invert(0.85) sepia(0.3); cursor: pointer; }
.sel { position: relative; display: block; }
.sel select { padding-right: 42px; cursor: pointer; }
.sel svg { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--beige); pointer-events: none; }
.is-error .inp, .is-error .opt-body { border-color: #e08b7a; }
.fld-err { min-height: 0; font-size: 13.5px; color: #e08b7a; }
.fld-err:empty { display: none; }
.fld-alert { margin: 4px 0 0; padding: 12px 14px; border-radius: 10px; background: rgba(224, 169, 79, 0.1); border: 1px solid rgba(224, 169, 79, 0.4); color: #e0a94f; font-size: 15px; }
.fld-note { margin: 10px 0 0; color: var(--ink-60); font-size: 14px; }

/* Segmentierte Auswahl der Tage */
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg label { position: relative; }
.seg input, .opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.seg span { display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(245, 242, 236, 0.22); font-family: var(--f-head); font-weight: 600; font-size: 17px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.seg label:hover span { border-color: rgba(217, 201, 163, 0.6); }
.seg input:checked + span { background: var(--beige); border-color: var(--beige); color: var(--dark); }
.seg input:focus-visible + span, .opt input:focus-visible + .opt-body { outline: 2px solid var(--beige); outline-offset: 3px; }

/* Tageskarten mit Zeitfenster */
.days { display: flex; flex-direction: column; gap: 12px; }
.day { border-radius: 14px; border: 1px solid var(--line); background: var(--bg); overflow: hidden; }
.day-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.day-head--static { cursor: default; padding-bottom: 6px; }
.day-title { font-family: var(--f-head); font-weight: 600; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; }
.day-sum { margin-left: auto; color: var(--beige); font-size: 14.5px; text-align: right; }
.day-head svg { flex: none; width: 20px; height: 20px; color: var(--ink-60); transition: transform 0.4s var(--ease-soft); }
.day.is-open .day-head svg { transform: rotate(180deg); }
.day-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease-soft); }
.day.is-open .day-body { grid-template-rows: 1fr; }
.day-inner { overflow: hidden; min-height: 0; padding: 0 18px; }
.day.is-open .day-inner { padding-bottom: 18px; }
.day-controls { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: end; margin: 10px 0 18px; }
.day-controls .fld { margin: 0; }
.day-end { display: flex; align-items: center; min-height: 50px; font-family: var(--f-head); font-weight: 600; font-size: 18px; }
.stepper { display: flex; align-items: center; height: 50px; border-radius: 12px; border: 1px solid rgba(245, 242, 236, 0.18); overflow: hidden; }
.stepper button { width: 46px; height: 100%; border: 0; background: transparent; color: var(--beige); font-size: 22px; cursor: pointer; transition: background 0.2s ease; }
.stepper button:hover:not(:disabled) { background: rgba(217, 201, 163, 0.12); }
.stepper button:disabled { color: rgba(245, 242, 236, 0.25); cursor: not-allowed; }
.stepper output { min-width: 62px; text-align: center; font-family: var(--f-head); font-weight: 600; font-size: 18px; }
.track { position: relative; height: 54px; border-radius: 12px; background: rgba(245, 242, 236, 0.05); cursor: grab; touch-action: none; user-select: none; }
.track:focus-visible { outline: 2px solid var(--beige); outline-offset: 3px; }
.track.is-drag { cursor: grabbing; }
.track-hours { position: absolute; inset: 0; display: flex; justify-content: space-between; padding: 0; pointer-events: none; }
.track-hours i { width: 1px; height: 30%; margin-top: auto; background: rgba(245, 242, 236, 0.16); }
.track-hours i.major { height: 55%; background: rgba(245, 242, 236, 0.28); }
.track-win { position: absolute; top: 5px; bottom: 5px; border-radius: 9px; background: linear-gradient(180deg, #e4d6b4, var(--beige)); box-shadow: 0 6px 18px -6px rgba(217, 201, 163, 0.6); display: grid; place-items: center; transition: left 0.25s var(--ease-soft), width 0.35s var(--ease-soft); }
.track.is-drag .track-win { transition: none; }
.grip { display: flex; gap: 3px; } .grip i { width: 2px; height: 16px; border-radius: 2px; background: rgba(17, 17, 17, 0.45); }
.track-win.is-nudge { animation: nudge-win 2.4s var(--ease-soft) 1s 2; }
@keyframes nudge-win { 0%, 100% { translate: 0; } 30% { translate: 14px; } 60% { translate: -10px; } }
.track-scale { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--f-head); font-size: 12px; letter-spacing: 0.08em; color: var(--ink-45); }
.link-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 0; border: 0; background: none; color: var(--beige); font-family: var(--f-head); font-weight: 500; font-size: 13.5px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.link-btn svg { width: 16px; height: 16px; }
.guests { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.guests-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.guests-row div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 10px; background: rgba(245, 242, 236, 0.06); color: var(--ink-70); transition: background 0.3s ease, color 0.3s ease; }
.guests-row strong { font-family: var(--f-head); font-weight: 700; font-size: 17px; }
.guests-row span { font-size: 12.5px; }
.guests-row div.is-active { background: var(--beige); color: var(--dark); }

/* Optionskarten */
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opts--3 { grid-template-columns: repeat(3, 1fr); }
.opt { position: relative; display: flex; cursor: pointer; }
.opt-body { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 16px 16px 14px 46px; border-radius: 14px; border: 1px solid rgba(245, 242, 236, 0.18); background: var(--bg); transition: border-color 0.25s ease, background 0.25s ease; position: relative; }
.opt-body::before { content: ''; position: absolute; left: 16px; top: 17px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(245, 242, 236, 0.4); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.opt-body strong { font-family: var(--f-head); font-weight: 600; font-size: 16px; letter-spacing: 0.04em; }
.opt-body small { color: var(--ink-60); font-size: 13.5px; line-height: 1.35; }
.opt-body em { margin-top: 4px; font-style: normal; color: var(--beige); font-size: 13.5px; }
.opt:hover .opt-body { border-color: rgba(217, 201, 163, 0.5); }
.opt input:checked + .opt-body { border-color: var(--beige); background: rgba(217, 201, 163, 0.08); }
.opt input:checked + .opt-body::before { border-color: var(--beige); box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 9px var(--beige); }
.opt.is-disabled { cursor: not-allowed; }
.opt.is-disabled .opt-body { opacity: 0.4; }
.opt--sm .opt-body { padding: 14px 12px 12px 42px; justify-content: center; }
.opt--sm .opt-body::before { top: 50%; margin-top: -9px; left: 14px; }
.check { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(217, 201, 163, 0.08); cursor: pointer; font-size: 15px; }
.check input { width: 20px; height: 20px; accent-color: var(--beige); flex: none; }

.menu { margin-top: 22px; border-top: 1px solid var(--line-soft); padding-top: 6px; }
.menu summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; list-style: none; font-family: var(--f-head); font-weight: 600; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--beige); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 20px; height: 20px; transition: transform 0.4s var(--ease-soft); }
.menu[open] summary svg { transform: rotate(180deg); }
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 12px 0 4px; }
.menu-head { margin-bottom: 8px; font-family: var(--f-head); font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; }
.menu-head span { display: block; color: var(--beige); font-size: 12px; letter-spacing: 0.14em; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--ink-85); }
.menu li span { display: block; color: var(--ink-45); font-size: 13px; }

.ang-form { display: flex; flex-direction: column; }
.ang-submit { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 6px; }
.ang-msg { margin: 0; font-size: 15px; color: var(--ink-70); }
.ang-msg[data-tone="missing"], .ang-msg[data-tone="datum"] { color: #e0a94f; }
.ang-msg[data-tone="ok"] { color: #a8c98a; }
.ang-msg[data-tone="err"] { color: #e08b7a; }
.ang-done { text-align: center; padding: 26px 10px 10px; }
.ang-done-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--beige); color: var(--dark); }
.ang-done-icon svg { width: 30px; height: 30px; }
.ang-done h3 { margin: 16px 0 6px; font-family: var(--f-head); font-weight: 700; font-size: 34px; text-transform: uppercase; color: var(--beige); }
.ang-done p { margin: 0 auto; max-width: 30em; color: var(--ink-85); }
.ang-foot { margin: 10px 0 0; text-align: center; color: var(--ink-60); font-size: 15px; }
.ang-foot a { color: var(--beige); }
.ang-sign { max-width: 1120px; margin: clamp(36px, 5vw, 56px) auto 0; display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; font-family: var(--f-head); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-45); }

/* Zusammenfassung */
.ang-summary { position: sticky; top: 20px; }
.sum-card { padding: 26px 24px; border-radius: 18px; background: linear-gradient(180deg, #1a1916, var(--bg-2)); border: 1px solid rgba(217, 201, 163, 0.35); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.sum-price { margin: 6px 0 2px; font-family: var(--f-head); font-weight: 700; font-size: 46px; line-height: 1.05; color: var(--beige); transform-origin: left center; }
.sum-sub { color: var(--ink-60); font-size: 14px; }
.sum-list { margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 10px; }
.sum-list div { display: flex; justify-content: space-between; gap: 14px; }
.sum-list dt { font-family: var(--f-head); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-45); padding-top: 2px; }
.sum-list dd { margin: 0; text-align: right; font-size: 14.5px; color: var(--ink-85); white-space: pre-line; }
.sum-incl { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; color: var(--ink-80); }
.sum-incl li { display: flex; gap: 10px; align-items: flex-start; }
.sum-incl svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--beige); }
.sum-cta { margin-top: 22px; width: 100%; justify-content: space-between; }
.sum-note { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-45); }

.ang-bar { display: none; }
@media (max-width: 900px) {
  .ang-layout { grid-template-columns: 1fr; }
  .ang-summary { position: static; order: 2; }
  .sum-cta { display: none; }
  .ang-bar { display: flex; position: fixed; left: auto; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 50; width: max-content; min-width: 34vw; max-width: calc(100% - 24px); align-items: center; justify-content: center; padding: 10px 18px; border-radius: 16px; background: var(--beige); border: 0; box-shadow: 0 16px 34px -10px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(13, 13, 12, 0.25); transition: transform 0.5s var(--ease-soft), opacity 0.4s ease; }
  .ang-bar > div { display: flex; flex-direction: column; align-items: center; line-height: 1.15; white-space: nowrap; }
  .ang-bar strong { font-family: var(--f-head); font-weight: 700; font-size: 22px; color: var(--dark); }
  .ang-bar > div span { font-size: 12.5px; color: rgba(17, 17, 17, 0.68); }
  .ang-bar.is-hidden { transform: translateY(calc(100% + 20px)); opacity: 0; pointer-events: none; }
  .intro-wait .ang-bar { transform: translateY(calc(100% + 20px)); opacity: 0; pointer-events: none; }
  .intro-play:not(.intro-done) .ang-bar { transition: transform 0.9s cubic-bezier(0.22, 0.9, 0.3, 1) 0.55s, opacity 0.7s ease 0.55s; }
}
@media (max-width: 640px) {
  .ang { padding: 22px 14px 110px; }
  .ang-card { padding: 20px 16px; border-radius: 16px; }
  .ang-step-head { gap: 12px; margin-bottom: 20px; }
  .ang-num { width: 32px; height: 32px; font-size: 15px; }
  .ang-progress a { padding: 4px 12px 4px 4px; font-size: 11.5px; min-height: 36px; }
  .ang-progress a span { width: 26px; height: 26px; }
  .fld-row, .fld-row--dates.is-multi { grid-template-columns: 1fr; }
  .fld-row--street { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
  .fld-row--city { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); }
  .fld-row--dates { max-width: none; }
  .seg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
  .seg span { min-width: 0; padding: 0; height: 46px; }
  .day-controls { grid-template-columns: auto minmax(0, 1fr); }
  .day-head { padding: 14px; }
  .day-inner { padding: 0 14px; }
  .day.is-open .day-inner { padding-bottom: 14px; }
  .day-sum { font-size: 13px; }
  .opts, .opts--3 { grid-template-columns: 1fr; }
  .ang-submit .btn { width: 100%; justify-content: space-between; }
  .guests-row strong { font-size: 15px; }
}

/* Unterseiten: Tasse dampft sofort (keine Füllung) */
.cup-fill[data-morph] .cup-steam path { opacity: 0; }
.cta-cup.is-in .cup-fill[data-morph] .cup-steam path:nth-child(1) { animation-delay: 0.3s; }
.cta-cup.is-in .cup-fill[data-morph] .cup-steam path:nth-child(2) { animation-delay: 0.8s; }
.cta-cup.is-in .cup-fill[data-morph] .cup-steam path:nth-child(3) { animation-delay: 1.3s; }
/* Hochzeit: Sterne funkeln über den Ringen */
.cup-fill[data-morph="hochzeit"].is-symbol .cup-steam path { animation: twinkle 1.8s ease-in-out infinite !important; transform-box: fill-box; transform-origin: center; }
.cup-fill[data-morph="hochzeit"].is-symbol .cup-steam path:nth-child(2) { animation-delay: 0.6s !important; }
.cup-fill[data-morph="hochzeit"].is-symbol .cup-steam path:nth-child(3) { animation-delay: 1.2s !important; }
@keyframes twinkle { 0%, 100% { opacity: 0.15; transform: scale(0.55) rotate(0deg); } 45% { opacity: 1; transform: scale(1.05) rotate(20deg); } }
/* Referenzen: Überschrift bündig mit den rollenden Namen */
.proof-roll { align-items: flex-start; text-align: left; }
.proof-roll .eyebrow { justify-content: flex-start; }
.proof-roll .eyebrow::before, .proof-roll .eyebrow::after { display: none; }

/* Cursor: Kaffeebohne ohne Nachziehen, Crema-Ring über Links */
html.has-cursor .cursor { will-change: transform; }
.cursor-dot { width: 12px; height: 17px; margin: -8.5px 0 0 -6px; background: none; color: var(--beige); --bean-line: var(--bg); transition: opacity 0.25s ease, color 0.3s ease; }
.cursor-dot svg { width: 100%; height: 100%; transition: transform 0.35s var(--ease-soft); }
.cursor-ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.cursor-ring::before { transform: scale(0.2); opacity: 0; border-color: rgba(217, 201, 163, 0.75); transition: transform 0.45s var(--ease-soft), opacity 0.3s ease, background 0.35s ease, border-color 0.35s ease; }
.cursor.is-hover .cursor-ring::before { transform: scale(0.5); border-width: 3px; opacity: 1; background: rgba(217, 201, 163, 0.1); border-color: rgba(217, 201, 163, 0.85); }
.cursor-dot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform 0.35s var(--ease-soft); }
.cursor.is-hover .cursor-dot svg { transform: scale(0) rotate(-40deg); }
.cursor.is-hover .cursor-dot::before { transform: scale(1); }
.cursor.is-solid .cursor-ring::before { transform: scale(0.8); opacity: 1; background: rgba(217, 201, 163, 0.28); border-color: rgba(217, 201, 163, 0.9); }
.cursor.is-down .cursor-ring::before { transform: scale(0.85); }
.cursor.is-hover.is-down .cursor-ring::before { transform: scale(0.42); }
.cursor.is-down .cursor-dot svg { transform: scale(0.8); }
.cursor.is-light .cursor-dot { color: var(--dark); --bean-line: var(--beige); }
.cursor.is-light .cursor-ring::before { border-color: rgba(17, 17, 17, 0.6); background: rgba(17, 17, 17, 0.06); }
/* Kollegen: zweiter Kopf so kräftig wie der erste */
.cup-fill .cup-steam path { transition: stroke-width 0.6s ease; }
.cup-fill[data-morph="firmenevent"].is-morphing .cup-steam path:nth-child(1) { stroke-width: 5; }
/* Symbolzustand: aus dem Dampf entstandene Linien (Kopf, Schnur, Sprechblase …) sichtbar */
.cta-cup .cup-fill[data-morph]:not([data-morph="hochzeit"]).is-morphing .cup-steam path { opacity: 1 !important; animation: none; transform: none; }
.cta-cup .cup-fill[data-morph="hochzeit"].is-morphing:not(.is-symbol) .cup-steam path { opacity: 1 !important; }
/* Unterseiten-Enthüllung: feine Bogenlinie zeichnet sich um das Hero-Foto */
.reveal-arch { position: fixed; inset: 0; z-index: 100001; pointer-events: none; width: 100%; height: 100%; transition: opacity 0.9s ease; }
.reveal-arch path { fill: none; stroke: var(--beige); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s cubic-bezier(0.65, 0, 0.35, 1); }
.reveal-arch.is-drawn path { stroke-dashoffset: 0; }
.preloader.is-arching .preloader-inner { opacity: 0; transform: translateY(-10px) scale(0.96); transition: opacity 0.5s ease, transform 0.8s var(--ease-soft); }
.preloader.is-arching .preloader-layer--dark { opacity: 0; transition: opacity 1.1s ease 0.55s; }

/* Ausschank-Optionen untereinander, Spül-Hinweis zwischen Einweg und Geschirr */
.opts--stack { grid-template-columns: 1fr; }
.opts--stack .check { margin-top: 0; }

/* Getränkeangebot als Kacheln: Kaffee links, Tee & Kakao und Extras rechts */
.menu { margin-top: 26px; padding-top: 0; border-top: 0; }
.menu > .fld-label { display: block; margin-bottom: 10px; }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 10px; padding: 0; }
.menu-tile { padding: 18px 18px 16px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.menu-tile--main { grid-row: 1 / span 2; }
.menu-tile .menu-head { margin-bottom: 10px; }
@media (max-width: 640px) { .menu-grid { gap: 8px; } .menu-tile { padding: 14px 12px 12px; } .menu-tile .menu-head { font-size: 13.5px; } .menu-tile .menu-head span { font-size: 10.5px; } .menu ul { font-size: 14px; gap: 5px; } .menu li span { font-size: 12px; } }

/* Angebotsrechner: Schritte als Akkordeon */
.ang-step-head[data-step-toggle] { cursor: pointer; margin-bottom: 0; align-items: center; }
.ang-step-head > div { flex: 1; min-width: 0; }
.ang-chev { flex: none; width: 22px; height: 22px; color: var(--ink-60); transition: transform 0.45s var(--ease-soft); }
.ang-card.is-collapsed .ang-chev { transform: rotate(-90deg); }
.ang-step-sum { display: none; margin-top: 2px; color: var(--beige); font-size: 14.5px; }
.ang-card.is-collapsed .ang-step-head p { display: none; }
.ang-card.is-collapsed .ang-step-sum { display: block; }
.ang-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.55s var(--ease-soft); }
.ang-card.is-collapsed .ang-body { grid-template-rows: 0fr; }
.ang-body-inner { overflow: hidden; min-height: 0; padding-top: 26px; transition: padding-top 0.55s var(--ease-soft), opacity 0.4s ease; }
.ang-card.is-collapsed .ang-body-inner { padding-top: 0; opacity: 0; }
.ang-card.is-collapsed { border-color: rgba(245, 242, 236, 0.1); }
.ang-card.is-collapsed .ang-step-head:hover .ang-chev { color: var(--beige); }
.ang-next { margin-top: 24px; }
@media (max-width: 640px) { .ang-body-inner { padding-top: 20px; } .ang-next { width: 100%; justify-content: space-between; } }

/* Getränkeangebot: aufklappbar, darin die Kacheln */
.menu { margin-top: 22px; border-top: 1px solid var(--line-soft); padding-top: 6px; }
.menu[open] .menu-grid { padding-top: 10px; }

/* ===== Angebotsrechner mobil: mehr Luft, klare Zeilen, gute Lesbarkeit ===== */
.day-end { white-space: nowrap; }
@media (max-width: 640px) {
  .ang { padding: 20px 14px 120px; }
  .ang-intro { margin-bottom: 22px; }
  .ang-logo img { width: 128px; margin-bottom: 16px; }
  .ang-h1 { font-size: 30px; }
  .ang-lead { font-size: 15.5px; line-height: 1.55; }
  /* Schritt-Leiste: vier gleich breite Felder in einer Zeile */
  .ang-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; margin-top: 20px; }
  .ang-progress a { flex-direction: column; justify-content: center; gap: 4px; min-height: 58px; padding: 8px 2px; border-radius: 14px; font-size: 10.5px; letter-spacing: 0.08em; }
  .ang-progress a span { width: 24px; height: 24px; }
  .ang-main { gap: 14px; }
  .ang-card { padding: 18px 16px 20px; }
  /* Kartenkopf: Nummer + Titel + Pfeil in einer Zeile, Erklärung darunter über volle Breite */
  .ang-step-head, .ang-step-head[data-step-toggle] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 6px; }
  .ang-step-head > div { display: contents; }
  .ang-step-head h2 { grid-column: 2; grid-row: 1; margin: 0; font-size: clamp(17px, 5vw, 21px); line-height: 1.15; }
  .ang-step-head p, .ang-step-head .ang-step-sum { grid-column: 1 / -1; grid-row: 2; font-size: 14.5px; line-height: 1.5; }
  .ang-num { grid-column: 1; grid-row: 1; width: 30px; height: 30px; font-size: 14px; }
  .ang-chev { grid-column: 3; grid-row: 1; }
  .ang-body-inner { padding-top: 22px; }
  .fld { margin-bottom: 22px; gap: 8px; }
  .fld-label { font-size: 12px; letter-spacing: 0.14em; }
  .fld-row { gap: 0 12px; }
  .inp { min-height: 52px; font-size: 16px; }
  .seg { gap: 6px; }
  /* Tageskarten: Titel oben, Zusammenfassung darunter */
  .day-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 3px; column-gap: 10px; padding: 14px 14px 12px; }
  .day-head .day-title { grid-column: 1; grid-row: 1; font-size: 14px; }
  .day-head .day-sum { grid-column: 1; grid-row: 2; margin: 0; text-align: left; font-size: 13.5px; }
  .day-head svg { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .day-head--static { padding-bottom: 4px; }
  .day-controls { grid-template-columns: auto minmax(0, 1fr); gap: 14px; margin: 8px 0 16px; }
  .day-end { font-size: 16.5px; min-height: 50px; }
  .stepper button { width: 44px; }
  .stepper output { min-width: 52px; }
  .track { height: 56px; }
  .track-scale { font-size: 11.5px; }
  .link-btn { display: flex; width: 100%; justify-content: flex-start; text-align: left; font-size: 12.5px; letter-spacing: 0.1em; line-height: 1.4; }
  .opt-body { padding: 15px 14px 14px 44px; }
  .opt-body::before { left: 14px; top: 16px; }
  .opt-body strong { font-size: 16.5px; }
  .opt-body small, .opt-body em { font-size: 14px; }
  .check { padding: 14px; font-size: 15px; line-height: 1.4; }
  .ang-submit { margin-top: 10px; }
  .ang-msg { font-size: 15px; line-height: 1.5; }
  .sum-card { padding: 22px 18px; }
  .sum-price { font-size: 40px; }
  .sum-list div { flex-direction: column; gap: 2px; }
  .sum-list dd { text-align: left; }
  .ang-bar { padding: 9px 16px; }
  .ang-bar strong { font-size: 21px; }
}
/* Gleichmäßige Abstände zwischen Formularzeilen */
.ang .fld-row { margin-bottom: 20px; }
.ang .fld-row > .fld { margin-bottom: 0; }
@media (max-width: 640px) {
  .ang .fld-row { margin-bottom: 22px; row-gap: 22px; }
}
/* Kurs-Formular: Felder bleiben im Kasten (Datumsfeld eingeschlossen) */
.form label { min-width: 0; }
.form input, .form select, .form textarea { min-width: 0; max-width: 100%; }
.form input[type="date"] { -webkit-appearance: none; appearance: none; display: block; text-align: left; }
.form input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.form input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.85) sepia(0.3); }
/* "Das brauchen wir": bündig mit den Häkchen, mobil jeder Punkt in eigener Zeile */
.needs .eyebrow::before, .needs .eyebrow::after { display: none; }
@media (max-width: 760px) {
  .needs { flex-direction: column; align-items: flex-start; gap: 12px; }
  .needs ul { flex-direction: column; gap: 10px; }
}
/* Wellenkanten liegen über den Parallax-Bohnen – keine hellen Bohnen-Striche am Rand */
.cta .wave { z-index: 3; }

/* Angebotsrechner mobil: Schritt-Leiste ausblenden, die Karten selbst führen */
@media (max-width: 760px) { .ang-progress { display: none; } }
/* Hochzeit: Hero-Foto 4 % näher, damit keine hellen Ränder sichtbar sind */
body[data-anlass="Hochzeit"] .sub-photo img { scale: 1.04; }
@media (max-width: 760px) { .ext-arrow { display: none; } }
/* Bewertungen mobil: nächste Karte lugt rechts herein – Hinweis zum Wischen */
@media (max-width: 760px) {
  .rev-track { margin: 0 -24px; padding: 24px 24px 6px; scroll-padding: 0 24px; gap: 12px; }
  .rev-card { flex: 0 0 80%; }
  .rev-card:last-child { margin-right: 24px; }
}
.rev-card { margin: 0; }
@media (max-width: 760px) {
  .reviews { margin: 0 -24px; }
  .rev-track { margin: 0; }
  .rev-nav { padding-left: 24px; padding-right: 24px; }
}

/* ===== Unterseiten mobil: Kopfzeile + Menü ===== */
.mhead, .mmenu { display: none; }
@media (max-width: 760px) {
  .mhead { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 1002; align-items: center; justify-content: space-between; height: calc(60px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 12px 0 18px; transition: transform 0.5s var(--ease-soft), background 0.4s ease, border-color 0.4s ease; border-bottom: 1px solid transparent; }
  .mhead.is-solid { background: rgba(13, 13, 12, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: rgba(245, 242, 236, 0.08); }
  .mhead.is-hidden { transform: translateY(-100%); }
  .mhead-logo img { width: 96px; height: auto; transform-origin: 0 50%; transition: transform 0.7s var(--ease-calm); will-change: transform; }
  html.menu-open .mhead-logo img { transform: translateY(11px) scale(1.38); }
  .mhead-btn { position: relative; width: 46px; height: 46px; border: 1px solid rgba(217, 201, 163, 0.35); border-radius: 50%; background: rgba(13, 13, 12, 0.5); cursor: pointer; }
  .mhead-bean { position: absolute; left: 50%; top: 50%; width: 13px; height: 18px; margin: -9px 0 0 -6.5px; color: var(--beige); transform: rotate(-24deg); transition: transform 0.5s var(--ease-soft), opacity 0.3s ease; }
  .mhead-btn span { position: absolute; left: 14px; right: 14px; top: 22px; height: 1.5px; background: var(--beige); border-radius: 2px; opacity: 0; transform: scaleX(0); transition: transform 0.45s var(--ease-soft), opacity 0.25s ease; }
  html.menu-open .mhead-bean { opacity: 0; transform: rotate(150deg) scale(0.4); }
  html.menu-open .mhead-btn span:nth-child(2) { opacity: 1; transform: rotate(45deg); }
  html.menu-open .mhead-btn span:nth-child(3) { opacity: 1; transform: rotate(-45deg); }
  html.menu-open .mhead { transform: none; background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mmenu { display: block; position: fixed; inset: 0; z-index: 1001; background: var(--bg); visibility: hidden; clip-path: circle(0px at calc(100% - 35px) 30px); transition: clip-path 0.7s var(--ease-calm), visibility 0s linear 0.7s; }
  html.menu-open .mmenu { visibility: visible; clip-path: circle(150vmax at calc(100% - 35px) 30px); transition: clip-path 0.7s var(--ease-calm); }
  .mmenu-inner { height: 100%; overflow-y: auto; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 90px 28px calc(40px + env(safe-area-inset-bottom, 0px)); background-image: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(217, 201, 163, 0.1), transparent 60%); }
  .mmenu-link { display: block; padding: 10px 0; font-family: var(--f-head); font-weight: 700; font-size: 30px; line-height: 1.15; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-soft); opacity: 0; translate: 0 14px; transition: opacity 0.6s var(--ease-soft), translate 0.6s var(--ease-soft), color 0.3s ease; }
  .mmenu-link[aria-current="page"] { color: var(--beige); }
  .mmenu-cta { margin-top: 26px; opacity: 0; translate: 0 14px; transition: opacity 0.6s var(--ease-soft), translate 0.6s var(--ease-soft); }
  .mmenu-lang { margin-top: 18px; opacity: 0; translate: 0 14px; transition: opacity 0.6s var(--ease-soft), translate 0.6s var(--ease-soft); }
  html.menu-open .mmenu-link, html.menu-open .mmenu-cta, html.menu-open .mmenu-lang { opacity: 1; translate: none; transition-delay: calc(0.18s + var(--i) * 0.05s); }
  html.menu-open .mbar { transform: translateY(calc(100% + 40px)); }
  /* großes Logo im Hero entfällt – die Kopfzeile übernimmt */
  .sub-hero-text > a:first-child { display: none; }
  .sub-hero { padding-top: 72px; }
  .sub-hero-media { margin-top: 0; }
}

/* Startseite mobil: Logo in der Kopfzeile erst nach dem Hero */
@media (max-width: 760px) {
  .mhead--home .mhead-logo { opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
  .mhead--home.is-past .mhead-logo { opacity: 1; pointer-events: auto; }
  html.menu-open .mhead--home .mhead-logo { opacity: 1; pointer-events: auto; }
}

/* ===== Rechtsseiten (Impressum, AGB, Datenschutz) ===== */
.legal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 900px; margin: 0 auto; padding: 22px 24px; }
.legal-logo img { width: 120px; height: auto; }
.legal-back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--f-head); font-weight: 500; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-70); text-decoration: none; transition: color 0.3s ease; }
.legal-back svg { width: 16px; height: 16px; transform: rotate(180deg); transition: transform 0.4s var(--ease-soft); }
.legal-back:hover { color: var(--beige); }
.legal-back:hover svg { transform: rotate(180deg) translateX(4px); }
.legal { padding: clamp(30px, 6vw, 70px) 24px clamp(70px, 9vw, 110px); }
.legal-inner { max-width: 760px; margin: 0 auto; }
.legal .eyebrow { color: var(--beige); }
.legal-h1 { margin: 0 0 clamp(28px, 4vw, 44px); font-family: var(--f-head); font-weight: 700; font-size: clamp(34px, 5vw, 56px); line-height: 1.05; text-transform: uppercase; }
.legal-body { font-size: 16.5px; line-height: 1.7; color: var(--ink-85); }
.legal-body h2 { margin: 2.2em 0 0.6em; font-family: var(--f-head); font-weight: 600; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.25; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { margin: 0 0 1em; }
.legal-body ul { margin: 0 0 1.2em; padding-left: 1.2em; }
.legal-body li { margin-bottom: 0.4em; }
.legal-body li::marker { color: var(--beige); }
.legal-body a { color: var(--beige); text-underline-offset: 3px; }
.legal-body strong { color: var(--ink); }
@media (max-width: 760px) {
  .legal-head { padding: 16px 18px; }
  .legal-logo img { width: 100px; }
  .legal-back { font-size: 11.5px; letter-spacing: 0.12em; }
  .legal-body { font-size: 16px; }
  .legal-h1 { font-size: clamp(24px, 7.4vw, 34px); hyphens: auto; overflow-wrap: break-word; }
}

/* Angebot: mobile Überschriften & zweiter Absende-Button */
.br-m, .t-mob, .ang-submit-alt { display: none; }
@media (max-width: 760px) {
  .br-m { display: inline; }
  .t-desk { display: none; }
  .t-mob { display: inline; }
  .ang-submit-alt:not([hidden]) { display: inline-flex; align-self: center; margin: 4px auto 0; }
}

/* Unterseiten-Überschrift: Umbrüche getrennt für Handy und Desktop */
.sub-h1 .line + .line > span .h1-weiss { color: var(--ink); }
.d-only, .br-d { display: inline; }
.m-only { display: none; }
@media (max-width: 760px) {
  .d-only, .br-d { display: none; }
  .m-only { display: inline; }
}

/* Sprachumschalter DE / EN */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid rgba(245, 242, 236, 0.14); flex: none; }
.lang-switch a { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 30px; padding: 0 9px; border-radius: 999px; font-family: var(--f-head); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; color: var(--ink-60); text-decoration: none; transition: color 0.25s ease, background 0.25s ease; }
.lang-switch a:hover { color: var(--ink); }
.lang-switch a.is-active { background: rgba(217, 201, 163, 0.16); color: var(--beige); }
.topbar .lang-switch { margin-left: 6px; }
.lang-switch--lg a { min-width: 52px; min-height: 42px; font-size: 15px; }