/*
 * Bausteine der Unterseiten. Struktur/Klassennamen nach
 * OFFEN-EXTRAKT-UNTERSEITEN.md; exakte Maße sind eigenständig im
 * bestehenden Design-System (CLAUDE.md-Farben, layout.css-Tokens) gestaltet,
 * nicht Pixel für Pixel aus dem Entwurf übernommen (der wurde nur als
 * Struktur-/Text-Extrakt gelesen, siehe OFFEN.md).
 */

.wrap-1240 { max-width: 1240px; margin: 0 auto; padding: 0 clamp(1.2rem, 3.5vw, 3rem); }
#reservieren, #reservierung { padding-top: clamp(2.2rem, 4.5vw, 3.6rem); padding-bottom: clamp(2.2rem, 4.5vw, 3.6rem); }

/* ---------- Split: Unterseiten-Maße (weichen von der Startseite ab, siehe layout.css) ---------- */
.split { min-height: clamp(400px, 52svh, 560px); }
.split .side { gap: clamp(.6rem, 1.3vw, 1rem); }
.split h2 { font-size: clamp(1.8rem, 3.4vw, 2.9rem); line-height: .92; }
@media (max-width: 900px) {
	.split .shot { min-height: 40svh; }
}

/* ---------- Split-Farbvarianten (Unterseiten) ---------- */
.split.s-creme .side { background: var(--creme); color: var(--merlot); }
.split.s-rosa .side { background: var(--rosa); color: var(--merlot); }
.split.s-daily .side { background: var(--suedsee); color: var(--creme); }
.split.s-sand .side { background: var(--sand); color: var(--merlot); }
.split.s-orange .side { background: var(--orange); color: var(--merlot); }
.split.s-schwarz .side { background: var(--schwarz); color: var(--creme); }
.split.s-xmas .side { background: var(--senf); color: var(--schwarz); }
.split.s-xmas .side .cta { background: var(--schwarz); color: var(--eisblau); }
.split.s-xmas .side .cta:hover { background: var(--kugel); color: var(--schwarz); }
.split .side .cta { background: var(--merlot); color: var(--creme); }
.split.s-creme .side .cta, .split.s-rosa .side .cta, .split.s-sand .side .cta, .split.s-orange .side .cta { background: var(--merlot); color: var(--creme); }
.split.s-daily .side .cta, .split.s-schwarz .side .cta { background: var(--zitrone); color: var(--merlot); }

/* ---------- Seiten-Hero Farbvarianten ---------- */
.phero.c-restaurant .side, .phero.c-suedsee .side, .phero.c-zitrone .side,
.phero.c-sand .side, .phero.c-blau .side, .phero.c-xmas .side, .phero.c-jobs .side { position: relative; z-index: 5; }
.phero .side { background-color: var(--merlot); color: var(--creme); --glow: transparent; }
.phero h1, .phero .lead, .phero .eyebrow { text-shadow: 0 2px 14px var(--glow), 0 0 34px var(--glow); }
.phero .lead, .phero .eyebrow { text-shadow: 0 0 6px var(--glow), 0 0 14px var(--glow), 0 0 30px var(--glow); }
.phero .side::before { content: ""; position: absolute; z-index: 0; inset: -10%; pointer-events: none; opacity: .34; background: radial-gradient(62% 34% at 44% 48%, var(--glow) 0 18%, transparent 68%); }
.phero.c-restaurant .side { background-color: var(--merlot); background-image: repeating-linear-gradient(45deg, var(--merlot) 0 calc(var(--stripe-d) * .5), var(--rosa) calc(var(--stripe-d) * .5) var(--stripe-d)); color: var(--creme); --glow: var(--wp--custom--glow--restaurant); }
.phero.c-suedsee .side { background-color: var(--suedsee); background-image: repeating-linear-gradient(45deg, var(--suedsee) 0 calc(var(--stripe-d) * .5), var(--rosa) calc(var(--stripe-d) * .5) var(--stripe-d)); color: var(--creme); --glow: var(--wp--custom--glow--daily); }
.phero.c-zitrone .side { background-color: var(--zitrone); background-image: repeating-linear-gradient(45deg, var(--zitrone) 0 calc(var(--stripe-d) * .5), var(--rosa) calc(var(--stripe-d) * .5) var(--stripe-d)); color: var(--merlot); --glow: var(--wp--custom--glow--studio); }
.phero.c-sand .side { background-color: var(--rosa); background-image: repeating-linear-gradient(45deg, var(--rosa) 0 calc(var(--stripe-d) * .5), var(--orange) calc(var(--stripe-d) * .5) var(--stripe-d)); color: var(--merlot); --glow: var(--wp--custom--glow--catering); }
.phero.c-blau .side { background-color: var(--blau); background-image: repeating-linear-gradient(45deg, var(--blau) 0 calc(var(--stripe-d) * .5), var(--rosa) calc(var(--stripe-d) * .5) var(--stripe-d)); color: var(--creme); --glow: var(--wp--custom--glow--events); }
.phero.c-business .side { background: var(--sand); color: var(--merlot); }
.phero.c-privat .side { background: var(--orange); color: var(--merlot); }
.phero.c-hochzeit .side { background: var(--rosa); color: var(--merlot); }
.phero.c-kontakt .side { background: var(--rosa); color: var(--merlot); }
.phero.c-jobs .side { background-color: var(--rosa); background-image: repeating-linear-gradient(45deg, var(--rosa) 0 calc(var(--stripe-d) * .5), var(--creme) calc(var(--stripe-d) * .5) var(--stripe-d)); color: var(--merlot); --glow: var(--wp--custom--glow--catering); }
.phero.c-xmas .side { background-color: var(--eisblau); background-image: repeating-linear-gradient(45deg, var(--flieder) 0 calc(var(--stripe-d) * .5), var(--eisblau) calc(var(--stripe-d) * .5) var(--stripe-d)); color: var(--schwarz); --glow: rgba(210, 236, 242, .95); }

.phero { position: relative; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 78svh; min-height: 520px; overflow: hidden; overflow: clip; background: var(--schwarz); }
.phero .shot { position: relative; overflow: clip; background: var(--schwarz); z-index: auto; inset: auto; }
.phero .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero .shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(73, 3, 1, .34), rgba(73, 3, 1, .1) 45%, rgba(73, 3, 1, .46)); }
.phero .plogo { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; pointer-events: none; color: var(--creme); filter: drop-shadow(0 4px 34px rgba(73, 3, 1, .7)) drop-shadow(0 0 9px rgba(255, 245, 239, .5)) drop-shadow(0 0 24px rgba(255, 245, 239, .32)); }
.phero .plogo .lgblock { --lw: clamp(150px, 20vw, 290px); }
.phero .side { display: flex; flex-direction: column; justify-content: center; gap: clamp(.7rem, 1.5vw, 1.15rem); padding: clamp(4.2rem, 6vw, 5.4rem) clamp(1.5rem, 3.6vw, 3.4rem) clamp(1.8rem, 3.4vw, 2.6rem); position: relative; }
.phero .side > * { position: relative; z-index: 1; }
.phero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, min(6vw, 9svh), 4.6rem); line-height: .88; letter-spacing: -.035em; margin: .3rem 0 .4rem; }
.phero h1.lang { font-size: clamp(1.9rem, min(4.6vw, 7svh), 3.5rem); }
.phero p.lead { margin: 0; max-width: 40ch; font-size: 1rem; line-height: 1.6; }
.phero .pills { display: flex; flex-wrap: wrap; gap: .5rem .7rem; margin-top: .6rem; font-weight: 500; font-size: .85rem; }
.phero .pills span { display: inline-flex; align-items: center; justify-content: center; min-height: 2.9em; background: var(--creme); color: var(--merlot); padding: .35rem 1.05rem; border-radius: 999px; line-height: 1.25; text-align: center; }
.phero .pills span.b { font-weight: 700; }
.phero.c-xmas .pills span { background: rgba(255, 255, 255, .72); color: var(--schwarz); }
.phero.c-xmas .pills span.b { background: var(--senf); }
.phero.c-xmas .side .cta { background: var(--schwarz); color: var(--eisblau); }
.phero.c-xmas .side .cta:hover { background: var(--kugel); color: var(--schwarz); }
.phero.c-xmas .side .alt { color: var(--schwarz); border-bottom-color: var(--kugel); }
@media (max-width: 900px) {
	.phero { grid-template-columns: 1fr; grid-template-rows: auto auto; height: auto; min-height: 0; }
	.phero .shot { min-height: 44svh; }
}

/* ---------- Subnav (Catering-Bereich) ---------- */
.subnav { display: flex; flex-wrap: wrap; gap: .4rem; padding: 1rem clamp(1.2rem, 3.5vw, 3rem); background: var(--creme); border-bottom: 1px solid rgba(73, 3, 1, .12); }
.subnav a { padding: .5rem 1rem; border-radius: 999px; font-weight: 600; font-size: .82rem; color: var(--merlot); transition: background .2s, color .2s; }
.subnav a:hover { background: rgba(73, 3, 1, .08); }
.subnav a[aria-current="page"] { background: var(--merlot); color: var(--creme); }

/* ---------- Trust-Leiste ---------- */
.trust, .xtrust { position: relative; z-index: 5; padding: clamp(1.1rem, 2.4vw, 1.8rem) clamp(1.2rem, 3.5vw, 3rem); }
.trust { background: var(--merlot); color: var(--creme); }
.xtrust { background: var(--tanne); color: var(--schwarz); }
.trust-in, .xtrust-in { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 2.4rem); align-items: start; }
.trust-in > div, .xtrust-in > div { display: flex; flex-direction: column; gap: .2rem; padding-left: clamp(.7rem, 1.4vw, 1.1rem); border-left: 2px solid rgba(255, 245, 239, .22); }
.xtrust-in > div { border-left-color: rgba(10, 10, 10, .28); }
.trust-in > div:first-child, .xtrust-in > div:first-child { padding-left: 0; border-left: 0; }
.trust b, .xtrust b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 2.2vw, 1.9rem); line-height: 1; }
.trust b { color: var(--zitrone); }
.trust span { font-size: .82rem; line-height: 1.35; color: rgba(255, 245, 239, .82); }
.xtrust span { font-size: .82rem; line-height: 1.35; opacity: .82; }
@media (max-width: 900px) {
	.trust-in, .xtrust-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.trust-in > div:nth-child(3), .xtrust-in > div:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 460px) {
	.trust-in, .xtrust-in { grid-template-columns: minmax(0, 1fr); }
	.trust-in > div, .xtrust-in > div { padding-left: 0; border-left: 0; }
}

/* ---------- Fakten-Kacheln ---------- */
.facts { position: relative; z-index: 5; background: var(--creme); max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(.9rem, 2vw, 1.6rem); padding: clamp(2.2rem, 4.5vw, 3.6rem) clamp(1.2rem, 3.5vw, 3rem); }
.facts.wide { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.fact { background: var(--rosa); border-radius: 16px; padding: 1.2rem 1.35rem; display: flex; flex-direction: column; gap: .25rem; transition: transform .3s var(--ease), background .3s; }
a.fact:hover { transform: translateY(-4px); background: var(--zitrone); }
.fact .k { font-weight: 600; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.fact .v { font-family: var(--display); font-weight: 800; font-size: 1.35rem; line-height: 1.05; }
.fact .d { font-size: .85rem; line-height: 1.45; }

/* ---------- Raumkarten ---------- */
.rooms { position: relative; z-index: 5; background: var(--creme); color: var(--merlot); padding: clamp(2.4rem, 5vw, 4rem) clamp(1.2rem, 3.5vw, 3rem); }
.rooms h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: .92; letter-spacing: -.03em; max-width: 1240px; margin: 0 auto clamp(1.2rem, 2.6vw, 2rem); }
.rooms-in { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(.9rem, 2vw, 1.5rem); }
.room { background: var(--rosa); color: var(--merlot); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.room .pic { aspect-ratio: 16/10; background: var(--schwarz); overflow: hidden; }
.room .pic img { width: 100%; height: 100%; object-fit: cover; }
.room .body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.room h3 { font-family: var(--display); font-weight: 800; font-size: 1.55rem; line-height: 1; margin: 0; }
.room .cap { display: flex; flex-wrap: wrap; gap: .4rem; }
.room .cap span { background: var(--creme); padding: .32rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 500; }
.room p { margin: 0; font-size: .88rem; line-height: 1.5; }
.room .from { margin-top: auto; padding-top: .7rem; border-top: 2px solid rgba(73, 3, 1, .2); font-family: var(--display); font-weight: 800; font-size: 1.25rem; }
.room .from small { display: block; font-family: var(--body); font-weight: 500; font-size: .76rem; opacity: .75; margin-top: .2rem; }
.room .folgt { font-size: .84rem; opacity: .7; }

/* ---------- Konzepte / Stufen (.pkgs / .pkg) ---------- */
.pkgs { padding: clamp(2.4rem, 5vw, 4rem) clamp(1.2rem, 3.5vw, 3rem); }
.pkgs.creme { background: var(--creme); color: var(--merlot); }
.pkgs-head { max-width: 1240px; margin: 0 auto clamp(1.2rem, 2.6vw, 2rem); text-align: center; }
.pkgs-head h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: .92; letter-spacing: -.03em; margin: .3rem 0 .5rem; }
.pkgs-head p { margin: 0 auto; max-width: 52ch; font-size: .95rem; }
.pkgs-in { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(.9rem, 2vw, 1.5rem); }
.pkg { background: var(--rosa); color: var(--merlot); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transition: transform .3s var(--ease); }
.pkg:hover { transform: translateY(-5px); }
.pkg.hot { background: var(--zitrone); }
.pkg .pic { aspect-ratio: 4/3; background: var(--schwarz); overflow: hidden; }
.pkg .pic img { width: 100%; height: 100%; object-fit: cover; }
.pkg-b { padding: clamp(1.2rem, 2.2vw, 1.7rem); display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.pkg .tagline { font-weight: 600; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; opacity: .72; }
.pkg-b .zg { font-size: .88rem; line-height: 1.5; opacity: .85; margin: 0; }
.pkg h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1; letter-spacing: -.02em; margin: 0; }
.pkg .from { font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1; margin: .1rem 0 .5rem; }
.pkg .from small { display: block; font-family: var(--body); font-weight: 500; font-size: .76rem; line-height: 1.35; opacity: .72; margin-top: .28rem; }
.pkg ul { margin: 0; padding: 0 0 0 1.05rem; font-size: .88rem; line-height: 1.5; }
.pkg li { margin-bottom: .25rem; }
.pkg .specs { margin: .2rem 0 0; padding: 0; list-style: none; font-size: .85rem; line-height: 1.45; }
.pkg .specs li { display: grid; grid-template-columns: 4.9rem minmax(0, 1fr); gap: .55rem; padding: .4rem 0; border-bottom: 1px solid rgba(73, 3, 1, .16); margin-bottom: 0; }
.pkg .specs li:last-child { border-bottom: none; }
.pkg .specs b { font-weight: 600; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; opacity: .7; padding-top: .15rem; }
.pkg .abhint { margin: -.35rem 0 0; font-size: .76rem; line-height: 1.45; opacity: .8; }
.pkg .fit { margin: auto 0 0; padding-top: .7rem; font-size: .8rem; font-weight: 500; border-top: 2px solid rgba(73, 3, 1, .2); }
.pkg .pfoot { margin-top: auto; padding-top: 1rem; }
.pkg .pcta { display: inline-block; background: var(--merlot); color: var(--creme); text-decoration: none; font-weight: 600; font-size: .82rem; padding: .62rem 1.25rem; border-radius: 999px; transition: transform .25s var(--ease), background .25s; }
.pkg .pcta:hover { transform: translateY(-2px); background: var(--schwarz); }
.pkgs-note, .kx-note { max-width: 1240px; margin: 1.2rem auto 0; font-size: .78rem; opacity: .65; text-align: center; }
.mv-box { max-width: 900px; margin: 1.6rem auto 0; background: var(--zitrone); color: var(--merlot); border-radius: 18px; padding: 1.4rem 1.6rem; }
.mv-box h3 { font-family: var(--display); font-weight: 800; margin: 0 0 .5rem; }
.mv-box p { margin: 0; font-size: .9rem; }

/* ---------- Business-Kacheln (.biz) ---------- */
/* Eigener Bereich für Business-Kunden, deshalb bewusst graubeige (Sand)
   statt Schwarz - Entwurf setzt .biz explizit von den Schwarz-Flächen der
   restlichen Seite ab. */
.biz { padding: clamp(2.4rem, 5vw, 3.8rem) clamp(1.2rem, 3.5vw, 3rem); background: var(--sand); color: var(--merlot); }
.biz-head { max-width: 1240px; margin: 0 auto clamp(1.6rem, 3vw, 2.2rem); display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: end; }
.biz-head h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: .95; margin: .3rem 0 0; }
.biz-head p { font-size: .9rem; line-height: 1.6; color: var(--merlot); }
@media (max-width: 800px) { .biz-head { grid-template-columns: 1fr; align-items: start; } }
.biz-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.bizc { display: flex; flex-direction: column; background: var(--creme); color: var(--merlot); border-radius: 16px; padding: 1.2rem 1.3rem; transition: background .25s, transform .25s var(--ease); }
.bizc:hover { background: var(--zitrone); transform: translateY(-3px); }
.bizc h3 { font-family: var(--display); font-weight: 800; font-size: 1.15rem; margin: 0 0 .3rem; }
.bizc .wo { display: block; font-size: .74rem; color: var(--merlot); opacity: .65; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .4rem; }
.bizc p { margin: 0 0 .5rem; font-size: .84rem; line-height: 1.55; color: var(--merlot); }
.bizc .go { margin-top: auto; padding-top: .3rem; font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--merlot); }
.biz-fakt { max-width: 1240px; margin: 1.6rem auto 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.biz-fakt span { background: var(--merlot); color: var(--creme); padding: .45rem 1rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.biz-cta { max-width: 1240px; margin: 1.4rem auto 0; display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; }
.biz-cta .cta { background: var(--merlot); color: var(--creme); }
.biz-cta .cta:hover { background: var(--rottief); }
.biz-cta .alt { color: var(--merlot); font-weight: 600; text-decoration: none; border-bottom: 2.5px solid currentColor; padding-bottom: 3px; transition: opacity .3s; }
.biz-cta .alt:hover { opacity: .65; }

/* ---------- Referenzen (.refs) ---------- */
.refs { position: relative; z-index: 5; background: var(--creme); color: var(--merlot); padding: clamp(2.4rem, 5vw, 4rem) clamp(1.2rem, 3.5vw, 3rem); }
.refs h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: .92; letter-spacing: -.03em; max-width: 1240px; margin: 0 auto clamp(1.2rem, 2.6vw, 2rem); }
.refs-in { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(.9rem, 2vw, 1.5rem); }
.ref { background: var(--creme); border: 2.5px solid rgba(73, 3, 1, .18); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.ref .pic { aspect-ratio: 4/3; background: var(--schwarz); overflow: hidden; }
.ref .pic img { width: 100%; height: 100%; object-fit: cover; }
.ref .body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.ref .meta { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); }
.ref h3 { font-family: var(--display); font-weight: 800; font-size: 1.25rem; line-height: 1.05; margin: 0; }
.ref p { margin: 0; font-size: .88rem; line-height: 1.5; }
.ref .quote { margin-top: auto; padding-top: .7rem; border-top: 2px solid rgba(73, 3, 1, .15); font-size: .86rem; font-style: italic; line-height: 1.45; }
.ph.inline { display: inline-block; padding: .1rem .5rem; min-height: 0; border-radius: 6px; }

/* ---------- Schritte (.steps) ---------- */
.steps { padding: clamp(2.2rem, 4.5vw, 3.4rem) clamp(1.2rem, 3.5vw, 3rem); }
.steps.dark { background: var(--schwarz); color: var(--creme); }
.steps-in { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.4rem; }
.step { position: relative; padding-left: 2.6rem; }
.step .n { position: absolute; left: 0; top: 0; font-family: var(--display); font-weight: 800; font-size: 2.4rem; color: var(--orange); }
.steps.dark .step .n { color: var(--zitrone); }
.step h3 { font-family: var(--display); font-weight: 800; font-size: 1.1rem; margin: 0 0 .3rem; }
.step p { margin: 0; font-size: .86rem; opacity: .85; }

/* ---------- Anfrageformular (.brief / .bform) ---------- */
.brief { position: relative; z-index: 5; background: var(--schwarz); color: var(--creme); padding: clamp(2.6rem, 5.5vw, 4.4rem) clamp(1.2rem, 3.5vw, 3rem); }
.brief-in { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3.4rem); align-items: start; }
@media (max-width: 900px) { .brief-in { grid-template-columns: 1fr; } }
.brief-in h2 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: .9; letter-spacing: -.03em; margin: .3rem 0 .7rem; }
.brief-in .lead2 { font-size: 1rem; line-height: 1.6; color: rgba(255, 245, 239, .9); margin: 0 0 1.1rem; }
.brief-in .cta:hover { background: var(--rosa); }
.brief-in .promise { font-size: .84rem; color: rgba(255, 245, 239, .7); margin-top: 1rem; }
.bform { background: rgba(255, 245, 239, .06); border: 2px solid rgba(255, 245, 239, .22); border-radius: 20px; padding: clamp(1.1rem, 2.4vw, 1.9rem); display: grid; gap: 1.1rem; }
.bform .tag { display: inline-block; width: max-content; background: var(--rosa); color: var(--merlot); font-weight: 600; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; padding: .32rem .7rem; border-radius: 999px; }
.bform h3 { font-family: var(--display); font-weight: 800; font-size: 1.3rem; line-height: 1.05; margin: 0; }
.bhead { font-weight: 700; font-size: .88rem; display: block; }
.bsub { margin: -.4rem 0 0; font-size: .78rem; opacity: .65; }
.breq { color: var(--orange); }
.bopts { display: grid; gap: .6rem; }
.bopts label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; padding: .6rem .7rem; border: 2px solid rgba(255, 245, 239, .2); border-radius: 12px; cursor: pointer; font-size: .88rem; transition: border-color .25s, background .25s; }
.bopts label:has(input:checked) { border-color: var(--zitrone); background: rgba(255, 237, 106, .1); }
.bopts label small { display: block; width: 100%; opacity: .65; font-size: .76rem; }
.bgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.bgrid label { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; font-weight: 600; }
.bgrid label.wide { grid-column: 1 / -1; }
.bgrid input, .bgrid select, .bgrid textarea, .bform select { font: inherit; font-weight: 400; padding: .7rem .85rem; border: 2px solid rgba(255, 245, 239, .28); border-radius: 12px; background: rgba(255, 245, 239, .08); color: var(--creme); transition: border-color .25s; }
.bgrid select option { color: var(--schwarz); }
.bgrid input:focus, .bgrid select:focus, .bgrid textarea:focus { outline: none; border-color: var(--zitrone); }
.bgrid input::placeholder, .bgrid textarea::placeholder { color: rgba(255, 245, 239, .45); }
@media (max-width: 560px) { .bgrid { grid-template-columns: 1fr; } }
.bchips { display: flex; flex-wrap: wrap; gap: .5rem; }
.bchips label { display: flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border: 2px solid rgba(255, 245, 239, .2); border-radius: 999px; font-size: .82rem; cursor: pointer; }
.bchips label:has(input:checked) { background: var(--merlot); color: var(--creme); border-color: var(--merlot); }
.bcond { padding: .8rem; background: rgba(255, 245, 239, .06); border-radius: 12px; }
.bwe { font-size: .8rem; background: var(--zitrone); color: var(--merlot); padding: .7rem .9rem; border-radius: 10px; margin: 0; }
.bsend { width: 100%; background: var(--zitrone); color: var(--merlot); font-weight: 600; font-size: .9rem; padding: 1rem 1.6rem; border-radius: 999px; transition: transform .3s var(--ease), background .3s; }
.bsend:hover:not(:disabled) { transform: scale(1.03); background: var(--rosa); }
.bsend:disabled { background: rgba(255, 245, 239, .16); color: rgba(255, 245, 239, .5); cursor: not-allowed; }
.bmsg { margin: 0; padding: .8rem 1rem; border-radius: 10px; font-size: .86rem; }
.bmsg.ok { background: rgba(43, 151, 118, .18); color: #8fe0c4; }
.bmsg.err { background: rgba(243, 61, 60, .18); color: #ffb3b0; }
.bnote { margin: 0; font-size: .76rem; line-height: 1.45; color: rgba(255, 245, 239, .68); }

/* ---------- Kacheln (.tiles) ---------- */
.tiles { position: relative; z-index: 5; background: var(--schwarz); color: var(--creme); padding: clamp(2.4rem, 5vw, 4rem) clamp(1.2rem, 3.5vw, 3rem); }
.tiles h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: .92; letter-spacing: -.03em; margin: 0 0 clamp(1.2rem, 2.6vw, 2rem); }
.tiles-lead { margin: 0 0 1.2rem; font-size: .92rem; opacity: .78; }
.tiles-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px; }
@media (min-width: 760px) { .tiles-in { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .tiles-in { grid-template-columns: repeat(4, 1fr); } }
.tile { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 4/4.4; display: block; }
.tile img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.78) contrast(1.05); transform: scale(1.05); transition: filter .6s var(--ease), transform .8s var(--ease); }
.tile:hover img { filter: none; transform: scale(1.12); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 10, 0) 36%, rgba(10, 10, 10, .92)); pointer-events: none; }
.tile .t { position: absolute; z-index: 2; left: 1.1rem; right: 1.1rem; bottom: 1.15rem; }
.tile h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 1.9vw, 1.8rem); line-height: 1; margin: 0 0 .35rem; letter-spacing: -.02em; }
.tile p { margin: 0 0 .6rem; font-size: .83rem; line-height: 1.4; color: rgba(255, 245, 239, .88); }
.tile .go, .tile .free { font-size: .74rem; font-weight: 600; }
.tile .go { display: inline-block; letter-spacing: .16em; text-transform: uppercase; font-size: .66rem; border-bottom: 2px solid var(--orange); padding-bottom: 3px; }
.tile .free { display: block; margin-bottom: .2rem; color: var(--orange); }
.tile .free.none { color: var(--rot); }
.tile .free.soon { opacity: .6; }
.tile .bph, .tile .ph { position: absolute; inset: 0; height: auto; min-height: 0; display: grid; place-items: center; background: rgba(255, 245, 239, .06); border: 2px dashed rgba(255, 245, 239, .3); color: rgba(255, 245, 239, .7); font-size: .82rem; font-weight: 600; }
.tin-ev .tile { aspect-ratio: 4/3.3; }
@media (max-width: 759px) { .tin-ev .tile { aspect-ratio: 4/2.9; } }
.tin-ev .tile .t { left: .9rem; right: .9rem; bottom: .95rem; }
.tin-ev .tile h3 { font-size: clamp(1.05rem, 1.45vw, 1.35rem); margin-bottom: .25rem; }
.tin-ev .tile p { font-size: .78rem; margin-bottom: .45rem; }
.tin-ev .t .free { font-size: .72rem; margin: .35rem 0 .15rem; }
.tin-ev .tile .go { font-size: .6rem; }

/* ---------- Bestell-/Anfragekonfigurator (.order) ---------- */
.order { background: var(--creme); padding: clamp(2.4rem, 5vw, 3.8rem) clamp(1.2rem, 3.5vw, 3rem); }
.order-head { max-width: 1240px; margin: 0 auto clamp(1.4rem, 3vw, 2rem); }
.order-head h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: .3rem 0 .5rem; }
.order-ph { font-size: .8rem; background: var(--zitrone); color: var(--merlot); display: inline-block; padding: .5rem .9rem; border-radius: 999px; margin-top: .6rem; }
.order-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); align-items: start; }
@media (max-width: 900px) { .order-grid { grid-template-columns: 1fr; } }
.ostep { background: #fff; border-radius: 18px; padding: 1.2rem 1.4rem; margin-bottom: 1rem; }
.ostep h3 { font-family: var(--display); font-weight: 800; font-size: 1.05rem; margin: 0 0 .8rem; }
.olist { display: grid; gap: .8rem; }
.oitem { display: grid; grid-template-columns: 1fr auto; gap: .3rem .8rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid rgba(73, 3, 1, .1); }
.oitem strong { display: block; }
.oitem p { grid-column: 1; margin: 0; font-size: .8rem; opacity: .7; }
.oitem p.oalg { font-size: .7rem; opacity: .6; }
.oitem .price { grid-column: 2; grid-row: 1; font-weight: 600; }
.oqty { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: .5rem; justify-self: end; }
.oqty button { width: 30px; height: 30px; border-radius: 50%; background: rgba(73, 3, 1, .1); font-weight: 700; }
.odelivery { display: grid; gap: .6rem; }
.odelivery label { display: block; padding: .7rem .9rem; border: 1px solid rgba(73, 3, 1, .16); border-radius: 12px; cursor: pointer; }
.odelivery label:has(input:checked) { border-color: var(--orange); background: rgba(231, 96, 45, .06); }
.odelivery .meta { display: block; font-size: .78rem; opacity: .65; margin-top: .2rem; }
.ofields { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.ofields label.wide { grid-column: 1 / -1; }
.ofields input, .ofields textarea, .ostep input, .ostep select, .ostep textarea { font: inherit; padding: .65rem .8rem; border: 1px solid rgba(73, 3, 1, .22); border-radius: 10px; width: 100%; }
.osum { position: sticky; top: 6rem; background: var(--schwarz); color: var(--creme); border-radius: 18px; padding: 1.4rem 1.5rem; }
.osum h3 { font-family: var(--display); font-weight: 800; margin: 0 0 .8rem; }
.osum .row { display: flex; justify-content: space-between; font-size: .88rem; padding: .35rem 0; border-bottom: 1px solid rgba(255, 245, 239, .14); }
.osum .bar { height: 6px; border-radius: 999px; background: rgba(255, 245, 239, .18); margin: .9rem 0; overflow: hidden; }
.osum .bar > span { display: block; height: 100%; background: var(--zitrone); width: 0%; transition: width .3s var(--ease); }
.osum .bar.done > span { background: var(--rot); }
.osum .hint { font-size: .8rem; opacity: .8; margin: 0 0 .9rem; }
.osum button { width: 100%; background: var(--zitrone); color: var(--merlot); font-weight: 700; padding: .9rem; border-radius: 999px; }
.osum button:disabled { opacity: .5; }
.onote { font-size: .72rem; opacity: .6; margin: .7rem 0 0; }

/* ---------- Whoopschein (.woo) ---------- */
.woo { background: var(--merlot); color: var(--creme); padding: clamp(2.4rem, 5vw, 4rem) clamp(1.2rem, 3.5vw, 3rem); }
.woo-in { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
.woo-side .eyebrow { opacity: .75; }
.woo-side h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: .3rem 0 .6rem; }
.woo-side > p { opacity: .85; line-height: 1.6; margin: 0 0 1.2rem; max-width: 46ch; }

.woo-coupon { display: flex; justify-content: center; }
.woo-coupon-card { position: relative; width: min(280px, 100%); background: var(--creme); color: var(--merlot); border-radius: 20px; padding: 1.6rem 1.5rem 1.5rem; box-shadow: 0 20px 45px rgba(0, 0, 0, .28); text-align: center; }
.woo-coupon-top .lgblock { --lw: 60px; margin: 0 auto .5rem; }
.woo-coupon-brand { display: block; font-family: var(--display); font-weight: 800; font-size: 1.25rem; }
.woo-coupon-tear { position: relative; border-top: 2px dashed rgba(73, 3, 1, .3); margin: 1.2rem -1.5rem 1.1rem; }
.woo-coupon-tear::before, .woo-coupon-tear::after { content: ''; position: absolute; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--merlot); }
.woo-coupon-tear::before { left: -10px; }
.woo-coupon-tear::after { right: -10px; }
.woo-coupon-bottom { display: flex; flex-direction: column; gap: .15rem; }
.woo-coupon-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; opacity: .6; }
.woo-coupon-big { font-family: var(--display); font-weight: 800; font-size: 1.7rem; }
.woo-coupon-sub { font-size: .74rem; opacity: .65; }

.woo-ways { display: grid; gap: .7rem; margin-bottom: 1.4rem; }
.woo-way { position: relative; display: block; background: rgba(255, 245, 239, .07); border: 1px solid rgba(255, 245, 239, .3); border-radius: 14px; padding: .8rem 1rem .8rem 2.5rem; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.woo-way input { position: absolute; left: 1rem; top: 1.15rem; }
.woo-way .t { display: block; font-weight: 700; }
.woo-way .s { display: block; font-size: .8rem; opacity: .7; margin-top: .1rem; }
.woo-way.on { background: var(--creme); color: var(--merlot); border-color: var(--creme); }
.woo-way.on .s { opacity: .6; }

.woo-panels { max-width: 1240px; margin: 1.6rem auto 0; }
.woo-panel-card { background: var(--creme); color: var(--merlot); border-radius: 20px; padding: clamp(1.4rem, 3vw, 2.2rem); }
.woo-panel-card .gastronovi-placeholder p { margin: 0 0 .8rem; }
.woo-panel-card .gastronovi-placeholder .alt-tel { margin-top: .8rem; font-size: .86rem; }
.woo-panel-card .gastronovi-placeholder .cta { background: var(--merlot); color: var(--creme); display: inline-block; padding: .8rem 1.4rem; border-radius: 999px; font-weight: 600; }

.woo-order { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); align-items: start; }
.woo-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .9rem; }
.woo-chip { background: #fff; border: 1px solid rgba(73, 3, 1, .18); border-radius: 999px; padding: .55rem 1.2rem; font-weight: 700; cursor: pointer; }
.woo-chip.on { background: var(--merlot); color: var(--creme); border-color: var(--merlot); }
.woo-amount { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.woo-amount input { font: inherit; font-weight: 700; padding: .65rem .8rem; border: 1px solid rgba(73, 3, 1, .22); border-radius: 10px; width: 8rem; }
.woo-amount span { opacity: .7; font-size: .85rem; }
.form-warn { color: var(--rot); font-size: .82rem; margin: .5rem 0 0; font-weight: 600; }

.woo-sum { position: sticky; top: 6rem; background: var(--merlot); color: var(--creme); border-radius: 18px; padding: 1.4rem 1.5rem; }
.woo-sum h3 { font-family: var(--display); font-weight: 800; margin: 0 0 .8rem; }
.woo-sum .row { display: flex; justify-content: space-between; font-size: .88rem; padding: .35rem 0; border-bottom: 1px solid rgba(255, 245, 239, .16); }
.woo-sum button { width: 100%; background: var(--zitrone); color: var(--merlot); font-weight: 700; padding: .9rem; border-radius: 999px; margin-top: .9rem; }
.woo-sum button:disabled { opacity: .5; }
.woo-notice { font-size: .8rem; background: rgba(255, 245, 239, .12); border-radius: 10px; padding: .7rem .8rem; margin: .8rem 0; }

@media (max-width: 900px) {
	.woo-in { grid-template-columns: 1fr; }
	.woo-order { grid-template-columns: 1fr; }
	.woo-sum { position: static; }
}

/* ---------- Jobs: Perks (.perks) ---------- */
.perks { background: var(--creme); color: var(--merlot); padding: clamp(2.4rem, 5vw, 4rem) clamp(1.2rem, 3.5vw, 3rem); }
.perks-head { max-width: 1240px; margin: 0 auto clamp(1.4rem, 3vw, 2rem); }
.perks-head h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: .3rem 0 .5rem; }
.perks-head p { margin: 0; font-size: .96rem; opacity: .8; }
.perks-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.perk { background: var(--rosa); border-radius: 16px; padding: 1.2rem 1.3rem; }
.perk h3 { font-family: var(--display); font-weight: 800; font-size: 1.05rem; margin: 0 0 .35rem; }
.perk p { margin: 0; font-size: .85rem; line-height: 1.5; opacity: .85; }

/* ---------- Jobs: Offene Stellen (.stellen) ---------- */
.stellen { background: var(--schwarz); color: var(--creme); padding: clamp(2.4rem, 5vw, 4rem) clamp(1.2rem, 3.5vw, 3rem); }
.stellen-head { max-width: 1240px; margin: 0 auto clamp(1.4rem, 3vw, 2rem); display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 2rem; }
.stellen-head h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 0; }
.stellen-head p { margin: 0; font-size: .92rem; opacity: .75; max-width: 46ch; }
.stellen-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.1rem; }
.stelle { display: flex; flex-direction: column; gap: .5rem; border: 1px solid rgba(255, 245, 239, .22); border-radius: 18px; padding: 1.3rem 1.4rem; }
.stelle .meta { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--zitrone); }
.stelle h3 { font-family: var(--display); font-weight: 800; font-size: 1.2rem; line-height: 1.05; margin: 0; }
.stelle p { margin: 0; font-size: .86rem; line-height: 1.5; opacity: .82; }
.stelle .cta { align-self: flex-start; margin-top: auto; padding-top: .8rem; }
.stellen-note { max-width: 1240px; margin: 1.6rem auto 0; font-size: .84rem; opacity: .7; }

/* ---------- Jobs: Bewerbungsformular (.jobsform) ---------- */
.jobsform { background: var(--rosa); color: var(--merlot); padding: clamp(2.6rem, 5.5vw, 4.4rem) clamp(1.2rem, 3.5vw, 3rem); }
.jobsform-in { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3.4rem); align-items: start; }
@media (max-width: 900px) { .jobsform-in { grid-template-columns: 1fr; } }
.jobsform-text h2 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: .95; letter-spacing: -.03em; margin: .3rem 0 .8rem; }
.jobsform-text p { font-size: .96rem; line-height: 1.6; margin: 0 0 .9rem; max-width: 46ch; }
.jobsform-card { background: var(--creme); border-radius: 20px; padding: clamp(1.4rem, 3vw, 2.2rem); display: grid; gap: 1.1rem; }
.ofh { display: block; font-size: .74rem; opacity: .6; margin: -.3rem 0 .2rem; font-weight: 400; }
.jf-send { width: 100%; background: var(--merlot); color: var(--creme); font-weight: 600; font-size: .9rem; padding: 1rem 1.6rem; border-radius: 999px; transition: transform .3s var(--ease), background .3s; }
.jf-send:hover:not(:disabled) { transform: scale(1.02); }
.jf-send:disabled { opacity: .5; cursor: not-allowed; }
.bfile { border: 2px dashed rgba(73, 3, 1, .25); border-radius: 12px; padding: .9rem; font-size: .82rem; }
.bfile input[type="file"] { font-size: .82rem; }
.bfile p { margin: .4rem 0 0; opacity: .6; font-size: .74rem; }
.bfile-list { margin: .5rem 0 0; padding: 0; list-style: none; font-size: .78rem; opacity: .8; }

/* ---------- Einbindungsflächen (.embed) ---------- */
.embed { max-width: 1240px; margin: 0 auto; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 20px; margin-top: 1.4rem; margin-bottom: 1.4rem; }
.embed.rosa { background: var(--rosa); color: var(--merlot); }
.embed.creme { background: var(--creme); color: var(--merlot); }
.embed .tag { font-weight: 600; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.embed h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.3rem); margin: .3rem 0 .5rem; }
.embed .tech { margin-top: .8rem; font-size: .74rem; opacity: .6; }

/* ---------- Bar (.bar), Partner-Locations (.locs), Netzwerk (.netz) ---------- */
.bar { position: relative; z-index: 5; background: var(--blau); color: var(--creme); padding: clamp(2.6rem, 5.5vw, 4.4rem) clamp(1.2rem, 3.5vw, 3rem); }
.bar-in { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3.4rem); align-items: start; }
.bar h2 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: .92; letter-spacing: -.03em; margin: .3rem 0 .8rem; }
.bar p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.6; color: rgba(255, 245, 239, .92); }
.bar .cta, .netz .cta { display: inline-block; background: var(--zitrone); color: var(--merlot); font-weight: 600; font-size: .86rem; padding: .9rem 1.5rem; border-radius: 999px; transition: transform .3s var(--ease), background .3s; }
.bar .cta:hover, .netz .cta:hover { transform: scale(1.05); background: var(--rosa); }
.barcard { background: rgba(255, 245, 239, .1); border: 2px solid rgba(255, 245, 239, .28); border-radius: 20px; padding: clamp(1.1rem, 2.4vw, 1.6rem); margin-bottom: .9rem; }
.barcard:last-child { margin-bottom: 0; }
.barcard h3 { font-family: var(--display); font-weight: 800; font-size: 1.4rem; line-height: 1.05; margin: 0 0 .5rem; }
.barcard p { margin: 0 0 .7rem; font-size: .92rem; }
.barcard ul { margin: 0; padding-left: 1.1rem; font-size: .88rem; line-height: 1.6; color: rgba(255, 245, 239, .85); }
.bar-pic { max-width: 1240px; margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; border-radius: 20px; overflow: hidden; aspect-ratio: 2.6/1; border: 2px solid rgba(255, 245, 239, .28); }
.bar-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 820px) { .bar-pic { aspect-ratio: 16/10; } }

.locs { position: relative; z-index: 5; background: var(--creme); color: var(--merlot); padding: clamp(2.6rem, 5.5vw, 4.4rem) clamp(1.2rem, 3.5vw, 3rem); }
.locs-head { max-width: 1240px; margin: 0 auto clamp(1.4rem, 3vw, 2.2rem); }
.locs-head h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: .92; letter-spacing: -.03em; margin: .3rem 0 .6rem; }
.locs-head p { margin: 0; max-width: 58ch; font-size: .96rem; line-height: 1.6; }
.locs-in { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; }
.loc { background: var(--rosa); border-radius: 16px; padding: 1rem 1.1rem; transition: transform .3s var(--ease), background .3s; }
.loc:hover { transform: translateY(-4px); background: var(--zitrone); }
.loc b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.12rem; line-height: 1.1; }
.loc span { display: block; margin-top: .2rem; font-size: .82rem; opacity: .78; }
.loc.offen { background: var(--sand); }

.netz { position: relative; z-index: 5; background: var(--schwarz); color: var(--creme); padding: clamp(2.6rem, 5.5vw, 4.4rem) clamp(1.2rem, 3.5vw, 3rem); }
.netz-in { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.4rem, 4vw, 3.4rem); align-items: start; }
.netz h2 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: .9; letter-spacing: -.03em; margin: .3rem 0 .8rem; }
.netz p { margin: 0 0 .8rem; font-size: .98rem; line-height: 1.6; color: rgba(255, 245, 239, .88); }
.netz-list { display: flex; flex-wrap: wrap; gap: .5rem; align-content: flex-start; }
.netz-list span { background: rgba(255, 245, 239, .1); border: 2px solid rgba(255, 245, 239, .26); border-radius: 999px; padding: .55rem .95rem; font-size: .88rem; font-weight: 500; transition: border-color .25s, background .25s; }
.netz-list span:hover { border-color: var(--zitrone); background: rgba(255, 237, 106, .12); }
@media (max-width: 900px) {
	.bar-in, .netz-in { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Warum-Block (.why) ---------- */
.why { padding: clamp(2.6rem, 5.5vw, 4.4rem) clamp(1.2rem, 3.5vw, 3rem); }
.why.sand { background: var(--sand); color: var(--merlot); }
.why.orange { background: var(--orange); color: var(--merlot); }
.why.rosa { background: var(--rosa); color: var(--merlot); }
.why-in { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.4rem, 4vw, 3.4rem); align-items: start; }
.why h2 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: .9; letter-spacing: -.03em; margin: .3rem 0 .8rem; }
.why .lead2 { margin: 0 0 1rem; font-size: 1rem; line-height: 1.6; }
.why-quote { margin: 1.1rem 0 0; font-family: var(--display); font-weight: 800; font-size: clamp(1.1rem, 1.8vw, 1.4rem); line-height: 1.25; }
.why-pts { display: grid; gap: .8rem; }
.why-pt { background: var(--creme); border-radius: 16px; padding: 1rem 1.2rem; }
.why-pt b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.12rem; line-height: 1.15; margin-bottom: .25rem; }
.why-pt p { margin: 0; font-size: .92rem; line-height: 1.55; }
@media (max-width: 900px) { .why-in { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Panorama (.pano) ---------- */
.pano { max-width: 1240px; margin: clamp(1.4rem, 3vw, 2rem) auto; padding: 0 clamp(1.2rem, 3.5vw, 3rem); }
.pano figure { margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 21/9; background: var(--schwarz); position: relative; }
.pano img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pano figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 1.6rem; background: linear-gradient(0deg, rgba(10, 10, 10, .78), transparent); color: var(--creme); font-size: .88rem; }
.pano figcaption b { display: block; font-family: var(--display); font-size: 1.15rem; margin-bottom: .2rem; }

/* ---------- Weihnachts-Optionen (.xopts) ---------- */
.xopts { position: relative; z-index: 5; background: var(--eisblau); color: var(--schwarz); padding: clamp(2.6rem, 5.5vw, 4.4rem) clamp(1.2rem, 3.5vw, 3rem); }
.xopts > .eyebrow, .xopts > h2, .xopts > p { max-width: 1240px; margin-left: auto; margin-right: auto; }
.xopts h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: .92; letter-spacing: -.03em; }
.xopts p { max-width: 60ch; font-size: .98rem; line-height: 1.6; }
.xopts-in { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .9rem; }
.xo { border-radius: 18px; overflow: hidden; background: var(--flieder); color: var(--schwarz); display: flex; flex-direction: column; transition: transform .3s var(--ease), background .3s; }
.xo:hover { transform: translateY(-5px); background: var(--senf); }
.xo:nth-child(3n+2) { background: var(--senf); }
.xo:nth-child(3n+2):hover { background: var(--flieder); }
.xo:nth-child(3n+3) { background: #fff; }
.xo:nth-child(3n+3):hover { background: var(--senf); }
.xo.mehr { background: var(--kugel); }
.xo.mehr:hover { background: var(--schwarz); color: var(--eisblau); }
.xo .pic { aspect-ratio: 4/3; background: var(--schwarz); overflow: hidden; }
.xo .pic img { width: 100%; height: 100%; object-fit: cover; }
.xo .body { padding: 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.xo h3 { font-family: var(--display); font-weight: 800; font-size: 1.28rem; line-height: 1.05; margin: 0; }
.xo p { margin: 0; font-size: .9rem; line-height: 1.5; }
.xo .wo { margin-top: auto; padding-top: .7rem; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .68; }

/* ---------- Speisekarten-Overlay (.karte-in) ---------- */
.karte-in { position: relative; z-index: 5; background: var(--creme); color: var(--merlot); padding: clamp(2.4rem, 5vw, 4rem) clamp(1.2rem, 3.5vw, 3rem); }
.karte-in[hidden] { display: none; }
.karte-head { max-width: 1240px; margin: 0 auto clamp(1.2rem, 2.4vw, 1.8rem); }
.karte-head h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: .92; letter-spacing: -.03em; margin: .3rem 0 .5rem; }
.karte-head p { margin: 0; max-width: 52ch; font-size: .95rem; }
.mswitch { position: relative; z-index: 6; background: var(--rosa); color: var(--merlot); border-radius: 999px; padding: .4rem .6rem; max-width: 1240px; margin: 0 auto clamp(1.1rem, 2.2vw, 1.6rem); display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; }
.msw-tabs { display: flex; gap: .25rem; }
.msw-tabs button { font-weight: 600; font-size: .86rem; padding: .6rem 1.2rem; border-radius: 999px; color: var(--merlot); transition: background .25s, color .25s; }
.msw-tabs button:hover { background: rgba(73, 3, 1, .12); }
.msw-tabs button[aria-current="true"] { background: var(--merlot); color: var(--creme); }
.algtoggle { display: flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 500; cursor: pointer; }
.algtoggle input { width: 16px; height: 16px; accent-color: var(--merlot); }
.mcard { max-width: 1240px; margin: 0 auto; display: none; }
.mcard.on { display: block; }
.mnav { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin-bottom: clamp(1.6rem, 3.4vw, 2.6rem); }
.mnav a { font-weight: 600; font-size: .76rem; letter-spacing: .02em; padding: .45rem .9rem; border-radius: 999px; background: rgba(73, 3, 1, .09); transition: background .25s, color .25s; }
.mnav a:hover { background: var(--merlot); color: var(--creme); }
.mcard:not(.alg) .karte-allergene { display: none; }
.karte-foot { max-width: 1240px; margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; display: flex; justify-content: center; }
.karte-close { background: var(--merlot); color: var(--creme); font: inherit; font-weight: 600; font-size: .8rem; padding: .85rem 1.7rem; border-radius: 999px; transition: transform .3s var(--ease), background .3s; }
.karte-close:hover { transform: scale(1.05); background: var(--orange); }

/* ---------- Rechtsseiten ---------- */
.lhead { position: relative; z-index: 5; background: var(--merlot); color: var(--creme); padding: clamp(4.6rem, 8vw, 6.5rem) clamp(1.2rem, 3.5vw, 3rem) clamp(2rem, 4vw, 3rem); }
.lhead-in { max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.lmark { flex: 0 0 auto; width: clamp(78px, 10vw, 120px); color: var(--creme); display: block; }
.lmark svg { width: 100%; height: auto; aspect-ratio: 553/335; }
.lhead h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: .92; letter-spacing: -.03em; margin: .2rem 0 0; }
.legal-wrap { max-width: 900px; margin: 0 auto; padding: clamp(2rem, 4vw, 3rem) clamp(1.2rem, 3.5vw, 3rem); }
.recht-text h3 { font-family: var(--display); font-weight: 800; font-size: 1.2rem; margin: 1.6rem 0 .5rem; }
.recht-text h3:first-child { margin-top: 0; }
.recht-text h4 { font-weight: 700; font-size: 1rem; margin: 1.2rem 0 .3rem; }
.recht-text p { font-size: .92rem; line-height: 1.6; margin: 0 0 .8rem; }
.recht-text ul { font-size: .92rem; line-height: 1.6; margin: 0 0 .8rem; padding-left: 1.3rem; }
.recht-text li { margin: 0 0 .3rem; }
.lfoot { max-width: 900px; margin: 1rem auto 3rem; padding: 0 clamp(1.2rem, 3.5vw, 3rem); }

/* Formulare der Studio-Seite teilen sich die Klassen mit .brief/.bform oben. */

/* ---------- Mini-FAQ auf den Catering-Unterseiten (zweispaltig) ---------- */
.faq { position: relative; z-index: 5; background: var(--rottief); color: var(--creme); padding: clamp(2.6rem, 5.5vw, 4.6rem) clamp(1.2rem, 3.5vw, 3rem); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.6rem, 4vw, 4rem); max-width: 1400px; margin: 0 auto; align-items: start; }
.faq-l { position: sticky; top: 1.5rem; }
.faq-l h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: .95; letter-spacing: -.03em; margin: 0 0 .7rem; }
.faq-l p { margin: 0; font-size: .95rem; line-height: 1.6; max-width: 34ch; }
.faq-r { background: var(--creme); color: var(--merlot); border-radius: 20px; padding: clamp(1rem, 2.4vw, 1.9rem) clamp(1.1rem, 2.6vw, 2.1rem); }
.faq-r details:last-child { border-bottom: none; }
.faq-r details { border-bottom: 2px solid rgba(73, 3, 1, .16); }
.faq-r summary { list-style: none; cursor: pointer; position: relative; padding: 1rem 2.6rem 1rem 0; font-family: var(--display); font-weight: 800; font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.18; transition: color .25s; }
.faq-r summary::-webkit-details-marker { display: none; }
.faq-r summary:hover { color: var(--orange); }
.faq-r summary::after, .faq-r summary::before { content: ""; position: absolute; right: .35rem; top: 50%; width: 14px; height: 2.5px; background: currentColor; transform: translateY(-50%); transition: transform .3s var(--ease); }
.faq-r summary::before { transform: translateY(-50%) rotate(90deg); }
.faq-r details[open] summary::before { transform: translateY(-50%) rotate(0deg); }
.faq-r details p { margin: 0 0 1.1rem; max-width: 62ch; font-size: .94rem; line-height: 1.6; }
@media (max-width: 820px) {
	.faq { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
	.faq-l { position: static; }
}