/* Café Wetterstein – gemeinsames Stylesheet
   Farben vom Haus am Wettersteinplatz: weißes Schild mit dunkelgrüner Schrift „Café Wetterstein Konditorei“,
   gelb-weiß gestreifte Markise, grüne Leisten im Gastraum. Nur helles Farbschema.
   Bewegung: GSAP + ScrollTrigger + Lenis (lokal in js/vendor), siehe script.js. Ohne JS ist alles sichtbar. */

:root {
  --papier: #fffdf7;
  --creme: #fbf6e7;
  --sahne: #fff3c4;
  --markise: #ffd23f;
  --markise-tief: #efb914;
  --streifen-weiss: #fffaf0;
  --tanne: #15402d;          /* Schrift wie auf dem Ladenschild */
  --tanne-tief: #0f3022;
  --gruen: #2c7a4d;
  --gruen-hell: #e2f0e5;
  --tinte: #1a3226;
  --grau: #56685d;
  --linie: #e8e1cb;
  --weiss: #ffffff;
  --rot: #a2452a;
  --rot-hell: #f9e5dc;

  --f-display: "Marcellus", "Optima", "Georgia", serif;
  --f-schrift: "Cormorant Garamond", "Georgia", serif;
  --f-text: "Mulish", "Segoe UI", system-ui, sans-serif;

  --s-xs: .8125rem;
  --s-sm: .9375rem;
  --s-md: 1.0625rem;
  --s-lg: clamp(1.15rem, 1rem + .5vw, 1.375rem);
  --s-xl: clamp(2rem, 1.2rem + 3vw, 3.4rem);
  --s-2xl: clamp(2.6rem, 1.3rem + 5.2vw, 5.6rem);

  --breite: 76rem;
  --rand: clamp(1rem, 4vw, 2.75rem);
  --r: 1.5rem;
  --schatten: 0 1px 2px rgb(40 50 20 / .06), 0 18px 40px -22px rgb(40 50 20 / .35);
  --kopf-h: 4.5rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font-family: var(--f-text); font-size: var(--s-md); line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { max-width: 100%; display: block; height: auto; }
figure { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--markise); color: var(--tanne); }

h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.08; margin: 0; text-wrap: balance; color: var(--tanne); letter-spacing: .005em; }
h1 { font-size: var(--s-2xl); }
h2 { font-size: var(--s-xl); }
h3 { font-size: 1.5rem; }
h1 em, h2 em { font-family: var(--f-schrift); font-style: italic; font-weight: 500; color: var(--gruen); letter-spacing: 0; font-size: 1.1em; }
p { margin: 0; max-width: 65ch; }

.wrap { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
.eyebrow { display: inline-block; font-size: var(--s-xs); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gruen); margin: 0; }
.leise { color: var(--grau); }
.num { font-variant-numeric: tabular-nums; }
.sprung { position: absolute; left: -999px; top: .5rem; z-index: 100; background: var(--tanne); color: #fff; padding: .6rem 1rem; border-radius: 999px; }
.sprung:focus { left: 1rem; }

section { padding-block: clamp(4rem, 9vw, 8rem); }
section.ohne-oben { padding-top: 0; }
.kopfzeile { display: grid; gap: .9rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.kopfzeile.zwei { grid-template-columns: 1fr 1fr; align-items: end; gap: 1rem 3rem; }
.kopfzeile.zwei > p { color: var(--grau); font-size: var(--s-lg); line-height: 1.5; }
@media (max-width: 52rem) { .kopfzeile.zwei { grid-template-columns: 1fr; } }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--papier) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); transition: box-shadow .3s; }
.kopf { box-shadow: 0 1px 0 var(--linie); }
.kopf.gescrollt { box-shadow: 0 1px 0 var(--linie), 0 10px 30px -18px rgb(30 40 20 / .3); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--kopf-h); }
.marke { display: grid; text-decoration: none; line-height: 1; padding-block: .6rem; }
.marke-name { font-family: var(--f-display); font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); letter-spacing: .14em; text-transform: uppercase; color: var(--tanne); white-space: nowrap; }
.marke-zusatz { font-size: .66rem; font-weight: 800; letter-spacing: .32em; text-transform: uppercase; color: var(--gruen); margin-top: .4rem; }

.nav { display: flex; align-items: center; gap: .15rem; }
.nav a { position: relative; text-decoration: none; font-size: var(--s-sm); font-weight: 600; color: var(--grau); padding: .55rem .85rem; border-radius: 999px; transition: color .2s, background .2s; }
.nav a:hover { color: var(--tanne); background: var(--creme); }
.nav a[aria-current="page"] { color: var(--tanne); background: var(--sahne); }
.nav .anruf { display: inline-flex; align-items: center; gap: .5rem; margin-left: .5rem; background: var(--tanne); color: #fff; padding-inline: 1rem 1.15rem; }
.nav .anruf svg { width: 1rem; height: 1rem; fill: var(--markise); }
.nav .anruf:hover { background: var(--gruen); color: #fff; }
.menue-knopf { display: none; }

@media (max-width: 66rem) {
  .menue-knopf { display: inline-flex; align-items: center; gap: .6rem; font: 700 var(--s-sm) var(--f-text); color: var(--tanne); background: var(--weiss); border: 1px solid var(--linie); border-radius: 999px; padding: .55rem 1rem .55rem .85rem; cursor: pointer; position: relative; z-index: 2; }
  .striche, .striche::before { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .3s; }
  .striche::before { content: ""; position: absolute; top: 6px; }
  .striche { transform: translateY(-3px); }
  .menue-knopf[aria-expanded="true"] .striche { transform: translateY(0) rotate(45deg); }
  .menue-knopf[aria-expanded="true"] .striche::before { top: 0; transform: rotate(-90deg); }
  .nav { position: fixed; inset: 0; z-index: 1; flex-direction: column; align-items: stretch; justify-content: center; gap: 0; padding: 6rem var(--rand) 2rem; background: var(--papier); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .nav.offen { opacity: 1; visibility: visible; }
  .nav a { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.8rem, 7vw, 2.6rem); color: var(--tanne); padding: .55rem 0; border-radius: 0; border-bottom: 1px solid var(--linie); background: none !important; }
  .nav a[aria-current="page"] { color: var(--gruen); }
  .nav .anruf { margin: 1.5rem 0 0; justify-content: center; font: 700 var(--s-md) var(--f-text); padding: 1rem; border-radius: 999px; border: 0; background: var(--tanne) !important; color: #fff; }
  body.menue-offen { overflow: hidden; }
}

/* ---------- Status ---------- */
.status { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--s-sm); font-weight: 700; padding: .42rem .9rem .42rem .75rem; border-radius: 999px; background: var(--weiss); box-shadow: inset 0 0 0 1px var(--linie); color: var(--tanne); }
.status::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--grau); flex: none; }
.status.offen { background: var(--gruen-hell); color: var(--gruen); box-shadow: none; }
.status.offen::before { background: var(--gruen); animation: puls 2.2s infinite; }
.status.zu { background: var(--rot-hell); color: var(--rot); box-shadow: none; }
.status.zu::before { background: var(--rot); }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgb(44 122 77 / .45); } 70% { box-shadow: 0 0 0 8px rgb(44 122 77 / 0); } 100% { box-shadow: 0 0 0 0 rgb(44 122 77 / 0); } }

/* ---------- Knöpfe & Links ---------- */
.knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; }
.knoepfe.mitte { justify-content: center; margin-top: 3rem; }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font: 700 var(--s-sm) var(--f-text); letter-spacing: .01em; text-decoration: none; padding: .95rem 1.5rem; border-radius: 999px; cursor: pointer; border: 1.5px solid var(--tanne); background: var(--tanne); color: #fff; transition: transform .2s, background .2s, border-color .2s, color .2s, box-shadow .2s; }
.knopf:hover { background: var(--gruen); border-color: var(--gruen); transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgb(21 64 45 / .7); }
.knopf.hell { background: transparent; color: var(--tanne); border-color: color-mix(in srgb, var(--tanne) 35%, transparent); }
.knopf.hell:hover { background: var(--weiss); border-color: var(--tanne); color: var(--tanne); }
.knopf.gelb { background: var(--markise); border-color: var(--markise); color: var(--tanne); }
.knopf.gelb:hover { background: #ffe07a; border-color: #ffe07a; }
.knopf.rand { background: transparent; border-color: rgb(255 255 255 / .35); color: #fff; }
.knopf.rand:hover { border-color: #fff; background: rgb(255 255 255 / .08); }
.pfeil { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: var(--s-sm); color: var(--gruen); text-decoration: none; letter-spacing: .02em; }
.pfeil::after { content: "→"; transition: transform .25s; }
a:hover .pfeil::after, .pfeil:hover::after { transform: translateX(5px); }

/* ---------- Sterne ---------- */
.sterne { display: inline-flex; gap: .12rem; color: var(--markise-tief); vertical-align: middle; }
.sterne svg { width: 1.05em; height: 1.05em; fill: currentColor; display: block; }
.sterne .stern-leer svg { opacity: .25; }
.stern-teil { position: relative; display: block; width: 1.05em; height: 1.05em; }
.stern-teil svg { position: absolute; inset: 0; }
.stern-teil svg:first-child { opacity: .25; }
.stern-teil svg:last-child { clip-path: inset(0 calc(100% - var(--teil)) 0 0); }

/* ---------- Startseite: Held ---------- */
.held { padding: 0 0 clamp(3.5rem, 7vw, 6rem); background: linear-gradient(180deg, #f6edd3, var(--papier) 72%); }
.held-raster { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-top: clamp(3rem, 6vw, 5rem); }
.held-text { display: grid; gap: 1.4rem; justify-items: start; min-width: 0; }
.held-text h1 { margin-top: -.3rem; }
.lead { font-size: var(--s-lg); line-height: 1.55; color: var(--grau); }
.held-note { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; padding: .55rem 1rem .55rem .6rem; border-radius: 999px; background: var(--weiss); box-shadow: var(--schatten); font-size: var(--s-sm); color: var(--grau); }
.held-note b { font-family: var(--f-display); font-weight: 400; font-size: 1.45rem; color: var(--tanne); background: var(--sahne); border-radius: 999px; padding: .2rem .7rem; line-height: 1.2; }
.held-note .sterne { font-size: 1rem; }
.held-note:hover { color: var(--tanne); }
.held-bilder { position: relative; min-height: clamp(26rem, 46vw, 40rem); }
.bogen { position: absolute; right: 0; top: 0; width: 78%; aspect-ratio: 4 / 5; border-radius: 999px 999px var(--r) var(--r); overflow: hidden; box-shadow: var(--schatten); border: 8px solid var(--weiss); }
.bogen img { width: 100%; height: 115%; object-fit: cover; margin-top: -7%; }
.polaroid { position: absolute; left: 0; bottom: -1.5rem; width: 52%; background: var(--weiss); padding: .6rem .6rem 0; box-shadow: var(--schatten); transform: rotate(-4deg); border-radius: .4rem; }
.polaroid img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: .2rem; }
.polaroid figcaption { font-family: var(--f-schrift); font-style: italic; font-weight: 600; font-size: 1.25rem; text-align: center; padding: .45rem 0 .6rem; color: var(--tanne); }
.stempel { position: absolute; left: 8%; top: 4%; width: clamp(96px, 10vw, 136px); aspect-ratio: 1; border-radius: 50%; background: var(--tanne); color: var(--sahne); display: grid; place-items: center; box-shadow: var(--schatten); }
.stempel svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: drehen 22s linear infinite; }
.stempel text { font: 800 10.5px var(--f-text); letter-spacing: .2em; text-transform: uppercase; fill: var(--sahne); }
.stempel span { font-size: 1.6rem; }
@keyframes drehen { to { transform: rotate(360deg); } }
@media (max-width: 60rem) {
  .held-raster { grid-template-columns: 1fr; }
  .held-bilder { min-height: 0; aspect-ratio: 1 / 1.05; margin-top: 1rem; }
  .bogen { width: 74%; }
  .stempel { left: 2%; top: 2%; }
}

/* ---------- Geschichte / Zitat ---------- */
.geschichte-raster { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.geschichte-bild { border-radius: var(--r); overflow: hidden; box-shadow: var(--schatten); }
.geschichte-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.geschichte-text { display: grid; gap: 1.5rem; justify-items: start; }
.geschichte-text > p:not(.eyebrow) { color: var(--grau); font-size: var(--s-lg); line-height: 1.6; }
.gross-zitat { margin: 0; }
.gross-zitat p { font-family: var(--f-schrift); font-style: italic; font-weight: 500; font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.9rem); line-height: 1.08; color: var(--tanne); max-width: 22ch; text-wrap: balance; }
.gross-zitat footer { margin-top: 1rem; font-size: var(--s-sm); font-weight: 700; letter-spacing: .06em; color: var(--grau); }
.gross-zitat footer::before { content: ""; display: inline-block; width: 2rem; height: 1.5px; background: var(--markise-tief); vertical-align: middle; margin-right: .7rem; }
.gross-zitat.mitte { text-align: center; }
.gross-zitat.mitte p { margin-inline: auto; }
@media (max-width: 52rem) { .geschichte-raster { grid-template-columns: 1fr; } }

/* ---------- Vitrine: Diashow im Apple-Stil ---------- */
.vitrine { background: var(--creme); overflow: hidden; }
.diashow { position: relative; --dia-b: min(64rem, 82vw); }
.dia-spur { position: relative; display: flex; gap: clamp(.75rem, 1.6vw, 1.5rem); overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: calc((100% - var(--dia-b)) / 2); padding-block: .5rem 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.dia-spur::-webkit-scrollbar { display: none; }
.dia { position: relative; flex: 0 0 var(--dia-b); aspect-ratio: 16 / 9; margin: 0; border-radius: 1.75rem; overflow: hidden; scroll-snap-align: center; scroll-snap-stop: always; background: var(--sahne); box-shadow: var(--schatten); transform: scale(.93); opacity: .4; transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .8s; cursor: pointer; }
.dia.aktiv { transform: none; opacity: 1; cursor: default; }
.dia img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(1.08); transition: transform 6s cubic-bezier(.2,.7,.2,1); }
.dia.aktiv img { transform: scale(1); }
.dia figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 4rem 2rem 1.5rem; color: #fff; font-weight: 700; font-size: var(--s-md); letter-spacing: .01em; background: linear-gradient(180deg, rgb(0 0 0 / 0), rgb(0 0 0 / .55)); opacity: 0; transform: translateY(10px); transition: opacity .6s .25s, transform .6s .25s; }
.dia.aktiv figcaption { opacity: 1; transform: none; }
.dia-pfeil { position: absolute; top: calc(50% - 2.9rem); z-index: 2; width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: var(--tanne); background: rgb(255 255 255 / .85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 8px 22px rgb(0 0 0 / .14); transition: opacity .3s, transform .25s, background .2s; }
.dia-pfeil svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dia-pfeil:hover { background: #fff; transform: scale(1.07); }
.dia-pfeil.zurueck { left: calc((100% - var(--dia-b)) / 2 + 1.25rem); }
.dia-pfeil.weiter { right: calc((100% - var(--dia-b)) / 2 + 1.25rem); }
.dia-pfeil:disabled { opacity: 0; pointer-events: none; }
.dia-steuerung { display: flex; justify-content: center; align-items: center; gap: .7rem; margin-top: 1.4rem; }
.dia-punkte { display: flex; align-items: center; gap: .65rem; padding: 1.05rem 1.2rem; border-radius: 999px; background: rgb(21 64 45 / .08); }
.dia-punkte button { position: relative; width: .55rem; height: .55rem; padding: 0; border: 0; border-radius: 999px; background: rgb(21 64 45 / .32); cursor: pointer; overflow: hidden; transition: width .5s cubic-bezier(.2,.7,.2,1), background .3s; }
.dia-punkte button:hover { background: rgb(21 64 45 / .5); }
.dia-punkte button.aktiv { width: 3.2rem; background: rgb(21 64 45 / .2); }
.dia-punkte button span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--tanne); border-radius: inherit; }
.dia-punkte button.aktiv span { animation: dia-lauf 5s linear forwards; }
.diashow.ausserhalb .dia-punkte button.aktiv span { animation-play-state: paused; }
.diashow.pausiert .dia-punkte button.aktiv span { animation: none; width: 100%; }
@keyframes dia-lauf { to { width: 100%; } }
.dia-play { width: 3.1rem; height: 3.1rem; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: var(--tanne); background: rgb(21 64 45 / .08); transition: background .2s; }
.dia-play:hover { background: rgb(21 64 45 / .14); }
.dia-play svg { width: 1rem; height: 1rem; fill: currentColor; }
.dia-play .play, .diashow.pausiert .dia-play .pause { display: none; }
.diashow.pausiert .dia-play .play { display: block; }
@media (max-width: 52rem) {
  .diashow { --dia-b: 86vw; }
  .dia { aspect-ratio: 4 / 5; border-radius: 1.25rem; }
  .dia figcaption { padding: 3rem 1.25rem 1.1rem; }
  .dia-pfeil { display: none; }
}
.themen { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: clamp(2rem, 4vw, 3rem); color: var(--grau); font-size: var(--s-sm); }
.themen ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.themen li { display: inline-flex; align-items: center; gap: .55rem; background: var(--weiss); border-radius: 999px; padding: .4rem .5rem .4rem 1rem; box-shadow: inset 0 0 0 1px var(--linie); font-weight: 700; color: var(--tanne); }
.themen li b { font-size: .78rem; background: var(--gruen-hell); color: var(--gruen); border-radius: 999px; padding: .1rem .55rem; }

/* ---------- Angebot: Bildkarten ---------- */
.karten-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
@media (max-width: 60rem) { .karten-3 { grid-template-columns: 1fr; } }
.karte-bild { display: grid; gap: .8rem; align-content: start; text-decoration: none; }
.karte-bild figure { border-radius: var(--r); overflow: hidden; box-shadow: var(--schatten); }
.karte-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.karte-bild:hover img { transform: scale(1.05); }
.karte-bild h3 { margin-top: .6rem; font-size: 1.75rem; }
.karte-bild p { color: var(--grau); }
@media (max-width: 60rem) { .karte-bild img { aspect-ratio: 4 / 3; } }

/* ---------- Foto-Band ---------- */
.band-foto { position: relative; padding: 0; min-height: clamp(30rem, 78vh, 46rem); display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.band-foto.klein { min-height: clamp(26rem, 64vh, 38rem); }
.band-bild { position: absolute; inset: -12% 0; z-index: -1; }
.band-bild img { width: 100%; height: 100%; object-fit: cover; }
.band-foto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(10 30 20 / 0) 35%, rgb(10 30 20 / .62)); }
.band-text { max-width: 34rem; margin-bottom: clamp(2rem, 6vw, 4.5rem); padding: clamp(1.5rem, 3vw, 2.25rem); background: color-mix(in srgb, var(--papier) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: var(--r); display: grid; gap: .8rem; box-shadow: var(--schatten); }
.band-text h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem); }
.band-text p:not(.eyebrow) { color: var(--grau); }

/* ---------- Bewertungen ---------- */
.stimmen { background: var(--tanne); color: #e9efe6; }
.stimmen h2 { color: #fff; }
.stimmen .eyebrow { color: var(--markise); }
.stimmen-kopf { display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.stimmen-kopf .stand { margin-top: .8rem; color: rgb(233 239 230 / .7); font-size: var(--s-sm); }
.note-gross { display: grid; justify-items: start; gap: .4rem; }
.note-gross b { font-family: var(--f-display); font-weight: 400; font-size: clamp(5rem, 3.5rem + 6vw, 8.5rem); line-height: .85; color: #fff; }
.note-gross .sterne { font-size: 1.5rem; color: var(--markise); }
.note-gross span:last-child { font-size: var(--s-sm); color: rgb(233 239 230 / .75); }
@media (max-width: 44rem) { .stimmen-kopf { grid-template-columns: 1fr; } }
.stimmen-raster { columns: 3 18rem; column-gap: 1.1rem; }
.stimmen-raster .stimme { margin-bottom: 1.1rem; }
.stimme { margin: 0; padding: 1.5rem 1.6rem; border-radius: 1.25rem; background: var(--weiss); color: var(--tinte); display: grid; gap: .9rem; box-shadow: var(--schatten); break-inside: avoid; }
.stimmen .stimme { background: rgb(255 255 255 / .06); color: #f1f5ee; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.stimme-kopf { display: flex; justify-content: space-between; align-items: center; }
.stimme .sterne { font-size: 1.05rem; color: var(--markise-tief); }
.stimmen .stimme .sterne { color: var(--markise); }
.stimme .g { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.stimme p { font-family: var(--f-schrift); font-size: 1.32rem; line-height: 1.35; font-weight: 500; }
.stimme footer { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--s-sm); }
.stimme footer time { opacity: .6; }

/* Bewertungsseite */
.bewertung-kopf { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.bewertung-kopf > div:first-child { display: grid; gap: 1.3rem; justify-items: start; }
.note-karte { background: var(--tanne); color: #e9efe6; border-radius: var(--r); padding: clamp(1.75rem, 4vw, 2.75rem); display: grid; gap: .5rem; justify-items: start; box-shadow: var(--schatten); }
.note-karte > b { font-family: var(--f-display); font-weight: 400; font-size: clamp(4.5rem, 3rem + 5vw, 7rem); line-height: .85; color: #fff; }
.note-karte .sterne { font-size: 1.4rem; color: var(--markise); }
.note-karte > span { color: rgb(233 239 230 / .8); font-size: var(--s-sm); }
.note-karte .themen { margin-top: 1.2rem; color: rgb(233 239 230 / .75); }
.note-karte .themen li { background: rgb(255 255 255 / .08); box-shadow: none; color: #fff; }
.note-karte .themen li b { background: var(--markise); color: var(--tanne); }
@media (max-width: 52rem) { .bewertung-kopf { grid-template-columns: 1fr; } }
.stimmen-seite { padding-top: 0; }
.stimmen-spalten { columns: 3 20rem; column-gap: 1.1rem; }
.stimmen-spalten .stimme { margin-bottom: 1.1rem; display: grid; }

/* ---------- Karte / Besuch ---------- */
.besuch-block { background: var(--creme); }
.karte-box { display: grid; grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); border-radius: var(--r); overflow: hidden; background: var(--weiss); box-shadow: var(--schatten); }
.karte-info { padding: clamp(1.6rem, 3vw, 2.5rem); display: grid; gap: 1.05rem; align-content: center; justify-items: start; }
.karte-info address { font-style: normal; font-family: var(--f-display); font-size: 1.55rem; line-height: 1.3; color: var(--tanne); }
.karte-zeiten { margin: 0; width: 100%; font-variant-numeric: tabular-nums; }
.karte-zeiten div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--linie); }
.karte-zeiten dt { color: var(--grau); }
.karte-zeiten dd { margin: 0; font-weight: 700; color: var(--tanne); }
.karte-info .leise { font-size: var(--s-sm); }
.karte-info .status { font-size: .85rem; }
.karte-info .knopf { padding: .8rem 1.2rem; }
.karte-rahmen { position: relative; min-height: 32rem; background: #eceee8; overflow: hidden; }
.karte-rahmen > a, .karte-rahmen > a img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.karte-rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .8s ease; }
.karte-rahmen iframe.geladen { opacity: 1; }
.karte-rahmen.allein { border-radius: var(--r); box-shadow: var(--schatten); min-height: 30rem; }
@media (max-width: 52rem) {
  .karte-box { grid-template-columns: 1fr; }
  .karte-rahmen { order: -1; min-height: 22rem; }
  .karte-rahmen.allein { min-height: 24rem; }
}

.besuch-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
@media (max-width: 52rem) { .besuch-raster { grid-template-columns: 1fr; } }
.kachel { background: var(--weiss); border-radius: var(--r); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: inset 0 0 0 1px var(--linie); display: grid; gap: 1rem; align-content: start; min-width: 0; }
.kachel h2 { font-size: 1.9rem; }
.zeiten { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.zeiten th, .zeiten td { text-align: left; padding: .75rem 0; border-bottom: 1px solid var(--linie); font-weight: 500; }
.zeiten td { text-align: right; }
.zeiten tr.heute th, .zeiten tr.heute td { font-weight: 800; color: var(--gruen); }
.zeiten tr.heute th::after { content: "heute"; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; margin-left: .6rem; padding: .15rem .5rem; border-radius: 999px; background: var(--gruen-hell); vertical-align: middle; }
.klein-text { font-size: var(--s-sm); }
.kontakt-liste { display: grid; gap: 1.4rem; }
.kontakt-liste address { font-style: normal; font-family: var(--f-display); font-size: 1.5rem; line-height: 1.35; color: var(--tanne); margin: .3rem 0 .6rem; }
.gross-link { display: block; font-family: var(--f-display); font-size: 1.7rem; color: var(--tanne); text-decoration: none; margin: .3rem 0 .6rem; }
.kopieren { font: 700 var(--s-xs) var(--f-text); color: var(--grau); background: none; border: 1px solid var(--linie); border-radius: 999px; padding: .35rem .8rem; cursor: pointer; }
.kopieren:hover { color: var(--tanne); border-color: var(--tanne); }

.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
@media (max-width: 52rem) { .zwei-spalten { grid-template-columns: 1fr; } }
.rund-bild { border-radius: var(--r); overflow: hidden; box-shadow: var(--schatten); }
.rund-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.text-block, .anfahrt { display: grid; gap: 1.25rem; justify-items: start; }
.text-block > p:not(.eyebrow) { color: var(--grau); font-size: var(--s-lg); line-height: 1.6; }
.anfahrt-punkt { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding-top: 1rem; border-top: 1px solid var(--linie); width: 100%; }
.anfahrt-punkt h3 { font-size: 1.35rem; margin-bottom: .2rem; }
.anfahrt-punkt p { color: var(--grau); }
.ubahn { width: 2.4rem; height: 2.4rem; border-radius: .45rem; display: grid; place-items: center; background: #1b5aa6; color: #fff; font-weight: 800; }
.ubahn.tram { background: #d4271e; }
.ubahn.rad, .ubahn.zufuss { background: var(--gruen); border-radius: 50%; }
.ubahn svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ubahn.zufuss svg circle { fill: #fff; stroke: none; }
.anfahrt-abschnitt { padding-top: clamp(1rem, 3vw, 2rem); }
.anfahrt-raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: stretch; }
.anfahrt-karte, .anfahrt-karte .karte-rahmen { height: 100%; min-height: 34rem; }
.anfahrt { align-content: center; }
.route { display: inline-flex; align-items: center; gap: .45rem; margin-top: .7rem; padding: .5rem .95rem; border-radius: 999px; background: var(--gruen-hell); color: var(--gruen); font-size: var(--s-sm); font-weight: 800; text-decoration: none; transition: background .2s, color .2s; }
.route::after { content: "↗"; }
.route:hover { background: var(--gruen); color: #fff; }
@media (max-width: 52rem) {
  .anfahrt-raster { grid-template-columns: 1fr; }
  .anfahrt-karte, .anfahrt-karte .karte-rahmen { min-height: 24rem; }
}

/* ---------- Seitenkopf (Unterseiten) ---------- */
.seitenkopf { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); background: linear-gradient(180deg, var(--creme), var(--papier)); }
.seitenkopf .wrap { display: grid; gap: 1.3rem; justify-items: start; }
.seitenkopf-raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem) !important; }
.seitenkopf h1 { font-size: clamp(2.4rem, 1.2rem + 3.8vw, 4.3rem); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.seitenkopf-raster > div { display: grid; gap: 1.3rem; justify-items: start; }
.seitenkopf-bild { width: 100%; border-radius: var(--r); overflow: hidden; box-shadow: var(--schatten); }
.seitenkopf-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.seitenkopf-bild.hoch img { aspect-ratio: 4 / 4.4; }
@media (max-width: 52rem) { .seitenkopf-raster { grid-template-columns: 1fr; } }

/* ---------- Speisekarte ---------- */
.karte-nav { display: flex !important; flex-wrap: wrap; gap: .5rem; margin-top: clamp(2rem, 4vw, 3rem); }
.karte-nav a { font-size: var(--s-sm); font-weight: 700; text-decoration: none; padding: .5rem 1rem; border-radius: 999px; background: var(--weiss); box-shadow: inset 0 0 0 1px var(--linie); color: var(--tanne); transition: background .2s, box-shadow .2s; }
.karte-nav a:hover { background: var(--sahne); box-shadow: inset 0 0 0 1px var(--markise); }
.karte-abschnitt { padding-top: 1rem; }
.karte { columns: 2 24rem; column-gap: 1.25rem; }
.gruppe { break-inside: avoid; display: inline-block; width: 100%; margin-bottom: 1.25rem; background: var(--weiss); border-radius: var(--r); padding: clamp(1.4rem, 3vw, 2.1rem); box-shadow: inset 0 0 0 1px var(--linie); scroll-margin-top: calc(var(--kopf-h) + 1.5rem); }
.gruppe.gelb { background: var(--sahne); box-shadow: inset 0 0 0 1px #f7df7f; }
.gruppe h2 { font-size: 1.75rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .85rem; margin-bottom: .3rem; border-bottom: 1.5px solid var(--tanne); }
.gruppe h2.zweit { margin-top: 1.75rem; }
.gruppe h2 small { font-family: var(--f-text); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gruen); text-align: right; }
.posten { list-style: none; margin: 0; padding: 0; }
.posten li { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; padding: .78rem 0; border-bottom: 1px dashed var(--linie); }
.posten li:last-child { border-bottom: 0; }
.posten .name { font-weight: 700; }
.posten .name em { font-style: normal; font-weight: 500; color: var(--grau); font-size: var(--s-sm); margin-left: .35rem; white-space: nowrap; }
.posten .preis { font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; color: var(--tanne); }
.posten .info { grid-column: 1 / -1; font-size: var(--s-sm); color: var(--grau); }
.gruppe-bild { margin-top: 1rem; border-radius: 1rem; overflow: hidden; }
.gruppe-bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.preis-tafel { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.1rem 0 1rem; }
.preis-tafel > div { background: var(--weiss); border-radius: 1rem; padding: 1rem 1.2rem; display: grid; gap: .35rem; }
.preis-tafel p { display: flex; justify-content: space-between; font-weight: 700; }
.preis-tafel b { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; color: var(--tanne); }
.mini-galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: 1.1rem; }
.mini-galerie figure { border-radius: .8rem; overflow: hidden; }
.mini-galerie img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.hinweis { font-size: var(--s-sm); color: var(--grau); padding: 1rem 1.25rem; border-radius: 1rem; background: var(--creme); max-width: none; }

/* ---------- Das Café ---------- */
.zitat-band { background: var(--creme); padding-block: clamp(3.5rem, 7vw, 6rem); }
.merkmale { list-style: none; padding: 0; margin: 0; display: grid; }
.merkmale li { display: flex; gap: .75rem; align-items: baseline; padding: .6rem 0; border-bottom: 1px solid var(--linie); }
.merkmale li:last-child { border-bottom: 0; }
.merkmale li::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--markise-tief); transform: translateY(-.1rem); }
.galerie { columns: 3 16rem; column-gap: 1rem; }
.galerie figure { break-inside: avoid; margin-bottom: 1rem; border-radius: 1.1rem; overflow: hidden; cursor: zoom-in; box-shadow: var(--schatten); }
.galerie img { width: 100%; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.galerie figure:hover img { transform: scale(1.04); }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgb(12 26 18 / .92); display: grid; place-items: center; padding: 1.5rem; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(100%, 72rem); max-height: 86vh; border-radius: 1rem; box-shadow: 0 30px 80px rgb(0 0 0 / .5); }
.lightbox-zu { position: absolute; top: 1rem; right: 1rem; width: 3rem; height: 3rem; border-radius: 50%; border: 0; background: var(--weiss); color: var(--tanne); font-size: 1.2rem; cursor: pointer; }

/* ---------- Fuß ---------- */
.fuss { background: var(--tanne-tief); color: rgb(233 239 230 / .78); font-size: var(--s-sm); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem; }

.fuss-marke { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .08em; font-size: clamp(2.2rem, 7.6vw, 7.4rem); line-height: 1; color: var(--sahne); max-width: none; white-space: nowrap; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.fuss-spalten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; padding-bottom: 2.5rem; }
.fuss h4 { margin: 0 0 .7rem; font: 800 var(--s-xs) var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--markise); }
.fuss p + p { margin-top: .6rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: #fff; }
.fuss .leise { color: rgb(233 239 230 / .55); }
.fuss-sterne b { font-family: var(--f-display); font-weight: 400; font-size: 1.6rem; color: #fff; }
.fuss-sterne .sterne { color: var(--markise); }
.fuss .klein { border-top: 1px solid rgb(255 255 255 / .12); padding-top: 1.4rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; font-size: var(--s-xs); }
@media (max-width: 52rem) { .fuss-spalten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 30rem) { .fuss-spalten { grid-template-columns: 1fr; } }

/* ---------- Rechtstexte ---------- */
.recht { max-width: 48rem; display: grid; gap: 1rem; }
.recht h2 { font-size: 1.5rem; margin-top: 1.25rem; }
.recht p { color: var(--grau); }

/* ---------- Bewegung (nur mit JS und ohne reduzierte Bewegung) ---------- */
.wort { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.wort > span { display: inline-block; will-change: transform; }

/* ---------- WhatsApp, Neues & Bestellungen (14.10.2026) ---------- */
.nav .whatsapp { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; padding: 0; margin-left: .5rem; box-shadow: inset 0 0 0 1.5px var(--linie); }
.nav .whatsapp svg { width: 1.15rem; height: 1.15rem; fill: #25d366; }
.nav .whatsapp span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav .whatsapp + .anruf { margin-left: .35rem; }
@media (max-width: 66rem) {
  .nav .whatsapp { width: auto; height: auto; margin: 1.5rem 0 0; gap: .6rem; font: 700 var(--s-md) var(--f-text); padding: 1rem; border-radius: 999px; border: 0; box-shadow: inset 0 0 0 1.5px var(--linie); }
  .nav .whatsapp span { position: static; width: auto; height: auto; clip: auto; }
  .nav .whatsapp + .anruf { margin: .75rem 0 0; }
}
.wa-schwebe { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.25rem .8rem 1rem; border-radius: 999px; background: var(--tanne); color: #fff; font: 700 var(--s-sm) var(--f-text); text-decoration: none; box-shadow: 0 14px 30px -12px rgb(15 48 34 / .6); opacity: 0; transform: translateY(1rem); pointer-events: none; transition: opacity .35s, transform .35s, background .2s; }
.wa-schwebe.zeigen { opacity: 1; transform: none; pointer-events: auto; }
.wa-schwebe:hover { background: var(--gruen); }
.wa-schwebe svg { width: 1.35rem; height: 1.35rem; fill: #25d366; }
body.menue-offen .wa-schwebe { opacity: 0; pointer-events: none; }
.knopf.wa svg { width: 1.15rem; height: 1.15rem; fill: #25d366; }
.neu-marke { display: inline-block; font: 800 .64rem var(--f-text); letter-spacing: .14em; text-transform: uppercase; background: var(--markise); color: var(--tanne); border-radius: 999px; padding: .2rem .6rem; margin-left: .5rem; vertical-align: .15em; }
.zwei-spalten.gedreht > :first-child { order: 2; }
@media (max-width: 52rem) { .zwei-spalten.gedreht > :first-child { order: 0; } }
.text-block .merkmale { width: 100%; }
.text-block .knoepfe { margin-top: .4rem; }
.gruppe .leise + .posten { margin-top: .6rem; }
.bestellen { background: var(--creme); }
/* Handy-Menü: der Weichzeichner der Kopfzeile darf das offene Menü nicht auf Kopfhöhe einklemmen */
body.menue-offen .kopf { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--papier); }
.preis-tafel.eins { grid-template-columns: 1fr; }
.held-bestellen { display: grid; gap: .3rem; text-decoration: none; max-width: 34rem; padding: 1.1rem 1.35rem; border-radius: var(--r); background: var(--sahne); box-shadow: inset 0 0 0 1.5px #f7df7f; color: var(--grau); font-size: var(--s-sm); transition: box-shadow .2s, transform .2s; }
.held-bestellen b { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; line-height: 1.2; color: var(--tanne); }
.held-bestellen:hover { box-shadow: inset 0 0 0 1.5px var(--markise-tief); transform: translateY(-2px); }
.bestell-leiste { display: flex; align-items: center; justify-content: center; gap: .55rem; padding: .6rem var(--rand); background: var(--markise); color: var(--tanne); font-size: var(--s-sm); line-height: 1.35; text-align: center; text-decoration: none; }
.bestell-leiste b { font-weight: 800; }
.bestell-leiste svg { width: 1.1rem; height: 1.1rem; flex: none; fill: var(--tanne); }
.bestell-leiste:hover span { text-decoration: underline; text-underline-offset: 3px; }
.bestell-leiste .kurz { display: none; }
@media (max-width: 40rem) { .bestell-leiste .lang { display: none; } .bestell-leiste .kurz { display: inline; } }

/* ---------- Spezialanfertigung ---------- */
.spezial-raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.spezial-bild { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--schatten); background: var(--weiss); }
.spezial-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.spezial-bild figcaption { padding: .9rem 1.3rem 1rem; font-family: var(--f-schrift); font-style: italic; font-weight: 600; font-size: 1.2rem; line-height: 1.3; color: var(--tanne); }
.spezial-text { display: grid; gap: 1.3rem; justify-items: start; }
.spezial-schritte { list-style: none; margin: .3rem 0; padding: 0; display: grid; gap: .2rem; width: 100%; counter-reset: schritt; }
.spezial-schritte li { counter-increment: schritt; display: grid; grid-template-columns: 2.6rem 1fr; column-gap: 1rem; align-items: baseline; padding: .85rem 0; border-top: 1px solid var(--linie); }
.spezial-schritte li::before { content: counter(schritt); grid-row: span 2; align-self: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--sahne); color: var(--tanne); font-family: var(--f-display); font-size: 1.15rem; }
.spezial-schritte b { color: var(--tanne); }
.spezial-schritte span { color: var(--grau); font-size: var(--s-sm); }
@media (max-width: 52rem) { .spezial-raster { grid-template-columns: 1fr; } }
.spezial { scroll-margin-top: var(--kopf-h); }
.spezial-hinweis { display: grid; gap: .25rem; margin-top: 1.1rem; padding: 1rem 1.2rem; border-radius: 1rem; background: var(--tanne); color: rgb(255 255 255 / .82); text-decoration: none; font-size: var(--s-sm); }
.spezial-hinweis b { color: var(--markise); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.spezial-hinweis span::after { content: " →"; color: var(--markise); }

/* ---------- Häufige Fragen ---------- */
.faq { background: var(--creme); }
.faq-raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.faq-liste { display: grid; gap: .7rem; }
.faq-frage { background: var(--weiss); border-radius: 1rem; box-shadow: inset 0 0 0 1px var(--linie); padding: 0 1.3rem; }
.faq-frage summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; font-weight: 700; color: var(--tanne); }
.faq-frage summary::-webkit-details-marker { display: none; }
.faq-frage summary::after { content: "+"; font-family: var(--f-display); font-size: 1.4rem; line-height: 1; color: var(--markise-tief); transition: transform .25s; }
.faq-frage[open] summary::after { transform: rotate(45deg); }
.faq-frage p { color: var(--grau); padding-bottom: 1.2rem; max-width: none; }
@media (max-width: 52rem) { .faq-raster { grid-template-columns: 1fr; } }

/* ---------- Neu bei uns ---------- */
.neu-block { background: var(--creme); padding-block: clamp(3rem, 6vw, 5rem); }
.neu-kopf { display: grid; gap: .7rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.neu-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.neu-karte { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1.4rem; align-items: center; padding: 1rem 1.6rem 1rem 1rem; background: var(--weiss); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--linie); text-decoration: none; color: inherit; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.neu-karte:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--linie), var(--schatten); }
.neu-karte figure { border-radius: 1rem; overflow: hidden; }
.neu-karte img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 62%; }
.neu-karte > div:last-child { display: grid; gap: .45rem; justify-items: start; }
.neu-karte h3 { font-size: clamp(1.45rem, 1.2rem + .8vw, 1.85rem); }
.neu-karte p { color: var(--grau); font-size: var(--s-sm); line-height: 1.55; }
.neu-karte.winter { background: var(--tanne); box-shadow: none; }
.neu-karte.winter h3 { color: #fff; }
.neu-karte.winter p { color: rgb(255 255 255 / .78); }
.neu-karte.winter .pfeil { color: var(--markise); }
.neu-symbol { aspect-ratio: 4 / 5; border-radius: 1rem; display: grid; place-items: center; background: rgb(255 255 255 / .07); color: var(--markise); }
.neu-symbol svg { width: 52%; }
@media (max-width: 60rem) { .neu-karten { grid-template-columns: 1fr; } }
@media (max-width: 30rem) { .neu-karte { grid-template-columns: 7rem 1fr; gap: 1rem; padding-right: 1.1rem; } }
.neu-karte .neu-marke { margin-left: 0; justify-self: start; }