@import url("./fonts.css");

:root{
  --blue:#0696F9; --blue-2:#7CD0FF; --navy:#0B3C86; --ok:#2ED573;
  --bg:#070D18; --bg-deep:#050A12; --card:#0E1929;
  --fg:#F2F6FC; --fg-2:rgba(242,246,252,.68); --fg-3:rgba(242,246,252,.42);
  --line:rgba(120,170,255,.14);
  --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{background:var(--bg);color:var(--fg);font-family:Inter,system-ui,sans-serif;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:"Archivo Narrow",Inter,sans-serif;font-weight:700;line-height:1.03;letter-spacing:-.01em}
img,svg{max-width:100%}
a{color:var(--blue)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.skip{position:absolute;left:-9999px}
.skip:focus{left:24px;top:12px;z-index:99;background:var(--blue);color:#04101F;padding:10px 18px;border-radius:6px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.grid-bg{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:100% 96px,96px 100%;
  -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 18%,transparent 72%);
  mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 18%,transparent 72%)}
main,header,footer{position:relative;z-index:1}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);background:rgba(7,13,24,.75);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px;gap:20px}
/* flex:none ist Pflicht: sonst schrumpft der Logo-Link mit und quetscht das
   SVG horizontal zusammen, waehrend die Hoehe stehen bleibt. */
.nav .brand{display:flex;align-items:center;flex:none}
.nav img{height:40px;width:auto;display:block;flex:none}
.nav nav{min-width:0}
.nav .cta{flex:none}
.nav ul{display:flex;gap:26px;list-style:none;flex-wrap:wrap;justify-content:flex-end}
.nav ul a{text-decoration:none;color:var(--fg-3);font-size:15px;font-weight:500;transition:color .2s;position:relative;padding-bottom:4px}
.nav ul a:hover{color:var(--fg-2)}
.nav ul a.active{color:var(--fg)}
.nav ul a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--blue);border-radius:2px}
.nav .cta{border:1px solid rgba(6,150,249,.55);color:var(--blue);padding:11px 20px;border-radius:6px;text-decoration:none;font-size:15px;font-weight:600;white-space:nowrap;transition:.2s}
.nav .cta:hover{background:var(--blue);color:#04101F}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:6px;padding:9px 11px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--fg);margin:4px 0;border-radius:2px}
/* Der Header-Button "Projekt besprechen" passt auf dem Telefon nicht neben Logo
   und Burger. Damit im Menue trotzdem ein Handlungsaufruf steht, gibt es diesen
   Eintrag - auf groesseren Bildschirmen waere er doppelt und bleibt ausgeblendet. */
.nur-mobil{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:16px 30px;border-radius:7px;text-decoration:none;font-size:16px;font-weight:600;transition:.2s;border:1px solid transparent;cursor:pointer;font-family:inherit}
.btn-p{background:var(--blue);color:#04101F}
.btn-p:hover{background:#3DB0FF}
.btn-p:disabled{opacity:.55;cursor:default}
.btn-s{border-color:rgba(242,246,252,.24);color:var(--fg)}
.btn-s:hover{border-color:var(--fg)}

/* ---------- hero ---------- */
.hero{position:relative;padding:96px 0 92px;overflow:hidden}
.hero .glow{position:absolute;top:-24%;right:-6%;width:900px;height:900px;border-radius:50%;
  background:radial-gradient(circle,rgba(6,150,249,.18) 0%,rgba(11,60,134,.08) 42%,transparent 68%);filter:blur(18px)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--blue);margin-bottom:30px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--blue)}
h1{font-size:clamp(44px,6.6vw,86px)}
h1 .dim{color:var(--fg-3);display:block}
.hero p{max-width:50ch;color:var(--fg-2);font-size:19px;margin-top:30px}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}

/* ---------- landing animation ----------
   Grundsatz: Der SICHTBARE Endzustand steht in den Basisregeln, der versteckte
   Startzustand nur in den Keyframes (animation-fill-mode: backwards). Laeuft die
   Animation nicht - abgeschaltet, gedrosselt, alter Browser - ist die Grafik
   trotzdem vollstaendig da. Umgekehrt (opacity:0 als Basis) bliebe sie leer. */
.scene{width:100%;height:auto;overflow:visible}
.scene .float{animation:float 8s ease-in-out infinite 5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.layer{fill:rgba(6,150,249,.05);stroke:var(--blue);stroke-width:1.5;animation:stack 1s cubic-bezier(.16,1,.3,1) backwards}
.layer.l1{animation-delay:.15s}
.layer.l2{animation-delay:.35s;stroke-opacity:.7}
.layer.l3{animation-delay:.55s;stroke-opacity:.45}
@keyframes stack{from{opacity:0;transform:translateY(52px)}to{opacity:1;transform:translateY(0)}}

.massif{animation:rise 1.3s cubic-bezier(.16,1,.3,1) .95s backwards}
@keyframes rise{from{opacity:0;transform:translateY(44px)}to{opacity:1;transform:translateY(0)}}

.shard{animation:show .7s ease-out backwards}
.shard:nth-of-type(1){animation-delay:1.5s}.shard:nth-of-type(2){animation-delay:1.62s}
.shard:nth-of-type(3){animation-delay:1.74s}.shard:nth-of-type(4){animation-delay:1.86s}
.shard:nth-of-type(5){animation-delay:1.98s}.shard:nth-of-type(6){animation-delay:2.1s}
@keyframes show{from{opacity:0}to{opacity:1}}

.seam{stroke:rgba(124,208,255,.22);stroke-width:1;fill:none;animation:show .8s ease-out 2.2s backwards}

.ridge{stroke:var(--blue);stroke-width:2.8;fill:none;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:1000;stroke-dashoffset:0;animation:drawRidge 1.7s cubic-bezier(.5,0,.2,1) .5s backwards;
  filter:drop-shadow(0 0 12px rgba(6,150,249,.6))}
@keyframes drawRidge{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}

.trace{stroke:var(--blue);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:0;
  animation:drawTrace 1s ease-out 1.7s backwards}
@keyframes drawTrace{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}

.pulse{stroke:var(--blue-2);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-dasharray:5 190;
  animation:show .01s linear 2.7s backwards, run 2.8s linear 2.7s infinite}
@keyframes run{from{stroke-dashoffset:195}to{stroke-dashoffset:0}}

.node{fill:#070D18;stroke:var(--blue);stroke-width:2.2;transform-box:fill-box;transform-origin:center;
  animation:pop .5s cubic-bezier(.34,1.56,.64,1) backwards}
.node:nth-of-type(1){animation-delay:2s}.node:nth-of-type(2){animation-delay:2.1s}
.node:nth-of-type(3){animation-delay:2.2s}.node:nth-of-type(4){animation-delay:2.3s}
.node:nth-of-type(5){animation-delay:2.4s}
@keyframes pop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}

.climber{fill:var(--blue-2);offset-distance:47.5%;
  offset-path:path("M60 350 L175 198 L243 266 L340 105 L487 266 L556 198 L700 350");
  filter:drop-shadow(0 0 8px rgba(124,208,255,.9));
  animation:show .3s linear 1.9s backwards, climb 1.9s cubic-bezier(.4,0,.3,1) 1.9s backwards}
@keyframes climb{from{offset-distance:0%}to{offset-distance:47.5%}}

.summit-flare{opacity:.55;animation:flare 1.6s ease-out 3.7s backwards}
@keyframes flare{0%{opacity:0;transform:scale(.4)}40%{opacity:1}100%{opacity:.55;transform:scale(1)}}

.link-up{stroke:var(--blue);stroke-width:1.4;stroke-dasharray:120;stroke-dashoffset:0;opacity:.6;
  animation:drawLink .5s ease-out 3.7s backwards}
@keyframes drawLink{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}

.panel{transform-box:fill-box;transform-origin:left center;
  animation:panelIn .7s cubic-bezier(.16,1,.3,1) 3.85s backwards}
@keyframes panelIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

.pline{animation:show .35s ease-out backwards}
.pline.p1{animation-delay:4.35s}.pline.p2{animation-delay:4.55s}.pline.p3{animation-delay:4.75s}
.dot-ok{fill:var(--ok);animation:beat 2s ease-in-out infinite 5s}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.35}}
.caret{fill:var(--blue-2);opacity:0;animation:blink 1.1s steps(1) 5s infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.ptxt{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:15px;fill:var(--fg-2)}
.ptxt.head{fill:var(--blue);font-size:13px;letter-spacing:.14em}
.ptxt.val{fill:var(--fg)}

/* ---------- sections ---------- */
section{padding:110px 0;position:relative;scroll-margin-top:88px}
.sec-head{display:grid;grid-template-columns:200px 1fr;gap:40px;margin-bottom:60px;align-items:start}
.sec-head .mono{color:var(--blue);padding-top:12px}
h2{font-size:clamp(31px,4vw,50px);max-width:20ch}
.sec-head p{color:var(--fg-2);max-width:58ch;margin-top:18px}

/* Eckdaten als Datenblatt-Zeile, nicht als Kennzahlen-Kacheln.
   Vorher standen "14+", "iSAQB", "4-6" und "DACH" alle im selben 50-px-Layout
   mit Farbverlauf - aber nur eines davon ist eine Zahl. Ein Zertifikatsname und
   eine Region in Grosszahlen-Optik lesen sich wie unausgefuellte Platzhalter.
   Jetzt tragen alle vier dieselbe Struktur: Bezeichnung oben, Wert darunter. */
.facts{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts > div{padding:26px 24px;border-right:1px solid var(--line)}
.facts > div:first-child{padding-left:0}
.facts > div:last-child{border-right:0}
.facts dt{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.facts dd{font-family:"Archivo Narrow",Inter,sans-serif;font-weight:700;font-size:29px;
  line-height:1.05;color:var(--fg)}

.rows{border-top:1px solid var(--line)}
.row-item{display:grid;grid-template-columns:110px 1fr 1.1fr;gap:36px;padding:40px 0;border-bottom:1px solid var(--line);transition:background .25s}
.row-item:hover{background:rgba(6,150,249,.04)}
.row-item .idx{font-family:"Archivo Narrow",sans-serif;font-size:56px;font-weight:700;line-height:.9;color:transparent;-webkit-text-stroke:1px rgba(6,150,249,.55)}
.row-item h3{font-size:26px}
.row-item p{color:var(--fg-2);font-size:17px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cardx{background:var(--bg);padding:36px 30px;transition:background .25s}
.cardx:hover{background:var(--card)}
.cardx .mono{color:var(--blue);display:block;margin-bottom:20px}
.cardx h3{font-size:24px;margin-bottom:12px}
.cardx p{color:var(--fg-2);font-size:16.5px}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.step{border-top:2px solid var(--blue);padding-top:22px}
.step .mono{color:var(--blue);display:block;margin-bottom:14px}
.step h3{font-size:20px;margin-bottom:9px}
.step p{color:var(--fg-2);font-size:16px}

.proj{border:1px solid var(--line);background:linear-gradient(160deg,rgba(11,60,134,.24),rgba(14,25,41,.55));
  padding:40px 36px;margin-bottom:20px;transition:border-color .25s}
.proj:hover{border-color:rgba(6,150,249,.4)}
.proj .mono{color:var(--blue)}
.proj h3{font-size:clamp(24px,2.8vw,32px);margin:14px 0 16px;max-width:26ch}
.proj p{color:var(--fg-2);max-width:74ch;font-size:17px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;list-style:none}
.chip{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12.5px;color:var(--fg-2);border:1px solid var(--line);padding:5px 11px;border-radius:5px;background:rgba(7,13,24,.6)}

.skills{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:34px}
.skill{background:var(--bg);padding:30px}
.skill h3{color:var(--blue);font-size:20px;margin-bottom:16px}
.skill dt{color:var(--fg-3);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-family:"JetBrains Mono",ui-monospace,monospace;margin-top:14px}
.skill dd{color:var(--fg-2);font-size:16.5px;margin-top:4px}
.factgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fact{border-left:2px solid var(--blue);padding:4px 0 4px 18px}
.fact .k{color:var(--fg-3);font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-family:"JetBrains Mono",ui-monospace,monospace}
.fact .v{margin-top:5px;font-size:17px}

.about{display:grid;grid-template-columns:320px 1fr;gap:56px;align-items:start}
.portrait{position:relative}
/* height:auto ist Pflicht, sobald das <img> width/height als Attribute traegt:
   Sonst gilt die Breite aus dem Stylesheet und die Hoehe aus dem Attribut, und
   das Bild wird verzerrt (gemessen: 290x800 statt 290x387). */
.portrait img{width:100%;height:auto;border-radius:10px;display:block;filter:grayscale(.35) contrast(1.05)}
/* Rahmen mit gleichmaessigem Abstand von 16 px auf allen vier Seiten.
   Zwei Anlaeufe waren vorher daneben: erst gemischte Werte (-14 oben/rechts,
   +26 unten/links), wodurch die halbe Umrandung hinter dem Foto verschwand,
   dann ein Versatz von 22 zu 10 px, der zu klein war um als Gestaltung zu
   wirken und zu gross um sauber auszusehen - er las sich schlicht verrutscht.
   Der Radius betraegt 26 px = 10 px Bildradius + 16 px Abstand. Nur so laufen
   die Rundungen von Bild und Rahmen parallel; bei gleichem Radius wirken die
   Ecken zusammengedrueckt. */
.portrait::before{content:"";position:absolute;inset:-16px;
  border:1px solid rgba(6,150,249,.42);border-radius:26px;z-index:-1}
.about p{color:var(--fg-2);margin-bottom:18px}
.about .sig{font-family:"Archivo Narrow",sans-serif;font-size:26px;font-weight:700;margin-bottom:24px}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:start}
.field{margin-bottom:18px}
.field label{display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;background:var(--card);border:1px solid var(--line);border-radius:7px;
  padding:14px 16px;color:var(--fg);font-family:Inter,sans-serif;font-size:16px;transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue)}
.field textarea{resize:vertical;min-height:130px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hp{position:absolute;left:-9999px}
.consent{display:flex;gap:12px;align-items:flex-start;margin:20px 0 24px;font-size:15px;color:var(--fg-2)}
.consent input{margin-top:4px;accent-color:var(--blue);width:17px;height:17px;flex:none}
.consent label{font:inherit;letter-spacing:0;text-transform:none;color:inherit;margin:0;display:inline}
.formnote{margin-top:16px;font-size:15px;padding:14px 16px;border-radius:7px;display:none}
.formnote.ok{display:block;background:rgba(46,213,115,.1);border:1px solid rgba(46,213,115,.4);color:#B9F3D0}
.formnote.err{display:block;background:rgba(255,90,90,.1);border:1px solid rgba(255,90,90,.4);color:#FFC9C9}
.cbox{border:1px solid var(--line);background:rgba(14,25,41,.5);border-radius:10px;padding:28px}
.cbox h3{font-size:20px;margin-bottom:18px}
.cbox a,.cbox span{display:block;color:var(--fg-2);text-decoration:none;margin-bottom:11px;font-size:16px;word-break:break-word}
.cbox a:hover{color:var(--blue)}
.avail{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);color:var(--fg-3);font-size:15px}
.avail .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:9px;box-shadow:0 0 0 4px rgba(46,213,115,.16)}

/* ---------- inner pages ---------- */
.page-head{padding:76px 0 44px;border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(38px,5vw,64px);margin-top:14px}
.page-head p{color:var(--fg-2);max-width:62ch;margin-top:20px}
.prose{padding:64px 0 96px;max-width:78ch}
.prose h2{font-size:28px;margin:44px 0 14px;max-width:none}
.prose h3{font-size:20px;margin:28px 0 10px}
.prose p,.prose li{color:var(--fg-2);margin-bottom:14px}
.prose ul{padding-left:22px;margin-bottom:18px}
.prose strong{color:var(--fg)}
.prose address{font-style:normal;color:var(--fg-2);margin-bottom:20px;line-height:1.8}
.todo{background:rgba(255,193,7,.08);border:1px solid rgba(255,193,7,.35);border-radius:8px;padding:16px 20px;color:#FFE08A;margin:18px 0}
.tbl{width:100%;border-collapse:collapse;margin:18px 0 30px}
.tbl th,.tbl td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);font-size:16px;vertical-align:top}
.tbl th{color:var(--fg-3);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.tbl td{color:var(--fg-2)}
.tbl td strong{color:var(--fg)}
.tblwrap{overflow-x:auto}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--bg-deep);padding:56px 0 26px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px}
footer img{height:40px;width:auto;margin-bottom:16px}
footer .claim{color:var(--fg-3);font-size:14px;line-height:1.55}
footer h2{color:var(--blue);margin-bottom:14px;font-size:12px;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
footer a,footer span{display:block;color:var(--fg-2);text-decoration:none;font-size:15px;margin-bottom:9px}
footer a:hover{color:var(--fg)}
.fbot{border-top:1px solid var(--line);margin-top:42px;padding-top:20px;color:var(--fg-3);font-size:14px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media(max-width:1023px){
  .hero-grid{grid-template-columns:1fr;gap:14px}
  /* Animation vor den Text. Stand sie darunter, begann sie auf einem 812 px
     hohen Telefon erst bei 852 px - also unterhalb des ersten Bildschirms, und
     kaum jemand scrollt am ganzen Hero-Text vorbei, um sie zu finden.
     Hoehe statt Breite begrenzt: Sonst wuerde das quadratische Motiv den
     halben Bildschirm fuellen und die Ueberschrift verdraengen. */
  .scene{order:-1;height:300px;width:auto;max-width:100%;margin:0 auto 6px}
  .sec-head{grid-template-columns:1fr;gap:14px}.sec-head .mono{padding-top:0}
  .facts{grid-template-columns:repeat(2,1fr)}
  .facts > div{padding:22px 20px}
  .facts > div:nth-child(2n){border-right:0}
  .facts > div:nth-child(odd){padding-left:0}
  .facts > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .cards,.steps,.skills{grid-template-columns:repeat(2,1fr)}
  .contact{grid-template-columns:1fr;gap:34px}
  .factgrid{grid-template-columns:1fr 1fr}
  .about{grid-template-columns:1fr;gap:32px}.portrait{max-width:290px}
  .row-item{grid-template-columns:66px 1fr;gap:22px}.row-item p{grid-column:2}
}
@media(max-width:767px){
  body{font-size:17px}
  section{padding:70px 0}
  .hero{padding:40px 0 60px}
  /* Auf dem Telefon flacher, damit Animation, Kicker und Ueberschrift gemeinsam
     auf den ersten Bildschirm passen. */
  .scene{height:230px;margin-bottom:2px}
  /* Das leere <nav> bleibt Flex-Item und wuerde bei space-between Platz beanspruchen -
     deshalb linksbuendig verteilen und den Burger per auto-Margin nach rechts ziehen. */
  .nav{justify-content:flex-start}
  .burger{display:block;margin-left:auto;order:3}
  .nav nav{position:static}
  .nav ul{position:absolute;top:80px;left:0;right:0;flex-direction:column;gap:0;background:var(--bg);
    border-bottom:1px solid var(--line);padding:8px 24px 18px;display:none}
  .nav ul.open{display:flex}
  .nav ul a{padding:13px 0;font-size:17px;display:block}
  .nav ul a.active::after{display:none}
  .nav .cta{display:none}
  .nur-mobil{display:block;margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
  .nur-mobil a{color:var(--blue)!important;font-weight:600}
  .cards,.steps,.skills,.factgrid,.two,.fgrid{grid-template-columns:1fr}
  .row-item{grid-template-columns:48px 1fr;gap:16px;padding:30px 0}
  .row-item .idx{font-size:36px}
  .proj{padding:28px 22px}
  .prose{padding:44px 0 70px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Animationen einfach abschalten - die Basisregeln zeigen bereits den
     vollstaendigen Endzustand, es muss nichts zurueckgesetzt werden. */
  .scene *{animation:none!important}
}