/* TG-TUNING: Grundlagen */
@font-face { font-family: "Anybody"; src: url("../fonts/anybody-italic-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

@property --film { syntax: "<number>"; inherits: true; initial-value: 106; }
@property --zug { syntax: "<number>"; inherits: true; initial-value: 112; }

:root {
  --schwarz: #0b0d0f;
  --anthrazit: #15181c;
  --stahl: #2b3036;
  --nebel: #aab3bb;
  --folie: #00a0cf;
  --folie-hell: #35c8f2;
  --traeger: #edf2f3;
  --tinte: #0b0d0f;
  --weiss: #f4f8f9;

  --t-kurz: 160ms;
  --t-mittel: 420ms;
  --t-lang: 900ms;
  --kurve-rakel: cubic-bezier(.16, 1, .3, 1);
  --kurve-zug: cubic-bezier(.65, 0, .15, 1);

  --rand: 5vw;
  --leiste: 4.25rem;
  --schraege: -12deg;
  --anzeige: "Anybody", "Arial Narrow", sans-serif;
  --text: "Barlow", "Segoe UI", sans-serif;
  --galaxie: image-set(url("../img/galaxie-textur.avif") type("image/avif"), url("../img/galaxie-textur.webp") type("image/webp"));

  color-scheme: dark;
  interpolate-size: allow-keywords;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--schwarz); overflow-x: clip; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: clip;
  padding-bottom: calc(var(--leiste) + env(safe-area-inset-bottom));
  background: var(--schwarz);
  color: var(--weiss);
  font: 400 1.125rem/1.55 var(--text);
}

::selection { background: var(--folie); color: var(--tinte); }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--folie-hell); outline-offset: 3px; }

h2, h3, .anzeige {
  font-family: var(--anzeige);
  font-style: italic;
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -.012em;
  line-height: 1;
  text-wrap: balance;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr, .falle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.sprunglink {
  position: fixed; left: 1rem; top: -4rem; z-index: 100; padding: .6rem 1rem;
  background: var(--folie); color: var(--tinte); font-weight: 600;
}
.sprunglink:focus { top: 1rem; }

.icon { width: 1.35em; height: 1.35em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.zeile { display: block; overflow: clip; overflow-clip-margin: .14em; padding-block: .05em; }
.zeile > span { display: block; }

.achse {
  display: grid;
  grid-template-columns: [a0] var(--rand) [a1 a2 a3 a4 a5 a6] minmax(0, 1fr) [a7] var(--rand) [a8];
}

/* Aufkleber und Schaltflächen */
.aufkleber { width: 100%; height: auto; overflow: visible; }
.aufkleber__flaeche { fill: #fff; }
.logo-cyan { fill: var(--folie); }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem; padding: .7rem 1.4rem;
  border: 1.5px solid currentColor;
  background: transparent;
  color: var(--weiss);
  font-weight: 600; font-size: 1.0625rem; line-height: 1.1;
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transform: skewX(var(--schraege));
  transition: background-color var(--t-kurz), color var(--t-kurz), border-color var(--t-kurz), transform var(--t-kurz) var(--kurve-rakel);
}
.knopf > * { transform: skewX(12deg); }
.knopf:hover { background: var(--weiss); border-color: var(--weiss); color: var(--tinte); }
.knopf:active { transform: skewX(var(--schraege)) scale(.97); }
.knopf--voll { background: var(--folie); border-color: var(--folie); color: var(--tinte); }
.knopf--voll:hover { background: var(--folie-hell); border-color: var(--folie-hell); }
.knopf--tinte { background: var(--tinte); border-color: var(--tinte); color: var(--weiss); }
.knopf--tinte:hover { background: var(--weiss); border-color: var(--weiss); color: var(--tinte); }
.knopf:focus-visible { outline-color: currentColor; }

.verweis {
  display: inline-flex; align-items: center; gap: .5em;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size var(--t-mittel) var(--kurve-rakel);
}
.verweis:hover { background-size: 100% 2px; }

/* Kopf */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  min-height: 4.25rem; padding: .6rem var(--rand);
  view-transition-name: kopf;
}
.kopf__marke { display: block; width: 8.75rem; flex: none; transform-origin: 0 0; }
.kopf__marke .aufkleber { filter: drop-shadow(0 2px 6px rgb(0 0 0 / .45)); }
.kopf__nav, .kopf__anruf { display: none; }

.kopf__nav a {
  position: relative; padding: .5rem 0; font-weight: 500; text-decoration: none;
}
.kopf__nav a::after {
  content: ""; position: absolute; inset: auto 0 .2rem;
  height: 2px; background: var(--folie-hell);
  transform: scaleX(0) skewX(var(--schraege)); transform-origin: 0 50%;
  transition: transform var(--t-mittel) var(--kurve-rakel);
}
.kopf__nav a:hover::after, .kopf__nav a:focus-visible::after { transform: scaleX(1) skewX(var(--schraege)); }

/* Untere Leiste, mobil */
.leiste {
  position: fixed; inset: auto 0 0; z-index: 50;
  display: grid; grid-template-columns: repeat(5, 1fr);
  min-height: var(--leiste); padding-bottom: env(safe-area-inset-bottom);
  background: var(--anthrazit); border-top: 1px solid var(--stahl);
  view-transition-name: leiste;
}
.leiste a, .leiste button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  padding: .35rem .15rem; border: 0; background: none;
  font-size: .75rem; font-weight: 500; line-height: 1.1; text-decoration: none;
  cursor: pointer;
}
.leiste .icon { width: 1.5rem; height: 1.5rem; }
.leiste__anruf { background: var(--folie) !important; color: var(--tinte); font-weight: 600 !important; }

/* Menü */
.menue {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 5.5rem var(--rand) 2rem;
  border: 0; background: var(--schwarz); color: var(--weiss);
  transform: translateX(-100%);
  transition: transform var(--t-mittel) var(--kurve-rakel), overlay var(--t-mittel) allow-discrete, display var(--t-mittel) allow-discrete;
}
.menue:popover-open { transform: none; }
@starting-style { .menue:popover-open { transform: translateX(-100%); } }
.menue::backdrop { background: rgb(0 0 0 / .5); }
.menue nav { display: flex; flex-direction: column; gap: .35rem; }
.menue nav a {
  padding: .35rem 0;
  font: italic 800 clamp(1.9rem, 9vw, 3rem)/1.1 var(--anzeige); font-stretch: 105%;
  text-decoration: none;
  opacity: 1; transform: none;
  transition: opacity var(--t-mittel) var(--kurve-rakel), transform var(--t-mittel) var(--kurve-rakel);
}
.menue nav a:nth-child(n+7) { font-size: 1.25rem; font-weight: 600; }
.menue nav a:nth-child(1) { transition-delay: 40ms; }
.menue nav a:nth-child(2) { transition-delay: 80ms; }
.menue nav a:nth-child(3) { transition-delay: 120ms; }
.menue nav a:nth-child(4) { transition-delay: 160ms; }
.menue nav a:nth-child(5) { transition-delay: 200ms; }
.menue nav a:nth-child(6) { transition-delay: 240ms; }
@starting-style { .menue:popover-open nav a { opacity: 0; transform: translateX(-1.5rem); } }
.menue__zu {
  position: absolute; top: 1rem; right: var(--rand); min-height: 3rem; padding: .5rem 1rem;
  border: 1.5px solid currentColor; background: none; cursor: pointer; font-weight: 600;
}

/* Hero */
.hero {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr;
  min-height: calc(100svh - var(--leiste));
  padding-top: 5.75rem;
  overflow: clip;
  background: linear-gradient(to bottom, var(--schwarz) 58%, #12161a 58.1%, var(--schwarz) 96%);
}
.hero__leitmotiv {
  position: relative; z-index: 1; padding-inline: var(--rand);
  font-family: var(--anzeige); font-style: italic; font-weight: 800; font-stretch: 86%;
  font-size: clamp(2.5rem, 13vw, 8.5rem); line-height: 1; letter-spacing: -.015em;
}
.hero__z1, .hero__z2 { white-space: nowrap; }
.hero__z2 { color: var(--folie-hell); }
.hero__buehne {
  position: relative; z-index: 2;
  width: 165vw; margin-left: -36vw; margin-top: 1.5rem;
}
.hero__ebene { position: relative; transform-style: preserve-3d; --film: 106; }
.hero__van, .hero__roh { display: block; width: 100%; height: auto; }
.hero__roh {
  position: absolute; inset: 0;
  clip-path: polygon(calc(var(--film) * 1% + 3%) 0, 110% 0, 110% 110%, calc(var(--film) * 1% - 3%) 110%);
}
.hero__kante {
  position: absolute; top: -2%; bottom: -3%; left: calc(var(--film) * 1%); width: 2px;
  background: var(--folie-hell); transform: skewX(-9.5deg); opacity: 0;
  pointer-events: none;
}
.zieht .hero__kante { opacity: 1; }
.hero__boden {
  position: absolute; left: 0; right: 0; top: 97.4%; height: 30%;
  background: center bottom / 100% 333% no-repeat;
  background-image: image-set(url("../img/van-900.avif") type("image/avif"), url("../img/van-900.webp") type("image/webp"));
  transform: scaleY(-1);
  opacity: .26;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 85%);
  mask-image: linear-gradient(to top, #000, transparent 85%);
  pointer-events: none;
}

.regler { display: none; }
.js .regler {
  display: block; position: absolute; left: 36vw; width: 100vw; bottom: -1.75rem; padding-inline: 1rem;
}
.regler__feld {
  display: block; width: 100%; height: 3rem; margin: 0; padding: 0;
  background: transparent; cursor: ew-resize; touch-action: pan-y;
  -webkit-appearance: none; appearance: none;
}
.regler__feld::-webkit-slider-runnable-track { height: 2px; background: var(--stahl); }
.regler__feld::-moz-range-track { height: 2px; background: var(--stahl); }
.regler__feld::-webkit-slider-thumb { -webkit-appearance: none; width: 2.75rem; height: 2.75rem; margin-top: -1.3rem; background: url("../img/zielkreuz.svg") center / contain no-repeat; border: 0; }
.regler__feld::-moz-range-thumb { width: 2.75rem; height: 2.75rem; background: url("../img/zielkreuz.svg") center / contain no-repeat; border: 0; }
.regler__text { position: absolute; right: 4rem; top: -.15rem; display: flex; align-items: center; gap: .4rem; font-size: .9375rem; font-weight: 500; color: var(--nebel); cursor: ew-resize; }
.regler__text .icon { display: none; }

.hero__text, .hero__aktion { pointer-events: auto; }
.hero__fuss { position: relative; z-index: 3; pointer-events: none; display: grid; gap: 1.25rem; align-content: end; padding: 3.25rem var(--rand) 1.5rem; }
.hero__fuss h1 { font-family: var(--anzeige); font-style: italic; font-weight: 700; font-stretch: 108%; font-size: clamp(1.45rem, 5.6vw, 2.1rem); line-height: 1.08; text-wrap: balance; }
.hero__text p { margin-top: .5rem; color: var(--nebel); max-width: 34ch; }
.hero__aktion { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Leistungen, Grundform: wischbare Reihe */
.passage { position: relative; padding-block: 5rem calc(4.5rem + 28vw); background: var(--schwarz); }
.passage__kamera { display: none; }
.passage__spur {
  display: flex; gap: 1rem; padding-inline: var(--rand);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.passage__spur::-webkit-scrollbar { display: none; }
.station { flex: 0 0 84vw; scroll-snap-align: center; }
.station--start { flex: 0 0 74vw; align-self: flex-end; padding-bottom: 1rem; }
.station--start h2 { font-size: clamp(2.75rem, 12.5vw, 5rem); }
.station--start p { margin-top: 1rem; color: var(--nebel); max-width: 30ch; }
.station__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.station--a .station__bild img { object-position: 62% 50%; }
.station--c .station__bild img { object-position: 42% 50%; }
.station__text { padding: 1.25rem .15rem 0; }
.station__text h3 { font-size: clamp(1.6rem, 7vw, 2.4rem); color: var(--folie-hell); }
.station__text p { margin-top: .6rem; color: #d5dcdf; max-width: 42ch; }

/* Trägerpapier */
.traeger {
  position: relative; z-index: 3;
  background-color: var(--traeger);
  background-image:
    linear-gradient(to right, rgb(0 104 136 / .14) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(0 104 136 / .14) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  color: var(--tinte);
  color-scheme: light;
  overflow-x: clip;
}
.traeger::before {
  content: ""; position: absolute; left: -3vw; right: -3vw; bottom: calc(100% - 5.5vw); aspect-ratio: 840 / 258;
  background: var(--traeger);
  -webkit-mask: url("../img/streifen.svg") center / 100% 100% no-repeat;
  mask: url("../img/streifen.svg") center / 100% 100% no-repeat;
  clip-path: inset(0 0 5.5vw 0);
  pointer-events: none;
}
.betrieb { padding-block: 6rem 3rem; row-gap: 2rem; position: relative; }
.betrieb__titel { grid-column: a1 / a7; font-size: clamp(3rem, 15vw, 5rem); }
.betrieb__text { grid-column: a1 / a7; max-width: 62ch; display: grid; gap: .9rem; color: #1f262b; }
.plotter { grid-column: a1 / a7; }
.plotter svg { width: 100%; height: auto; overflow: visible; }
.plotter figcaption { margin-top: .75rem; font-size: 1rem; color: #3b454c; max-width: 44ch; }
.plotter__marken { fill: none; stroke: var(--tinte); stroke-width: 5; }
.plotter__schnitt { fill: none; stroke: var(--folie); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.plotter__kopf { display: none; fill: none; stroke: var(--tinte); stroke-width: 7; }
.plotter__aufkleber { transition: filter var(--t-lang) var(--kurve-rakel), transform var(--t-lang) var(--kurve-rakel); transform-origin: 50% 50%; transform-box: fill-box; filter: drop-shadow(0 16px 16px rgb(11 13 15 / .28)); }
.js-plotter .plotter__kopf { display: block; }
.js-plotter:not(.fertig) .plotter__aufkleber { filter: none; }
.js-plotter:not(.fertig) .plotter__aufkleber .aufkleber__flaeche { fill: #f7fafa; }
.fertig .plotter__aufkleber { transform: translate(-.6%, -1.6%) rotate(-1deg); }
.fertig .plotter__kopf { display: none; }

.bewertung { grid-column: a1 / a7; display: grid; gap: .35rem; padding-top: 1rem; border-top: 2px solid var(--tinte); }
.bewertung__wert { font-size: clamp(4rem, 20vw, 6.5rem); font-weight: 900; font-stretch: 120%; letter-spacing: -.03em; line-height: .95; }
.bewertung__text { font-weight: 500; }
.bewertung__hinweis { font-size: 1rem; color: #3b454c; max-width: 46ch; }

.naehe { padding: 2rem 0 6rem; }
.naehe__titel { padding-inline: var(--rand); font-size: clamp(2.1rem, 9vw, 4rem); }
.naehe__text { padding-inline: var(--rand); margin-top: .5rem; color: #3b454c; }
.naehe__reihe {
  display: flex; gap: .85rem; margin-top: 1.75rem; padding-inline: var(--rand);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.naehe__reihe::-webkit-scrollbar { display: none; }
.detail { flex: 0 0 78vw; scroll-snap-align: center; }
.detail picture { display: block; padding: .45rem; background: #fff; box-shadow: 0 10px 18px rgb(11 13 15 / .2); }
.detail img { width: 100%; height: auto; }
.detail figcaption { margin-top: .4rem; font-size: 1rem; }

/* Fragen */
.fragen { position: relative; z-index: 3; background: var(--anthrazit); padding-block: 5rem; row-gap: 2rem; }
.fragen__titel { grid-column: a1 / a7; font-size: clamp(2.4rem, 11vw, 4.75rem); }
.fragen__liste { grid-column: a1 / a7; }
.frage { border-top: 1px solid #3a4148; }
.frage:last-of-type { border-bottom: 1px solid #3a4148; }
.frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.5rem; padding-block: 1rem; cursor: pointer; list-style: none;
}
.frage summary::-webkit-details-marker { display: none; }
.frage h3 { font-family: var(--text); font-style: normal; font-weight: 600; font-size: 1.1875rem; line-height: 1.3; letter-spacing: 0; font-stretch: 100%; }
.frage__ziel { width: 1.75rem; height: 1.75rem; flex: none; fill: none; stroke: var(--folie-hell); stroke-width: 1.6; stroke-linecap: round; transition: transform var(--t-mittel) var(--kurve-rakel); }
details[open] > summary .frage__ziel { transform: rotate(45deg); }
.frage::details-content, .recht--datenschutz::details-content {
  block-size: 0; overflow-y: clip;
  transition: block-size var(--t-mittel) var(--kurve-rakel), content-visibility var(--t-mittel) allow-discrete;
}
.frage[open]::details-content, .recht--datenschutz[open]::details-content { block-size: auto; }
.frage__antwort { padding-bottom: 1.25rem; }
.frage__antwort p { max-width: 62ch; color: #d5dcdf; }
.fragen__stand { margin-top: 1rem; font-size: 1rem; color: var(--nebel); }

/* Rufnummer */
.ruf { position: relative; z-index: 3; background: var(--schwarz); padding: 5.5rem var(--rand) 3rem; overflow: clip; }
.ruf__nummer {
  font-size: min(12.6vw, 15rem); font-weight: 900; font-stretch: 100%; letter-spacing: -.02em; line-height: 1;
  text-align: left; white-space: nowrap;
}
.ruf__nummer a { color: var(--folie-hell); text-decoration: none; }
.ruf__text { margin-top: 1.25rem; font-size: 1.3125rem; font-weight: 500; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ruf__nummer a {
    color: transparent;
    background-image:
      linear-gradient(102deg, transparent calc(var(--zug) * 1%), #59636c calc(var(--zug) * 1% + .4%)),
      var(--galaxie);
    background-size: 100% 100%, cover;
    background-position: 0 0, 50% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    padding-right: .1em;
  }
}

/* Kontakt auf Folie */
.kontakt {
  position: relative; z-index: 3; background: var(--folie); color: var(--tinte);
  color-scheme: light; padding-block: 3.5rem; row-gap: 3rem;
}
.kontakt :focus-visible { outline-color: var(--tinte); }
.kontakt__form, .kontakt__daten, .kontakt__anfahrt { grid-column: a1 / a7; }
.kontakt h3 { font-size: clamp(1.9rem, 8vw, 3rem); }
.kontakt form { display: grid; gap: 1.1rem; margin-top: 1.5rem; }
.feld label { display: block; font-weight: 600; }
.feld input, .feld textarea {
  display: block; width: 100%; min-height: 3rem; margin-top: .15rem; padding: .55rem .7rem;
  border: 0; border-bottom: 2px solid var(--tinte); border-radius: 0;
  background: rgb(255 255 255 / .22); color: var(--tinte);
  transition: background-color var(--t-kurz), box-shadow var(--t-kurz);
}
.feld textarea { resize: vertical; }
.feld input:hover, .feld textarea:hover { background: rgb(255 255 255 / .34); }
.feld input:focus, .feld textarea:focus { background: #fff; outline: 2px solid var(--tinte); outline-offset: 0; }
.feld__fehler { display: none; margin-top: .3rem; padding: .15rem .5rem; width: fit-content; background: var(--tinte); color: var(--weiss); font-size: 1rem; font-weight: 500; }
.feld--fehler .feld__fehler { display: block; }
.feld--fehler input, .feld--fehler textarea { background: #fff; box-shadow: inset 0 -3px 0 var(--tinte); }
.wahl { margin: 0; padding: 0; border: 0; }
.wahl legend { padding: 0; font-weight: 600; }
.wahl__punkt { position: relative; display: inline-block; margin: .4rem .45rem 0 0; cursor: pointer; }
.wahl__punkt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.wahl__punkt span { position: relative; z-index: 0; display: inline-block; min-height: 2.75rem; padding: .55rem .95rem; font-weight: 500; transition: color var(--t-kurz); }
.wahl__punkt span::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1.5px solid var(--tinte); transform: skewX(var(--schraege)); transition: background-color var(--t-kurz); }
.wahl__punkt input:hover + span::before { background: rgb(255 255 255 / .34); }
.wahl__punkt input:checked + span { color: var(--weiss); }
.wahl__punkt input:checked + span::before { background: var(--tinte); }
.wahl__punkt input:focus-visible + span::before { outline: 2px solid var(--tinte); outline-offset: 2px; }
.kontakt__hinweis { font-size: 1rem; }
.kontakt__status { min-height: 1.5em; font-weight: 600; }
button[data-absenden] { justify-self: start; position: relative; overflow: hidden; }
button[data-absenden][aria-busy="true"] { cursor: progress; }
button[data-absenden][aria-busy="true"]::after {
  content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--folie-hell);
  transform-origin: 0 50%; animation: senden 1s var(--kurve-zug) infinite;
}
.erfolg { padding-block: 1rem; }
.erfolg h3 { font-size: clamp(2.2rem, 9vw, 3.5rem); }
.erfolg p { margin-top: .8rem; max-width: 42ch; font-weight: 500; }

.kontakt__daten { display: grid; gap: 1.25rem; align-content: start; font-weight: 500; }
.kontakt__daten strong { font-family: var(--anzeige); font-style: italic; font-size: 1.5rem; font-weight: 800; }
.kontakt__wege { display: grid; gap: .55rem; }
.kontakt__wege .verweis { min-height: 2.75rem; align-items: center; background-position: 2.05em 85%; background-size: calc(100% - 2.05em) 1px; word-break: break-word; }
.kontakt__wege .verweis:hover { background-size: calc(100% - 2.05em) 2px; }
.kontakt__anfahrt p { margin-top: .9rem; max-width: 56ch; font-weight: 500; }
.karte { margin-top: 1.5rem; }
.karte__blatt { position: relative; }
.karte__blatt img { width: 100%; }
.karte__ort { position: absolute; padding: .12rem .3rem; background: var(--folie); font-weight: 600; font-size: .875rem; line-height: 1; }
.karte__ort--stralsund { left: 6%; top: 71%; }
.karte__ort--brueck { left: 47%; top: 62%; }
.karte__ort--sund { left: 32%; top: 34%; font-style: italic; font-weight: 500; }
.karte__ziel { position: absolute; left: 68.2%; top: 35.9%; display: flex; align-items: center; gap: .35rem; transform: translate(-1rem, -1rem); }
.karte__ziel svg { width: 2rem; height: 2rem; fill: none; stroke: var(--tinte); stroke-width: 1.6; stroke-linecap: round; }
.karte__ziel b { padding: .1rem .35rem; background: var(--tinte); color: var(--weiss); font-size: .875rem; }
.karte figcaption { margin-top: .6rem; font-size: .9375rem; font-weight: 500; }

/* Abschluss */
.fuss { position: relative; z-index: 3; background: var(--schwarz); padding-block: 3.5rem 2.5rem; row-gap: 2.5rem; font-size: 1rem; color: #d5dcdf; }
.fuss__marke { grid-column: a1 / a7; width: 11rem; }
.recht { grid-column: a1 / a7; }
.recht h2 { font-size: 1.75rem; color: var(--weiss); }
.recht--impressum { display: grid; gap: .75rem; align-content: start; }
.recht--datenschutz summary { display: flex; align-items: flex-start; justify-content: space-between; min-height: 3rem; cursor: pointer; list-style: none; }
.recht--datenschutz summary::-webkit-details-marker { display: none; }
.recht__text { display: grid; gap: .7rem; padding-top: .75rem; max-width: 70ch; }
.recht__text h3 { margin-top: .5rem; font-family: var(--text); font-style: normal; font-weight: 600; font-size: 1.0625rem; font-stretch: 100%; letter-spacing: 0; color: var(--weiss); line-height: 1.3; }
.fuss__nav { grid-column: a1 / a7; display: flex; gap: 1.5rem; }
.fuss__nav .verweis { min-height: 2.75rem; }

/* Antwortseite ohne JavaScript */
.antwortseite { padding-bottom: 0; }
.antwort { max-width: 40rem; margin: 0 auto; padding: 18vh var(--rand) 6rem; display: grid; gap: 1.25rem; }
.antwort__titel { font: italic 800 clamp(2.4rem, 8vw, 4rem)/1 var(--anzeige); font-stretch: 110%; }
.antwort ul { padding-left: 1.25rem; list-style: disc; }

/* Tablet und Desktop */
@media (min-width: 900px) {
  :root { --leiste: 0rem; }
  html { scroll-padding-top: 6rem; }
  .achse { grid-template-columns: [a0] 5fr [a1] 16fr [a2] 10fr [a3] 18fr [a4] 22fr [a5] 8fr [a6] 16fr [a7] 5fr [a8]; }
  .leiste, .menue { display: none; }
  .menue:popover-open { display: none; }

  .kopf__marke { width: clamp(10rem, 16vw, 14rem); }
  .kopf__nav { display: flex; gap: clamp(1.25rem, 2.6vw, 2.75rem); margin-left: auto; }
  .kopf__anruf { display: inline-flex; min-height: 2.75rem; padding: .55rem 1.1rem; font-size: 1rem; }

  .hero { padding-top: 6.5rem; min-height: 100svh; background: linear-gradient(to bottom, var(--schwarz) 62%, #12161a 62.1%, var(--schwarz) 98%); }
  .hero__leitmotiv { font-size: min(7.6vw, 13.5svh, 8.5rem); font-stretch: 116%; }
  .hero__z2 { width: max-content; margin-left: auto; margin-top: -.08em; }
  .hero__buehne { width: min(92vw, calc((100svh - 14.5rem - 3vw - 1.9 * min(7.6vw, 13.5svh, 8.5rem)) * 3)); margin-inline: auto; margin-top: -2.2vw; }
  .js .regler { left: 0; width: 100%; bottom: -2.25rem; padding-inline: 0; }
  .regler__text { right: 3.75rem; }
  .hero__fuss { grid-template-columns: [a0] 5fr [a1] 16fr [a2] 10fr [a3] 18fr [a4] 22fr [a5] 8fr [a6] 16fr [a7] 5fr [a8]; padding: 2.75rem 0 1.5rem; align-items: end; }
  .hero__text { grid-column: a1 / a5; }
  .hero__aktion { grid-column: a5 / a7; justify-content: flex-end; flex-wrap: nowrap; }
  .hero__fuss h1 { font-size: clamp(1.5rem, 2.3vw, 2.25rem); }

  /* Ruhige Grundform ohne Kamerafahrt */
  .passage { padding-block: 8rem calc(8rem + 22vw); }
  .passage__spur { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem 6vw; overflow: visible; padding-inline: var(--rand); }
  .station { flex: none; }
  .station--start { grid-column: 1 / -1; padding-bottom: 0; }
  .station--start h2 { font-size: clamp(4rem, 8vw, 7rem); }
  .station--b, .station--d { margin-top: 7rem; }
  .station__bild img { aspect-ratio: auto; }

  .traeger::before { left: -2vw; right: -2vw; }
  .betrieb { padding-block: 9rem 4rem; row-gap: 0; grid-template-rows: auto auto auto; }
  .betrieb__titel { grid-column: a1 / a5; grid-row: 1; font-size: clamp(4.5rem, 9.2vw, 9rem); }
  .betrieb__text { grid-column: a5 / a7; grid-row: 1 / span 2; align-self: start; padding-top: 1rem; }
  .plotter { grid-column: a1 / a5; grid-row: 2 / span 2; margin-top: 3.5rem; padding-right: 2.5vw; }
  .bewertung { grid-column: a5 / a7; grid-row: 3; align-self: end; margin-top: 3rem; }

  .naehe { padding-bottom: 8rem; display: grid; grid-template-columns: [a0] 5fr [a1] 16fr [a2] 10fr [a3] 18fr [a4] 22fr [a5] 8fr [a6] 16fr [a7] 5fr [a8]; }
  .naehe__titel, .naehe__text { grid-column: a3 / a7; padding-inline: 0; }
  .naehe__titel { font-size: clamp(3rem, 5vw, 5rem); }
  .naehe__reihe {
    grid-column: a1 / a7; display: grid; overflow: visible; padding-inline: 0; margin-top: 2.5rem;
    grid-template-columns: 16fr 10fr 18fr 22fr 8fr 16fr; gap: 1.25rem 0;
  }
  .detail { flex: none; }
  .detail--a { grid-column: 1 / span 3; grid-row: 1; rotate: -.7deg; }
  .detail--b { grid-column: 4 / span 2; grid-row: 1; margin-left: 2.5vw; margin-top: 4.5rem; rotate: 1.1deg; }
  .detail--c { grid-column: 2 / span 2; grid-row: 2; rotate: .9deg; }
  .detail--d { grid-column: 4 / span 3; grid-row: 2; margin-left: 2.5vw; align-self: end; margin-right: 20%; rotate: -1deg; }

  .fragen { padding-block: 7.5rem; }
  .fragen__titel { grid-column: a1 / a3; position: sticky; top: 7rem; align-self: start; font-size: clamp(2.75rem, 4.2vw, 4.25rem); }
  .fragen__liste { grid-column: a3 / a7; }
  .frage h3 { font-size: 1.3125rem; }

  .ruf { padding: 7rem var(--rand) 4rem; }
  .ruf__text { font-size: 1.625rem; padding-left: 44vw; }

  .kontakt { padding-block: 5.5rem 0; row-gap: 0; grid-template-rows: auto 1fr; }
  .kontakt__form { grid-column: a1 / a4; grid-row: 1 / span 2; padding-bottom: 5.5rem; padding-right: 3vw; }
  .kontakt__daten { grid-column: a4 / a7; grid-row: 1; padding-bottom: 3rem; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .kontakt__daten > p { grid-column: 1 / -1; }
  .kontakt__anfahrt { grid-column: a4 / a8; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows: auto 1fr; column-gap: 2.5vw; align-items: start; }
  .kontakt__anfahrt h3, .kontakt__anfahrt > p { grid-column: 1; padding-right: .5rem; }
  .karte { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .karte figcaption { padding-bottom: 1rem; }

  .fuss { padding-block: 5rem 3rem; font-size: 1rem; }
  .fuss__marke { grid-column: a1 / a2; width: 100%; max-width: 13rem; }
  .recht--impressum { grid-column: a3 / a5; }
  .recht--datenschutz { grid-column: a5 / a7; }
  .recht--impressum { grid-row: 1; }
  .recht--datenschutz { grid-row: 1; }
  .fuss__nav { grid-column: a1 / a3; grid-row: 2; }
}

/* Bewegung nur, wenn erwünscht */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.hero-bereit) .hero__buehne { opacity: .01; }
  .js:not(.hero-bereit) .hero__leitmotiv .zeile > span { transform: translateY(112%); }
  .js .hero__buehne { transition: opacity var(--t-mittel) ease; }

  @media (min-width: 900px) and (hover: hover) {
    .hero__ebene { transform: perspective(1500px) rotateY(calc(var(--kx, 0) * 2.6deg)) rotateX(calc(var(--ky, 0) * -1.3deg)); }
  }

  @view-transition { navigation: auto; }

  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) {
    animation: wischen 720ms var(--kurve-zug) both;
    -webkit-mask: url("../img/wisch-maske.svg") 100% 0 / 320% 100% no-repeat;
    mask: url("../img/wisch-maske.svg") 100% 0 / 320% 100% no-repeat;
  }
  ::view-transition-group(kopf), ::view-transition-group(leiste) { animation: none; z-index: 2; }
  ::view-transition-old(kopf), ::view-transition-old(leiste) { animation: none; opacity: 0; }
  ::view-transition-new(kopf), ::view-transition-new(leiste) { animation: none; }

  @supports (animation-timeline: view()) {
    .js .zeile > span {
      animation: zeile-rein linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 62%;
    }
    .js .hero__leitmotiv .zeile > span { animation: none; }

    .detail picture {
      animation: maske-rein linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 80%;
    }

    .ruf__nummer a { animation: nummer-zug linear both; animation-timeline: view(); animation-range: entry 45% cover 62%; }

    .hero__buehne { animation: van-raus linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }

    .kopf__marke { animation: marke-klein linear both; animation-timeline: scroll(root); animation-range: 0 14rem; }
    .kopf { animation: kopf-feld linear both; animation-timeline: scroll(root); animation-range: 10rem 22rem; }

    @media (min-width: 1000px) and (min-height: 560px) {
      .passage { height: 620svh; padding: 0; view-timeline: --passage block; }
      .passage__buehne { position: sticky; top: 0; height: 100svh; overflow: clip; container-type: size; }
      .passage__kamera { display: block; position: absolute; inset: 0; }
      .passage__kamera picture {
        position: absolute; left: 0; top: 0; width: min(168cqw, 3480px);
        transform-origin: 0 0;
        animation: kamera linear both;
        animation-timeline: --passage;
        animation-range: contain 0% contain 100%;
      }
      .passage__kamera img { width: 100%; }
      .passage__schatten { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 58%, rgb(11 13 15 / .72)); }

      .passage__spur {
        position: absolute; inset: 0; display: flex; gap: 0; padding: 0; overflow: visible; width: 500cqw;
        animation: spur linear both;
        animation-timeline: --passage;
        animation-range: contain 0% contain 100%;
      }
      .station { position: relative; flex: 0 0 100cqw; margin: 0; height: 100cqh; }
      .station__bild { display: none; }
      .station--start { display: block; padding: 0; }
      .station--start h2 { position: absolute; left: 5cqw; top: 13cqh; font-size: clamp(3.5rem, 7.2cqw, 7rem); }
      .station--start p { position: absolute; left: 50cqw; top: 16cqh; max-width: 26ch; margin: 0; font-size: 1.3125rem; color: var(--weiss); }
      .station .zeile > span { animation: none; }
      .station__text {
        position: absolute; width: min(35cqw, 33rem); padding: 2rem 3.25rem 2.1rem;
        background: rgb(16 19 23 / .95);
        clip-path: polygon(calc(3.25rem * .21) 0, 100% 0, calc(100% - 3.25rem * .21) 100%, 0 100%);
      }
      .station__text h3 { font-size: clamp(1.6rem, 2.35cqw, 2.4rem); font-stretch: 102%; }
      .station--a .station__text { right: 5cqw; bottom: 8cqh; }
      .station--b .station__text { right: 7cqw; top: 15cqh; }
      .station--c .station__text { right: 8cqw; bottom: 11cqh; }
      .station--d .station__text { left: 6cqw; top: 16cqh; }
      .traeger { margin-top: -100svh; }
    }
  }
}

@keyframes zeile-rein { from { transform: translateY(112%) skewX(-6deg); } to { transform: none; } }
@keyframes maske-rein { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } to { clip-path: polygon(0 0, 106% 0, 106% 100%, 0 100%); } }
@keyframes nummer-zug { from { --zug: -14; } to { --zug: 112; } }
@keyframes van-raus { to { transform: scale(1.16) rotate(-2.2deg) translateY(4%); } }
@keyframes marke-klein { to { transform: scale(.68); } }
@keyframes kopf-feld { from { background-color: rgb(11 13 15 / 0); } to { background-color: rgb(11 13 15 / .96); } }
@keyframes wischen { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes senden { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes kamera {
  0%, 5%   { transform: translate(52cqw, 66cqh) scale(.54) translate(-50%, -50%); }
  14%, 23% { transform: translate(38cqw, 40cqh) scale(1) translate(-50.5%, -22.5%); }
  32%, 41% { transform: translate(35cqw, 50cqh) scale(1) translate(-40%, -49.5%); }
  50%, 59% { transform: translate(36cqw, 44cqh) scale(1.08) translate(-24%, -25.5%); }
  68%, 100% { transform: translate(64cqw, 50cqh) scale(1.08) translate(-84%, -55.5%); }
}
@keyframes spur {
  0%, 5%   { transform: translateX(0); }
  14%, 23% { transform: translateX(-100cqw); }
  32%, 41% { transform: translateX(-200cqw); }
  50%, 59% { transform: translateX(-300cqw); }
  68%, 100% { transform: translateX(-400cqw); }
}

/* Feste Kopffläche, wenn scrollgebundene Animationen fehlen oder Ruhe erwünscht ist */
@supports not (animation-timeline: view()) {
  .kopf { background: rgb(11 13 15 / .94); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .kopf { background: rgb(11 13 15 / .94); }
  .knopf, .verweis, .frage__ziel, .plotter__aufkleber { transition: none; }
}

@media (forced-colors: active) {
  .ruf__nummer a { color: LinkText; background: none; }
  .aufkleber__flaeche { fill: Canvas; }
}

@media print {
  .kopf, .leiste, .regler { display: none; }
  body { background: #fff; color: #000; padding: 0; }
}