/* Weingut Alter Berg – Markenwelt der bisherigen Website (Open Sans, Versal-Titel, Oliv/Taupe/Weinrot, Kreis-Motiv) */
:root {
    color-scheme: light;
    --olive: #c3b320; --olive-d: #978b19; --olive-dd: #6b6312; --olive-l: #f5f2d9;
    --taupe: #7f736d; --text: #6a5f59; --brown: #816e53; --stone: #c9c0bb; --stone-l: #f5f2f0; --stone-m: #e9e4e1;
    --wine: #923c4f; --wine-d: #6e2d3b; --wine-l: #f6e9ec;
    --dark: #212529; --white: #fff;
    --line: rgba(127, 115, 109, .22);
    --sans: "Open Sans", Arial, Helvetica, sans-serif;
    --hand: "Shadows Into Light", "Comic Sans MS", cursive;
    --max: 1180px; --r: 14px;
    --shadow: 0 1px 2px rgba(33, 37, 41, .05), 0 14px 36px -16px rgba(33, 37, 41, .25);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--white); color: var(--text); font: 15px/1.7 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--sans); color: var(--brown); text-transform: uppercase; margin: 0; line-height: 1.15; text-wrap: balance; }
h1 { font-weight: 300; font-size: clamp(2.2rem, 5.4vw, 4.2rem); letter-spacing: -.02em; }
h2 { font-weight: 300; font-size: clamp(1.7rem, 3.4vw, 2.6rem); letter-spacing: -.03em; }
h2.h-sm { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
h3 { font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; }
p { margin: 0; }
.container { max-width: var(--max); margin: 0 auto; padding-inline: 24px; }
.container.narrow { max-width: 820px; }
.label { font: 600 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--olive-d); }
.lead { font-size: 1.08rem; max-width: 58ch; }
.muted { color: var(--taupe); }
.small { font-size: .85rem; }
.hand { font-family: var(--hand); text-transform: none; letter-spacing: 0; color: var(--olive-d); font-weight: 400; font-size: 1.5rem; }
.sr, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.section { padding-block: clamp(56px, 8vw, 104px); }
.section.alt { background: var(--stone-l); }
/* two white sections in a row (e.g. Auszeichnungen → Geschichte): dotted divider in the brand style */
.section:not(.alt):not(.highlight) + .section:not(.alt):not(.highlight) { position: relative; }
.section:not(.alt):not(.highlight) + .section:not(.alt):not(.highlight)::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(calc(var(--max) - 48px), calc(100% - 32px)); height: 1px; background-image: linear-gradient(to right, var(--stone) 33%, transparent 0); background-size: 5px 1px; background-repeat: repeat-x; }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 32px; flex-wrap: wrap; margin-bottom: 36px; }
.head > div { display: grid; gap: 12px; min-width: 0; }
.head.center { justify-content: center; text-align: center; }
.head.center > div { justify-items: center; }
hr.dots { border: 0; height: 5px; margin: 0; background-image: linear-gradient(to right, var(--taupe) 33%, transparent 0); background-size: 5px 1px; background-repeat: repeat-x; background-position: bottom; opacity: .6; }
.prose { display: grid; gap: 1em; }
.prose h1, .prose h2 { font-size: 1.6rem; margin-top: .6em; }
.prose h3 { margin-top: .6em; }
.prose a { color: var(--olive-d); }
.prose ul { margin: 0; padding-left: 1.2em; }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 24px; border-radius: 999px; border: 1.5px solid transparent; font: 600 .8rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: background .2s, transform .2s, box-shadow .2s, color .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-olive { background: var(--olive); color: #fff; }
.btn-olive:hover { background: var(--olive-d); box-shadow: 0 10px 24px -12px var(--olive-d); }
.btn-line { border-color: var(--stone); color: var(--brown); background: #fff; }
.btn-line:hover { border-color: var(--brown); }
.btn-white { background: #fff; color: var(--wine-d); }
.btns { display: flex; gap: 10px; flex-wrap: wrap; }
.link { color: var(--olive-d); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.link svg { width: 16px; height: 16px; transition: transform .2s; }
.link:hover svg { transform: translateX(3px); }

.flash { padding: 12px 16px; border-radius: 12px; font-size: .92rem; margin-bottom: 16px; }
.flash.ok { background: var(--olive-l); color: var(--olive-dd); }
.flash.err { background: var(--wine-l); color: var(--wine-d); }
.flash a { color: inherit; font-weight: 600; }

/* Kreis-Band (Originalgrafik der bisherigen Website) */
.band { height: 46px; background: var(--stone) url(/static/img/kreis-band.png) center / cover; }

/* Header */
.header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(255, 255, 255, .95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.header.scrolled { border-color: var(--line); box-shadow: 0 8px 24px -18px rgba(33, 37, 41, .4); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 96px; transition: height .3s; }
.header.scrolled .nav { height: 72px; }
.brand { display: block; height: 76px; transition: height .3s; flex: none; }
.header.scrolled .brand { height: 54px; }
.brand img { height: 100%; width: auto; }
.menu { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.menu a { display: block; text-decoration: none; font: 500 .72rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--brown); padding: 11px 13px; border-radius: 999px; transition: background .2s, color .2s; white-space: nowrap; }
.menu a:hover { background: var(--stone-l); }
.menu a.active { background: var(--olive); color: #fff; }
.menu .has-sub { position: relative; }
.menu .has-sub > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-3px) rotate(45deg); opacity: .7; }
.menu .sub { position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, 6px); min-width: 210px; list-style: none; margin: 0; padding: 8px; background: #fff; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; z-index: 60; }
.menu .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.menu .has-sub:hover .sub, .menu .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.menu .sub a { border-radius: 10px; padding: 11px 14px; display: flex; align-items: center; gap: 10px; }
.menu .sub a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--olive); flex: none; }
.menu .sub a:hover { background: var(--olive-l); }
.actions { display: flex; gap: 8px; align-items: center; }
.cart-btn { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--stone-m); background: #fff; border-radius: 999px; padding: 9px 14px; font: 600 .72rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--brown); text-decoration: none; }
.cart-btn svg { width: 18px; height: 18px; }
.count { min-width: 20px; height: 20px; border-radius: 50%; background: var(--olive); color: #fff; font-size: .68rem; display: none; place-items: center; padding: 0 4px; }
.count.show { display: grid; }
.burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--stone-m); background: #fff; place-items: center; color: var(--brown); }
.burger svg { width: 20px; height: 20px; }
.burger .zu, body.menu-open .burger .auf { display: none; }
body.menu-open .burger .zu { display: block; }
.mnav { display: none; }

/* Start: Kreis-Bühne */
.hero { position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 80px) clamp(56px, 8vw, 100px); background: linear-gradient(180deg, #fff 0%, var(--stone-l) 100%); }
.hero .container { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; position: relative; }
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.hero h1 b { font-weight: 700; color: var(--olive-d); }
.status { display: inline-flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px 10px 12px; font-size: .88rem; justify-self: start; box-shadow: var(--shadow); }
.status b { color: var(--brown); }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--stone); flex: none; }
.dot.open { background: #8fb24a; box-shadow: 0 0 0 4px rgba(143, 178, 74, .2); }
.dot.closed { background: var(--wine); box-shadow: 0 0 0 4px rgba(146, 60, 79, .15); }
.stage { position: relative; aspect-ratio: 1; max-width: 540px; width: 100%; justify-self: center; }
.stage .big { position: absolute; inset: 6%; border-radius: 50%; overflow: hidden; background: var(--stone-m); box-shadow: var(--shadow); }
.stage .big img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
.stage .ring1 { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--olive); opacity: .55; }
.stage .ring2 { position: absolute; inset: -5%; border-radius: 50%; border: 1px dashed var(--stone); opacity: .8; }
.stage .bottle-c { position: absolute; right: -2%; bottom: 2%; width: 34%; height: 34%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px #fff, 0 0 0 7.5px var(--olive), var(--shadow); overflow: hidden; }
.stage .bottle-c img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); }
.stage .since, .stage .medal { position: absolute; border-radius: 50%; color: #fff; box-shadow: var(--shadow); overflow: hidden; }
/* the stage is square, so equal width and height percentages give a circle (no aspect-ratio/container queries: Safari draws them as ovals) */
.stage .since { left: 0; top: 6%; width: 27%; height: 27%; background: var(--olive); }
.stage .medal { left: 8%; bottom: 6%; width: 22%; height: 22%; background: var(--wine); }
.stage .in { position: absolute; inset: 12%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .3em; }
.stage .since small { font: 600 clamp(.46rem, 1.05vw, .66rem)/1.25 var(--sans); letter-spacing: .1em; text-transform: uppercase; opacity: .92; }
.stage .since b { font: 300 clamp(1.15rem, 3.2vw, 2.1rem)/1 var(--sans); letter-spacing: -.02em; }
.stage .medal .in { font: 700 clamp(.42rem, .95vw, .6rem)/1.3 var(--sans); letter-spacing: .04em; text-transform: uppercase; }

/* Sortiment-Kreise */
.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; }
.cat { text-decoration: none; text-align: center; display: grid; gap: 12px; justify-items: center; align-content: start; }
.cat .c { width: 100%; max-width: 200px; aspect-ratio: 1; border-radius: 50%; background: #fff; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--stone-m); transition: box-shadow .3s, transform .3s; }
.cat .c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform .4s; }
.cat:hover .c { box-shadow: inset 0 0 0 3px var(--olive); transform: translateY(-3px); }
.cat:hover .c img { transform: scale(1.14); }
.cat h3 { font-size: .9rem; }
.cat span { font-size: .82rem; color: var(--taupe); margin-top: -6px; }

/* Karten */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.card { background: #fff; border-radius: var(--r); padding: clamp(22px, 3vw, 36px); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 16px; align-content: start; min-width: 0; }
.news .prose ul { font-size: .92rem; }

/* Highlight */
.highlight { background: var(--wine-d); color: #f3e6e9; position: relative; overflow: hidden; }
.highlight .container { display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; position: relative; }
.highlight h2 { color: #fff; }
.highlight .label { color: #e9cfd6; }
.highlight .copy { display: grid; gap: 18px; min-width: 0; }
.rings { position: absolute; pointer-events: none; }
.highlight .rings.deco { right: -100px; top: -60px; width: 480px; height: 480px; opacity: .16; }
.hl-circle { width: clamp(220px, 28vw, 340px); aspect-ratio: 1; border-radius: 50%; background: #fff; overflow: hidden; box-shadow: 0 0 0 10px rgba(255, 255, 255, .08), 0 0 0 22px rgba(255, 255, 255, .04); }
.hl-circle img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.facts { display: flex; gap: 28px; flex-wrap: wrap; font-size: .88rem; }
.facts b { display: block; color: #fff; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; margin-bottom: 2px; opacity: .8; }

/* Events */
.events { display: grid; gap: 12px; }
.events.past { opacity: .75; }
.ev { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; background: #fff; border-radius: var(--r); padding: 16px 22px 16px 18px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s; }
.ev:hover { box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.date { width: 76px; height: 76px; border-radius: 50%; background: var(--olive-l); color: var(--olive-dd); display: grid; place-content: center; text-align: center; position: relative; flex: none; font-variant-numeric: tabular-nums; }
.date::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--olive); opacity: .5; }
.date b { font: 300 1.5rem/1 var(--sans); }
.date small { font: 700 .62rem/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.ev h3 { margin-bottom: 4px; }
.ev .desc { font-size: .9rem; margin-bottom: 6px; }
.ev .meta { display: flex; gap: 4px 14px; flex-wrap: wrap; font-size: .85rem; color: var(--taupe); }
.ev .meta span { display: inline-flex; align-items: center; gap: 6px; }
.ev .meta svg { width: 14px; height: 14px; }
.soon { font: 700 .62rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; background: var(--olive); color: #fff; border-radius: 999px; padding: 5px 9px; display: inline-block; margin-bottom: 6px; }
.card .ev { box-shadow: none; padding: 10px 0; border-radius: 0; border-bottom: 1px dotted var(--stone); }
.card .ev:last-child { border-bottom: 0; }
.card .date { width: 62px; height: 62px; }
.card .date b { font-size: 1.2rem; }

/* Team */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.person { text-align: center; display: grid; gap: 6px; justify-items: center; align-content: start; }
.person .ph { width: min(180px, 100%); aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin-bottom: 14px; background: var(--stone-m); box-shadow: 0 0 0 6px #fff, 0 0 0 7.5px var(--olive); }
.person .ph img { width: 100%; height: 100%; object-fit: cover; }
.person h3 { font-size: .95rem; }
.person span { font-size: .86rem; color: var(--taupe); }
.person .mail { font-size: .8rem; color: var(--olive-d); word-break: break-all; text-decoration: none; }

/* Besuch */
.visit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.vi { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.vi .ic, .clist .ic { width: 52px; height: 52px; border-radius: 50%; background: var(--olive); color: #fff; display: grid; place-items: center; flex: none; }
.vi .ic svg { width: 22px; height: 22px; }
.vi h3 { font-size: .85rem; margin-bottom: 4px; }
.vi p { font-size: .92rem; }
.vi a { text-decoration: none; }

/* Seitenkopf */
.phero { position: relative; color: #fff; overflow: hidden; background: #3d4a2c; }
.phero .bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.phero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(33, 37, 41, .75), rgba(33, 37, 41, .25)); }
.phero .container { position: relative; z-index: 2; padding-block: clamp(48px, 7vw, 88px); display: grid; gap: 14px; }
.phero h1 { color: #fff; }
.phero .crumb { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.phero .crumb a { text-decoration: none; }
.phero .lead { opacity: .92; }
.phero .rings { right: -40px; top: 50%; transform: translateY(-50%); width: 400px; height: 400px; z-index: 1; opacity: .45; }

/* Shop */
.toolbar { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--stone-m); background: #fff; border-radius: 999px; padding: 9px 16px; font: 600 .72rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--brown); text-decoration: none; }
.chip i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.chip[aria-pressed="true"] { background: var(--olive); border-color: var(--olive); color: #fff; }
.select { border: 1.5px solid var(--stone-m); border-radius: 999px; padding: 9px 14px; background: #fff; font: 600 .76rem var(--sans); color: var(--brown); }
.kat-intro { max-width: 70ch; margin-bottom: 24px; padding: 16px 20px; border-left: 3px solid var(--olive); background: var(--stone-l); border-radius: 0 12px 12px 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.cell { display: grid; min-width: 0; }
.loc-h { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.loc-h h2 { white-space: nowrap; color: var(--olive-d); font: 600 .85rem/1 var(--sans); letter-spacing: .16em; }
.loc-h hr { flex: 1; }
.wine { background: #fff; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); padding: 20px; display: flex; flex-direction: column; gap: 14px; transition: box-shadow .25s, transform .25s; min-width: 0; }
.wine:hover { box-shadow: inset 0 0 0 1px var(--line), var(--shadow); transform: translateY(-3px); }
.w-stage { position: relative; width: 100%; display: grid; place-items: center; text-decoration: none; }
.w-stage .c { width: 78%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 1.5px var(--stone-m); position: relative; transition: box-shadow .3s; }
.wine:hover .w-stage .c { box-shadow: 0 0 0 3px var(--olive); }
/* second image (label, detail view): replaces the bottle on hover in the list */
.w-stage .c .label { opacity: 0; transition: opacity .35s ease; background: #fff; }
.w-stage .c.has-label img:not(.label) { transition: opacity .35s ease; }
@media (hover: hover) { .wine:hover .c.has-label .label { opacity: 1; } .wine:hover .c.has-label img:not(.label) { opacity: 0; } }
.m-img { display: grid; justify-items: center; gap: 18px; }
.thumbs { display: flex; gap: 12px; }
.thumbs button { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; padding: 0; border: 0; background: #fff; box-shadow: 0 0 0 1.5px var(--stone-m); transition: box-shadow .2s; }
.thumbs button[aria-pressed="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--olive); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.w-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.w-stage .tag { -webkit-hyphens: manual; hyphens: manual; position: absolute; top: 2px; right: 4px; width: 66px; height: 66px; border-radius: 50%; display: grid; place-content: center; text-align: center; font: 700 .54rem/1.25 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--wine); box-shadow: var(--shadow); padding: 6px; }
.w-stage .tag.olive { background: var(--olive); }
.w-stage .tag.out { background: var(--stone); color: var(--dark); }
.wine .meta { font-size: .76rem; color: var(--taupe); letter-spacing: .02em; display: grid; line-height: 1.5; }
.wine .meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wine h3 { font-size: 1rem; }
.wine h3 a { text-decoration: none; }
.wine h3 a:hover { color: var(--olive-d); }
.wine p.d { font-size: .88rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wine-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px dotted var(--stone); }
.price { font: 600 1.12rem/1 var(--sans); color: var(--brown); font-variant-numeric: tabular-nums; }
.price small { font-size: .7rem; color: var(--taupe); font-weight: 600; margin-left: 4px; }
.price.muted { font-size: .85rem; color: var(--taupe); }
.sizes { display: inline-flex; flex-wrap: wrap; border: 1.5px solid var(--stone-m); border-radius: 999px; padding: 2px; margin-top: 8px; }
.sizes button { border: 0; background: none; padding: 4px 9px; border-radius: 999px; font: 700 .66rem/1.2 var(--sans); color: var(--taupe); }
.sizes button[aria-pressed="true"] { background: var(--brown); color: #fff; }
.add { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--olive); color: #fff; display: grid; place-items: center; flex: none; transition: background .2s, transform .2s; }
.add:hover { background: var(--olive-d); transform: scale(1.06); }
.add:disabled { background: var(--stone-m); cursor: not-allowed; transform: none; }
.add svg { width: 20px; height: 20px; }
.empty { grid-column: 1 / -1; text-align: center; padding: 48px; color: var(--taupe); }
.geschenk { margin-top: 48px; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; background: var(--olive-l); border-radius: 22px; padding: clamp(22px, 3vw, 34px); }
.geschenk .ic { width: 64px; height: 64px; border-radius: 50%; background: var(--olive); color: #fff; display: grid; place-items: center; }
.geschenk .ic svg { width: 28px; height: 28px; }
.geschenk h2 { font-size: 1.4rem; margin-bottom: 6px; }

/* Produkt-Detail */
.detail .crumb { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 24px; }
.detail .crumb a { text-decoration: none; }
.detail-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.m-img { background: var(--stone-l); display: grid; place-items: center; padding: 32px; border-radius: 22px; }
.m-img .c { width: 100%; max-width: 380px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 8px #fff, 0 0 0 9.5px var(--olive); }
.m-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }
.m-body { display: grid; gap: 16px; align-content: start; min-width: 0; }
.m-body h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.award { display: inline-block; justify-self: start; background: var(--wine-l); color: var(--wine-d); font-weight: 600; font-size: .85rem; padding: 6px 12px; border-radius: 999px; }
.spec { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: .92rem; margin: 0; }
.spec dt { font-weight: 700; color: var(--brown); text-transform: uppercase; font-size: .68rem; letter-spacing: .1em; padding-top: 4px; }
.spec dd { margin: 0; }
.m-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px dotted var(--stone); flex-wrap: wrap; }
.m-row b { color: var(--brown); min-width: 90px; }
.m-row .btn { padding: 10px 16px; }
.qty-in input { width: 70px; border: 1.5px solid var(--stone-m); border-radius: 999px; padding: 8px 12px; text-align: center; }

/* Warenkorb */
.scrim { position: fixed; inset: 0; background: rgba(33, 37, 41, .45); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 80; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: #fff; z-index: 85; transform: translateX(100%); visibility: hidden; transition: transform .35s cubic-bezier(.2, .8, .2, 1), visibility .35s; display: flex; flex-direction: column; box-shadow: -20px 0 60px rgba(0, 0, 0, .2); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body.cart-open .scrim { opacity: 1; pointer-events: auto; }
body.cart-open .drawer { transform: none; visibility: visible; }
.d-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px dotted var(--stone); }
.d-head h3 { font-size: 1rem; letter-spacing: .1em; }
.d-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.drawer .items { flex: 1; overflow: auto; padding: 8px 24px; }
.x { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--stone-m); background: #fff; display: grid; place-items: center; color: var(--brown); }
.x svg { width: 18px; height: 18px; }
.ci { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px dotted var(--stone); }
.ci .c { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--stone-m); }
.ci .c img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); }
.ci b { display: block; color: var(--brown); font-size: .9rem; }
.ci small { color: var(--taupe); font-size: .8rem; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--stone-m); border-radius: 999px; margin-top: 6px; }
.qty button { width: 30px; height: 30px; border: 0; background: none; font-weight: 700; color: var(--brown); }
.qty span { min-width: 22px; text-align: center; font-size: .85rem; font-weight: 600; }
.ci .sum { font-weight: 600; color: var(--brown); font-variant-numeric: tabular-nums; }
.cart-empty { text-align: center; padding: 56px 8px; display: grid; gap: 18px; justify-items: center; color: var(--taupe); }
.d-foot { padding: 18px 24px; border-top: 1px dotted var(--stone); display: grid; gap: 10px; }
.d-foot .btn { width: 100%; }
.total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; color: var(--brown); }
.total b { font: 300 1.6rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.hint { font-size: .78rem; color: var(--taupe); }
.cart-page { display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; align-items: start; }
.cart-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.leeren button { border: 0; background: none; padding: 4px 0; font: 600 .72rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--taupe); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.leeren button:hover { color: var(--wine); }
.d-foot .leeren { justify-self: end; }
.totals { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 8px 0 0; font-variant-numeric: tabular-nums; }
.totals dd { margin: 0; text-align: right; }
.totals .t { font-weight: 700; color: var(--brown); font-size: 1.1rem; border-top: 1px dotted var(--stone); padding-top: 10px; }
.konditionen { font-size: .88rem; }
.konditionen summary { cursor: pointer; font-weight: 600; color: var(--olive-d); list-style: none; display: flex; align-items: center; gap: 8px; }
.konditionen summary::-webkit-details-marker { display: none; }
.konditionen summary::before { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .2s; }
.konditionen[open] summary::before { transform: rotate(45deg); }
.konditionen table { width: 100%; border-collapse: collapse; margin: 10px 0; font-variant-numeric: tabular-nums; }
.konditionen td { padding: 6px 0; border-bottom: 1px dotted var(--stone); }
.konditionen td:last-child { text-align: right; }

/* Formulare */
.form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.form label, .form legend { display: grid; gap: 6px; font: 700 .66rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--brown); min-width: 0; }
.form input, .form select, .form textarea { font: 400 .95rem var(--sans); color: var(--dark); border: 1.5px solid var(--stone-m); border-radius: 12px; padding: 12px 14px; background: #fff; width: 100%; min-width: 0; text-transform: none; letter-spacing: 0; }
.form textarea { min-height: 110px; resize: vertical; }
/* Same height for inputs, date fields and dropdowns in every browser (Safari draws native selects and date inputs differently) */
.form input:not([type="checkbox"]):not([type="radio"]), .form select { height: 48px; line-height: 1.3; }
.form select, .select { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23816e53' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.form input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23816e53' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; }
.form input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; }
.form input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.select { height: 40px; line-height: 1.2; }
.form .full { grid-column: 1 / -1; }
.form .btn { justify-self: start; }
.radios { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.radios legend { margin-bottom: 8px; }
.radios label, .form .check { display: flex; align-items: center; gap: 10px; font: 400 .95rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--text); border: 1.5px solid var(--stone-m); border-radius: 12px; padding: 10px 14px; flex-wrap: wrap; }
.radios label:has(input:checked) { border-color: var(--olive); background: var(--olive-l); }
.radios input, .form .check input { width: auto; accent-color: var(--olive); }
.radios small { color: var(--taupe); }
.form .check { border: 0; padding: 0; display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.form .check input { width: 22px; height: 22px; margin: 2px 0 0; }
.form-wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.form-wrap > div { display: grid; gap: 16px; min-width: 0; }

/* Degustation */
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.offer { display: grid; gap: 14px; align-content: start; text-align: center; justify-items: center; padding: 0 8px; }
.offer .oc { width: min(240px, 100%); aspect-ratio: 1; border-radius: 50%; background: var(--stone-m) center / cover; position: relative; margin-bottom: 10px; box-shadow: 0 0 0 8px #fff, 0 0 0 9.5px var(--stone); }
.offer .oc .i { position: absolute; right: 2%; bottom: 2%; width: 60px; height: 60px; border-radius: 50%; background: var(--olive); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 5px #fff; }
.offer .oc .i svg { width: 26px; height: 26px; }
.offer p { font-size: .92rem; max-width: 34ch; }
.pill { display: inline-block; font: 700 .66rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; background: var(--olive-l); color: var(--olive-dd); padding: 6px 10px; border-radius: 999px; margin-bottom: -4px; }

/* Patenschaft */
.pate { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.pate > div { display: grid; gap: 18px; min-width: 0; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.checks li { display: flex; gap: 14px; align-items: flex-start; }
.checks .n { width: 34px; height: 34px; border-radius: 50%; background: var(--olive-l); color: var(--olive-dd); display: grid; place-items: center; flex: none; box-shadow: 0 0 0 1.5px var(--olive); }
.checks .n svg { width: 16px; height: 16px; }
.terms { font-size: .82rem; color: var(--taupe); }
.terms b { color: var(--brown); text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; }
.seg { display: inline-flex; border: 1.5px solid var(--stone-m); border-radius: 999px; padding: 3px; justify-self: start; }
.seg label { padding: 8px 16px; border-radius: 999px; font: 600 .78rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--brown); cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--olive); color: #fff; }
.seg label:has(input:focus-visible) { outline: 2px solid var(--olive); outline-offset: 2px; }
.geschenk-adresse { border: 0; padding: 0; margin: 0; }
.pate-galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-top: 56px; }
.pate-galerie figure { margin: 0; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--stone-m); box-shadow: 0 0 0 8px #fff, 0 0 0 9.5px var(--stone); max-width: 280px; justify-self: center; width: 100%; }
.pate-galerie img { width: 100%; height: 100%; object-fit: cover; }
.pcard { background: #fff; border-radius: 22px; padding: clamp(22px, 3vw, 34px); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); display: grid; gap: 16px; }
.variety { display: grid; gap: 10px; }
.variety label { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1.5px solid var(--stone-m); border-radius: 999px; padding: 8px 18px 8px 8px; cursor: pointer; transition: border-color .2s, background .2s; position: relative; }
.variety .l { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--brown); }
.variety .l img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px var(--stone-m); }
.variety input { position: absolute; opacity: 0; pointer-events: none; }
.variety label:has(input:checked) { border-color: var(--olive); background: var(--olive-l); }
.variety label:has(input:focus-visible) { outline: 2px solid var(--olive); outline-offset: 2px; }
.variety b { font-variant-numeric: tabular-nums; color: var(--brown); }
.plate { border-radius: 14px; background: linear-gradient(135deg, #8a7d1a, #c3b320 45%, #978b19); padding: 3px; }
.plate div { background: #2b2e22; border-radius: 12px; padding: 16px; text-align: center; color: #ece4b0; display: grid; gap: 4px; }
.plate small { font: 600 .6rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
.plate input { background: transparent; border: 0; border-bottom: 1px dashed rgba(236, 228, 176, .4); color: #fff; font: 400 1.7rem/1.2 var(--hand); text-align: center; width: 100%; padding: 4px 0; outline: none; }
.plate input::placeholder { color: rgba(236, 228, 176, .45); }
.ptotal { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ptotal b { font: 300 2rem/1 var(--sans); color: var(--brown); font-variant-numeric: tabular-nums; }
.ptotal small { display: block; font-size: .78rem; color: var(--taupe); }

/* Weingut */
.intro2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.intro2 > div { display: grid; gap: 18px; min-width: 0; }
.intro2 .oc { aspect-ratio: 1; border-radius: 50%; background: var(--stone-m) center / cover; max-width: 460px; width: 100%; justify-self: center; box-shadow: 0 0 0 10px #fff, 0 0 0 11.5px var(--olive); }
.tl { position: relative; display: grid; max-width: 860px; margin: 0 auto; }
.tl::before { content: ""; position: absolute; left: 47px; top: 10px; bottom: 10px; border-left: 1.5px dotted var(--stone); }
.tli { display: grid; grid-template-columns: 96px 1fr; gap: 22px; padding: 12px 0; position: relative; }
.tli .yr { width: 96px; height: 96px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--stone-m); display: grid; place-content: center; font: 300 1.4rem/1 var(--sans); color: var(--brown); position: relative; z-index: 1; font-variant-numeric: tabular-nums; }
.tli.key .yr { background: var(--olive); color: #fff; box-shadow: 0 0 0 6px var(--olive-l); }
.tli.gold .yr { background: var(--wine); color: #fff; box-shadow: 0 0 0 6px var(--wine-l); }
.tli > div:last-child { align-self: center; display: grid; gap: 4px; min-width: 0; }
.tli p { font-size: .93rem; }
.year-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.year-tabs button { width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid var(--stone-m); background: #fff; color: var(--brown); font: 300 1.05rem/1 var(--sans); font-variant-numeric: tabular-nums; transition: background .2s, border-color .2s, color .2s; }
.year-tabs button:hover { border-color: var(--olive); }
.year-tabs button[aria-selected="true"] { background: var(--olive); border-color: var(--olive); color: #fff; box-shadow: 0 0 0 5px var(--olive-l); }
.section.alt .year-tabs button:not([aria-selected="true"]) { background: #fff; }
.h-panel { font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 300; margin: 12px 0 18px; }
.weinjahr { align-items: start; }
.award-summary { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; color: var(--brown); }
.award-summary b { text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; margin-right: 6px; }
.medal-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--stone-l); font-size: .85rem; font-weight: 600; }
.medal-pill i { width: 14px; height: 14px; border-radius: 50%; background: var(--m); }
.award-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.award-card { background: #fff; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); padding: 22px; display: grid; gap: 14px; align-content: start; }
.award-card h3 { font-size: .95rem; padding-bottom: 12px; border-bottom: 1px dotted var(--stone); }
.award-row { display: flex; gap: 14px; font-size: .9rem; }
.award-row b { color: var(--brown); }
.award-row ul { margin: 4px 0 0; padding: 0; list-style: none; color: var(--text); display: grid; gap: 3px; }
.medal { width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--m); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55), 0 0 0 1.5px var(--m); }
.gold { --m: #d4b13b; }
.gross { --m: #b8911f; }
.medal.gross { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55), 0 0 0 1.5px var(--m), 0 0 0 5px var(--olive-l); }
.silber { --m: #b9b9b9; }
.bronze { --m: #b87a4b; }

/* Offene Stellen */
.jobs { display: grid; gap: 12px; margin: 8px 0 20px; }
.job { background: #fff; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); padding: 18px 22px; display: grid; gap: 14px; }
.job[open] { gap: 16px; }
.job summary { display: flex; gap: 14px; align-items: center; cursor: pointer; list-style: none; }
.job summary::-webkit-details-marker { display: none; }
.job summary .ic { width: 46px; height: 46px; border-radius: 50%; background: var(--olive-l); color: var(--olive-dd); display: grid; place-items: center; flex: none; box-shadow: 0 0 0 1.5px var(--olive); }
.job summary .ic svg { width: 20px; height: 20px; }
.job summary b { display: block; color: var(--brown); text-transform: uppercase; letter-spacing: .04em; }
.job summary small { color: var(--taupe); }
.job .btn { justify-self: start; }

/* Kontakt */
.clist { display: grid; gap: 14px; }
.clist > div { display: flex; gap: 14px; align-items: center; min-width: 0; }
.clist .ic { width: 46px; height: 46px; background: var(--olive-l); color: var(--olive-dd); box-shadow: 0 0 0 1.5px var(--olive); }
.clist .ic svg { width: 20px; height: 20px; }
.clist small { display: block; font: 700 .62rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); }
.clist b { color: var(--brown); font-weight: 600; word-break: break-word; }
.clist a { text-decoration: none; }
.hours { list-style: none; margin: 0; padding: 0; }
.hours li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px dotted var(--stone); font-size: .94rem; font-variant-numeric: tabular-nums; }
.hours li:last-child { border-bottom: 0; }
.hours li.today { color: var(--olive-dd); font-weight: 700; }
.hours li.today span:first-child::after { content: "heute"; margin-left: 10px; font: 700 .58rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; background: var(--olive); color: #fff; padding: 4px 8px; border-radius: 999px; vertical-align: 2px; }

.thanks { text-align: center; display: grid; gap: 18px; justify-items: center; }
.ring-check { width: 84px; height: 84px; border-radius: 50%; background: var(--olive); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 8px var(--olive-l); }
.ring-check svg { width: 38px; height: 38px; }
.legal-page h1 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin: 14px 0 28px; }

/* Footer */
.site-foot { background: var(--dark); color: #a59a94; font-size: .88rem; }
.f-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 36px; padding-block: 64px 48px; }
.f-grid h4 { color: #fff; font: 600 .76rem/1 var(--sans); letter-spacing: .06em; margin-bottom: 18px; }
.f-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.f-grid a { text-decoration: none; }
.f-grid a:hover { color: #fff; }
.f-grid p { max-width: 30ch; }
.f-hours { margin-top: 14px; }
.f-hours b { color: #fff; font-weight: 600; }
.social { display: flex; gap: 10px; margin-top: 16px; }
.social a { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--dark); display: grid; place-items: center; }
.social svg { width: 18px; height: 18px; }
.f-bot { border-top: 1px solid rgba(255, 255, 255, .08); padding-block: 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: .8rem; }
.f-bot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.f-bot a { text-decoration: none; }
.f-logo { display: flex; align-items: center; gap: 20px; }
.f-logo img { width: 40px; height: 77px; flex: none; }
.nl { display: flex; gap: 6px; background: #fff; border-radius: 999px; padding: 5px; margin-top: 14px; max-width: 340px; }
.nl input[type="email"] { border: 0; outline: none; flex: 1; min-width: 0; padding: 0 12px; color: var(--dark); background: transparent; }
.nl .btn { padding: 10px 16px; }
.f-nl-hint { margin-top: 8px; opacity: .8; }

.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 160%); visibility: hidden; background: var(--dark); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: .88rem; z-index: 100; transition: transform .35s cubic-bezier(.2, .8, .2, 1), visibility .35s; max-width: calc(100% - 32px); text-align: center; }
.toast.show { transform: translate(-50%, 0); visibility: visible; }

/* Pimcore Editmode */
.edit-box { display: grid; gap: 8px; padding: 12px; margin: 8px 0; border: 1px dashed var(--olive); border-radius: 10px; background: #fffef5; color: var(--dark); font-size: .85rem; }
.edit-box.dark { background: rgba(255, 255, 255, .92); }
html.editmode .stage .big, html.editmode .bottle-c { overflow: visible; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

@media (max-width: 1100px) {
    .menu { display: none; }
    .burger { display: grid; }
    .mnav { display: grid; position: fixed; inset: 0; z-index: 70; background: #fff; padding: calc(150px + env(safe-area-inset-top, 0px)) 24px 32px; gap: 4px; align-content: start; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .25s, visibility .25s; overflow: auto; }
    body.menu-open .mnav { opacity: 1; pointer-events: auto; visibility: visible; }
    body.menu-open .header { z-index: 75; }
    .mnav a { display: flex; align-items: center; gap: 14px; text-decoration: none; font: 300 1.5rem/1.2 var(--sans); text-transform: uppercase; color: var(--brown); padding: 12px 0; border-bottom: 1px dotted var(--stone); }
    .mnav a::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--olive); flex: none; }
    .mnav a.active::before { background: var(--olive); }
    .mnav a.sub { font-size: 1.05rem; padding: 8px 0 8px 26px; border-bottom-style: none; }
    .mnav a.sub::before { width: 8px; height: 8px; }
    .mnav p { margin-top: 20px; color: var(--taupe); }
}
@media (max-width: 900px) {
    .hero .container, .split, .highlight .container, .form-wrap, .pate, .intro2, .detail-grid, .cart-page { grid-template-columns: 1fr; }
    .stage { max-width: 420px; }
    .team { grid-template-columns: repeat(2, 1fr); }
    .visit { grid-template-columns: 1fr; }
    .f-grid { grid-template-columns: 1fr 1fr; }
    .hl-circle { justify-self: center; }
    .geschenk { grid-template-columns: 1fr; justify-items: start; }
}
@media (max-width: 600px) {
    .container { padding-inline: 16px; }
    .nav { height: 80px; }
    .brand { height: 62px; }
    .header.scrolled .brand { height: 48px; }
    .cart-btn .t { display: none; }
    .ev { grid-template-columns: auto 1fr; padding: 14px; gap: 16px; }
    .ev > .btn { grid-column: 1 / -1; }
    .date { width: 62px; height: 62px; }
    .date b { font-size: 1.15rem; }
    .form { grid-template-columns: 1fr; }
    .f-grid { grid-template-columns: 1fr; }
    .tli { grid-template-columns: 68px 1fr; gap: 16px; }
    .tli .yr { width: 68px; height: 68px; font-size: 1rem; }
    .tl::before { left: 33px; }
    .toolbar { flex-direction: column; align-items: stretch; }
    .phero .rings { width: 240px; height: 240px; right: -90px; }
    .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .wine { padding: 14px 12px; gap: 10px; }
    .wine p.d { display: none; }
    .w-stage .tag { width: 50px; height: 50px; font-size: .44rem; padding: 4px; }
    .wine-foot { flex-wrap: wrap; }
    .price { font-size: 1rem; }
    .add { width: 40px; height: 40px; }
    .stage .medal { left: 2%; }
    .cats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) { .grid { grid-template-columns: 1fr; } .wine p.d { display: -webkit-box; } }