/* Hegau-Getränke Müller. Aus den Quellen gebaut, Änderungen von Hand gehen beim nächsten Bau verloren. */
@font-face { font-family: 'Besley'; font-style: normal; font-weight: 400; font-display: swap; src: url(../schriften/besley-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Besley'; font-style: normal; font-weight: 400; font-display: swap; src: url(../schriften/besley-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Besley'; font-style: normal; font-weight: 500; font-display: swap; src: url(../schriften/besley-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Besley'; font-style: normal; font-weight: 500; font-display: swap; src: url(../schriften/besley-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(../schriften/hanken-grotesk-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(../schriften/hanken-grotesk-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(../schriften/hanken-grotesk-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(../schriften/hanken-grotesk-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(../schriften/hanken-grotesk-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(../schriften/hanken-grotesk-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --papier: #ffffff;
  --tinte: #14171a;
  --nacht: #111417;
  --rahmen: #060708;
  --weich: #555b63;
  --linie: #d7dadd;
  --bahn: #e9ebed;
  --rot: #c8141a;
  --auf-rot-weich: #ffe1dd;
  --gold: #f2b01e;
  --auf-dunkel: #f4f5f3;
  --auf-dunkel-weich: #aeb4bb;
  --linie-dunkel: #363c43;
  --offen: #1b6e3a;
  --offen-hell: #5fd68d;
  --anzeige: 'Besley', Georgia, serif;
  --schrift: 'Hanken Grotesk', 'Segoe UI', sans-serif;
  --rand: clamp(20px, 4.4vw, 84px);
  --spalt: clamp(16px, 1.6vw, 32px);
  --kopf: 80px;
  --aus: cubic-bezier(0.16, 1, 0.3, 1);
  --stern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; scrollbar-color: #5a6068 var(--rahmen); }
body { margin: 0; background: var(--rahmen); color: var(--tinte); font: 400 1.125rem/1.55 var(--schrift); font-variant-numeric: lining-nums; accent-color: var(--rot); }
::selection { background: var(--rot); color: #fff; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 4px; }
main:focus { outline: none; }
[id] { scroll-margin-top: calc(var(--kopf) + 12px); }
.sprung { position: absolute; left: var(--rand); top: -80px; z-index: 80; background: #fff; color: var(--tinte); padding: 12px 18px; }
.sprung:focus { top: 12px; }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Bühne: bei 1920 Pixeln ist Schluss, dahinter Schwarz */
.buehne { max-width: 1920px; margin-inline: auto; background: var(--papier); position: relative; overflow: clip; }
.breite { padding-inline: var(--rand); }
.raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); }

h1, h2 { font-family: var(--anzeige); font-weight: 400; text-wrap: balance; }
h2 { font-size: clamp(27px, 2.5vw, 46px); line-height: 1.1; letter-spacing: -0.012em; }
h3 { font: 700 18px/1.3 var(--schrift); }
p { text-wrap: pretty; }
.lead { font-size: clamp(19px, 1.3vw, 23px); line-height: 1.45; }
.klein { font-size: 15px; line-height: 1.45; color: var(--weich); }

/* ── Schaltflächen: Füllung steigt von unten ───────── */
.knopf {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 12px 26px;
  background: var(--rot); color: #fff; border: 0; border-radius: 2px; cursor: pointer;
  font: 700 17px/1.15 var(--schrift); text-decoration: none; white-space: nowrap;
  transition: transform 160ms var(--aus), color 140ms ease 80ms;
}
.knopf::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--tinte); transform: translateY(101%); transition: transform 380ms var(--aus); }
.knopf:hover::before, .knopf:focus-visible::before { transform: none; }
.knopf:active { transform: scale(0.97); }
.knopf--hell::before { background: #fff; }
.knopf--hell:hover, .knopf--hell:focus-visible { color: var(--tinte); }
.knopf--rand { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.8); }
/* Anruf-Knopf: Symbol, darunter die Nummer. Am Handy ein Tipp zum Anruf, am Desktop die Nummer zum Ablesen. */
.knopf--anruf { gap: 14px; min-height: 64px; padding: 10px 26px 10px 20px; text-align: left; }
.knopf-symbol { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.knopf-text { display: grid; gap: 2px; }
.knopf-text b { font-weight: 700; font-size: 18px; line-height: 1.1; }
.knopf-text span { font-weight: 500; font-size: 16px; line-height: 1.15; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.knopf--klein { min-height: 48px; padding: 9px 20px; font-size: 16px; }

/* ── Kopf: liegt über dem Hero, wird beim Scrollen fest ── */
.kopf { position: fixed; top: 0; left: 50%; translate: -50% 0; width: min(100%, 1920px); z-index: 60; color: #fff; transition: background-color 280ms ease, color 280ms ease, box-shadow 280ms ease; }
.kopf-innen { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 44px); min-height: var(--kopf); }
.logo img { width: 128px; filter: brightness(0) invert(1); transform-origin: left center; transition: scale 320ms var(--aus); }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: clamp(14px, 1.8vw, 34px); }
.nav a { position: relative; display: block; padding: 12px 0; font-weight: 500; font-size: 16px; text-decoration: none; white-space: nowrap; text-shadow: 0 1px 14px rgba(6, 8, 10, 0.55); }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 7px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 320ms var(--aus); }
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.kopf :focus-visible { outline-color: #fff; }
.kopf.ist-fest { background: #fff; color: var(--tinte); box-shadow: 0 1px 0 var(--linie); }
.kopf.ist-fest .logo img { filter: none; scale: 0.9; }
.kopf.ist-fest .nav a { text-shadow: none; }
.kopf.ist-fest :focus-visible { outline-color: var(--rot); }
.menue-knopf { display: none; }
.fortschritt { position: absolute; left: 0; right: 0; top: 100%; height: 2px; background: var(--rot); transform: scaleX(0); transform-origin: left; }

/* ── Hero ──────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: min(100svh, 1100px); padding-top: var(--kopf); background: var(--nacht); color: #fff; overflow: clip; }
.hero :focus-visible { outline-color: #fff; }
.hero-bild { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-fahrt { position: absolute; inset: -4% 0; }
.hero-fahrt img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 50%; }
/* Abdunklung in drei Teilen: oben für den Kopf, dazu ein Anlauf über dem Textblock und eine Fläche darunter.
   Die beiden unteren hängen am Textblock, damit die Schrift bei jeder Breite auf dunklem Grund steht. */
.schleier { position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; }
.schleier--oben { top: 0; height: 26%; background: linear-gradient(180deg, rgba(8, 10, 12, 0.74) 0%, rgba(8, 10, 12, 0.46) 35%, rgba(8, 10, 12, 0) 100%); }
.schleier--auf { bottom: 100%; height: clamp(110px, 18vh, 200px); background: linear-gradient(180deg, rgba(8, 10, 12, 0) 0%, rgba(8, 10, 12, var(--s1, 0.48)) 100%); }
.schleier--unten { top: 0; bottom: 0; background: linear-gradient(180deg, rgba(8, 10, 12, var(--s1, 0.48)) 0%, rgba(8, 10, 12, var(--s2, 0.58)) 45%, rgba(8, 10, 12, var(--s3, 0.82)) 100%); }
.hero-unten { grid-row: 2; position: relative; }
.hero-inhalt { align-items: end; row-gap: 26px; padding-bottom: clamp(22px, 2.8vw, 48px); }
/* Die H1 trägt die Suchbegriffe, der Slogan darunter ist nur Gestaltung (ein <p>) */
.hero-h1 { grid-column: 1 / -1; margin-bottom: -10px; font: 500 clamp(16px, 1.1vw, 19px)/1.35 var(--schrift); text-shadow: 0 1px 14px rgba(6, 8, 10, 0.6); }
.hero-titel { grid-column: 1 / span 8; font-family: var(--anzeige); font-weight: 500; font-size: clamp(40px, 6.4vw, 120px); line-height: 0.97; letter-spacing: -0.022em; text-wrap: nowrap; text-shadow: 0 2px 34px rgba(6, 8, 10, 0.4); }
.zeile { display: block; overflow: hidden; padding: 0.1em 0.05em 0.26em; margin: -0.1em -0.05em -0.26em; }
.zeile > span { display: inline-block; }
/* Wechselnde Sprüche liegen in derselben Zelle, sichtbar ist der mit .ist-aktiv. So bleibt die Höhe beim Wechsel gleich. */
.hero-titel { display: grid; position: relative; }
.spruch { grid-area: 1 / 1; align-self: end; transition: opacity 400ms ease; }
.spruch:not(.ist-aktiv) { opacity: 0; }
.vorzeile { font-size: max(0.4em, 20px); letter-spacing: -0.005em; }
html:not(.js) .vorzeile--tag { visibility: hidden; }
.spruch-halt { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: #fff; background: rgba(6, 8, 10, 0.35); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50%; cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease; }
.spruch-halt:hover { background: rgba(6, 8, 10, 0.6); border-color: #fff; }
.spruch-halt[hidden], .spruch-halt[aria-pressed="false"] .zeichen-weiter, .spruch-halt[aria-pressed="true"] .zeichen-halt { display: none; }
.spruch-halt svg { width: 14px; height: 14px; fill: currentColor; }
.hero-seite { grid-column: 9 / span 4; display: grid; gap: 24px; padding-bottom: clamp(8px, 1.6vw, 34px); }
.hero-seite p { font-size: clamp(18px, 1.25vw, 22px); line-height: 1.42; max-width: 22em; text-shadow: 0 1px 18px rgba(6, 8, 10, 0.5); }
/* Anruf-Knopf im Hero, im Sortiment, im Festservice und bei den Referenzen */
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-leiste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.4); }
.hero-leiste > div { padding: 16px var(--spalt) clamp(18px, 2vw, 30px) 0; }
.hero-leiste > div + div { padding-left: var(--spalt); border-left: 1px solid rgba(255, 255, 255, 0.4); }
.hero-leiste dt { font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.8); }
.hero-leiste dd { font-weight: 500; font-size: clamp(16px, 1.05vw, 19px); line-height: 1.35; font-variant-numeric: tabular-nums; }
.hero-leiste a { text-decoration: none; }
.hero-leiste a:hover { text-decoration: underline; }
.stand::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); vertical-align: 0.06em; }
.stand[data-offen="ja"]::before { background: var(--offen-hell); }
.stand--hell::before { background: #9aa0a7; }
.stand--hell[data-offen="ja"]::before { background: var(--offen); }
.sterne { display: inline-block; width: 5em; height: 1em; vertical-align: -0.12em; background: linear-gradient(90deg, var(--gold) var(--wert, 98%), #6f757c var(--wert, 98%)); -webkit-mask: var(--stern) 0 0 / 1em 1em repeat-x; mask: var(--stern) 0 0 / 1em 1em repeat-x; }

/* ── Aussage, Wort für Wort ────────────────────────── */
.auskunft { padding-block: clamp(56px, 7vw, 128px) clamp(64px, 8vw, 150px); }
.auskunft .raster { row-gap: 48px; }
.auskunft-teil { grid-column: span 6; display: grid; gap: 14px; align-content: start; padding-top: 20px; border-top: 1px solid var(--tinte); }
.auskunft h2 { font-size: clamp(24px, 1.9vw, 34px); }
.auskunft-gross { font: 400 clamp(30px, 3vw, 54px)/1.12 var(--anzeige); letter-spacing: -0.014em; font-variant-numeric: tabular-nums; }
.auskunft-gross a { text-decoration: none; }
.auskunft-gross a:hover { text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.12em; }
.auskunft-teil > p:not(.auskunft-gross) { max-width: 32em; }
.zeit { white-space: nowrap; }

/* ── Abschnitte ────────────────────────────────────── */
.abschnitt { padding-block: clamp(72px, 9vw, 172px); }
.abschnitt > .raster { row-gap: 36px; align-items: start; }
.titelspalte { grid-column: 1 / span 4; position: sticky; top: calc(var(--kopf) + 24px); display: grid; gap: 22px; }
.titelspalte--frei { position: static; }
.inhalt { grid-column: 6 / span 7; display: grid; gap: clamp(28px, 3vw, 48px); }
.inhalt--breit { grid-column: 5 / span 8; }
/* Einspaltige Raster: Spalte darf nie breiter werden als ihr Platz */
.hero, .hero-seite, .titelspalte, .inhalt, .fest-text, .note-block, .reihe, .weg-text, .notruf { grid-template-columns: minmax(0, 1fr); }

/* Leistungen: große Zeilen, rechts ein Bildstreifen, der sich beim Überfahren öffnet */
.leistungen h2 { grid-column: 1 / span 8; }
.wege { --streifen: clamp(72px, 6vw, 116px); grid-column: 1 / -1; border-bottom: 1px solid var(--tinte); }
.wege li { position: relative; }
.wege a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px var(--spalt); padding-block: clamp(18px, 1.7vw, 32px); border-top: 1px solid var(--tinte); align-items: center; text-decoration: none; }
.weg-name { grid-column: 1 / span 5; font: 400 clamp(28px, 3vw, 56px)/1 var(--anzeige); letter-spacing: -0.016em; transition: transform 460ms var(--aus), color 200ms ease; }
.weg-text { grid-column: 6 / span 4; display: grid; gap: 8px; }
.weg-mehr { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.weg-bild { grid-column: 10 / span 3; position: relative; height: var(--streifen); }
.fenster { --m: 0.5; position: absolute; left: 0; right: 0; top: 50%; aspect-ratio: 4 / 3; translate: 0 calc(var(--m) * -100%); overflow: hidden; background: var(--bahn);
  clip-path: inset(calc(var(--m) * 100% - var(--streifen) / 2) 0 calc((1 - var(--m)) * 100% - var(--streifen) / 2) 0); transition: clip-path 640ms var(--aus); }
.fenster img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 900ms var(--aus); }
.wege a:hover .weg-mehr { text-decoration-thickness: 2px; }

/* ── Bildtafeln ────────────────────────────────────── */
.tafel-bild { overflow: hidden; background: #dfe2e4; }
.tafel-bild img { width: 100%; height: clamp(320px, 84vh, 960px); object-fit: cover; }
.tafel--streifen .tafel-bild img { height: auto; aspect-ratio: 1000 / 264; }

/* ── Geschichte: Überschrift, Einleitung, Zeitstrahl und Inhaber stehen auf dem Landschaftsfoto ── */
.story { scroll-margin-top: var(--kopf); }
.story-buehne { --s1: 0.58; --s2: 0.68; --s3: 0.8; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; min-height: clamp(560px, calc(100svh - var(--kopf)), 1040px); background: var(--nacht); color: #fff; }
.story-foto { grid-area: 1 / 1 / -1 / -1; position: relative; z-index: -2; overflow: hidden; }
/* Das Foto ist höher als die Bühne und unten angeschlagen. So liegen Himmel und Kegel über dem Textblock, Felder und Wiese tragen die Schrift. */
.story-foto img { position: absolute; left: 0; bottom: 0; width: 100%; height: 120%; object-fit: cover; object-position: 50% 100%; transform-origin: 50% 100%; }
.story-schatten { grid-area: 2 / 1 / -1 / -1; position: relative; z-index: -1; }
.story-text { grid-area: 2 / 1; align-items: end; row-gap: 18px; padding-block: clamp(26px, 3vw, 56px) clamp(22px, 2.4vw, 44px); }
.story-text h2 { grid-column: 1 / span 6; font-size: clamp(28px, 3vw, 56px); line-height: 1.06; letter-spacing: -0.016em; text-shadow: 0 2px 30px rgba(6, 8, 10, 0.45); }
.story-text .lead { grid-column: 8 / span 5; text-shadow: 0 1px 18px rgba(6, 8, 10, 0.5); }
.story-band { grid-area: 3 / 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 1fr); column-gap: var(--spalt); padding-bottom: clamp(26px, 3vw, 56px); }

/* ── Abholmarkt: die Woche als Zeitachse ───────────── */
.titelspalte figure { margin-top: 12px; }
.titelspalte figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.zeiten-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 24px; margin-bottom: 18px; }
.zeiten-kopf .stand { font-weight: 700; }
.woche { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; column-gap: clamp(12px, 1.4vw, 24px); border-bottom: 1px solid var(--tinte); }
.woche li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding-block: 15px; border-top: 1px solid var(--linie); }
.woche li.achse { padding-block: 0 10px; border-top: 0; font-size: 15px; color: var(--weich); font-variant-numeric: tabular-nums; }
.woche li.achse + li { border-top-color: var(--tinte); }
.skala { grid-column: 2; position: relative; height: 1.5em; }
.skala > span { position: absolute; top: 0; left: calc(var(--p) * 1%); translate: -50% 0; white-space: nowrap; }
.skala > span:first-child { translate: 0 0; }
.skala > span:last-child { translate: -100% 0; }
.woche li > b { font-weight: 500; min-width: 3.2em; line-height: 1.15; }
.woche abbr { text-decoration: none; }
.bahn { position: relative; height: 18px; background: var(--bahn); }
.bahn i { position: absolute; top: 0; bottom: 0; left: calc(var(--von) * 1%); width: calc((var(--bis) - var(--von)) * 1%); background: var(--rot); transform-origin: left; }
.std { font-variant-numeric: tabular-nums; color: var(--tinte); font-size: 17px; white-space: nowrap; }
.std.zu { color: var(--weich); }
.woche li.ist-heute > b { font-weight: 700; }
.woche li.ist-heute > b::after { content: 'heute'; display: block; font-size: 14px; font-weight: 500; color: var(--rot); }
.woche li.ist-heute .std { color: var(--tinte); font-weight: 700; }
.woche li.hat-jetzt .bahn::after { content: ''; position: absolute; left: calc(var(--jetzt) * 100%); top: -7px; bottom: -7px; width: 3px; translate: -50% 0; background: var(--tinte); box-shadow: 0 0 0 2px #fff; }
.ort { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--spalt); }

/* ── Sortiment, dunkel, mit Markenband ─────────────── */
.dunkel { background: var(--nacht); color: var(--auf-dunkel); }
.dunkel :focus-visible { outline-color: #fff; }
.dunkel .klein { color: var(--auf-dunkel-weich); }
.band { padding-block: clamp(56px, 7vw, 128px) clamp(8px, 2vw, 32px); display: grid; gap: clamp(2px, 0.6vw, 12px); overflow: clip; }
.band-zeile { display: flex; gap: 0.44em; width: max-content; font: 400 clamp(32px, 4.2vw, 80px)/1.04 var(--anzeige); letter-spacing: -0.016em; white-space: nowrap; }
.band-zeile span { display: inline-flex; align-items: center; gap: 0.44em; }
.band-zeile span::after { content: ''; width: 0.15em; height: 0.15em; border-radius: 50%; background: var(--rot); }
.band-zeile:nth-child(2) { color: #7b828a; transform: translateX(-14%); }
.sorten { columns: 3 220px; column-gap: var(--spalt); }
.sorten div { break-inside: avoid; padding: 16px 0 24px; border-top: 1px solid var(--linie-dunkel); }
.sorten dt { font-weight: 700; margin-bottom: 6px; }
.sorten dd { line-height: 1.5; color: #d6dade; }

/* ── Festservice ───────────────────────────────────── */
.fest-bild { grid-column: 1 / span 5; position: sticky; top: calc(var(--kopf) + 24px); }
.fest-bild .tafel-bild img { height: auto; aspect-ratio: 4 / 5; }
.fest-text { grid-column: 7 / span 6; display: grid; gap: clamp(26px, 2.6vw, 44px); }
.liste { border-bottom: 1px solid var(--tinte); }
.liste li { padding: 12px 0; border-top: 1px solid var(--linie); line-height: 1.4; }
.liste li:first-child { border-top-color: var(--tinte); }
.liste small { font-size: 15px; color: var(--weich); }
.liste small.block { display: block; margin-top: 2px; }
.liste--zwei { columns: 2 220px; column-gap: var(--spalt); border-top: 1px solid var(--tinte); }
.liste--zwei li { break-inside: avoid; border-top: 0; border-bottom: 1px solid var(--linie); }
.liste--zwei { border-bottom: 0; }
.notruf { box-shadow: inset 0 0 0 1.5px var(--rot); padding: clamp(22px, 2.4vw, 40px); display: grid; gap: 8px; }
.notruf a { justify-self: start; padding-block: 3px; color: var(--rot); font: 500 clamp(24px, 2vw, 34px)/1 var(--anzeige); letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.notruf a:hover { text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.12em; }
.notruf p { max-width: 34em; color: var(--weich); }
.fest-hinweis { margin-top: calc(clamp(26px, 2.6vw, 44px) * -0.5); max-width: 32em; font-size: 16px; }

/* ── Stimmen ───────────────────────────────────────── */
.stimmen > .raster { row-gap: clamp(36px, 4.4vw, 88px); align-items: end; }
.stimmen h2 { grid-column: 1 / span 8; }
.note-block { grid-column: 1 / span 5; display: grid; gap: 12px; }
.note { font: 500 clamp(84px, 9vw, 170px)/0.8 var(--anzeige); letter-spacing: -0.035em; margin-left: -0.03em; padding-bottom: 0.15em; }
.note-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: clamp(18px, 1.15vw, 21px); }
.note-zeile .sterne { font-size: clamp(22px, 1.6vw, 30px); }
.zitat { grid-column: 6 / span 7; }
.zitat p { font: 400 clamp(26px, 3vw, 56px)/1.1 var(--anzeige); letter-spacing: -0.016em; text-wrap: balance; }
.zitat footer { margin-top: clamp(16px, 1.6vw, 28px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--auf-dunkel-weich); }
.reihe { grid-column: 1 / -1; display: grid; gap: 16px; min-width: 0; }
.spur ul { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 1px solid var(--linie-dunkel); border-bottom: 1px solid var(--linie-dunkel); }
.spur li { padding: 26px var(--spalt) 30px 0; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; }
.spur li + li { padding-left: var(--spalt); border-left: 1px solid var(--linie-dunkel); }
.spur .wortlaut { font-size: clamp(17px, 1.1vw, 20px); line-height: 1.42; hyphens: auto; overflow-wrap: break-word; }
.spur .wortlaut::before { content: '„'; }
.spur .wortlaut::after { content: '“'; }
/* Bis zu vier Stimmen: Die Spalten sind breit genug für größere Schrift */
.spur ul:not(:has(> li:nth-child(5))) .wortlaut { font-size: clamp(18px, 1.3vw, 23px); }
.spur footer { color: var(--auf-dunkel-weich); font-size: 16px; }
.spur footer b { color: var(--auf-dunkel); font-weight: 700; }
.spur-fuss { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; }
.spur-rechts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-left: auto; }
.pfeil { width: 50px; height: 50px; display: grid; place-items: center; background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.7); border-radius: 2px; cursor: pointer; transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--aus), opacity 160ms ease; }
.pfeil:hover:not(:disabled) { background: #fff; color: var(--tinte); }
.pfeil:active:not(:disabled) { transform: scale(0.94); }
.pfeil:disabled { opacity: 0.4; cursor: not-allowed; }
.pfeil svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pfeil[hidden] { display: none; }

/* ── Geschichte: Zeitstrahl quer über das Bild, daneben der Inhaber ── */
.jahre { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--spalt); view-timeline-name: --jahre; }
.jahre::before, .jahre::after, .story-team::before { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: rgba(255, 255, 255, 0.42); }
.jahre::after { top: 3.5px; height: 2px; background: #fff; transform-origin: left; }
.jahre li { position: relative; padding-top: 26px; }
.jahre li::before { content: ''; position: absolute; left: 0; top: 0; z-index: 1; width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.jahre b, .story-team h3 { display: block; margin-bottom: 8px; font: 400 clamp(22px, 1.75vw, 32px)/1 var(--anzeige); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.jahre span { display: block; font-size: clamp(16px, 1vw, 17px); line-height: 1.45; hyphens: auto; }
.story-team { position: relative; padding-top: 26px; }
.team { font-weight: 500; font-size: clamp(15px, 1vw, 17px); line-height: 1.3; }

/* ── Referenzen ────────────────────────────────────── */
.kunden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--spalt); align-items: start; }
.kunden h3 { padding-bottom: 12px; }
.kunden .breit { grid-column: span 2; }

/* ── Kontakt, rot ──────────────────────────────────── */
.kontakt { background: var(--rot); color: #fff; padding-block: clamp(20px, 2.2vw, 42px) clamp(56px, 6vw, 116px); }
.kontakt :focus-visible { outline-color: #fff; }
.grat { height: clamp(64px, 9.9vw, 190px); margin-bottom: clamp(36px, 4.6vw, 88px); overflow: clip; }
.grat svg { display: block; width: 100%; height: 100%; overflow: visible; }
.grat path { fill: none; stroke: #fff; stroke-width: 2.25; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.grat .mittel { stroke-width: 1.6; opacity: 0.9; }
.grat .fern { stroke-width: 1.3; opacity: 0.78; }
.grat .alpen { stroke-width: 1; opacity: 0.55; }
.kontakt h2 { grid-column: 1 / -1; }
.riesig { grid-column: 1 / -1; justify-self: start; margin-block: clamp(4px, 0.8vw, 16px) clamp(32px, 4.4vw, 80px); font: 500 clamp(36px, 7.4vw, 142px)/0.94 var(--anzeige); letter-spacing: -0.03em; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.riesig:hover { text-decoration: underline; text-decoration-thickness: 0.045em; text-underline-offset: 0.1em; }
.kontakt-drei { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--spalt); padding-top: clamp(28px, 3vw, 48px); border-top: 1px solid rgba(255, 255, 255, 0.55); }
.kontakt-drei h3 { margin-bottom: 10px; }
.kontakt-drei dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; font-variant-numeric: tabular-nums; }
.kontakt-drei dt { color: var(--auf-rot-weich); }
.kontakt-drei dd.voll { grid-column: 1 / -1; padding-top: 6px; }
.kontakt-drei p + p { margin-top: 10px; }
.hinweisfeld { margin-top: 18px; }
.hinweisfeld b { display: block; }

.fuss { background: var(--nacht); color: var(--auf-dunkel-weich); padding-block: 24px 30px; font-size: 16px; }
.fuss :focus-visible { outline-color: #fff; }
.fuss-innen { display: flex; flex-wrap: wrap; gap: 6px 32px; justify-content: space-between; align-items: center; }
.fuss ul { display: flex; flex-wrap: wrap; gap: 0 14px; margin-inline: -7px; }
.fuss a { display: inline-block; padding: 12px 7px; color: var(--auf-dunkel); }
/* Ganz unten, auf jeder Seite: der Verweis auf die Agentur */
.fuss-agentur { flex-basis: 100%; margin-top: 8px; border-top: 1px solid var(--linie-dunkel); font-size: 15px; }
.fuss-agentur a { padding-inline: 4px; }

/* Trefferfläche der Textlinks vergrößern, ohne die Optik zu ändern */
.hero-leiste a, .ort a, .kontakt-drei a { position: relative; }
.hero-leiste a::before, .ort a::before, .kontakt-drei a::before { content: ''; position: absolute; inset: -11px -4px; }

/* ── Zeiger und Bewegung ───────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .wege li:hover, .wege li:focus-within { z-index: 2; }
  .wege a:hover .weg-name, .wege a:focus-visible .weg-name { transform: translateX(clamp(10px, 1.3vw, 26px)); color: var(--rot); }
  .wege a:hover .fenster, .wege a:focus-visible .fenster { clip-path: inset(0 0 0 0); }
  .wege a:hover .fenster img, .wege a:focus-visible .fenster img { transform: none; }
}
@media screen and (prefers-reduced-motion: no-preference) {
  /* Eröffnung: Der Horizont geht auf, dann steigt die Zeile. Startet, sobald das Foto da ist. */
  .js .hero:not(.ist-bereit) .hero-bild { clip-path: inset(31.6% 0 68% 0); }
  .js .hero:not(.ist-bereit) .zeile > span { transform: translateY(140%); }
  .js .hero:not(.ist-bereit) .hero-schleier { opacity: 0; }
  .hero.ist-bereit .hero-bild { animation: horizont 1500ms var(--aus) both; }
  .hero.ist-bereit .hero-fahrt img { animation: setzen 2600ms var(--aus) both; }
  .hero.ist-bereit .hero-schleier { animation: einblenden 900ms ease 450ms both; }
  .hero.ist-bereit .zeile > span { animation: steigen 1100ms var(--aus) both; animation-delay: calc(520ms + var(--i, 0) * 130ms); }
  /* Anruf-Knopf und Abholstatus kommen sofort, unabhängig davon, wann das Foto geladen ist */
  .js .hero :is(.hero-seite, .hero-fuss) { animation: heben 800ms var(--aus) both; }
  .js .hero .hero-seite { animation-delay: 250ms; }
  .js .hero .hero-fuss { animation-delay: 400ms; }
  .kopf-innen { animation: einblenden 700ms ease 300ms both; }
  @keyframes horizont { from { clip-path: inset(31.6% 0 68% 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes setzen { from { transform: scale(1.16); } to { transform: none; } }
  @keyframes steigen { from { transform: translateY(140%); } to { transform: none; } }
  @keyframes heben { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }

  /* ── Beim Hineinscrollen: Alles kommt aus einer Linie ──
     Das Skript setzt die Klasse ist-da, sobald ein Teil ins Fenster kommt. Das läuft in jedem Browser, auch am Handy.
     Welcher Teil welche Art bekommt, steht im Skript unter „Bewegungsplan“.
     Ohne JavaScript und bei „Bewegung reduzieren“ steht alles sofort da.
     Die Übergänge stehen am Zielzustand: Beim Laden verschwindet so nichts sichtbar, bewegt wird nur beim Erscheinen. */

  /* worte: Überschriften steigen Wort für Wort aus der Zeile, wie die Zeile im Hero */
  .js [data-zeig="worte"] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.22em 0.04em 0.26em; margin: -0.22em -0.04em -0.26em; }
  .js [data-zeig="worte"] .w > span { display: inline-block; transform: translateY(130%); }
  .js [data-zeig="worte"].ist-da .w > span { transform: none; transition: transform 840ms var(--aus) calc(var(--i, 0) * 46ms); }

  /* hoch: Ein Block hebt sich leicht */
  .js [data-zeig="hoch"] { opacity: 0; transform: translateY(24px); }
  .js [data-zeig="hoch"].ist-da { opacity: 1; transform: none; transition: opacity 620ms ease, transform 880ms var(--aus); }

  /* reihe: Eine Liste erscheint Zeile für Zeile */
  .js [data-zeig="reihe"] > * { opacity: 0; transform: translateY(18px); }
  .js [data-zeig="reihe"].ist-da > * { opacity: 1; transform: none; transition: opacity 520ms ease calc(var(--i, 0) * 60ms), transform 780ms var(--aus) calc(var(--i, 0) * 60ms); }

  /* wisch: Eine Zeile oder Fläche wischt von links auf, ihre Linie zieht sich mit.
     Oben und unten bleibt der Ausschnitt weit offen, damit nichts abgeschnitten wird, das über die Zeile hinausragt. */
  .js [data-zeig="wisch"] { clip-path: inset(-240px 100% -240px 0); }
  .js [data-zeig="wisch"].ist-da { clip-path: inset(-240px -8px -240px -8px); transition: clip-path 1000ms var(--aus) calc(var(--i, 0) * 90ms); }

  /* Schmal: Die Bildstreifen der Leistungen öffnen sich beim Hineinscrollen, am Desktop beim Überfahren */
  @media (max-width: 1000px) {
    .js #wege .fenster { clip-path: inset(36% 0 36% 0); transition: none; }
    .js #wege .fenster img { transform: scale(1.1); transition: none; }
    .js #wege li.ist-da .fenster { clip-path: inset(0 0 0 0); transition: clip-path 1000ms var(--aus) 280ms; }
    .js #wege li.ist-da .fenster img { transform: none; transition: transform 1500ms var(--aus) 280ms; }
  }

  /* ── Mit dem Scrollen verknüpft (Chrome, Edge, neues Safari) ──
     Die Klasse sz setzt das Skript im Seitenkopf, wenn der Browser Scroll-Zeitachsen kann. */
  @supports (animation-timeline: view()) {
    html.sz {
      /* Lesefortschritt im Kopf */
      .fortschritt { animation: fortschritt linear both; animation-timeline: scroll(root); }
      /* Der Hero zieht beim Scrollen langsamer mit */
      .hero-fahrt { animation: hero-fahrt linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
      .hero-inhalt { animation: hero-weg linear both; animation-timeline: scroll(root); animation-range: 18vh 88vh; }
      /* Bildtafeln öffnen sich wie der Hero am Horizont */
      .tafel-bild { animation: tafel-auf linear both; animation-timeline: view(); animation-range: entry 5% cover 42%; }
      .tafel-bild img { animation: tafel-fahrt linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
      /* Foto der Geschichte: öffnet sich wie die Tafeln, das Foto fährt vom unteren Rand aus zurück */
      .story-foto { animation: tafel-auf linear both; animation-timeline: view(); animation-range: entry 5% cover 42%; }
      .story-foto img { animation: story-fahrt linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
      /* Zeitstrahl wächst mit */
      .jahre::after { animation: strahl-quer linear both; animation-timeline: --jahre; animation-range: entry 0% cover 18%; }
      @media (max-width: 1000px) { .jahre::after { animation-name: strahl; animation-range: cover 18% cover 62%; } }
      /* Der Streifen bleibt ohne Bildfahrt, damit die Linien darunter genau unter den Bergen liegen.
         Er wächst von der roten Fläche aus nach oben, die Unterkante bleibt immer am Rot. */
      .tafel--streifen .tafel-bild img { animation: none; }
      .tafel--streifen .tafel-bild { animation-name: streifen-auf; animation-range: entry 0% cover 34%; }
      .grat svg { animation: zeichnen linear both; animation-timeline: view(); animation-range: entry 30% cover 46%; }
    }
    @keyframes fortschritt { to { transform: scaleX(1); } }
    @keyframes hero-fahrt { to { transform: translateY(9%) scale(1.05); } }
    @keyframes hero-weg { to { opacity: 0.1; transform: translateY(-40px); } }
    @keyframes tafel-auf { from { clip-path: inset(30% 7% 30% 7%); } to { clip-path: inset(0 0 0 0); } }
    @keyframes tafel-fahrt { from { transform: scale(1.2) translateY(-4%); } to { transform: scale(1.1) translateY(4%); } }
    @keyframes story-fahrt { from { transform: scale(1.14); } to { transform: scale(1.02); } }
    @keyframes strahl-quer { from { transform: scaleX(0); } to { transform: none; } }
    @keyframes strahl { from { transform: scaleY(0); } to { transform: none; } }
    @keyframes streifen-auf { from { clip-path: inset(62% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
    @keyframes zeichnen { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% 0 -20% 0); } }
  }
  /* Das Markenband läuft endlos von selbst (Wunsch des Kunden). Jede Reihe steht doppelt im Markup und rückt um eine Hälfte
     weiter, dann beginnt sie nahtlos von vorn. Der Abstand am Ende macht beide Hälften gleich breit. */
  .band-zeile { padding-right: 0.44em; animation: band-lauf 70s linear infinite; }
  .band-zeile:nth-child(2) { animation-duration: 85s; animation-direction: reverse; }
  @keyframes band-lauf { from { transform: none; } to { transform: translateX(-50%); } }

  /* Inhalte mit Aussage (Balken, Sterne, große Nummer) laufen in jedem Browser einmal ab, wenn sie ins Fenster kommen.
     Ans Scrollen gebunden blieben sie bei angehaltenem Scrollen halb fertig stehen, etwa die Nummer blass auf Rot. */
  html.js {
    .bahn i { transform: scaleX(0); }
    .woche.ist-da .bahn i { transform: none; transition: transform 900ms var(--aus) calc(var(--i, 0) * 70ms + 240ms); }
    .note-zeile .sterne { clip-path: inset(0 100% 0 0); }
    .note-block.ist-da .sterne { clip-path: inset(0 0 0 0); transition: clip-path 1100ms var(--aus) 320ms; }
    .riesig { transform: translateX(10%); opacity: 0.25; }
    .riesig.ist-da { transform: none; opacity: 1; transition: transform 1000ms var(--aus), opacity 700ms ease; }
  }

  /* ── Ohne Scroll-Zeitachsen (viele Handys, Firefox) ──
     Dieselben Effekte, aber einmal ausgelöst, wenn der Teil ins Fenster kommt. */
  html.js:not(.sz) {
    .tafel-bild, .story-foto { clip-path: inset(30% 7% 30% 7%); }
    .tafel-bild img, .story-foto img { transform: scale(1.14); }
    .tafel--streifen .tafel-bild { clip-path: inset(62% 0 0 0); }
    .tafel--streifen .tafel-bild img { transform: none; }
    :is(.tafel-bild, .story-foto).ist-da { clip-path: inset(0 0 0 0); transition: clip-path 1400ms var(--aus); }
    :is(.tafel-bild, .story-foto).ist-da img { transform: none; transition: transform 2200ms var(--aus); }
    .jahre::after { transform: scaleX(0); }
    @media (max-width: 1000px) { .jahre::after { transform: scaleY(0); } }
    .jahre.ist-da::after { transform: none; transition: transform 1600ms var(--aus) 240ms; }
    .grat svg { clip-path: inset(-20% 100% -20% 0); }
    .grat.ist-da svg { clip-path: inset(-20% 0 -20% 0); transition: clip-path 2000ms var(--aus) 200ms; }
  }
}

/* ── Schmal ────────────────────────────────────────── */
@media (max-width: 1279px) {
  /* Geschichte: Zeitstrahl über die ganze Breite, der Inhaber als Zeile darunter */
  .story-band { grid-template-columns: minmax(0, 1fr); row-gap: clamp(18px, 2.2vw, 28px); }
  .story-team { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-top: 22px; }
  .story-team h3 { margin: 0; font: 700 18px/1.3 var(--schrift); letter-spacing: 0; }
  .spur { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-top: 1px solid var(--linie-dunkel); border-bottom: 1px solid var(--linie-dunkel); }
  .spur::-webkit-scrollbar { display: none; }
  .spur ul { grid-auto-columns: min(80vw, 340px); border: 0; width: max-content; max-width: none; }
  .spur li { scroll-snap-align: start; }
}
@media (max-width: 1180px) {
  .nav { position: absolute; left: 0; right: 0; top: 100%; background: #fff; color: var(--tinte); box-shadow: 0 1px 0 var(--linie), 0 28px 48px rgba(13, 15, 17, 0.2); padding: 4px var(--rand) 22px; margin: 0;
    display: none; opacity: 0; translate: 0 -10px; transition: opacity 240ms ease, translate 320ms var(--aus), display 320ms allow-discrete; }
  .nav.ist-offen { display: block; opacity: 1; translate: 0 0; }
  @starting-style { .nav.ist-offen { opacity: 0; translate: 0 -10px; } }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a, .kopf.ist-fest .nav a { padding: 16px 0; font-size: 22px; border-top: 1px solid var(--linie); text-shadow: none; }
  .nav a::after { display: none; }
  .nav a[aria-current] { color: var(--rot); }
  .nav :focus-visible { outline-color: var(--rot); }
  .kopf-innen > .knopf { margin-left: auto; flex: none; }
  .menue-knopf { display: block; min-height: 50px; padding: 8px 0 8px 6px; background: none; border: 0; font-weight: 500; font-size: 17px; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
  .kopf.ist-offen { background: #fff; color: var(--tinte); }
  .kopf.ist-offen .logo img { filter: none; }
  .kopf.ist-offen :focus-visible { outline-color: var(--rot); }
}
@media (max-width: 1000px) {
  .hero-inhalt { row-gap: 20px; }
  .hero-titel, .hero-seite { grid-column: 1 / -1; }
  .hero-titel { font-size: clamp(38px, 9vw, 84px); }
  .zitat p { font-size: clamp(24px, 4.4vw, 40px); }
  .hero-seite { padding-bottom: 0; gap: 20px; }
  .hero-fahrt img { object-position: 72% 50%; }
  .auskunft-teil { grid-column: 1 / -1; }
  .titelspalte, .inhalt, .inhalt--breit, .fest-bild, .fest-text, .stimmen h2, .note-block, .zitat, .leistungen h2 { grid-column: 1 / -1; }
  .titelspalte, .fest-bild { position: static; }
  .titelspalte figure, .fest-bild { max-width: 560px; }
  .weg-name, .weg-text, .weg-bild { grid-column: 1 / -1; }
  .weg-bild { height: auto; max-width: 560px; }
  .fenster { position: static; display: block; translate: none; clip-path: none; aspect-ratio: 16 / 9; }
  .fenster img { transform: none; }
  /* Geschichte schmal: Das Foto trägt Überschrift und Einleitung und läuft nach unten ins Dunkle aus.
     Zeitstrahl und Inhaber stehen darunter auf derselben dunklen Fläche. Für alles zusammen ist das Foto hier zu klein. */
  .story-buehne { grid-template-rows: clamp(150px, 34svh, 360px) auto auto; min-height: 0; }
  .story-foto { grid-area: 1 / 1 / 3 / -1; }
  .story-foto img { height: 100%; object-position: 62% 100%; }
  .story-schatten { grid-area: 2 / 1; }
  .story-schatten .schleier--unten { background: linear-gradient(180deg, rgba(8, 10, 12, var(--s1)) 0%, rgba(14, 17, 20, 0.8) 55%, var(--nacht) 100%); }
  .story-text { padding-bottom: 8px; }
  .story-text h2, .story-text .lead { grid-column: 1 / -1; }
  .story-band { row-gap: 26px; padding-top: 24px; background: var(--nacht); }
  .jahre { grid-template-columns: minmax(0, 1fr); padding-left: 24px; }
  .jahre::before, .jahre::after { left: 4px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .jahre::after { left: 3.5px; width: 2px; transform-origin: top; }
  .jahre li { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); gap: 2px 16px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--linie-dunkel); }
  .jahre li:first-child { padding-top: 0; border-top: 0; }
  .jahre li::before { left: -24px; top: calc(13px + 0.45em); }
  .jahre li:first-child::before { top: 0.45em; }
  /* Die Linie endet am letzten Punkt */
  .jahre li:last-child::after { content: ''; position: absolute; left: -24px; top: calc(13px + 0.45em + 9px); bottom: 0; width: 10px; background: var(--nacht); }
  .jahre b { margin: 0; }
  .jahre span { font-size: 17px; hyphens: manual; }
  .tafel-bild img { height: clamp(260px, 60vh, 640px); }
  .stimmen > .raster { align-items: start; }
  .kontakt-drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body { font-size: 1.0625rem; }
  .riesig { font-size: clamp(36px, 11.6vw, 80px); }
  :root { --kopf: 68px; }
  .logo img { width: 104px; }
  .kopf-innen { gap: 12px; }
  .kopf-innen > .knopf { min-height: 46px; padding: 8px 14px; font-size: 16px; }
  .knoepfe .knopf { width: 100%; }
  .hero-leiste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-leiste > div { padding-block: 12px 16px; }
  .hero-leiste > div:nth-child(3) { display: none; }
  .hero-leiste .sterne { display: block; margin-bottom: 3px; }
  .tafel-bild img { height: auto; aspect-ratio: 4 / 3; }
  /* Ausschnitt des Panoramas: 52,8 % der Breite ab 37,76 %. Die Linie bekommt denselben Ausschnitt. */
  .tafel--streifen .tafel-bild img { aspect-ratio: 2 / 1; object-position: 80% 50%; }
  .grat svg { width: 189.4%; translate: -37.76% 0; }
  /* Schmal: Achse nur mit 8, 12 und 18 Uhr, sonst stoßen die Zahlen aneinander */
  .skala > span:nth-child(2), .skala > span:nth-child(4), .skala > span:nth-child(5) { display: none; }
  .skala .lang { display: none; }
  .std { font-size: 16px; }
  .woche li > b { min-width: 2.2em; }
  .ort, .kunden, .kontakt-drei { grid-template-columns: minmax(0, 1fr); }
  .kunden .breit { grid-column: auto; }
  .jahre li { grid-template-columns: minmax(0, 1fr); }
  .spur-fuss { align-items: flex-start; }
  .spur-rechts .knopf { white-space: normal; text-align: center; }
}
@media (max-width: 360px) {
  .logo img { width: 88px; }
  .kopf-innen { gap: 10px; }
  .kopf-innen > .knopf { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}

/* ── Rechtsseiten: Impressum und Datenschutz ───────────
   Gleiches Raster wie die Abschnitte der Startseite: Titel links, Text rechts.
   Der Kopf ist hier von Anfang an fest, eine Einstiegsbühne gibt es nicht. */
.buehne--seite { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; min-height: 100svh; }
.recht { padding-block: calc(var(--kopf) + clamp(40px, 6vw, 110px)) clamp(72px, 9vw, 172px); }
.recht > .raster { align-items: start; row-gap: 28px; }
.recht .titelspalte { gap: 10px; }
.recht h1 { font-size: clamp(34px, 3.4vw, 62px); line-height: 1.05; letter-spacing: -0.018em; hyphens: auto; overflow-wrap: break-word; }
.recht-text { display: block; max-width: 40em; }
.recht-text h2 { margin: 1.9em 0 0.5em; font-size: clamp(22px, 1.7vw, 30px); line-height: 1.2; letter-spacing: -0.01em; }
.recht-text h2:first-child { margin-top: 0; }
.recht-text p + p, .recht-text ul + p, .recht-text address + dl { margin-top: 0.8em; }
.recht-text ul { margin-top: 0.6em; padding-left: 1.2em; list-style: disc; }
.recht-text li { padding-left: 0.2em; }
.recht-text li + li { margin-top: 0.3em; }
.recht-text address { font-style: normal; }
.recht-text a { position: relative; overflow-wrap: anywhere; }
.recht-text a::before { content: ''; position: absolute; inset: -11px -4px; }
.recht-text a:hover { color: var(--rot); }
.recht-daten { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 20px; font-variant-numeric: tabular-nums; }
.recht-daten dt { color: var(--weich); }
.recht-text .bildnachweise { margin-top: 1em; padding-left: 0; list-style: none; border-bottom: 1px solid var(--tinte); }
.bildnachweise li { display: grid; grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr); gap: 2px var(--spalt); padding: 12px 0; border-top: 1px solid var(--linie); line-height: 1.4; }
.bildnachweise li + li { margin-top: 0; }
.bildnachweise li:first-child { border-top-color: var(--tinte); }
.bildnachweise b { font-weight: 700; }
.bildnachweise small { display: block; margin-top: 2px; font-size: 15px; color: var(--weich); }
/* Sichtbarer Platzhalter für Angaben, die noch fehlen. Darf so nicht online gehen. */
.platzhalter { margin-top: 0.8em; padding: 10px 12px; border: 1px dashed var(--rot); color: var(--rot); font-size: 16px; line-height: 1.4; }
@media (max-width: 640px) {
  .bildnachweise li { grid-template-columns: minmax(0, 1fr); }
}