/* ══════════════════════════════════════════════════════════════════════
   Seifert Ofenstüble · Gestaltung „Abendlicht“ (September 2026)
   Randlose Bilder, leichte große Schrift, dunkle Flächen, feine
   Messinglinien. Effekte: Funken im Hero, gleitende Ofentafeln,
   Füll-Linie im Ablauf, Lichtschein unter der Maus, Stadtplan.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Farben der bisherigen Seite */
  --tanne:        #131E19;
  --tanne-mittel: #16221C;
  --tanne-hell:   #1C2B24;
  --moos:         #2E4739;
  --messing:      #B4894F;
  --messing-hell: #D8B57F;
  --messing-tief: #7E5C2B;   /* Akzentschrift auf hell, 5,6:1 */
  --glut:         #E2A867;
  --kalk:         #F2F3EF;
  --kalk-tief:    #E8EAE3;
  --rauch:        #313832;
  --rauch-leise:  #59615A;   /* Nebentext auf hell, 5,9:1 */

  --linie-hell:   rgba(19, 30, 25, .16);
  --linie-dunkel: rgba(242, 243, 239, .14);
  --text-dunkel:  rgba(242, 243, 239, .76);
  --leise-dunkel: rgba(242, 243, 239, .62);  /* 6,5:1 auf Tanne */

  --display: "Red Hat Display", "Helvetica Neue", Arial, sans-serif;
  --text:    "Albert Sans", "Helvetica Neue", Arial, sans-serif;

  /* Type Scale: MIN bei 1280 px, MAX bei 1920 px.
     vw = (MAX − MIN) / 640 · 100, Basis = MIN − vw/100 · 1280 */
  --fs-hero:  clamp(5.5rem, calc(0.5rem + 6.25vw), 8rem);           /*  88 → 128 */
  --fs-h2:    clamp(3.25rem, calc(0.25rem + 3.75vw), 4.75rem);      /*  52 →  76 */
  --fs-h3:    clamp(2.5rem, calc(0.5rem + 2.5vw), 3.5rem);          /*  40 →  56 */
  --fs-weg:   clamp(1.625rem, calc(0.625rem + 1.25vw), 2.125rem);   /*  26 →  34 */
  --fs-titel: clamp(1.375rem, calc(0.625rem + 0.9375vw), 1.75rem);  /*  22 →  28 */
  --fs-lead:  clamp(1.1875rem, calc(0.8125rem + 0.4688vw), 1.375rem); /* 19 → 22 */
  --fs-text:  clamp(1rem, calc(0.8125rem + 0.2344vw), 1.09375rem);  /*  16 → 17,5 */
  --fs-klein: clamp(0.875rem, calc(0.75rem + 0.1562vw), 0.9375rem); /*  14 →  15 */
  --fs-label: clamp(0.75rem, calc(0.625rem + 0.1562vw), 0.8125rem); /*  12 →  13 */
  --fs-schriftzug: clamp(8.5rem, calc(-1.5rem + 12.5vw), 13.5rem);  /* 136 → 216 */

  /* Abstände */
  --pad:  clamp(7rem, calc(0rem + 8.75vw), 10.5rem);                /* 112 → 168 */
  --rand: clamp(2.5rem, calc(-1.5rem + 5vw), 4.5rem);               /*  40 →  72 */
  --kopf: 5.25rem;
  --kopf-fest: 4.25rem;
  --breite: 1680px;
  --einzug: max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand)));
  --weich: cubic-bezier(.2, .7, .2, 1);
}

/* Unter 1280 px: eigene Stufe von 360 bis 1280 px, bei 1280 nahtlos */
@media (max-width: 1279.98px) {
  :root {
    --fs-hero:  clamp(2.75rem, calc(1.6739rem + 4.7826vw), 5.5rem);      /* 44 → 88 */
    --fs-h2:    clamp(2.125rem, calc(1.6848rem + 1.9565vw), 3.25rem);    /* 34 → 52 */
    --fs-h3:    clamp(1.75rem, calc(1.4565rem + 1.3043vw), 2.5rem);      /* 28 → 40 */
    --fs-weg:   clamp(1.5rem, calc(1.4511rem + 0.2174vw), 1.625rem);     /* 24 → 26 */
    --fs-titel: clamp(1.25rem, calc(1.2011rem + 0.2174vw), 1.375rem);    /* 20 → 22 */
    --fs-lead:  clamp(1.0625rem, calc(1.0136rem + 0.2174vw), 1.1875rem); /* 17 → 19 */
    --fs-text:  1rem;
    --fs-klein: 0.875rem;
    --fs-label: 0.75rem;
    --fs-schriftzug: clamp(3.25rem, calc(-0.1rem + 11.1vw), 8.5rem);     /* 52 → 136 */
    --pad:  clamp(4.5rem, calc(3.5217rem + 4.3478vw), 7rem);             /* 72 → 112 */
    --rand: clamp(1.25rem, calc(0.7609rem + 2.1739vw), 2.5rem);          /* 20 → 40 */
  }
}
@media (max-width: 700px) {
  :root { --kopf: 4rem; --kopf-fest: 4rem; }
}

/* ─── Grundlagen ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; scroll-padding-top: var(--kopf-fest); }
body {
  background: var(--kalk);
  color: var(--rauch);
  font: 400 var(--fs-text)/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
ul, ol { padding: 0; }
h1, h2, h3, h4 { font-weight: 300; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
strong, b { font-weight: 500; }
address { font-style: normal; }
.nw { white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid var(--messing); outline-offset: 4px; }

.huelle { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
.huelle > *, [class$="raster"] > *, .kopfzeile > *, .welt-flaeche > *, .gegen > *, .wege > * { min-width: 0; }

.skip { position: absolute; left: 1rem; top: -5rem; z-index: 100; padding: .8rem 1.2rem; background: var(--kalk); color: var(--tanne); }
.skip:focus { top: 1rem; }

.hell   { background: var(--kalk); color: var(--rauch); }
.hell--tief { background: var(--kalk-tief); }
.dunkel { background: var(--tanne); color: var(--text-dunkel); }
.dunkel--mittel { background: var(--tanne-mittel); }
.hell h2, .hell h3 { color: var(--tanne); }
.dunkel h2, .dunkel h3 { color: var(--kalk); }

.label {
  font: 500 var(--fs-label)/1.3 var(--text);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--messing-hell);
}
.hell .label { color: var(--messing-tief); }
.betont { color: var(--messing-hell); }
.hell .betont { color: var(--messing-tief); }

.lead { font-size: var(--fs-lead); line-height: 1.55; max-width: 42ch; }
.hell .lead { color: var(--rauch-leise); }
.hell .lead strong { color: var(--tanne); }
.dunkel .lead { color: var(--leise-dunkel); }
.dunkel .lead strong { color: var(--kalk); font-weight: 400; }

/* Abschnittskopf: Überschrift links, Vorspann rechts unten */
.kopfzeile {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 1.5rem 4rem; align-items: end;
  margin-bottom: clamp(3.5rem, 5vw, 5.5rem);
}
.kopfzeile--kurz { grid-template-columns: minmax(0, 1fr); }
.kopfzeile h2 {
  margin-top: 1.3rem;
  font: 300 var(--fs-h2)/1.1 var(--display);
  letter-spacing: -.035em; max-width: 15ch;
}
.kopfzeile .lead { justify-self: end; }

/* ─── Knöpfe und Links ───────────────────────────────────────────────── */
.knopfreihe { display: flex; flex-wrap: wrap; gap: .75rem; }
.knopfreihe--mitte { justify-content: center; margin-top: clamp(3rem, 5vw, 4.5rem); }
.knopf {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 1.3rem;
  min-height: 3.5rem; padding: .9rem 1.5rem;
  border: 1px solid rgba(216, 181, 127, .7);
  font: 400 var(--fs-klein)/1.2 var(--text); letter-spacing: .06em;
  color: var(--kalk); max-width: 100%;
  text-wrap: balance;
  transition: color .45s, border-color .45s;
}
.knopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--messing);
  transform: translateY(101%);
  transition: transform .5s var(--weich);
}
@media (hover: hover) { .knopf:hover::before, .knopf:focus-visible::before { transform: none; } }
@media (hover: hover) { .knopf:hover, .knopf:focus-visible { color: var(--tanne); border-color: var(--messing); } }
.knopf svg { width: 34px; height: 10px; flex: none; transition: transform .45s var(--weich); }
@media (hover: hover) { .knopf:hover svg { transform: translateX(5px); } }
.knopf--klar { border-color: rgba(242, 243, 239, .3); }
.hell .knopf { color: var(--tanne); border-color: rgba(19, 30, 25, .35); }
.hell .knopf::before { background: var(--tanne); }
@media (hover: hover) { .hell .knopf:hover { color: var(--kalk); border-color: var(--tanne); } }
.knopf--hell { background: var(--kalk); color: var(--tanne); border-color: var(--kalk); font-size: var(--fs-lead); padding: 1.1rem 1.8rem; }
.knopf--hell::before { background: var(--messing-hell); }
@media (hover: hover) { .knopf--hell:hover { border-color: var(--messing-hell); } }
.knopf--voll { background: var(--messing); border-color: var(--messing); color: var(--tanne); }
.knopf--voll::before { background: var(--kalk); }
@media (hover: hover) { .knopf--voll:hover { border-color: var(--kalk); } }

.textlink {
  display: inline-flex; align-items: center; gap: 1rem;
  min-height: 2.75rem; margin-top: 1.2rem;
  font: 500 var(--fs-klein)/1.3 var(--text); letter-spacing: .05em;
  color: var(--messing-hell);
}
.textlink svg { width: 34px; height: 10px; flex: none; transition: transform .45s var(--weich); }
@media (hover: hover) { .textlink:hover svg { transform: translateX(6px); } }

/* Häkchen und Striche */
.haken, .strichliste { list-style: none; }
.haken li, .strichliste li { position: relative; padding-left: 1.9rem; }
.haken li + li, .strichliste li + li { margin-top: .6rem; }
.haken li::before {
  content: ""; position: absolute; left: .1rem; top: .42em;
  width: .8rem; height: .42rem;
  border-left: 1.5px solid var(--messing-hell); border-bottom: 1.5px solid var(--messing-hell);
  transform: rotate(-45deg);
}
.hell .haken li::before { border-color: var(--messing-tief); }
.strichliste li::before { content: ""; position: absolute; left: 0; top: .8em; width: .9rem; height: 1px; background: var(--messing); }
.hell .strichliste li { color: var(--rauch-leise); }

/* ─── Einblenden (nur mit Skript, nicht bei reduzierter Bewegung) ─────── */
@media (prefers-reduced-motion: no-preference) {
  .js [data-zeigen] {
    opacity: 0; transform: translateY(2rem);
    transition: opacity 1s ease var(--verzug, 0s), transform 1.1s var(--weich) var(--verzug, 0s);
  }
  .js [data-zeigen].ist-da { opacity: 1; transform: none; }
  .js [data-zeigen-kinder] > * { opacity: 0; transform: translateY(1.2rem); transition: opacity .8s ease, transform .9s var(--weich); }
  .js [data-zeigen-kinder].ist-da > * { opacity: 1; transform: none; }
  .js [data-zeigen-kinder] > :nth-child(2) { transition-delay: .07s; }
  .js [data-zeigen-kinder] > :nth-child(3) { transition-delay: .14s; }
  .js [data-zeigen-kinder] > :nth-child(4) { transition-delay: .21s; }
  .js [data-zeigen-kinder] > :nth-child(5) { transition-delay: .28s; }
  .js [data-zeigen-kinder] > :nth-child(6) { transition-delay: .35s; }
  .js [data-zeigen-bild] { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s cubic-bezier(.6, 0, .2, 1); }
  .js [data-zeigen-bild] img { transform: scale(1.18); transition: transform 2s var(--weich); }
  .js [data-zeigen-bild].ist-da { clip-path: inset(0); }
  .js [data-zeigen-bild].ist-da img { transform: none; }
}

/* ─── Zeiger-Kreis über Bildern ──────────────────────────────────────── */
.zeiger { display: none; }
@media (hover: hover) and (pointer: fine) {
  .zeiger {
    position: fixed; left: 0; top: 0; z-index: 90;
    display: grid; place-items: center;
    width: 5.5rem; height: 5.5rem; margin: -2.75rem 0 0 -2.75rem;
    border-radius: 50%;
    background: var(--messing-hell); color: var(--tanne);
    font: 500 var(--fs-label) var(--text); letter-spacing: .14em; text-transform: uppercase;
    pointer-events: none;
    transform: translate3d(var(--zx, -100px), var(--zy, -100px), 0) scale(0);
    transition: transform .35s var(--weich);
  }
  .zeiger.ist-aktiv { transform: translate3d(var(--zx), var(--zy), 0) scale(1); }
  .mit-zeiger [data-zeiger], .mit-zeiger [data-zeiger] * { cursor: none; }
}

/* ─── Lichtschein unter der Maus ─────────────────────────────────────── */
[data-schein] { position: relative; isolation: isolate; }
[data-schein]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(38rem circle at var(--mx, 75%) var(--my, 30%), rgba(226, 168, 103, .16), transparent 60%);
  opacity: var(--schein, .6);
  transition: opacity .6s;
}

/* ─── Kopf ───────────────────────────────────────────────────────────── */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--kopf);
  padding-inline: var(--einzug);
  color: var(--kalk);
  transition: height .4s ease, transform .5s var(--weich);
}
/* Fläche und Milchglas auf ::before: backdrop-filter auf .kopf selbst
   macht den Kopf zum Bezugsrahmen für position: fixed. */
.kopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(19, 30, 25, 0);
  border-bottom: 1px solid rgba(242, 243, 239, .12);
  transition: background-color .4s, border-color .4s;
}
.kopf.ist-fest { height: var(--kopf-fest); }
.kopf.ist-fest::before {
  background: rgba(19, 30, 25, .9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-color: rgba(216, 181, 127, .2);
}
.kopf.ist-weg { transform: translateY(-100%); }
.menue-offen .kopf { transform: none; }
.menue-offen .kopf::before { background: transparent; backdrop-filter: none; border-color: var(--linie-dunkel); }

.menue-knopf {
  justify-self: start; display: inline-flex; align-items: center; gap: .9rem;
  min-height: 2.75rem; font: 400 var(--fs-klein) var(--text); letter-spacing: .05em;
}
.menue-striche { position: relative; width: 26px; height: 8px; }
.menue-striche::before, .menue-striche::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  transition: transform .4s, top .4s, right .4s;
}
.menue-striche::before { top: 0; }
.menue-striche::after { top: 7px; right: 8px; }
@media (hover: hover) { .menue-knopf:hover .menue-striche::after { right: 0; } }
.menue-knopf[aria-expanded="true"] .menue-striche::before { top: 4px; transform: rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-striche::after { top: 4px; right: 0; transform: rotate(-45deg); }

.logo img { width: 150px; transition: width .4s; }
.kopf.ist-fest .logo img { width: 136px; }

.kopf-tel {
  justify-self: end; display: inline-flex; align-items: center; gap: .8rem;
  min-height: 2.75rem; font: 400 var(--fs-klein) var(--text); letter-spacing: .05em;
  transition: color .3s;
}
.kopf-tel-wort { color: var(--leise-dunkel); }
@media (hover: hover) { .kopf-tel:hover { color: var(--messing-hell); } }
.kopf-tel-symbol { width: 20px; height: 20px; display: none; }

/* ─── Vollbildmenü ───────────────────────────────────────────────────── */
.menue {
  position: fixed; inset: 0; z-index: 55;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: end; gap: 3rem;
  padding: calc(var(--kopf) + 2.5rem) var(--einzug) clamp(2.5rem, 5vw, 4.5rem);
  background: var(--tanne-mittel); color: var(--kalk);
  overflow-y: auto;
}
.menue-liste > a, .menue-zweig > a {
  display: flex; align-items: baseline; gap: 1.4rem;
  padding-block: .2rem;
  font: 300 clamp(1.6rem, 2.4vw, 2.6rem)/1.25 var(--display); letter-spacing: -.03em;
  color: rgba(242, 243, 239, .86);
  transition: color .3s, transform .4s var(--weich);
}
.menue-liste > a > span, .menue-zweig > a > span {
  flex: none; min-width: 1.8rem;
  font: 500 var(--fs-label) var(--text); letter-spacing: .14em;
  color: var(--messing-hell);
}
@media (hover: hover) {
  .menue-liste > a:hover, .menue-zweig > a:hover { color: var(--messing-hell); transform: translateX(.6rem); }
}
/* Unterpunkte des Sortiments: führen zum jeweiligen Ofen */
.menue-unter { list-style: none; margin: .4rem 0 .6rem 3.2rem; display: grid; gap: .1rem; }
.menue-unter a {
  position: relative; display: block; padding: .5rem 0 .5rem 1.6rem;
  font-size: var(--fs-text); color: var(--leise-dunkel);
  transition: color .3s, transform .3s var(--weich);
}
.menue-unter a::before {
  content: ""; position: absolute; left: 0; top: 1.15em;
  width: .8rem; height: 1px; background: var(--messing);
}
@media (hover: hover) { .menue-unter a:hover { color: var(--kalk); transform: translateX(.35rem); } }
.menue-fuss { justify-self: end; color: var(--leise-dunkel); font-size: var(--fs-klein); line-height: 1.7; }
.menue-fuss a { display: block; margin-bottom: .8rem; font: 300 var(--fs-titel) var(--display); color: var(--kalk); }
@media (prefers-reduced-motion: no-preference) {
  .menue:not([hidden]) .menue-liste > * { animation: hochkommen .7s var(--weich) both; }
  .menue:not([hidden]) .menue-liste > :nth-child(2) { animation-delay: .04s; }
  .menue:not([hidden]) .menue-liste > :nth-child(3) { animation-delay: .08s; }
  .menue:not([hidden]) .menue-liste > :nth-child(4) { animation-delay: .12s; }
  .menue:not([hidden]) .menue-liste > :nth-child(5) { animation-delay: .16s; }
  .menue:not([hidden]) .menue-liste > :nth-child(6) { animation-delay: .2s; }
  .menue:not([hidden]) .menue-liste > :nth-child(7) { animation-delay: .24s; }
  .menue:not([hidden]) .menue-liste > :nth-child(8) { animation-delay: .28s; }
  .menue:not([hidden]) .menue-liste > :nth-child(9) { animation-delay: .32s; }
  .menue:not([hidden]) .menue-liste > :nth-child(10) { animation-delay: .36s; }
  .menue:not([hidden]) .menue-fuss { animation: einblenden .8s .2s both; }
}
@keyframes hochkommen { from { opacity: 0; transform: translateY(1.2rem); } }
@keyframes einblenden { from { opacity: 0; } }

/* ─── Hero ───────────────────────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: min(100svh, 1080px);
  padding-top: calc(var(--kopf) + 3rem);
  background: var(--tanne); color: var(--kalk);
}
.hero-bild { position: absolute; inset: -4% 0 0 0; z-index: -2; will-change: transform; }
.hero-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 18% 60%;
  /* gespiegelt: object-position rechnet im ungespiegelten Bild */
  transform: scaleX(-1) scale(1.02);
}
.funken { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(19, 30, 25, .97) 0%, rgba(19, 30, 25, .6) 40%, rgba(19, 30, 25, .15) 72%, rgba(19, 30, 25, .5) 100%),
    linear-gradient(to right, rgba(19, 30, 25, .75) 0%, rgba(19, 30, 25, .35) 45%, transparent 65%);
}
.hero-inhalt {
  width: 100%; max-width: var(--breite); margin-inline: auto;
  padding: 0 var(--rand) clamp(3rem, 5vw, 4.5rem);
  display: grid; grid-template-columns: minmax(0, 1fr);
}
.hero-willkommen { margin-top: .9rem; max-width: 46ch; font-size: var(--fs-klein); line-height: 1.55; color: rgba(242, 243, 239, .74); }
.hero h1 {
  margin-top: 1.1rem; max-width: 8.6em;
  font: 300 var(--fs-hero)/1.1 var(--display); letter-spacing: -.045em;
  color: var(--kalk);
}
.hero-unter {
  margin-top: clamp(1.8rem, 2.6vw, 2.4rem);
  display: grid; grid-template-columns: minmax(0, 44ch) max-content;
  grid-template-areas: "text aktion" "meister meister";
  justify-content: start; gap: 1.6rem 3rem; align-items: start;
}
.hero-text { grid-area: text; }
.hero-aktion { grid-area: aktion; }
.hero-text {
  font-size: var(--fs-lead); line-height: 1.5;
  color: rgba(242, 243, 239, .8);
  padding-left: 1.5rem; border-left: 1px solid rgba(216, 181, 127, .45);
}
.hero-text strong { color: var(--kalk); font-weight: 400; }
.hero-aktion .knopfreihe { flex-direction: column; align-items: stretch; }
.hero-aktion .knopf { justify-content: space-between; }
.zusicherung { margin-top: .9rem; font-size: var(--fs-label); letter-spacing: .04em; color: var(--leise-dunkel); }
/* Vater und Sohn: kleine Zeile mit Namen unter dem Text, im Fluss, nicht über dem Bild */
.hero-meister {
  grid-area: meister;
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.1rem;
  margin: 0; padding-left: 1.5rem;
}
.hero-meister img {
  flex: none; width: clamp(6.5rem, 8vw, 8.5rem);
  aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 35%;
  outline: 1px solid rgba(216, 181, 127, .45); outline-offset: 3px;
}
.hero-meister figcaption { min-width: 0; overflow-wrap: break-word; font-size: var(--fs-klein); line-height: 1.45; color: rgba(242, 243, 239, .72); }
.hero-meister b { display: block; margin-bottom: .15rem; font: 400 var(--fs-text)/1.3 var(--text); color: var(--kalk); }

/* Niedrige Laptop-Fenster (1366 × 768 und ähnlich): Hero etwas dichter,
   damit Text, Knöpfe und die Zeile mit Vater und Sohn ganz ins Bild passen */
@media (min-width: 1181px) and (max-height: 940px) {
  .hero { padding-top: calc(var(--kopf) + 1.25rem); }
  .hero-inhalt { padding-bottom: 2rem; }
  .hero-willkommen { margin-top: .5rem; }
  .hero h1 { margin-top: .6rem; }
  .hero-unter { margin-top: 1.3rem; row-gap: 1.1rem; }
  .hero-meister img { width: 6rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-foto img { animation: heroBild 2.6s var(--weich) both; }
  .hero-zeile { animation: hochkommen 1.1s var(--weich) both; }
  .hero-kopf > :nth-child(2) { animation-delay: .08s; }
  .hero-kopf > :nth-child(3) { animation-delay: .16s; }
  .hero-kopf > :nth-child(4) { animation-delay: .3s; }
}
@keyframes heroBild { from { transform: scaleX(-1) scale(1.1); } }

/* ─── Markenband ─────────────────────────────────────────────────────── */
.marken { padding-block: clamp(3.5rem, 5vw, 5rem); }
.marken-innen { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1.5rem 2rem; align-items: center; }
.marken-liste { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.marken-liste li { position: relative; padding: .4rem 1.2rem; border-left: 1px solid var(--linie-hell); }
.marken-hinweis { margin-top: .5rem; font-size: var(--fs-klein); color: var(--rauch-leise); }
.marken-liste b { display: block; font: 400 var(--fs-titel)/1.2 var(--display); letter-spacing: -.015em; color: var(--tanne); transition: color .3s; }
.marken-liste b a { display: inline-block; }
/* Herstellernamen sind Links: auf Touch groß genug zum Antippen */
@media (max-width: 1180px), (pointer: coarse) {
  .marken-liste b a { padding-block: .7rem; margin-block: -.35rem; }
}
.marken-liste span { display: block; margin-top: .3rem; font-size: var(--fs-klein); line-height: 1.4; color: var(--rauch-leise); }
.marken-liste li:not(.marken-mehr)::after {
  content: ""; position: absolute; left: 1.2rem; bottom: 0; width: 2.5rem; height: 1px; background: var(--messing);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--weich);
}
@media (hover: hover) { .marken-liste li:hover::after { transform: scaleX(1); } }
@media (hover: hover) { .marken-liste li:hover b { color: var(--messing-tief); } }
.marken-liste .marken-mehr span { color: var(--messing-tief); font-weight: 500; }

/* ─── Ofenwelten: Tafeln gleiten übereinander ────────────────────────── */
.ofenwelten { padding-block: var(--pad); }
.welt {
  position: sticky;
  top: calc(var(--kopf-fest) + 1.5rem + var(--i) * 1.4rem);
  margin-bottom: clamp(1.5rem, 3vw, 3rem);
}
.welt:last-child { margin-bottom: 0; }
.welt-flaeche {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  background: var(--tanne-hell);
  border-top: 1px solid rgba(216, 181, 127, .4);
  box-shadow: 0 -2.5rem 4rem rgba(8, 12, 10, .35);
  transform-origin: 50% 0;
  transform: scale(calc(1 - var(--zurueck, 0) * .05));
  filter: brightness(calc(1 - var(--zurueck, 0) * .45));
}
.welt-bild { position: relative; display: block; width: 100%; min-height: clamp(20rem, 27vw, 30rem); overflow: hidden; cursor: zoom-in; }
.welt-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--weich); }
@media (hover: hover) { .welt-bild:hover img { transform: scale(1.05); } }
.welt-text { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 3.6vw, 3.6rem); }
.welt-nr { font: 500 var(--fs-label) var(--text); letter-spacing: .14em; color: var(--messing-hell); }
.welt-nr span { color: var(--leise-dunkel); }
.welt h3 { margin: .8rem 0 1rem; font: 300 var(--fs-h3)/1.15 var(--display); letter-spacing: -.03em; }
.welt-text p { max-width: 46ch; }
.welt-typen { margin-top: 1rem; font-size: var(--fs-klein); }
.welt-typen b { color: var(--kalk); }
.welt-text .textlink { align-self: flex-start; }

/* Glut und Flamme der Ofenzeichnung im Ablauf */
@keyframes atmen { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes zucken {
  0%, 100% { transform: scaleY(1) scaleX(1); opacity: 1; }
  30% { transform: scaleY(1.07) scaleX(.96); opacity: .9; }
  65% { transform: scaleY(.96) scaleX(1.04); opacity: 1; }
}

/* ─── Das Problem ────────────────────────────────────────────────────── */
.problem { padding-block: var(--pad); }
.sorgen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem clamp(2.5rem, 5vw, 6rem); }
.sorge { position: relative; padding-top: 2.2rem; }
.sorge::before, .sorge::after { content: ""; position: absolute; left: 0; top: 0; height: 1px; }
.sorge::before { right: 0; background: var(--linie-hell); }
.sorge::after { width: 100%; background: var(--messing); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--weich) .3s; }
.sorge.ist-da::after, html:not(.js) .sorge::after { transform: scaleX(1); }
.sorge-nr { display: block; margin-bottom: 1.2rem; font: 300 var(--fs-h3)/1 var(--display); color: var(--messing-tief); }
.sorge h3 { font: 400 var(--fs-titel)/1.25 var(--display); letter-spacing: -.015em; max-width: 26ch; }
.sorge .strichliste { margin-top: 1.2rem; }

/* ─── Ablauf ─────────────────────────────────────────────────────────── */
.ablauf { padding-block: var(--pad); }
.ablauf-raster { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 3rem clamp(3rem, 6vw, 7rem); align-items: start; }
.ablauf-bild { position: sticky; top: calc(var(--kopf-fest) + 3rem); justify-self: center; width: min(100%, 25rem); }
.ablauf-bild svg { position: relative; width: 100%; height: auto; }
.ablauf-glut {
  position: absolute; left: 12%; top: 32%; width: 70%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(226, 168, 103, .32), transparent 65%);
  animation: atmen 5.5s ease-in-out infinite;
}
.flamme { animation: zucken 3.4s ease-in-out infinite; transform-origin: 197px 384px; }
.flamme-kern { animation: zucken 2.6s ease-in-out infinite reverse; transform-origin: 197px 384px; }
.zug { stroke-dasharray: 26 210; animation: aufsteigen 6s linear infinite; }
@keyframes aufsteigen { to { stroke-dashoffset: -236; } }

.schritte { --p: clamp(4.25rem, 5.5vw, 5.75rem); list-style: none; position: relative; padding-left: var(--p); }
.schritt-linie { position: absolute; left: 1.45rem; top: 1.5rem; bottom: 3rem; width: 1px; background: var(--linie-dunkel); }
.schritt-linie span { position: absolute; left: 0; top: 0; width: 1px; height: var(--fuellung, 0%); background: linear-gradient(var(--messing-hell), var(--glut)); box-shadow: 0 0 12px rgba(226, 168, 103, .6); }
.schritt { position: relative; padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.schritt:last-child { padding-bottom: 0; }
.schritt-nr {
  position: absolute; left: calc(-1 * var(--p)); top: -.1rem;
  width: 2.9rem; height: 2.9rem; display: grid; place-items: center;
  border: 1px solid rgba(242, 243, 239, .25); border-radius: 50%;
  background: var(--tanne-mittel);
  font: 400 var(--fs-klein) var(--display); color: var(--leise-dunkel);
  transition: background-color .6s, color .6s, border-color .6s, box-shadow .6s;
}
.schritt.ist-erreicht .schritt-nr, html:not(.js) .schritt-nr {
  background: var(--messing-hell); border-color: var(--messing-hell); color: var(--tanne);
  box-shadow: 0 0 0 .45rem rgba(216, 181, 127, .12);
}
.schritt h3 { font: 400 var(--fs-titel)/1.25 var(--display); letter-spacing: -.015em; padding-top: .35rem; }
.schritt > p { margin-top: .4rem; color: var(--text-dunkel); }
.schritt .haken { margin-top: 1rem; font-size: var(--fs-klein); }

.zusage {
  position: relative; overflow: hidden;
  margin-top: clamp(3.5rem, 6vw, 5.5rem);
  padding: clamp(2.2rem, 4vw, 3.8rem);
  display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 1.5rem clamp(3rem, 6vw, 7rem);
  background: radial-gradient(70% 140% at 90% 0%, rgba(226, 168, 103, .14), transparent 60%), var(--tanne);
  border-left: 2px solid var(--messing);
}
.zusage > .label { padding-top: .8em; }
.zusage h3 { font: 300 var(--fs-h3)/1.15 var(--display); letter-spacing: -.03em; max-width: 20ch; }
.zusage p { margin-top: 1.2rem; max-width: 56ch; }

/* ─── Band ───────────────────────────────────────────────────────────── */
.band { background: var(--moos); color: rgba(242, 243, 239, .82); padding-block: clamp(4.5rem, 7vw, 7.5rem); overflow: hidden; }
.band[data-schein]::after { background: radial-gradient(36rem circle at var(--mx, 80%) var(--my, 40%), rgba(226, 168, 103, .22), transparent 60%); }
.band-raster { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2.5rem 4rem; align-items: center; }
.band h2 { font: 300 var(--fs-h2)/1.1 var(--display); letter-spacing: -.035em; color: var(--kalk); max-width: 15ch; }
.band h2 + p { margin-top: 1.2rem; font-size: var(--fs-lead); max-width: 40ch; }
.band-rechts { justify-self: end; }
.band .zusicherung { color: rgba(242, 243, 239, .8); font-size: var(--fs-klein); }
.band .zusicherung a { text-decoration: underline; text-decoration-color: rgba(242, 243, 239, .35); text-underline-offset: .25em; }
@media (hover: hover) { .band .zusicherung a:hover { text-decoration-color: var(--messing-hell); } }

/* ─── Gegenüberstellung ──────────────────────────────────────────────── */
.unterschied { padding-block: var(--pad); }
.gegen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gegen-spalte { padding: clamp(2rem, 4vw, 3.8rem); border: 1px solid var(--linie-hell); }
.gegen-spalte--stark { background: var(--tanne); border-color: var(--tanne); color: var(--text-dunkel); }
.gegen-kopf { font: 500 var(--fs-label)/1.3 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--rauch-leise); }
.gegen-spalte--stark .gegen-kopf { color: var(--messing-hell); }
.gegen-spalte h3 { margin-top: 1rem; font: 300 var(--fs-h3)/1.15 var(--display); letter-spacing: -.03em; max-width: 14ch; color: var(--tanne); }
.gegen-spalte--stark h3 { color: var(--kalk); }
.gegen-liste { list-style: none; margin-top: clamp(1.6rem, 2.5vw, 2.4rem); }
.gegen-liste li { position: relative; padding: .95rem 0 .95rem 2rem; border-top: 1px solid var(--linie-hell); color: var(--rauch-leise); }
.gegen-spalte--stark .gegen-liste li { border-color: var(--linie-dunkel); color: var(--text-dunkel); }
.gegen-liste li::before { content: ""; position: absolute; left: 0; top: calc(.95rem + .8em); width: .9rem; height: 1px; background: rgba(19, 30, 25, .35); }
.gegen-spalte--stark .gegen-liste li::before {
  top: calc(.95rem + .42em); left: .1rem; width: .8rem; height: .42rem; background: none;
  border-left: 1.5px solid var(--messing-hell); border-bottom: 1.5px solid var(--messing-hell); transform: rotate(-45deg);
}
@media (prefers-reduced-motion: no-preference) {
  .js .gegen-spalte .gegen-liste li { opacity: 0; transform: translateX(-1rem); transition: opacity .7s ease, transform .8s var(--weich); }
  .js .gegen-spalte.ist-da .gegen-liste li { opacity: 1; transform: none; }
  .js .gegen-liste li:nth-child(2) { transition-delay: .08s; }
  .js .gegen-liste li:nth-child(3) { transition-delay: .16s; }
  .js .gegen-liste li:nth-child(4) { transition-delay: .24s; }
  .js .gegen-liste li:nth-child(5) { transition-delay: .32s; }
}

/* ─── Der Meister ────────────────────────────────────────────────────── */
.meister { padding-block: var(--pad); }
/* Zwei Fotos gleich hoch: Spalten im Verhältnis der Seitenverhältnisse 2 : 1,25 */
.meister-bilder {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.25fr);
  gap: clamp(.75rem, 1.2vw, 1.25rem);
  margin-bottom: clamp(3rem, 5vw, 5rem);
}
.meister-bild { overflow: hidden; }
.meister-bild--breit { aspect-ratio: 2 / 1; }
.meister-bild--portrait { aspect-ratio: 5 / 4; }
.meister-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.meister-bild--portrait img { object-position: 50% 35%; }
.meister-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem clamp(3rem, 6vw, 7rem); align-items: start; }
.meister-kopf h2 { margin-top: 1.3rem; font: 300 var(--fs-h2)/1.1 var(--display); letter-spacing: -.035em; max-width: 14ch; }
.meister-kopf .lead { margin-top: 1.6rem; }
.meister-text { padding-top: 2.4rem; }
.meister-text .haken li { padding-block: .75rem; border-top: 1px solid var(--linie-dunkel); }
.meister-text .haken li + li { margin-top: 0; }
.meister-text .haken li::before { top: calc(.75rem + .42em); }
.meister-text .knopfreihe { margin-top: 2rem; }

/* ─── Bildergalerie ──────────────────────────────────────────────────── */
.galerie { padding-block: var(--pad); }
.schau {
  display: flex; gap: clamp(.75rem, 1.2vw, 1.25rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-inline: var(--einzug); scroll-padding-inline: var(--einzug);
  scrollbar-width: none;
  -webkit-user-select: none; user-select: none;
}
.schau::-webkit-scrollbar { display: none; }
.schau.zieht { scroll-snap-type: none; }
.schau.zieht .schau-bild { pointer-events: none; }
.schau-bild {
  flex: 0 0 auto; width: clamp(15rem, 24vw, 29rem);
  aspect-ratio: 2 / 3; overflow: hidden;
  scroll-snap-align: start; cursor: zoom-in;
  background: #D5D8D0;
}
.schau-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--weich); }
@media (hover: hover) { .schau-bild:hover img { transform: scale(1.05); } }
.schau-bild:focus-visible { outline-offset: -2px; outline-color: var(--tanne); }
.schau-leiste { margin-top: 2rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 2rem; align-items: center; }
.schau-zaehler { white-space: nowrap; font-size: var(--fs-klein); color: var(--rauch-leise); }
.schau-zaehler b { font: 400 var(--fs-titel) var(--display); color: var(--tanne); margin-right: .2rem; }
.schau-linie { position: relative; height: 1px; background: rgba(19, 30, 25, .15); }
.schau-linie span { position: absolute; top: -.5px; left: 0; height: 2px; width: 20%; background: var(--messing); transition: left .25s, width .25s; }
.schau-wisch { font-size: var(--fs-klein); color: var(--rauch-leise); }
.schau-pfeile { display: flex; gap: .5rem; }
.pfeil {
  width: 3.75rem; height: 3rem; display: grid; place-items: center;
  border: 1px solid rgba(19, 30, 25, .3); color: var(--tanne);
  transition: background-color .3s, color .3s, border-color .3s, opacity .3s;
}
.pfeil svg { width: 28px; height: 10px; }
@media (hover: hover) { .pfeil:hover { background: var(--tanne); border-color: var(--tanne); color: var(--kalk); } }
.pfeil:disabled { opacity: .3; cursor: default; background: none; color: var(--tanne); border-color: rgba(19, 30, 25, .3); }

/* ─── Google-Bewertungen ─────────────────────────────────────────────── */
.bewertungen { padding-block: var(--pad); overflow: hidden; }
.google-leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem;
  padding-top: 2rem; border-top: 1px solid var(--linie-dunkel);
}
.google-marke { width: 3.75rem; height: 3.75rem; display: grid; place-items: center; background: var(--kalk); flex: none; }
.google-marke svg { width: 1.9rem; height: 1.9rem; }
.google-name { font: 400 var(--fs-titel)/1.2 var(--display); color: var(--kalk); }
.google-name span { display: block; margin-top: .2rem; font: 400 var(--fs-klein) var(--text); color: var(--leise-dunkel); }
.bewertung-summe { font-size: var(--fs-lead); color: var(--text-dunkel); }
.bewertung-summe b { font: 400 var(--fs-titel) var(--display); color: var(--kalk); }
.sterne { position: relative; display: inline-block; margin-right: .8rem; font-size: 1.3rem; letter-spacing: .12em; vertical-align: .05em; }
.sterne::before { content: "★★★★★"; color: rgba(242, 243, 239, .2); }
.sterne > span { position: absolute; left: 0; top: 0; width: var(--anteil, 0%); overflow: hidden; white-space: nowrap; }
.sterne > span::before { content: "★★★★★"; color: var(--messing-hell); }
.google-leiste .knopfreihe { margin-left: auto; }
.stimmen {
  margin-top: clamp(3rem, 5vw, 4.5rem); overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.stimmen-band { display: flex; gap: 1.25rem; width: max-content; animation: laufband var(--dauer, 60s) linear infinite; }
@media (hover: hover) { .stimmen:hover .stimmen-band { animation-play-state: paused; } }
@keyframes laufband { to { transform: translateX(-50%); } }
.stimme { width: clamp(20rem, 26vw, 27rem); padding: clamp(1.6rem, 2.4vw, 2.2rem); background: var(--tanne-hell); border-top: 1px solid rgba(216, 181, 127, .35); display: flex; flex-direction: column; gap: 1rem; }
.stimme-sterne { color: var(--messing-hell); letter-spacing: .12em; }
.stimme blockquote { color: var(--text-dunkel); }
.stimme figcaption { margin-top: auto; font-size: var(--fs-klein); color: var(--leise-dunkel); }
.stimme figcaption b { display: block; color: var(--kalk); font-weight: 500; }

/* ─── Fragen ─────────────────────────────────────────────────────────── */
.fragen { padding-block: var(--pad); }
.fragen-raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3rem clamp(3rem, 6vw, 8rem); align-items: start; }
.fragen-kopf { position: sticky; top: calc(var(--kopf-fest) + 3rem); }
.fragen-kopf h2 { margin-top: 1.3rem; font: 300 var(--fs-h2)/1.1 var(--display); letter-spacing: -.035em; max-width: 12ch; }
.fragen-liste { border-top: 1px solid var(--linie-hell); }
.frage { position: relative; border-bottom: 1px solid var(--linie-hell); }
.frage::before {
  content: ""; position: absolute; left: calc(-1 * clamp(1rem, 2vw, 1.75rem)); top: 0; width: 2px; height: 100%;
  background: var(--messing); transform: scaleY(0); transform-origin: top; transition: transform .6s var(--weich);
}
.frage[open]::before { transform: scaleY(1); }
.frage summary {
  list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 2rem;
  padding-block: clamp(1.35rem, 2vw, 1.9rem);
  font: 400 var(--fs-titel)/1.3 var(--display); letter-spacing: -.01em;
  color: var(--tanne); cursor: pointer; transition: color .3s;
}
.frage summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .frage summary:hover { color: var(--messing-tief); } }
.frage-zeichen { position: relative; flex: none; width: 16px; height: 16px; align-self: center; }
.frage-zeichen::before, .frage-zeichen::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px;
  background: var(--messing-tief); transition: transform .45s var(--weich);
}
.frage-zeichen::after { transform: rotate(90deg); }
.frage[open] .frage-zeichen::after { transform: rotate(0); }
.frage[open] .frage-zeichen::before { transform: rotate(180deg); }
.frage-inhalt { overflow: hidden; }
.frage-inhalt > * { max-width: 62ch; color: var(--rauch); }
.frage-inhalt > :last-child { padding-bottom: clamp(1.6rem, 2.2vw, 2.2rem); }
.frage-inhalt p + p { margin-top: .9rem; }
.planung { padding-left: 1.3rem; }
.planung li + li { margin-top: .6rem; }
.planung li::marker { color: var(--messing-tief); font-family: var(--display); }

/* ─── Standort ───────────────────────────────────────────────────────── */
.standort { overflow: hidden; }
.standort-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.standort-text { align-self: center; padding: var(--pad) clamp(2.5rem, 5vw, 5.5rem) var(--pad) var(--einzug); }
.standort-text h2 { margin-top: 1.3rem; font: 300 var(--fs-h2)/1.1 var(--display); letter-spacing: -.035em; max-width: 12ch; }
.standort-text address { margin-top: 2rem; font-size: var(--fs-lead); line-height: 1.55; color: var(--text-dunkel); }
.standort-text address b { display: block; margin-bottom: .3rem; font: 400 var(--fs-titel)/1.25 var(--display); color: var(--kalk); }
.standort-daten { margin-top: 1.8rem; }
.standort-daten > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .3rem 1rem; padding-block: .85rem; border-top: 1px solid var(--linie-dunkel); }
.standort-daten dt { padding-top: .25em; font: 500 var(--fs-label)/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--leise-dunkel); }
.standort-daten dd { color: var(--text-dunkel); }
.standort-text .knopfreihe { margin-top: 2rem; }

.standort-karte { position: relative; min-height: clamp(34rem, 46vw, 50rem); margin: 0; background: #0F1814; overflow: hidden; }
.stadtplan { position: absolute; inset: 0; width: 100%; height: 100%; }
.standort-karte::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, var(--tanne) 0%, rgba(19, 30, 25, 0) 18%), linear-gradient(to top, rgba(19, 30, 25, .6), transparent 20%);
}
.standort-karte figcaption { position: absolute; right: .9rem; bottom: .6rem; z-index: 1; font-size: .75rem; color: rgba(242, 243, 239, .55); }
.plan-gruen { fill: #172620; }
.plan-wasser { fill: #1F3A3F; }
.plan-gebaeude { fill: #1E2E26; stroke: #2A3D33; stroke-width: .8; }
.plan-bach { fill: none; stroke: #2F5559; stroke-width: 1.5; }
.plan-fluss { fill: none; stroke: #35656A; stroke-width: 5; }
.plan-weg { fill: none; stroke: #2B3C33; stroke-width: 1; stroke-dasharray: 3 3; }
.plan-nebenstrasse { fill: none; stroke: #324739; stroke-width: 2; }
.plan-strasse { fill: none; stroke: #4C6356; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.plan-hauptstrasse { fill: none; stroke: var(--messing); stroke-opacity: .75; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.plan-bahn { fill: none; stroke: #8A958D; stroke-width: 2.5; stroke-dasharray: 14 6; }
.plan-name { font: 500 15px var(--text); letter-spacing: .08em; fill: #9DA89F; text-anchor: middle; }
.plan-bahnhof circle { fill: var(--tanne); stroke: #C9D0CB; stroke-width: 2; }
.plan-bahnhof text { font: 500 17px var(--text); letter-spacing: .04em; fill: #C9D0CB; }
.plan-puls { fill: var(--messing-hell); opacity: 0; transform-box: fill-box; transform-origin: center; animation: puls 2.8s ease-out infinite; }
.plan-puls--2 { animation-delay: 1.4s; }
@keyframes puls { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(5); } }
.plan-hof { fill: rgba(216, 181, 127, .18); }
.plan-punkt { fill: var(--messing-hell); stroke: var(--tanne); stroke-width: 3; }
.plan-faden { fill: none; stroke: var(--messing-hell); stroke-width: 1.5; }
.plan-schild rect { fill: var(--kalk); }
.plan-schild-name { font: 500 26px var(--display); fill: var(--tanne); }
.plan-schild-adresse { font: 400 19px var(--text); fill: var(--rauch-leise); }
@media (prefers-reduced-motion: no-preference) {
  .js .stadtplan { clip-path: circle(0% at 56% 52%); transform: scale(1.12); transform-origin: 56% 52%; transition: clip-path 2.2s cubic-bezier(.6, 0, .2, 1), transform 3s var(--weich); }
  .js .standort-karte.ist-da .stadtplan { clip-path: circle(120% at 56% 52%); transform: none; }
  .js .plan-schild, .js .plan-faden { opacity: 0; transition: opacity .8s ease 1.6s; }
  .js .standort-karte.ist-da .plan-schild, .js .standort-karte.ist-da .plan-faden { opacity: 1; }
}

/* ─── Kontakt ────────────────────────────────────────────────────────── */
.kontakt { padding-block: var(--pad); }
.wege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--linie-hell); }
.weg {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(1.8rem, 3vw, 2.8rem);
  color: var(--tanne);
  transition: color .5s;
}
.weg + .weg { border-left: 1px solid var(--linie-hell); }
.weg::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--tanne);
  transform: translateY(101%); transition: transform .6s var(--weich);
}
@media (hover: hover) { .weg:hover::before, .weg:focus-visible::before { transform: none; } }
@media (hover: hover) { .weg:hover, .weg:focus-visible { color: var(--kalk); } }
.weg-symbol { width: 3rem; height: 3rem; color: var(--messing-tief); transition: color .5s, transform .6s var(--weich); }
.weg-symbol svg { width: 100%; height: 100%; }
@media (hover: hover) { .weg:hover .weg-symbol { color: var(--messing-hell); transform: translateY(-.25rem); } }
@media (prefers-reduced-motion: no-preference) {
  .weg-symbol svg * { stroke-dasharray: 1; stroke-dashoffset: 0; }
  .weg:hover .weg-symbol svg * { animation: zeichnen 1.1s var(--weich) both; }
}
@keyframes zeichnen { from { stroke-dashoffset: 1; } }
.weg-art { margin-top: 2.2rem; font: 500 var(--fs-label)/1.3 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--messing-tief); transition: color .5s; }
@media (hover: hover) { .weg:hover .weg-art { color: var(--messing-hell); } }
.weg-wert { margin-top: .6rem; font: 300 var(--fs-weg)/1.2 var(--display); letter-spacing: -.02em; }
.weg-wert--mail { font-size: var(--fs-titel); overflow-wrap: anywhere; }
.weg-zusatz { margin-top: .9rem; font-size: var(--fs-klein); line-height: 1.5; color: var(--rauch-leise); transition: color .5s; }
@media (hover: hover) { .weg:hover .weg-zusatz { color: var(--leise-dunkel); } }
.weg-link { margin-top: auto; padding-top: 1.2rem; font: 500 var(--fs-klein) var(--text); letter-spacing: .04em; color: var(--messing-tief); text-decoration: underline; text-decoration-color: rgba(126, 92, 43, .35); text-underline-offset: .25em; transition: color .5s; }
@media (hover: hover) { .weg:hover .weg-link { color: var(--messing-hell); } }
.weg-status { margin-top: auto; padding-top: 1.2rem; display: inline-flex; align-items: center; gap: .6rem; font-size: var(--fs-klein); font-weight: 500; }
.weg-status i { position: relative; width: .55rem; height: .55rem; border-radius: 50%; background: #9AA39C; }
.weg-status.ist-offen i { background: #5E9B6C; }
.weg-status.ist-offen i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: puls 2s ease-out infinite; }

.formular-flaeche {
  margin-top: clamp(2rem, 3vw, 3rem);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2.5rem clamp(3rem, 6vw, 7rem);
  padding: clamp(2.2rem, 4.5vw, 4.5rem);
  background: var(--tanne); color: var(--text-dunkel);
  overflow: hidden;
}
.formular-kopf h3 { font: 300 var(--fs-h3)/1.15 var(--display); letter-spacing: -.03em; color: var(--kalk); }
.formular-hinweis { margin-top: 1.2rem; max-width: 38ch; }
.formular-adresse { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--linie-dunkel); font-size: var(--fs-klein); color: var(--leise-dunkel); }

.formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.feld { position: relative; }
.feld input, .feld select, .feld textarea {
  display: block; width: 100%;
  padding: 1.65rem 1rem .6rem;
  border: 0; border-bottom: 1px solid rgba(242, 243, 239, .28); border-radius: 0;
  background-color: rgba(242, 243, 239, .045);
  font: 400 max(1rem, var(--fs-text))/1.4 var(--text); color: var(--kalk);
  -webkit-appearance: none; appearance: none;
  transition: background-color .3s, border-color .3s;
}
.feld label {
  position: absolute; left: 1rem; top: 1.15rem;
  font-size: max(1rem, var(--fs-text)); color: var(--leise-dunkel);
  transform-origin: 0 0; pointer-events: none;
  transition: transform .3s var(--weich), color .3s;
}
.feld input:focus + label, .feld input:not(:placeholder-shown) + label,
.feld--auswahl label, .feld--text label { transform: translateY(-.62rem) scale(.72); color: var(--messing-hell); }
.feld::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--messing-hell); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--weich); }
.feld:focus-within::after { transform: scaleX(1); }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; background-color: rgba(242, 243, 239, .08); }
.feld input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--tanne-hell) inset; -webkit-text-fill-color: var(--kalk); }
.feld select {
  padding-right: 2.5rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23D8B57F' stroke-width='1.2'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px 8px;
}
.feld select option { color: var(--tanne); background: var(--kalk); }
.feld textarea { resize: vertical; min-height: 8.5rem; }
.feld textarea::placeholder { color: rgba(242, 243, 239, .42); }
.pflicht { color: var(--messing-hell); }
.feld--breit { grid-column: 1 / -1; }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular-schluss { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; margin-top: .6rem; }
.einwilligung { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; max-width: 50ch; font-size: var(--fs-klein); line-height: 1.5; color: var(--leise-dunkel); }
.einwilligung input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--messing); }
.einwilligung a { color: var(--kalk); text-decoration: underline; text-underline-offset: .2em; }
.formular-schluss .knopf { flex: none; }

.orte { margin-top: clamp(3rem, 5vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--linie-hell); display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1rem 2rem; align-items: baseline; }
.orte h3 { font: 500 var(--fs-label)/1.3 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--messing-tief); }
.orte ul { list-style: none; display: flex; flex-wrap: wrap; row-gap: .25rem; }
.orte li { color: var(--rauch); transition: color .3s; }
@media (hover: hover) { .orte li:hover { color: var(--messing-tief); } }
.orte li:not(:last-child)::after { content: "·"; margin-inline: .65rem; color: var(--messing); }

/* ─── Fuß ────────────────────────────────────────────────────────────── */
.fuss {
  background: var(--tanne); color: var(--leise-dunkel);
  border-top: 1px solid rgba(180, 137, 79, .45);
  padding-block: clamp(3.5rem, 6vw, 6rem) 2rem;
  font-size: var(--fs-klein); line-height: 1.75;
  overflow: hidden;
}
.fuss-schriftzug {
  font: 300 var(--fs-schriftzug)/1.1 var(--display); letter-spacing: -.05em;
  white-space: nowrap;
  color: rgba(242, 243, 239, .1);
  background: radial-gradient(28rem circle at var(--mx, 50%) var(--my, 60%), var(--glut) 0%, var(--messing-hell) 25%, rgba(242, 243, 239, .1) 62%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: -.05em;
}
.fuss-schriftzug[data-schein]::after { display: none; }
@media (prefers-reduced-motion: no-preference) {
  /* Auf dem Absatz selbst, nicht auf den Wörtern: background-clip: text
     zeichnet nichts durch Kinder mit transform hindurch. */
  .js .fuss-schriftzug { clip-path: inset(0 0 100% 0); transform: translateY(30%); transition: clip-path 1.5s cubic-bezier(.6, 0, .2, 1), transform 1.6s var(--weich); }
  .js .fuss-schriftzug.ist-da { clip-path: inset(-10% 0 -10% 0); transform: none; }
}
.fuss-oben {
  margin-top: clamp(2.5rem, 4vw, 4rem); padding-top: clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--linie-dunkel);
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 3rem;
}
.fuss-logo img { width: 220px; }
.fuss-logo p { margin-top: 1.4rem; }
.fuss-logo a { color: var(--kalk); }
.fuss h4 { margin-bottom: 1rem; font: 500 var(--fs-label)/1.3 var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--messing-hell); }
.fuss-spalte ul { list-style: none; }
.fuss a { transition: color .3s; }
@media (hover: hover) { .fuss a:hover { color: var(--messing-hell); } }
.fuss-unten {
  margin-top: clamp(3rem, 5vw, 4.5rem); padding-top: 1.6rem;
  border-top: 1px solid rgba(242, 243, 239, .1);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem;
  font-size: var(--fs-label); letter-spacing: .03em;
}
.fuss-unten > * { min-width: 0; }
.fuss-unten nav { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-left: auto; }
.fuss-unten nav a { display: inline-block; padding-block: .6rem; margin-block: -.6rem; }
.nach-oben { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid var(--linie-dunkel); color: var(--kalk); transition: border-color .3s, transform .4s var(--weich); }
.nach-oben svg { width: 8px; height: 22px; }
@media (hover: hover) { .nach-oben:hover { border-color: var(--messing-hell); transform: translateY(-4px); } }

/* ─── Handyleiste ────────────────────────────────────────────────────── */
.handyleiste { display: none; }

/* ─── Große Bildansicht ──────────────────────────────────────────────── */
.lupe {
  position: fixed; inset: 0; z-index: 80;
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 5.5rem; align-items: center;
  padding: 4.5rem 0 1.5rem;
  background: rgba(12, 18, 15, .985); color: var(--kalk);
}
@media (prefers-reduced-motion: no-preference) {
  .lupe:not([hidden]) { animation: einblenden .35s ease both; }
  .lupe:not([hidden]) .lupe-inhalt img { animation: lupeBild .6s var(--weich) both; }
}
@keyframes lupeBild { from { opacity: 0; transform: scale(.96); } }
.lupe-inhalt { display: grid; justify-items: center; gap: 1rem; min-width: 0; }
.lupe-inhalt img { max-width: 100%; max-height: calc(100svh - 10rem); width: auto; height: auto; object-fit: contain; }
.lupe-inhalt figcaption { display: flex; justify-content: space-between; gap: 2rem; width: 100%; max-width: 60rem; font-size: var(--fs-klein); color: rgba(242, 243, 239, .75); }
#lupe-nr { flex: none; font: 500 var(--fs-label) var(--text); letter-spacing: .14em; color: var(--messing-hell); }
.lupe-zu { position: absolute; top: 1rem; right: var(--rand); width: 3rem; height: 3rem; display: grid; place-items: center; }
.lupe-zu svg { width: 26px; height: 26px; }
.lupe-pfeil { justify-self: center; width: 3.75rem; height: 3rem; display: grid; place-items: center; border: 1px solid rgba(242, 243, 239, .28); transition: border-color .3s, color .3s; }
.lupe-pfeil svg { width: 28px; height: 10px; }
@media (hover: hover) { .lupe-pfeil:hover, .lupe-zu:hover { border-color: var(--messing-hell); color: var(--messing-hell); } }
.lupe-offen { overflow: hidden; }

/* ─── Rechtstexte und 404 ────────────────────────────────────────────── */
.seite .kopf .zurueck { justify-self: start; display: inline-flex; align-items: center; gap: .9rem; min-height: 2.75rem; font: 400 var(--fs-klein) var(--text); letter-spacing: .05em; }
.seite .kopf .zurueck svg { width: 28px; height: 10px; }
@media (hover: hover) { .seite .kopf .zurueck:hover { color: var(--messing-hell); } }
.rechtstext { max-width: calc(46rem + 2 * var(--rand)); margin: 0 auto; padding: calc(var(--kopf-fest) + clamp(3.5rem, 6vw, 6rem)) var(--rand) clamp(4.5rem, 8vw, 7rem); color: var(--rauch); }
.rechtstext h1 { margin-bottom: 2.5rem; font: 300 var(--fs-h2)/1.1 var(--display); letter-spacing: -.035em; color: var(--tanne); }
.rechtstext h2 { margin: 3rem 0 .8rem; font: 400 var(--fs-titel)/1.25 var(--display); letter-spacing: -.015em; color: var(--tanne); }
.rechtstext h3 { margin: 1.8rem 0 .5rem; font: 500 var(--fs-text) var(--text); color: var(--tanne); }
.rechtstext p, .rechtstext ul { margin-bottom: 1rem; }
.rechtstext ul { padding-left: 1.25rem; }
.rechtstext li { margin-bottom: .35rem; }
.rechtstext a:not(.knopf) { color: var(--tanne); text-decoration: underline; text-decoration-color: rgba(19, 30, 25, .3); text-underline-offset: .2em; }
.rechtstext .label { margin-bottom: 1.2rem; color: var(--messing-tief); }
.rechtstext .knopf { margin-top: 1rem; }
.rechtstext .knopf--dunkel { background: var(--tanne); color: var(--kalk); border-color: var(--tanne); }
.rechtstext .knopf--dunkel::before { background: var(--moos); }
@media (hover: hover) { .rechtstext .knopf--dunkel:hover { color: var(--kalk); border-color: var(--moos); } }
.seite main { min-height: calc(100svh - 4.5rem); }
.todo { background: #F1E6CB; color: #5E4411; padding: .05em .3em; }
.stand { margin-top: 3rem; font-size: var(--fs-klein); color: var(--rauch-leise); }
.seite .fuss { padding-top: 2rem; }
.seite .fuss-unten { margin-top: 0; padding-top: 0; border-top: 0; }

/* ══════════════════════════════════════════════════════════════════════
   Umbrüche
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1180px) {
  .marken-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.5rem; }
  .hero-unter { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "meister" "aktion"; }
  .hero-aktion .knopfreihe { flex-direction: row; }
  .fuss-oben { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss-logo { grid-column: 1 / -1; }
  .wege { grid-template-columns: minmax(0, 1fr); }
  .weg + .weg { border-left: 0; border-top: 1px solid var(--linie-hell); }
  .weg { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1.6rem; }
  .weg > :not(.weg-symbol) { grid-column: 2; }
  .weg-symbol { grid-row: 1 / span 5; }
  .weg-art { margin-top: 0; }
  .weg-status, .weg-link { margin-top: 0; }
}

@media (max-width: 1000px) {
  .formular-schluss { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 900px) {
  .kopfzeile, .marken-innen, .ablauf-raster, .zusage, .band-raster, .meister-raster,
  .fragen-raster, .formular-flaeche, .orte, .standort-raster {
    grid-template-columns: minmax(0, 1fr);
  }
  .kopfzeile .lead, .band-rechts { justify-self: start; }
  .zusage > .label { padding-top: 0; }
  .welt { position: static; }
  .welt-flaeche { grid-template-columns: minmax(0, 1fr); box-shadow: none; transform: none; filter: none; }
  .welt-bild { min-height: 0; aspect-ratio: 16 / 9; }
  .ablauf-bild { position: relative; top: 0; width: min(60%, 15rem); }
  .fragen-kopf { position: static; }
  .gegen { grid-template-columns: minmax(0, 1fr); }
  .menue { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: space-between; }
  .menue-fuss { justify-self: start; }
  .standort-text { padding: var(--pad) var(--rand) 3rem; }
  .standort-karte { order: -1; min-height: 0; aspect-ratio: 4 / 3.4; }
  .standort-karte::after { background: linear-gradient(to top, var(--tanne) 0%, rgba(19, 30, 25, 0) 22%); }
  .frage::before { display: none; }
}

@media (max-width: 700px) {
  .kopf { grid-template-columns: auto 1fr auto; }
  .logo { justify-self: center; }
  .logo img, .kopf.ist-fest .logo img { width: 132px; }
  .menue-wort, .kopf-tel-wort, .kopf-tel-nr { display: none; }
  .menue-knopf, .kopf-tel { width: 2.75rem; justify-content: center; }
  .kopf-tel-symbol { display: block; }
  .kopf.ist-weg { transform: none; }

  /* Handy: Bild und Text getrennt, Text über Foto wäre unlesbar */
  .hero { display: block; min-height: 0; padding-top: 0; }
  .hero::before { display: none; }
  .hero-bild { position: relative; inset: auto; height: 52svh; min-height: 19rem; max-height: 30rem; overflow: hidden; }
  .hero-foto img { object-position: 30% 60%; }
  .hero-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(19, 30, 25, .6) 0%, rgba(19, 30, 25, 0) 28%, rgba(19, 30, 25, 0) 58%, var(--tanne) 100%); }
  .hero-inhalt { padding-top: 0; padding-bottom: 3.5rem; margin-top: -1.5rem; position: relative; }
  .hero-meister { padding-left: 0; }
  .hero-meister img { width: 7rem; }
  .hero-text { padding-left: 1.1rem; }
  .hero-aktion .knopfreihe { flex-direction: column; }

  .marken-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sorgen { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .meister-bilder { grid-template-columns: minmax(0, 1fr); }
  .meister-text { padding-top: 0; }

  .kopfzeile h2, .meister-kopf h2, .fragen-kopf h2, .band h2, .zusage h3, .gegen-spalte h3, .welt h3, .standort-text h2 {
    -webkit-hyphens: auto; hyphens: auto; max-width: none;
  }

  .schau-bild { width: 68vw; }
  .schau-leiste { grid-template-columns: auto minmax(0, 1fr); }
  .schau-pfeile, .schau-wisch { display: none; }
  .google-leiste .knopfreihe { margin-left: 0; }

  .formular { grid-template-columns: minmax(0, 1fr); }
  .formular-flaeche { padding: 2rem 1.25rem; margin-inline: calc(-1 * var(--rand)); }
  .formular-schluss .knopf { width: 100%; justify-content: space-between; }
  .standort-daten > div { grid-template-columns: minmax(0, 1fr); }
  .weg { grid-template-columns: minmax(0, 1fr); }
  .weg > :not(.weg-symbol) { grid-column: 1; }
  .weg-symbol { grid-row: auto; width: 2.5rem; height: 2.5rem; }
  .weg-art { margin-top: 1.2rem; }

  .fuss-schriftzug { white-space: normal; line-height: 1; }
  .fuss-schriftzug span { display: block; }
  .fuss-oben { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
  .fuss-logo img { width: 180px; }
  .fuss { padding-bottom: calc(2rem + 3.5rem + env(safe-area-inset-bottom)); }
  .fuss-unten nav { margin-left: 0; }

  /* Tippziele */
  .fuss-logo a, .einwilligung a, .band .zusicherung a { display: inline-block; padding-block: .75rem; margin-block: -.75rem; }
  .fuss-spalte ul a { display: block; padding-block: .55rem; }
  .fuss-spalte ul { margin-top: -.55rem; }

  .handyleiste {
    position: fixed; inset: auto 0 0 0; z-index: 40;
    display: grid; grid-template-columns: 1fr 1fr;
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(19, 30, 25, .96); border-top: 1px solid rgba(180, 137, 79, .4);
    transform: translateY(100%); transition: transform .45s var(--weich);
  }
  .handyleiste.ist-sichtbar { transform: none; }
  .menue-offen .handyleiste, .lupe-offen .handyleiste { transform: translateY(100%); }
  .handyleiste a { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.5rem; font: 400 var(--fs-klein) var(--text); letter-spacing: .06em; color: var(--kalk); }
  .handyleiste a + a { border-left: 1px solid var(--linie-dunkel); }
  .handyleiste svg { width: 18px; height: 18px; color: var(--messing-hell); }

  .menue-liste > a, .menue-zweig > a { font-size: clamp(1.4rem, 6.4vw, 1.9rem); gap: 1rem; }
  .menue-unter { margin-left: 2.8rem; }

  .lupe { grid-template-columns: minmax(0, 1fr); padding: 4rem .75rem 5.5rem; }
  .lupe-inhalt img { max-height: calc(100svh - 12rem); }
  .lupe-inhalt figcaption { padding-inline: .5rem; flex-direction: column; gap: .3rem; }
  .lupe-pfeil { position: absolute; bottom: 1.25rem; }
  .lupe-zurueck { left: 1rem; }
  .lupe-vor { right: 1rem; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .menue { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; padding-top: calc(var(--kopf) + 1rem); }
  .menue-liste > a, .menue-zweig > a { font-size: 1.25rem; }
  .menue-unter a { padding-block: .35rem; font-size: var(--fs-klein); }
  .welt { position: static; }
}


/* ══════════════════════════════════════════════════════════════════════
   Touch, Tablets und große Systemschrift
   ══════════════════════════════════════════════════════════════════════ */

/* Rückmeldung beim Antippen, weil es dort kein Hover gibt */
@media (hover: none) {
  .knopf:active::before, .weg:active::before { transform: none; }
  .knopf:active { color: var(--tanne); }
  .hell .knopf:active, .weg:active { color: var(--kalk); }
  .schau-bild:active img, .welt-bild:active img { transform: scale(1.03); }
}

/* Lange deutsche Wörter („Schornsteinfegermeister“) unter 1280 px trennen */
@media (max-width: 1279.98px) {
  h1, h2, h3, .zusage h3, .welt h3 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
  .meister-kopf h2, .gegen-spalte h3, .kopfzeile h2, .fragen-kopf h2, .standort-text h2 { max-width: none; }
}

/* Tippziele mindestens 44 px auf Touch-Geräten und schmalen Fenstern */
@media (max-width: 1180px), (pointer: coarse) {
  .logo { padding-block: .25rem; }
  .fuss-logo a, .einwilligung a, .band .zusicherung a { display: inline-block; padding-block: .8rem; margin-block: -.8rem; }
  .fuss-spalte ul a { display: block; padding-block: .65rem; }
  .fuss-spalte ul { margin-top: -.65rem; }
  .fuss-unten nav a { padding-block: .8rem; margin-block: -.8rem; }
  .fuss h4 { margin-bottom: .6rem; }
}

@media (max-width: 700px) {
  p, li, dd, address, .weg-zusatz { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
  .hero h1 { font-size: min(var(--fs-hero), 14vw); }
  .kopfzeile h2, .meister-kopf h2, .fragen-kopf h2, .band h2, .standort-text h2 { font-size: min(var(--fs-h2), 10vw); }
  .knopf { width: 100%; justify-content: space-between; text-align: left; }
  .einwilligung label, .google-name, .fuss-unten p { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
  /* Knöpfe, Labels und Willkommenszeile nur zwischen Wörtern umbrechen, nicht mitten im Wort */
  /* anywhere statt break-word: nur dann im Wort trennen, wenn es sonst
     aus dem Knopf läuft (große Systemschrift), ohne Trennstrich */
  .knopf { -webkit-hyphens: manual; hyphens: manual; overflow-wrap: anywhere; }
  .label, .hero-willkommen { -webkit-hyphens: manual; hyphens: manual; }
  .knopf > svg { flex: none; }
  .google-leiste .knopfreihe { width: 100%; }
  .marken-liste { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.25rem), 1fr)); row-gap: 1.2rem; }
  .welt-text { padding: 1.6rem 1.25rem 2rem; }
  .gegen-spalte { padding: 1.8rem 1.25rem; }
  .zusage { padding: 1.8rem 1.25rem; }
  .weg { padding: 1.6rem 1.25rem; }
  .stimme { width: min(82vw, 22rem); }
  .standort-karte { aspect-ratio: 1 / 1; }
  .plan-name { font-size: 22px; }
  .plan-bahnhof { display: none; }
  .plan-schild-name { font-size: 28px; }
  .plan-schild-adresse { font-size: 23px; }
  /* Formularfeld im Fokus: Handyleiste weg, damit sie nichts verdeckt */
  .tippt .handyleiste { transform: translateY(100%); }
  .fuss-unten { padding-bottom: .5rem; }
}

/* Sehr schmale Geräte (iPhone SE, kleine Android) */
@media (max-width: 360px) {
  :root { --rand: 1rem; }
  .logo img, .kopf.ist-fest .logo img { width: 120px; }
  .hero-meister img { width: 6rem; }
  .schau-bild { width: 78vw; }
}

/* Handy quer: Kopf flacher, Hero nicht höher als nötig */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --kopf: 3.5rem; --kopf-fest: 3.25rem; }
  .logo img, .kopf.ist-fest .logo img { width: 120px; }
  .hero { min-height: 0; padding-top: calc(var(--kopf) + 1.5rem); }
  .hero-inhalt { padding-bottom: 2rem; }
  .ablauf-bild, .fragen-kopf { position: static; }
  .lupe { padding-top: 3.25rem; padding-bottom: .75rem; }
  .lupe-inhalt img { max-height: calc(100svh - 6.5rem); }
}

/* Aussparungen (Notch) im Querformat */
@supports (padding: max(0px)) {
  .kopf { padding-inline: max(var(--einzug), env(safe-area-inset-left) + 1rem) max(var(--einzug), env(safe-area-inset-right) + 1rem); }
  .menue { padding-left: max(var(--einzug), env(safe-area-inset-left) + 1rem); padding-right: max(var(--einzug), env(safe-area-inset-right) + 1rem); }
  .handyleiste { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .funken { display: none; }
}