/* Café Windlicht — Stil nach der Brewns-Vorlage: Espresso und Bone im Wechsel, Swirl-Textur, Amber, matte Objekte. */
:root { --bg: #070707; --fg: #f1f1ef; --muted: rgba(241,241,239,.64); --line: rgba(241,241,239,.16); --surface: rgba(241,241,239,.05); --accent: #d58c3d; --on-accent: #070707; --bone: #f1f1ef; --bone-2: #e7e5e3; --hl-off: rgba(241,241,239,.22); }
.demo-bar { position: fixed; top: auto; bottom: .9rem; left: 50%; transform: translateX(-50%); z-index: 120; border-radius: 999px; padding: .5rem 1.1rem; background: rgba(23,23,21,.94); backdrop-filter: blur(8px); border: 1px solid var(--line); white-space: nowrap; gap: 1.2rem; max-width: calc(100% - 1.5rem); }
@media (max-width: 560px) { .demo-bar span { display: none; } }
.hd { position: fixed; z-index: 100; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between; padding: 1.3rem var(--gutter); transition: background .4s; }
.hd.solid { background: rgba(7,7,7,.74); backdrop-filter: blur(14px); }
.brand { font-size: 1.6rem; font-weight: 700; letter-spacing: -.05em; } .brand small { display: block; font: 500 .6rem var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.hd nav { display: flex; gap: 2rem; font-size: .95rem; color: var(--muted); } .hd nav a:hover { color: #fff; } @media (max-width: 860px) { .hd nav { display: none; } }

.swirl::before { content: ''; position: absolute; z-index: 0; inset: -8% -12% auto -12%; height: 130%; pointer-events: none; background: var(--sw, #171715); -webkit-mask: url(../assets/swirl-mask.webp) center / cover no-repeat; mask: url(../assets/swirl-mask.webp) center / cover no-repeat; }
.hero { position: relative; z-index: 2; min-height: max(100lvh, 44rem); display: grid; align-items: center; padding: 8rem 0 5rem; overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 70% at 72% 42%, rgba(150,78,26,.5), transparent 70%), radial-gradient(40% 50% at 8% 95%, rgba(90,44,14,.4), transparent 70%), #070707; }
#beans { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hero-grid { position: relative; z-index: 2; display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; } @media (min-width: 920px) { .hero-grid { grid-template-columns: 1.1fr .9fr; } }
.open { display: inline-flex; align-items: center; gap: .6rem; font: 500 .76rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .open::before { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: #777; } .is-open .open::before { background: var(--accent); animation: blink 2.2s ease-in-out infinite; } @keyframes blink { 50% { opacity: .35; } }
h1 { margin-top: 1.2rem; font-size: clamp(3.4rem, 9.5vw, 8.4rem); line-height: .88; letter-spacing: -.055em; font-weight: 700; } h1 em { font-style: normal; color: var(--accent); }
.lead { margin-top: 1.6rem; max-width: 30rem; color: var(--muted); font-size: 1.12rem; }
.cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.bun-wrap { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.bun { width: min(100%, 34rem); filter: drop-shadow(0 40px 40px rgba(0,0,0,.55)); animation: floaty 7s ease-in-out infinite; } @keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-18px) rotate(2deg); } }
.steam { position: absolute; left: 40%; top: 6%; width: 22%; height: 40%; pointer-events: none; } .steam path { fill: none; stroke: rgba(241,241,239,.4); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 60 140; animation: steam 4.5s ease-in-out infinite; filter: blur(1.5px); } .steam path:nth-child(2) { animation-delay: -1.5s; } .steam path:nth-child(3) { animation-delay: -3s; } @keyframes steam { 0% { stroke-dashoffset: 200; opacity: 0; } 30% { opacity: .9; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 1.1rem 0; background: #0d0d0d; position: relative; z-index: 2; } .marquee div { display: flex; gap: 3rem; width: max-content; animation: slide 28s linear infinite; font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -.03em; color: var(--muted); } .marquee span::after { content: '·'; margin-left: 3rem; color: var(--accent); } @keyframes slide { to { transform: translateX(-50%); } }

section { position: relative; padding: clamp(5rem, 11vw, 9rem) 0; }
.bone { background: var(--bone); color: #171715; --fg: #171715; --muted: rgba(23,23,21,.64); --line: rgba(23,23,21,.18); --accent: #a45c17; --sw: #e7e5e3; overflow: hidden; isolation: isolate; }
.bone > .wrapx { position: relative; z-index: 1; }
h2 { font-size: clamp(2.3rem, 5.2vw, 4.4rem); line-height: .95; letter-spacing: -.045em; font-weight: 700; max-width: 40rem; } h2 em { font-style: normal; color: var(--accent); }
#hl { font-size: clamp(1.9rem, 4.4vw, 3.8rem); line-height: 1.06; letter-spacing: -.04em; font-weight: 600; max-width: 58rem; }

/* Kassenbon */
.karte { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: start; } @media (min-width: 940px) { .karte { grid-template-columns: .9fr 1.1fr; } }
.karte .side { position: sticky; top: 7rem; display: grid; gap: 1.2rem; } .karte .side p { color: var(--muted); max-width: 26rem; font-size: 1.05rem; }
.printer { position: relative; max-width: 27rem; margin-inline: auto; width: 100%; }
.printer .slot { position: relative; z-index: 3; height: 1.1rem; border-radius: 8px; background: #171715; box-shadow: 0 8px 18px -8px rgba(0,0,0,.5); }
.printer .window { position: relative; overflow: hidden; margin: 0 .6rem; }
#paper { background: #fffefa; color: #171715; padding: 1.8rem 1.6rem 3rem; font: 500 .86rem/1.5 var(--mono); will-change: transform; box-shadow: 0 30px 60px -30px rgba(0,0,0,.4);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 100% repeat-x; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 100% repeat-x; }
#paper .ph { text-align: center; padding-bottom: 1rem; border-bottom: 1.5px dashed rgba(23,23,21,.4); margin-bottom: 1rem; } #paper .ph b { display: block; font: 700 1.5rem var(--font); letter-spacing: -.05em; } #paper .ph span { letter-spacing: .1em; text-transform: uppercase; font-size: .66rem; color: rgba(23,23,21,.6); }
#paper h3 { margin: 1.1rem 0 .3rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #a45c17; }
#paper li { display: flex; gap: .5rem; align-items: baseline; padding: .12rem 0; } #paper li i { flex: 1; border-bottom: 1.5px dotted rgba(23,23,21,.35); transform: translateY(-3px); }
#paper .sum { margin-top: 1.1rem; padding-top: .8rem; border-top: 1.5px dashed rgba(23,23,21,.4); display: flex; justify-content: space-between; font-weight: 700; font-size: 1rem; }
#paper .bar { height: 2.4rem; margin: 1.1rem 0 .5rem; background: repeating-linear-gradient(90deg, #171715 0 2px, transparent 2px 4px, #171715 4px 5px, transparent 5px 8px, #171715 8px 11px, transparent 11px 12px); } #paper .thx { text-align: center; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(23,23,21,.6); }

/* Zifferblatt */
#dial-run { height: 360lvh; }
#dial-run .pane { display: grid; align-content: center; background: radial-gradient(50% 60% at 30% 50%, rgba(150,78,26,.28), transparent 70%), #070707; }
.dial-grid { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: center; } @media (min-width: 900px) { .dial-grid { grid-template-columns: 1fr 1fr; } }
.dial { position: relative; width: min(34rem, 78vw, 62lvh); aspect-ratio: 1; margin-inline: auto; }
.dial svg { position: absolute; inset: 0; width: 100%; height: 100%; } .dial .ring { fill: none; stroke: var(--line); stroke-width: 1.5; } .dial .tick { stroke: rgba(241,241,239,.4); stroke-width: 2; } .dial text { fill: rgba(241,241,239,.55); font: 500 13px var(--mono); text-anchor: middle; }
.arc { fill: none; stroke: rgba(241,241,239,.16); stroke-width: 14; stroke-linecap: round; transition: stroke .6s var(--ease); } .arc.on { stroke: var(--accent); }
#hand line { stroke: #fff; stroke-width: 3; stroke-linecap: round; } #hand circle { fill: var(--accent); }
.dial .bunr { position: absolute; left: 50%; top: 50%; width: 38%; margin: -13% 0 0 -19%; will-change: transform; filter: drop-shadow(0 18px 18px rgba(0,0,0,.5)); }
.dial .bunr img { width: 100%; }
#clock-time { position: absolute; left: 0; right: 0; bottom: 27%; text-align: center; font: 500 1.2rem var(--mono); letter-spacing: .12em; color: var(--accent); }
.segs { position: relative; display: grid; } .seg { grid-area: 1 / 1; opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; } .seg.on { opacity: 1; transform: none; pointer-events: auto; }
.seg h3 { font-size: clamp(2.2rem, 5vw, 4.2rem); letter-spacing: -.05em; font-weight: 700; line-height: .95; } .seg .t { display: block; margin-bottom: 1rem; font: 500 .8rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .seg p { margin-top: 1.2rem; color: var(--muted); font-size: 1.1rem; max-width: 28rem; }

.visit { display: grid; gap: 3rem; grid-template-columns: 1fr; } @media (min-width: 860px) { .visit { grid-template-columns: 1fr 1fr; } }
.hours li { display: flex; justify-content: space-between; padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: 1.08rem; } .hours li.today { color: var(--accent); font-weight: 700; }
.addr { font-size: 1.35rem; line-height: 1.3; font-weight: 600; margin-top: 1.2rem; } .addr small { display: block; margin-top: .8rem; color: var(--muted); font-weight: 400; font-size: 1rem; }
.foot-x { padding-bottom: 5rem; }

/* ---------- Typo und Farbe: Café Windlicht ----------
   Headlines in Young Serif (rund, warm, wie die Kreidetafel über dem Tresen), Text in Figtree.
   Akzent statt Orange: Flaschenglas-Grün, die Farbe alter Windlichter. Keine Mono-Labels, keine farbigen Akzentwörter. */
@font-face { font-family: 'Young Serif'; src: url('../assets/fonts/ref/YoungSerif-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../assets/fonts/ref/Figtree-normal.woff2') format('woff2'); font-weight: 300 800; font-display: swap; }
:root { --font: 'Figtree', system-ui, sans-serif; --mono: 'Figtree', system-ui, sans-serif; --serif: 'Young Serif', Georgia, serif; --accent: #a9bf93; --on-accent: #10140d; }
.bone { --accent: #3f5a36; }
h1, h2, h3, .brand, .marquee div, .seg h3, #paper .ph b { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
h1 { line-height: .95; }
h2 { line-height: 1.02; }
h1 em, h2 em { color: inherit; }
.brand small, .open, .seg .t, #paper .ph span, #paper h3, #paper .thx, .tag { font-family: var(--font); text-transform: none; letter-spacing: 0; font-weight: 600; }
.marquee div { font-weight: 400; }
#paper h3 { color: #3f5a36; }
h1 { font-size: clamp(3rem, 6.6vw, 6.2rem); }
#hl { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; line-height: 1.12; }