/* ==========================================================================
   Schnitzelbär — eine CSS-Datei für die ganze Seite (kein Framework).
   Aufbau: Schriften · Grundwerte · Typo · Kopf/Menü · Sektionen · Blöcke · Footer · Dialoge · Formulare · Beiträge
   ========================================================================== */

/* ---------- Schriften (selbst gehostet, nur woff2, swap) ---------- */
@font-face { font-family: 'Papercute'; src: url(../fonts/papercute-bold.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
/* Thirsty Rough (Zierwort, 179 KB) lädt site.js erst nach dem Bühnenbild – sonst teilt es sich mobil die Leitung mit dem LCP-Bild */
@font-face { font-family: 'Open Sans Condensed'; src: url(../fonts/open-sans-condensed-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Open Sans Condensed'; src: url(../fonts/open-sans-condensed-300.woff2) format('woff2'); font-weight: 300; font-display: swap; }

/* ---------- Grundwerte ---------- */
:root {
	--gelb: #EDCD00;
	--schwarz: #000;
	--weiss: #fff;
	--grau: #b9b9b9;
	--text: 'Open Sans Condensed', 'Arial Narrow', Arial, sans-serif;
	--druck: 'Papercute', 'Arial Black', Impact, sans-serif;
	--zier: 'Thirsty Rough', 'Brush Script MT', cursive;
	--wrap: 1140px;
	--pad: clamp(40px, 7vw, 90px);
	/* gerissene Papierkante (vereinfachte Form der Live-Seite) */
	--papier: polygon(0 4%, 6% 2%, 14% 3%, 23% 1%, 33% 3%, 41% 2%, 47% 5%, 54% 2%, 66% 2%, 78% 1%, 87% 0, 94% 2%, 100% 2%, 100% 30%, 101% 60%, 100% 82%, 97% 86%, 88% 88%, 74% 86%, 61% 88%, 50% 89%, 39% 87%, 27% 85%, 16% 87%, 6% 86%, 0 85%, 1% 55%, 0 30%);
	--bild: polygon(1% 3%, 8% 1%, 17% 3%, 27% 4%, 35% 1%, 46% 3%, 58% 1%, 72% 1%, 82% 0, 96% 2%, 98% 3%, 98% 25%, 99% 45%, 98% 75%, 98% 97%, 87% 98%, 77% 98%, 63% 99%, 49% 99%, 34% 98%, 21% 100%, 11% 99%, 2% 101%, 0 98%, 1% 87%, 0 73%, 0 42%, 0 22%, 1% 8%);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--schwarz); color: var(--weiss); font: 700 clamp(15px, 1.05vw, 17px)/1.55 var(--text); overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0 0 .6em; font-weight: 400; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.wrap--schmal { max-width: 780px; }
.wrap--text { max-width: 820px; }
.center { text-align: center; }
.skip-link, .screen-reader-text { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 10px; z-index: 1000; background: var(--gelb); color: #000; padding: 10px 14px; }
:focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; }

/* ---------- Typo: Überschriften im Schnitzelbär-Stil ---------- */
.sb-title { font-family: var(--druck); font-size: clamp(24px, 2.6vw, 36px); line-height: 1; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-4deg); margin: .3em 0 1em; }
.sb-title--gross { font-size: clamp(26px, 3vw, 40px); }
.sb-title .swing { display: inline-block; font-family: var(--zier); font-size: 1.8em; letter-spacing: 0; text-transform: none; color: var(--gelb); transform: skewX(-6deg); line-height: .95; position: relative; z-index: 1; }
.weiss .swing, .sec--gelb .sb-title.weiss .swing { color: var(--weiss); }
.schwarz .swing { color: var(--schwarz); }
.sb-sub { font-family: var(--druck); text-transform: uppercase; letter-spacing: .2em; font-size: clamp(14px, 1.3vw, 18px); margin: 0 0 1.4em; }
.prose a { text-decoration: underline; }
.intro .prose strong, .sec--schwarz .prose strong { color: var(--gelb); }
.intro__link a { color: var(--gelb); text-decoration: none; }
.intro__link a:hover { text-decoration: underline; }

/* ---------- Buttons ---------- */
.btn, .job-btn, .btn-pinsel { display: inline-block; border: 0; cursor: pointer; text-decoration: none; font-family: var(--druck); text-transform: uppercase; letter-spacing: .2em; font-size: 13px; line-height: 1.2; padding: 9px 16px 13px; clip-path: var(--papier); transition: transform .15s; }
.btn, .sec--gelb .btn { background: var(--schwarz); color: var(--weiss); }
.sec--schwarz .btn, .btn--gelb { background: var(--gelb); color: var(--schwarz); }
.btn--schwarz, .sec--gelb .btn--schwarz { background: var(--schwarz); color: var(--weiss); }
.btn:hover, .job-btn:hover, .btn-pinsel:hover { transform: rotate(-2deg) scale(1.04); }
.btn-row { margin-top: 1.6em; }
.btn-row--links { text-align: left; }

/* ---------- Kopf ---------- */
.site-head { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; justify-content: space-between; align-items: flex-start; padding: 22px clamp(16px, 6vw, 90px); pointer-events: none; transition: padding .25s; }
.site-head::before { content: ''; position: absolute; inset: 0 0 -30px; background: url(../img/header-background.svg) bottom center / 100% 100% no-repeat; opacity: 0; transition: opacity .25s; z-index: -1; }
.is-scrolled .site-head { padding-block: 8px; }
.is-scrolled .site-head::before { opacity: 1; }
.site-logo, .menu-toggle { pointer-events: auto; }
.site-logo svg { width: clamp(46px, 4.5vw, 64px); height: auto; display: block; transition: width .25s; }
.is-scrolled .site-logo svg { width: 38px; }
.menu-toggle { background: none; border: 0; padding: 8px; cursor: pointer; }
.menu-toggle { color: var(--weiss); }
.menu-toggle svg { width: 40px; height: auto; display: block; }
.menu-toggle:hover { color: var(--gelb); }

/* Menü-Overlay */
.menu { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--schwarz); color: var(--weiss); }
.menu::backdrop { background: var(--schwarz); }
.menu__inner { min-height: 100%; background: var(--gelb) url(../img/hintergrund-hauptnavi-fullwidth.svg) left center / 100% 100% no-repeat; padding-left: clamp(40px, 12vw, 200px) !important; padding: clamp(80px, 12vh, 120px) clamp(20px, 6vw, 120px) 60px; display: flex; flex-direction: column; align-items: center; }
.menu__close { position: absolute; top: clamp(20px, 6vh, 110px); right: clamp(20px, 6vw, 160px); background: none; border: 0; cursor: pointer; font-family: var(--druck); text-transform: uppercase; letter-spacing: .2em; color: var(--weiss); display: flex; align-items: center; gap: 8px; font-size: 18px; }
.menu__close svg { width: 46px; height: auto; }
.menu__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 4vh, 50px) clamp(30px, 8vw, 160px); text-align: center; }
.menu__list a { font-family: var(--zier); font-size: clamp(38px, 4.4vw, 66px); line-height: 1.1; color: var(--weiss); text-decoration: none; display: inline-block; transition: transform .15s, color .15s; }
.menu__list a:hover, .menu__list .current-menu-item a { color: var(--schwarz); transform: rotate(-4deg); }
.menu__extra { margin: clamp(30px, 7vh, 80px) 0 10px; }
.menu__extra a { font-family: var(--druck); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--schwarz); font-size: 20px; }
.menu .social img { filter: brightness(0); }
@media (max-width: 700px) { .menu__list { grid-template-columns: 1fr; } }

/* ---------- Sektionen + gerissene Kanten ---------- */
.sec { position: relative; padding-block: var(--pad); }
.sec--schwarz { background: var(--schwarz); color: var(--weiss); }
.sec--gelb { background: var(--gelb); color: var(--schwarz); }
.sec--weiss { background: var(--weiss); color: var(--schwarz); }
.sec--gelb + .sec--schwarz::before, .sec--schwarz + .sec--gelb::before, .sec--gelb + .sec--gelb::before { content: none; }
.sec--gelb::before, .sec--gelb::after { content: ''; position: absolute; left: 0; right: 0; height: 1.7vw; min-height: 10px; pointer-events: none; z-index: 2; }
.sec--gelb::before { top: -1px; background: url(../img/kante-schwarz-unten.svg) top center / 100% 100% no-repeat; }
.sec--gelb::after { bottom: -1px; background: url(../img/kante-schwarz-oben.svg) bottom center / 100% 100% no-repeat; }
.sec--gelb:last-child::after { content: none; }

/* ---------- Bühne ---------- */
.hero { position: relative; min-height: clamp(380px, 43vw, 640px); display: grid; place-items: center; overflow: hidden; background: #111; padding: 110px 20px 70px; }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.7vw; min-height: 10px; background: url(../img/kante-schwarz-oben.svg) bottom center / 100% 100% no-repeat; z-index: 3; }
.hero__bg, .hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__bg img { object-fit: cover; opacity: 0; transition: opacity 1.4s; }
.hero__bg img.is-on { opacity: 1; }
.hero--flach { background: var(--gelb); min-height: clamp(300px, 26vw, 420px); }
.hero__inner { position: relative; z-index: 2; text-align: center; }
.hero__title { display: flex; flex-direction: column; align-items: center; margin: 0; }
.hero__title > span { display: inline-block; background: var(--schwarz); clip-path: var(--papier); transform: rotate(-4deg) skewX(-8deg); padding: .2em .55em .45em; margin-bottom: -.32em; }
.hero__l1, .hero__l3 { font-family: var(--druck); text-transform: uppercase; letter-spacing: .12em; font-size: clamp(22px, 3.1vw, 50px); color: var(--weiss); }
.hero__sw { font-family: var(--zier); font-size: clamp(46px, 7.4vw, 118px); line-height: 1; color: var(--gelb); padding-inline: .35em !important; position: relative; z-index: 1; }
.hero--b .hero__l1, .hero--b .hero__l3 { color: var(--gelb); }
.hero--b .hero__sw { color: var(--weiss); }
.hero--flach .hero__sw { color: var(--weiss); }
.hero--flach .hero__l1 { color: var(--gelb); }
.badge.hero__badge { position: absolute; right: clamp(16px, 9vw, 140px); bottom: clamp(-20px, 1vw, 30px); z-index: 4; width: clamp(100px, 10vw, 150px) !important; height: clamp(100px, 10vw, 150px) !important; }

/* ---------- Badge (Rundtext) ---------- */
.badge { position: relative; display: inline-block; width: 150px; height: 150px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--schwarz); text-decoration: none; vertical-align: middle; }
span.badge { cursor: default; }
.badge__bg, .badge__text { position: absolute; inset: 0; width: 100%; height: 100%; }
.badge__bg { inset: 10%; width: 80%; height: 80%; }
.badge__text { overflow: visible; }
.badge__text text { font-family: var(--druck); font-size: 13px; letter-spacing: .25em; text-transform: uppercase; fill: currentColor; }
.badge--flugzeug .badge__bg, .badge--newsletter .badge__bg, .badge--speisekarte .badge__bg, .badge--play .badge__bg { inset: 0; width: 100%; height: 100%; }
.badge--flugzeug .badge__text, .badge--newsletter .badge__text { inset: 9%; width: 82%; height: 82%; }
.badge--play { color: var(--weiss); }
.badge--play .badge__bg { inset: 26%; width: 48%; height: 48%; }
.badge--kreis { color: var(--weiss); width: 130px; height: 130px; }
.sec--gelb .badge--kreis { color: var(--weiss); }
.badge--klein { width: 110px; height: 110px; }
.badge--dreht { animation: sb-dreh 18s linear infinite; }
.badge--zoom { transition: transform .15s; }
.badge--zoom:hover { transform: scale(1.1) rotate(-5deg); }
.badge[aria-pressed="true"] .badge__bg { filter: invert(1) sepia(1) saturate(6) hue-rotate(5deg); }
@keyframes sb-dreh { to { transform: rotate(360deg); } }
.intro__badge { margin-top: 30px; }

/* ---------- Papierrahmen für Bilder ---------- */
.mask-frame { display: block; position: relative; background: var(--weiss); clip-path: var(--bild); padding: 2.4%; }
.mask-frame img { clip-path: var(--bild); width: 100%; height: auto; }

/* ---------- Slider (News, Impressionen) ---------- */
.slider { position: relative; margin-top: 30px; }
.slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 40px) / 3); gap: 40px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 0 10px; overscroll-behavior-x: contain; }
.slider__track::-webkit-scrollbar { display: none; }
.slider__item { scroll-snap-align: start; min-width: 0; }
.slider__btn { position: absolute; top: clamp(70px, 9vw, 130px); width: 46px; height: 54px; border: 0; padding: 0; cursor: pointer; background: url(../img/pfeil-links-2.svg) center / contain no-repeat; transition: transform .2s; }
.slider__prev { left: -64px; }
.slider__next { right: -64px; background-image: url(../img/pfeil-rechts-2.svg); }
.slider__prev:hover { transform: skewX(-10deg); }
.slider__next:hover { transform: skewX(10deg); }
@media (max-width: 1300px) { .slider__prev { left: -6px; } .slider__next { right: -6px; } .slider__btn { z-index: 2; } }
@media (max-width: 900px) { .slider__track { grid-auto-columns: calc((100% - 24px) / 2); gap: 24px; } }
@media (max-width: 600px) { .slider__track { grid-auto-columns: 100%; } .slider__btn { top: 32vw; } }

/* News-Karte */
.news-card { text-align: center; }
.news-card__img { margin-bottom: 16px; }
.news-card__img img { aspect-ratio: 1; object-fit: cover; }
.news-card time { display: block; font-weight: 300; font-size: 14px; margin-bottom: 4px; color: var(--gelb); }
.sec--gelb .news-card time { color: var(--weiss); }
.news-card h3 { font-family: var(--text); font-weight: 700; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.25; margin: 0 0 10px; }
.news-card h3 a { text-decoration: none; }
.news-card p { font-weight: 300; font-size: 14.5px; line-height: 1.45; margin-bottom: 8px; color: #ccc; }
.sec--gelb .news-card p { color: #333; }
.news-card__more { font-weight: 700; text-decoration: none; color: var(--gelb); }
.sec--gelb .news-card__more { color: var(--weiss); }
.news-card a:hover { text-decoration: underline; }

/* ---------- Teaser „Was uns so bärig macht“ ---------- */
.teaser__head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; }
.teaser__head .sb-title { margin: 0; }
.teaser__grafik { width: clamp(110px, 12vw, 180px); }

/* ---------- Bild-Teaser in Gelb ---------- */
.bildteaser { padding: 0; overflow: hidden; }
.bildteaser__link { position: relative; display: grid; place-items: center; min-height: clamp(420px, 50vw, 760px); text-decoration: none; color: var(--weiss); }
.bildteaser__link::before { content: ''; position: absolute; inset: 0; background: var(--gelb); mix-blend-mode: multiply; z-index: 1; }
.bildteaser__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(1.15); }
.bildteaser__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 60px 20px; }
.bildteaser__title { margin: 0 0 10px; }
.bildteaser__title { display: flex; flex-direction: column; align-items: center; }
.bildteaser__title br { display: none; }
.bildteaser__title .swing { color: var(--weiss); background: var(--schwarz); clip-path: var(--papier); padding: .05em .3em .3em; font-size: clamp(44px, 7.5vw, 120px); margin-bottom: -.2em; }
.bildteaser__zeilen { display: flex; flex-direction: column; align-items: center; transform: rotate(-4deg); }
.bildteaser__zeilen span { background: var(--schwarz); color: var(--gelb); font-family: var(--druck); text-transform: uppercase; letter-spacing: .12em; font-size: clamp(18px, 2.2vw, 34px); padding: .2em .5em .4em; clip-path: var(--papier); margin-bottom: -.2em; transform: skewX(-8deg); }
.bildteaser__pfeil { width: 84px; margin-top: 34px; color: var(--schwarz); transition: transform .2s; }
.bildteaser__pfeil svg { width: 100%; display: block; }
.bildteaser__link:hover .bildteaser__pfeil { transform: translateX(10px); }

/* ---------- Speisekarte ---------- */
.sk-filter { text-align: center; margin: 0 auto 60px; max-width: 800px; }
.sk-filter p { font-family: var(--druck); text-transform: uppercase; letter-spacing: .1em; color: var(--gelb); font-size: 13px; margin-bottom: 8px; }
.sk-filter ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.sk-filter a, .sk-filter button { font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 2px 0; cursor: pointer; }
.sk-filter a::before { content: ''; width: 11px; height: 11px; background: #ddd; border: 1px solid #999; }
.sk-filter a.is-on::before { background: var(--gelb); border-color: var(--gelb); }
.sk-filter button { color: var(--gelb); text-decoration: underline; }
.sk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; align-items: start; }
.sk-col { display: flex; flex-direction: column; gap: 60px; }
.sk-karte { scroll-margin-top: 90px; }
.sk-karte::after { content: ''; display: block; height: 9px; margin-top: 36px; background: url(../img/trennlinie-kurz.svg) left center / 100% 100% no-repeat; }
.sk-karte h3 { font-family: var(--druck); text-transform: uppercase; letter-spacing: .22em; font-size: clamp(20px, 1.7vw, 26px); margin-bottom: 22px; }
.sk-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.speise__btn { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; width: 100%; padding: 0; background: none; border: 0; text-align: left; cursor: pointer; }
.speise__img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; transition: transform .2s ease-out, border-radius .2s; position: relative; z-index: 3; background: #222; }
.speise__img--leer { display: block; background: #fff url(../img/baer-logo.svg) center / 40% no-repeat; filter: invert(1); }
@media (hover: hover) and (min-width: 1100px) { .speise__btn:hover .speise__img { transform: scale(2) rotate(-5deg); border-radius: 0; } }
.speise__txt { display: flex; flex-direction: column; font-size: 14px; line-height: 1.4; padding-top: 3px; }
.speise__name { font-weight: 700; }
.speise__desc { font-weight: 300; color: #ddd; }
.speise__preis { font-weight: 700; color: var(--gelb); }
.speise__btn:hover .speise__name { text-decoration: underline; }
.sk-hinweis { font-weight: 300; font-size: 12.5px; color: #aaa; margin: 22px 0 0; }
.sk-karte--gelb { background: var(--gelb); color: var(--schwarz); padding: 22px 22px 26px; clip-path: polygon(0 0, 100% .5%, 99.5% 50%, 100% 100%, 0 99.5%, .5% 50%); }
.sk-karte--gelb::after { display: none; }
.sk-karte--gelb .speise__desc { color: #222; }
.sk-karte--gelb .speise__preis { color: var(--schwarz); }
.sk-box { font-size: 12.5px; margin-top: 22px; }
.sk-badge { text-align: center; }
.sk-bild { transform: rotate(2deg); }
.is-filtered .sk-badge, .is-filtered .sk-bild { display: none; }
.sk-karte[hidden] { display: none; }
@media (max-width: 1000px) { .sk-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 999px) {
	.sk-grid { display: flex; flex-direction: column; gap: 50px; max-width: 520px; margin-inline: auto; }
	.sk-col { display: contents; }
	.sk-bild { order: 0; }
}

/* ---------- Text + Bild ---------- */
.text-bild__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(30px, 6vw, 90px); align-items: center; max-width: 1000px; }
.text-bild--rechts .text-bild__media { order: 2; }
.text-bild__media { position: relative; }
.text-bild__media .mask-frame { transform: rotate(-1.5deg); }
.text-bild--rechts .text-bild__media .mask-frame { transform: rotate(1.5deg); }
.text-bild__badge { position: absolute; top: -50px; left: 30%; color: var(--gelb) !important; }
.text-bild__text .sb-title { margin-top: 0; }
.text-bild__text .prose { font-size: .95em; }
.text-bild__text .prose a { color: var(--gelb); }
.hinweis-box { background: var(--gelb); color: var(--schwarz); padding: 14px 18px; margin: 0 0 1.4em; font-size: .92em; }
.hinweis-box strong { color: var(--schwarz) !important; }
@media (max-width: 800px) { .text-bild__grid { grid-template-columns: 1fr; } .text-bild--rechts .text-bild__media { order: 0; } }

/* ---------- Impressionen ---------- */
.impression figcaption { text-align: center; color: var(--weiss); font-size: 14px; line-height: 1.3; margin-top: 10px; }
.impression img { aspect-ratio: 1; object-fit: cover; }

/* ---------- Eigenschaften + Collage ---------- */
.eigenschaften__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.eigenschaften__liste { margin: 0; }
.eigenschaften__liste dt { font-family: var(--druck); text-transform: uppercase; letter-spacing: .18em; color: var(--gelb); font-size: clamp(15px, 1.2vw, 18px); margin-top: 1.4em; }
.eigenschaften__liste dd { margin: .3em 0 0; font-size: .95em; }
.collage { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.collage__img:nth-child(1) { transform: rotate(-2deg) translateX(10%); }
.collage__img:nth-child(2) { transform: rotate(2deg) translateY(30%); grid-column: 1 / 3; width: 80%; justify-self: end; z-index: 1; }
.collage__img:nth-child(3) { transform: rotate(-3deg) translateY(10%); width: 75%; z-index: 2; }
.collage__img:nth-child(4) { transform: rotate(1deg) translateY(25%); }
@media (max-width: 800px) { .eigenschaften__grid { grid-template-columns: 1fr; } .collage { margin-bottom: 40px; } }

/* ---------- News-Übersicht ---------- */
.news-grid__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px 40px; margin-top: 30px; }
@media (max-width: 900px) { .news-grid__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .news-grid__list { grid-template-columns: 1fr; } }

/* ---------- Jobs ---------- */
.jobs .sb-title { margin-bottom: 1.4em; }
.jobs__list { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 320px)); justify-content: center; gap: 22px 18px; }
.job-btn { width: 100%; height: 100%; background: var(--weiss); color: var(--schwarz); font-size: 14px; padding: 14px 18px 18px 52px; position: relative; text-align: center; }
.job-btn::before { content: '➜'; position: absolute; left: 14px; top: 50%; transform: translateY(-58%); width: 24px; height: 24px; border-radius: 50%; background: var(--gelb); color: var(--weiss); font: 700 13px/24px var(--text); letter-spacing: 0; }

/* ---------- Benefits (gelb) ---------- */
.benefits__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; max-width: 1000px; }
.benefits__media { position: relative; min-height: clamp(320px, 34vw, 480px); }
.benefits__baer { position: absolute; right: 0; top: 0; width: 46%; z-index: 2; }
.benefits__img--1 { position: absolute; left: 10%; top: 20%; width: 62%; transform: rotate(-1deg); }
.benefits__img--2 { position: absolute; left: 0; bottom: 0; width: 36%; transform: rotate(1.5deg); z-index: 3; }
.benefits__badge { position: absolute; left: -2%; top: 4%; z-index: 3; }
.benefits__text .sb-title { color: var(--schwarz); }
.benefits__liste { margin: 0 0 1.6em; padding-left: 1.2em; }
.benefits__frage { font-weight: 300; }
@media (max-width: 800px) { .benefits__grid { grid-template-columns: 1fr; } }

/* ---------- Öffnungszeiten ---------- */
.zeiten { margin: 0; }
.zeiten dt { color: var(--gelb); margin-top: 1em; }
.zeiten dd { margin: 0; }
.zeiten__takeaway { margin-top: 1.4em; font-weight: 300; }

/* ---------- Footer ---------- */
.site-foot { position: relative; background: var(--weiss); color: var(--schwarz); padding: clamp(50px, 6vw, 80px) 0 60px; }
.site-foot::before { content: ''; position: absolute; left: 0; right: 0; top: calc(-1.4vw + 1px); height: 1.45vw; min-height: 8px; background: url(../img/kante-weiss-oben.svg) bottom center / 100% 100% no-repeat; }
.site-foot__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 60px; max-width: 1060px; }
.foot-title { font-family: var(--druck); text-transform: uppercase; letter-spacing: .28em; font-size: clamp(22px, 2vw, 28px); margin-bottom: 1.2em; }
.site-foot address { font-style: normal; font-weight: 300; font-size: 15px; line-height: 1.6; margin-bottom: 1.4em; }
.site-foot address strong { font-weight: 700; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.foot-zeiten { font-weight: 300; font-size: 14px; line-height: 1.6; }
.foot-zeiten strong { font-weight: 700; }
.foot-news { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: -12px; }
.foot-news__baer { width: 130px; margin-right: 18%; color: var(--gelb); display: block; }
.foot-news__baer svg { width: 100%; display: block; }
.btn-pinsel { display: block; width: 100%; background: url(../img/maske-buttonshape-gelb.svg) center / 100% 100% no-repeat; clip-path: none; color: var(--schwarz); font-size: 13px; padding: 14px 20px 16px; text-align: center; }
.foot-legal { font-weight: 700; font-size: 14px; margin: 2.2em 0 1.4em; }
.social { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; align-items: center; }
.social img { width: 28px; height: 28px; transition: transform .15s; }
.social a:hover img { transform: rotate(-8deg) scale(1.1); }
@media (max-width: 700px) { .site-foot__grid { grid-template-columns: 1fr; } }

/* ---------- Dialoge (Lightbox, Jobs, Newsletter) ---------- */
dialog { color: inherit; }
.lightbox { padding: 0; border: 0; background: transparent; max-width: min(1160px, 94vw); width: 100%; max-height: 94vh; overflow: visible; }
.lightbox::backdrop { background: rgba(0, 0, 0, .78); }
.lightbox[open] { animation: sb-zoom .22s ease-out; }
@keyframes sb-zoom { from { opacity: 0; transform: scale(.94); } }
.lightbox__box { position: relative; background: var(--schwarz); color: var(--weiss); clip-path: var(--bild); padding: clamp(40px, 5vw, 64px) clamp(20px, 5vw, 64px) clamp(36px, 4vw, 56px); max-height: 94vh; overflow-y: auto; text-align: center; overscroll-behavior: contain; }
.lightbox__close { position: absolute; top: 20px; right: 24px; width: 48px; height: 48px; border: 0; background: none; cursor: pointer; z-index: 2; color: var(--weiss); }
.lightbox__close::before { content: ''; position: absolute; inset: 0; background: currentColor; -webkit-mask: url(../img/messer-und-gabel.svg) center / contain no-repeat; mask: url(../img/messer-und-gabel.svg) center / contain no-repeat; }
.lightbox__close:hover { color: var(--gelb); }
.lightbox__img { max-width: 1000px; margin: 0 auto 26px; }
.lightbox__img img { width: 100%; aspect-ratio: 3 / 2; max-height: 62vh; object-fit: cover; background: #111; }
.lightbox__title { font-family: var(--druck); text-transform: uppercase; letter-spacing: .22em; font-size: clamp(26px, 2.6vw, 40px); margin: 0 0 .4em; }
.lightbox__desc { font-weight: 300; color: #ddd; font-size: 17px; margin: 0; }
.lightbox__preis { color: var(--gelb); font-size: 19px; margin: 6px 0 0; }
.lightbox--bild .lightbox__box img { max-height: 76vh; width: auto; margin: 0 auto; }
.lightbox__caption { margin: 14px 0 0; }
.lightbox--newsletter { max-width: 560px; }
.lightbox--newsletter .lightbox__box { background: var(--gelb); color: var(--schwarz); }
.lightbox--newsletter .lightbox__close { color: var(--schwarz); }
.lightbox--job .lightbox__box { text-align: left; }
.job__title { font-family: var(--druck); text-transform: uppercase; letter-spacing: .16em; font-size: clamp(22px, 2.2vw, 32px); color: var(--gelb); padding-right: 50px; transform: rotate(-2deg); }
.job__kicker { font-family: var(--zier); font-size: clamp(40px, 4vw, 60px); line-height: 1; color: var(--gelb); margin-bottom: .3em; }
.job__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.job__cols h3 { font-family: var(--druck); text-transform: uppercase; letter-spacing: .14em; font-size: 16px; color: var(--gelb); margin: 1.4em 0 .5em; }
.job__cols ul { margin: 0; padding-left: 1.2em; }
.job__meta { font-weight: 300; }
@media (max-width: 800px) { .job__cols { grid-template-columns: 1fr; } }
body:has(dialog[open]) { overflow: hidden; }

/* ---------- Formulare ---------- */
.form { text-align: left; margin-top: 30px; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.form__feld { margin: 0 0 16px; }
.form label, .form legend { display: block; font-family: var(--druck); text-transform: uppercase; letter-spacing: .2em; font-size: 12px; margin-bottom: 5px; }
.form input:not([type=checkbox]):not([type=radio]), .form textarea, .form select { width: 100%; border: 0; border-radius: 0; background: var(--weiss); color: var(--schwarz); font: 700 15px/1.4 var(--text); padding: 9px 10px; }
.form input[type=file] { background: transparent !important; padding: 0 !important; color: inherit !important; }
.lightbox--job .form input:not([type=checkbox]):not([type=radio]), .lightbox--job .form textarea, .lightbox--job .form select { background: #222; color: var(--weiss); }
.form textarea { min-height: 110px; resize: vertical; }
.form__check label, .form__anrede label { font-family: var(--text); text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 300; display: inline-flex; gap: 8px; align-items: flex-start; }
.form__anrede { border: 0; padding: 0; margin: 0 0 14px; display: flex; gap: 18px; flex-wrap: wrap; }
.form__anrede legend { width: 100%; }
.form__klein { font-size: 12px; font-weight: 300; }
.form__hp { position: absolute; left: -9999px; }
.form__submit .btn { width: 100%; font-size: 15px; padding-block: 12px 16px; }
@media (max-width: 600px) { .form__grid { grid-template-columns: 1fr; } }

/* ---------- Beiträge + Rechtstexte (Core-Blöcke, schlank nachgebaut) ---------- */
.post-content { font-size: .98em; }
.post-content h2, .wrap--text h2 { font-family: var(--druck); text-transform: uppercase; letter-spacing: .16em; color: var(--gelb); font-size: clamp(20px, 2vw, 26px); transform: rotate(-3deg); margin: 1.8em 0 .8em; }
.wrap--text h3 { font-family: var(--druck); text-transform: uppercase; letter-spacing: .12em; font-size: 17px; margin: 1.6em 0 .6em; }
.prose figure { margin: 1.6em 0; }
.prose img { height: auto; }
.prose a { color: var(--gelb); }
.wp-block-gallery, .blocks-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; list-style: none; padding: 0; }
.wp-block-gallery figure, .blocks-gallery-item { margin: 0; }
.wp-block-gallery img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.wp-block-columns { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.wp-block-column { flex: 1 1 0; min-width: 160px; }
.wp-block-image img { max-width: 100%; }
.wp-block-video video, .wp-block-audio audio { width: 100%; }
.yt { aspect-ratio: 16 / 9; background: #1b1b1b; display: grid; place-items: center; margin: 1.4em 0; }
.yt iframe { width: 100%; height: 100%; border: 0; }
.yt__btn { background: var(--gelb); color: var(--schwarz); border: 0; padding: 14px 22px 18px; font-family: var(--druck); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; clip-path: var(--papier); max-width: 90%; }
.yt__btn small { display: block; font-family: var(--text); text-transform: none; letter-spacing: 0; font-weight: 300; margin-top: 6px; }
.speise-detail .mask-frame { margin-bottom: 24px; }

/* Editor-Hinweis */
.sb-editor-note { padding: 16px; background: #f4f4f4; color: #555; font: 13px/1.4 system-ui, sans-serif; border: 1px dashed #bbb; }
/* Galerien aus der Live-Seite (HappyFiles) als schlankes Raster */
.sb-galerie ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.sb-galerie li, .sb-galerie a { display: block; }
.sb-galerie img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: opacity .2s; }
.sb-galerie a:hover img { opacity: .8; }
/* lange deutsche Wörter (Datenverarbeitungszwecke …) dürfen umbrechen */
.prose, .sb-title, .hero__title { overflow-wrap: break-word; hyphens: auto; }
.prose h2, .prose h3 { overflow-wrap: anywhere; }
@media (max-width: 500px) { .post-content h2, .wrap--text h2 { letter-spacing: .08em; } }

/* ==========================================================================
   Größen wie live (per getComputedStyle gemessen, 13.10.2026)
   Live rechnet mit rem: ≥1025 px = 22 px, ≤1024 px = 20,064 px (Astra/Elementor).
   Papercute: KEIN uppercase und KEINE Sperrung – die Schrift ist von sich aus so gesetzt.
   ========================================================================== */
:root { --rem: 22px; --pad: 80px; }
@media (max-width: 1024px) { :root { --rem: 20.064px; } }
@media (max-width: 767px) { :root { --pad: 40px; } }
body { font-size: var(--rem); line-height: 1.4; }

/* Überschriften */
.sb-title, .sb-sub, .sk-karte h3, .foot-title, .eigenschaften__liste dt, .lightbox__title, .job__title, .job__cols h3,
.post-content h2, .wrap--text h2, .wrap--text h3, .btn, .job-btn, .btn-pinsel, .form label, .form legend, .menu__close,
.menu__extra a, .sk-filter p, .badge__text text, .bildteaser__zeilen span, .hero__l1, .hero__l3 { text-transform: none; letter-spacing: normal; }
.sb-title { font-size: 40px; line-height: 1.3; }
.sb-title--gross { font-size: 50px; line-height: 1; }
.sb-title .swing { font-size: 1.8em; line-height: .556; }
.sb-sub { font-size: 26px; line-height: 1.3; }
.sk-karte h3 { font-size: 1.5rem; font-size: calc(1.5 * var(--rem)); line-height: 1.3; font-weight: 400; }
.foot-title { font-size: 40px; line-height: 1.3; }
.eigenschaften__liste dt { font-size: 26px; line-height: 1.3; }
.post-content h2, .wrap--text h2 { font-size: 40px; line-height: 1; }
.wrap--text h3 { font-size: 26px; line-height: 1.3; }
@media (max-width: 1024px) {
	.sb-title, .foot-title, .post-content h2, .wrap--text h2 { font-size: 25px; }
	.sb-title--gross { font-size: 30px; }
	.sb-title .swing { line-height: 1.1; }
	.sb-sub, .eigenschaften__liste dt, .wrap--text h3 { font-size: 20px; }
}

/* Bühne: 70vh (mobil 80vh), Zeilen 3rem / 5rem, unter 768 px 1.4rem / 2rem, Balken wie live */
.hero { min-height: 70vh; padding: 100px 20px 60px; }
.hero--flach { min-height: 0; padding: 130px 20px 70px; }
.hero__title > span { padding: 20px 20px 30px; margin-bottom: -30px; transform: rotate(-4deg) skewX(-10deg); }
.hero__l1, .hero__l3 { font-size: calc(3 * var(--rem)); line-height: 1; letter-spacing: -5px; }
.hero__sw { font-size: calc(5 * var(--rem)); line-height: 1; padding-inline: 20px !important; }
.hero--flach .hero__sw { font-family: var(--druck); font-size: 50px; letter-spacing: normal; }
@media (max-width: 767px) {
	.hero { min-height: 80vh; }
	.hero--flach { min-height: 0; }
	.hero__l1, .hero__l3 { font-size: calc(1.4 * var(--rem)); letter-spacing: -2px; }
	.hero__sw { font-size: calc(2 * var(--rem)); }
	.hero--flach .hero__sw { font-size: 30px; }
	.hero__title > span { padding: 12px 14px 20px; margin-bottom: -18px; }
}

/* Fließtext-Bausteine */
.intro__link a, .intro .prose strong { font-weight: 700; }
.wrap--schmal { max-width: 980px; }
.btn, .job-btn { font-size: var(--rem); line-height: 1; font-weight: 700; padding: .45em .8em .6em; }
.btn-pinsel { font-size: var(--rem); }
.form label, .form legend { font-size: var(--rem); line-height: 1.4; }
.form__submit .btn { font-size: calc(1.3 * var(--rem)); }
.form__check label, .form__anrede label { font-size: calc(.8 * var(--rem)); }
.form input:not([type=checkbox]):not([type=radio]), .form textarea, .form select { font-size: var(--rem); }
.impression figcaption { font-size: var(--rem); line-height: 1; font-weight: 700; margin-top: 14px; }

/* Speisekarte: Spalten 3 × 307 px auf 960 px, Rundbild 77 px (mobil 140 px), alles 1rem */
.speisekarte .wrap { max-width: 1000px; }
.sk-grid { gap: 20px; }
.sk-col { gap: 60px; }
.sk-filter { max-width: 960px; }
.sk-filter p { font-family: var(--text); font-weight: 300; font-size: var(--rem); line-height: 1.4; text-transform: uppercase; color: var(--gelb); }
.sk-filter a, .sk-filter button { font-size: var(--rem); line-height: 1.4; font-weight: 700; }
.sk-filter a::before { width: 14px; height: 14px; }
.sk-liste { gap: 20px; }
.speise__btn { grid-template-columns: 77px 1fr; gap: 20px; align-items: center; }
.speise__img { width: 77px; height: 77px; }
.speise__txt { font-size: var(--rem); line-height: 1.4; padding-top: 0; }
.sk-hinweis { font-size: calc(.8 * var(--rem)); line-height: 1.75; font-weight: 700; color: #5E656F; }
.sk-box { font-size: calc(.8 * var(--rem)); line-height: 1.4; font-weight: 700; }
.sk-karte--gelb .speise__btn { grid-template-columns: 71px 1fr; }
.sk-karte--gelb .speise__img { width: 71px; height: 71px; }
@media (max-width: 999px) {
	.sk-grid { max-width: 350px; }
	.speise__btn { grid-template-columns: 140px 1fr; }
	.speise__img, .sk-karte--gelb .speise__img { width: 140px; height: 140px; }
	.sk-karte--gelb .speise__btn { grid-template-columns: 140px 1fr; }
}
@media (hover: hover) and (min-width: 1100px) { .speise__btn:hover .speise__img { transform: scale(2) rotate(-5deg); } }

/* News: Karten 340 px (Übersicht) bzw. 280 px (Slider), Titel 26/33.8 */
.news-card h3 { font-size: calc(1.18 * var(--rem)); line-height: 1.3; }
.news-card time, .news-card p { font-size: var(--rem); line-height: 1.4; font-weight: 300; }
.news-card__more { font-size: var(--rem); }
.news-grid .wrap { max-width: 1180px; }
.news-grid__list { gap: 60px; }
.news-slider .wrap, .impressionen .wrap { max-width: 1000px; }
.slider__track { grid-auto-columns: calc((100% - 120px) / 3); gap: 60px; }
@media (max-width: 1024px) { .news-card h3 { font-size: 20px; } }
@media (max-width: 900px) { .slider__track { grid-auto-columns: calc((100% - 24px) / 2); gap: 24px; } }
@media (max-width: 600px) { .slider__track { grid-auto-columns: 100%; } }

/* Text + Bild: Bild 533 px breit bei 1440 */
.text-bild__grid { max-width: 980px; grid-template-columns: 533fr 407fr; gap: 0 60px; }
.text-bild--rechts .text-bild__grid { grid-template-columns: 407fr 533fr; }
.text-bild__text .sb-title { font-size: 40px; line-height: 1; }
.text-bild__text .sb-title .swing { font-size: 72px; line-height: .556; }
@media (max-width: 1024px) { .text-bild__text .sb-title { font-size: 25px; } .text-bild__text .sb-title .swing { font-size: 45px; line-height: 1.1; } }
@media (max-width: 800px) { .text-bild__grid, .text-bild--rechts .text-bild__grid { grid-template-columns: 1fr; } }

/* Über uns: Collage wie live (187er-Quadrate und 440×300) */
.eigenschaften__grid { grid-template-columns: 1fr 440px; max-width: 1180px; }
.collage { display: flex; flex-direction: column; }
.collage__img { transform: none !important; grid-column: auto !important; justify-self: auto; }
.collage__img:nth-child(odd) { width: 187px; }
.collage__img:nth-child(odd) img { aspect-ratio: 1; object-fit: cover; }
.collage__img:nth-child(even) { width: 440px; max-width: 100%; margin: -10px 0 -30px auto; position: relative; z-index: 1; }
.collage__img:nth-child(even) img { aspect-ratio: 440 / 300; object-fit: cover; }
@media (max-width: 800px) { .eigenschaften__grid { grid-template-columns: 1fr; } }

/* Footer wie live */
.site-foot address { font-size: var(--rem); line-height: 1.4; font-weight: 300; }
.site-foot address strong { font-weight: 700; }
.foot-zeiten { font-size: calc(.9 * var(--rem)); line-height: 1.4; }
.foot-legal { font-size: calc(.9 * var(--rem)); letter-spacing: 1px; }
.social img { width: 30px; height: 30px; }

/* Kontakt: Standort-Titel 40 / Zierwort 72 */
.oeffnungszeiten .zeiten { font-size: var(--rem); }
/* Restabgleich nach Messung */
.sb-sub { font-weight: 400; }
.sk-filter p { line-height: 1; }
.sk-box { line-height: 1.75; }
.news-slider .sb-title, .impressionen .sb-title, .feedback .sb-title { font-size: 40px; line-height: 1.3; }
.teaser .sb-title, .eigenschaften .sb-title { font-size: calc(2 * var(--rem)); line-height: 1; }
.bildteaser__title .swing { font-size: calc(5 * var(--rem)); line-height: 1; }
.bildteaser__zeilen span { font-size: 26px; line-height: 1.3; font-weight: 400; }
.foot-zeiten, .foot-legal { line-height: calc(1.4 * var(--rem)); }
@media (max-width: 1024px) {
	.news-slider .sb-title, .impressionen .sb-title, .feedback .sb-title { font-size: 25px; }
	.site-foot address { font-size: calc(.9 * var(--rem)); line-height: calc(1.4 * var(--rem)); }
}
@media (max-width: 767px) {
	.hero__l1, .hero__l3 { letter-spacing: -5px; }
	.bildteaser__title .swing { font-size: calc(2 * var(--rem)); }
	.bildteaser__zeilen span { font-size: calc(1.4 * var(--rem)); letter-spacing: -5px; }
}
.text-bild__text .prose, .hinweis-box { font-size: 1em; }
.intro h2.sb-title--gross { font-size: calc(2 * var(--rem)); line-height: 1; }

/* ---------- Menü-Overlay wie live (gemessen 1440 / 390) ---------- */
.menu__inner { min-height: 100vh; margin: 0; padding: 40px 20px !important; clip-path: none;
	background: var(--gelb) url(../img/hintergrund-hauptnavi-fullwidth.svg) left center / 100% 100% no-repeat;
	display: flex; flex-direction: column; align-items: center; justify-content: center; }
.menu__nav { width: 100%; max-width: 1160px; }
.menu__list { grid-template-columns: 1fr 1fr; gap: 20px; }
.menu__list a { position: relative; display: flex; align-items: center; justify-content: center; height: 120px;
	font-family: var(--zier); font-size: calc(2 * var(--rem)); line-height: 1; color: var(--weiss); transform: none !important; }
.menu__list .current-menu-item a, .menu__list a:hover { color: var(--weiss); }
/* Krallen-Hover: schwarzes Kratzer-Bild legt sich über den Punkt, Text bleibt weiß (live: .claw a::before) */
.menu__list a::before { content: ''; position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none;
	background: url(../img/krallen-schwarz.svg) center / 150px auto no-repeat; }
.menu__list a:hover::before, .menu__list a:focus-visible::before { opacity: 1; }
.menu__close { position: static; align-self: flex-end; margin: 0 calc((100% - min(1160px, 100%)) / 2 + 0px) 40px 0; padding: 10px 40px;
	font-family: var(--druck); font-size: var(--rem); color: var(--weiss); }
.menu__close svg { width: calc(2 * var(--rem)); height: auto; }
.menu__extra { margin: 60px 0 12px; }
.menu__extra a { font-size: calc(1.2 * var(--rem)); letter-spacing: normal; }
.menu .social { gap: 15px; justify-content: center; }
.menu .social img { width: 38px; height: 30px; object-fit: contain; }
@media (max-width: 767px) {
	.menu__inner { background: var(--gelb); justify-content: flex-start; align-items: stretch; padding: 229px 20px 40px !important; }
	.menu__close { align-self: flex-end; margin: 0 0 44px; padding: 0; color: var(--schwarz); }
	.menu__zurueck { display: none; }
	.menu__close svg { width: 40px; }
	.menu__list { grid-template-columns: 1fr; gap: 0; text-align: left; }
	.menu__list a { height: 40px; justify-content: flex-start; padding: 10px 20px; font-family: var(--druck); font-size: 20px; color: var(--schwarz); }
	.menu__list .current-menu-item a { background: var(--schwarz); color: var(--weiss); }
	.menu__list a::before { display: none; }
	.menu__extra { margin: 54px 0 34px; padding-left: 20px; }
	.menu__extra a { font-size: var(--rem); }
	.menu .social { justify-content: flex-start; padding-left: 20px; flex-direction: row-reverse; justify-content: flex-end; }
}
.menu__close { align-self: center; width: min(1160px, 100%); justify-content: flex-end; margin: 0 0 30px; padding: 10px 0; }
@media (max-width: 767px) { .menu__close { width: auto; align-self: flex-end; margin: 0 0 44px; padding: 0; } }
@media (max-width: 767px) { .menu__inner { padding-top: 202px !important; } .menu__extra { margin: 30px 0 34px; } }

/* ---------- Kreistexte wie live: Papercute 19 (ViewBox 150), Rand 12 px ---------- */
.badge { width: 216px; height: 216px; color: var(--schwarz); }
.badge__bg, .badge--flugzeug .badge__bg, .badge--newsletter .badge__bg, .badge--speisekarte .badge__bg { inset: 0; width: 100%; height: 100%; object-fit: contain; }
.badge__text, .badge--flugzeug .badge__text, .badge--newsletter .badge__text { inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); }
.badge__text text { font-family: var(--druck); font-size: 19px; font-weight: 700; letter-spacing: normal; text-transform: none; }
.badge--speisekarte { width: 164px; height: 164px; }
.badge--play { color: var(--weiss); }
.badge--play .badge__bg { inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); }
.badge--kreis, .sec--gelb .badge--kreis { width: 221px; height: 221px; color: var(--gelb); }
.benefits__badge.badge--kreis { color: var(--weiss); }
.badge.hero__badge { width: 216px !important; height: 216px !important; bottom: -40px; }
.badge--dreht { animation-duration: 15s; }   /* live .circlebutton: 15 s Dauerdrehung */
.text-bild__badge { top: -70px; left: 20%; }
@media (max-width: 767px) { .badge.hero__badge { width: 170px !important; height: 170px !important; } }
.speise__bild { position: relative; display: block; }
.speise__icon { position: absolute; top: 0; right: 0; width: 30px; height: 30px; z-index: 4; pointer-events: none; }
@media (max-width: 999px) { .speise__icon { width: 40px; height: 40px; } }

/* ---------- Newsletter-Popup wie live (Brevo-Optik, gemessen 1440) ---------- */
.lightbox--newsletter { max-width: 500px; }
.lightbox--newsletter .nl { background: var(--gelb); color: var(--schwarz); padding: 60px 0 30px; text-align: center; clip-path: var(--bild); max-height: 94vh; }
.lightbox--newsletter .lightbox__close { top: 6px; right: 6px; width: 44px; height: 44px; color: var(--schwarz); }
.nl__kopf { background: var(--schwarz); clip-path: polygon(0 2%, 20% 0, 45% 3%, 70% 0, 100% 2%, 100% 94%, 80% 100%, 55% 96%, 30% 100%, 0 95%); padding: 66px 20px 70px; margin: 0 0 24px; }
.nl__kopf h2 { font-family: var(--druck); font-size: 40px; line-height: 1.3; font-weight: 400; color: var(--weiss); margin: 0; }
.form--newsletter { max-width: 360px; margin: 0 auto; text-align: center; }
.form--newsletter .form__feld { margin: 0 0 7px; }
.form--newsletter .form__feld label { position: absolute; left: -9999px; }
.form--newsletter input[type=email], .form--newsletter input[type=text] { background: #fafafa !important; border: 1px solid #ddd !important; color: #666 !important; padding: 16.5px !important; font: 700 var(--rem)/1.4 var(--text) !important; }
.form--newsletter ::placeholder { color: #757575; opacity: 1; }
.form--newsletter .form__check { margin: 10px 0 0; text-align: center; }
.form--newsletter .form__check label { display: inline; font-family: var(--text); font-size: calc(.7 * var(--rem)); line-height: 2; font-weight: 700; color: var(--schwarz); }
.form--newsletter .form__check a { color: #5E656F; text-decoration: none; }
.form--newsletter .form__check input { width: 13px; height: 13px; margin: 0 6px 0 0; vertical-align: -1px; }
.form--newsletter .form__submit { margin: 24px 0 26px; }
.form--newsletter .form__submit .btn { width: auto; font: 700 var(--rem)/1 var(--text); padding: 10px 20px 20px; background: var(--schwarz); color: var(--weiss); }
.form--newsletter .form__klein { font-size: calc(.7 * var(--rem)); line-height: 2; font-weight: 700; color: var(--schwarz); padding: 0 40px; }
@media (max-width: 767px) { .nl__kopf h2 { font-size: 25px; } .lightbox--newsletter .nl { padding-top: 50px; } }
.form--newsletter .form__klein { padding: 0 10px; }
.sk-karte--gelb { padding: 22px 10px 26px; }
.sk-karte--gelb .speise__btn { align-items: start; }
/* Kopf wie live: Logo 80 px bei x = 140, Menü-Knopf 44 px */
@media (min-width: 1025px) {
	.site-head { padding: 20px 140px; }
	.site-logo svg { width: 80px; }
	.menu-toggle svg { width: 44px; }
	.is-scrolled .site-logo svg { width: 40px; }
}

/* ==========================================================================
   Animationen wie live (Etappe C) – Werte aus Elementor-Einstellungen + Messung
   ========================================================================== */
/* Bühne: Ken Burns (Elementor: aktives Bild 20 s linear auf 1.3 bzw. von 1.3 auf 1) + 1 s Überblendung */
.hero__bg img { transition: opacity 1s, transform 10s linear; }
.hero--kb-in .hero__bg img.is-kb { transform: scale(1.3); transition: opacity 1s, transform 20s linear; }
.hero--kb-out .hero__bg img { transform: scale(1.3); }
.hero--kb-out .hero__bg img.is-kb { transform: scale(1); transition: opacity 1s, transform 20s linear; }
/* Bühnentitel: Kippen zur Maus (Variable aus site.js) */
.hero__title { transform: var(--fx, none); transform-style: preserve-3d; will-change: transform; }
/* Einstiege (animate.css-Werte wie Elementor) */
.js [data-anim]:not(.is-in) { opacity: 0; }
.fx-ruhig [data-anim] { opacity: 1 !important; }
[data-anim="jello"].is-in { animation: sb-jello .75s both; transform-origin: center; }
[data-anim="rotateIn"].is-in { animation: sb-rotateIn 1.25s both; transform-origin: center; }
[data-anim="zoomInDown"].is-in { animation: sb-zoomInDown 1.25s both; }
@keyframes sb-jello { from, 11.1%, to { transform: none; } 22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
	44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { transform: skewX(-.78125deg) skewY(-.78125deg); }
	77.7% { transform: skewX(.390625deg) skewY(.390625deg); } 88.8% { transform: skewX(-.1953125deg) skewY(-.1953125deg); } }
@keyframes sb-rotateIn { from { transform: rotate(-200deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sb-zoomInDown { from { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); animation-timing-function: cubic-bezier(.55, .055, .675, .19); }
	60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(.175, .885, .32, 1); } to { transform: none; } }
/* Scroll-Drehung: Überschriften behalten ihre −4° Grundneigung */
.sb-title[data-rotz] { transform: rotate(calc(-4deg + var(--rz, 0deg))); }
.badge__dreh { position: absolute; inset: 0; display: block; transform: rotate(var(--rz, 0deg)); }
/* Maus-Effekte an Bildern (Elementor mouseTrack + tilt) */
[data-track], [data-tilt]:not(.hero__title) { transform: var(--fx, none); will-change: transform; }
.collage__img[data-track] { transform: var(--fx, none) !important; }
img.teaser__grafik[data-anim].is-in { animation-fill-mode: backwards; }
/* Hover: circlezoom (Child-Theme) + pulse-grow (Elementor) */
.badge--zoom { transition: transform .1s; }
.badge--zoom:hover { transform: scale(1.1) rotate(-5deg); }
@media (hover: hover) { .fx-pulse:hover { animation: sb-pulse .3s linear infinite alternate; } }
@keyframes sb-pulse { to { transform: scale(1.1); } }
/* Menü: Einblenden von oben (live: popup_animation slide-top) */
.menu[open] { animation: sb-slide-top .3s ease-out; }
@keyframes sb-slide-top { from { transform: translateY(-100%); } }
/* Footer-Bär (Lottie als SVG): pausiert außerhalb des Bildschirms */
.foot-news__baer.is-off g[class] { animation-play-state: paused; }
.teaser__head--links { justify-content: flex-start; }
@media (prefers-reduced-motion: reduce) { [data-anim] { opacity: 1 !important; } .hero__bg img { transform: none !important; } }
/* Kategorie-Titel als h2 (Überschriften-Reihenfolge), Optik wie zuvor h3 */
.sk-karte .sk-titel { font-family: var(--druck); font-size: calc(1.5 * var(--rem)); line-height: 1.3; font-weight: 400; margin: 0 0 22px; transform: none; }
/* Kontrast: Hinweis-Grau auf Schwarz aufgehellt (live #5E656F = 3,6:1, jetzt 6,4:1) */
.sk-hinweis { color: #8a919a; }
.news-card .news-card__titel { font-family: var(--text); font-weight: 700; font-size: calc(1.18 * var(--rem)); line-height: 1.3; margin: 0 0 10px; transform: none; }
.news-card .news-card__titel a { text-decoration: none; }
@media (max-width: 1024px) { .news-card .news-card__titel { font-size: 20px; } }
.hero--50 { min-height: 50vh; }
@media (max-width: 767px) { .hero--50 { min-height: 80vh; } }
.teaser__head { flex-wrap: wrap; max-width: 100%; }
.teaser__head .teaser__grafik { max-width: 40vw; height: auto; }
.eigenschaften__grid > * { min-width: 0; }
.eigenschaften__liste dt { overflow-wrap: anywhere; hyphens: auto; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9999; max-width: min(92vw, 560px); margin: 0; padding: 14px 20px; background: var(--gelb); color: var(--schwarz); font-weight: 700; text-align: center; box-shadow: 0 6px 24px rgba(0,0,0,.35); animation: sb-toast 8s forwards; }
@keyframes sb-toast { 0%, 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
/* 13.10.2026: Bühnen-Badge ragt wie live über die Unterkante – nur das Bild (Ken Burns) wird beschnitten, nicht die Bühne */
.hero { overflow: visible; z-index: 2; }
.hero__bg { overflow: hidden; }
/* 13.10.2026: Radiospot-Player wie live (Elementor-Popup 2014): schwarzer Kasten unten rechts, fährt von unten herein */
.radio { position: fixed; right: 0; bottom: 0; z-index: 9990; width: min(640px, 100vw); box-sizing: border-box; padding: 40px 38px 34px; background: var(--schwarz); color: var(--weiss); transform: translateY(110%); visibility: hidden; transition: transform .3s ease-out, visibility 0s .3s; }
.radio.is-open { transform: none; visibility: visible; transition: transform .3s ease-out; }
.radio__zu { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; padding: 0; border: 0; cursor: pointer; background: var(--gelb); -webkit-mask: url(../img/messer-und-gabel.svg) center / 34px no-repeat; mask: url(../img/messer-und-gabel.svg) center / 34px no-repeat; }
.radio__bar { display: flex; align-items: center; gap: 14px; font: 400 12px/1 var(--text); }
.radio__btn { width: 20px; height: 20px; padding: 0; border: 0; cursor: pointer; background: var(--weiss); flex: none; }
.radio__zurueck { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5V1L7 6l5 5V7a6 6 0 1 1-6 6H4a8 8 0 1 0 8-8z'/%3E%3C/svg%3E") center / 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5V1L7 6l5 5V7a6 6 0 1 1-6 6H4a8 8 0 1 0 8-8z'/%3E%3C/svg%3E") center / 16px no-repeat; }
.radio__play { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4l13 8-13 8z'/%3E%3C/svg%3E") center / 15px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4l13 8-13 8z'/%3E%3C/svg%3E") center / 15px no-repeat; }
.radio.is-playing .radio__play { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h4v16H6zM14 4h4v16h-4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h4v16H6zM14 4h4v16h-4z'/%3E%3C/svg%3E"); }
.radio input[type=range] { -webkit-appearance: none; appearance: none; height: 10px; margin: 0; border-radius: 5px; background: #444; accent-color: var(--weiss); cursor: pointer; }
.radio input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background: var(--weiss); }
.radio input[type=range]::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--weiss); }
.radio__pos { flex: 1; min-width: 60px; }
.radio__vol { width: 76px; flex: none; }
.radio :focus-visible { outline: 2px solid var(--gelb); outline-offset: 3px; }
@media (max-width: 767px) { .radio { padding: 70px 20px 28px; } .radio__vol { display: none; } }
@media (prefers-reduced-motion: reduce) { .radio, .radio.is-open { transition: none; } }
.radio { padding-top: 84px; }
.radio__zu { top: 22px; right: 22px; }
/* Play-Badge wie live: kleiner weißer Kreis in der Mitte, Kreistext „Radiospot“ rundherum sichtbar */
.badge--play .badge__bg { inset: 26%; width: 48%; height: 48%; }
/* Play-Knopf unter dem Bühnentitel (Kontakt: Radiospot „Bärmanent geöffnet“) */
.badge.hero__play { position: relative; display: block; margin: 46px auto 0; width: 150px; height: 150px; color: var(--weiss); }
@media (max-width: 767px) { .badge.hero__play { width: 120px; height: 120px; margin-top: 34px; } }