/* ==========================================================================
   IC Ceramica Design – Designsystem
   Farben: Markenpalette · Typografie: Cormorant Garamond (Headlines), Montserrat (Fließtext)
   ========================================================================== */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("../fonts/cormorant-garamond-latin-wght-italic.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2"); }

:root {
  --tinte: #1f2120;
  --wald: #4f534d;
  --gold: #bfa678;
  --gold-dunkel: #8f7648;
  --taupe: #aa9d8a;
  --sand: #d6d0c4;
  --stein: #6e6d66;
  --bronze: #7d6044;
  --papier: #f5f2ec;
  --hell: #fbfaf7;
  --linie: rgba(31, 33, 32, .14);
  --linie-hell: rgba(255, 255, 255, .22);

  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --rand: clamp(20px, 5vw, 88px);
  --abstand: clamp(72px, 11vw, 176px);
  --max: 1720px;
  --hdr: 88px;
  --kurve: cubic-bezier(.2, .7, .1, 1);
  --kurve-io: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 16px); }
body { margin: 0; background: var(--papier); color: var(--tinte); font-family: var(--sans); font-size: 16px; line-height: 1.7; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1.1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
address { font-style: normal; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
dl, dd { margin: 0; }
em { font-style: italic; }
::selection { background: var(--gold); color: var(--tinte); }
:focus-visible { outline: 2px solid var(--gold-dunkel); outline-offset: 3px; }
main:focus { outline: none; }
[hidden] { display: none !important; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -80px; z-index: 300; background: var(--tinte); color: #fff; padding: 12px 18px; transition: top .2s; }
.skip:focus { top: 16px; }
.ph { display: block; width: 100%; height: 100%; min-height: 200px; background: linear-gradient(135deg, var(--sand), var(--taupe)); }

/* ---------- Typografie ---------- */
.h1, .h2, .h3, .hero__titel, .produkt__titel { font-family: var(--serif); font-weight: 400; line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; }
.h1 { font-size: clamp(2.6rem, 6.4vw, 6.25rem); }
.h2 { font-size: clamp(2.1rem, 4.4vw, 4.25rem); }
.h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.15; }
.h1 em, .h2 em, .hero__titel em { color: var(--gold-dunkel); font-weight: 300; }
.eyebrow { font-family: var(--sans); font-size: .6875rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--stein); margin: 0 0 1.4em; line-height: 1.6; }
.eyebrow--gold { color: var(--gold-dunkel); }
.eyebrow a { border-bottom: 1px solid transparent; transition: border-color .3s; }
.eyebrow a:hover { border-color: currentColor; }
.lead { font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 1.85rem); line-height: 1.4; }

/* ---------- Buttons ---------- */
.btn { --bg: transparent; --fg: var(--tinte); --bd: var(--tinte); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .7em; min-height: 54px; padding: 0 30px; border: 1px solid var(--bd); background: var(--bg); color: var(--fg); font-size: .75rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; line-height: 1.2; text-align: center; overflow: hidden; isolation: isolate; transition: color .45s var(--kurve), border-color .45s var(--kurve); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hov, var(--tinte)); transform: translateY(101%); transition: transform .5s var(--kurve); }
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:hover, .btn:focus-visible { color: var(--hfg, #fff); border-color: var(--hov, var(--tinte)); }
.btn--gold { --bg: var(--gold); --bd: var(--gold); --fg: var(--tinte); --hov: var(--tinte); --hfg: #fff; }
.btn--dunkel { --bg: var(--tinte); --bd: var(--tinte); --fg: #fff; --hov: var(--gold); --hfg: var(--tinte); }
.btn--linie { --hov: var(--tinte); }
.btn--linie-hell { --fg: #fff; --bd: rgba(255, 255, 255, .55); --hov: #fff; --hfg: var(--tinte); }
.btn--klein { min-height: 44px; padding: 0 20px; font-size: .6875rem; }
.btn--breit { width: 100%; }
.btn[disabled] { opacity: .55; pointer-events: none; }
.btns { display: flex; flex-wrap: wrap; gap: 14px; }
.zaehler { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--tinte); color: #fff; font-size: .625rem; letter-spacing: 0; transition: background .4s, color .4s; }
.btn:hover .zaehler { background: var(--gold); color: var(--tinte); }

.pfeil { display: inline-flex; align-items: center; gap: 14px; font-size: .6875rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.pfeil::after { content: ""; width: 34px; height: 1px; background: currentColor; transform-origin: left; transition: transform .5s var(--kurve); }
a:hover > .pfeil::after, a:hover .pfeil::after, .pfeil:hover::after { transform: scaleX(1.7); }
.pfeil--dunkel { color: var(--tinte); padding: 8px 0; }

/* ---------- Kopfzeile ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--hdr); color: var(--tinte); background: rgba(245, 242, 236, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--linie); transition: transform .6s var(--kurve), background .4s, color .4s, border-color .4s, height .4s var(--kurve); }
.hdr__in { height: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--rand); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hat-hero .hdr:not(.ist-fest) { background: transparent; color: #fff; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hdr.ist-weg { transform: translateY(-101%); }
.hdr.ist-fest { height: 68px; }
body:not(.hat-hero) main { padding-top: var(--hdr); }

.logo { display: inline-flex; align-items: center; flex: none; }
.logo__img { display: block; height: 64px; aspect-ratio: 159.5 / 67; background: currentColor; -webkit-mask: url("../img/logo.svg") center / contain no-repeat; mask: url("../img/logo.svg") center / contain no-repeat; transition: height .4s var(--kurve); }
.hdr.ist-fest .logo__img { height: 52px; }
.logo__img--kopf { height: 56px; aspect-ratio: 184 / 65.4; -webkit-mask-image: url("../img/logo-kopf.svg"); mask-image: url("../img/logo-kopf.svg"); }
.hdr.ist-fest .logo__img--kopf { height: 48px; }
.logo--gross .logo__img { height: 104px; }

.nav__list { display: flex; gap: clamp(18px, 2.4vw, 44px); }
.nav__item { position: relative; }
.nav__link { position: relative; display: block; padding: 28px 0; font-size: .6875rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 20px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--kurve); }
.nav__link:hover::after, .nav__link[aria-current]::after, .nav__item:focus-within > .nav__link::after { transform: scaleX(1); transform-origin: left; }
.sub { position: absolute; left: -28px; top: 100%; min-width: 260px; padding: 18px 28px 22px; background: var(--hell); color: var(--tinte); border: 1px solid var(--linie); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .35s, transform .45s var(--kurve), visibility .35s; }
.nav__item:hover > .sub, .nav__item:focus-within > .sub { opacity: 1; visibility: visible; transform: none; }
.sub a { display: block; padding: 7px 0; font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; transition: color .3s, padding .4s var(--kurve); }
.sub a:hover { color: var(--gold-dunkel); padding-left: 8px; }
.sub li:last-child a { font-family: var(--sans); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--linie); }
.hdr__akt { display: flex; align-items: center; gap: 14px; }
.hat-hero .hdr:not(.ist-fest) .zaehler { background: var(--tinte); }

.burger { display: none; position: relative; width: 44px; height: 44px; }
.burger i { position: absolute; left: 9px; right: 9px; height: 1.5px; background: currentColor; transition: transform .5s var(--kurve), top .5s var(--kurve); }
.burger i:nth-of-type(1) { top: 17px; }
.burger i:nth-of-type(2) { top: 26px; }
.burger[aria-expanded="true"] i:nth-of-type(1) { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] i:nth-of-type(2) { top: 21px; transform: rotate(-45deg); }

.mnav { position: fixed; inset: 0; z-index: 90; background: var(--tinte); color: #fff; padding: calc(var(--hdr) + 24px) var(--rand) 40px; overflow-y: auto; opacity: 0; transition: opacity .4s; }
.mnav.ist-offen { opacity: 1; }
.mnav__list > li { border-bottom: 1px solid var(--linie-hell); }
.mnav__list > li > a, .mnav summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-family: var(--serif); font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.15; cursor: pointer; list-style: none; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary::after { content: "+"; font-family: var(--sans); font-weight: 300; font-size: 1.4rem; color: var(--gold); transition: transform .4s var(--kurve); }
.mnav details[open] summary::after { transform: rotate(45deg); }
.mnav details ul { padding: 0 0 18px; }
.mnav details a { display: block; padding: 9px 0; font-size: .9375rem; color: rgba(255, 255, 255, .8); }
.mnav .btn { margin-top: 32px; width: 100%; }
.mnav__kontakt { margin-top: 28px; font-size: .875rem; color: rgba(255, 255, 255, .65); }
body.menu-offen { overflow: hidden; }
body.menu-offen .hdr { background: var(--tinte) !important; color: #fff !important; border-color: transparent !important; transform: none !important; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--tinte); }
.hero { --mx: 0; --my: 0; --sp: 0; }
.hero__bild { position: absolute; inset: -6% -2.5%; translate: calc(var(--mx) * -22px) calc(var(--my) * -14px); }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 21, 20, .42) 0%, rgba(20, 21, 20, .05) 30%, rgba(20, 21, 20, .22) 55%, rgba(20, 21, 20, .72) 100%); pointer-events: none; }
.hero__in { position: relative; z-index: 2; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--rand) clamp(72px, 11vh, 132px); }
.hero__titel { font-size: clamp(2.6rem, 7vw, 7rem); line-height: 1; margin-bottom: clamp(20px, 3vw, 36px); }
.hero__titel em { color: #e2cfa6; }
.hero__text { max-width: 34em; font-size: clamp(.9375rem, 1.15vw, 1.0625rem); color: rgba(255, 255, 255, .88); margin-bottom: clamp(24px, 3vw, 40px); }
.hero__eyebrow { color: #e2cfa6; }
.admin-bar .hdr { top: 32px; }
@media (max-width: 782px) { .admin-bar .hdr { top: 46px; } }
.hero__scroll { position: absolute; z-index: 2; right: var(--rand); bottom: clamp(72px, 11vh, 132px); display: flex; align-items: center; gap: 14px; font-size: .625rem; letter-spacing: .3em; text-transform: uppercase; writing-mode: vertical-rl; }
.hero__scroll::after { content: ""; width: 1px; height: 64px; background: linear-gradient(#fff, transparent); animation: tropfen 2.4s var(--kurve-io) infinite; transform-origin: top; }
@keyframes tropfen { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Lade-Animation Hero */
/* 1) Vorhang: das Bild öffnet sich von der Mitte, 2) Zoom-out, 3) danach langsame, endlose Kamerafahrt */
.js .hero__bild { animation: hero-vorhang 1.7s var(--kurve-io) both; }
.js .hero__bild img { animation: hero-zoom 2.8s var(--kurve) both, hero-fahrt 28s 2.8s ease-in-out infinite alternate; transform-origin: 62% 45%; }
@keyframes hero-vorhang { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
@keyframes hero-fahrt { from { transform: none; } to { transform: scale(1.075) translate3d(-1.2%, -.8%, 0); } }
/* 4) Lichtstreif, der in Abständen über die Platten wandert */
.hero__licht { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; mix-blend-mode: soft-light; }
.hero__licht::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%; background: linear-gradient(100deg, transparent 0%, rgba(255, 236, 200, .0) 20%, rgba(255, 236, 200, .55) 50%, rgba(255, 236, 200, 0) 80%, transparent 100%); transform: translateX(-130%) skewX(-14deg); opacity: 0; }
.js .hero__licht::before { animation: hero-licht 11s 3.2s var(--kurve-io) infinite; }
@keyframes hero-licht { 0% { transform: translateX(-130%) skewX(-14deg); opacity: 0; } 8% { opacity: 1; } 42% { opacity: 1; } 50%, 100% { transform: translateX(420%) skewX(-14deg); opacity: 0; } }
/* 5) Goldene Linie zeichnet sich vor der Dachzeile */
.hero__eyebrow { display: flex; align-items: center; gap: 16px; }
.hero__eyebrow::before { content: ""; width: clamp(28px, 4vw, 64px); height: 1px; background: currentColor; transform-origin: left; }
.js .hero__eyebrow::before { transform: scaleX(0); animation: hero-linie 1.2s .7s var(--kurve) forwards; }
@keyframes hero-linie { to { transform: scaleX(1); } }
/* 6) Beim Scrollen gleitet der Text nach oben weg und das Bild dunkelt ab (--sp = Scrollfortschritt 0–1) */
.hero__in { translate: 0 calc(var(--sp) * -70px); opacity: calc(1 - var(--sp) * 1.5); will-change: opacity, translate; }
.hero::after { opacity: calc(1 + var(--sp) * .9); }
.hero__bild img { filter: brightness(calc(1 - var(--sp) * .35)); }
/* 7) Überschrift reagiert minimal auf die Maus (Gegenbewegung zum Bild = Tiefe) */
.hero__titel { translate: calc(var(--mx) * 8px) calc(var(--my) * 5px); }
.js .hero__eyebrow, .js .hero__text, .js .hero__btns, .js .hero__scroll { opacity: 0; animation: auf .9s var(--kurve) forwards; }
.js .hero__eyebrow { animation-delay: .35s; }
.js .hero__text { animation-delay: 1.05s; }
.js .hero__btns { animation-delay: 1.2s; }
.js .hero__scroll { animation-delay: 1.6s; }
@keyframes hero-zoom { from { transform: scale(1.2); } to { transform: none; } }
@keyframes auf { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Zeilenweise Text-Animation */
.zeilen > span { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.zeilen > span > span { display: block; }
.js .zeilen > span > span { transform: translateY(110%); transition: transform 1.2s var(--kurve); }
.js .zeilen.ist-da > span > span { transform: none; }
.js .zeilen > span:nth-child(2) > span { transition-delay: .12s; }
.js .hero .zeilen > span:nth-child(1) > span { transition-delay: .5s; }
.js .hero .zeilen > span:nth-child(2) > span { transition-delay: .65s; }

/* Scroll-Reveal */
.js [data-reveal]:not([data-reveal="bild"]) { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--kurve), transform 1.1s var(--kurve); transition-delay: var(--d, 0s); }
.js [data-reveal].ist-da { opacity: 1; transform: none; }
.js [data-reveal="bild"] { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--kurve); transition-delay: var(--d, 0s); }
.js [data-reveal="bild"] img { transform: scale(1.14); transition: transform 1.8s var(--kurve); transition-delay: var(--d, 0s); }
.js [data-reveal="bild"].ist-da { clip-path: inset(0); }
.js [data-reveal="bild"].ist-da img { transform: none; }

/* ---------- Abschnitte ---------- */
.sek { max-width: var(--max); margin: 0 auto; padding: var(--abstand) var(--rand); }
.sek--start { padding-top: clamp(48px, 5.5vw, 88px); padding-bottom: clamp(40px, 5vw, 80px); }
.sek--start .sek__kopf { margin-bottom: clamp(28px, 3.5vw, 52px); }
.sek--eng { padding-top: clamp(48px, 7vw, 104px); padding-bottom: clamp(48px, 7vw, 104px); }
.sek--hell { max-width: none; background: var(--hell); }
.sek--hell > * { max-width: calc(var(--max) - 2 * var(--rand)); margin-left: auto; margin-right: auto; }
.sek__kopf { max-width: 52rem; margin-bottom: clamp(36px, 5vw, 72px); }
.sek__kopf--zeile { max-width: none; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 120px); align-items: end; }
.sek__kopf .h2 { margin-bottom: 0; }
.sek__intro { margin: 24px 0 0; max-width: 36em; color: var(--wald); }
.sek__kopf--zeile .sek__intro, .sek__kopf--zeile p:last-child { margin-bottom: 0; }
.sek__fuss { margin-top: clamp(36px, 5vw, 64px); display: flex; justify-content: center; }
.sek--hell > .sek__fuss { margin-left: auto; }

/* ---------- Materialwelten (asymmetrisches Raster) ---------- */
.welten { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 28px); }
.welt, .anw__el { position: relative; display: block; overflow: hidden; color: #fff; background: var(--wald); }
.welt__bild, .anw__bild { position: absolute; inset: 0; }
.welt__bild img, .anw__bild img { width: 100%; height: 100%; object-fit: cover; }
.welt::after, .anw__el::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 21, 20, 0) 40%, rgba(20, 21, 20, .72) 100%); transition: opacity .6s; }
.welt__text, .anw__text { position: absolute; z-index: 2; left: clamp(20px, 2.4vw, 40px); right: clamp(20px, 2.4vw, 40px); bottom: clamp(20px, 2.4vw, 36px); }
.welt__nr { display: block; font-size: .6875rem; letter-spacing: .24em; color: var(--gold); margin-bottom: 10px; }
.welt__titel { font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 3.4rem); line-height: 1; margin-bottom: 14px; }
.welt .pfeil, .anw__el .pfeil { opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s var(--kurve); }
.welt:hover .pfeil, .welt:focus-visible .pfeil, .anw__el:hover .pfeil, .anw__el:focus-visible .pfeil { opacity: 1; transform: none; }
.welt--1 { grid-column: 1 / span 7; aspect-ratio: 7 / 6.4; }
.welt--2 { grid-column: 8 / span 5; aspect-ratio: auto; }
.welt--3 { grid-column: 1 / span 4; aspect-ratio: 4 / 4.6; }
.welt--4 { grid-column: 5 / span 4; aspect-ratio: 4 / 4.6; }
.welt--5 { grid-column: 9 / span 4; aspect-ratio: 4 / 4.6; }
@media (hover: hover) {
  .js .welt.ist-da .welt__bild img, .js .anw__el.ist-da .anw__bild img, .js .streifen.ist-da img, .js .kol.ist-da img { transition: transform 1.6s var(--kurve); }
  .js .welt.ist-da:hover .welt__bild img, .js .anw__el.ist-da:hover .anw__bild img, .js .streifen.ist-da:hover img, .js .kol.ist-da:hover img { transform: scale(1.06); }
}

/* Kategorie-Streifen (Innenfliesen) */
.welten--liste { display: grid; grid-template-columns: 1fr; gap: clamp(12px, 1.6vw, 24px); }
.streifen { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); background: var(--hell); overflow: hidden; min-height: clamp(280px, 34vw, 520px); }
.streifen:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.streifen:nth-child(even) .streifen__bild { order: 2; }
.streifen__bild { position: relative; overflow: hidden; }
.streifen__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.streifen__text { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 5vw, 88px); }
.streifen__titel { font-family: var(--serif); font-size: clamp(2.2rem, 4.4vw, 4.5rem); line-height: 1; margin-bottom: 18px; }
.streifen__text p { color: var(--wald); max-width: 32em; }
.streifen .pfeil { margin-top: 12px; color: var(--tinte); }

/* Anwendungen-Raster */
.anw { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 28px); }
.anw__el { aspect-ratio: 4 / 3; grid-column: span 6; }
.anw__el--1 { grid-column: span 7; }
.anw__el--2 { grid-column: span 5; aspect-ratio: auto; }
.anw__el--3, .anw__el--4, .anw__el--5 { grid-column: span 4; aspect-ratio: 4 / 4.8; }
.anw__el--6 { grid-column: span 5; aspect-ratio: auto; }
.anw__el--7 { grid-column: span 7; }

/* ---------- Editorial ---------- */
.editorial { position: relative; padding: clamp(40px, 5vw, 80px) var(--rand) clamp(56px, 7vw, 112px); overflow: hidden; background: var(--hell); }
.editorial__riesig { position: absolute; left: var(--rand); top: clamp(8px, 1.5vw, 24px); margin: 0; font-family: var(--serif); font-size: clamp(4.4rem, 17vw, 18rem); line-height: .86; letter-spacing: -.03em; color: rgba(191, 166, 120, .2); white-space: nowrap; pointer-events: none; user-select: none; }
.editorial__riesig em { font-weight: 300; }
.editorial__raster { position: relative; max-width: calc(var(--max) - 2 * var(--rand)); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); align-items: center; padding-top: clamp(64px, 10vw, 170px); }
.editorial__b1 { grid-column: 1 / span 5; aspect-ratio: 4 / 5; overflow: hidden; }
.editorial__text { grid-column: 7 / span 5; }
.editorial__text .h2 { margin-bottom: 28px; }
.editorial__text p { color: var(--wald); max-width: 34em; }
.editorial img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Großformate ---------- */
.gross { position: relative; min-height: clamp(560px, 92vh, 980px); display: flex; align-items: center; justify-content: flex-end; padding: clamp(40px, 8vw, 120px) var(--rand); overflow: hidden; background: var(--tinte); }
.gross__bild { position: absolute; inset: -8% 0; }
.gross__bild img { width: 100%; height: 100%; object-fit: cover; }
.gross__karte { position: relative; z-index: 2; width: min(100%, 520px); background: var(--papier); padding: clamp(28px, 4vw, 64px); }
.gross__karte .h2 { font-size: clamp(2rem, 3.4vw, 3.4rem); margin-bottom: 22px; }
.gross__karte p { color: var(--wald); }
.fakten { display: flex; gap: clamp(24px, 4vw, 56px); margin: 28px 0 32px; padding-top: 24px; border-top: 1px solid var(--linie); }
.fakten dt { font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--stein); margin-bottom: 6px; }
.fakten dd { font-family: var(--serif); font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.1; white-space: nowrap; }

/* ---------- Inspirationen (Masonry) ---------- */
.mauer { columns: 3; column-gap: clamp(12px, 1.6vw, 28px); }
.mauer--2 { columns: 2; }
.mauer__el { margin: 0 0 clamp(12px, 1.6vw, 28px); break-inside: avoid; overflow: hidden; background: var(--sand); }
.mauer__el img { width: 100%; height: auto; }
.mauer__el:nth-child(3n + 2) { --d: .12s; }
.mauer__el:nth-child(3n) { --d: .24s; }

/* ---------- Beratung ---------- */
.beratung { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--tinte); color: #fff; }
.beratung__bild { position: relative; min-height: clamp(360px, 52vw, 820px); overflow: hidden; }
.beratung__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.beratung__text { padding: clamp(48px, 8vw, 136px) clamp(24px, 6vw, 112px); display: flex; flex-direction: column; justify-content: center; }
.beratung .eyebrow--gold, .karte-box .eyebrow--gold { color: var(--gold); }
.beratung .h2 { margin-bottom: 26px; }
.beratung .h2 em { color: var(--gold); }
.beratung p { color: rgba(255, 255, 255, .78); max-width: 34em; }
.beratung__info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 28px 0 36px; padding-top: 28px; border-top: 1px solid var(--linie-hell); }
.beratung__info .eyebrow { color: var(--gold); margin-bottom: .8em; }
.beratung__info p { margin: 0; font-size: .9375rem; color: #fff; }

/* ---------- Fußzeile ---------- */
.ftr { background: #171918; color: rgba(255, 255, 255, .72); font-size: .875rem; }
.ftr__in { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--rand) clamp(40px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 4vw, 72px); }
.ftr .logo { color: #fff; margin-bottom: 24px; }
.ftr__marke p { max-width: 24em; font-family: var(--serif); font-size: 1.25rem; line-height: 1.4; color: rgba(255, 255, 255, .85); }
.ftr h2 { font-family: var(--sans); font-size: .6875rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.ftr li { margin-bottom: 9px; }
.ftr a { transition: color .3s; }
.ftr a:hover { color: #fff; }
.ftr address { margin-bottom: 16px; line-height: 1.8; }
.ftr__zeiten { margin: 0 0 16px; }
.ftr__social { display: flex; gap: 10px; margin: 4px 0 0; }
.ftr__social li { margin: 0; }
.sozial { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; color: rgba(255, 255, 255, .85); transition: color .3s, border-color .3s, background-color .3s, transform .4s var(--kurve); }
.sozial:hover, .sozial:focus-visible { color: var(--gold) !important; border-color: var(--gold); transform: translateY(-2px); }
.sozial .symbol { width: 18px; height: 18px; }

/* WhatsApp-Button rechts unten */
.wa { position: fixed; right: clamp(16px, 2vw, 28px); bottom: calc(clamp(16px, 2vw, 28px) + env(safe-area-inset-bottom)); z-index: 80; display: flex; align-items: center; gap: 12px; color: var(--tinte); animation: wa-ein .8s var(--kurve) 1.2s both; transition: opacity .3s, visibility .3s; }
.wa__kreis { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .45); transition: transform .4s var(--kurve), box-shadow .4s; }
.wa__kreis::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid #25d366; animation: wa-puls 3.2s ease-out 2.2s infinite; }
.wa__kreis .symbol { width: 28px; height: 28px; }
.wa__text { padding: 9px 14px; background: var(--hell); border: 1px solid var(--linie); font-size: .75rem; letter-spacing: .06em; white-space: nowrap; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .35); opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity .35s, transform .45s var(--kurve); }
.wa:hover .wa__kreis, .wa:focus-visible .wa__kreis { transform: scale(1.06); box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .5); }
.wa:hover .wa__text, .wa:focus-visible .wa__text { opacity: 1; transform: none; }
.hinweis:not([hidden]) ~ .wa, .menu-offen .wa, .filter-offen .wa { opacity: 0; visibility: hidden; }
@keyframes wa-ein { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes wa-puls { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
@media (hover: none) { .wa__text { display: none; } }
@media (prefers-reduced-motion: reduce) { .wa, .wa__kreis::before { animation: none; } }
@media print { .wa { display: none; } }
body:has(.wa) .ftr__fuss { padding-bottom: 100px; }
.ftr__fuss { max-width: var(--max); margin: 0 auto; padding: 22px var(--rand); border-top: 1px solid var(--linie-hell); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font-size: .75rem; }
.ftr__fuss p { margin: 0; }
.ftr__fuss ul { display: flex; gap: 28px; }
.ftr__fuss li { margin: 0; }

/* ---------- Seitenkopf ---------- */
.kopf { max-width: var(--max); margin: 0 auto; padding: clamp(36px, 6vw, 96px) var(--rand) clamp(16px, 3vw, 40px); }
.kopf .h1 { max-width: 15em; }
.kopf__text { max-width: 44em; margin: clamp(20px, 2.4vw, 32px) 0 0; font-size: clamp(1rem, 1.2vw, 1.125rem); color: var(--wald); }
.kopf--bild { position: relative; max-width: none; min-height: clamp(480px, 78vh, 860px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--tinte); padding: 0; }
.kopf__bild { position: absolute; inset: -6% 0; }
.kopf__bild img { width: 100%; height: 100%; object-fit: cover; }
.js .kopf__bild img { animation: hero-zoom 2.2s var(--kurve) both; }
.kopf--bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 21, 20, .5) 0%, rgba(20, 21, 20, .1) 35%, rgba(20, 21, 20, .8) 100%); }
.kopf--bild .kopf__in { position: relative; z-index: 2; width: 100%; max-width: var(--max); margin: 0 auto; padding: calc(var(--hdr) + 40px) var(--rand) clamp(40px, 6vw, 88px); }
.kopf--bild .kopf__text { color: rgba(255, 255, 255, .88); }
.kopf--bild .eyebrow--gold { color: var(--gold); }

.crumbs { margin-bottom: clamp(20px, 3vw, 40px); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--stein); }
.crumbs li + li::before { content: "/"; margin: 0 10px; opacity: .5; }
.crumbs a { transition: color .3s; }
.crumbs a:hover { color: var(--tinte); }
.crumbs [aria-current] { color: var(--tinte); }
.crumbs--hell ol, .crumbs--hell [aria-current] { color: rgba(255, 255, 255, .7); }
.crumbs--hell a:hover { color: #fff; }

/* ---------- Über uns: Kopf ---------- */
.uk { position: relative; min-height: min(92svh, 940px); display: flex; align-items: flex-end; overflow: hidden; background: var(--tinte); color: #fff; }
.uk__bild { position: absolute; inset: -6% 0; }
.uk__bild img { width: 100%; height: 100%; object-fit: cover; }
.js .uk__bild img { animation: hero-zoom 2.6s var(--kurve) both; }
.uk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 21, 20, .5) 0%, rgba(20, 21, 20, .1) 30%, rgba(20, 21, 20, .3) 58%, rgba(20, 21, 20, .85) 100%); pointer-events: none; }
.uk__in { position: relative; z-index: 2; width: 100%; max-width: var(--max); margin: 0 auto; padding: calc(var(--hdr) + 40px) var(--rand) clamp(32px, 4vw, 56px); }
.uk .eyebrow { color: #e2cfa6; }
.uk__titel { font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 5.2vw, 5.4rem); line-height: 1.02; letter-spacing: -.01em; max-width: 16em; margin: 0 0 clamp(36px, 5vw, 72px); }
.uk__titel em { color: #e2cfa6; font-weight: 300; }
.uk__saeulen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linie-hell); }
.uk__saeulen li { display: flex; align-items: baseline; gap: 14px; padding: 20px 20px 0 0; font-family: var(--serif); font-size: clamp(1.25rem, 1.8vw, 1.75rem); line-height: 1.2; }
.uk__saeulen li + li { padding-left: 20px; border-left: 1px solid var(--linie-hell); }
.uk__saeulen span { font-style: italic; font-size: .7em; color: var(--gold); }

/* ---------- Kollektionen ---------- */
.kollektionen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(20px, 2.4vw, 40px) clamp(12px, 1.6vw, 28px); }
.kol__bild { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); }
.kol__bild img { width: 100%; height: 100%; object-fit: cover; }
.kol__text { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 14px; border-bottom: 1px solid var(--linie); padding-bottom: 14px; transition: border-color .4s; }
.kol:hover .kol__text { border-color: var(--tinte); }
.kol__titel { font-family: var(--serif); font-size: clamp(1.4rem, 1.9vw, 1.8rem); line-height: 1.1; }
.kol__n { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--stein); white-space: nowrap; }

/* ---------- Katalog & Filter ---------- */
.filter { position: relative; z-index: 20; margin-bottom: clamp(24px, 3vw, 40px); }
.filter__kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.filter__auf { display: none; }
.filter__zahl { margin: 0; font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--stein); }
.filter__gruppen { display: flex; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 14px 0; }
.filter__mobilkopf, .filter__mobilfuss { display: none; }
.fg { position: relative; }
.fg summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 1px solid var(--linie); font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; list-style: none; user-select: none; transition: border-color .3s, background .3s, color .3s; }
.fg summary::-webkit-details-marker { display: none; }
.fg summary::after { content: ""; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .4s var(--kurve); }
.fg[open] summary::after { transform: translateY(2px) rotate(225deg); }
.fg summary:hover, .fg[open] summary { border-color: var(--tinte); }
.fg.ist-aktiv summary { background: var(--tinte); color: #fff; border-color: var(--tinte); }
.fg__n:not(:empty) { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 9px; background: var(--gold); color: var(--tinte); font-size: .625rem; letter-spacing: 0; }
.fg__liste { position: absolute; left: 0; top: calc(100% + 6px); z-index: 5; min-width: 250px; max-height: 340px; overflow-y: auto; padding: 10px 0; background: var(--hell); border: 1px solid var(--tinte); }
.fo { display: flex; align-items: center; gap: 12px; padding: 8px 18px; font-size: .875rem; cursor: pointer; transition: background .2s; }
.fo:hover { background: rgba(191, 166, 120, .16); }
.fo input { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 1px solid var(--stein); margin: 0; flex: none; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.fo input:checked { background: var(--tinte); border-color: var(--tinte); }
.fo input:checked::after { content: ""; width: 8px; height: 4px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.fo__name { flex: 1; white-space: nowrap; }
.fo__n { font-size: .75rem; color: var(--stein); }
.fo.ist-leer { opacity: .38; }
.filter__aktiv { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fchip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; background: var(--sand); font-size: .75rem; transition: background .3s; }
.fchip:hover { background: var(--taupe); }
.fchip::after { content: "×"; font-size: 1rem; line-height: 1; }
.fchip--reset { background: none; text-decoration: underline; text-underline-offset: 4px; }
.fchip--reset::after { content: none; }
.fchip--reset:hover { background: none; color: var(--gold-dunkel); }

.raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 56px) clamp(12px, 1.6vw, 28px); }
.karte[hidden] { display: none; }
.karte__link { display: block; }
.karte__bild { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); }
.karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--kurve); }
.karte__bild::after { content: "Ansehen"; position: absolute; left: 14px; bottom: 14px; padding: 9px 14px; background: var(--papier); font-size: .625rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--kurve); }
@media (hover: hover) {
  .karte__link:hover .karte__bild img { transform: scale(1.06); }
  .karte__link:hover .karte__bild::after { opacity: 1; transform: none; }
  .karte__link:hover .karte__raum, .karte__link:focus-visible .karte__raum { opacity: 1; }
}
/* Raumbild beim Darüberfahren */
.karte__raum { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .7s var(--kurve); pointer-events: none; }
.karte__raum img { width: 100%; height: 100%; object-fit: cover; }
.karte__bild--raum::after { z-index: 2; }
.karte__text { padding-top: 16px; }
.karte__text .eyebrow { margin-bottom: .5em; font-size: .625rem; }
.karte__titel { font-family: var(--serif); font-size: clamp(1.35rem, 1.7vw, 1.7rem); line-height: 1.12; }
.karte__meta { margin: 6px 0 12px; font-size: .8125rem; color: var(--stein); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { padding: 4px 9px; border: 1px solid var(--linie); font-size: .6875rem; letter-spacing: .04em; white-space: nowrap; color: var(--wald); }
.chips__mehr { border-color: transparent !important; padding-left: 2px !important; color: var(--stein) !important; }
.chips--links li { padding: 0; }
.chips--links a { display: block; padding: 8px 14px; font-size: .75rem; transition: background .3s, color .3s; }
.chips--links a:hover { background: var(--tinte); color: #fff; }
.leer { padding: clamp(40px, 6vw, 80px) 0; text-align: center; }
.leer .h3 { margin-bottom: 12px; }
.karte.ist-neu { animation: auf .7s var(--kurve) both; }

/* ---------- Text / Bild-Abschnitte ---------- */
.intro2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 120px); align-items: center; }
.intro2__text .h2 { margin-bottom: 26px; }
.intro2__text p { color: var(--wald); max-width: 36em; }
.intro2__text .lead { color: var(--tinte); }
.intro2__bild { aspect-ratio: 4 / 5; overflow: hidden; }
.intro2__bild img { width: 100%; height: 100%; object-fit: cover; }
.fakten--dunkel { border-color: var(--linie); }
.daten { display: grid; gap: 0; align-self: start; border-top: 1px solid var(--tinte); }
.daten > div { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.daten dt { font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--stein); padding-top: 3px; }
.daten dd { font-size: .9375rem; }
.liste li { position: relative; padding: 14px 0 14px 44px; border-bottom: 1px solid var(--linie); font-family: var(--serif); font-size: clamp(1.25rem, 1.7vw, 1.6rem); line-height: 1.25; }
.liste li::before { content: ""; position: absolute; left: 0; top: 50%; width: 28px; height: 1px; background: var(--gold-dunkel); }
.werte { background: var(--wald); color: #fff; }
.werte__in { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 8vw, 120px) var(--rand); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 5vw, 88px); }
.wert .h3 { margin-bottom: 16px; }
.wert p { color: rgba(255, 255, 255, .8); margin: 0; }
.partner { margin-top: clamp(32px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--linie); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px clamp(32px, 6vw, 120px); }
.partner p:last-child { margin: 0; color: var(--wald); }

/* ---------- Produktseite ---------- */
.produkt { max-width: var(--max); margin: 0 auto; padding: clamp(16px, 2.4vw, 40px) var(--rand) clamp(48px, 7vw, 104px); display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.produkt__medien { position: sticky; top: calc(var(--hdr) + 12px); }
.galerie__buehne { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: var(--sand); }
.galerie__bild { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .7s var(--kurve), visibility .7s; }
.galerie__bild.ist-aktiv { opacity: 1; visibility: visible; }
.galerie__bild img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.6s var(--kurve); }
.galerie__bild.ist-aktiv img { transform: none; }
.galerie__nav { position: absolute; top: 50%; z-index: 3; width: 48px; height: 48px; margin-top: -24px; display: grid; place-items: center; background: rgba(245, 242, 236, .92); font-size: 1.1rem; transition: background .3s, color .3s; }
.galerie__nav:hover { background: var(--tinte); color: #fff; }
.galerie__nav--z { left: 12px; }
.galerie__nav--v { right: 12px; }
.galerie__zahl { position: absolute; z-index: 3; left: 14px; bottom: 12px; margin: 0; padding: 5px 10px; background: rgba(245, 242, 236, .92); font-size: .6875rem; letter-spacing: .14em; }
.galerie__thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.galerie__thumbs li { flex: none; }
.galerie__thumbs button { display: block; width: 84px; height: 66px; overflow: hidden; opacity: .55; outline-offset: -2px; transition: opacity .3s; position: relative; }
.galerie__thumbs button:hover, .galerie__thumbs button[aria-current] { opacity: 1; }
.galerie__thumbs button[aria-current]::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--tinte); }
.galerie__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.produkt__info .crumbs { margin-bottom: 24px; }
.produkt__titel { font-size: clamp(2.4rem, 4.4vw, 4.4rem); margin-bottom: 20px; }
.produkt__text { color: var(--wald); max-width: 36em; }
.konfig { margin-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--tinte); }
.konfig__gruppe { padding: 22px 0; border-bottom: 1px solid var(--linie); }
.konfig legend, .konfig__label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; width: 100%; padding: 0; margin-bottom: 14px; font-size: .6875rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.konfig__nr { font-family: var(--serif); font-size: 1.1rem; letter-spacing: 0; color: var(--gold-dunkel); text-transform: none; font-style: italic; }
.konfig__wahl { margin-left: auto; font-weight: 400; letter-spacing: .04em; text-transform: none; font-size: .8125rem; color: var(--stein); }
.konfig legend { float: left; }
.wahl { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.wahl__opt { position: relative; min-height: 48px; padding: 0 16px; border: 1px solid var(--linie); background: transparent; font-size: .875rem; white-space: nowrap; transition: border-color .3s, background .35s var(--kurve), color .35s; }
.wahl__opt small { display: block; font-size: .6875rem; color: var(--stein); margin-top: -2px; transition: color .35s; }
.wahl__opt:hover:not([disabled]) { border-color: var(--tinte); }
.wahl__opt[aria-checked="true"] { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.wahl__opt[aria-checked="true"] small { color: rgba(255, 255, 255, .7); }
.wahl__opt[disabled] { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.wahl__opt--info { border-style: dashed; cursor: default; color: var(--stein); }
.konfig__hinweis { margin: 12px 0 0; font-size: .8125rem; color: var(--wald); }
.konfig__hinweis strong { font-weight: 600; color: var(--tinte); }
.konfig__klein { margin: 14px 0 0; font-size: .75rem; line-height: 1.6; color: var(--stein); }
.flaeche { position: relative; max-width: 240px; }
.flaeche input { width: 100%; height: 56px; padding: 0 56px 0 18px; border: 1px solid var(--stein); background: var(--hell); font-size: 1.125rem; border-radius: 0; transition: border-color .3s; }
.flaeche input:focus { border-color: var(--tinte); outline: 2px solid var(--gold); outline-offset: 0; }
.flaeche input[aria-invalid="true"] { border-color: #a3341f; }
.flaeche__einheit { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: .875rem; color: var(--stein); }
.feld-fehler { margin: 8px 0 0; font-size: .8125rem; color: #a3341f; }
.konfig__akt { display: grid; gap: 10px; padding-top: 24px; }
.technik { margin-top: clamp(32px, 4vw, 56px); }
.daten--zeilen { border-top-color: var(--linie); }

/* ---------- Hinweis „hinzugefügt“ ---------- */
.hinweis { position: fixed; right: clamp(12px, 2vw, 32px); bottom: clamp(12px, 2vw, 32px); z-index: 150; width: min(420px, calc(100vw - 24px)); background: var(--hell); border: 1px solid var(--tinte); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35); animation: auf .6s var(--kurve) both; }
.hinweis__in { display: flex; gap: 14px; padding: 16px; align-items: flex-start; }
.hinweis__bild { width: 72px; height: 72px; flex: none; background: var(--sand); overflow: hidden; }
.hinweis__bild img { width: 100%; height: 100%; object-fit: cover; }
.hinweis__text { flex: 1; min-width: 0; }
.hinweis__text .eyebrow { margin-bottom: .3em; color: var(--gold-dunkel); }
.hinweis__titel { margin: 0; font-family: var(--serif); font-size: 1.35rem; line-height: 1.15; }
.hinweis__det { margin: 4px 0 0; font-size: .8125rem; color: var(--stein); }
.hinweis__zu { width: 32px; height: 32px; font-size: 1.4rem; line-height: 1; flex: none; }
.hinweis__akt { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linie); }
.hinweis__akt .btn { border: 0; min-height: 50px; }
.hinweis__akt .btn + .btn { border-left: 1px solid var(--linie); }

/* ---------- Preisanfrage ---------- */
.anfrage { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.anfrage__form { position: sticky; top: calc(var(--hdr) + 16px); background: var(--hell); padding: clamp(24px, 3.4vw, 48px); }
.korb { border-top: 1px solid var(--tinte); }
.korb__el { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--linie); }
.korb__bild { aspect-ratio: 1; background: var(--sand); overflow: hidden; }
.korb__bild img { width: 100%; height: 100%; object-fit: cover; }
.korb__titel { font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; }
.korb__titel a:hover { color: var(--gold-dunkel); }
.korb__kol { margin: 0 0 4px; font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--stein); }
.korb__spez { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.korb__spez span { padding: 4px 9px; border: 1px solid var(--linie); font-size: .75rem; white-space: nowrap; }
.korb__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.korb__zeile label { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--stein); }
.korb__zeile .flaeche { max-width: 150px; }
.korb__zeile .flaeche input { height: 44px; font-size: 1rem; padding-right: 44px; padding-left: 12px; }
.korb__zeile .flaeche__einheit { right: 12px; }
.korb__akt { margin-left: auto; display: flex; gap: 18px; font-size: .75rem; }
.korb__akt a, .korb__akt button { text-decoration: underline; text-underline-offset: 4px; transition: color .3s; }
.korb__akt a:hover, .korb__akt button:hover { color: var(--gold-dunkel); }
.korb-summe { margin: 18px 0 8px; text-align: right; font-size: .875rem; color: var(--wald); }
.korb-summe strong { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; color: var(--tinte); margin-left: 8px; }
.korb-leer { padding: 40px 0; }
.korb-leer .h3 { margin-bottom: 10px; }

/* ---------- Formulare ---------- */
.form { display: grid; gap: 18px; }
.form__zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.feld label { display: block; margin-bottom: 7px; font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.feld .opt { font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--stein); }
.feld input[type=text], .feld input[type=email], .feld input[type=tel], .feld textarea { width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid var(--taupe); background: #fff; border-radius: 0; font-size: 1rem; transition: border-color .3s; }
.feld textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.feld input:focus, .feld textarea:focus { border-color: var(--tinte); outline: 2px solid var(--gold); outline-offset: 0; }
.feld [aria-invalid="true"] { border-color: #a3341f !important; }
.feld--hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.feld--check { display: grid; grid-template-columns: 22px 1fr; gap: 4px 12px; align-items: start; }
.feld--check input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 2px 0 0; border: 1px solid var(--stein); background: #fff; display: grid; place-items: center; cursor: pointer; }
.feld--check input:checked { background: var(--tinte); border-color: var(--tinte); }
.feld--check input:checked::after { content: ""; width: 10px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.feld--check label { margin: 0; font-size: .8125rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.6; color: var(--wald); cursor: pointer; }
.feld--check label a { text-decoration: underline; text-underline-offset: 3px; }
.feld--check .feld-fehler { grid-column: 2; margin-top: 2px; }
.form__fehler { padding: 14px 16px; border-left: 3px solid #a3341f; background: #f7e9e4; font-size: .875rem; }

.danke { max-width: 900px; margin: 0 auto; padding: clamp(64px, 10vw, 160px) var(--rand); text-align: center; }
.danke .h1 { font-size: clamp(2.4rem, 5vw, 4.6rem); margin-bottom: 24px; }
.danke .lead { color: var(--wald); }
.danke__nr { margin: 28px 0; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; }
.danke__nr strong { font-family: var(--serif); font-size: 1.6rem; letter-spacing: .04em; margin-left: 8px; font-weight: 500; }
.danke__zusammenfassung { text-align: left; margin: 0 auto 20px; max-width: 620px; border-top: 1px solid var(--tinte); }
.danke__zusammenfassung div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--linie); font-size: .9375rem; }
.danke__zusammenfassung span:last-child { color: var(--stein); text-align: right; }
.danke .btns { justify-content: center; margin-top: 32px; }
.danke--klein { padding: 40px 0; text-align: left; }
.danke--klein .h2 { margin-bottom: 18px; }
.danke:focus { outline: none; }

/* ---------- Kontakt ---------- */
/* Kopf: Text links (dunkel), Bild rechts */
.kk { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); min-height: min(100svh, 920px); background: var(--tinte); color: #fff; }
.kk__text { display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--hdr) + clamp(32px, 5vw, 72px)) clamp(24px, 5vw, 96px) clamp(40px, 6vw, 88px) max(var(--rand), calc((100vw - var(--max)) / 2 + var(--rand))); }
.kk .eyebrow { color: var(--gold); }
.kk .h1 { font-size: clamp(2.6rem, 5.6vw, 5.6rem); }
.kk .h1 em { color: #e2cfa6; }
.kk__intro { max-width: 34em; margin: clamp(20px, 2.4vw, 32px) 0 clamp(28px, 3.6vw, 52px); color: rgba(255, 255, 255, .78); }
.kk__schnell { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linie-hell); }
.kk__weg { position: relative; display: grid; gap: 6px; padding: 22px 20px 4px 0; transition: color .3s; }
.kk__weg + .kk__weg { padding-left: 20px; border-left: 1px solid var(--linie-hell); }
.kk__weg::after { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--kurve); }
.kk__weg:hover::after, .kk__weg:focus-visible::after { transform: scaleX(1); }
.kk__weg-titel { font-family: var(--serif); font-size: clamp(1.3rem, 1.7vw, 1.65rem); line-height: 1.15; }
.kk__weg-titel::after { content: " →"; color: var(--gold); display: inline-block; transition: transform .4s var(--kurve); }
.kk__weg:hover .kk__weg-titel::after { transform: translateX(5px); }
.kk__weg-sub { font-size: .75rem; letter-spacing: .04em; color: rgba(255, 255, 255, .6); overflow-wrap: anywhere; }
.kk__bild { position: relative; overflow: hidden; min-height: 420px; }
.kk__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.js .kk__bild img { animation: hero-zoom 2.4s var(--kurve) both; }
.js .kk__bild { animation: hero-vorhang 1.5s var(--kurve-io) both; }
.kk__status { position: absolute; left: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 2; display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 12px 18px; background: rgba(245, 242, 236, .94); color: var(--tinte); font-size: .75rem; letter-spacing: .06em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.kk__status i { width: 8px; height: 8px; border-radius: 50%; background: var(--taupe); flex: none; }
.kk__status.ist-offen i { background: #6f9a5b; box-shadow: 0 0 0 0 rgba(111, 154, 91, .55); animation: puls 2.2s ease-out infinite; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(111, 154, 91, .55); } 70% { box-shadow: 0 0 0 10px rgba(111, 154, 91, 0); } 100% { box-shadow: 0 0 0 0 rgba(111, 154, 91, 0); } }

/* Info-Karten */
.kinfo { max-width: var(--max); margin: 0 auto; padding: clamp(48px, 6vw, 96px) var(--rand) 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.kinfo__karte { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(28px, 3vw, 44px); background: var(--hell); min-width: 0; }
.kinfo__karte--dunkel { background: var(--wald); color: #fff; }
.kinfo__nr { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--gold-dunkel); margin-bottom: 18px; }
.kinfo__karte--dunkel .kinfo__nr { color: var(--gold); }
.kinfo__titel { font-family: var(--serif); font-size: clamp(1.6rem, 2.2vw, 2.1rem); line-height: 1.1; width: 100%; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--linie); }
.kinfo__karte--dunkel .kinfo__titel { border-color: var(--linie-hell); }
.kinfo__karte address { line-height: 1.8; margin-bottom: 18px; flex: 1; }
.kinfo__karte .pfeil { margin-top: auto; }
.kinfo__gross { margin: 0 0 8px; font-family: var(--serif); font-size: clamp(1.25rem, 1.6vw, 1.55rem); line-height: 1.35; overflow-wrap: anywhere; }
.kinfo__gross a { border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
.kinfo__gross a:hover { color: var(--gold-dunkel); border-color: currentColor; }
.kinfo__social { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: auto 0 0; padding-top: 16px; }
.kinfo__karte > .pfeil:last-child { padding-top: 16px; }
.kzeiten { width: 100%; margin: 0 0 18px; }
.kzeiten div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--linie-hell); font-size: .875rem; }
.kzeiten dt { color: rgba(255, 255, 255, .7); }
.kzeiten dd { text-align: right; }
.kzeiten .ist-heute dt, .kzeiten .ist-heute dd { color: #e2cfa6; }
.kinfo__hinweis { margin: auto 0 0; font-size: .8125rem; line-height: 1.6; color: rgba(255, 255, 255, .72); }

/* Formular mit Ablauf */
.kform { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 7vw, 120px) var(--rand) clamp(64px, 8vw, 128px); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 120px); align-items: start; scroll-margin-top: var(--hdr); }
.kform__links { position: sticky; top: calc(var(--hdr) + 32px); }
.kform__links .h2 { margin-bottom: 24px; }
.kform__links > p:not(.eyebrow) { color: var(--wald); max-width: 30em; }
.schritte { margin-top: clamp(28px, 3.4vw, 44px); border-top: 1px solid var(--tinte); }
.schritte li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--linie); font-size: .875rem; color: var(--wald); line-height: 1.6; }
.schritte span { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--gold-dunkel); line-height: 1.2; }
.schritte strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: var(--tinte); margin-bottom: 2px; }
.kform__karte { background: #fff; padding: clamp(24px, 4vw, 64px); border-top: 3px solid var(--gold); box-shadow: 0 40px 80px -60px rgba(31, 33, 32, .35); }
.anliegen { margin: 0 0 4px; }
.anliegen legend { margin-bottom: 10px; font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.anliegen { display: flex; flex-wrap: wrap; gap: 8px; }
.anliegen legend { width: 100%; float: left; }
.anliegen__opt { position: relative; cursor: pointer; }
.anliegen__opt input { position: absolute; opacity: 0; pointer-events: none; }
.anliegen__opt span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--taupe); font-size: .8125rem; transition: background .35s var(--kurve), color .35s, border-color .3s; }
.anliegen__opt:hover span { border-color: var(--tinte); }
.anliegen__opt input:checked + span { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.anliegen__opt input:focus-visible + span { outline: 2px solid var(--gold-dunkel); outline-offset: 2px; }

.karte-box { position: relative; min-height: clamp(380px, 52vw, 620px); display: flex; align-items: center; color: #fff; background: var(--tinte); overflow: hidden; }
.karte-box__bild { position: absolute; inset: 0; opacity: .35; }
.karte-box__bild img { width: 100%; height: 100%; object-fit: cover; }
.karte-box__in { position: relative; max-width: var(--max); width: 100%; margin: 0 auto; padding: 48px var(--rand); }
.karte-box__in > p:not(.eyebrow) { max-width: 40em; color: rgba(255, 255, 255, .8); font-size: .875rem; }
.karte-box__in a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.karte-box .h2 { font-size: clamp(1.8rem, 3.4vw, 3.2rem); margin-bottom: 18px; }
.karte-box .h2 em { color: #e2cfa6; }
.karte-box__bild { opacity: .28; }
.karte-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Fließtext-Seiten ---------- */
.prosa { max-width: 760px; }
.prosa h2 { font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.2; margin: 2em 0 .6em; }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { font-size: 1rem; font-weight: 600; margin: 1.6em 0 .5em; }
.prosa p, .prosa li { color: var(--wald); overflow-wrap: anywhere; }
.prosa ul { list-style: disc; padding-left: 1.3em; margin-bottom: 1.1em; }
.prosa ol { list-style: decimal; padding-left: 1.3em; margin-bottom: 1.1em; }
.prosa a { text-decoration: underline; text-underline-offset: 3px; }
.prosa a:hover { color: var(--gold-dunkel); }

/* ---------- Rechtliche Seiten (Impressum, Datenschutz) ---------- */
.recht-kopf { position: relative; overflow: hidden; background: var(--tinte); color: #fff; }
.recht-kopf__in { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: calc(var(--hdr) + clamp(32px, 5vw, 80px)) var(--rand) clamp(36px, 4.5vw, 64px); }
.recht-kopf__wort { position: absolute; right: -.04em; bottom: -.2em; margin: 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(5.5rem, 19vw, 20rem); line-height: 1; color: rgba(191, 166, 120, .09); white-space: nowrap; pointer-events: none; user-select: none; }
.recht-kopf .eyebrow { color: var(--gold); }
.recht-kopf .h1 { max-width: 14em; }
.recht-kopf__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: clamp(28px, 4vw, 52px); padding-top: 22px; border-top: 1px solid var(--linie-hell); }
.recht-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.recht-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--linie-hell); font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .78); transition: border-color .3s, color .3s, background .3s; }
.recht-tabs a:hover { border-color: #fff; color: #fff; }
.recht-tabs a[aria-current] { background: var(--gold); border-color: var(--gold); color: var(--tinte); }
.recht-kopf__stand { margin: 0; font-size: .75rem; letter-spacing: .1em; color: rgba(255, 255, 255, .6); }

.recht { max-width: var(--max); margin: 0 auto; padding: clamp(48px, 6vw, 96px) var(--rand) clamp(64px, 8vw, 128px); display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.recht__seite { position: sticky; top: calc(var(--hdr) + 24px); display: grid; gap: 24px; }
.toc { border-top: 1px solid var(--tinte); padding-top: 18px; }
.toc summary { display: none; }
.toc__titel { margin-bottom: 10px; }
.toc a { display: grid; grid-template-columns: 30px 1fr; gap: 6px; padding: 7px 0; font-size: .875rem; line-height: 1.45; color: var(--stein); transition: color .3s, transform .4s var(--kurve); }
.toc a span { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--gold-dunkel); }
.toc a:hover { color: var(--tinte); transform: translateX(4px); }
.toc a[aria-current] { color: var(--tinte); font-weight: 500; }
.recht-karte { background: var(--hell); padding: 26px 24px; font-size: .875rem; line-height: 1.7; }
.recht-karte .eyebrow { margin-bottom: 1em; color: var(--gold-dunkel); }
.recht-karte address { margin-bottom: 12px; }
.recht-karte p { margin: 0 0 14px; overflow-wrap: anywhere; }
.recht-karte a:not(.pfeil) { border-bottom: 1px solid var(--linie); transition: border-color .3s; }
.recht-karte a:not(.pfeil):hover { border-color: var(--tinte); }
.recht-druck { padding: 4px 0; }

.recht__haupt { min-width: 0; max-width: 860px; }
.recht__intro { margin-bottom: 24px; }
.recht__abschnitt { display: grid; grid-template-columns: clamp(48px, 6vw, 92px) minmax(0, 1fr); gap: 0 clamp(12px, 2vw, 32px); padding: clamp(28px, 3.5vw, 48px) 0; border-top: 1px solid var(--linie); scroll-margin-top: calc(var(--hdr) + 24px); }
.recht__abschnitt:first-of-type { border-top-color: var(--tinte); padding-top: clamp(20px, 2.5vw, 32px); }
.recht__nr { font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 2.8vw, 2.8rem); line-height: 1; color: var(--gold); }
.recht__abschnitt h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.3vw, 2.25rem); line-height: 1.15; margin: 0 0 .65em; text-wrap: balance; }
.recht__text p, .recht__text li { color: var(--wald); overflow-wrap: anywhere; }
.recht__text p:last-child, .recht__text ul:last-child { margin-bottom: 0; }
.recht__text ul { display: grid; gap: 8px; margin: 0 0 1.1em; }
.recht__text li { position: relative; padding-left: 30px; }
.recht__text li::before { content: ""; position: absolute; left: 0; top: .85em; width: 16px; height: 1px; background: var(--gold-dunkel); }
.recht__text a { color: var(--tinte); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; transition: color .3s; }
.recht__text a:hover { color: var(--gold-dunkel); }
.recht__text strong { color: var(--tinte); font-weight: 500; }

/* Impressum: Angaben als Karten */
.recht--karten { grid-template-columns: minmax(0, 1fr); }
.recht--karten .recht__haupt { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.recht--karten .recht__intro { grid-column: 1 / -1; }
.recht--karten .recht__abschnitt { display: block; padding: clamp(28px, 3.4vw, 52px); background: var(--hell); border: 0; }
.recht--karten .recht__abschnitt h2 { font-size: clamp(1.4rem, 1.9vw, 1.85rem); padding-bottom: .55em; margin-bottom: .8em; border-bottom: 1px solid var(--linie); }
.recht--karten .recht__abschnitt:last-of-type:nth-of-type(even) { grid-column: 1 / -1; }
.recht--karten .recht__abschnitt:first-of-type { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 6vw, 120px); align-items: end; padding: clamp(36px, 5vw, 80px); background: var(--wald); color: #fff; }
.recht--karten .recht__abschnitt:first-of-type h2 { font-size: clamp(2.2rem, 4vw, 3.8rem); line-height: 1; margin: 0; padding: 0; border: 0; }
.recht--karten .recht__abschnitt:first-of-type .recht__text p { color: rgba(255, 255, 255, .85); font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.7; padding-left: 22px; border-left: 1px solid var(--gold); }

/* ---------- Seitenübergänge ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .35s var(--kurve-io) both vt-aus; }
::view-transition-new(root) { animation: .55s var(--kurve) both vt-ein; }
@keyframes vt-aus { to { opacity: 0; } }
@keyframes vt-ein { from { opacity: 0; transform: translateY(14px); } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav, .hdr__cta { display: none; }
  .burger { display: block; }
  :root { --hdr: 72px; }
  .hdr.ist-fest { height: 64px; }
}
@media (min-width: 1181px) { .mnav { display: none !important; } }

@media (max-width: 960px) {
  .sek__kopf--zeile { grid-template-columns: 1fr; align-items: start; }
  .welt--1, .welt--2 { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .welt--3, .welt--4 { grid-column: span 6; aspect-ratio: 3 / 4; }
  .welt--5 { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .welt .pfeil, .anw__el .pfeil { opacity: 1; transform: none; }
  .streifen, .streifen:nth-child(even) { grid-template-columns: 1fr; }
  .streifen__bild { aspect-ratio: 16 / 10; }
  .streifen:nth-child(even) .streifen__bild { order: 0; }
  .anw__el, .anw__el--1, .anw__el--2, .anw__el--6, .anw__el--7 { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .anw__el--3, .anw__el--4 { grid-column: span 6; aspect-ratio: 3 / 4; }
  .anw__el--5 { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .editorial__raster { padding-top: clamp(96px, 26vw, 200px); }
  .editorial__b1 { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .editorial__text { grid-column: 1 / -1; padding-top: 12px; }
  .gross { align-items: flex-end; justify-content: stretch; min-height: 0; padding: 56vw 0 0; }
  .gross__bild { inset: 0 0 auto; height: 62vw; }
  .gross__karte { width: 100%; }
  .mauer { columns: 2; }
  .beratung, .intro2, .kontakt, .anfrage, .produkt { grid-template-columns: minmax(0, 1fr); }
  .beratung__bild { min-height: 0; aspect-ratio: 4 / 3; }
  .intro2--dreh .intro2__bild { order: -1; }
  .intro2__bild { aspect-ratio: 4 / 3; }
  .werte__in { grid-template-columns: 1fr; }
  .partner { grid-template-columns: 1fr; }
  .ftr__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr__marke { grid-column: 1 / -1; }
  .produkt__medien, .anfrage__form { position: static; }
  .kk { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .kk__text { padding: calc(var(--hdr) + 32px) var(--rand) 40px; }
  .kk__bild { aspect-ratio: 4 / 3; min-height: 0; }
  .kinfo { grid-template-columns: minmax(0, 1fr); }
  .kform { grid-template-columns: minmax(0, 1fr); }
  .kform__links { position: static; }
  .kform__karte { margin: 0 calc(-1 * var(--rand)); }
  .recht { grid-template-columns: minmax(0, 1fr); }
  .recht__seite { display: contents; }
  .toc { order: 1; }
  .recht__haupt { order: 2; }
  .recht-karte { order: 3; }
  .toc { padding: 0; border: 1px solid var(--linie); background: var(--hell); }
  .toc summary { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 18px; margin: 0; cursor: pointer; list-style: none; color: var(--tinte); }
  .toc summary::-webkit-details-marker { display: none; }
  .toc summary::after { content: "+"; font-size: 1.2rem; letter-spacing: 0; color: var(--gold-dunkel); transition: transform .4s var(--kurve); }
  .toc[open] summary::after { transform: rotate(45deg); }
  .toc__titel { display: none; }
  .toc ol { padding: 0 18px 12px; }
  .recht--karten .recht__haupt, .recht--karten .recht__abschnitt:first-of-type { grid-template-columns: minmax(0, 1fr); }

  .produkt { padding-left: 0; padding-right: 0; gap: 24px; }
  .produkt__info { padding: 0 var(--rand); }
  .galerie__buehne { aspect-ratio: 4 / 3.4; }
  .galerie__thumbs { padding-left: var(--rand); padding-right: var(--rand); }
  .anfrage__form { margin: 0 calc(-1 * var(--rand)); padding: 32px var(--rand); }

  /* Filter als Vollbild-Blatt */
  .filter { position: static; z-index: auto; }
  body.filter-offen .hdr { transform: translateY(-101%) !important; }
  .filter__auf { display: inline-flex; }
  .filter__gruppen { position: fixed; inset: 0; z-index: 200; flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 0; border: 0; background: var(--papier); overflow-y: auto; transform: translateY(100%); visibility: hidden; transition: transform .55s var(--kurve), visibility .55s; }
  .filter__gruppen.ist-offen { transform: none; visibility: visible; }
  .filter__mobilkopf { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2; padding: 14px var(--rand); background: var(--papier); border-bottom: 1px solid var(--linie); }
  .filter__mobilkopf .eyebrow { margin: 0; color: var(--tinte); }
  .filter__zu { width: 44px; height: 44px; font-size: 1.8rem; line-height: 1; }
  .filter__mobilfuss { display: block; position: sticky; bottom: 0; margin-top: auto; padding: 14px var(--rand) calc(14px + env(safe-area-inset-bottom)); background: var(--papier); border-top: 1px solid var(--linie); }
  .filter__mobilfuss .btn { width: 100%; }
  .fg { border-bottom: 1px solid var(--linie); }
  .fg summary { justify-content: space-between; min-height: 60px; padding: 0 var(--rand); border: 0; font-size: .75rem; }
  .fg summary span:first-child { flex: 1; }
  .fg.ist-aktiv summary { background: none; color: var(--tinte); }
  .fg__liste { position: static; max-height: none; border: 0; background: none; padding: 0 0 12px; }
  .fo { padding: 12px var(--rand); font-size: 1rem; }
  .fo input { width: 22px; height: 22px; }
  body.filter-offen { overflow: hidden; }
}

@media (max-width: 700px) {
  body { font-size: 15px; }
  .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo__img, .hdr.ist-fest .logo__img { height: 48px; }
  .logo__img--kopf, .hdr.ist-fest .logo__img--kopf { height: 42px; }
  .logo--gross .logo__img { height: 84px; }
  .hero__scroll { display: none; }
  .hero__btns .btn, .beratung .btn { flex: 1 1 100%; }
  .welt--3, .welt--4, .anw__el--3, .anw__el--4 { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .form__zeile { grid-template-columns: 1fr; }
  .beratung__info { grid-template-columns: 1fr; }
  .korb__el { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
  .korb__akt { margin-left: 0; width: 100%; }
  .wahl__opt { flex: 1 1 calc(50% - 8px); min-height: 52px; }
  .daten > div { grid-template-columns: 1fr; gap: 2px; }
  .ftr__in { grid-template-columns: 1fr; }
  .karte__bild::after { content: none; }
  .mauer--2 { columns: 1; }
  .uk { min-height: 86svh; }
  .uk__saeulen { grid-template-columns: minmax(0, 1fr); }
  .uk__saeulen li, .uk__saeulen li + li { padding: 12px 0; border-left: 0; border-bottom: 1px solid var(--linie-hell); }
  .kk__schnell { grid-template-columns: minmax(0, 1fr); }
  .kk__weg, .kk__weg + .kk__weg { padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--linie-hell); }
  .recht__abschnitt { grid-template-columns: minmax(0, 1fr); }
  .recht__nr { font-size: 1.5rem; margin-bottom: 10px; }
  .recht-kopf__fuss { flex-direction: column; align-items: flex-start; }
  .hinweis { right: 0; left: 0; bottom: 0; width: 100%; border-width: 1px 0 0; }
  .btns .btn { flex: 1 1 auto; }
}
@media (max-width: 420px) {
  .mauer { columns: 1; }
  .chips li { font-size: .625rem; padding: 3px 6px; }
}

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; transition-duration: .001s !important; transition-delay: 0s !important; }
  .js [data-reveal], .js [data-reveal="bild"], .js [data-reveal="bild"] img, .js .zeilen > span > span, .js .hero__eyebrow, .js .hero__text, .js .hero__btns, .js .hero__scroll { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-parallax] { transform: none !important; }
  .hero__licht { display: none; }
  .hero__bild, .hero__titel, .hero__in { translate: none !important; }
  .js .hero__eyebrow::before { transform: none !important; }
  @view-transition { navigation: none; }
}

@media print {
  .hdr, .ftr, .mnav, .hinweis, .filter, .beratung, .hero__scroll { display: none !important; }
  .recht__seite, .recht-tabs, .recht-kopf__wort, .crumbs { display: none !important; }
  .recht-kopf { background: none; color: #000; }
  .recht-kopf__in { padding: 0 0 16px; }
  .recht { display: block; padding: 0; }
  .recht--karten .recht__abschnitt:first-of-type { background: none; color: #000; }
  .recht--karten .recht__abschnitt:first-of-type .recht__text p { color: #000; }
  body { background: #fff; }
  .js [data-reveal], .js [data-reveal="bild"] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}