@font-face { font-family: "Poppins"; src: url("fonts/poppins-300.woff") format("woff"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-400.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-500.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-700.woff") format("woff"); font-weight: 700; font-display: swap; }

/* Farbschema „hell“ (wie im Entwurf) */
:root {
  --grund: #f2f1ed;
  --tinte: #161616;
  --linie: #c8c6bf;
  --leise: #6f6e69;
  --akzent: #161616;
  --dunkelflaeche: #0d0d0d;
  --breite: 1240px;
}
/* Farbschema „dunkel“ */
html.dunkel {
  --grund: #0b0b0b;
  --tinte: #f4f3ef;
  --linie: rgba(244, 243, 239, 0.14);
  --leise: #9b9e99;
  --akzent: #8fae98;
  --dunkelflaeche: #000;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  background: var(--grund);
  color: var(--tinte);
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--tinte); color: var(--grund); }

/* Rahmen mit feinen Linien wie im Entwurf */
.rahmen { width: min(100%, var(--breite)); margin-inline: auto; border-inline: 1px solid var(--linie); }
.reihe { display: grid; border-bottom: 1px solid var(--linie); }
.reihe > * { border-right: 1px solid var(--linie); min-width: 0; }
.reihe > *:last-child { border-right: 0; }
.r2 { grid-template-columns: 1fr 1fr; }
.r4 { grid-template-columns: repeat(4, 1fr); }
.r3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Navigation ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--grund); }
.nav .reihe { grid-template-columns: 1fr 1fr 1fr 150px 1fr 1fr 1fr; align-items: center; height: 84px; }
.nav .reihe > * { border-right: 0; }
.nav a.link { display: flex; justify-content: center; color: var(--tinte); transition: transform .25s; }
.nav a.link:hover { transform: translateY(-2px) rotate(-2deg); }
.hand-nav { display: block; height: 30px; width: auto; overflow: visible; }
.mobil-menue .hand-nav { height: 34px; }
.nav .logo { justify-self: center; display: block; width: 62px; color: var(--tinte); }
.nav .logo svg { width: 100%; height: auto; display: block; }
html.dunkel .nav .logo svg path[stroke] { stroke: var(--akzent); }
.menue-knopf { display: none; }

/* ---------- Start ---------- */
.start { grid-template-columns: 1fr 1fr; min-height: min(78vh, 680px); }
.start-text { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 40px 44px; }
.kleintext { max-width: 400px; font-size: 10.5px; line-height: 1.75; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.oval { align-self: flex-end; margin-right: 6%; position: relative; width: 190px; height: 104px; display: grid; place-items: center; font-weight: 700; font-size: 15px; transition: transform .3s; }
.oval svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.oval span { position: relative; transform: rotate(-6deg); }
.oval:hover { transform: rotate(-3deg) scale(1.04); }
.start h1 { font-weight: 700; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; text-transform: uppercase; letter-spacing: -.005em; }
.start-bild { position: relative; overflow: hidden; background: #0a0a0a center / cover no-repeat; min-height: 360px; }
.start-bild .espresso-anim { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.start-bild .start-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Espresso-Animation (Zyklus 9 s) */
.ea-strahl { stroke: url(#ea-strahl); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 100 100; animation: ea-strahl 9s infinite; }
.ea-fluss { stroke: #f0c080; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 3 15; opacity: 0; animation: ea-fluss .45s linear infinite, ea-sicht 9s infinite; }
.ea-r { animation-delay: .25s; }
.ea-fluss.ea-r { animation-delay: 0s, .25s; }
.ea-fuellung { animation: ea-fuellen 9s infinite; }
.ea-aufprall { opacity: 0; animation: ea-sicht 9s infinite; }
.ea-ring { transform-box: fill-box; transform-origin: center; animation: ea-ring .5s ease-out infinite; }
.ea-ring.ea-r { animation-delay: .22s; }
.ea-tropfen { opacity: 0; animation: ea-tropf 9s infinite; }
.ea-t2 { animation-name: ea-tropf2; }
.ea-dampf path { opacity: 0; animation: ea-dampf 9s infinite; }
.ea-dampf .ea-d2 { animation-delay: .7s; }
@keyframes ea-strahl {
  0% { stroke-dashoffset: 100; stroke-width: 3; animation-timing-function: ease-in; }
  7% { stroke-dashoffset: 0; stroke-width: 4.5; }
  56% { stroke-dashoffset: 0; stroke-width: 4.5; }
  66% { stroke-dashoffset: 0; stroke-width: 2; animation-timing-function: ease-in; }
  74%, 100% { stroke-dashoffset: -100; stroke-width: 1.5; }
}
@keyframes ea-fluss { to { stroke-dashoffset: -18; } }
@keyframes ea-sicht { 0%, 7% { opacity: 0; } 11%, 58% { opacity: .5; } 68%, 100% { opacity: 0; } }
@keyframes ea-fuellen {
  0%, 6% { transform: translateY(150px); opacity: 1; animation-timing-function: cubic-bezier(.3,.1,.4,1); }
  72% { transform: translateY(0); opacity: 1; }
  91% { transform: translateY(0); opacity: 1; }
  96% { transform: translateY(0); opacity: 0; }
  97% { transform: translateY(150px); opacity: 0; }
  100% { transform: translateY(150px); opacity: 1; }
}
@keyframes ea-ring { from { transform: scale(.4); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
@keyframes ea-tropf { 0%, 75% { opacity: 0; transform: translateY(0); } 76% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in; } 81% { opacity: 1; transform: translateY(258px); } 82%, 100% { opacity: 0; transform: translateY(258px); } }
@keyframes ea-tropf2 { 0%, 82% { opacity: 0; transform: translateY(0); } 83% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in; } 88% { opacity: 1; transform: translateY(258px); } 89%, 100% { opacity: 0; transform: translateY(258px); } }
@keyframes ea-dampf { 0%, 64% { opacity: 0; transform: translateY(10px); } 76% { opacity: .2; } 94%, 100% { opacity: 0; transform: translateY(-46px); } }

/* ---------- Tassen ---------- */
.tasse { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 34px 18px 26px; }
.tasse svg { width: 100%; max-width: 230px; height: auto; color: var(--tinte); }
.tasse svg text { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 8px; letter-spacing: .06em; fill: var(--tinte); text-transform: uppercase; }
.tasse-name { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--leise); }

/* ---------- Bilder-Reihe ---------- */
.bild-zelle { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--linie); }
.bild-zelle img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.bild-zelle:hover img { transform: scale(1.03); }
.bild-zelle span { position: absolute; left: 18px; bottom: 14px; color: #fff; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(0,0,0,.5); }

/* ---------- Menü-Kacheln ---------- */
.menue-zelle { text-align: center; padding: 48px 28px 56px; }
.hand { display: block; height: 68px; width: auto; max-width: 100%; margin: 0 auto; color: var(--akzent); overflow: visible; }
.untertitel { margin: 10px 0 40px; font-size: 14px; color: var(--tinte); opacity: .8; }
.posten { display: table; margin: 0 auto 22px; max-width: 380px; }
.posten .preis { display: block; text-align: left; margin-left: -18px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.posten .name { display: block; font-weight: 700; font-size: 19px; line-height: 1.25; text-transform: uppercase; letter-spacing: -.005em; }
.posten .beschr { display: block; font-size: 11px; line-height: 1.45; color: var(--leise); margin-top: 2px; font-style: italic; }
.hinweis-zelle { padding: 22px 28px; text-align: center; font-size: 12px; color: var(--leise); }

/* ---------- Karussells ---------- */
.vitrine { text-align: center; padding: 44px 28px 40px; display: flex; flex-direction: column; align-items: center; }
.vitrine .hand { height: 78px; }
.buehne { position: relative; width: min(78%, 360px); aspect-ratio: 1; margin: 34px auto 0; overflow: hidden; touch-action: pan-y; }
.spur { display: flex; height: 100%; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.spur figure { flex: 0 0 100%; height: 100%; }
.spur img { width: 100%; height: 100%; object-fit: cover; }
.spur img.freisteller { object-fit: contain; padding: 4%; }
.bildtext { display: none; margin-top: 16px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--leise); min-height: 18px; }
.punkte { display: flex; gap: 16px; margin-top: 30px; }
.punkte button { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--tinte); background: transparent; cursor: pointer; padding: 0; transition: background .25s; }
.punkte button[aria-current="true"] { background: var(--tinte); }

/* ---------- Über uns / Besuch ---------- */
.info { padding: 40px 32px 44px; }
.info h3 { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 16px; }
.info p, .info li { font-size: 14px; color: var(--leise); }
.info p strong { color: var(--tinte); font-weight: 500; }
.info ul { list-style: none; }
.info li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--linie); }
.info li span:first-child { color: var(--tinte); }
.info a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.info .hand { height: 52px; margin: 0 0 14px; }

footer .reihe { grid-template-columns: 1fr auto; align-items: center; padding: 20px 32px; font-size: 12px; color: var(--leise); }
footer .reihe > * { border: 0; }
footer nav { display: flex; gap: 22px; }
footer a:hover { color: var(--tinte); }

/* Einblenden */
.zeigen { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s ease; }
.zeigen.da { opacity: 1; transform: none; }

/* ---------- Tablet ---------- */
@media (max-width: 980px) {
  .r4 { grid-template-columns: 1fr 1fr; }
  .r4 > :nth-child(2) { border-right: 0; }
  .r4 > :nth-child(-n+2) { border-bottom: 1px solid var(--linie); }
  .r3 { grid-template-columns: 1fr; }
  .r3 > * { border-right: 0; border-bottom: 1px solid var(--linie); }
  .r3 > :last-child { border-bottom: 0; }
}

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  .nav .reihe { grid-template-columns: 1fr auto 1fr; height: 72px; padding: 0 12px; }
  .nav a.link { display: none; }
  .nav .logo { grid-column: 2; width: 52px; }
  .menue-knopf { display: block; grid-column: 3; justify-self: end; background: none; border: 0; width: 44px; height: 44px; position: relative; cursor: pointer; color: var(--tinte); }
  .menue-knopf::before, .menue-knopf::after { content: ""; position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform .3s; }
  .menue-knopf::before { top: 18px; } .menue-knopf::after { top: 25px; }
  .nav.offen .menue-knopf::before { transform: translateY(3.5px) rotate(45deg); }
  .nav.offen .menue-knopf::after { transform: translateY(-3.5px) rotate(-45deg); }
  .mobil-menue { display: none; border-bottom: 1px solid var(--linie); background: var(--grund); }
  .nav.offen .mobil-menue { display: block; }
  .mobil-menue a { display: block; padding: 12px 24px; border-top: 1px solid var(--linie); }
  .hand { height: 58px; }
  .posten .name { font-size: 17px; }

  .r2, .start { grid-template-columns: 1fr; }
  .r2 > * { border-right: 0; border-bottom: 1px solid var(--linie); }
  .r2 > :last-child { border-bottom: 0; }
  .start-text { padding: 28px 22px 32px; gap: 36px; min-height: 420px; }
  .start-bild { min-height: 470px; }
  .oval { width: 160px; height: 88px; }
  .tasse { padding: 24px 10px 20px; }
  .menue-zelle { padding: 40px 20px 44px; }
  footer .reihe { grid-template-columns: 1fr; gap: 10px; padding: 20px 22px; }
}
@media (min-width: 761px) { .mobil-menue { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .zeigen { opacity: 1; transform: none; }
}