/* ==========================================================================
   betriebsseiten.de – Grundgerüst
   Farben und Schrift nach Logo-Paket V03: Cyan #00CCD4, Anthrazit #1B1E21, Inter
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-variable.woff2') format('woff2'), url('../fonts/inter-variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --anthrazit: #1b1e21;
  --anthrazit-tief: #131618;
  --cyan: #00ccd4;
  --cyan-glow: rgba(0, 204, 212, 0.16);
  --text: #ffffff;
  --text-soft: rgba(255, 255, 255, 0.74);
  --text-faint: rgba(255, 255, 255, 0.56);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.2);
  --on-cyan: #0d1113;
  /* Seitenhintergrund nach der Gestaltungsvorlage: tiefes Blauschwarz statt Anthrazit-Grau */
  --bg: #060b10;
  --bg-tief: #04080c;
  --linie-cyan: rgba(0, 204, 212, 0.24);
  --rahmen-cyan: rgba(0, 204, 212, 0.38);

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius: 14px;
  --radius-lg: 22px;
  --section: clamp(72px, 10vw, 128px);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --kopf-h: 84px; /* Höhe der Kopfzeile am Desktop */
}

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

* { margin: 0; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 70% 45% at 75% 100%, rgba(0, 170, 190, 0.07), rgba(0, 170, 190, 0) 70%),
    radial-gradient(ellipse 60% 40% at 15% 85%, rgba(0, 110, 160, 0.06), rgba(0, 110, 160, 0) 70%),
    var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { flex: 1; }

img, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.accent { color: var(--cyan); }

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--cyan);
  color: var(--on-cyan);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Kurze Cyan-Linie wie in der Mappe */
.rule {
  display: block;
  width: 56px;
  height: 2px;
  background: var(--cyan);
}

/* ---------- Kopfzeile ---------- */
/* Mobil: Logo, darunter der Slogan. Ab 960 px einzeilig: Logo – Slogan – Anfrage-Button (siehe Breakpoints) */
.kopf {
  position: relative;
  z-index: 10;
  background: linear-gradient(180deg, #081017, var(--bg));
  border-bottom: 1px solid var(--linie-cyan);
}
.kopf__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-block: 10px 9px;
}
.kopf__marke { display: block; flex: none; }
.kopf__marke img { width: clamp(140px, 42vw, 180px); }

/* Slogan; am Desktop mit kurzen Cyan-Linien links und rechts */
.claim {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text);
}
.claim__linie { display: none; flex: none; width: 36px; height: 2px; background: var(--cyan); }

/* „Jetzt unverbindlich anfragen“ – nur am Desktop; ein Klick zeigt die Handynummer (kontakt.js) */
.kopf__cta {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 10px;
  background: var(--cyan);
  color: var(--on-cyan);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 24px rgba(0, 204, 212, 0.22);
  transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.kopf__cta:hover { background: #33d9df; box-shadow: 0 0 32px rgba(0, 204, 212, 0.38); }
.kopf__cta .ic { width: 22px; height: 22px; stroke-width: 1.8; }
/* Offizielles WhatsApp-Logo (Meta Brand Resource Center), unverändert als Datei eingebunden – nicht umfärben */
.wa-logo { display: block; flex: none; }
.kopf__cta .wa-logo { width: 22px; height: 22px; }

/* ---------- Hero: Video + Beispielseiten ---------- */
.hero {
  --ease-panel: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-pop: cubic-bezier(0.34, 1.3, 0.6, 1); /* weich mit kaum sichtbarem Nachfedern */
  --ease-cam-in: cubic-bezier(0.55, 0, 0.15, 1);
  --push-in: 2s; /* Dauer der Kamerafahrt hin und zurück, wird von hero.js gesetzt */
  --push-out: 1.4s;
  --ease-cam-out: cubic-bezier(0.45, 0, 0.25, 1);
  position: relative;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  background: var(--bg);
}

/* Bühne mit Video und Beispielseiten. Am Desktop deckt sie den Hero genau ab, am Handy ist sie höher und
   unten bündig, sodass oben ein Stück Weltkugel abgeschnitten wird (siehe Hochformat) */
.hero__buehne { position: absolute; inset: 0; perspective: 1500px; }

.hero__media { position: absolute; inset: 0; }
.hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.hero__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Virtuelle Kamera: Die Ebene mit den Beispielseiten fährt auf die aktive Seite zu, das Video bleibt stehen
   (Vorgabe: Bartosch ist immer scharf, deshalb wird das Video nie skaliert). Ziel und Maßstab setzt hero.js als --cam-* */
.hero__media,
.hero__panels {
  transform-origin: var(--cam-x, 50%) var(--cam-y, 50%);
  transition: transform var(--push-out) var(--ease-cam-out), filter var(--push-out) var(--ease-cam-out);
}
/* Bartosch (Video) bleibt immer gestochen scharf: kein Zoom, kein Weichzeichner – nur leicht abgedunkelt */
.hero.is-push .hero__media { filter: brightness(0.88) saturate(0.95); }
.hero.is-push .hero__panels { transform: var(--cam-fg); }
.hero.is-push .hero__media,
.hero.is-push .hero__panels { transition-duration: var(--push-in); transition-timing-function: var(--ease-cam-in); }

/* Abdunklung zum Rand während der Kamerafahrt (liegt zwischen Video und Seiten) */
.hero__buehne::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at var(--vig-x, 50%) var(--vig-y, 50%), rgba(4, 7, 9, 0) 30%, rgba(4, 7, 9, 0.6) 100%);
  opacity: 0;
  transition: opacity var(--push-out) var(--ease-cam-out);
}
.hero.is-push .hero__buehne::after { opacity: 1; transition-duration: var(--push-in); transition-timing-function: var(--ease-cam-in); }

/* Sanfter Übergang unten in den nächsten Abschnitt */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(6, 11, 16, 0.92) 0%, rgba(6, 11, 16, 0) 16%);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.ic { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Beispielseite (Mini-Webseite als HTML) ---------- */
.hero__panels { position: absolute; inset: 0; z-index: 3; transform-style: preserve-3d; pointer-events: none; }

/* Monitor: schmaler dunkler Rahmen, unten etwas breiter, fast eckig, feine Cyan-Kante.
   Schärfe: Jede Seite ist in doppelter Größe aufgebaut (--w = Aufbaubreite) und wird im Ruhezustand auf 50 %
   verkleinert. Während Animationen zeichnet Chrome Ebenen in ihrer Aufbaugröße und skaliert sie nur – so hat die
   Sanitär-Seite bei der Kamerafahrt schon genug Bildpunkte und ist von Anfang an scharf.
   Positionen gleichen die Verkleinerung um die Mitte aus: (w − w/2) / 2 = w/4 seitlich, Höhe w/5,6. */
.ms {
  --w: calc(min(21vw, 37vh) * 2);
  --ruhe: 0.5;
  --ring: 2px; /* Cyan-Kante; nach der Verkleinerung 1 px */
  --bezel: calc(var(--w) * 0.011);
  position: absolute;
  width: var(--w);
  scale: var(--ruhe) var(--ruhe) var(--ruhe); /* auch die Tiefe, sonst wirkt die 3D-Drehung stärker */
  aspect-ratio: 7 / 5;
  container-type: inline-size;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  overflow: hidden;
  border: var(--bezel) solid #0a0f12;
  border-bottom-width: calc(var(--bezel) * 2.2);
  border-radius: calc(var(--w) * 0.012);
  background: linear-gradient(160deg, #123740, #0b2228);
  box-shadow:
    0 0 0 var(--ring) rgba(0, 204, 212, 0.5),
    0 0 calc(var(--w) * 0.05) rgba(0, 204, 212, 0.3),
    0 calc(var(--w) * 0.03) calc(var(--w) * 0.08) rgba(0, 0, 0, 0.45);
  color: #fff;
  filter: brightness(0.82) saturate(0.92);
  transform: rotateY(var(--ry)) rotateZ(var(--rz));
  transform-origin: center;
  transition:
    transform 1.2s var(--ease-panel),
    translate 1.2s var(--ease-panel),
    filter 1.2s var(--ease-panel),
    box-shadow 1.2s var(--ease-panel);
}
/* Aktive Seite: dreht fast frontal, kommt nach vorn, wird etwas größer; die übrigen treten zurück */
.ms.is-active {
  filter: none;
  transform: rotateY(var(--ry-on)) translateZ(180px) scale(1.1); /* 180 px × 0,5 = 90 px nach vorn */
  box-shadow:
    0 0 0 var(--ring) rgba(0, 204, 212, 0.85),
    0 0 calc(var(--w) * 0.1) rgba(0, 204, 212, 0.55),
    0 calc(var(--w) * 0.05) calc(var(--w) * 0.14) rgba(0, 0, 0, 0.55);
}
.hero.has-active .ms:not(.is-active) { translate: 0 0 -50px; filter: brightness(0.58) saturate(0.78) blur(0.6px); }

/* Kamerafahrt: aktive Seite ganz frontal, die übrigen deutlich zurück */
.hero.is-push .ms { transition-duration: var(--push-in); transition-timing-function: var(--ease-cam-in); }
.hero.is-settle .ms { transition-duration: var(--push-out); transition-timing-function: var(--ease-cam-out); }
.hero.is-push .ms.is-active { transform: rotateY(0deg) translateZ(120px) scale(1.25); } /* 120 px × 0,5 = 60 px */
.hero.is-push .ms:not(.is-active) { filter: brightness(0.4) saturate(0.65) blur(2px); }

/* Glasfläche: feine Lichtkante oben, ruhiger Reflex von links oben */
.ms::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.025) 26%, rgba(255, 255, 255, 0) 42%);
  box-shadow: inset 0 var(--ring) 0 rgba(255, 255, 255, 0.22), inset 0 0 0 var(--ring) rgba(0, 204, 212, 0.16);
}
/* Lichtreflex, der einmal über die aktive Seite läuft (bei der Kamerafahrt langsamer) */
.ms::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -75%;
  width: 250%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0) 58%);
  transform: translateX(-60%);
}
.ms.is-active::before { animation: ms-sweep 1.8s 0.35s var(--ease-panel) both; }
.hero.is-push .ms.is-active::before { animation: ms-sweep-push 2.4s calc(var(--push-in) - 0.2s) cubic-bezier(0.45, 0, 0.3, 1) both; }
.hero.is-settle .ms.is-active::before { animation: none; transform: translateX(60%); }
@keyframes ms-sweep { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
@keyframes ms-sweep-push { from { transform: translateX(-60%); } to { transform: translateX(60%); } }

.ms__tag {
  position: absolute;
  top: 2.2cqw;
  right: 3cqw;
  z-index: 2;
  padding: 0.5cqw 1.4cqw;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.4);
  font-size: 2.1cqw;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.ms__chrome { display: flex; gap: 1.1cqw; padding: 1.8cqw 3cqw 0; }
.ms__chrome i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; border: 0.25cqw solid rgba(255, 255, 255, 0.75); }
.ms__chrome i:first-child { background: #fff; }
.ms__nav { display: flex; align-items: center; gap: 2.4cqw; padding: 1.6cqw 3cqw 1.8cqw; }
.ms__logo { display: flex; align-items: center; gap: 1.4cqw; font-size: 2.6cqw; font-weight: 700; line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; }
.ms__logo svg { width: 5.2cqw; height: 5.2cqw; flex: none; }
.ms__links { display: flex; gap: 3cqw; margin-left: auto; font-size: 2.1cqw; color: rgba(255, 255, 255, 0.82); }
.ms__burger { position: relative; width: 3cqw; height: 2.2cqw; border-block: 0.35cqw solid #fff; }
.ms__burger::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 0.35cqw solid #fff; transform: translateY(-50%); }
.ms__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5cqw 3.4cqw 4.6cqw;
  background-size: cover;
  background-position: center right;
}
.ms__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 24, 28, 0.92) 0%, rgba(8, 24, 28, 0.6) 45%, rgba(8, 24, 28, 0) 75%);
}
.ms__hero > * { position: relative; }
.ms__hero h3 { max-width: 62%; font-size: 5.4cqw; font-weight: 800; line-height: 1.02; letter-spacing: -0.01em; text-transform: uppercase; }
.ms__hero p { margin-top: 1.4cqw; font-size: 2.6cqw; color: rgba(255, 255, 255, 0.9); }
.ms__btn { align-self: flex-start; margin-top: 2.6cqw; padding: 1.2cqw 2.6cqw; border: 0.3cqw solid var(--cyan); border-radius: 1.2cqw; box-shadow: 0 0 1.6cqw rgba(0, 204, 212, 0.45); font-size: 2.3cqw; font-weight: 500; }
.ms__icons { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.ms__icons li { display: grid; justify-items: center; gap: 1cqw; padding: 2.6cqw 1cqw 2.8cqw; font-size: 2.1cqw; text-align: center; color: rgba(255, 255, 255, 0.9); }
.ms__icons li + li { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.ms__icons svg { width: 5.6cqw; height: 5.6cqw; }

/* Positionen: links leicht nach rechts gedreht, rechts nach links; zwischen oberer und unterer Reihe bleibt Abstand */
.ms[data-pos='tl'] { left: calc(7vw - var(--w) / 4); top: calc(9vh - var(--w) / 5.6);  --ry: 15deg;  --rz: -1deg;   --ry-on: 2deg; }
.ms[data-pos='bl'] { left: calc(6vw - var(--w) / 4); top: calc(45vh - var(--w) / 5.6); --ry: 13deg;  --rz: 0.5deg;  --ry-on: 2deg; }
.ms[data-pos='tr'] { right: calc(7vw - var(--w) / 4); top: calc(10vh - var(--w) / 5.6); --ry: -15deg; --rz: 1deg;    --ry-on: -2deg; }
.ms[data-pos='br'] { right: calc(6vw - var(--w) / 4); top: calc(46vh - var(--w) / 5.6); --ry: -13deg; --rz: -0.5deg; --ry-on: -2deg; }

/* Lichtimpuls von der Konsole zur aktiven Seite */
.pulse { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 6px var(--cyan)) drop-shadow(0 0 14px var(--cyan)); }
.pulse.go { animation: pulse 0.9s cubic-bezier(0.3, 0.6, 0.3, 1) forwards; }
@keyframes pulse {
  0% { opacity: 0; stroke-dashoffset: var(--len); }
  15% { opacity: 1; }
  70% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}

/* Schmalere Fenster: Seiten größer und näher an den Rand */
@media (max-aspect-ratio: 4/3) {
  .ms { --w: calc(30vw * 2); }
  .ms[data-pos='tl'] { left: calc(3vw - var(--w) / 4); top: calc(8vh - var(--w) / 5.6); }
  .ms[data-pos='bl'] { left: calc(3vw - var(--w) / 4); top: calc(45vh - var(--w) / 5.6); }
  .ms[data-pos='tr'] { right: calc(3vw - var(--w) / 4); top: calc(9vh - var(--w) / 5.6); }
  .ms[data-pos='br'] { right: calc(3vw - var(--w) / 4); top: calc(46vh - var(--w) / 5.6); }
}
/* Hochformat (Handy, Tablet hoch): Der Kopf bleibt frei. Garten und Sanitär stehen auf Brusthöhe zwischen Kopf und
   Händen, Dachdecker und Elektriker unter den Händen. Höhen in % des Heros, weil das Video genau dessen Höhe füllt.
   Die jeweils große Seite holt hero.js auf die Brustfläche (--zoom-*).
   Drehung (transform), Position (translate) und Größe (scale) laufen getrennt, damit jede ihr eigenes Timing hat.
   Schärfe: Die Seiten sind in der großen Größe aufgebaut (--w) und werden im Ruhezustand auf die Hälfte verkleinert.
   So steht die große Sanitär-Seite in Originalgröße da, statt hochgezoomt und unscharf zu wirken.
   Positionen gleichen die Verkleinerung um die Mitte aus: (w − w/2) / 2 = w/4 seitlich, Höhe entsprechend w/5,6. */
@media (max-aspect-ratio: 3/4) {
  .hero__buehne { container-type: size; }
  .ms {
    /* Aufbaugröße = Größe der großen Sanitär-Seite (scharf); im Ruhezustand ein Drittel davon */
    --w: min(90cqw, 69cqh);
    --klein: 0.3333;
    --ring: 1px;
    transform: rotateX(0deg) rotateY(var(--ry)) rotateZ(var(--rz));
    translate: 0 0 0;
    scale: var(--klein);
    transition:
      transform 1.1s var(--ease-panel),
      translate 1.1s var(--ease-panel),
      scale 0.9s var(--ease-pop),
      filter 1.1s var(--ease-panel),
      box-shadow 1.1s var(--ease-panel);
  }
  /* Verkleinerung um die Mitte ausgleichen: (w − w/3) / 2 = w/3 seitlich, (h − h/3) / 2 = w/4,2 in der Höhe */
  .ms[data-pos='bl'] { left: calc(2cqw - var(--w) / 3); top: calc(42% - var(--w) / 4.2); --ry: 10deg; --rz: 0deg; --ry-on: 3deg; --nudge: 1.3%; --seite: -1; }
  .ms[data-pos='br'] { right: calc(2cqw - var(--w) / 3); top: calc(42% - var(--w) / 4.2); --ry: -10deg; --rz: 0deg; --ry-on: -3deg; --nudge: -1.3%; --seite: 1; }
  .ms[data-pos='tl'] { left: calc(2cqw - var(--w) / 3); top: auto; bottom: calc(3% - var(--w) / 4.2); --ry: 10deg; --rz: 0deg; --ry-on: 3deg; --nudge: 1.3%; --seite: -1; }
  .ms[data-pos='tr'] { right: calc(2cqw - var(--w) / 3); top: auto; bottom: calc(3% - var(--w) / 4.2); --ry: -10deg; --rz: 0deg; --ry-on: -3deg; --nudge: -1.3%; --seite: 1; }

  /* Kurz hervorgehoben: dreht fast frontal, rückt etwas nach innen und oben, wird spürbar größer (leichtes Nachfedern) */
  .ms.is-active { transform: rotateX(0deg) rotateY(var(--ry-on)) rotateZ(0deg); translate: var(--nudge) -1% 20px; scale: calc(var(--klein) * 1.12); }
  .hero.has-active .ms:not(.is-active) { translate: 0 0 0; scale: calc(var(--klein) * 0.97); filter: brightness(0.5) saturate(0.7) blur(0.6px); }

  /* Groß: kommt kräftig gedreht und geneigt herein und dreht sich dann in eine leichte Schräglage
     wie ein schwebendes Display (is-land); während des Stehens bewegt es sich ganz leicht.
     --seite spiegelt die Drehung: Seiten von rechts (1) und von links (−1) schwenken von ihrer Seite herein. */
  .hero.is-push .ms.is-active {
    translate: var(--zoom-x) var(--zoom-y) var(--zoom-z);
    scale: var(--zoom-s);
    transform: rotateX(10deg) rotateY(calc(var(--seite, 1) * -22deg)) rotateZ(calc(var(--seite, 1) * -3deg));
    transition:
      translate var(--push-in) var(--ease-cam-in),
      scale var(--push-in) var(--ease-cam-in),
      transform 1.1s cubic-bezier(0.25, 0.6, 0.35, 1),
      filter 1.1s var(--ease-panel),
      box-shadow 1.1s var(--ease-panel);
    animation: ms-float var(--push-hold, 3s) var(--push-in) ease-in-out both;
  }
  .hero.is-push.is-land .ms.is-active {
    transform: rotateX(4deg) rotateY(calc(var(--seite, 1) * -7deg)) rotateZ(calc(var(--seite, 1) * -1.5deg));
    transition:
      translate var(--push-in) var(--ease-cam-in),
      scale var(--push-in) var(--ease-cam-in),
      transform 1.6s cubic-bezier(0.45, 0, 0.25, 1),
      filter 1.1s var(--ease-panel),
      box-shadow 1.1s var(--ease-panel);
  }
}
/* Handy hochkant: Der Hero ist nur so hoch, dass auf dem ersten Bildschirm noch der KI-Satz unter der Animation
   sichtbar ist (--hero-h misst hero.js aus Kopfzeile, Intro und KI-Satz). Die Bühne ist höher und unten bündig,
   oben wird ein Stück Weltkugel abgeschnitten (14 % der Bühnenhöhe, der Kopf bleibt vollständig sichtbar). */
@media (max-aspect-ratio: 3/4) and (max-width: 959.98px) {
  .hero { height: max(300px, var(--hero-h, calc(100svh - 310px))); min-height: 0; }
  .hero__buehne { inset: auto 0 0; height: calc(100% / 0.86); }
  .hero::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    z-index: 4;
    height: 5%;
    pointer-events: none;
    background: linear-gradient(180deg, var(--bg), rgba(6, 11, 16, 0));
  }
}
@keyframes ms-float {
  0%, 100% { rotate: y 0deg; }
  50% { rotate: y calc(var(--seite, 1) * 2.5deg); }
}

/* ---------- Texte über und unter der Animation ---------- */
/* Mobil in DOM-Reihenfolge: Intro → Animation → Details → Kontakt (Spalte, max. 680 px).
   Ab 960 px per Grid: Animation oben über die ganze Breite, darunter links Intro und Details, rechts die Kontaktkarte. */
.intro,
.details,
.rechts {
  width: 100%;
  max-width: calc(680px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.intro { padding-block: 14px 14px; }
.details { padding-block: 14px 6px; }
.rechts { padding-block: 20px 40px; }

.intro__titel {
  font-size: clamp(1.375rem, 0.95rem + 2.1vw, 2.625rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.intro p,
.details p {
  font-size: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
}
.intro p { margin-top: 6px; }
.details p + p { margin-top: 14px; }
.details strong { font-weight: 700; color: var(--text); }
.details strong.accent { color: var(--cyan); }

/* ---------- Angebot: kostenloser, unverbindlicher Entwurf ---------- */
/* Box mit Laser-Rahmen (Cyan-Kante mit Leuchten) und Handschlag-Symbol, über dem Kontakt */
.angebot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  padding: 12px 12px 12px 10px;
  border: 1px solid rgba(0, 204, 212, 0.7);
  border-radius: 12px;
  background:
    radial-gradient(ellipse 70% 90% at 0% 50%, rgba(0, 204, 212, 0.1), rgba(0, 204, 212, 0) 70%),
    linear-gradient(160deg, rgba(14, 40, 52, 0.85), rgba(6, 16, 23, 0.9));
  box-shadow: 0 0 0 1px rgba(0, 204, 212, 0.12), 0 0 22px rgba(0, 204, 212, 0.28), inset 0 0 22px rgba(0, 204, 212, 0.1);
}
/* Eigenes Handschlag-Symbol (Monoline): Daumen-Hand oben, ihre Fingerknöchel greifen unten links */
.angebot__icon {
  flex: none;
  width: 86px;
  height: auto;
  fill: none;
  stroke: var(--cyan);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(0, 204, 212, 0.75));
}
.angebot__titel {
  font-size: clamp(1rem, 0.85rem + 0.4vw, 1.125rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.angebot p {
  margin-top: 4px;
  font-size: clamp(0.875rem, 0.8rem + 0.2vw, 0.9375rem);
  line-height: 1.42;
  color: rgba(255, 255, 255, 0.86);
}
.angebot strong.accent { font-weight: 600; }

/* ---------- Kontakt ---------- */
.kontakt__titel {
  font-size: clamp(1.125rem, 0.95rem + 0.9vw, 1.625rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.kontakt__text { margin-top: 8px; font-size: 0.9375rem; line-height: 1.5; color: var(--text-soft); }

/* WhatsApp-Grün mit Verlauf und Leuchten wie in der Vorlage. Mobil (Schrift 17 px) etwas dunkler für Kontrast
   über 4,5 : 1, am Desktop heller mit großer Schrift (19 px fett, Kontrast über 3 : 1 genügt dort) */
.kontakt__wa {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  margin-top: 16px;
  padding: 0 18px;
  border: 1px solid rgba(110, 240, 160, 0.28);
  border-radius: 10px;
  background: linear-gradient(90deg, #0f7238 0%, #148442 55%, #127b3d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 26px rgba(34, 197, 94, 0.26);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.kontakt__wa:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 38px rgba(34, 197, 94, 0.42); }
.kontakt__wa .wa-logo { width: 28px; height: 28px; }
.kontakt__wa [data-text] { flex: 1; text-align: center; }
.kontakt__wa .kontakt__pfeil { width: 20px; height: 20px; stroke-width: 2; }
.kontakt__wa.is-offen .kontakt__pfeil { visibility: hidden; }

/* Die beiden Boxen stehen nebeneinander, sobald Nummer und E-Mail-Adresse jeweils in eine Zeile passen
   (Container-Abfrage auf die Breite des Kontaktbereichs), sonst untereinander */
.kontakt { container: kontakt / inline-size; }
.kontakt__boxen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
}
@container kontakt (min-width: 470px) {
  .kontakt__boxen { grid-template-columns: repeat(2, minmax(max-content, 1fr)); }
  .kbox__wert { white-space: nowrap; }
}
.kbox {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 66px;
  padding: 12px 16px;
  border: 1px solid var(--rahmen-cyan);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(12, 33, 43, 0.9), rgba(7, 18, 26, 0.9));
  box-shadow: inset 0 0 18px rgba(0, 204, 212, 0.06), 0 0 14px rgba(0, 204, 212, 0.07);
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.kbox:hover { border-color: rgba(0, 204, 212, 0.75); box-shadow: inset 0 0 22px rgba(0, 204, 212, 0.1), 0 0 22px rgba(0, 204, 212, 0.16); }
.kbox .ic { flex: none; width: 26px; height: 26px; color: #fff; }
.kbox > span { min-width: 0; }
.kbox__label { display: block; font-size: 0.8125rem; line-height: 1.3; color: var(--text-soft); }
.kbox__wert {
  display: block;
  font-size: clamp(0.875rem, 0.8rem + 0.25vw, 0.9375rem);
  font-weight: 700;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
/* E-Mail kopiert */
.kbox.is-kopiert { border-color: var(--cyan); box-shadow: inset 0 0 22px rgba(0, 204, 212, 0.12), 0 0 22px rgba(0, 204, 212, 0.2); }
.kbox.is-kopiert .kbox__label { color: var(--cyan); }
/* Desktop: „Jetzt anrufen“ leuchtet kurz auf, statt ein Telefonprogramm zu öffnen */
.kbox.is-leuchten { animation: kbox-leuchten 1.6s var(--ease) 1; }
@keyframes kbox-leuchten {
  0%, 100% { border-color: var(--rahmen-cyan); box-shadow: inset 0 0 18px rgba(0, 204, 212, 0.06), 0 0 14px rgba(0, 204, 212, 0.07); }
  25% { border-color: var(--cyan); box-shadow: inset 0 0 22px rgba(0, 204, 212, 0.14), 0 0 0 3px rgba(0, 204, 212, 0.3), 0 0 30px rgba(0, 204, 212, 0.45); }
}

/* ---------- Rechtsseiten ---------- */
.legal { padding-block: clamp(32px, 5vw, 64px) var(--section); }
.legal__inner { max-width: 760px; }
.legal h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  /* lange Wörter wie „Datenschutzerklärung“ auf schmalen Handys sauber trennen */
  hyphens: auto;
  overflow-wrap: break-word;
}
.legal h1 + .rule { margin-top: 22px; }

/* Rechtstexte (Impressum, Datenschutz) – Links müssen ohne Maus als Link erkennbar sein:
   dauerhaft in Cyan und unterstrichen */
.rechtstext { margin-top: 32px; color: var(--text-soft); line-height: 1.65; overflow-wrap: anywhere; }
.rechtstext p + p,
.rechtstext p + ul,
.rechtstext ul + p { margin-top: 14px; }
.rechtstext ul { padding-left: 1.4em; }
.rechtstext li + li { margin-top: 4px; }
.rechtstext li::marker { color: var(--cyan); }
.rechtstext b { color: var(--text); font-weight: 700; }
.rechtstext h2 {
  margin-top: 44px;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text);
}
.rechtstext h3 { margin-top: 28px; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; color: var(--text); }
.rechtstext h2 + p,
.rechtstext h3 + p,
.rechtstext h2 + h3 { margin-top: 12px; }
.rechtstext a {
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.rechtstext a:hover { text-decoration-thickness: 2px; }

/* Sichtbarer Platzhalter – darf so nicht veröffentlicht werden */
.platzhalter {
  margin-top: 32px;
  padding: 24px;
  border: 1px dashed rgba(0, 204, 212, 0.45);
  border-radius: var(--radius);
  color: var(--text-soft);
}
.platzhalter strong { color: var(--cyan); font-weight: 600; }

/* ---------- Fußzeile ---------- */
.fuss {
  border-top: 1px solid var(--linie-cyan);
  background: linear-gradient(180deg, rgba(4, 8, 12, 0.6), var(--bg-tief));
  padding-block: 18px;
  font-size: 0.875rem;
  color: var(--text-soft);
}
.fuss__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 32px;
}
.fuss__marke { display: none; align-items: center; gap: 16px; }
.fuss__marke img { width: 150px; }
.fuss__marke .claim__linie { display: block; }
.fuss__nav { display: flex; align-items: center; gap: 14px; }
.fuss__nav a { text-decoration: none; }
.fuss__nav a:hover,
.fuss__nav a[aria-current='page'] { color: var(--cyan); }

/* ---------- Breakpoints ---------- */
@media (max-width: 959.98px) {
  .nur-desktop { display: none !important; }
  .kbox { min-height: 60px; }
}
/* Schmale Handys (z. B. Samsung S23, 360 px): WhatsApp-Text in einer Zeile – Pfeil weglassen, Schrift etwas kleiner */
@media (max-width: 399.98px) {
  .kontakt__wa { gap: 12px; padding: 0 16px; font-size: 1rem; white-space: nowrap; }
  .kontakt__wa .kontakt__pfeil { display: none; }
}

@media (min-width: 960px) {
  .nur-mobil { display: none !important; }

  .kopf__inner { flex-direction: row; align-items: center; gap: 24px; min-height: var(--kopf-h); padding-block: 0; }
  .kopf__marke img { width: clamp(150px, 13vw, 200px); }
  .claim { margin-inline: auto; font-size: clamp(0.875rem, 0.6rem + 0.45vw, 1.0625rem); }
  .kopf__cta { display: inline-flex; }

  /* Die Animation füllt den Bildschirm unterhalb der Kopfzeile */
  .hero { height: calc(100svh - var(--kopf-h)); }

  .seite {
    display: grid;
    grid-template-columns: [voll-start] minmax(0, 1fr) [inhalt-start] minmax(0, 680px) [mitte] minmax(0, 540px) [inhalt-end] minmax(0, 1fr) [voll-end];
    /* Letzte Zeile flexibel: Die hohe rechte Spalte verlängert nur sie, links entsteht keine Lücke unter dem Intro */
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(32px, 4vw, 64px);
    align-items: start;
  }
  .seite > .hero { grid-column: voll; grid-row: 1; }
  .intro,
  .details { max-width: none; margin-inline: 0; padding-inline: 0; grid-column: inhalt-start / mitte; }
  .seite { --oben: clamp(28px, 3vw, 44px); --box-innen: 18px; --zwischen: 22px; }
  /* Intro beginnt auf derselben Höhe wie die Angebot-Box; die Überschrift steht auf einer Linie mit dem Box-Titel */
  .intro { grid-row: 2; padding-block: calc(var(--oben) + var(--box-innen) - 1px) var(--box-innen); }
  /* KI-Hinweis beginnt auf einer Linie mit dem Titel der Kontaktbox */
  .details { grid-row: 3; padding-block: calc(var(--zwischen) + clamp(22px, 2vw, 28px)) clamp(40px, 5vw, 72px); }
  .rechts { display: contents; }
  .angebot {
    grid-column: mitte / inhalt-end;
    grid-row: 2;
    align-self: stretch;
    margin: var(--oben) 0 0;
    align-items: flex-start;
    gap: 20px;
    padding: var(--box-innen) 22px var(--box-innen) 18px;
  }
  /* Symbol mittig in der Box, Text oben – so steht der Box-Titel auf einer Linie mit der Überschrift links */
  .angebot__icon { align-self: center; }
  .angebot__icon { width: 84px; stroke-width: 3; }
  .kontakt {
    grid-column: mitte / inhalt-end;
    grid-row: 3;
    align-self: start;
    margin: var(--zwischen) 0 clamp(40px, 5vw, 72px);
    padding: clamp(22px, 2vw, 28px);
    border: 1px solid var(--linie-cyan);
    border-radius: 16px;
    background:
      radial-gradient(ellipse 90% 70% at 0% 0%, rgba(0, 204, 212, 0.07), rgba(0, 204, 212, 0) 60%),
      linear-gradient(160deg, rgba(15, 42, 54, 0.62) 0%, rgba(8, 22, 31, 0.66) 55%, rgba(6, 14, 20, 0.72) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 40px rgba(0, 204, 212, 0.04), 0 0 40px rgba(0, 204, 212, 0.06), 0 24px 60px rgba(0, 0, 0, 0.35);
  }
  .kontakt__wa {
    min-height: 60px;
    background: linear-gradient(90deg, #138f45 0%, #18a650 55%, #15994a 100%);
    font-size: 1.1875rem;
  }

  .fuss__inner { justify-content: space-between; }
  .fuss__marke { display: flex; }
}
@media (min-width: 1180px) {
  .kopf .claim__linie { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after { transition-duration: 0.001ms !important; }
}