/* ==========================================================================
   ROYAL DIENSTLEISTUNGEN — Design System
   Autor: Claude  |  Struktur: Tokens › Base › Layout › Komponenten › Sektionen
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Farben – Basis */
  --c-void:        #05070F;
  --c-midnight:    #080C1A;
  --c-navy:        #0C1226;
  --c-navy-soft:   #121A35;
  --c-line:        rgba(255, 255, 255, .08);
  --c-line-strong: rgba(255, 255, 255, .16);

  /* Farben – Marke */
  --c-royal:       #2B4FD8;
  --c-royal-light: #5B84FF;
  --c-royal-deep:  #16266E;
  --c-gold:        #D8B45A;
  --c-gold-light:  #F4DFA0;
  --c-gold-deep:   #9C7A22;
  --c-aqua:        #58D7E8;

  /* Farben – Text */
  --c-text:        #EEF2FC;
  --c-text-soft:   #AEB9D4;
  --c-text-mute:   #7A86A6;

  /* Verläufe */
  --g-gold:   linear-gradient(135deg, #9C7A22 0%, #F4DFA0 42%, #D8B45A 68%, #F9EFCB 100%);
  --g-royal:  linear-gradient(135deg, #2B4FD8 0%, #5B84FF 100%);
  --g-glass:  linear-gradient(160deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 55%, rgba(255,255,255,0) 100%);
  --g-panel:  linear-gradient(165deg, rgba(22,32,64,.92) 0%, rgba(10,15,32,.92) 100%);

  /* Typografie */
  --f-display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --f-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-serif:   'Fraunces', Georgia, 'Times New Roman', serif;

  /* Fluid Type Scale */
  --t-xs:   clamp(.72rem, .70rem + .10vw, .78rem);
  --t-sm:   clamp(.84rem, .81rem + .14vw, .92rem);
  --t-base: clamp(.97rem, .93rem + .20vw, 1.06rem);
  --t-md:   clamp(1.08rem, 1.02rem + .30vw, 1.22rem);
  --t-lg:   clamp(1.30rem, 1.18rem + .58vw, 1.70rem);
  --t-xl:   clamp(1.70rem, 1.44rem + 1.25vw, 2.60rem);
  --t-2xl:  clamp(2.10rem, 1.62rem + 2.30vw, 3.90rem);
  --t-3xl:  clamp(2.60rem, 1.80rem + 3.80vw, 5.40rem);

  /* Abstände */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);

  /* Radien */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-xl: 32px;  --r-full: 999px;

  /* Schatten */
  --sh-sm:   0 2px 8px rgba(0,0,0,.28);
  --sh-md:   0 12px 32px rgba(0,0,0,.36);
  --sh-lg:   0 28px 70px rgba(0,0,0,.50);
  --sh-gold: 0 14px 44px rgba(216,180,90,.24);
  --sh-blue: 0 18px 56px rgba(43,79,216,.30);

  /* Layout */
  --wrap: 1240px;
  --wrap-narrow: 880px;
  --nav-h: 78px;

  /* Motion */
  --e-out:   cubic-bezier(.22, 1, .36, 1);
  --e-inout: cubic-bezier(.65, 0, .35, 1);
  --e-back:  cubic-bezier(.34, 1.56, .64, 1);
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.72;
  color: var(--c-text-soft);
  background: var(--c-void);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  color: var(--c-text);
  line-height: 1.12;
  letter-spacing: -.022em;
  font-weight: 600;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h1 { font-size: var(--t-3xl); font-weight: 700; letter-spacing: -.035em; }
h2 { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -.03em; }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p { margin: 0 0 var(--s-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--c-royal-light); text-decoration: none; transition: color .25s var(--e-out); }
a:hover { color: var(--c-gold-light); }

img, svg, canvas, video { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25rem; }
li { margin-bottom: .4rem; }
strong { color: var(--c-text); font-weight: 600; }
small { font-size: var(--t-xs); }

:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--c-royal); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--c-void); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--c-royal-deep), var(--c-royal));
  border-radius: 99px;
  border: 3px solid var(--c-void);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-gold-deep); }

.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 999;
  background: var(--c-gold); color: #1A1405; padding: .7rem 1.2rem;
  border-radius: var(--r-sm); font-weight: 600;
  transition: top .25s var(--e-out);
}
.skip-link:focus { top: 16px; color: #1A1405; }

/* --------------------------------------------------------------------------
   3. LAYOUT-HELFER
   -------------------------------------------------------------------------- */
/* Versteckt heißt versteckt.
   Der Browser blendet Elemente mit dem Attribut "hidden" von sich aus aus –
   aber jede eigene Regel mit einem display (etwa "display: grid") ist
   stärker und hebt das wieder auf. Das Element bleibt dann unsichtbar im
   Weg liegen und verschluckt Klicks. Genau das ist hier einmal passiert.
   Diese Zeile schließt die Lücke ein für alle Mal. */
[hidden] { display: none !important; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }

.section {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--section-y);
  border-top: 1px solid rgba(132,158,255,.07);
  background:
    radial-gradient(ellipse 58% 42% at 8% 12%, rgba(43,79,216,.12), transparent 72%),
    radial-gradient(ellipse 42% 34% at 94% 76%, rgba(216,180,90,.07), transparent 74%),
    linear-gradient(180deg, rgba(8,12,26,.98), rgba(5,7,15,.99));
}
.section > .wrap { position: relative; z-index: 2; }

/* Räumliche Bühne für alle Inhaltsbereiche nach den Videos. Die beiden
   Ebenen bestehen nur aus CSS und erzeugen daher keine zusätzlichen Dateien
   oder Ladezeit: eine geneigte Glasfläche und ein perspektivisches Raster. */
.section::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 10%; right: -9%;
  width: clamp(260px, 32vw, 540px);
  aspect-ratio: 1.18;
  pointer-events: none;
  border: 1px solid rgba(132,158,255,.16);
  border-radius: 28% 52% 34% 46%;
  background:
    linear-gradient(145deg, rgba(91,132,255,.12), rgba(255,255,255,.025) 42%, rgba(216,180,90,.06));
  box-shadow:
    inset 28px 24px 70px rgba(91,132,255,.07),
    inset -24px -18px 60px rgba(216,180,90,.045),
    0 44px 100px rgba(0,0,0,.28);
  transform: perspective(900px) rotateX(58deg) rotateZ(-24deg) translate3d(0,0,-60px);
  animation: sectionGlassFloat 18s ease-in-out infinite;
  opacity: .72;
}
.section::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: -12%; right: -12%; bottom: -15rem;
  height: clamp(310px, 34vw, 520px);
  pointer-events: none;
  background-image:
    linear-gradient(rgba(91,132,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,132,255,.12) 1px, transparent 1px);
  background-size: clamp(48px, 5vw, 76px) clamp(48px, 5vw, 76px);
  -webkit-mask-image: radial-gradient(ellipse 65% 72% at 50% 48%, #000 0%, rgba(0,0,0,.72) 42%, transparent 76%);
  mask-image: radial-gradient(ellipse 65% 72% at 50% 48%, #000 0%, rgba(0,0,0,.72) 42%, transparent 76%);
  transform-origin: 50% 100%;
  transform: perspective(760px) rotateX(63deg) translateZ(-55px);
  opacity: .46;
}
main > .section:nth-of-type(even)::before {
  right: auto; left: -10%;
  transform: perspective(900px) rotateX(58deg) rotateZ(28deg) translate3d(0,0,-60px);
  animation-direction: reverse;
}
main > .section:nth-of-type(even) {
  background:
    radial-gradient(ellipse 52% 40% at 92% 8%, rgba(43,79,216,.13), transparent 72%),
    radial-gradient(ellipse 40% 34% at 4% 82%, rgba(88,215,232,.055), transparent 74%),
    linear-gradient(180deg, rgba(5,7,15,.99), rgba(9,13,29,.98));
}
@keyframes sectionGlassFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -18px; }
}
@media (max-width: 760px) {
  .section::before { width: 320px; right: -42%; opacity: .42; }
  main > .section:nth-of-type(even)::before { left: -46%; right: auto; }
  .section::after { opacity: .28; bottom: -12rem; }
}
@media (prefers-reduced-motion: reduce) {
  .section::before { animation: none; }
}
.section--tight { padding-block: calc(var(--section-y) * .6); }

.section-head { max-width: 740px; margin-bottom: clamp(2.5rem, 4vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { font-size: var(--t-md); color: var(--c-text-soft); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-body);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-gold-light);
  margin-bottom: var(--s-4);
}
.eyebrow::before {
  content: ''; width: 28px; height: 1px;
  background: var(--g-gold);
}
.section-head--center .eyebrow::after {
  content: ''; width: 28px; height: 1px; background: var(--g-gold);
}

.text-gold {
  background: var(--g-gold);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.text-royal {
  background: linear-gradient(120deg, #5B84FF, #58D7E8);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.lead { font-size: var(--t-md); color: var(--c-text-soft); }

/* Dekorative Hintergründe */
/* --------------------------------------------------------------------------
   Lebendiger Hintergrund – ohne jedes Muster
   --------------------------------------------------------------------------
   Drei weiche Lichtkörper schweben in unterschiedlichen Ebenen und Tempi
   durcheinander. Beim Scrollen bewegen sie sich zusätzlich unterschiedlich
   schnell (siehe --tiefe in main.js) – dadurch entsteht echte Raumtiefe.
   Keine Linien, keine Kanten, kein Raster.
   -------------------------------------------------------------------------- */
.bg-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
  /* Die Perspektive macht aus flachen Formen echten Raum: Was weiter hinten
     liegt, wird kleiner und langsamer – genau wie im Blickfeld eines Auges. */
  perspective: 900px;
  perspective-origin: 50% 38%;
}

/* Alle Lichtkörper teilen sich dieselbe weiche Grundform.
   Wichtig für flüssiges Scrollen: KEIN filter: blur(). Die weichen Ränder
   entstehen allein durch die Stufen der Farbverläufe. Ein echter
   Weichzeichner über 900 Pixel breite Flächen müsste der Grafikchip bei
   jeder Bewegung neu berechnen – die teuerste Operation überhaupt. */
.bg-grid::before,
.bg-grid::after,
.bg-grid__licht,
.bg-grid__licht::before {
  content: '';
  position: absolute;
  border-radius: 50%;
}

/* 1 – Königsblau, groß und träge: trägt die Grundstimmung, liegt hinten.
   Die Farbe endet bei 62 % des Radius – der äußere Ring ist farblos und
   dient als Puffer, damit der Abschnittsrand nie durch Farbe schneidet. */
.bg-grid::before {
  width: clamp(500px, 56vw, 980px); aspect-ratio: 1;
  top: -7%; left: -6%;
  background: radial-gradient(circle closest-side,
    rgba(43,79,216,.42) 0%, rgba(43,79,216,.26) 24%,
    rgba(43,79,216,.10) 44%, transparent 62%);
  animation: raumA 26s ease-in-out infinite;
}

/* 2 – Gold, mittelgroß: der warme Akzent, läuft bewusst gegenläufig */
.bg-grid::after {
  width: clamp(380px, 44vw, 760px); aspect-ratio: 1;
  top: -5%; right: -6%;
  background: radial-gradient(circle closest-side,
    rgba(216,180,90,.34) 0%, rgba(216,180,90,.19) 26%,
    rgba(216,180,90,.07) 46%, transparent 62%);
  animation: raumB 21s ease-in-out infinite;
}

/* 3 – Türkis, tief unten: hebt den unteren Rand an */
.bg-grid__licht {
  width: clamp(340px, 40vw, 680px); aspect-ratio: 1;
  bottom: -7%; left: 20%;
  background: radial-gradient(circle closest-side,
    rgba(88,215,232,.28) 0%, rgba(88,215,232,.14) 26%,
    rgba(88,215,232,.05) 46%, transparent 62%);
  animation: raumC 31s ease-in-out infinite;
}

/* 4 – kleiner heller Kern im Vordergrund. Er zieht eine eigene Bahn und ist
   deutlich schneller – dieser Geschwindigkeitsunterschied ist es, den das
   Auge als Nähe liest. */
.bg-grid__licht::before {
  width: 56%; aspect-ratio: 1;
  top: -10%; left: -18%;
  background: radial-gradient(circle closest-side,
    rgba(132,158,255,.40) 0%, rgba(132,158,255,.18) 28%, transparent 60%);
  animation: raumD 17s ease-in-out infinite;
}

/* 5 + 6 – zwei Lichtbänder, die sich tatsächlich im Raum drehen.
   Eine flach liegende Ellipse, die um ihre Hochachse rotiert, läuft einmal
   pro Umdrehung durch die Kante. Genau dieser Wechsel – breit, schmal,
   wieder breit – erzeugt den räumlichen Eindruck, den eine bloß verschobene
   Fläche nie erreicht. Sie bleiben innerhalb des Abschnitts. */
.bg-grid__band {
  position: absolute;
  left: 2%; right: 2%; top: 16%;
  height: clamp(220px, 26vw, 420px);
  border-radius: 50%;
  transform-style: preserve-3d;
  background: radial-gradient(ellipse closest-side,
    rgba(216,180,90,.17) 0%, rgba(216,180,90,.10) 22%,
    rgba(216,180,90,.04) 40%, transparent 58%);
  animation: bandA 28s linear infinite;
}
.bg-grid__band::after {
  content: '';
  position: absolute;
  left: 6%; right: 6%; top: 30%;
  height: 130%;
  border-radius: 50%;
  background: radial-gradient(ellipse closest-side,
    rgba(74,116,244,.18) 0%, rgba(74,116,244,.09) 24%,
    rgba(74,116,244,.03) 42%, transparent 60%);
  animation: bandB 37s linear infinite;
}

/* Die Bahnen. Jede kehrt zu ihrem Ausgangspunkt zurück, damit die Schleife
   nahtlos schließt; die Mitte des Weges ist der weiteste Punkt. Die Wege
   sind so bemessen, dass kein Lichtkörper mit Farbe an den Rand stößt. */
@keyframes raumA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(9%, 7%, 0) scale(1.14); }
}
@keyframes raumB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.04); }
  50%      { transform: translate3d(-12%, 11%, 0) scale(.88); }
}
@keyframes raumC {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.96); }
  50%      { transform: translate3d(14%, -10%, 0) scale(1.16); }
}
@keyframes raumD {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
  50%      { transform: translate3d(85%, 55%, 0) scale(1.35); opacity: .42; }
}
@keyframes bandA {
  from { transform: rotateX(56deg) rotateZ(0deg); }
  to   { transform: rotateX(56deg) rotateZ(360deg); }
}
@keyframes bandB {
  from { transform: rotateX(-50deg) rotateZ(360deg); }
  to   { transform: rotateX(-50deg) rotateZ(0deg); }
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt dasselbe
   Bild – nur still. */
@media (prefers-reduced-motion: reduce) {
  .bg-grid::before, .bg-grid::after,
  .bg-grid__licht, .bg-grid__licht::before,
  .bg-grid__band, .bg-grid__band::after { animation: none; }
  .bg-grid__band { transform: rotateX(56deg); }
  .bg-grid__band::after { transform: rotateX(-50deg); }
}

/* Weiche Ränder über Farbverlaufsstufen statt über filter: blur().
   Sieht praktisch gleich aus, kostet den Grafikchip aber nichts – und genau
   das entscheidet darüber, ob die Seite flüssig scrollt. */
.bg-glow {
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: 50%;
}
.bg-glow--royal {
  background: radial-gradient(circle closest-side,
    rgba(43,79,216,.34) 0%, rgba(43,79,216,.20) 26%,
    rgba(43,79,216,.07) 46%, transparent 62%);
}
.bg-glow--gold {
  background: radial-gradient(circle closest-side,
    rgba(216,180,90,.28) 0%, rgba(216,180,90,.16) 26%,
    rgba(216,180,90,.05) 46%, transparent 62%);
}

/* Auch die einzelnen Lichtflecken atmen, statt stillzustehen. */
.bg-glow { animation: glowAtmen 23s ease-in-out infinite; }
.bg-glow--gold { animation-duration: 19s; animation-direction: reverse; }
@keyframes glowAtmen {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(8%, -7%, 0) scale(1.16); }
}
@media (prefers-reduced-motion: reduce) { .bg-glow { animation: none; } }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-py: .95rem; --btn-px: 1.9rem;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  padding: var(--btn-py) var(--btn-px);
  font-family: var(--f-display);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .01em;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transform-style: preserve-3d;
  transition: transform .35s var(--e-back), box-shadow .35s var(--e-out),
              background-color .3s var(--e-out), color .3s var(--e-out),
              border-color .3s var(--e-out);
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px) scale(.99); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* Primär – Gold */
.btn--gold {
  background: var(--g-gold);
  background-size: 200% 200%;
  color: #211802;
  box-shadow: var(--sh-gold);
  animation: goldShift 7s ease-in-out infinite;
}
.btn--gold:hover { color: #211802; box-shadow: 0 20px 56px rgba(216,180,90,.42); }
@keyframes goldShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Sekundär – Glas */
.btn--glass {
  background: rgba(255,255,255,.06);
  border-color: var(--c-line-strong);
  color: var(--c-text);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn--glass:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(216,180,90,.5);
  color: #fff;
}

/* Royal */
.btn--royal {
  background: var(--g-royal);
  color: #fff;
  box-shadow: var(--sh-blue);
}
.btn--royal:hover { color: #fff; box-shadow: 0 22px 60px rgba(43,79,216,.45); }

.btn--ghost { background: transparent; border-color: var(--c-line-strong); color: var(--c-text); }
.btn--ghost:hover { border-color: var(--c-gold); color: var(--c-gold-light); }

/* WhatsApp – offizielles Markengrün #25D366 */
.btn--whatsapp {
  background: #25D366;
  color: #05230F;
  box-shadow: 0 14px 40px rgba(37, 211, 102, .28);
}
.btn--whatsapp:hover {
  background: #2EE674;
  color: #05230F;
  box-shadow: 0 18px 50px rgba(37, 211, 102, .42);
}
.btn--whatsapp svg { width: 21px; height: 21px; }

.btn--sm { --btn-py: .6rem; --btn-px: 1.25rem; font-size: var(--t-xs); }
.btn--lg { --btn-py: 1.15rem; --btn-px: 2.4rem; font-size: var(--t-base); }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.btn-row--center { justify-content: center; }

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-display); font-weight: 600; font-size: var(--t-sm);
  color: var(--c-gold-light);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .3s var(--e-out); }
.link-arrow:hover svg { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   5. GLASKARTEN & 3D
   -------------------------------------------------------------------------- */
.glass {
  position: relative;
  background: var(--g-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.glass::before {
  content: ''; position: absolute; inset: 0;
  background: var(--g-glass);
  pointer-events: none;
}
/* Leuchtende Oberkante */
.glass::after {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216,180,90,.65), transparent);
  pointer-events: none;
}

/* 3D Tilt-Container */
.tilt-scene { perspective: 1200px; perspective-origin: center; }
.tilt {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .5s var(--e-out), box-shadow .5s var(--e-out),
              border-color .4s var(--e-out);
}
.tilt-scene:hover .tilt { box-shadow: var(--sh-lg); border-color: rgba(216,180,90,.35); }
/* Variante ohne Kartenoptik – für frei stehende Elemente wie das Logo */
.tilt-scene:hover .tilt--bare { box-shadow: none; border-color: transparent; }
.tilt__layer { transform: translateZ(38px); transform-style: preserve-3d; }
.tilt__layer--deep { transform: translateZ(60px); }

/* Glanz-Reflex, folgt der Maus */
.tilt__glare {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .4s var(--e-out);
  background: radial-gradient(
    420px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255,255,255,.16), rgba(255,255,255,.04) 38%, transparent 66%);
}
.tilt-scene:hover .tilt__glare { opacity: 1; }

/* --------------------------------------------------------------------------
   6. SCROLL-REVEAL
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity .9s var(--e-out), transform .9s var(--e-out);
  transition-delay: var(--rd, 0ms);
}
.reveal--left  { transform: translate3d(-40px, 0, 0); }
.reveal--right { transform: translate3d(40px, 0, 0); }
.reveal--3d {
  transform: perspective(1400px) rotateX(12deg) translate3d(0, 60px, -80px);
  transform-origin: 50% 100%;
}
.reveal--zoom { transform: scale(.92); }
.reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   7. NAVIGATION
   -------------------------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background-color .4s var(--e-out), backdrop-filter .4s,
              border-color .4s, height .4s var(--e-out);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  height: 66px;
  background: rgba(6, 9, 18, .82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--c-line);
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
.nav__inner {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
}

/* --------------------------------------------------------------------------
   MARKENZEICHEN — Wortmarke ROYAL, goldene Welle, Schriftzug
   --------------------------------------------------------------------------
   Das Logo ist als Vektorgrafik direkt im HTML eingebettet. Dadurch lassen
   sich die einzelnen Teile (Wortmarke, Welle, Unterzeile) getrennt animieren
   und im Raum kippen – anders als bei einer eingebundenen Bilddatei.
   -------------------------------------------------------------------------- */
.brand {
  display: inline-flex; align-items: center;
  color: var(--c-text);
  perspective: 900px;
}
.brand:hover { color: var(--c-text); }

.brand__lockup {
  width: 172px; height: auto; flex: none;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .75s var(--e-out), filter .75s var(--e-out), width .4s var(--e-out);
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.45));
}
.brand:hover .brand__lockup {
  transform: rotateX(10deg) rotateY(-15deg) translateZ(16px) scale(1.03);
  filter: drop-shadow(0 16px 30px rgba(216,180,90,.42));
}
.nav.is-stuck .brand__lockup { width: 148px; }

/* Schriftzüge */
.brand__word, .brand__sheen {
  font-family: 'Cinzel', var(--f-serif);
  font-weight: 600;
  font-size: 132px;
}
.brand__word  { fill: var(--c-text); }
.brand__sub {
  font-family: 'Cinzel', var(--f-serif);
  font-weight: 650;
  font-size: 40px;
  letter-spacing: .035em;
  fill: var(--c-gold);
}

/* Die goldene Welle */
.brand__wave-thin { opacity: .7; }
.brand__wave-g {
  transform-box: fill-box;
  transform-origin: 0% 50%;
}
.brand__wave-lift {
  transform-box: fill-box;
  transition: transform .55s var(--e-back);
}
.brand:hover .brand__wave-lift { transform: translateY(-5px) scaleY(1.12); }

/* Auftritt beim Laden der Seite */
.brand__word-g {
  opacity: 0;
  transform-box: fill-box;
  transform: translateY(12px);
  animation: brandWord .95s var(--e-out) .12s forwards;
}
.brand__wave-g {
  opacity: 0;
  transform: scaleX(.04);
  animation: brandWave 1.2s var(--e-back) .42s forwards;
}
.brand__sub {
  opacity: 0;
  transform-box: fill-box;
  transform: translateY(8px);
  animation: brandWord .95s var(--e-out) .84s forwards;
}
@keyframes brandWord { to { opacity: 1; transform: none; } }
@keyframes brandWave {
  0%   { opacity: 0; transform: scaleX(.04); }
  22%  { opacity: 1; }
  100% { opacity: 1; transform: scaleX(1); }
}

/* Größere Varianten */
.brand--footer .brand__lockup {
  width: 224px;
  filter: none;
}
.brand--footer:hover .brand__lockup {
  filter: none;
}
.brand--xl {
  display: block;
  perspective: 1400px;
  margin-inline: auto;
  max-width: 460px;
}
.brand--xl .brand__lockup {
  width: 100%;
  filter: drop-shadow(0 24px 50px rgba(0,0,0,.55));
}
.brand--xl .brand__word { fill: #fff; }
.brand--xl:hover .brand__lockup { transform: none; }   /* Kippen macht die Bühne */

/* Bühne für den großen Markenauftritt im CTA-Band */
.brand-stage {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  perspective: 1200px;
}
.brand-stage .tilt { transform-style: preserve-3d; }
.brand-stage .brand__lockup { filter: drop-shadow(0 26px 54px rgba(0,0,0,.6)); }

/* Menü */
.nav__menu { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav__menu li { margin: 0; }
.nav__link {
  position: relative; display: block;
  padding: .55rem .85rem;
  font-family: var(--f-display); font-size: .92rem; font-weight: 500;
  color: var(--c-text-soft); border-radius: var(--r-sm);
}
.nav__link:hover, .nav__link.is-active { color: var(--c-text); }
.nav__link::after {
  content: ''; position: absolute; left: .85rem; right: .85rem; bottom: .25rem;
  height: 2px; border-radius: 2px;
  background: var(--g-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--e-out);
}
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: var(--s-3); }
.nav__phone {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-display); font-weight: 600; font-size: .92rem;
  color: var(--c-text);
}
.nav__phone svg { width: 17px; height: 17px; color: var(--c-gold); }
.nav__phone:hover { color: var(--c-gold-light); }

/* Kleiner WhatsApp-Knopf in der Kopfleiste */
.nav__wa {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  background: rgba(37, 211, 102, .14);
  border: 1px solid rgba(37, 211, 102, .38);
  color: #37E27C;
  transition: transform .35s var(--e-back), background .3s, border-color .3s, color .3s;
}
.nav__wa svg { width: 20px; height: 20px; }
.nav__wa:hover {
  background: #25D366; border-color: #25D366; color: #fff;
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 8px 20px rgba(37, 211, 102, .38);
}

/* Burger */
.burger {
  display: none;
  width: 46px; height: 46px;
  background: rgba(255,255,255,.06); border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm); cursor: pointer;
  padding: 0; place-items: center;
}
.burger span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--c-text); margin: 4px auto;
  transition: transform .35s var(--e-out), opacity .25s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile Drawer */
.drawer {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(5, 7, 15, .97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: calc(var(--nav-h) + 2rem) 1.5rem 2rem;
  display: flex; flex-direction: column; gap: var(--s-5);
  opacity: 0; visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .4s var(--e-out), transform .4s var(--e-out), visibility .4s;
  overflow-y: auto;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }

/* Ohne dies schrumpfen die Einträge zusammen, sobald der Inhalt höher ist als
   der Bildschirm – statt dass das Menü scrollt. Flex-Elemente geben sonst
   automatisch nach. */
.drawer > * { flex: 0 0 auto; }

/* Wischen im Menü soll nicht die Seite dahinter mitbewegen */
.drawer {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Solange das Menü offen ist, treten der WhatsApp-Knopf und die untere
   Aktionsleiste zurück – sonst schimmern sie durch den Hintergrund. */
body.is-locked .wa-float,
body.is-locked .mobile-cta {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s var(--e-out), visibility .25s;
}
.drawer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.drawer__menu li { margin: 0; border-bottom: 1px solid var(--c-line); }
.drawer__menu a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem .25rem;
  font-family: var(--f-display); font-size: 1.22rem; font-weight: 500;
  color: var(--c-text);
}
.drawer__menu a span { color: var(--c-gold); font-size: .9rem; }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(100svh, 980px);
  display: flex; align-items: center;
  padding-top: calc(var(--nav-h) + clamp(2rem, 5vw, 4rem));
  /* Unten muss Platz für den Scroll-Hinweis bleiben: Er steht absolut am
     unteren Rand und würde sonst auf flachen Bildschirmen in die
     Vertrauenspunkte hineinlaufen. 32 px Abstand + Höhe des Hinweises. */
  /* 9rem = 144 px: Der Scroll-Hinweis ist mit Schrift und Linie 71 px hoch
     und sitzt 28 px über der Unterkante. Der Rest ist Luft, damit er nie in
     die Vertrauenspunkte hineinläuft – auf keiner Bildschirmhöhe. */
  padding-bottom: 9rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 78% 18%, rgba(43,79,216,.34), transparent 62%),
    radial-gradient(ellipse 60% 50% at 12% 82%, rgba(216,180,90,.14), transparent 60%),
    linear-gradient(180deg, #05070F 0%, #080D1E 55%, #05070F 100%);
}
.hero__video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 44%;
  opacity: 0;
  filter: saturate(.72) contrast(1.08) brightness(.78);
  transform: scale(1.015);
  transition: opacity 1.2s ease;
}
.hero__video.is-ready { opacity: 1; }

.hero__vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(98deg, rgba(5,7,15,.97) 0%, rgba(5,7,15,.90) 32%, rgba(5,7,15,.61) 57%, rgba(5,7,15,.42) 100%),
    radial-gradient(ellipse 58% 72% at 76% 38%, rgba(43,79,216,.18), transparent 70%),
    linear-gradient(180deg, rgba(5,7,15,.58) 0%, transparent 25%, transparent 60%, rgba(5,7,15,.96) 100%);
}
/* Auf schmalen Displays bleibt der Text trotz bewegtem Bild ruhig lesbar. */
@media (max-width: 1080px) {
  .hero__video { object-position: 60% center; }
  .hero__vignette {
    background:
      linear-gradient(180deg, rgba(5,7,15,.83) 0%, rgba(5,7,15,.68) 32%, rgba(5,7,15,.82) 66%, rgba(5,7,15,.97) 100%),
      linear-gradient(90deg, rgba(5,7,15,.74), rgba(5,7,15,.28));
  }
}
.hero__inner { position: relative; z-index: 3; width: 100%; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.hero__badge {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .45rem 1.1rem .45rem .5rem;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-full);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: var(--t-xs); font-weight: 500; color: var(--c-text-soft);
  margin-bottom: var(--s-5);
}
.hero__badge b {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .65rem;
  background: var(--g-gold); color: #211802;
  border-radius: var(--r-full);
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.hero__title { margin-bottom: var(--s-5); }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span {
  display: block;
  transform: translateY(105%);
  animation: heroLineUp 1.15s var(--e-out) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes heroLineUp { to { transform: translateY(0); } }

/* Wechselnde Leistungszeile – der Begriff dahinter tauscht sich automatisch
   aus und schiebt sich dabei nach oben weg. */
.hero__wechsel {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-text);
  margin-bottom: var(--s-4);
  opacity: 0; animation: fadeUp 1s var(--e-out) .62s forwards;
}
.wechsel {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-left: .4em;
  /* etwas Luft, damit die Unterlängen beim Schieben nicht abgeschnitten werden */
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.wechsel__wort {
  display: inline-block;
  font-weight: 600;
  background: var(--g-gold);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  transition: transform .38s var(--e-out), opacity .38s var(--e-out);
}
.wechsel__wort.is-raus { transform: translateY(-105%); opacity: 0; }
.wechsel__wort.is-rein { animation: wortRein .5s var(--e-out); }
@keyframes wortRein {
  from { transform: translateY(105%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wechsel__wort, .wechsel__wort.is-raus, .wechsel__wort.is-rein {
    transform: none; opacity: 1; animation: none;
  }
}

.hero__text {
  font-size: var(--t-md); max-width: 56ch; margin-bottom: var(--s-6);
  opacity: 0; animation: fadeUp 1s var(--e-out) .8s forwards;
}
.hero .btn-row { opacity: 0; animation: fadeUp 1s var(--e-out) 1.05s forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.hero__proof {
  display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-7);
  margin-top: clamp(2.2rem, 4vw, 3.4rem);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--c-line);
  opacity: 0; animation: fadeUp 1s var(--e-out) 1.15s forwards;
}
.hero__proof-item { display: flex; align-items: center; gap: .75rem; }
.hero__proof-item svg { width: 22px; height: 22px; color: var(--c-gold); flex: none; }
.hero__proof-item b { display: block; color: var(--c-text); font-family: var(--f-display); font-size: 1rem; }
.hero__proof-item small { color: var(--c-text-mute); font-size: var(--t-xs); }

/* === HERO-WEGE: ANFANG === */
/* --------------------------------------------------------------------------
   DIREKTWAHL IM KOPFBEREICH
   --------------------------------------------------------------------------
   Drei gleich breite Felder in einem gemeinsamen Rahmen. Die gleiche Breite
   ist der ganze Trick: Unterschiedlich lange Beschriftungen ergeben sonst
   unterschiedlich breite Schaltflächen, die umbrechen – und ein einzelnes
   Feld in der zweiten Zeile sieht immer nach Versehen aus.
   -------------------------------------------------------------------------- */
.hero__wege {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
  border-radius: var(--r-lg);
  border: 1px solid rgba(216,180,90,.26);
  background:
    radial-gradient(130% 180% at 0% 0%, rgba(216,180,90,.10) 0%, transparent 60%),
    linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  overflow: hidden;
  opacity: 0; animation: fadeUp 1s var(--e-out) 1.2s forwards;
}

.weg {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: .6rem;
  padding: .95rem .85rem;
  min-width: 0;
  color: var(--c-text); text-decoration: none;
  transition: background var(--d-2) var(--e-out);
}
/* Haarlinien zwischen den Feldern – nicht außen, sonst doppelt zum Rahmen */
.weg + .weg { box-shadow: inset 1px 0 0 rgba(216,180,90,.18); }

/* Goldener Schimmer beim Darüberfahren, von unten aufsteigend */
.weg::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(216,180,90,.16));
  opacity: 0; transition: opacity var(--d-2) var(--e-out);
}
.weg:hover::before, .weg:focus-visible::before { opacity: 1; }
.weg:focus-visible { outline: 2px solid var(--c-gold); outline-offset: -2px; }

.weg__icon {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px;
  border-radius: 11px;
  border: 1px solid rgba(216,180,90,.3);
  background: rgba(216,180,90,.12);
  color: var(--c-gold-light);
  transition: background var(--d-2) var(--e-out), transform var(--d-2) var(--e-out);
}
.weg__icon svg { width: 18px; height: 18px; }
.weg:hover .weg__icon { background: rgba(216,180,90,.24); transform: scale(1.06); }

.weg__text { display: grid; gap: .1rem; min-width: 0; }
.weg__text b {
  font-family: var(--f-display);
  font-size: .92rem; font-weight: 600; line-height: 1.2;
  color: var(--c-text);
  white-space: nowrap;
}
.weg__text small {
  font-size: .72rem; line-height: 1.3;
  color: var(--c-text-mute);
}

.weg__pfeil {
  width: 15px; height: 15px; flex: none;
  margin-left: auto;
  color: var(--c-gold);
  opacity: 0; transform: translateX(-4px);
  transition: opacity var(--d-2) var(--e-out), transform var(--d-2) var(--e-out);
}
.weg:hover .weg__pfeil, .weg:focus-visible .weg__pfeil { opacity: 1; transform: none; }

/* Untereinander erst auf wirklich schmalen Bildschirmen.
   Wichtig: Unter 1080 px wird der Kopfbereich einspaltig – die Leiste hat
   dort also die VOLLE Breite und verträgt drei Spalten bequem. Früher zu
   stapeln würde Platz verschenken. Erst unter 560 px wären drei Felder zu
   schmal für Symbol und Text nebeneinander.
   Die Trennlinien wandern dabei von links nach oben, sonst stünden sie
   quer zur Leserichtung. */
@media (max-width: 560px) {
  .hero__wege { grid-template-columns: 1fr; }
  .weg + .weg { box-shadow: inset 0 1px 0 rgba(216,180,90,.18); }
  .weg { padding: .9rem 1rem; }
  .weg__pfeil { opacity: .55; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__wege { opacity: 1; animation: none; }
  .weg, .weg__icon, .weg__pfeil { transition: none; }
  .weg:hover .weg__icon { transform: none; }
}
/* === HERO-WEGE: ENDE === */

/* Schwebende Glas-Karte rechts */
.hero__card {
  position: relative;
  padding: clamp(1.5rem, 2.5vw, 2.1rem);
  border-radius: var(--r-xl);
  opacity: 0;
  animation: fadeUp 1.1s var(--e-out) 1.05s forwards;
  box-shadow: var(--sh-lg);
  background: linear-gradient(145deg, rgba(18,27,55,.88), rgba(8,12,27,.82));
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
.hero__card-float { animation: floatCard 7s ease-in-out infinite; }
@keyframes floatCard {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(-.4deg); }
}
.hero__card h3 { font-size: var(--t-md); margin-bottom: .35rem; }
.hero__card > p { font-size: var(--t-sm); margin-bottom: var(--s-5); }
.hero__card-list { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: .7rem; }
.hero__card-list li {
  display: flex; align-items: flex-start; gap: .65rem;
  font-size: var(--t-sm); color: var(--c-text-soft); margin: 0;
}
.hero__card-list svg { width: 19px; height: 19px; color: var(--c-gold); flex: none; margin-top: 2px; }
.hero__card-note {
  display: flex; align-items: center; gap: .55rem;
  font-size: var(--t-xs); color: var(--c-text-mute);
  padding-top: var(--s-4); border-top: 1px solid var(--c-line);
}
.hero__card-note svg { width: 15px; height: 15px; color: var(--c-aqua); flex: none; }

/* Der Scroll-Hinweis am unteren Rand.
   Er MUSS aus dem Textfluss genommen werden: .hero ist ein Flex-Behälter,
   und ein mitfließender Hinweis nimmt dem Textblock daneben seine Breite
   weg – auf einem Telefon waren das 60 von 375 Pixeln. */
.hero__scroll {
  position: absolute;
  left: 50%; bottom: 28px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font-family: var(--f-body);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-text-mute);
  pointer-events: none;
  white-space: nowrap;
}
.hero__scroll i {
  display: block; width: 1px; height: 42px;
  background: linear-gradient(180deg, var(--c-gold), transparent);
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine {
  0%, 100% { transform: scaleY(.4); opacity: .4; transform-origin: top; }
  50%      { transform: scaleY(1); opacity: 1; transform-origin: top; }
}

/* --------------------------------------------------------------------------
   9. TRUST-LEISTE / MARQUEE
   -------------------------------------------------------------------------- */
.trustbar {
  position: relative; z-index: 3;
  padding-block: clamp(2rem, 3vw, 3rem);
  border-block: 1px solid var(--c-line);
  background: linear-gradient(180deg, rgba(12,18,38,.6), rgba(5,7,15,.6));
}
.trustbar__label {
  text-align: center; font-size: var(--t-xs); letter-spacing: .2em;
  text-transform: uppercase; color: var(--c-text-mute); margin-bottom: var(--s-5);
}
.marquee {
  display: flex; overflow: hidden; gap: 0;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex; align-items: center; gap: clamp(2rem, 5vw, 4.5rem);
  padding-right: clamp(2rem, 5vw, 4.5rem);
  flex: none;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
.marquee__item {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-display); font-size: 1rem; font-weight: 500;
  color: var(--c-text-mute); white-space: nowrap;
  transition: color .3s;
}
.marquee__item:hover { color: var(--c-gold-light); }
.marquee__item svg { width: 22px; height: 22px; color: var(--c-royal-light); flex: none; }

/* --------------------------------------------------------------------------
   10. LEISTUNGS-KARTEN
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.2rem, 2vw, 1.8rem);
}
.card {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 100%;
  padding: clamp(1.6rem, 2.4vw, 2.2rem);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  isolation: isolate;
}
/* Hintergrundmotiv der Karte – dezent sichtbar, beim Darüberfahren deutlich */
.card__bg {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background-size: cover;
  background-position: center;
  opacity: .26;
  transform: scale(1.05);
  transition: opacity .55s var(--e-out), transform .9s var(--e-out);
}
/* Einheitliche, realistische Motive für die sechs Leistungen. */
.card__bg--gebaeude      { background-image: url('../img/service-gebaeudereinigung.jpg'); }
.card__bg--buero         { background-image: url('../img/service-bueroreinigung.jpg'); }
.card__bg--industrie     { background-image: url('../img/service-industriereinigung.jpg'); }
.card__bg--pv            { background-image: url('../img/service-pv-anlagen-reinigung.jpg'); }
.card__bg--entruempelung { background-image: url('../img/service-entruempelung.jpg'); }
.card__bg--rueckbau      { background-image: url('../img/service-entkernung-rueckbau.jpg'); }
.card__bg--sonder        { background-image: url('../img/service-sonderreinigung.jpg'); }

/* Auf Handys reichen kleinere Fassungen: 249 statt 837 KB. Der Browser lädt
   nur die Fassung, die zur Bildschirmbreite passt. */
@media (max-width: 760px) {
  .card__bg--gebaeude      { background-image: url('../img/service-gebaeudereinigung-klein.jpg'); }
  .card__bg--buero         { background-image: url('../img/service-bueroreinigung-klein.jpg'); }
  .card__bg--industrie     { background-image: url('../img/service-industriereinigung-klein.jpg'); }
  .card__bg--pv            { background-image: url('../img/service-pv-anlagen-reinigung-klein.jpg'); }
  .card__bg--entruempelung { background-image: url('../img/service-entruempelung-klein.jpg'); }
  .card__bg--rueckbau      { background-image: url('../img/service-entkernung-rueckbau-klein.jpg'); }
  .card__bg--sonder        { background-image: url('../img/service-sonderreinigung-klein.jpg'); }
}
.card__bg::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(165deg, rgba(8,13,28,.45) 0%, rgba(8,13,28,.82) 60%, rgba(8,13,28,.94) 100%);
}
.tilt-scene:hover .card__bg { opacity: .68; transform: scale(1.12); }

/* Zusatzzeile, die erst beim Darüberfahren erscheint */
.card__extra {
  display: grid; grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .5s var(--e-out), opacity .45s var(--e-out);
}
.card__extra > span { overflow: hidden; }
.card__extra em {
  display: block;
  font-style: normal;
  font-size: var(--t-xs);
  color: var(--c-gold-light);
  padding-top: .65rem;
  line-height: 1.55;
}
.tilt-scene:hover .card__extra { grid-template-rows: 1fr; opacity: 1; }

/* Schwamm statt Mauszeiger im Leistungsbereich */
@media (hover: hover) and (pointer: fine) {
  .cards { cursor: url('../img/cursor-schwamm.svg') 20 20, pointer; }
}

/* Schaumblasen, die dem Schwamm folgen */
.schaum {
  position: fixed; z-index: 80; pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 32% 28%,
    rgba(255,255,255,.92), rgba(174,203,255,.45) 46%, rgba(88,215,232,.16) 70%, transparent 73%);
  border: 1px solid rgba(255,255,255,.42);
  animation: schaumAuf 1.25s var(--e-out) forwards;
  will-change: transform, opacity;
}
@keyframes schaumAuf {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.25); }
  18%  { opacity: .95; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -190%) scale(1.2); }
}
@media (prefers-reduced-motion: reduce) { .schaum { display: none; } }
.card__icon {
  position: relative;
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border-radius: 18px;
  margin-bottom: var(--s-5);
  background: linear-gradient(145deg, rgba(43,79,216,.30), rgba(216,180,90,.14));
  border: 1px solid var(--c-line-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  transition: transform .55s var(--e-back), box-shadow .45s;
}
.card__icon svg { width: 30px; height: 30px; color: var(--c-gold-light); }
.tilt-scene:hover .card__icon {
  transform: translateZ(50px) rotate(-6deg) scale(1.06);
  box-shadow: 0 14px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2);
}
.card__num {
  position: absolute; top: 1.1rem; right: 1.4rem;
  font-family: var(--f-serif); font-size: 3.4rem; font-weight: 600;
  line-height: 1; color: rgba(255,255,255,.045);
  transition: color .5s;
}
.tilt-scene:hover .card__num { color: rgba(216,180,90,.14); }
.card h3 { margin-bottom: .6rem; }
.card p { font-size: var(--t-sm); margin-bottom: var(--s-5); }
.card__list {
  list-style: none; margin: 0 0 var(--s-5); padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.card__list li { margin: 0; }
.card__list span {
  display: inline-block;
  padding: .28rem .7rem;
  font-size: .72rem; color: var(--c-text-mute);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
}
.card__foot { margin-top: auto; padding-top: var(--s-3); }

/* --------------------------------------------------------------------------
   11. STATS / ZAHLEN
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.2rem, 2vw, 1.8rem);
  background: linear-gradient(165deg, rgba(18,26,53,.9), rgba(8,12,26,.9));
  text-align: center;
  transition: background .4s;
}
.stat:hover { background: linear-gradient(165deg, rgba(28,40,80,.95), rgba(10,16,34,.95)); }
.stat__num {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.4rem);
  line-height: 1; letter-spacing: -.04em;
  background: var(--g-gold);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: .45rem;
}
.stat__label { font-size: var(--t-sm); color: var(--c-text-soft); }

/* --------------------------------------------------------------------------
   11b. GARANTIE-SIEGEL
   --------------------------------------------------------------------------
   Vier Zusagen mit rotierendem Goldring. Die Karten kippen mit der Maus im
   Raum (gemeinsames Tilt-System) und heben sich beim Darüberfahren an.
   -------------------------------------------------------------------------- */
.garantien {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(1.1rem, 2vw, 1.6rem);
}

.garantie {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  min-height: 100%;
  padding: clamp(1.8rem, 2.6vw, 2.4rem) clamp(1.2rem, 2vw, 1.6rem);
  border-radius: var(--r-lg);
  text-align: center;
  overflow: visible;
}
/* Der Glas-Baustein schneidet sonst den Ring ab */
.garantie.glass { overflow: visible; }

/* Rotierender Goldring hinter dem Symbol */
.garantie__ring {
  position: absolute; top: -26px; left: 50%;
  width: 92px; height: 92px; margin-left: -46px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(216,180,90,0) 0deg, var(--c-gold) 90deg,
    rgba(244,223,160,.95) 150deg, rgba(216,180,90,0) 250deg, rgba(216,180,90,0) 360deg);
  animation: ringDreh 6s linear infinite;
  opacity: .85;
  pointer-events: none;
}
.garantie__ring::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%;
  background: linear-gradient(165deg, #16203F, #090E1F);
}
@keyframes ringDreh { to { transform: rotate(360deg); } }

.garantie__icon {
  position: relative; z-index: 2;
  width: 86px; height: 86px;
  margin-top: -23px; margin-bottom: 1.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  transition: transform .55s var(--e-back);
}
.garantie__icon svg { width: 32px; height: 32px; color: var(--c-gold-light); }
.tilt-scene:hover .garantie__icon { transform: translateZ(48px) scale(1.08); }

.garantie__zahl {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.8rem);
  line-height: 1; letter-spacing: -.04em;
  margin: 0 0 .5rem;
  background: var(--g-gold);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.garantie h4 { margin-bottom: .5rem; }
.garantie__text { font-size: var(--t-sm); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .garantie__ring { animation: none; }
}

/* --------------------------------------------------------------------------
   12. FEATURE-SPLIT (Warum wir)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
.feature-list { display: grid; gap: var(--s-5); }
.feature {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-4);
  align-items: start;
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: border-color .4s, background .4s, transform .4s var(--e-out);
}
.feature:hover {
  border-color: var(--c-line);
  background: rgba(255,255,255,.028);
  transform: translateX(6px);
}
.feature__icon {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 13px; flex: none;
  background: linear-gradient(145deg, rgba(43,79,216,.28), rgba(43,79,216,.06));
  border: 1px solid var(--c-line-strong);
}
.feature__icon svg { width: 22px; height: 22px; color: var(--c-gold-light); }
.feature h4 { margin-bottom: .25rem; }
.feature p { font-size: var(--t-sm); margin: 0; }

/* 3D-Bildstapel */
.stack { position: relative; perspective: 1400px; }
.stack__inner {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-14deg) rotateX(6deg);
  transition: transform .8s var(--e-out);
}
.stack:hover .stack__inner { transform: rotateY(-6deg) rotateX(2deg); }
.stack__img {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-line-strong);
  box-shadow: var(--sh-lg);
  background: var(--c-navy);
}
.site-background-video {
  pointer-events: none;
}
.site-background-video::-webkit-media-controls,
.site-background-video::-webkit-media-controls-enclosure,
.site-background-video::-internal-media-controls-overlay-cast-button {
  display: none !important;
}

.stack__video {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: saturate(.78) contrast(1.05) brightness(.78);
}
.stack__badge {
  position: absolute;
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1.15rem;
  background: rgba(8,12,26,.92);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--sh-md);
  transform: translateZ(70px);
  font-size: var(--t-xs);
}
.stack__badge svg { width: 26px; height: 26px; color: var(--c-gold); flex: none; }
.stack__badge b { display: block; color: var(--c-text); font-size: .92rem; font-family: var(--f-display); }
.stack__badge--tl { top: -18px; left: -22px; }
.stack__badge--br { bottom: -20px; right: -18px; }

/* --------------------------------------------------------------------------
   13. VORHER/NACHHER-SLIDER
   -------------------------------------------------------------------------- */
.ba {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-line-strong);
  box-shadow: var(--sh-lg);
  aspect-ratio: var(--ba-ratio, 16 / 9);
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
  background: var(--c-navy);
}
/* Hochformat – für Fotos vom Handy. Die Breite wird begrenzt, damit das Bild
   in seiner tatsächlichen Auflösung gezeigt wird und nicht unscharf wirkt. */
.ba--hoch {
  --ba-ratio: 315 / 636;
  max-width: 330px;
  margin-inline: auto;
}
.ba-caption {
  max-width: 330px;
  margin: .9rem auto 0;
  text-align: center;
  font-size: var(--t-xs);
  color: var(--c-text-mute);
}
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba__label {
  position: absolute; top: 1rem; z-index: 4;
  padding: .35rem .9rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  border-radius: var(--r-full);
  background: rgba(5,7,15,.78);
  border: 1px solid var(--c-line-strong);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ba__label--before { left: 1rem; color: var(--c-text-soft); }
.ba__label--after  { right: 1rem; color: var(--c-gold-light); border-color: rgba(216,180,90,.4); }
.ba__handle {
  position: absolute; top: 0; bottom: 0; z-index: 5;
  left: var(--pos, 50%);
  width: 2px; margin-left: -1px;
  background: var(--g-gold);
  box-shadow: 0 0 24px rgba(216,180,90,.7);
}
.ba__knob {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--g-gold);
  box-shadow: 0 8px 26px rgba(0,0,0,.5);
  color: #211802;
  transition: transform .3s var(--e-back);
}
.ba:hover .ba__knob { transform: translate(-50%, -50%) scale(1.1); }
.ba__knob svg { width: 24px; height: 24px; }

/* --------------------------------------------------------------------------
   14. ABLAUF / PROZESS
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(1.2rem, 2vw, 1.6rem);
  counter-reset: step;
}
.step {
  position: relative;
  padding: clamp(1.6rem, 2.4vw, 2.1rem);
  border-radius: var(--r-lg);
  transition: transform .5s var(--e-out), border-color .4s;
}
.step:hover { transform: translateY(-8px); border-color: rgba(216,180,90,.35); }
.step__badge {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 14px;
  margin-bottom: var(--s-4);
  font-family: var(--f-display); font-weight: 700; font-size: 1.15rem;
  color: #211802;
  background: var(--g-gold);
  box-shadow: var(--sh-gold);
}
.step h4 { margin-bottom: .45rem; }
.step p { font-size: var(--t-sm); margin: 0; }
.step__line {
  position: absolute; top: calc(1.6rem + 24px); right: -1.6rem;
  width: 1.6rem; height: 1px;
  background: linear-gradient(90deg, rgba(216,180,90,.6), transparent);
}
@media (max-width: 900px) { .step__line { display: none; } }

/* --------------------------------------------------------------------------
   15. BRANCHEN
   -------------------------------------------------------------------------- */
.pills { display: flex; flex-wrap: wrap; gap: .7rem; }
.pill {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1.25rem;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--c-line);
  font-size: var(--t-sm); color: var(--c-text-soft);
  transition: transform .35s var(--e-back), border-color .35s, color .35s, background .35s;
}
.pill:hover {
  transform: translateY(-4px);
  border-color: rgba(216,180,90,.45);
  background: rgba(216,180,90,.07);
  color: var(--c-text);
}
.pill svg { width: 17px; height: 17px; color: var(--c-gold); }

/* --------------------------------------------------------------------------
   16. REFERENZEN
   -------------------------------------------------------------------------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(1.2rem, 2vw, 1.7rem);
}
.quote {
  display: flex; flex-direction: column;
  padding: clamp(1.6rem, 2.4vw, 2.1rem);
  border-radius: var(--r-lg);
  transition: transform .5s var(--e-out);
}
.quote:hover { transform: translateY(-6px); }
.quote__stars { display: flex; gap: .18rem; margin-bottom: var(--s-4); }
.quote__stars svg { width: 17px; height: 17px; color: var(--c-gold); }
.quote__text {
  font-size: var(--t-base); color: var(--c-text); line-height: 1.7;
  margin-bottom: var(--s-5);
  flex: 1;
}
.quote__text::before { content: '\201E'; font-family: var(--f-serif); color: var(--c-gold); }
.quote__text::after  { content: '\201C'; font-family: var(--f-serif); color: var(--c-gold); }
.quote__author { display: flex; align-items: center; gap: .85rem; padding-top: var(--s-4); border-top: 1px solid var(--c-line); }
.quote__avatar {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--c-royal), var(--c-royal-deep));
  border: 1px solid var(--c-line-strong);
  font-family: var(--f-display); font-weight: 600; color: #fff; font-size: 1rem;
}
.quote__author b { display: block; color: var(--c-text); font-size: var(--t-sm); font-family: var(--f-display); }
.quote__author small { color: var(--c-text-mute); }

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: .8rem; }
.faq__item {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.022);
  overflow: hidden;
  transition: border-color .35s, background .35s;
}
.faq__item.is-open { border-color: rgba(216,180,90,.36); background: rgba(216,180,90,.035); }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 1.25rem 1.4rem;
  background: none; border: none; cursor: pointer;
  text-align: left;
  font-family: var(--f-display); font-size: var(--t-base); font-weight: 500;
  color: var(--c-text);
}
.faq__icon {
  position: relative; width: 22px; height: 22px; flex: none;
}
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 13px; height: 2px; border-radius: 2px;
  background: var(--c-gold);
  transform: translate(-50%, -50%);
  transition: transform .4s var(--e-out);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item.is-open .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--e-out);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 1.4rem 1.35rem; font-size: var(--t-sm); margin: 0; max-width: 70ch; }

/* --------------------------------------------------------------------------
   18. KONTAKT
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.contact-info { display: grid; gap: var(--s-4); }
.contact-item {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-4);
  align-items: center;
  padding: clamp(1.1rem, 2vw, 1.4rem);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: transform .4s var(--e-out), border-color .4s;
}
a.contact-item:hover { transform: translateY(-4px); border-color: rgba(216,180,90,.4); }
.contact-item__icon {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(216,180,90,.22), rgba(216,180,90,.05));
  border: 1px solid rgba(216,180,90,.28);
}
.contact-item__icon svg { width: 22px; height: 22px; color: var(--c-gold-light); }
.contact-item small { display: block; color: var(--c-text-mute); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; }
.contact-item b { color: var(--c-text); font-family: var(--f-display); font-size: var(--t-base); font-weight: 500; word-break: break-word; }

/* Formular */
.form { padding: clamp(1.6rem, 3vw, 2.6rem); border-radius: var(--r-xl); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-soft); }
.field label span { color: var(--c-gold); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .9rem 1.05rem;
  font-family: var(--f-body); font-size: var(--t-sm);
  color: var(--c-text);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  transition: border-color .3s, background .3s, box-shadow .3s;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 128px; line-height: 1.6; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AEB9D4' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 17px;
  padding-right: 2.7rem;
  cursor: pointer;
}
.field select option { background: var(--c-navy); color: var(--c-text); }
.field input::placeholder, .field textarea::placeholder { color: var(--c-text-mute); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--c-gold);
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 4px rgba(216,180,90,.13);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: #E2574C; }

.check {
  display: grid; grid-template-columns: auto 1fr; gap: .8rem;
  align-items: start;
  font-size: var(--t-xs); color: var(--c-text-mute); line-height: 1.6;
  cursor: pointer;
}
/* Eigenes Kästchen statt des Systemelements: Auf dunklem Grund ist das
   Standard-Kästchen kaum zu sehen. Hier erscheint beim Anklicken ein
   deutliches goldenes Häkchen, das sich kurz einzeichnet. */
.check input {
  appearance: none; -webkit-appearance: none;
  position: relative;
  /* Ohne diese Zurücksetzung erbt das Kästchen die Innenabstände der
     normalen Eingabefelder aus `.field input` und wird dadurch verzerrt. */
  padding: 0;
  width: 20px; min-width: 20px; max-width: 20px;
  height: 20px; min-height: 20px;
  margin: 2px 0 0;          /* auf die erste Textzeile ausgerichtet */
  flex: none;
  align-self: start;
  justify-self: start;
  cursor: pointer;
  border: 1.5px solid var(--c-line-strong);
  border-radius: 5px;
  background: rgba(255,255,255,.05);
  transition: background .22s var(--e-out), border-color .22s var(--e-out),
              box-shadow .22s var(--e-out);
}
.check input:hover { border-color: rgba(216,180,90,.6); background: rgba(216,180,90,.08); }

/* Das Häkchen – exakt mittig im Kästchen, zeichnet sich beim Anklicken ein */
.check input::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 9px;
  border: solid #241A03;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg) scale(.5);
  opacity: 0;
  transition: transform .24s var(--e-back), opacity .16s var(--e-out);
}
.check input:checked {
  background: var(--g-gold);
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(216,180,90,.35);
}
.check input:checked::after {
  transform: translate(-50%, -60%) rotate(45deg) scale(1);
  opacity: 1;
}
/* Weicher Fokusring statt harter Umrandung – passt besser zum runden Kästchen */
.check input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(216,180,90,.30);
}
.check input:user-invalid { border-color: #E2574C; }
.form__note { font-size: var(--t-xs); color: var(--c-text-mute); margin-top: var(--s-4); text-align: center; }

/* Honeypot */
.hp { position: absolute !important; left: -9999px !important; opacity: 0 !important; height: 0 !important; width: 0 !important; }

.form__status {
  display: none;
  margin-top: var(--s-4);
  padding: 1rem 1.15rem;
  border-radius: var(--r-md);
  font-size: var(--t-sm);
}
.form__status.is-visible { display: block; }
.form__status--ok { background: rgba(64,190,120,.12); border: 1px solid rgba(64,190,120,.4); color: #9BE7BC; }
.form__status--err { background: rgba(226,87,76,.12); border: 1px solid rgba(226,87,76,.4); color: #F5AFA9; }

/* --------------------------------------------------------------------------
   19. CTA-BAND
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Abschluss-Bereich – die letzte Gelegenheit, Kontakt aufzunehmen.
   Umlaufender Goldschimmer am Rand, zwei driftende Lichter im Inneren und
   ein Schein, der dem Mauszeiger folgt.
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4.5rem);
  border-radius: var(--r-xl);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 80% 120% at 50% 0%, rgba(43,79,216,.42), transparent 62%),
    linear-gradient(165deg, rgba(20,29,60,.95), rgba(7,10,22,.95));
  border: 1px solid transparent;
  box-shadow: var(--sh-lg);
}

/* Rahmen mit wanderndem Goldschimmer */
.cta-band::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--dreh, 0deg),
    rgba(255,255,255,.10) 0deg,
    rgba(216,180,90,.85) 60deg,
    rgba(244,223,160,.35) 110deg,
    rgba(255,255,255,.08) 190deg,
    rgba(43,79,216,.55) 280deg,
    rgba(255,255,255,.10) 360deg);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  animation: rahmenDreht 9s linear infinite;
}
@property --dreh { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes rahmenDreht { to { --dreh: 360deg; } }

/* Zwei weiche Lichter, die im Inneren treiben */
.cta-band::before {
  content: ''; position: absolute; inset: -30% -15%; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 28% 22%, rgba(216,180,90,.20) 0%,
      rgba(216,180,90,.09) 26%, transparent 54%),
    radial-gradient(circle at 76% 72%, rgba(43,79,216,.26) 0%,
      rgba(43,79,216,.12) 28%, transparent 58%);
  animation: ctaLicht 18s ease-in-out infinite alternate;
}
@keyframes ctaLicht {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.14); }
}

/* Schein, der dem Mauszeiger folgt (Werte setzt main.js) */
.cta-band__schein {
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  opacity: 0;
  transition: opacity .5s var(--e-out);
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%),
    rgba(244,223,160,.16), rgba(244,223,160,.05) 38%, transparent 66%);
}
.cta-band:hover .cta-band__schein { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cta-band::after, .cta-band::before { animation: none; }
}
.cta-band h2 { margin-bottom: var(--s-4); }
.cta-band p { max-width: 58ch; margin-inline: auto; font-size: var(--t-md); margin-bottom: var(--s-6); }

/* --------------------------------------------------------------------------
   20. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  padding-top: clamp(3.5rem, 6vw, 6rem);
  background: linear-gradient(180deg, #05070F, #030509);
  border-top: 1px solid var(--c-line);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 4vw, 4rem);
}
.footer__about { max-width: 42ch; }
.footer__about p { font-size: var(--t-sm); margin-top: var(--s-4); }
.footer h5 {
  font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-gold); margin-bottom: var(--s-4);
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.footer__list li { margin: 0; }
.footer__list a, .footer__list span { font-size: var(--t-sm); color: var(--c-text-mute); }
.footer__list a:hover { color: var(--c-gold-light); }

/* Kontaktspalte mit Symbolen */
.footer__list--symbole a,
.footer__list--symbole span {
  display: inline-flex; align-items: center; gap: .6rem;
}
.footer__list--symbole svg {
  width: 16px; height: 16px; flex: none;
  color: var(--c-gold);
  transition: transform .35s var(--e-back);
}
.footer__list--symbole a:hover svg { transform: translateX(2px) scale(1.12); }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-top: 1px solid var(--c-line);
  font-size: var(--t-xs); color: var(--c-text-mute);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer__legal a { color: var(--c-text-mute); }
.footer__legal a:hover { color: var(--c-gold-light); }

/* --------------------------------------------------------------------------
   21. MOBILE STICKY CTA
   -------------------------------------------------------------------------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none;
  gap: .6rem;
  /* 1rem seitlich = genau der Randabstand aller Inhalte (16 px).
     So stehen die Knöpfe in einer Flucht mit dem Text darüber. */
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(6,9,18,.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--c-line);
  transform: translateY(110%);
  transition: transform .45s var(--e-out);
}
.mobile-cta.is-visible { transform: none; }
.mobile-cta .btn { flex: 1; --btn-py: .85rem; --btn-px: 1rem; font-size: .85rem; }
/* Der WhatsApp-Knopf trägt nur sein Zeichen: Der Name steht ohnehin auf dem
   Zeichen, und die beiden Nachbarn brauchen ihre Beschriftung dringender. */
.mobile-cta .btn--wa {
  flex: 0 0 auto;
  --btn-px: 1.05rem;
  background: #25D366;
  color: #fff;
  border-color: transparent;
}
.mobile-cta .btn--wa svg { width: 21px; height: 21px; }
.mobile-cta .btn--wa:hover { background: #2EE674; color: #fff; }

/* --------------------------------------------------------------------------
   21b. WHATSAPP-SCHNELLKONTAKT
   --------------------------------------------------------------------------
   Schwebender Knopf unten rechts. Auf dem Handy rutscht er über die
   Aktionsleiste und wird zum reinen Symbol, damit er nichts verdeckt.
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed; right: 22px; bottom: 24px; z-index: 95;
  display: inline-flex; align-items: center; gap: .65rem;
  height: 58px; padding: 0 1.3rem 0 1.05rem;
  border-radius: var(--r-full);
  background: #25D366;
  color: #fff;
  font-family: var(--f-display); font-weight: 600; font-size: .95rem;
  box-shadow: 0 14px 34px rgba(37, 211, 102, .38), 0 4px 14px rgba(0, 0, 0, .45);
  transition: transform .4s var(--e-back), box-shadow .4s var(--e-out), background .3s var(--e-out);
}
.wa-float:hover {
  background: #2EE674; color: #fff;
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 20px 46px rgba(37, 211, 102, .5), 0 6px 18px rgba(0, 0, 0, .5);
}
.wa-float svg { width: 30px; height: 30px; flex: none; }
.wa-float__label { white-space: nowrap; }

/* Sanft pulsierender Ring – fällt auf, ohne zu nerven */
.wa-float::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  animation: waPulse 3s ease-out infinite;
}
@keyframes waPulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
  70%  { box-shadow: 0 0 0 20px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* WhatsApp-Karte im Kontaktbereich */
.contact-item--wa .contact-item__icon {
  background: linear-gradient(145deg, rgba(37, 211, 102, .26), rgba(37, 211, 102, .06));
  border-color: rgba(37, 211, 102, .38);
}
.contact-item--wa .contact-item__icon svg { color: #37E27C; }
a.contact-item--wa:hover { border-color: rgba(37, 211, 102, .45); }

@media (max-width: 760px) {
  .wa-float {
    right: 16px; bottom: 88px;
    width: 54px; height: 54px; padding: 0;
    justify-content: center;
  }
  .wa-float__label { display: none; }
  .wa-float svg { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float::before { animation: none; }
}

/* --------------------------------------------------------------------------
   22. UNTERSEITEN (Leistungen / Recht)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--nav-h) + clamp(3rem, 6vw, 5.5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 75% 10%, rgba(43,79,216,.30), transparent 62%),
    linear-gradient(180deg, #05070F, #080D1E);
  border-bottom: 1px solid var(--c-line);
}
.page-hero__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  opacity: 0; transform: scale(1.01);
  filter: saturate(.72) contrast(1.08) brightness(.72);
  transition: opacity 1s ease;
}
.page-hero__video.is-ready { opacity: 1; }
.page-hero__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,7,15,.96) 0%, rgba(5,7,15,.84) 48%, rgba(5,7,15,.54) 100%),
    linear-gradient(180deg, rgba(5,7,15,.52), transparent 40%, rgba(5,7,15,.72));
}
.page-hero > .bg-grid { z-index: 2; opacity: .22; }
.page-hero > .bg-glow { z-index: 2; opacity: .10; }
.page-hero > .wrap { position: relative; z-index: 3; }
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  list-style: none; margin: 0 0 var(--s-5); padding: 0;
  font-size: var(--t-xs); color: var(--c-text-mute);
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: .5rem; }
.breadcrumb li + li::before { content: '/'; color: var(--c-text-mute); opacity: .6; }
.breadcrumb a { color: var(--c-text-mute); }
.breadcrumb a:hover { color: var(--c-gold-light); }
.page-hero h1 { font-size: var(--t-2xl); max-width: 20ch; }
.page-hero .lead { max-width: 62ch; }

.prose { max-width: 74ch; }
.prose h2 { font-size: var(--t-xl); margin-top: var(--s-7); }
.prose h3 { margin-top: var(--s-6); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul { padding-left: 0; list-style: none; display: grid; gap: .7rem; margin-bottom: var(--s-5); }
.prose ul li { position: relative; padding-left: 1.9rem; margin: 0; }
.prose ul li::before {
  content: ''; position: absolute; left: 0; top: .52em;
  width: 9px; height: 9px; border-radius: 3px;
  background: var(--g-gold);
  box-shadow: 0 0 12px rgba(216,180,90,.5);
}
.prose ol { padding-left: 1.3rem; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

.info-box {
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border-radius: var(--r-lg);
  border-left: 3px solid var(--c-gold);
  background: rgba(216,180,90,.06);
  margin-block: var(--s-6);
}
.info-box p:last-child { margin-bottom: 0; }

.sidebar-card { padding: clamp(1.5rem, 2.5vw, 2rem); border-radius: var(--r-lg); position: sticky; top: calc(var(--nav-h) + 24px); }
.sidebar-card h3 { font-size: var(--t-md); }
.side-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }

/* --------------------------------------------------------------------------
   23. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav__menu, .nav__phone { display: none; }
  .burger { display: grid; }
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__card { max-width: 560px; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .side-grid { grid-template-columns: 1fr; }
  .sidebar-card { position: static; }
}

@media (max-width: 760px) {
  :root { --nav-h: 68px; }
  body { padding-bottom: 76px; }
  .wrap, .wrap-narrow { width: min(100% - 2rem, var(--wrap)); }
  .mobile-cta { display: flex; }

  /* Der schwebende Knopf entfällt hier: Er läge über dem Text, und WhatsApp
     steht auf dem Telefon bereits oben in der Kopfleiste und unten in der
     Aktionsleiste. */
  .wa-float { display: none; }
  /* Der Hinweis entfällt auf dem Telefon, also wird der reservierte Platz
     auch nicht gebraucht. */
  .hero { min-height: auto; padding-bottom: clamp(2.5rem, 7vw, 3.5rem); }

  /* Unter dem Hero sitzt auf dem Telefon bereits die feste Aktionsleiste.
     Ein zusätzlicher Scroll-Hinweis wäre dort nur im Weg. */
  .hero__scroll { display: none; }

  /* Videos und Bilder füllen auf dem Handy ihren Rahmen vollständig aus.
     Desktop-Kippungen würden die Ecken sonst aus dem sichtbaren Bereich
     drücken und bei Videos wie ein falsches Format wirken. */
  .hero__video {
    object-position: 64% center;
    transform: none;
  }
  .page-hero__video {
    object-position: center;
    transform: none;
  }
  .stack__inner,
  .stack:hover .stack__inner { transform: none; }
  .stack__img { width: 100%; aspect-ratio: 4 / 5; }
  .stack__video { width: 100%; height: 100%; object-position: center; }
  .stack__badge--tl { top: .75rem; left: .75rem; }
  .stack__badge--br { right: .75rem; bottom: .75rem; }
  .ba { width: 100%; }
  .ba__img { width: 100%; height: 100%; object-position: center; }

  /* Der Fußbereich hat auf einem Telefon nur Platz für EINE Spalte. Zweispaltig
     wurden die Leistungsnamen und die Telefonnummer rechts abgeschnitten. */
  .footer__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .footer__about { max-width: none; }

  /* Abstände zusammenziehen: Was auf dem Bildschirm großzügig wirkt, fühlt
     sich auf dem Telefon nach endlosem Scrollen an. */
  :root { --section-y: clamp(3.2rem, 11vw, 4.6rem); }
  .section-head { margin-bottom: 2.2rem; }

  /* Zwei Kennzahlen nebeneinander statt vier – vier Spalten quetschen die
     Zahlen auf Briefmarkengröße. */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Die schwebenden Siegel am Qualitätsbild verkleinern, damit sie das Bild
     nicht überdecken. */
  .stack__badge { font-size: .78rem; padding: .6rem .8rem; }
  .stack__badge svg { width: 18px; height: 18px; }

  /* Der Vorher-Nachher-Regler braucht auf dem Telefon einen größeren Griff –
     ein Finger ist ungenauer als ein Mauszeiger. */
  .ba__knob { width: 52px; height: 52px; }

  /* Die Glaskarte schwebt am Bildschirm mit einer leichten Drehung. Auf dem
     Telefon steht sie ganz allein in der Spalte – dort liest sich die Drehung
     nicht als Schweben, sondern als schiefe Kante gegenüber allen anderen
     Blöcken. Sie hebt und senkt sich hier nur noch, ohne zu kippen. */
  .hero__card-float { animation-name: floatCardGerade; }
  @keyframes floatCardGerade {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
  }
  /* Die drei Vertrauenspunkte (Versichert / 24 Stunden / Festpreis) standen
     als umbrechende Reihe nebeneinander: zwei oben, einer darunter, jeder
     unterschiedlich breit, und weil die Zweitzeile umbrach, saß das Symbol
     auf halber Höhe statt neben der Überschrift. Auf dem Telefon stehen sie
     deshalb untereinander – gleiche Breite, Symbole exakt in einer Flucht. */
  .hero__proof { display: grid; grid-template-columns: 1fr; gap: 1rem; }
  .hero__proof-item { align-items: flex-start; }
  .hero__proof-item svg { margin-top: 3px; }
  .hero__proof-item small { line-height: 1.45; }

  /* Kontaktformular: ein Feld pro Zeile liest sich auf dem Telefon besser. */
  .form__grid { grid-template-columns: 1fr; }

  /* Der untere Rand der Seite endet über der festen Aktionsleiste. */
  .footer { padding-bottom: 1.5rem; }
}

@media (max-width: 560px) {
  /* Bricht die Kopfzeile auf zwei Zeilen um, stehen die Zierstriche mitten
     im Text statt daneben. Auf schmalen Bildschirmen entfallen sie deshalb. */
  .eyebrow::before, .eyebrow::after { display: none; }
  .eyebrow { gap: 0; }
  .hero .btn-row,
  .page-hero .btn-row { flex-direction: column; align-items: stretch; }
  .hero .btn-row .btn,
  .page-hero .btn-row .btn { width: 100%; }
  /* EINE Spalte, nicht zwei. Bei zwei Spalten steht der dritte Punkt allein
     in der zweiten Reihe, und weil "Rückmeldung auf Anfragen" dort umbricht,
     sitzen die Symbole auf unterschiedlicher Höhe. Untereinander stehen alle
     drei gleich breit und die Symbole exakt in einer Flucht. */
  .hero__proof { display: grid; grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 620px) {
  /* Auf schmalen Handys ist neben Logo und Menüknopf kein Platz mehr für den
     Angebots-Knopf. Er entfällt hier – die feste Leiste am unteren Rand und
     der große Knopf im Kopfbereich übernehmen diese Aufgabe. */
  .nav__actions .btn { display: none; }
}

@media (max-width: 420px) {
  .brand__lockup { width: 126px; }
  .nav.is-stuck .brand__lockup { width: 112px; }
  .hero__badge { font-size: .68rem; }
}

/* --------------------------------------------------------------------------
   24. BARRIEREFREIHEIT / MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  /* Logo sofort im Endzustand zeigen, Lichtreflex abschalten */
  .brand__word-g, .brand__wave-g, .brand__sub { opacity: 1 !important; transform: none !important; }
  .brand__sheen { display: none; }
  .brand:hover .brand__lockup { transform: none; }
  .hero__title .line > span { transform: none; }
  .hero__text, .hero .btn-row, .hero__proof, .hero__card, .hero__scroll { opacity: 1; }
}

/* --------------------------------------------------------------------------
   25. PRINT
   -------------------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #111; padding-bottom: 0; }
  .nav, .drawer, .drawer-hintergrund, .mobile-cta, .wa-float,
  .hero__video, .page-hero__video, .stack__video, video, canvas,
  .bg-grid, .bg-glow, .cursor-schaum, .hero__scroll {
    display: none !important;
  }
  .section, .hero, .page-hero { padding-block: 1.2rem; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a { color: #111; text-decoration: underline; }
  /* Ziel von Verweisen ausschreiben – auf Papier ist ein Link sonst wertlos */
  .wrap a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* === BEWERTUNGEN: ANFANG === */
/* --------------------------------------------------------------------------
   GOOGLE-BEWERTUNGEN
   --------------------------------------------------------------------------
   Aufbau: eine große Notenkarte, darunter eine Reihe Bewertungskarten, die
   ruhig von rechts nach links wandert. Beim Darüberfahren hält sie an, damit
   man in Ruhe lesen kann; wer Bewegung abgestellt hat, bekommt stattdessen
   eine Reihe zum Wischen.
   -------------------------------------------------------------------------- */

/* Sternereihe: graue Grundreihe, darüber die goldene, per Breite beschnitten.
   So lassen sich auch Zwischenwerte wie 4,5 exakt darstellen. */
.sterne {
  position: relative; display: inline-block;
  line-height: 0; white-space: nowrap;
}
.sterne__leer, .sterne__voll { display: block; }
.sterne__voll {
  position: absolute; inset: 0 auto 0 0;
  overflow: hidden;
}
.sterne svg {
  /* MUSS inline-block sein: Weiter oben in dieser Datei steht ein globales
     "svg { display: block }". Ohne diese Zeile stünde jeder Stern in einer
     eigenen Zeile – die Sternereihe würde zur Sternesäule. */
  display: inline-block;
  width: 1.05em; height: 1.05em;
  margin-right: .12em;
  vertical-align: top;
}
.sterne__leer svg { color: rgba(255,255,255,.16); }
.sterne__voll svg { color: #F4B740; }

/* Die Notenkarte */
.bewertung-note {
  position: relative; z-index: 1;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(1rem, 2.4vw, 1.9rem);
  width: fit-content; max-width: 100%;
  margin: 0 auto clamp(2.2rem, 4vw, 3.4rem);
  padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.4rem, 3vw, 2.4rem);
  border-radius: var(--r-lg);
  border: 1px solid rgba(216,180,90,.28);
  background:
    radial-gradient(120% 160% at 12% 0%, rgba(216,180,90,.14) 0%, transparent 62%),
    linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  box-shadow: 0 22px 60px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07);
}
.bewertung-note__g { display: block; }
.bewertung-note__g svg { width: 34px; height: 34px; display: block; }
.bewertung-note__wert {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 700; line-height: 1;
  background: var(--g-gold);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.bewertung-note__rechts { display: grid; gap: .35rem; font-size: 1.05rem; }
.bewertung-note__rechts small {
  font-size: var(--t-xs); color: var(--c-text-soft); letter-spacing: .02em;
}
.bewertung-note__link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--t-sm); font-weight: 600; color: var(--c-gold-light);
  text-decoration: none;
}
.bewertung-note__link svg { width: 16px; height: 16px; transition: transform var(--d-2) var(--e-out); }
.bewertung-note__link:hover svg { transform: translateX(4px); }

/* Die wandernde Reihe. Die Maske lässt die Karten an beiden Enden weich
   auslaufen, statt sie hart abzuschneiden. */
.bewertungen {
  position: relative; z-index: 1;
  display: flex; gap: var(--kartenluecke, 1.25rem);
  overflow: hidden;
  padding-block: .6rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
/* Wenige Bewertungen: ruhig nebeneinander, mittig, ohne Umlauf. */
.bewertungen--ruhig {
  justify-content: center; flex-wrap: wrap;
  -webkit-mask-image: none; mask-image: none;
}

.bewertungen__lauf {
  display: flex; gap: var(--kartenluecke, 1.25rem);
  flex: 0 0 auto;
  animation: bewLauf 52s linear infinite;
}
.bewertungen:hover .bewertungen__lauf,
.bewertungen:focus-within .bewertungen__lauf { animation-play-state: paused; }
@keyframes bewLauf {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-100% - var(--kartenluecke, 1.25rem)), 0, 0); }
}

/* Eine einzelne Bewertung */
.bewertung {
  position: relative; isolation: isolate;
  flex: 0 0 auto; width: clamp(268px, 25vw, 340px);
  display: flex; flex-direction: column; gap: .7rem;
  padding: 1.4rem 1.5rem 1.5rem;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
  transition: transform var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out);
}
.bewertung::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(216,180,90,.12), transparent 55%);
  opacity: 0; transition: opacity var(--d-2) var(--e-out);
}
.bewertung:hover { transform: translateY(-5px); border-color: rgba(216,180,90,.34); }
.bewertung:hover::before { opacity: 1; }

.bewertung__zitat { position: absolute; top: .7rem; right: .9rem; color: rgba(216,180,90,.14); }
.bewertung__zitat svg { width: 38px; height: 38px; display: block; }

.bewertung__kopf { display: flex; align-items: center; gap: .7rem; }
.bewertung__avatar {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 50%;
  font-family: var(--f-display); font-weight: 700; font-size: 1rem;
  color: #241A03; background: var(--g-gold);
}
.bewertung__wer { display: grid; gap: .1rem; min-width: 0; }
.bewertung__wer b { font-size: var(--t-sm); font-weight: 600; }
.bewertung__wer small { font-size: var(--t-xs); color: var(--c-text-soft); }
.bewertung__g { margin-left: auto; }
.bewertung__g svg { width: 17px; height: 17px; display: block; }

.bewertung .sterne { font-size: 15px; }

/* Merkmale, die der Bewertende bei Google angekreuzt hat. Bewusst zurück-
   haltend: Sie sollen den Text stützen, nicht mit ihm um Aufmerksamkeit
   ringen. */
.bewertung__merkmale {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin-top: -.15rem;
}
.bewertung__merkmal {
  display: inline-flex; align-items: center;
  padding: .22rem .6rem;
  border-radius: var(--r-full);
  border: 1px solid rgba(216,180,90,.3);
  background: rgba(216,180,90,.08);
  color: var(--c-gold-light);
  font-size: .68rem; font-weight: 600; letter-spacing: .02em;
}
.bewertung__text { font-size: var(--t-sm); color: var(--c-text-soft); line-height: 1.68; }
.bewertung__datum { font-size: var(--t-xs); color: var(--c-text-mute, var(--c-text-soft)); opacity: .75; }

/* Bewertung ohne Text: Die Karte bleibt gleich breit, damit die Reihe ruhig
   bleibt – nur der Inhalt ist kürzer. Statt Text steht dort ehrlich, dass
   kein Kommentar geschrieben wurde. Etwas zu erfinden wäre hier besonders
   verlockend und besonders falsch. */
.bewertung--nur-sterne { justify-content: flex-start; }
.bewertung__ohne {
  font-size: var(--t-sm); font-style: italic;
  color: var(--c-text-mute, var(--c-text-soft)); opacity: .7;
}

/* Solange es noch keine echten Bewertungen gibt: ehrliche Einladung,
   keine erfundenen Sterne. */
.bewertung-einladung {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; gap: clamp(1.2rem, 3vw, 2.2rem);
  padding: clamp(1.6rem, 3.4vw, 2.8rem);
  border-radius: var(--r-lg);
  border: 1px solid rgba(216,180,90,.26);
  background:
    radial-gradient(110% 150% at 8% 0%, rgba(216,180,90,.13) 0%, transparent 60%),
    linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
  box-shadow: 0 26px 70px -34px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
}
.bewertung-einladung__g { flex: 0 0 auto; }
.bewertung-einladung__g svg { width: clamp(38px, 5vw, 54px); height: clamp(38px, 5vw, 54px); display: block; }
.bewertung-einladung h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); margin-bottom: .7rem; }
.bewertung-einladung p { color: var(--c-text-soft); max-width: 62ch; }
.bewertung-einladung .btn-row { margin-top: 1.4rem; }

@media (max-width: 700px) {
  .bewertung-note { width: 100%; justify-content: center; text-align: center; }
  .bewertung-note__link { width: 100%; justify-content: center; }
  .bewertung-einladung { flex-direction: column; }
  .bewertung { width: min(84vw, 320px); }
}

/* Wer Bewegung abgestellt hat, bekommt eine Reihe zum Wischen – und sieht
   dieselben Bewertungen, nur ohne Eigenbewegung. */
@media (prefers-reduced-motion: reduce) {
  .bewertungen { overflow-x: auto; scroll-snap-type: x mandatory; }
  .bewertungen__lauf { animation: none; }
  .bewertungen__lauf[aria-hidden="true"] { display: none; }
  .bewertung { scroll-snap-align: start; }
}
/* === BEWERTUNGEN: ENDE === */


/* === PROJEKTE: ANFANG === */
/* --------------------------------------------------------------------------
   PROJEKTE
   --------------------------------------------------------------------------
   Drei Darstellungsarten, die sich auf den ersten Blick unterscheiden müssen:

   .beweis         Eine Aufnahme, beide Zustände. Marken liegen IM Bild.
   .ueberblendung  Zwei Aufnahmen übereinander, ein Regler blendet zwischen
                   ihnen. Beide Zustände an derselben Stelle – das Auge muss
                   nicht zwischen zwei Rahmen springen.
   .eindruck       Kein Vergleich. Klein, ohne Marken, ruhig.

   Alle Raster sind in der Breite begrenzt. Ohne Begrenzung werden die Bilder
   auf großen Bildschirmen riesig, und ein Foto vom Telefon hält das nicht
   aus – es wirkt dann grob und unscharf.
   -------------------------------------------------------------------------- */

/* ---------- Gemeinsames ---------------------------------------------------- */
.beweis, .ueberblendung, .eindruck { margin: 0; }
.beweis[hidden], .ueberblendung[hidden], .eindruck[hidden] { display: none; }

.beweis__bild,
.eindruck__bild {
  position: relative; display: block; width: 100%;
  padding: 0; cursor: zoom-in; overflow: hidden;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--c-line);
  transition: border-color var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out);
}
.beweis__bild img,
.eindruck__bild img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--e-out);
}
.beweis__bild:hover img, .eindruck__bild:hover img { transform: scale(1.05); }
.beweis__bild:focus-visible,
.eindruck__bild:focus-visible { outline: 2px solid var(--c-gold); outline-offset: -3px; }

.lupe {
  position: absolute; right: .6rem; bottom: .6rem; z-index: 4;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%; padding: 0; border: 0;
  background: rgba(6,9,18,.74); color: #fff; cursor: zoom-in;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--d-2) var(--e-out), transform var(--d-2) var(--e-out);
}
.lupe svg { width: 15px; height: 15px; }
.beweis__bild:hover .lupe, .eindruck__bild:hover .lupe,
.ueb__buehne:hover .ueb__lupe,
.beweis__bild:focus-visible .lupe, .eindruck__bild:focus-visible .lupe,
.ueb__lupe:focus-visible { opacity: 1; transform: none; }

/* ---------- Die Marken ----------------------------------------------------
   Grau = Ausgangszustand, Gold = Ergebnis. Ausnahmslos im ganzen Bereich. */
.marke {
  position: absolute; z-index: 3;
  padding: .3rem .72rem;
  border-radius: var(--r-full);
  font-family: var(--f-body);
  font-size: .66rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
.marke--vorher {
  background: rgba(8,11,22,.82); color: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.22);
}
.marke--nachher {
  background: linear-gradient(135deg, #E4C572, #F6E3B0);
  color: #241A03; border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 6px 18px -6px rgba(216,180,90,.7);
}
.marke--oben   { top: .7rem; left: 50%; transform: translateX(-50%); }
.marke--unten  { bottom: .7rem; left: 50%; transform: translateX(-50%); }
.marke--links  { top: 50%; left: .7rem; transform: translateY(-50%); }
.marke--rechts { top: 50%; right: .7rem; transform: translateY(-50%); }

/* ---------- Band 1 --------------------------------------------------------- */
.beweis-raster {
  position: relative; z-index: 1;
  display: grid; gap: clamp(1.2rem, 2.4vw, 1.9rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  max-width: 920px; margin-inline: auto;
}
.beweis__bild { border-radius: var(--r-lg); }
.beweis__bild img { aspect-ratio: 4 / 5; }
.beweis__bild:hover {
  border-color: rgba(216,180,90,.45);
  box-shadow: 0 22px 50px -28px rgba(0,0,0,.95);
}
.beweis__text { padding-top: .9rem; }
.beweis__text h3 { font-size: 1.02rem; margin-bottom: .4rem; }

/* ---------- Band 2: die Überblendung ---------------------------------------
   Beide Bilder liegen deckungsgleich übereinander. Der Regler steuert allein
   die Deckkraft des oberen. Das ist die günstigste Art, zwei Bilder zu
   mischen: kein Neuzeichnen des Layouts, nur eine Ebene, die der Grafikchip
   überblendet. */
.ueb-raster {
  position: relative; z-index: 1;
  display: grid; gap: clamp(1.6rem, 3vw, 2.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  max-width: 1020px; margin-inline: auto;
}
.ueb__buehne {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  overflow: hidden;
  background: #070B16;
  transition: border-color var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out);
}
.ueberblendung:hover .ueb__buehne {
  border-color: rgba(216,180,90,.45);
  box-shadow: 0 26px 60px -32px rgba(0,0,0,.95);
}
.ueb__bild {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
}
.ueb__bild--nachher {
  position: absolute; inset: 0; height: 100%;
  opacity: 1;
  /* KEIN CSS-Übergang: Die Deckkraft wird pro Einzelbild von JavaScript
     gesetzt. Ein zusätzlicher Übergang würde jeder Bewegung nachschleifen
     und den Regler schwammig machen. */
}

/* Die Marken zeigen, welcher Zustand gerade zu sehen ist. Ihre Deckkraft
   folgt dem Regler, damit die Beschriftung nie dem Bild widerspricht. */
.ueb__marke { top: .7rem; }
.ueb__marke--vorher { left: .7rem; }
.ueb__marke--nachher { right: .7rem; }

/* Die Steuerzeile: links "Vorher", rechts "Nachher", dazwischen der Regler.
   Die Beschriftungen stehen dauerhaft da – dadurch ist die Richtung auch
   dann klar, wenn man das Bild gerade nicht beobachtet. Die aktive Seite
   leuchtet gold. */
.ueb__steuerung {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: .7rem;
  padding: .8rem .1rem .1rem;
}
.ueb__ende {
  font-family: var(--f-body);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-text-mute);
  transition: color .25s var(--e-out);
  white-space: nowrap;
}
.ueb__ende.is-aktiv { color: var(--c-gold-light); }

.ueb__regler { display: block; }
.ueb__regler input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; background: transparent; cursor: ew-resize;
}
.ueb__regler input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: var(--r-full);
  background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(216,180,90,.85));
}
.ueb__regler input[type="range"]::-moz-range-track {
  height: 4px; border-radius: var(--r-full);
  background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(216,180,90,.85));
}
.ueb__regler input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; margin-top: -10px;
  border-radius: 50%; border: 2px solid rgba(5,7,15,.9);
  background: linear-gradient(135deg, #E4C572, #F6E3B0);
  box-shadow: 0 4px 14px -4px rgba(216,180,90,.9);
}
.ueb__regler input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%; border: 2px solid rgba(5,7,15,.9);
  background: linear-gradient(135deg, #E4C572, #F6E3B0);
}
.ueb__regler input[type="range"]:focus-visible {
  outline: 2px solid var(--c-gold); outline-offset: 4px; border-radius: var(--r-full);
}
.ueb__hinweis {
  display: block; margin-top: .15rem;
  font-size: var(--t-xs); color: var(--c-text-mute);
  letter-spacing: .04em;
}
.ueb__text { padding-top: .7rem; }
.ueb__text h3 { font-size: clamp(1.05rem, 1.7vw, 1.22rem); margin-bottom: .4rem; }

/* ---------- Band 3 ---------------------------------------------------------- */
.eindruck-raster {
  position: relative; z-index: 1;
  display: grid; gap: clamp(.9rem, 1.8vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr));
  max-width: 1020px; margin-inline: auto;
}
.eindruck__bild {
  border-radius: var(--r-md); opacity: .92;
  transition: opacity var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out);
}
.eindruck__bild:hover { opacity: 1; border-color: rgba(132,158,255,.35); }
.eindruck__bild img { aspect-ratio: 1 / 1; }
.eindruck__text { padding-top: .7rem; }
.eindruck__text h3 { font-size: .9rem; margin-bottom: .28rem; }
.eindruck__text p { font-size: var(--t-xs); line-height: 1.6; color: var(--c-text-mute); }

/* ---------- Text, Zwischenköpfe --------------------------------------------- */
.beweis__text p, .ueb__text p {
  font-size: var(--t-sm); color: var(--c-text-soft); line-height: 1.64;
}
.projekt__meta {
  margin-top: .45rem; font-size: var(--t-xs);
  color: var(--c-gold-light); letter-spacing: .06em;
}
.projekte-zwischenkopf {
  margin-top: clamp(3rem, 6vw, 5rem);
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.projekte-zwischenkopf h3 {
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  color: var(--c-text); margin-bottom: .5rem;
}
.projekte-zwischenkopf p { font-size: var(--t-sm); color: var(--c-text-mute); }

/* ---------- Filterleiste ----------------------------------------------------- */
.filter {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.filter__knopf {
  padding: .5rem 1rem; border-radius: var(--r-full);
  border: 1px solid var(--c-line);
  background: rgba(255,255,255,.04);
  color: var(--c-text-soft);
  font-family: var(--f-body); font-size: var(--t-sm); font-weight: 600;
  cursor: pointer;
  transition: background var(--d-2) var(--e-out), color var(--d-2) var(--e-out),
              border-color var(--d-2) var(--e-out);
}
.filter__knopf:hover { border-color: rgba(216,180,90,.4); color: var(--c-text); }
.filter__knopf.is-aktiv { background: var(--g-gold); border-color: transparent; color: #241A03; }

/* ---------- Lichtkasten ------------------------------------------------------- */
.lichtbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(.5rem, 2vw, 1.5rem);
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(3, 5, 12, .94);
  opacity: 0; transition: opacity .3s var(--e-out);
}
.lichtbox.is-offen { opacity: 1; }

/* WICHTIG: Ohne diese Zeile bleibt der Lichtkasten unsichtbar über der ganzen
   Seite liegen und verschluckt jeden Klick. Das "display: grid" oben ist eine
   Klassenregel und damit stärker als die eingebaute Regel des Browsers für
   versteckte Elemente. */
.lichtbox[hidden] { display: none; }

.lichtbox__inhalt {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  gap: .9rem; min-width: 0;
}
.lichtbox__inhalt img {
  max-width: 100%; max-height: 78vh;
  border-radius: var(--r-md);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,1);
}
.lichtbox__inhalt figcaption {
  font-family: var(--f-display); font-size: var(--t-sm);
  color: var(--c-text-soft); text-align: center;
}
.lichtbox__zu {
  position: absolute; top: clamp(.6rem, 2vw, 1.4rem); right: clamp(.6rem, 2vw, 1.4rem);
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--c-line); background: rgba(255,255,255,.06);
  color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.lichtbox__pfeil {
  width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid var(--c-line); background: rgba(255,255,255,.06);
  color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; flex: none;
}
.lichtbox__zu:hover, .lichtbox__pfeil:hover {
  background: rgba(216,180,90,.22); border-color: rgba(216,180,90,.5);
}

/* ---------- Telefon ------------------------------------------------------------ */
@media (max-width: 700px) {
  /* Auf dem Telefon spielt die Überblendung ihre Stärke erst richtig aus:
     ein Bild, volle Breite, Regler darunter – und der Daumen liegt ohnehin
     schon dort. */
  .ueb__bild { aspect-ratio: 1 / 1; }
  .ueb__regler input[type="range"] { height: 34px; }
  .ueb__regler input[type="range"]::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -13px; }
  .marke { font-size: .6rem; padding: .26rem .6rem; letter-spacing: .12em; }
  .lupe { opacity: 1; transform: none; }

  .lichtbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lichtbox__inhalt img { max-height: 66vh; }
  .lichtbox__pfeil { position: absolute; bottom: 1.6rem; }
  .lichtbox__pfeil--zurueck { left: 25%; }
  .lichtbox__pfeil--vor { right: 25%; }
}

@media (prefers-reduced-motion: reduce) {
  .beweis__bild img, .eindruck__bild img, .lichtbox, .ueb__ende { transition: none; }
  .beweis__bild:hover img, .eindruck__bild:hover img { transform: none; }
}
/* === PROJEKTE: ENDE === */