/* ===========================================================================
   CARA CERAMIC
   ---------------------------------------------------------------------------
   Leitbild: eine dunkle Werkhalle bei Nacht. Ein sechs Meter langes Wohnmobil
   steht allein. Eine lange Pruefleuchte wandert ueber den Aufbau und zeigt,
   wo die Oberflaeche noch stumpf ist und wo sie schon spiegelt.

   Aus diesem einen Bild kommt die gesamte Bewegung der Seite. Nichts blendet
   einfach ein. Alles wird von einem wandernden Licht freigelegt: Ueberschriften
   werden aufgewischt, Karten bekommen im Moment des Erscheinens einen Reflex
   ueber die Flaeche, der Fortschrittsbalken oben ist dieselbe Leuchte.

   Aufbau dieser Datei
     01 Marken-Token
     02 Grundlagen und Typografie
     03 Bewegungssystem (die Pruefleuchte)
     04 Kopfzeile und Navigation
     05 Knoepfe
     06 Hero
     07 Flaechen, Karten, Paneele
     08 Leistungsverzeichnis
     09 Wandlung matt zu glanz
     10 Vorher und Nachher
     11 Perl-Demonstration
     12 Galerie
     13 Ablauf, Bewertungen, Tabelle
     14 Anfrage-Assistent
     15 Fusszeile
     16 Mobil
     17 Reduzierte Bewegung und Druck
   ======================================================================== */

/* ---------------------------------------------------- 01 Marken-Token --- */
:root{
  /* Die Halle. Kalt, tief, mit einem Blaustich statt neutralem Grau. */
  --hall-0:  oklch(12.5% 0.014 248);
  --hall-1:  oklch(16.5% 0.016 248);
  --hall-2:  oklch(21%   0.019 248);
  --hall-3:  oklch(26%   0.021 248);

  /* Die Pruefleuchte. Das kalte Weiss einer Lackinspektionslampe. */
  --beam:     oklch(90% 0.075 218);
  --beam-hot: oklch(98% 0.030 218);
  --beam-dim: oklch(62% 0.070 222);

  /* Das warme Gegenstueck: Kupfer. Nur fuer Hinweise, nie flaechig. */
  --copper:     oklch(74% 0.135 52);
  --copper-dim: oklch(56% 0.105 52);

  --cream: oklch(95%   0.010 85);
  --text:  oklch(84%   0.011 250);
  --muted: oklch(70%   0.013 250);
  --faint: oklch(55%   0.014 250);

  --line:      oklch(30% 0.020 248);
  --line-soft: oklch(24% 0.017 248);

  --ff-d: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-m: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r:    18px;
  --r-sm: 11px;

  /* Kurven nach Emil. Nie ease-in auf Bedienelementen. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --wrap: 1260px;
  --kopf: 68px;
}

/* --------------------------------------- 02 Grundlagen und Typografie --- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--kopf) + 20px);
}
body{
  margin:0;
  background:var(--hall-0);
  color:var(--text);
  font-family:var(--ff-d);
  font-variation-settings:"wdth" 100,"wght" 400;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Die Halle hat kein gleichmaessiges Licht. Ein sehr weicher kalter Schein
   von oben und ein kupferner Rest von unten rechts, beide kaum sichtbar. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 62% at 50% -12%,  oklch(30% 0.035 225 / .55), transparent 62%),
    radial-gradient(70%  50% at 108% 108%, oklch(30% 0.05  52  / .22), transparent 60%);
}
/* Feines Korn. Nimmt der Flaeche das Digitale, ohne sichtbar zu rauschen. */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.32'/></svg>");
}
body > *{position:relative;z-index:2}

h1,h2,h3,h4{
  font-family:var(--ff-d);
  color:var(--cream);
  margin:0 0 14px;
  line-height:1.03;
  letter-spacing:-.025em;
  text-wrap:balance;
}
/* Die Ueberschriften laufen breit und schwer, wie Beschriftung an einer
   Hallenwand. Das ist der Trager der Marke. */
h1{font-variation-settings:"wdth" 116,"wght" 800; font-size:clamp(42px,6.6vw,86px)}
h2{font-variation-settings:"wdth" 112,"wght" 700; font-size:clamp(30px,4vw,50px)}
h3{font-variation-settings:"wdth" 104,"wght" 600; font-size:20px;letter-spacing:-.015em;line-height:1.22}
h4{font-variation-settings:"wdth" 100,"wght" 600; font-size:14px}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}
b,strong{font-variation-settings:"wdth" 100,"wght" 600;color:var(--cream)}
a{color:var(--text);text-decoration:none;transition:color .18s var(--ease-out)}
img{max-width:100%;display:block}

::selection{background:var(--beam-dim);color:oklch(14% 0.02 248)}

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

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,44px);width:100%}
section{padding-block:clamp(62px,9vw,128px);position:relative}
.tief{background:var(--hall-1);border-block:1px solid var(--line-soft)}

.lede{
  font-size:clamp(17px,1.6vw,20.5px);
  color:var(--muted);
  max-width:62ch;
  line-height:1.58;
  font-variation-settings:"wdth" 100,"wght" 350;
}

/* Technische Kleinschrift. Wirkt wie eine Zeile aus dem Pruefprotokoll. */
.kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ff-m);font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--beam);margin-bottom:18px;
}
.kicker::before{
  content:"";width:26px;height:1px;background:var(--beam);
  box-shadow:0 0 9px var(--beam);flex:none;
}
.kicker.kupfer{color:var(--copper)}
.kicker.kupfer::before{background:var(--copper);box-shadow:0 0 9px var(--copper)}

.sec-head{max-width:64ch;margin-bottom:clamp(34px,4vw,56px)}
.sec-head h2{margin-bottom:16px}

/* ------------------------------- 03 Bewegungssystem (Pruefleuchte) ------ */

/* Der Fortschrittsbalken ist dieselbe Leuchte, nur oben an der Kante. */
.fortschritt{
  position:fixed;top:0;left:0;height:2px;z-index:120;
  width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,transparent,var(--beam-dim) 18%,var(--beam-hot));
  box-shadow:0 0 14px var(--beam);
  will-change:transform;
}

/* Der Grundfall: Inhalt kommt von unten und wird dabei hell.
   Nur transform und opacity, damit es auf dem Verbund laeuft. */
.rv{
  opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .72s var(--ease-out), transform .72s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.rv.in{opacity:1;transform:none}

/* Ueberschriften werden wortweise vom Licht freigelegt. Das ist der
   Unterschied zwischen "blendet ein" und "wird beleuchtet". */
.wort{
  display:inline-block;
  clip-path:inset(0 100% -30% 0);
  opacity:.001;
  transform:translate3d(0,0,0);
  transition:clip-path .82s var(--ease-out), opacity .1s linear;
  transition-delay:var(--d,0ms);
  position:relative;
}
.wort.in{clip-path:inset(0 -8% -30% 0);opacity:1}
/* Die Vorderkante des Lichts, die ueber das Wort laeuft. */
.wort::after{
  content:"";position:absolute;inset:-6% -12% -12% -12%;
  background:linear-gradient(96deg,transparent 42%,oklch(98% .03 218 / .34) 50%,transparent 58%);
  transform:translate3d(-125%,0,0);
  pointer-events:none;opacity:0;
}
.wort.in::after{
  animation:streifen .82s var(--ease-out) forwards;
  animation-delay:var(--d,0ms);
}
@keyframes streifen{
  0%  {transform:translate3d(-125%,0,0);opacity:0}
  14% {opacity:1}
  86% {opacity:1}
  100%{transform:translate3d(125%,0,0);opacity:0}
}

/* Derselbe Reflex, einmalig ueber Karten und Bilder beim Erscheinen. */
.reflex{position:relative;overflow:hidden}
.reflex::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(104deg,transparent 38%,oklch(98% .03 218 / .16) 47%,oklch(98% .03 218 / .05) 53%,transparent 62%);
  transform:translate3d(-140%,0,0);opacity:0;
}
.rv.in.reflex::after{animation:streifen 1.05s var(--ease-out) .18s forwards}

/* Zahlen, die beim Erscheinen hochzaehlen. */
.zahl{font-variant-numeric:tabular-nums}

/* -------------------------------------- 04 Kopfzeile und Navigation ---- */
.kopf{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--kopf);
  display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease-out),border-color .4s var(--ease-out),
             backdrop-filter .4s var(--ease-out);
}
.kopf.fest{
  background:oklch(12.5% .014 248 / .82);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom-color:var(--line-soft);
}
.kopf.weg{transform:translate3d(0,-100%,0)}
.kopf{transition:background .4s var(--ease-out),border-color .4s var(--ease-out),
                 transform .45s var(--ease-out)}
.kopf-in{display:flex;align-items:center;justify-content:space-between;gap:20px}

.logo{
  font-family:var(--ff-d);font-variation-settings:"wdth" 118,"wght" 800;
  font-size:19px;letter-spacing:.01em;color:var(--cream);
  display:inline-flex;align-items:baseline;gap:.34em;flex:none;
}
.logo span{
  color:var(--beam);
  font-variation-settings:"wdth" 118,"wght" 400;
}

.nav-links{display:flex;gap:2px;align-items:center}
.nav-links a{
  position:relative;padding:9px 13px;border-radius:8px;
  font-size:14.5px;color:var(--muted);
  font-variation-settings:"wdth" 100,"wght" 450;
  transition:color .2s var(--ease-out);
}
.nav-links a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:4px;height:1px;
  background:var(--beam);box-shadow:0 0 8px var(--beam);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .34s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .nav-links a:hover{color:var(--cream)}
  .nav-links a:hover::after{transform:scaleX(1)}
}
.nav-links a[aria-current]{color:var(--cream)}
.nav-links a[aria-current]::after{transform:scaleX(1)}

.kopf-cta{display:flex;align-items:center;gap:10px;flex:none}

.burger{
  display:none;width:42px;height:38px;border:1px solid var(--line);
  background:transparent;border-radius:9px;cursor:pointer;
  padding:0;position:relative;
}
.burger i{
  position:absolute;left:11px;width:20px;height:1.5px;background:var(--cream);
  border-radius:2px;transition:transform .34s var(--ease-out),opacity .2s linear;
}
.burger i:nth-child(1){top:13px}
.burger i:nth-child(2){top:18.5px}
.burger i:nth-child(3){top:24px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.burger:active{transform:scale(.96)}

/* Das Mobilmenue faehrt wie eine Schublade, nicht wie ein Fenster. */
.schublade{
  position:fixed;inset:var(--kopf) 0 auto 0;z-index:99;
  background:oklch(12.5% .014 248 / .97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  padding:14px clamp(20px,5vw,44px) 26px;
  transform:translate3d(0,-104%,0);
  visibility:hidden;
  transition:transform .5s var(--ease-drawer),visibility 0s linear .5s;
}
.schublade.auf{transform:none;visibility:visible;transition-delay:0s}
.schublade a{
  display:block;padding:13px 0;border-bottom:1px solid var(--line-soft);
  font-family:var(--ff-d);font-variation-settings:"wdth" 108,"wght" 600;
  font-size:22px;color:var(--cream);
  opacity:0;transform:translate3d(0,-10px,0);
}
.schublade.auf a{
  animation:schub .42s var(--ease-out) forwards;
  animation-delay:calc(var(--i) * 42ms + 90ms);
}
@keyframes schub{to{opacity:1;transform:none}}
.schublade .btn{margin-top:20px;width:100%}

/* --------------------------------------------------------- 05 Knoepfe -- */
.btn{
  --btn-bg:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:999px;border:1px solid var(--line);
  font-family:var(--ff-d);font-variation-settings:"wdth" 102,"wght" 600;
  font-size:15px;letter-spacing:-.005em;cursor:pointer;
  color:var(--cream);background:var(--btn-bg);
  position:relative;overflow:hidden;isolation:isolate;
  transition:border-color .26s var(--ease-out),color .26s var(--ease-out),
             transform .16s var(--ease-out),box-shadow .3s var(--ease-out);
  -webkit-tap-highlight-color:transparent;
  will-change:transform;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120px 60px at var(--mx,50%) var(--my,50%),
             oklch(98% .03 218 / .16),transparent 70%);
  opacity:0;transition:opacity .3s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .btn:hover::before{opacity:1}
  .btn:hover{border-color:var(--beam-dim)}
}
.btn:active{transform:scale(.97)}

.btn-p{
  background:var(--beam);color:oklch(15% .02 240);border-color:var(--beam);
  font-variation-settings:"wdth" 102,"wght" 700;
}
.btn-p::before{background:radial-gradient(120px 60px at var(--mx,50%) var(--my,50%),
             oklch(100% 0 0 / .5),transparent 70%)}
@media (hover:hover) and (pointer:fine){
  .btn-p:hover{box-shadow:0 6px 34px oklch(90% .075 218 / .3);border-color:var(--beam)}
}
.btn-g{background:transparent;border-color:var(--line)}
.btn-sm{padding:10px 18px;font-size:14px}
.btn-voll{width:100%}

/* ------------------------------------------------------------ 06 Hero -- */
.hero{
  min-height:min(94svh,880px);
  display:flex;align-items:flex-end;
  padding-top:calc(var(--kopf) + 40px);
  padding-bottom:clamp(40px,6vw,80px);
  overflow:hidden;
}
.hero.klein{min-height:auto;padding-top:calc(var(--kopf) + clamp(56px,8vw,100px));
            padding-bottom:clamp(24px,4vw,44px);align-items:flex-start}

/* Das Fahrzeug liegt hinter dem Text, tief abgedunkelt. Die Leuchte darueber
   holt es hervor. Kein Bild als Dekoration, sondern als Motiv. */
.hero-bild{
  position:absolute;inset:0;z-index:0;overflow:hidden;
}
.hero-bild img{
  width:100%;height:100%;object-fit:cover;object-position:center 58%;
  filter:brightness(.62) contrast(1.1) saturate(.8);
  transform:scale(1.06) translate3d(0,var(--par,0px),0);
  will-change:transform;
}
.hero-bild::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, oklch(12.5% .014 248 / .72) 0%, oklch(12.5% .014 248 / .2) 34%,
                    oklch(12.5% .014 248 / .72) 74%, var(--hall-0) 100%),
    linear-gradient(90deg, oklch(12.5% .014 248 / .94) 0%, oklch(12.5% .014 248 / .55) 42%,
                    transparent 74%);
}
/* Die eigentliche Leuchte. Wird per Zeiger und per Zeit bewegt. */
.hero-leuchte{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(58vw 34vh at var(--lx,58%) var(--ly,42%),
             oklch(96% .05 218 / .16), oklch(90% .075 218 / .05) 42%, transparent 66%);
  transition:background .18s linear;
}
.hero .wrap{position:relative;z-index:2}

.hero h1{margin-bottom:22px;max-width:15ch}
.hero .lede{max-width:56ch;margin-bottom:32px}
.hero-akt{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:clamp(34px,5vw,54px)}

/* Statt vier Kennzahlkaesten: eine einzige Zeile wie aus dem Pruefprotokoll. */
.protokoll{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;
  padding-top:20px;border-top:1px solid var(--line-soft);
  font-family:var(--ff-m);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);
}
.protokoll > span{display:inline-flex;align-items:center;gap:9px;padding-block:5px}
.protokoll > span::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--beam);box-shadow:0 0 8px var(--beam);flex:none;
}
.protokoll b{color:var(--cream);font-variation-settings:"wdth" 100,"wght" 500;
             font-family:var(--ff-m);letter-spacing:.06em}

/* Ein leiser Hinweis, dass es weitergeht. */
.runter{
  position:absolute;left:50%;bottom:18px;z-index:3;
  width:1px;height:44px;overflow:hidden;
  background:var(--line);
}
.runter::after{
  content:"";position:absolute;inset:0;background:var(--beam);
  animation:tropf 2.4s var(--ease-in-out) infinite;
}
@keyframes tropf{
  0%{transform:translateY(-100%)}
  60%,100%{transform:translateY(100%)}
}

/* --------------------------------- 07 Flaechen, Karten, Paneele -------- */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.karte{
  background:var(--hall-1);
  border:1px solid var(--line-soft);
  border-radius:var(--r);
  padding:26px 26px 24px;
  position:relative;overflow:hidden;
  transition:border-color .34s var(--ease-out),background .34s var(--ease-out),
             transform .34s var(--ease-out);
}
.karte h3{margin-bottom:9px}
.karte p{font-size:15.5px;color:var(--muted);margin-bottom:0}
@media (hover:hover) and (pointer:fine){
  .karte:hover{border-color:var(--line);background:var(--hall-2)}
}
.karte .num{
  display:block;font-family:var(--ff-m);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--beam-dim);
  margin-bottom:14px;
}
.meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.karte .meta{padding-top:16px;border-top:1px solid var(--line-soft)}
.meta span{
  font-family:var(--ff-m);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);
  border:1px solid var(--line-soft);border-radius:999px;padding:4px 10px;
  white-space:nowrap;
}
.meta b{color:var(--cream);font-family:var(--ff-m);font-weight:500}

.panel{
  background:var(--hall-1);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:clamp(26px,3.4vw,42px);
  position:relative;overflow:hidden;
}
/* Akzentpaneele bekommen einen Lichtschein von oben, keinen Streifen an der
   Seite. Ein Farbbalken links waere genau der Reflex, den wir vermeiden. */
.panel-beam{
  background:
    radial-gradient(90% 130% at 12% -20%, oklch(35% .05 222 / .5), transparent 62%),
    var(--hall-1);
  border-color:oklch(34% .035 225);
}
.panel-kupfer{
  background:
    radial-gradient(90% 130% at 12% -20%, oklch(34% .06 52 / .42), transparent 62%),
    var(--hall-1);
  border-color:oklch(34% .045 55);
}

/* Die Weiche: zwei grosse Bildflaechen, kein Kartenraster. */
.weiche{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.weiche a{
  position:relative;display:block;border-radius:var(--r);overflow:hidden;
  min-height:clamp(300px,38vw,420px);
  border:1px solid var(--line-soft);
  isolation:isolate;
}
.weiche img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.52) saturate(.8);
  transform:scale(1.02);
  transition:transform .9s var(--ease-out),filter .6s var(--ease-out);
  z-index:0;
}
.weiche a::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 22%,oklch(12.5% .014 248 / .88) 88%);
}
.weiche .inh{
  position:absolute;inset:auto 0 0 0;z-index:2;padding:clamp(22px,2.6vw,32px);
}
.weiche h2{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;
           font-variation-settings:"wdth" 110,"wght" 700;margin-bottom:8px}
.weiche p{font-size:15px;color:var(--muted);max-width:40ch;margin-bottom:16px}
.weiche .go{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ff-m);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--beam);
}
.weiche .go::after{
  content:"";width:22px;height:1px;background:var(--beam);
  box-shadow:0 0 8px var(--beam);
  transition:width .38s var(--ease-out);
}
.weiche .kupfer .go{color:var(--copper)}
.weiche .kupfer .go::after{background:var(--copper);box-shadow:0 0 8px var(--copper)}
@media (hover:hover) and (pointer:fine){
  .weiche a:hover img{transform:scale(1.07);filter:brightness(.62) saturate(.95)}
  .weiche a:hover .go::after{width:44px}
  .weiche a:hover{border-color:var(--line)}
}

/* --------------------------------------- 08 Leistungsverzeichnis ------- */
/* Bewusst kein Kartenraster: eine Liste, die sich wie ein Verzeichnis liest
   und beim Ueberfahren vom Licht gestreift wird. */
.verz{border-top:1px solid var(--line-soft)}
.verz-zeile{
  display:grid;grid-template-columns:78px 1fr minmax(0,42ch);
  gap:clamp(16px,3vw,40px);align-items:start;
  padding:clamp(22px,2.6vw,32px) 0;
  border-bottom:1px solid var(--line-soft);
  position:relative;overflow:hidden;
  transition:background .4s var(--ease-out);
}
.verz-zeile::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 40%,oklch(98% .03 218 / .07) 50%,transparent 60%);
  transform:translate3d(-130%,0,0);
  transition:transform .95s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .verz-zeile:hover{background:oklch(20% .018 248 / .55)}
  .verz-zeile:hover::before{transform:translate3d(130%,0,0)}
  .verz-zeile:hover .verz-nr{color:var(--beam)}
}
.verz-nr{
  font-family:var(--ff-m);font-size:12px;letter-spacing:.16em;
  color:var(--faint);padding-top:6px;
  transition:color .34s var(--ease-out);
}
.verz-zeile h3{font-size:clamp(21px,2.5vw,30px);
               font-variation-settings:"wdth" 108,"wght" 650;margin-bottom:10px}
.verz-zeile .meta{border:0;padding:0;margin-top:14px}
.verz-txt p{font-size:15.5px;color:var(--muted)}

/* Ausfuehrliche Leistungsbloecke mit Bild, abwechselnd ausgerichtet. */
.block{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,58px);
  align-items:center;padding-block:clamp(34px,5vw,64px);
  border-bottom:1px solid var(--line-soft);
}
.block:last-child{border-bottom:0}
.block:nth-child(even) .block-bild{order:-1}
.block-bild{
  border-radius:var(--r);overflow:hidden;position:relative;
  aspect-ratio:4/3;border:1px solid var(--line-soft);
}
.block-bild img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.86) saturate(.94);
  transition:transform 1.1s var(--ease-out),filter .6s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .block-bild:hover img{transform:scale(1.05);filter:brightness(1) saturate(1.06)}
}

/* ------------------------------- 09 Wandlung matt zu glanz ------------- */
/* Der Kern der Seite. Beim Scrollen faehrt die Leuchte ueber die Flanke des
   Fahrzeugs. Links matt und stumpf, rechts Tiefenglanz. Der Wert --p kommt
   aus dem Scroll-Motor und liegt zwischen 0 und 1. */
.wandel{position:relative;height:230svh}
.wandel-buehne{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center;
}
.wandel-bild{position:absolute;inset:0}
.wandel-bild img{
  width:100%;height:100%;object-fit:cover;object-position:center 55%;
}
/* Die matte Fassung liegt oben und wird vom Licht weggewischt. */
.wandel-matt{
  position:absolute;inset:0;
  filter:saturate(.06) brightness(.4) contrast(.66) blur(2.4px);
  clip-path:inset(0 0 0 calc(var(--p,0) * 100%));
}
.wandel-glanz{
  filter:saturate(1.24) brightness(1.02) contrast(1.24);
}
/* Die Leuchte selbst, exakt an der Kante zwischen matt und glanz. */
.wandel-kante{
  position:absolute;top:0;bottom:0;width:min(30vw,340px);
  left:calc(var(--p,0) * 100%);transform:translateX(-50%);
  pointer-events:none;
  background:linear-gradient(90deg,transparent,
             oklch(96% .05 218 / .13) 42%, oklch(99% .02 218 / .3) 50%,
             oklch(96% .05 218 / .13) 58%,transparent);
}
.wandel-kante::after{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:1.5px;
  background:var(--beam-hot);box-shadow:0 0 22px 4px var(--beam);
  transform:translateX(-50%);
}
.wandel-buehne::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--hall-0) 0%, oklch(12.5% .014 248 / .96) 24%,
             oklch(12.5% .014 248 / .62) 46%, oklch(12.5% .014 248 / .18) 64%,
             transparent 78%),
             linear-gradient(180deg,oklch(12.5% .014 248 / .82),transparent 24%,
             transparent 70%,oklch(12.5% .014 248 / .9));
}
.wandel-txt{
  position:relative;z-index:3;max-width:46ch;
}
.wandel-txt h2{margin-bottom:18px}
/* Die beiden Zustandsworte tauschen sich mit dem Fortschritt. */
.zustand{
  display:inline-flex;gap:14px;align-items:center;margin-bottom:22px;
  font-family:var(--ff-m);font-size:12.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
}
.zustand i{font-style:normal;transition:color .4s var(--ease-out),opacity .4s var(--ease-out)}
.zustand .z-a{color:var(--cream);opacity:calc(1 - var(--p,0) * .68)}
.zustand .z-b{color:var(--beam);opacity:calc(.3 + var(--p,0) * .7);
               text-shadow:0 0 18px oklch(90% .075 218 / .5)}
.zustand em{width:34px;height:1px;background:var(--line);font-style:normal;flex:none}

/* ------------------------------------ 10 Vorher und Nachher ------------ */
.ba{
  position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line-soft);
  touch-action:pan-y;cursor:ew-resize;user-select:none;
  --pos:50%;
  background:var(--hall-2);
}
.ba img{
  width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none;-webkit-user-drag:none;
}
.ba-a,.ba-b{position:absolute;inset:0}
.ba-b{clip-path:inset(0 0 0 var(--pos))}
.ba-mass{width:100%;display:block;visibility:hidden}
.ba-griff{
  position:absolute;top:0;bottom:0;left:var(--pos);width:2px;
  background:var(--beam-hot);box-shadow:0 0 18px 2px var(--beam);
  transform:translateX(-1px);pointer-events:none;
}
.ba-griff::after{
  content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:oklch(12.5% .014 248 / .72);border:1.5px solid var(--beam);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 0 24px oklch(90% .075 218 / .35);
}
.ba-griff::before{
  content:"";position:absolute;top:50%;left:50%;z-index:2;
  width:15px;height:9px;transform:translate(-50%,-50%);
  background:
    linear-gradient(var(--beam),var(--beam)) 0 50%/2px 9px no-repeat,
    linear-gradient(var(--beam),var(--beam)) 100% 50%/2px 9px no-repeat;
  opacity:.9;
}
.ba-tag{
  position:absolute;top:14px;z-index:2;
  font-family:var(--ff-m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;
  background:oklch(12.5% .014 248 / .78);border:1px solid var(--line);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:opacity .3s var(--ease-out);
}
.ba-tag i{font-style:normal}
.ba-tag b{display:none;font-family:var(--ff-m);font-weight:500;color:inherit}
.ba-tag.l{left:14px;color:var(--faint)}
.ba-tag.r{right:14px;color:var(--beam);border-color:oklch(40% .05 222)}
.ba-hinweis{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;
  font-family:var(--ff-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);background:oklch(12.5% .014 248 / .78);
  border:1px solid var(--line);border-radius:999px;padding:6px 14px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:opacity .45s var(--ease-out);pointer-events:none;
}
.ba.benutzt .ba-hinweis{opacity:0}
.ba-bu{margin-top:14px;font-size:15px;color:var(--muted)}
.ba-bu b{display:block;color:var(--cream);font-size:16.5px;margin-bottom:4px;
         font-variation-settings:"wdth" 104,"wght" 600}

/* ------------------------------------- 11 Perl-Demonstration ----------- */
.perl{
  position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line-soft);aspect-ratio:4/3;
  background:var(--hall-2);cursor:crosshair;
}
.perl canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.perl-hinweis{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  font-family:var(--ff-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);pointer-events:none;
  transition:opacity .45s var(--ease-out);
}
.perl.benutzt .perl-hinweis{opacity:0}

/* --------------------------------------------------------- 12 Galerie -- */
/* Hoch- und Querformate behalten ihr Format. Nichts wird auf Quadrat
   beschnitten, sonst schneidet man Fahrzeugen die Daecher ab. */
.galerie{
  columns:4;column-gap:14px;
}
.galerie figure{
  margin:0 0 14px;break-inside:avoid;
  border-radius:var(--r-sm);overflow:hidden;position:relative;
  border:1px solid var(--line-soft);
  background:var(--hall-2);
}
.galerie img{
  width:100%;height:auto;display:block;
  filter:brightness(.88) saturate(.92);
  transition:transform .9s var(--ease-out),filter .5s var(--ease-out);
}
.galerie figcaption{
  position:absolute;inset:auto 0 0 0;padding:26px 14px 12px;
  font-family:var(--ff-m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream);
  background:linear-gradient(transparent,oklch(12.5% .014 248 / .9));
  opacity:0;transform:translate3d(0,8px,0);
  transition:opacity .34s var(--ease-out),transform .34s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .galerie figure:hover img{transform:scale(1.045);filter:brightness(1) saturate(1.05)}
  .galerie figure:hover figcaption{opacity:1;transform:none}
}
/* Ohne Zeiger ist die Beschriftung dauerhaft sichtbar, sonst waere sie weg. */
@media (hover:none){
  .galerie figcaption{opacity:1;transform:none}
}

/* Bilder blenden erst auf, wenn sie geladen sind. */
.aufblende{opacity:0;filter:blur(14px);transform:scale(1.03)}
.aufblende.da{
  opacity:1;filter:blur(0);transform:none;
  transition:opacity .8s var(--ease-out),filter .8s var(--ease-out),
             transform .8s var(--ease-out);
}

/* ---------------------- 13 Ablauf, Bewertungen, Tabelle ---------------- */
/* Die Einfuehrung neben einer langen Liste laeuft mit, sonst steht links
   eine Leerflaeche von mehreren hundert Pixeln. */
.beistand{position:sticky;top:calc(var(--kopf) + 44px);align-self:start}
@media (max-width:900px){.beistand{position:static}}

.ablauf{position:relative;padding-left:34px}
.ablauf::before{
  content:"";position:absolute;left:9px;top:12px;bottom:12px;width:1px;
  background:var(--line);
}
/* Das Licht faehrt die Linie entlang, waehrend man scrollt. */
.ablauf::after{
  content:"";position:absolute;left:9px;top:12px;width:1px;
  height:calc(var(--fort,0) * 100%);max-height:calc(100% - 24px);
  background:linear-gradient(var(--beam-dim),var(--beam-hot));
  box-shadow:0 0 12px var(--beam);
}
.schritt{position:relative;padding-bottom:32px}
.schritt:last-child{padding-bottom:0}
.schritt::before{
  content:"";position:absolute;left:-30px;top:9px;width:9px;height:9px;
  border-radius:50%;background:var(--hall-0);border:1.5px solid var(--line);
  transition:border-color .4s var(--ease-out),box-shadow .4s var(--ease-out),
             background .4s var(--ease-out);
}
.schritt.hell::before{
  background:var(--beam);border-color:var(--beam);
  box-shadow:0 0 14px var(--beam);
}
.schritt h3{margin-bottom:7px}
.schritt p{font-size:15.5px;color:var(--muted);max-width:64ch}
.schritt .tag{
  font-family:var(--ff-m);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--beam-dim);display:block;margin-bottom:6px;
}

/* Bewertungen versetzt, damit kein gleichfoermiges Raster entsteht. */
.stimmen{columns:3;column-gap:16px}
.stimme{
  break-inside:avoid;margin:0 0 16px;
  background:var(--hall-1);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:24px 24px 20px;
}
.stimme .sterne{color:var(--copper);letter-spacing:.18em;font-size:13px;margin-bottom:12px}
.stimme p{font-size:15.5px;color:var(--text);margin-bottom:14px;line-height:1.6}
.stimme cite{
  font-style:normal;font-family:var(--ff-m);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}

/* Preise als Leiste, nicht als Tabellengitter. */
.preise{border-top:1px solid var(--line-soft)}
.preis-zeile{
  display:grid;grid-template-columns:minmax(0,1.4fr) auto minmax(0,1fr);
  gap:clamp(14px,2.4vw,32px);align-items:baseline;
  padding:clamp(20px,2.4vw,28px) 0;border-bottom:1px solid var(--line-soft);
  position:relative;overflow:hidden;
  transition:background .4s var(--ease-out);
}
.preis-zeile::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 40%,oklch(98% .03 218 / .06) 50%,transparent 60%);
  transform:translate3d(-130%,0,0);transition:transform .95s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .preis-zeile:hover{background:oklch(20% .018 248 / .5)}
  .preis-zeile:hover::before{transform:translate3d(130%,0,0)}
}
.preis-name{font-family:var(--ff-d);font-variation-settings:"wdth" 106,"wght" 600;
            font-size:clamp(17px,1.9vw,21px);color:var(--cream)}
.preis-name small{
  display:block;font-family:var(--ff-m);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin-top:6px;
  font-variation-settings:normal;
}
.preis-wert{
  font-family:var(--ff-d);font-variation-settings:"wdth" 112,"wght" 700;
  font-size:clamp(19px,2.4vw,26px);color:var(--beam);white-space:nowrap;
  text-align:right;min-width:11ch;
}
.preis-inh{font-size:14.5px;color:var(--muted)}

/* Fragen als aufklappbare Zeilen statt als Kartenraster. */
.frage{border-bottom:1px solid var(--line-soft)}
.frage summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--ff-d);font-variation-settings:"wdth" 106,"wght" 600;
  font-size:clamp(17px,2vw,21px);color:var(--cream);
  transition:color .24s var(--ease-out);
}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{
  content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
  transform:translateY(-50%);
  background:
    linear-gradient(var(--beam),var(--beam)) 50% 0/1.5px 13px no-repeat,
    linear-gradient(var(--beam),var(--beam)) 0 50%/13px 1.5px no-repeat;
  transition:transform .38s var(--ease-out);
}
.frage[open] summary::after{transform:translateY(-50%) rotate(135deg)}
.frage .inh{padding-bottom:24px;max-width:70ch}
.frage .inh p{font-size:15.5px;color:var(--muted);margin-bottom:0}
.frage[open] .inh{animation:auf .42s var(--ease-out)}
@keyframes auf{from{opacity:0;transform:translate3d(0,-8px,0)}}

/* -------------------------------------- 14 Anfrage-Assistent ----------- */
/* Die Fragen sind die Gliederung der Kontaktseite, tragen also h2. Optisch
   bleiben sie so gross wie zuvor, sonst sprengen sie das Paneel. */
.wiz-step h2{font-size:20px;font-variation-settings:"wdth" 104,"wght" 600;
             letter-spacing:-.015em;line-height:1.22}
.recht-titel{font-size:20px;font-variation-settings:"wdth" 104,"wght" 600;
             letter-spacing:-.015em;margin-bottom:10px}
.wiz-bar{display:flex;gap:6px;margin-bottom:26px}
.wiz-bar i{
  height:2px;flex:1;background:var(--line);border-radius:2px;position:relative;
  overflow:hidden;
}
.wiz-bar i::after{
  content:"";position:absolute;inset:0;background:var(--beam);
  box-shadow:0 0 10px var(--beam);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s var(--ease-out);
}
.wiz-bar i.on::after{transform:scaleX(1)}

.wiz-step{display:none}
.wiz-step.on{display:block;animation:wizrein .46s var(--ease-out)}
@keyframes wizrein{from{opacity:0;transform:translate3d(14px,0,0)}}
.wiz-step.rueck{animation:wizrueck .46s var(--ease-out)}
@keyframes wizrueck{from{opacity:0;transform:translate3d(-14px,0,0)}}

.opts{display:grid;gap:9px}
.opt{
  display:block;position:relative;cursor:pointer;
  border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:15px 17px;background:var(--hall-0);
  transition:border-color .24s var(--ease-out),background .24s var(--ease-out),
             transform .16s var(--ease-out);
}
.opt:active{transform:scale(.99)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{
  display:block;font-size:15.5px;color:var(--text);padding-left:30px;position:relative;
}
.opt span::before{
  content:"";position:absolute;left:0;top:2px;width:17px;height:17px;
  border-radius:50%;border:1.5px solid var(--line);
  transition:border-color .24s var(--ease-out);
}
.opt span::after{
  content:"";position:absolute;left:4.5px;top:6.5px;width:8px;height:8px;
  border-radius:50%;background:var(--beam);box-shadow:0 0 10px var(--beam);
  transform:scale(0);
  transition:transform .3s var(--ease-out);
}
.opt small{
  display:block;font-size:13px;color:var(--faint);margin-top:3px;
  font-family:var(--ff-m);letter-spacing:.02em;
}
.opt:has(input:checked){border-color:oklch(40% .05 222);background:var(--hall-2)}
.opt:has(input:checked) span{color:var(--cream)}
.opt:has(input:checked) span::before{border-color:var(--beam)}
.opt:has(input:checked) span::after{transform:scale(1)}
@media (hover:hover) and (pointer:fine){
  .opt:hover{border-color:var(--line)}
}

.feld{margin-bottom:15px}
.feld label{
  display:block;font-family:var(--ff-m);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-bottom:8px;
}
.feld input,.feld textarea{
  width:100%;background:var(--hall-0);color:var(--cream);
  border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:13px 15px;font-family:var(--ff-d);font-size:16px;
  transition:border-color .24s var(--ease-out),box-shadow .24s var(--ease-out);
}
.feld textarea{min-height:96px;resize:vertical;line-height:1.5}
.feld input:focus,.feld textarea:focus{
  outline:none;border-color:var(--beam-dim);
  box-shadow:0 0 0 3px oklch(62% .07 222 / .16);
}
.feld input::placeholder,.feld textarea::placeholder{color:var(--faint)}

.wiz-nav{display:flex;gap:10px;margin-top:24px;padding-top:20px;
         border-top:1px solid var(--line-soft)}
.wiz-nav .btn{flex:1}
.wiz-nav .btn[hidden]{display:none}

.zusammen{
  background:var(--hall-0);border:1px solid var(--line-soft);
  border-radius:var(--r-sm);padding:16px 18px;margin-bottom:20px;
}
.zusammen-titel{
  font-family:var(--ff-m);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-bottom:11px;
  font-variation-settings:normal;
}
.zusammen .zeilen div{
  display:flex;justify-content:space-between;gap:14px;
  padding:6px 0;font-size:14.5px;border-bottom:1px solid var(--line-soft);
}
.zusammen .zeilen div:last-child{border-bottom:0}
.zusammen .zeilen span{color:var(--faint)}
.zusammen .zeilen b{color:var(--cream);text-align:right}

/* -------------------------------------------------------- 15 Fusszeile - */
footer{
  border-top:1px solid var(--line-soft);background:var(--hall-1);
  padding-block:clamp(44px,6vw,72px) 26px;
}
.f-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1.2fr;
  gap:clamp(24px,4vw,52px);margin-bottom:40px;
}
footer h3{
  font-family:var(--ff-m);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);margin-bottom:14px;
  font-variation-settings:normal;
}
footer p{font-size:15px;color:var(--muted)}
footer a{display:block;padding:5px 0;font-size:15px;color:var(--muted)}
footer a:hover{color:var(--cream)}
.f-bot{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:22px;border-top:1px solid var(--line-soft);
  font-family:var(--ff-m);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);
}

/* Der Anrufbalken erscheint auf dem Handy erst, wenn der Hero durch ist. */
.rufbalken{
  position:fixed;left:0;right:0;bottom:0;z-index:98;display:none;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:oklch(12.5% .014 248 / .93);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  transform:translate3d(0,110%,0);
  transition:transform .5s var(--ease-drawer);
}
.rufbalken.auf{transform:none}
.rufbalken .reihe{display:flex;gap:8px}
.rufbalken .btn{flex:1;padding:13px 14px;font-size:14.5px}

/* ------------------------------------------------------------ 16 Mobil - */
@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .galerie{columns:3}
  .stimmen{columns:2}
  .verz-zeile{grid-template-columns:56px 1fr;}
  .verz-txt{grid-column:2}
}
@media (max-width:900px){
  .wandel-buehne{align-items:flex-start;padding-top:calc(var(--kopf) + 26px)}
  .wandel-buehne::after{
    background:linear-gradient(180deg,oklch(12.5% .014 248 / .97) 0%,
               oklch(12.5% .014 248 / .93) 46%, oklch(12.5% .014 248 / .5) 66%,
               oklch(12.5% .014 248 / .82) 100%);
  }
  .wandel-kante{width:44vw}

  :root{--kopf:60px}
  .nav-links{display:none}
  .kopf-cta .btn:not(.keep){display:none}
  .burger{display:block}
  .g2,.g3,.weiche,.block{grid-template-columns:1fr}
  .block:nth-child(even) .block-bild{order:0}
  .f-grid{grid-template-columns:1fr;gap:32px}
  .hero{min-height:min(88svh,760px)}
  .wandel{height:200svh}
  .runter{display:none}
  .rufbalken{display:block}
  body{padding-bottom:0}
  footer{padding-bottom:calc(26px + 68px)}
}
@media (max-width:680px){
  body{font-size:16.5px}
  .galerie{columns:2}
  .stimmen{columns:1}
  .g4{grid-template-columns:1fr}
  .karte{padding:22px 20px}
  .hero-akt{flex-direction:column;align-items:stretch}
  .hero-akt .btn{width:100%}
  .protokoll{font-size:11px;gap:0 16px}
  .preis-zeile{grid-template-columns:1fr;gap:6px}
  .preis-wert{font-size:22px}
  .verz-zeile{grid-template-columns:34px 1fr;gap:4px 10px}
  .verz-nr{padding-top:5px;grid-row:1 / span 2}
  .verz-zeile > div:nth-child(2){grid-column:2}
  .verz-txt{grid-column:2}
  /* Auf schmalen Bildschirmen kollidieren die langen Beschriftungen.
     Dann steht nur noch Vorher und Nachher da, die Beschreibung liegt
     ohnehin direkt unter dem Bild. */
  .ba-tag{font-size:10px;padding:5px 11px}
  .ba-tag i{display:none}
  .ba-tag b{display:inline}
  .wandel-txt{max-width:none}
}

/* --------------------------- 17 Reduzierte Bewegung und Druck ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv{opacity:1;transform:none}
  .wort{clip-path:none;opacity:1}
  .wort::after{display:none}
  .hero-bild img{transform:scale(1.04)}
  .wandel{height:auto}
  .wandel-buehne{position:static;height:auto;min-height:70svh}
  .wandel-matt{display:none}
  .wandel-kante{display:none}
  .runter{display:none}
}

@media print{
  .kopf,.rufbalken,.schublade,.fortschritt,.runter,.hero-leuchte{display:none}
  body{background:#fff;color:#000}
  body::before,body::after{display:none}
  .rv,.wort{opacity:1;transform:none;clip-path:none}
}