/* Werkstark – Nachbau der bestehenden Seite als statisches HTML, mit überarbeitetem UI/UX */
@font-face { font-family: Poppins; src: url(assets/fonts/poppins-300.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: Poppins; src: url(assets/fonts/poppins-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Poppins; src: url(assets/fonts/poppins-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Poppins; src: url(assets/fonts/poppins-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Poppins; src: url(assets/fonts/poppins-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --red: #8e0e0e; --wine: #5a0c1c; --grey: #f3f2f0; --line: #dedcd8; --foot: #c9c9c9;
  --text: #434343; --head: #262626; --steel: #8a9099; --ok: #2f9e55; --p: 0;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; }
body { margin: 0; font-family: Poppins, system-ui, sans-serif; font-size: 1.0625rem; line-height: 1.7; color: var(--text); background: #fff; overflow-x: hidden; }
h1, h2, h3 { margin: 0 0 .5em; font-weight: 600; line-height: 1.15; color: var(--red); }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
a { color: var(--red); }
img { max-width: 100%; }
.wrap { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Titel, die stäuben */
.w { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; }
.ch.puff { animation: puff .8s ease both; }
@keyframes puff { 0% { opacity: 1; } 22% { opacity: .22; filter: blur(1.2px); transform: translateY(-2px) scale(.96); } 100% { opacity: 1; filter: none; transform: none; } }

/* Infoleiste */
.top { background: var(--wine); color: #fff; font-size: .9rem; }
.top .wrap { display: flex; justify-content: space-between; gap: 1rem; padding-block: .45rem; flex-wrap: wrap; }
.top a { color: #fff; text-decoration: none; margin-left: 1.25rem; }
.top a:hover { text-decoration: underline; }
.status { display: inline-flex; align-items: center; gap: .55em; }
.status::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #c9a0a0; }
.status.is-open::before { background: #5fe08a; box-shadow: 0 0 0 0 rgba(95, 224, 138, .7); animation: pulse 2s infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 .6em rgba(95, 224, 138, 0); } }

/* Kopf */
header { position: sticky; top: 0; z-index: 40; background: #fff; }
header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .55rem; }
.logo img { display: block; height: 60px; width: auto; }
nav > ul { display: flex; gap: 1.7rem; list-style: none; margin: 0; padding: 0; align-items: center; }
nav a { text-decoration: none; color: var(--head); font-weight: 500; padding: .4rem 0; display: inline-block; background: linear-gradient(var(--red), var(--red)) 0 100% / 0 2px no-repeat; transition: background-size .3s, color .2s; }
nav a:hover, nav a[aria-current] { color: var(--red); background-size: 100% 2px; }
.has-sub { position: relative; }
.has-sub > a::after { content: "▾"; margin-left: .3em; font-size: .8em; }
.sub { position: absolute; top: 100%; left: -1rem; min-width: 15.5rem; margin: 0; padding: .6rem 1rem; list-style: none; background: #fff; border-top: 3px solid var(--red); box-shadow: 0 14px 30px rgba(0, 0, 0, .14); opacity: 0; visibility: hidden; transform: translateY(8px); transition: .25s var(--ease); }
.has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: none; }
.sub a { display: block; font-size: .97rem; }
/* Aufklappmenü: liegt über der Gewindestange, grosse Klickflächen, Zusatzinfo pro Kategorie */
header .wrap { position: relative; z-index: 2; }
.has-sub { position: static; }
.sub { top: calc(100% + 6px); left: auto; right: 0; min-width: 19.5rem; padding: .5rem; }   /* direkt unter der Gewindestange */
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -2rem; height: 2rem; }   /* Brücke für den Mauszeiger */
.sub a { display: grid; padding: .55rem .9rem; background: none; border-left: 3px solid transparent; transition: background .2s, border-color .2s, padding .3s var(--ease); }
.sub a b { font-weight: 500; color: var(--head); transition: color .2s; }
.sub a small { font-size: .82rem; font-weight: 400; color: #6f6f6f; }
.sub a:hover, .sub a:focus-visible { background: var(--grey); border-left-color: var(--red); padding-left: 1.25rem; }
.sub a:hover b, .sub a:focus-visible b { color: var(--red); }
.sub li:first-child { border-bottom: 1px solid var(--line); margin-bottom: .3rem; padding-bottom: .3rem; }
.burger { display: none; width: 46px; height: 46px; padding: 0; border: 0; background: var(--wine); color: #fff; cursor: pointer; }
.burger span, .burger span::before, .burger span::after { content: ""; display: block; width: 22px; height: 2px; margin: auto; background: currentColor; transition: transform .3s var(--ease); }
.burger span::before { transform: translateY(-7px); }
.burger span::after { transform: translateY(5px); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-2px) rotate(-45deg); }

/* Gewindestange mit Mutter als Scrollanzeige */
.rod { position: relative; height: 6px; background: repeating-linear-gradient(115deg, #dcdfe2 0 3px, #b3b8be 3px 6px); }
.rod svg { position: absolute; top: -9px; left: calc(var(--p) * (100% - 24px)); width: 24px; height: 24px; transform: rotate(calc(var(--p) * 2880deg)); color: var(--red); }

/* Knöpfe */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .65em; padding: .8em 1.4em; background: var(--wine); color: #fff; font: inherit; font-weight: 500; text-decoration: none; border: 0; cursor: pointer; transition: background .25s, transform .25s var(--ease), box-shadow .25s; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; transition: transform .7s var(--ease); }
.btn:hover { background: var(--red); transform: translateY(-3px); box-shadow: 0 8px 18px rgba(90, 12, 28, .25); }
.btn:hover svg { transform: rotate(360deg); }
.btn.line { background: #fff; color: var(--wine); box-shadow: inset 0 0 0 2px var(--wine); }
.btn.line:hover { background: var(--wine); color: #fff; }
.btn.wa { background: #1f7a46; }
.btn.wa:hover { background: #17633a; box-shadow: 0 8px 18px rgba(31, 122, 70, .3); }
/* Knopfgruppen: alle Knöpfe einer Gruppe sind gleich breit, nebeneinander wie untereinander */
.btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); gap: .7rem; margin-top: 1.4rem; max-width: 38rem; }
.btns:has(> :only-child) { grid-template-columns: minmax(0, max-content); }
.btns .btn { width: 100%; }
.season .btns { grid-template-columns: 1fr; width: max-content; max-width: 100%; margin: 0; }

/* Bilder hinter Rolltoren */
.shot { position: relative; overflow: hidden; margin: 0; background: #ddd; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.shot:hover img { transform: scale(1.04); }
.shot::after { content: ""; position: absolute; inset: 0 0 -10px 0; background: repeating-linear-gradient(#c4c7cc 0 20px, #adb1b7 20px 22px); border-bottom: 10px solid var(--red); transition: transform 1.3s cubic-bezier(.7, 0, .2, 1); }
.shot.in::after { transform: translateY(-102%); }
.rise { opacity: 0; transform: translateY(30px); transition: opacity .7s, transform .9s var(--ease); transition-delay: calc(var(--i, 0) * .08s); }
.rise.in, .in > .rise { opacity: 1; transform: none; }

/* Einstieg Startseite */
.hero { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: var(--grey); }
.hero .txt { align-self: center; justify-self: end; width: min(100%, 37rem); padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4rem); }
.hero .n { display: inline-flex; align-items: center; gap: .04em; font-size: clamp(6rem, 15vw, 11rem); font-weight: 300; line-height: .9; color: var(--red); }
.hero .n svg { width: .74em; height: .74em; transform: rotate(calc(var(--p) * 1440deg)); }
.hero .n { cursor: pointer; }
.hero .n svg g { transform-origin: 50% 50%; }   /* Drehung per Skript: wird beim Überfahren schneller */
.hero h1 { color: var(--head); font-weight: 500; font-size: clamp(1.9rem, 4vw, 3rem); margin-top: .1em; }
.hero p { font-size: 1.15rem; max-width: 30rem; }
.hero .shot { min-height: clamp(300px, 44vw, 600px); }
@keyframes turn { to { transform: rotate(360deg); } }

section.pad { padding: clamp(3rem, 7vw, 5.5rem) 0; }
section.pad.grey { background: var(--grey); }
.lead { max-width: 46rem; font-size: 1.1rem; }

/* Kategorie-Kacheln */
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; list-style: none; margin: 2rem 0 0; padding: 0; }
.cat { position: relative; display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--text); background: #fff; border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s, border-color .2s; }
.cat::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease); }
.cat:hover { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(0, 0, 0, .12); border-color: transparent; }
.cat:hover::after { transform: none; }
.cat .pic { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: #fff; overflow: hidden; }
.cat .pic img { position: absolute; inset: 1.1rem; width: calc(100% - 2.2rem); height: calc(100% - 2.2rem); object-fit: contain; }
/* Kein Zoom auf dem Kachelbild: verschachtelte Bewegungen führten in manchen Browsern zu Bildfehlern */
.cat .pic svg { width: 34%; color: var(--line); }
.cat .body { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .25rem 1rem; padding: 1rem 1.2rem 1.2rem; border-top: 1px solid var(--line); margin-top: auto; }
.cat h3 { margin: 0; grid-column: 1 / -1; color: var(--head); }
.cat .meta { font-size: .95rem; }
.cat .meta b { color: var(--red); font-weight: 600; white-space: nowrap; }
.cat .go { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--grey); color: var(--wine); font-size: 1.2rem; transition: background .25s, color .25s, transform .35s var(--ease); }
.cat:hover .go { background: var(--red); color: #fff; transform: translateX(4px); }

/* Marken */
.brandhead { margin: 3rem 0 0; color: var(--head); font-size: 1.4rem; }
.brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.brand { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--text); background: #fff; border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s, border-color .2s; }
.brand .mark { display: grid; place-items: center; height: 104px; padding: .9rem 1rem; border-bottom: 1px solid var(--line); overflow: hidden; }
.brand .mark img { max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; transition: transform .5s var(--ease); }
.wordmark { font-size: clamp(.85rem, 1.1vw, 1.05rem); font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: var(--head); transition: transform .5s var(--ease), color .2s; }
.brand .what { padding: .7rem .9rem .9rem; font-size: .86rem; line-height: 1.4; overflow-wrap: break-word; }
.brand .what b { display: block; font-size: .98rem; font-weight: 600; color: var(--head); }
.brand:hover { transform: translateY(-5px); box-shadow: 0 16px 30px rgba(0, 0, 0, .12); border-color: var(--red); }
.brand:hover .mark img, .brand:hover .wordmark { transform: scale(1.1); }
.brand:hover .wordmark { color: var(--red); }

/* Rechtliches */
.legal h2 { font-size: 1.3rem; color: var(--head); margin-top: 1.8em; }
.legal ul { max-width: 50rem; padding-left: 1.3rem; }
.legal li { margin-bottom: .4rem; }

/* Saison-Hinweis */
.season { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); flex-wrap: wrap; margin-top: 2.5rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--wine); color: #fff; }
.season > svg { width: 4.5rem; height: 4.5rem; flex: none; animation: turn 9s linear infinite; }
.season div { flex: 1 1 22rem; }
.season h3 { color: #fff; font-size: 1.4rem; margin-bottom: .2em; }
.season p { margin: 0; }
.season .btn { background: #fff; color: var(--wine); }
.season .btn:hover { background: var(--grey); }

/* Bild-Text-Zeilen */
.row { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.row.grey { background: var(--grey); }
.row .txt { align-self: center; justify-self: end; width: min(100%, 37rem); padding: clamp(3rem, 7vw, 5.5rem) clamp(1.25rem, 5vw, 4rem); }
.row.flip .txt { justify-self: start; }
.row.flip .shot { order: -1; }
.row .shot { min-height: clamp(280px, 36vw, 520px); }
.faces { display: flex; align-items: center; margin-top: 1.5rem; }
@media (max-width: 520px) { .faces { flex-wrap: wrap; row-gap: .75rem; } .faces > a { margin-left: 0; } }
.face { position: relative; flex: none; width: 52px; height: 52px; margin-left: -12px; border-radius: 50%; cursor: pointer; }
.face:first-child { margin-left: 0; }
.face > img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--grey); }
.face:hover, .face:focus-within, .face.open { z-index: 6; }
/* Info-Karte: wächst aus dem Gesicht heraus (Kreis als Ankerpunkt) */
.face > img { transition: transform .35s var(--ease), box-shadow .25s; }
.face:hover > img, .face:focus-within > img, .face.open > img { transform: scale(1.14); box-shadow: 0 0 0 3px var(--red); }
/* Die Karte geht unter der Reihe auf, damit die anderen Gesichter sichtbar bleiben. padding-top überbrückt die Lücke für den Mauszeiger. */
.fcard { position: absolute; left: -40px; top: 100%; padding-top: 12px; z-index: 5; width: max-content; max-width: min(24rem, calc(100vw - 1.5rem)); filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .25)); visibility: hidden; pointer-events: none; transition: visibility 0s .45s; }
.fin { display: flex; align-items: flex-start; gap: 1rem; padding: 14px 1.5rem 14px 14px; background: #fff; border-radius: 66px 16px 16px 66px; clip-path: circle(26px at 66px -38px); transition: clip-path .5s var(--ease); }
.fin > img { flex: none; width: 104px; height: 104px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--red); transform: translateY(-104px) scale(.5); transition: transform .5s var(--ease); }
.ft { display: grid; gap: .15rem; min-width: 0; overflow-wrap: anywhere; min-height: 104px; align-content: center; font-size: .95rem; line-height: 1.45; }
.ft > * { opacity: 0; transform: translateX(-12px); transition: opacity .2s, transform .2s; }
.ft b { font-size: 1.12rem; font-weight: 600; color: var(--red); line-height: 1.25; }
.ft .frole { color: var(--head); margin-bottom: .2rem; }
.ft a { font-weight: 400; margin: 0; width: fit-content; }
.face:hover .fcard, .face:focus-within .fcard, .face.open .fcard { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.face:hover .fin, .face:focus-within .fin, .face.open .fin { clip-path: circle(170% at 66px -38px); }
.face:hover .fin > img, .face:focus-within .fin > img, .face.open .fin > img { transform: none; }
.face:hover .ft > *, .face:focus-within .ft > *, .face.open .ft > * { opacity: 1; transform: none; transition: opacity .35s, transform .5s var(--ease); }
.face:hover .ft > :nth-child(1), .face.open .ft > :nth-child(1) { transition-delay: .14s; }
.face:hover .ft > :nth-child(2), .face.open .ft > :nth-child(2) { transition-delay: .2s; }
.face:hover .ft > :nth-child(3), .face.open .ft > :nth-child(3) { transition-delay: .26s; }
.face:hover .ft > :nth-child(4), .face.open .ft > :nth-child(4) { transition-delay: .32s; }
/* Sobald ein anderes Gesicht angewählt ist, verschwindet die vorherige Karte sofort (kein Nachleuchten) */
.faces:has(.face:hover) .face:not(:hover) .fcard { visibility: hidden; pointer-events: none; transition: none; }
.faces:has(.face:hover) .face:not(:hover) .fin, .faces:has(.face:hover) .face:not(:hover) .fin > img, .faces:has(.face:hover) .face:not(:hover) .ft > * { transition: none; }
.faces:has(.face:hover) .face:not(:hover) > img { transform: none; box-shadow: none; }
/* Am rechten Rand klappt die Karte nach links auf */
.face.r .fcard { left: auto; right: -40px; }
.face.r .fin { flex-direction: row-reverse; padding: 14px 14px 14px 1.5rem; border-radius: 16px 66px 66px 16px; clip-path: circle(26px at calc(100% - 66px) -38px); }
.face.r:hover .fin, .face.r:focus-within .fin, .face.r.open .fin { clip-path: circle(170% at calc(100% - 66px) -38px); }
.face.r .ft > * { transform: translateX(12px); }
.face.r:hover .ft > *, .face.r:focus-within .ft > *, .face.r.open .ft > * { transform: none; }
.faces > a { margin-left: 1rem; font-weight: 500; }

/* Showroom */
.hours { width: 100%; border-collapse: collapse; margin: 1rem 0 1.25rem; }
.hours th, .hours td { text-align: left; padding: .55rem .25rem; border-bottom: 1px solid var(--line); font-weight: 400; vertical-align: top; }
.hours th { width: 9.5rem; font-weight: 500; color: var(--head); }
.hours tr.today th, .hours tr.today td { color: var(--red); font-weight: 600; }
.hours tr.today th::after { content: " · heute"; font-weight: 400; }
.tip { padding: .9rem 1.1rem; background: #fff; border-left: 5px solid var(--red); font-size: .98rem; }
.row.grey .tip { background: #fff; }

/* Rotes Band */
.band { background: var(--red); color: #fff; text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 1rem; }
.band h2 { color: #fff; }
.band p { max-width: 52rem; margin: 0 auto; }

/* Kontakt */
.contact { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
form .full { grid-column: 1 / -1; }
label { display: grid; gap: .3rem; font-size: .92rem; font-weight: 500; color: var(--head); }
input, textarea { width: 100%; padding: .85em 1em; font: inherit; font-weight: 400; color: var(--head); background: var(--grey); border: 0; border-bottom: 3px solid var(--line); transition: border-color .2s, background .2s; }
input:focus, textarea:focus { outline: 0; background: #fff; border-color: var(--red); box-shadow: 0 0 0 1px var(--line); }
textarea { min-height: 9rem; resize: vertical; }
form .btn { justify-self: start; }
.formnote { grid-column: 1 / -1; margin: 0; font-size: .92rem; }
.albin { margin: 0; }
.albin .shot { aspect-ratio: 3 / 2; }
.albin figcaption { margin-top: 1rem; }
.albin figcaption b { display: block; font-weight: 600; color: var(--head); font-size: 1.2rem; }
.direct { display: grid; gap: .6rem; margin-top: 1.1rem; }
.direct .btn { justify-content: flex-start; }

/* Seitenkopf und Kategorien-Leiste */
.crumbs { padding-top: 1.5rem; font-size: .95rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.intro { padding: 1.25rem 0 clamp(1.5rem, 4vw, 2.5rem); }
.intro p { max-width: 50rem; font-size: 1.08rem; }
.catnav { display: flex; gap: .5rem; margin: 0 0 1.5rem; padding: 0 0 .5rem; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.catnav a { display: block; white-space: nowrap; padding: .45em 1.1em; border: 1.5px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--head); font-size: .95rem; font-weight: 500; transition: .2s; }
.catnav a:hover { border-color: var(--red); color: var(--red); }
.catnav a[aria-current] { background: var(--wine); border-color: var(--wine); color: #fff; }

/* Vergleich */
.compare { padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.compare h2 { font-size: 1.4rem; color: var(--head); }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); }
.compare table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .98rem; }
.compare th, .compare td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.compare thead th { background: var(--grey); font-weight: 600; color: var(--head); font-size: .88rem; letter-spacing: .03em; text-transform: uppercase; }
.compare tbody tr:last-child td, .compare tbody tr:last-child th { border-bottom: 0; }
.compare tbody th { font-weight: 600; }
.compare tbody th a { text-decoration: none; color: var(--head); }
.compare tbody tr { transition: background .2s; }
.compare tbody tr:hover { background: #fbf4f4; }
.compare tbody tr:hover th a { color: var(--red); }
.compare .chf { font-weight: 600; color: var(--red); white-space: nowrap; }
.compare td:last-child a { white-space: nowrap; font-weight: 500; text-decoration: none; }

/* Produkt */
.prod { display: grid; grid-template-columns: minmax(0, 440px) 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); padding: clamp(2rem, 5vw, 3.5rem) 0; border-top: 1px solid var(--line); align-items: start; }
.gal { position: sticky; top: 6.5rem; }
.gal .main { position: relative; margin: 0; aspect-ratio: 1; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.gal .main img { position: absolute; inset: 1.25rem; width: calc(100% - 2.5rem); height: calc(100% - 2.5rem); object-fit: contain; transition: opacity .25s, transform .5s var(--ease); }
.gal .main:hover img { transform: scale(1.06); }
.gal .main img.swap { opacity: 0; }
.thumbs { display: flex; gap: .6rem; margin-top: .6rem; }
.thumbs button { width: 76px; height: 76px; padding: 4px; background: #fff; border: 2px solid var(--line); cursor: pointer; transition: border-color .2s; }
.thumbs button img { width: 100%; height: 100%; object-fit: contain; display: block; }
.thumbs button:hover, .thumbs button[aria-pressed="true"] { border-color: var(--red); }
.prod h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: .3em; }
.prod .short { margin-bottom: 1rem; }
.facts { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1.25rem; padding: 0; }
.facts li { padding: .45rem .9rem; background: var(--grey); font-size: .9rem; line-height: 1.3; }
.facts b { display: block; color: var(--head); font-size: 1.05rem; font-weight: 600; }
.price { padding: 1rem 1.25rem; border: 1px solid var(--line); border-left: 6px solid var(--red); }
.price dl { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1.5rem; margin: 0; align-items: baseline; }
.price dd { margin: 0; font-weight: 600; color: var(--head); font-size: 1.35rem; white-space: nowrap; }
.price small { display: block; margin-top: .5rem; font-size: .85rem; }
details { border-bottom: 1px solid var(--line); }
details:first-of-type { margin-top: 1.75rem; border-top: 1px solid var(--line); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem .25rem; cursor: pointer; list-style: none; font-weight: 600; color: var(--head); }
summary::-webkit-details-marker { display: none; }
summary svg { width: 1.15rem; height: 1.15rem; color: var(--red); transition: transform .45s var(--ease); }
details[open] summary svg { transform: rotate(90deg); }
summary:hover { color: var(--red); }
details ul { margin: 0 0 1.1rem; padding-left: 1.4rem; }
details li::marker { color: var(--red); }

/* Team */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2.25rem 1.75rem; list-style: none; margin: 2rem 0 0; padding: 0; }
.people .shot { aspect-ratio: 4 / 3; }
.people h3 { margin: 1rem 0 .15rem; }
.people p { margin: 0; }
.people .role { color: var(--head); font-weight: 500; }
.dog { position: relative; }
.dog:hover .shot img { animation: wag .5s ease-in-out 3; }
@keyframes wag { 50% { transform: scale(1.06) rotate(-2.5deg); } }
.wuff { position: absolute; top: -1rem; right: .5rem; z-index: 2; padding: .2em .9em; background: var(--red); color: #fff; font-weight: 600; border-radius: 1.2em 1.2em 1.2em .2em; transform: scale(0) rotate(-12deg); transform-origin: 0 100%; transition: transform .35s var(--ease); }
.dog:hover .wuff { transform: scale(1) rotate(-6deg); }
.dogmail { font-size: .95rem; color: #777; }

/* Fuss */
footer { background: var(--foot); color: #333; padding: clamp(2.5rem, 5vw, 4rem) 0 2rem; font-size: .98rem; }
footer .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; }
footer h3 { font-size: 1.15rem; }
footer h4 { margin: 1rem 0 0; font-size: .98rem; font-weight: 600; }
footer p { margin: 0; }
footer a { color: inherit; }

/* Schnellzugriff auf dem Handy */
.dock { display: none; }

@media (max-width: 860px) {
  .hero, .row, .contact, .prod { grid-template-columns: 1fr; }
  .hero .shot, .row .shot, .row.flip .shot { order: -1; min-height: 60vw; }
  .hero .txt, .row .txt, .row.flip .txt { justify-self: start; width: 100%; }
  .logo img { height: 46px; }
  .burger { display: block; }
  nav { position: absolute; top: 100%; left: 0; right: 0; background: #fff; box-shadow: 0 20px 30px rgba(0, 0, 0, .15); display: none; max-height: 75vh; overflow: auto; }
  nav.open { display: block; }
  nav > ul { display: block; padding: .5rem 1.25rem 1.25rem; }
  nav a { display: block; padding: .7rem 0; font-size: 1.1rem; border-bottom: 1px solid var(--line); background: none; }
  .sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 1rem; }
  .has-sub > a::after { content: none; }
  .top a { display: none; }
  form { grid-template-columns: 1fr; }
  .gal { position: static; max-width: 420px; }
  body { padding-bottom: 3.6rem; }
  .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--wine); box-shadow: 0 -6px 18px rgba(0, 0, 0, .2); }
  .dock a { padding: .95rem .5rem; text-align: center; color: #fff; text-decoration: none; font-weight: 500; font-size: .98rem; }
  .dock a + a { border-left: 1px solid rgba(255, 255, 255, .25); }
}

@media (max-width: 860px) {
  .sub::before { display: none; }
  .sub { min-width: 0; }
  .sub a { padding: .6rem 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .sub a:hover, .sub a:focus-visible { padding-left: 0; background: none; }
  .sub li:first-child { margin: 0; padding: 0; border: 0; }
}

/* Kacheln mit Foto (weiteres Sortiment) */
.cat .pic.cover img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat .pic small { position: absolute; z-index: 1; top: .6rem; left: .6rem; padding: .1em .7em; background: rgba(255, 255, 255, .92); color: var(--head); font-size: .75rem; font-weight: 500; }

/* Formular */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formstate { grid-column: 1 / -1; margin: 0; font-weight: 500; min-height: 1.5em; }
.formstate.ok { color: #1f7a46; }

/* Anfahrt */
.way { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.map { display: block; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, .12); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s; }
.map:hover { transform: rotate(-.6deg) scale(1.015); box-shadow: 0 26px 50px rgba(0, 0, 0, .18); }
.map img { display: block; width: 100%; height: auto; max-height: 88vh; object-fit: cover; }
.ways { list-style: none; margin: 1.25rem 0; padding: 0; display: grid; gap: .9rem; }
.ways li { padding-left: 1rem; border-left: 4px solid var(--red); }
.ways b { display: block; color: var(--head); font-weight: 600; }
.mapnote { margin: 1rem 0 0; font-size: .9rem; color: #6f6f6f; }
@media (max-width: 860px) { .way { grid-template-columns: 1fr; } }

/* Wer im System «Bewegung reduzieren» eingestellt hat, bekommt eine ruhige Seite.
   Im Entwurf (data-motion="immer" am html-Element) laufen die Animationen trotzdem. */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="immer"]) { scroll-behavior: auto; }
  html:not([data-motion="immer"]) *, html:not([data-motion="immer"]) *::before, html:not([data-motion="immer"]) *::after { animation: none !important; transition: none !important; }
  html:not([data-motion="immer"]) .shot::after { display: none; }
  html:not([data-motion="immer"]) .rise { opacity: 1; transform: none; }
}

/* Kacheltext füllt die Resthöhe, damit unter dem Bild keine Lücke entsteht */
.cat .body { flex: 1; margin-top: 0; grid-template-rows: auto 1fr; }

/* Karte gross auf derselben Seite */
.map { cursor: zoom-in; }
dialog.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 2vh 2vw; border: 0; background: transparent; overflow: auto; }
dialog.lightbox[open] { display: grid; place-items: center; animation: lb .35s var(--ease); }
dialog.lightbox::backdrop { background: rgba(28, 12, 14, .86); }
dialog.lightbox img { display: block; max-width: 96vw; max-height: 94dvh; width: auto; height: auto; background: #f7f2e7; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); cursor: zoom-in; }
dialog.lightbox.zoom { place-items: start center; }
dialog.lightbox.zoom img { max-width: none; max-height: none; width: min(1700px, 230vw); cursor: zoom-out; }
dialog.lightbox button { position: fixed; top: 1rem; right: 1.25rem; z-index: 2; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: #fff; color: var(--wine); font-size: 1.8rem; line-height: 1; cursor: pointer; }
dialog.lightbox button:hover { background: var(--red); color: #fff; }
@keyframes lb { from { opacity: 0; transform: scale(.94); } }

/* Anfrage-Zettel statt Formular */
.slip { position: relative; padding: 0 1.5rem 1.5rem; background: #fffdf8 repeating-linear-gradient(transparent 0 2.2rem, #f0eadc 2.2rem calc(2.2rem + 1px)); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(0, 0, 0, .1); transform: rotate(-.6deg); transition: transform .5s var(--ease), box-shadow .5s; }
.slip:hover, .slip:focus-within { transform: none; box-shadow: 0 22px 44px rgba(0, 0, 0, .14); }
.sliphead { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0 -1.5rem 1.1rem; padding: .7rem 1.5rem; background: var(--red); color: #fff; font-size: .9rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.slipno { font-weight: 400; letter-spacing: 0; text-transform: none; }
.slipintro { margin-bottom: 1rem; }
.topics { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 0 1.2rem; padding: 0; border: 0; }
.topic { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .95rem .45rem .55rem; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; font-size: .95rem; font-weight: 500; color: var(--head); cursor: pointer; user-select: none; transition: border-color .2s, background .2s, color .2s, transform .25s var(--ease); }
.topic input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.nutbox { display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; color: #b9bdc3; transition: color .25s, transform .7s var(--ease); }
.nutbox svg { width: 100%; height: 100%; }
.topic:hover { border-color: var(--red); transform: translateY(-2px); }
.topic:has(input:checked) { border-color: var(--red); background: #fbf0f0; color: var(--red); }
.topic input:checked + .nutbox { color: var(--red); transform: rotate(300deg) scale(1.12); }
.topic:has(input:focus-visible) { outline: 3px solid var(--red); outline-offset: 2px; }
.slipline { display: flex; flex-wrap: wrap; gap: .2rem .8rem; align-items: baseline; margin: 0; padding: .6rem .85rem; background: #fff; border-left: 4px solid var(--red); }
.slipline b { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #777; }
.subject { font-weight: 500; color: var(--head); }
.slip .formnote { margin-top: 1.1rem; font-size: .92rem; }

/* Gesichter-Rand passt sich dem Hintergrund der Zeile an */
.row:not(.grey) .face > img { border-color: #fff; }

/* Kontaktspalten dürfen schmaler werden als ihr Inhalt (kein Überlauf auf dem Handy) */
.contact > * { min-width: 0; }
.direct .btn { min-width: 0; overflow-wrap: anywhere; }

/* Grosse Bilder in Einstieg und Bild-Text-Zeilen: Das Bild füllt seine Spalte, bestimmt aber nicht deren Höhe.
   Die Höhe folgt dem Text und ist nach oben begrenzt, damit sie beim Herauszoomen und auf sehr breiten Bildschirmen nicht ausufert. */
.hero .shot, .row .shot { min-height: clamp(18rem, 34vw, 34rem); }
.hero .shot img, .row .shot img { position: absolute; inset: 0; }
.hero, .row { max-height: none; }
@media (min-width: 1700px) {
  .hero, .row { grid-template-columns: 1fr minmax(0, 50rem) minmax(0, 50rem) 1fr; }
  .hero .txt, .row .txt { grid-column: 2; justify-self: end; }
  .hero .shot, .row .shot { grid-column: 3 / 5; }
  .row.flip .txt { grid-column: 3; justify-self: start; }
  .row.flip .shot { grid-column: 1 / 3; }
  .hero > *, .row > * { grid-row: 1; }
}
@media (max-width: 860px) { .hero .shot, .row .shot, .row.flip .shot { min-height: 60vw; } }