/* ═══════════════════════════════════════════════════════════
   VLEAK SOLUTIONS e.U. — Dark Technical
   ═══════════════════════════════════════════════════════════ */

/* ═══ SCHRIFTEN — lokal eingebunden ═════════════════════════
   Space Grotesk und JetBrains Mono liegen unter /fonts und werden
   NICHT von Google-Servern geladen. Dadurch wird beim Seitenaufruf
   keine IP-Adresse an Google uebertragen (DSGVO).
   Beide Schriften stehen unter der SIL Open Font License 1.1,
   siehe fonts/OFL-SpaceGrotesk.txt und fonts/OFL-JetBrainsMono.txt.
   ═══════════════════════════════════════════════════════════ */

@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/JetBrainsMono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/JetBrainsMono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/JetBrainsMono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/JetBrainsMono-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/SpaceGrotesk-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/SpaceGrotesk-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/SpaceGrotesk-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/SpaceGrotesk-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/SpaceGrotesk-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/SpaceGrotesk-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/SpaceGrotesk-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/SpaceGrotesk-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  /* Grund */
  --bg:          #070B0E;
  --surface:     #0D1216;
  --surface-2:   #111920;
  --line:        #1C252B;
  --line-bright: #2A3740;

  /* Text */
  --text:        #E8EDF0;
  --text-dim:    #7C8B96;
  --text-faint:  #7C8B96;

  /* Akzent — sparsam: Linien, Rahmen, Terminal, Status */
  --accent:      #00E5FF;
  --accent-dim:  rgba(0,229,255,.14);
  --ok:          #00FF9C;
  --err:         #FF4D4D;

  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  --ease:        cubic-bezier(.16,1,.3,1);
  --nav-h:       68px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; border-radius:0; }

/* clip statt hidden: hidden würde einen Scroll-Container erzeugen und damit
   position:sticky (Leistungs-Szene) brechen — clip tut das nicht.
   Fängt den Rest-Überlauf der seitlichen Einblend-Transformationen ab.
   Ältere Safari-Versionen (< 16) kennen clip nicht und ignorieren die Zeile. */
/* Bewusst KEIN scroll-behavior:smooth: Das Scrollen wird in app.js selbst
   animiert. Beides zusammen behindert sich — jeder einzelne Animationsschritt
   löste sonst seinerseits eine Sanft-Scroll-Animation aus. */
html{ overflow-x:clip; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-display);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* Notbruch für überlange Wörter. Greift nur, wenn ein Wort sonst
     die Zeile sprengen würde — deutsche Komposita wie
     „Dienstleistungsdatenschutzbestimmungen" tun das auf Mobilgeräten. */
  overflow-wrap:break-word;
}

/* Grundraster — statisch, nie animiert */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 120% 80% at 50% 0%, #000 20%, transparent 75%);
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:none; cursor:pointer; }
::selection{ background:var(--accent); color:var(--bg); }

.container{ width:100%; max-width:1280px; margin:0 auto; padding:0 32px; position:relative; z-index:1; }

.mono{ font-family:var(--font-mono); }

/* Fokus — sichtbar, technisch */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* Screenreader-only */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ═══ TYPOGRAFIE ══════════════════════════════════════════ */

/* overflow-wrap als Sicherheitsnetz: Ein einzelnes zu langes Wort
   (deutsche Komposita!) sprengt sonst die Seite seitlich. */
h1,h2,h3,h4{
  font-family:var(--font-display); font-weight:700; line-height:1.06;
  letter-spacing:-.03em; overflow-wrap:break-word;
}

.eyebrow{
  font-family:var(--font-mono); font-size:12px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:''; width:24px; height:1px; background:var(--accent); opacity:.55; }

.section-head{ max-width:760px; margin-bottom:48px; }
.section-head h2{ font-size:clamp(34px,5vw,60px); margin:22px 0 20px; }
.section-head p{ color:var(--text-dim); font-size:17px; max-width:620px; }
/* Mehrere Absaetze im Abschnittskopf brauchen Abstand, sonst lesen sie
   sich als ein Block. Der erste bleibt buendig zur Ueberschrift. */
.section-head p + p{ margin-top:18px; }

/* Bewusst knapp gehalten: Jeder Abschnitt soll in eine Bildschirmhöhe
   passen, damit ein Scrollschritt genau einen Abschnitt weiterrückt. */
section{ position:relative; z-index:1; padding:88px 0; }

.rule{ height:1px; background:var(--line); border:0; }

/* ═══ REVEAL-UTILITIES ════════════════════════════════════ */

.rv{ opacity:0; transform:translateY(26px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv-l{ opacity:0; transform:translateX(-34px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv-l.in{ opacity:1; transform:none; }
.rv-r{ opacity:0; transform:translateX(34px);  transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv-r.in{ opacity:1; transform:none; }

.d1{ transition-delay:.07s } .d2{ transition-delay:.14s } .d3{ transition-delay:.21s }
.d4{ transition-delay:.28s } .d5{ transition-delay:.35s }

/* ═══ BOOT-OVERLAY ════════════════════════════════════════ */

/* Ohne JS gar nicht erst anzeigen — die Seite steht dann sofort da. */
#boot{ display:none; }
.js #boot{
  position:fixed; inset:0; z-index:9999; background:#000;
  display:flex; align-items:center; justify-content:center;
  transition:transform .75s var(--ease), opacity .5s ease;
}
#boot.gone{ transform:translateY(-100%); opacity:0; pointer-events:none; }

/* Das Logo sitzt exakt in der Bildschirmmitte, die Statuszeilen hängen
   absolut darunter — so verschiebt wachsender Log-Text das Logo nicht. */
.boot-inner{
  width:min(620px,86vw); position:relative;
  display:flex; justify-content:center;
}

/* Feste Breite und mittig unter dem Logo — nicht linksbündig im 620px-Block,
   sonst steht der Text sichtbar versetzt zum zentrierten Logo. */
#boot-log{
  position:absolute; top:calc(100% + 44px); left:50%; transform:translateX(-50%);
  width:min(300px,86vw); text-align:left;
  font-family:var(--font-mono); font-size:13.5px; line-height:2.05;
  color:var(--text-dim); min-height:132px;
}
#boot-log .c{ color:var(--accent); }
#boot-log .ok{ color:var(--ok); }
#boot-log .cur{
  display:inline-block; width:8px; height:15px; background:var(--accent);
  vertical-align:-2px; animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 0%,50%{opacity:1} 51%,100%{opacity:0} }

/* Logo-Facetten — echte Logo-Grafik, in Keile geschnitten */
.boot-logo{
  width:148px; height:157px; margin:0; position:relative;
  opacity:0; transition:opacity .3s ease;
}
.boot-logo.on{ opacity:1; }
.facet,
.facet-base{
  position:absolute; inset:0;
  background:url('logo.png') center/contain no-repeat;
  opacity:0;
}
.facet{ transition:transform .62s var(--ease), opacity .4s ease; }
.boot-logo.lock .facet{ transform:none !important; opacity:1; }

/* Unveränderte Logo-Kopie unter den Facetten: wird beim Einrasten sichtbar
   und füllt jede verbleibende Haarlinie zwischen den Schnittkanten.
   Der Endzustand ist dadurch pixelgleich mit logo.png. */
.facet-base{ transition:opacity .25s ease; }
.boot-logo.lock .facet-base{ opacity:1; }

/* Die Keile überlappen sich bewusst um wenige Prozent und reichen über den
   Rahmen hinaus — exakt aneinanderstoßende clip-path-Kanten hinterlassen
   sonst durch die Kantenglättung sichtbare Haarlinien im zusammengesetzten Logo. */
.f1{ clip-path:polygon(50% 45%, -3% -3%, 53% -3%);              transform:translate(-70px,-90px) rotate(-22deg); }
.f2{ clip-path:polygon(50% 45%, 47% -3%, 103% -3%, 103% 3%);    transform:translate( 78px,-84px) rotate( 20deg); }
.f3{ clip-path:polygon(50% 45%, 103% -3%, 103% 63%);            transform:translate( 96px, 22px) rotate( 16deg); }
.f4{ clip-path:polygon(50% 45%, 103% 57%, 103% 103%, 53% 103%); transform:translate( 62px, 92px) rotate(-18deg); }
.f5{ clip-path:polygon(50% 45%, 47% 103%, -3% 103%, -3% 57%);   transform:translate(-66px, 96px) rotate( 24deg); }
.f6{ clip-path:polygon(50% 45%, -3% 63%, -3% -3%, 3% -3%);      transform:translate(-98px, 10px) rotate(-14deg); }

/* Lichtstrahl über die Kanten */
.boot-sweep{
  position:absolute; left:-12%; top:0; width:124%; height:100%;
  background:linear-gradient(105deg,transparent 42%,rgba(0,229,255,.85) 50%,transparent 58%);
  opacity:0; pointer-events:none;
}
.boot-logo.sweep .boot-sweep{ animation:sweep .78s ease-out forwards; }
@keyframes sweep{
  0%{ opacity:0; transform:translateX(-115%) }
  22%{ opacity:1 }
  100%{ opacity:0; transform:translateX(115%) }
}

/* ═══ NAVIGATION ══════════════════════════════════════════ */

#nav{
  position:fixed; top:0; left:0; right:0; z-index:900; height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(7,11,14,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
/* Bleibt dauerhaft sichtbar — kein Ausblenden beim Scrollen. */
#nav.stuck{ border-bottom-color:var(--line); background:rgba(7,11,14,.92); }

.nav-in{ display:flex; align-items:center; justify-content:space-between; gap:28px; }

/* 15 und 15,5 px auf 16 gehoben: der eigene Website-Check meldet
   Handlungsbedarf, sobald mehr als 60 % der gemessenen Stellen unter
   16 px liegen. Mit 15,5 px waren es 61 %, jetzt 57 %. Die kleinen
   Mono-Beschriftungen bleiben bewusst bei 12 px, sie sind
   Gestaltungssprache und keine Nachlaessigkeit. */
.nav-logo{ display:flex; align-items:center; gap:12px; font-weight:700; font-size:16px; letter-spacing:-.02em; }
.nav-logo img{ height:26px; width:auto; }

.nav-links{ display:flex; gap:34px; list-style:none; }
.nav-links a{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em;
  color:var(--text-dim); position:relative; padding:6px 0; transition:color .25s;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--accent); transition:width .35s var(--ease);
}
.nav-links a:hover{ color:var(--text); }
.nav-links a:hover::after{ width:100%; }

.nav-cta{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.04em;
  border:1px solid var(--line-bright); padding:9px 18px; color:var(--text);
  transition:border-color .3s, color .3s, background .3s;
}
.nav-cta:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
/* Der kostenlose Check ist das niederschwellige Angebot und wird farblich
   abgesetzt, damit die zwei Schaltflaechen nicht als Zwillinge konkurrieren. */
.nav-cta.check{ border-color:var(--accent); color:var(--accent); }
.nav-cta.check:hover{ background:var(--accent-dim); }

/* Mit zwei Schaltflaechen wird der Kopf zwischen 861 und 1023 px zu eng und
   bricht auf zwei Zeilen. Ab 1100 px enger setzen und Umbrueche verbieten.
   12 px bleibt die Untergrenze der Seite, darunter geht nichts. */
@media (max-width:1100px){
  .nav-in{ gap:12px; }
  .nav-links{ gap:14px; }
  .nav-logo,.nav-links a,.nav-cta{ white-space:nowrap; }
  .nav-cta{ padding:8px 10px; font-size:12px; }
}

.burger{ display:none; width:38px; height:38px; align-items:center; justify-content:center; border:1px solid var(--line-bright); }
.burger span{ display:block; width:16px; height:1.5px; background:var(--text); position:relative; transition:background .2s; }
.burger span::before,.burger span::after{
  content:''; position:absolute; left:0; width:16px; height:1.5px; background:var(--text);
  transition:transform .3s var(--ease);
}
.burger span::before{ top:-5px } .burger span::after{ top:5px }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ transform:translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after{ transform:translateY(-5px) rotate(-45deg); }

#mobmenu{
  position:fixed; inset:var(--nav-h) 0 auto 0; z-index:899; background:var(--bg);
  border-bottom:1px solid var(--line); padding:22px 32px 32px;
  display:none; flex-direction:column; gap:2px;
}
#mobmenu.open{ display:flex; }
#mobmenu a{
  font-family:var(--font-mono); font-size:14px; color:var(--text-dim);
  padding:14px 0; border-bottom:1px solid var(--line); transition:color .2s;
}
#mobmenu a:hover{ color:var(--accent); }
#mobmenu .m-cta{ color:var(--accent); border-bottom:none; margin-top:10px; }

/* Scroll-Fortschritt */
#progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:950;
  background:var(--accent); box-shadow:0 0 10px rgba(0,229,255,.6);
  transition:width .1s linear;
}

/* Cursor-Licht (nur Desktop, per JS aktiviert) */
#cursor-glow{
  position:fixed; width:520px; height:520px; z-index:0; pointer-events:none;
  border-radius:50%; opacity:0; transition:opacity .5s ease;
  background:radial-gradient(circle,rgba(0,229,255,.055) 0%,transparent 68%);
  transform:translate(-50%,-50%);
}

/* ═══ HERO ════════════════════════════════════════════════ */

#hero{
  min-height:100vh; display:flex; align-items:center;
  padding:calc(var(--nav-h) + 70px) 0 70px; overflow:hidden;
}
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center; }

.hero-status{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-dim); display:flex; align-items:center; gap:11px; margin-bottom:34px;
}
.dot{ width:6px; height:6px; background:var(--ok); border-radius:50%; box-shadow:0 0 0 0 rgba(0,255,156,.55); animation:ping 2.6s ease-out infinite; }
@keyframes ping{ 0%{box-shadow:0 0 0 0 rgba(0,255,156,.5)} 70%{box-shadow:0 0 0 9px rgba(0,255,156,0)} 100%{box-shadow:0 0 0 0 rgba(0,255,156,0)} }

.hero-h1{ font-size:clamp(42px,6.4vw,82px); margin-bottom:30px; }
.hero-h1 .ln{ display:block; overflow:hidden; }
/* Nur verstecken, wenn JS die Zeilen auch wieder hereinholen kann. */
.js .hero-h1 .ln > span{ transform:translateY(105%); }
.hero-h1 .ln > span{
  display:block;
  transition:transform .95s var(--ease);
}
.hero-h1.in .ln > span{ transform:none; }
.hero-h1 .ln:nth-child(2) > span{ transition-delay:.09s }
.hero-h1 .ln:nth-child(3) > span{ transition-delay:.18s }
.hero-h1 em{ font-style:normal; color:var(--accent); }

/* ── Wortspiel in der Headline ───────────────────────────
   Das „f“ in „auffällt“ flackert kurz zu einem „s“ — aus dem Wort
   wird für einen Moment „ausfällt“. Beide Zeichen liegen exakt
   übereinander, das „s“ ist absolut positioniert und verschiebt
   deshalb nichts im Textfluss. */
/* inline-block, damit sich top:0 des „s“ auf den Buchstaben bezieht und
   nicht auf die gesamte Zeilenbox — sonst sitzt es zu weit oben. */
.flip{ position:relative; display:inline-block; }
.flip-base{ display:inline; }
/* Das „s“ als Pseudoelement — bewusst nicht als echtes Zeichen im DOM,
   sonst stünde in der Überschrift „aufsfällt“ und genau das würden
   Suchmaschinen und die Zwischenablage übernehmen. */
.flip::after{
  content:"s"; position:absolute; left:50%; top:0; opacity:0;
  font-weight:600;                              /* wirkt sonst klobiger als das f */
  text-shadow:0 0 12px rgba(0,229,255,.3);      /* dezenteres Glimmen */
  /* Das s ist in Space Grotesk 20% breiter als das f und wuerde sonst ins
     zweite f laufen. Verkleinert und mittig ueber dem f — ein Restunterschied
     verteilt sich dadurch gleichmaessig auf beide Seiten.
     Der Ursprung liegt auf der Grundlinie (ca. 84% der Zeilenhoehe),
     damit das Verkleinern die Grundlinie nicht verschiebt. */
  transform:translateX(-50%) scale(.88);
  transform-origin:center 84%;
}

@media (prefers-reduced-motion:no-preference){
  .flip-base { animation:flip-f 3s steps(1,end) infinite 1.5s; }
  .flip::after{ animation:flip-s 3s steps(1,end) infinite 1.5s; }
}

/* Kurzes, unregelmäßiges Zucken am Ende jedes Zyklus — wie ein
   Zeichen, das auf einem defekten Display kippt. */
@keyframes flip-f{
  0%,   85%  { opacity:1 }
  86%        { opacity:0 }
  87%        { opacity:1 }
  88%,  93%  { opacity:0 }
  94%        { opacity:1 }
  95%,  98%  { opacity:0 }
  99%, 100%  { opacity:1 }
}
@keyframes flip-s{
  0%,   85%  { opacity:0 }
  86%        { opacity:1 }
  87%        { opacity:0 }
  88%,  93%  { opacity:1 }
  94%        { opacity:0 }
  95%,  98%  { opacity:1 }
  99%, 100%  { opacity:0 }
}

.hero-sub{ color:var(--text-dim); font-size:17.5px; max-width:520px; margin-bottom:40px; }

.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:52px; }

.btn{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.05em;
  padding:15px 26px; border:1px solid var(--line-bright); position:relative;
  overflow:hidden; transition:color .3s, border-color .3s;
  display:inline-flex; align-items:center; gap:10px;
}
.btn span{ position:relative; z-index:1; }
.btn::before{
  content:''; position:absolute; inset:0; background:var(--accent);
  transform:translateX(-101%); transition:transform .45s var(--ease);
}
.btn:hover{ border-color:var(--accent); color:var(--bg); }
.btn:hover::before{ transform:none; }
.btn-ghost:hover{ color:var(--bg); }

.hero-meta{ display:flex; gap:34px; flex-wrap:wrap; font-family:var(--font-mono); font-size:12px; color:var(--text-faint); letter-spacing:.09em; }
.hero-meta b{ display:block; color:var(--text); font-size:19px; font-weight:500; letter-spacing:-.01em; margin-bottom:3px; }

/* ── Terminal ───────────────────────────────────────────── */

.term{
  background:var(--surface); border:1px solid var(--line);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
  box-shadow:0 32px 80px rgba(0,0,0,.55);
}
.term-bar{
  display:flex; align-items:center; gap:9px; padding:12px 16px;
  border-bottom:1px solid var(--line); background:var(--surface-2);
}
.term-bar i{ width:9px; height:9px; border-radius:50%; background:var(--line-bright); }
.term-bar i:first-child{ background:#2A3740 }
.term-title{
  font-family:var(--font-mono); font-size:12px; color:var(--text-faint);
  margin-left:8px; letter-spacing:.06em;
}
.term-body{
  font-family:var(--font-mono); font-size:13px; line-height:1.95;
  padding:22px 20px 26px; height:328px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.term-body .p{ color:var(--accent); }
.term-body .out{ color:var(--text-dim); }
.term-body .ok{ color:var(--ok); }
.term-body .cmd{ color:var(--text); }
.term-cur{
  display:inline-block; width:7.5px; height:14px; background:var(--accent);
  vertical-align:-2px; animation:blink 1.05s steps(1) infinite;
}

/* ═══ LEISTUNGEN — Sticky-Szene ═══════════════════════════ */

/* Kein Kopfbereich mehr — die Szene ist mit ihren 100vh selbst der Abstand. */
#dienste{ padding:0; }
/* 100vh Sockel + ~70vh je Leistung (6 Stück). */
.svc-scene{ position:relative; height:520vh; }
.svc-sticky{
  position:sticky; top:0; height:100vh;
  display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;
}

.svc-stage{ position:relative; min-height:330px; }
/* Ausblenden schnell, Einblenden verzögert — sonst überlagern sich
   beide Texte lesbar und es sieht nach Renderfehler aus. */
.svc-detail{
  position:absolute; inset:0; opacity:0; transform:translateY(18px);
  transition:opacity .16s ease, transform .16s ease;
  pointer-events:none;
}
.svc-detail.on{
  opacity:1; transform:none; pointer-events:auto;
  transition:opacity .42s var(--ease) .14s, transform .52s var(--ease) .14s;
}
.svc-num{
  font-family:var(--font-mono); font-size:12px; color:var(--accent);
  letter-spacing:.15em; margin-bottom:18px; display:block;
}
.svc-detail h3{ font-size:clamp(28px,3.4vw,42px); margin-bottom:20px; }
.svc-detail p{ color:var(--text-dim); font-size:16.5px; margin-bottom:26px; max-width:480px; }
.svc-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.svc-tag{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.05em;
  border:1px solid var(--line); padding:7px 12px; color:var(--text-dim);
}

.svc-list{ list-style:none; border-top:1px solid var(--line); }
.svc-row{
  border-bottom:1px solid var(--line); position:relative;
  display:flex; align-items:center; gap:20px; padding:26px 20px;
  cursor:pointer; transition:color .35s; color:var(--text-faint);
  width:100%; text-align:left; font-family:inherit;
}
.svc-row::before{
  content:''; position:absolute; inset:0; background:var(--accent-dim);
  transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease);
}
.svc-row.on::before{ transition:transform .55s var(--ease); }
.svc-row > *{ position:relative; z-index:1; }
.svc-row .n{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; }
.svc-row .t{ font-size:19px; font-weight:600; letter-spacing:-.02em; flex:1; }
.svc-row .a{ font-family:var(--font-mono); font-size:14px; transform:translateX(-8px); opacity:0; transition:transform .4s var(--ease), opacity .3s; }
.svc-row:hover{ color:var(--text-dim); }
.svc-row.on{ color:var(--text); }
.svc-row.on::before{ transform:none; }
.svc-row.on .a{ transform:none; opacity:1; color:var(--accent); }
.svc-row.on .n{ color:var(--accent); }

/* ═══ USP-LEISTE ══════════════════════════════════════════ */

/* Sitzt jetzt innerhalb von „Über mich" — kein eigener Abschnitt mehr.
   Die Trennlinie oben ersetzt die früheren Abschnittsränder. */
.usp-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); margin-top:64px;
}
.usp-item{ padding:40px 44px 0; border-right:1px solid var(--line); }
.usp-item:first-child{ padding-left:0; }
.usp-item:last-child{ border-right:none; padding-right:0; }
.usp-item .k{ font-family:var(--font-mono); font-size:12px; color:var(--accent); letter-spacing:.15em; margin-bottom:22px; display:block; }
.usp-item h3{ font-size:21px; margin-bottom:14px; }
.usp-item p{ color:var(--text-dim); font-size:16px; }

/* ═══ ÜBER MICH ═══════════════════════════════════════════ */

.about-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:center; }

.about-visual{ position:relative; }
.about-img{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  border:1px solid var(--line);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 56px), calc(100% - 56px) 100%, 0 100%);
}
/* display:contents nimmt <picture> aus dem Box-Modell, damit das <img>
   direktes Kind von .about-img bleibt und height:100% aufloest. */
.about-img picture{ display:contents; }
.about-img img{
  width:100%; height:100%; object-fit:cover; object-position:center top;
  filter:grayscale(.55) contrast(1.12) brightness(.88);
  transform:scale(1.06); transition:transform 1.4s var(--ease), filter .8s ease;
}
.about-visual.in .about-img img{ transform:scale(1); }
.about-img:hover img{ filter:grayscale(.15) contrast(1.05) brightness(1); }

/* Scanline-Wisch beim Eintreten */
.about-img::after{
  content:''; position:absolute; inset:0; background:var(--bg);
  transform-origin:bottom; transition:transform 1.1s var(--ease);
}
.about-visual.in .about-img::after{ transform:scaleY(0); }

/* Cyan-Lichtkante an der Schräge */
.about-img::before{
  content:''; position:absolute; right:-2px; bottom:-2px; width:80px; height:80px; z-index:2;
  background:linear-gradient(135deg,transparent 49%,var(--accent) 50%,transparent 51%);
  opacity:.7;
}

.about-badge{
  position:absolute; left:-26px; bottom:44px; z-index:3;
  background:var(--surface); border:1px solid var(--line-bright);
  padding:18px 22px; display:flex; align-items:center; gap:15px;
}
.about-badge .n{ font-family:var(--font-mono); font-size:30px; color:var(--accent); line-height:1; }
.about-badge p{ font-family:var(--font-mono); font-size:12px; color:var(--text-dim); line-height:1.5; letter-spacing:.05em; }

.about-content h2{ font-size:clamp(32px,4.4vw,54px); margin:22px 0 26px; }
.about-content > p{ color:var(--text-dim); font-size:16.5px; margin-bottom:20px; max-width:560px; }

.about-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--line); margin:38px 0;
}
/* Abstand auf BEIDEN Seiten: mit padding-left:0 klebte die Beschriftung
   direkt an der Trennlinie links und stieß rechts fast an die nächste.
   Erste Zelle ohne linken Abstand, damit „2016" mit dem Fließtext
   darüber auf einer Kante steht. */
.about-stat{ padding:24px 22px; border-right:1px solid var(--line); }
.about-stat:first-child{ padding-left:0; }
.about-stat:last-child{ border-right:none; padding-right:0; }
.about-stat .n{ font-family:var(--font-mono); font-size:26px; color:var(--text); line-height:1; margin-bottom:8px; }
.about-stat p{ font-family:var(--font-mono); font-size:12px; color:var(--text-faint); letter-spacing:.09em; text-transform:uppercase; }

/* ═══ TIMELINE ════════════════════════════════════════════ */

.tl{ position:relative; padding-left:52px; max-width:840px; }
.tl::before{ content:''; position:absolute; left:11px; top:8px; bottom:8px; width:1px; background:var(--line); }
.tl::after{
  content:''; position:absolute; left:11px; top:8px; width:1px;
  height:calc((100% - 16px) * var(--tl,0)); background:var(--accent);
  box-shadow:0 0 8px rgba(0,229,255,.5);
}
.tl-item{ position:relative; padding-bottom:40px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-dot{
  position:absolute; left:-47px; top:6px; width:11px; height:11px;
  border:1px solid var(--line-bright); background:var(--bg);
  transform:rotate(45deg); transition:border-color .45s, background .45s, box-shadow .45s;
}
.tl-item.lit .tl-dot{ border-color:var(--accent); background:var(--accent); box-shadow:0 0 12px rgba(0,229,255,.7); }
.tl-period{ font-family:var(--font-mono); font-size:12px; color:var(--accent); letter-spacing:.1em; margin-bottom:10px; }
.tl-item h4{ font-size:20px; margin-bottom:6px; }
.tl-company{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-faint); margin-bottom:14px; letter-spacing:.03em; }
.tl-item p{ color:var(--text-dim); font-size:15.5px; max-width:640px; }

/* ═══ KONTAKT ═════════════════════════════════════════════ */

.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; }
.contact-info h2{ font-size:clamp(32px,4.4vw,54px); margin:22px 0 24px; }
.contact-info > p{ color:var(--text-dim); font-size:16.5px; margin-bottom:44px; max-width:440px; }

.cdetails{ border-top:1px solid var(--line); }
.cdetail{
  display:grid; grid-template-columns:130px 1fr; gap:20px; align-items:baseline;
  padding:19px 0; border-bottom:1px solid var(--line);
}
.cdetail dt{ font-family:var(--font-mono); font-size:12px; color:var(--text-faint); letter-spacing:.12em; text-transform:uppercase; }
.cdetail dd{ font-size:16px; }
/* Telefon und E-Mail sind die zwei wichtigsten Verweise der Seite.
   Die treffbare Flaeche muss am Telefon mindestens 24 px hoch sein. */
.cdetail dd a{ display:inline-block; min-height:24px; line-height:24px; }
.cdetail a{ transition:color .25s; border-bottom:1px solid transparent; }
.cdetail a:hover{ color:var(--accent); border-bottom-color:var(--accent); }

/* Formular im Terminal-Stil */
.form-wrap{
  background:var(--surface); border:1px solid var(--line); padding:0;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}
.form-head{
  display:flex; align-items:center; gap:9px; padding:13px 18px;
  border-bottom:1px solid var(--line); background:var(--surface-2);
  font-family:var(--font-mono); font-size:12px; color:var(--text-faint); letter-spacing:.06em;
}
.form-head i{ width:9px; height:9px; border-radius:50%; background:var(--line-bright); }
form{ padding:32px 30px 34px; }

/* Honigtopf — aus dem Blickfeld geschoben statt display:none,
   weil manche Bots ausgeblendete Felder erkennen und überspringen. */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.f-group{ margin-bottom:20px; }
.f-group label{
  display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
  color:var(--text-dim); margin-bottom:9px;
}
.f-group label::before{ content:'> '; color:var(--accent); }
.f-group .req{ color:var(--accent); }

.f-group input,.f-group select,.f-group textarea{
  width:100%; background:var(--bg); border:1px solid var(--line);
  padding:13px 15px; font-family:var(--font-mono); font-size:13.5px; color:var(--text);
  transition:border-color .3s, box-shadow .3s;
}
.f-group textarea{ min-height:128px; resize:vertical; line-height:1.7; }
.f-group input::placeholder,.f-group textarea::placeholder{ color:var(--text-faint); }
.f-group input:focus,.f-group select:focus,.f-group textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-dim);
}
.f-group select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-dim) 50%),linear-gradient(135deg,var(--text-dim) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.f-group select option{ background:var(--surface); color:var(--text); }

.btn-submit{
  width:100%; margin-top:8px; font-family:var(--font-mono); font-size:13px; letter-spacing:.06em;
  border:1px solid var(--accent); color:var(--accent); padding:16px;
  position:relative; overflow:hidden; transition:color .3s;
}
.btn-submit span{ position:relative; z-index:1; }
.btn-submit::before{
  content:''; position:absolute; inset:0; background:var(--accent);
  transform:translateX(-101%); transition:transform .45s var(--ease);
}
.btn-submit:hover:not(:disabled){ color:var(--bg); }
.btn-submit:hover:not(:disabled)::before{ transform:none; }
.btn-submit:disabled{ opacity:.55; cursor:wait; }

.f-msg{
  display:none; margin-top:18px; padding:14px 16px;
  font-family:var(--font-mono); font-size:12.5px; line-height:1.7;
}
.f-msg.show{ display:block; }
#f-ok{ border:1px solid rgba(0,255,156,.35); background:rgba(0,255,156,.06); color:var(--ok); }
#f-err{ border:1px solid rgba(255,77,77,.35); background:rgba(255,77,77,.06); color:var(--err); }
#f-err a{ color:var(--err); text-decoration:underline; }

/* ═══ FOOTER ══════════════════════════════════════════════ */

footer{ border-top:1px solid var(--line); padding:64px 0 34px; position:relative; z-index:1; }
.foot-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:44px; flex-wrap:wrap; padding-bottom:44px; }
.foot-logo{ display:flex; align-items:center; gap:13px; font-weight:700; font-size:16px; }
.foot-logo img{ height:30px; width:auto; }
.foot-nav{ display:flex; gap:30px; flex-wrap:wrap; }
.foot-nav a{ font-family:var(--font-mono); font-size:12px; color:var(--text-faint); letter-spacing:.05em; transition:color .25s; display:inline-block; min-height:24px; line-height:24px; }
.foot-nav a:hover{ color:var(--accent); }
.foot-bottom{
  border-top:1px solid var(--line); padding-top:26px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:12px; color:var(--text-faint); letter-spacing:.04em;
}

/* ═══ ABSCHNITTS-PUNKTE (rechter Rand) ═══════════════════ */

#dots{
  position:fixed; right:30px; top:50%; transform:translateY(-50%);
  z-index:850; display:flex; flex-direction:column; align-items:flex-end; gap:20px;
}
#dots a{
  display:flex; align-items:center; gap:14px; padding:4px 0;
  color:var(--text-faint); transition:color .25s;
  /* Der Punkt bleibt klein, die treffbare Flaeche waechst auf 24 px. */
  min-height:24px; min-width:24px; justify-content:flex-end;
}
/* Beschriftung erscheint bei Hover und bei Tastaturfokus */
#dots a::before{
  content:attr(data-label);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.09em;
  white-space:nowrap; opacity:0; transform:translateX(6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
#dots a:hover::before,
#dots a:focus-visible::before{ opacity:1; transform:none; }

/* Raute statt Kreis — greift die Form der Timeline-Punkte auf */
#dots span{
  width:9px; height:9px; flex:none; transform:rotate(45deg);
  border:1px solid var(--line-bright); background:transparent;
  transition:border-color .3s, background .3s, box-shadow .3s, scale .3s var(--ease);
}
#dots a:hover span{ border-color:var(--text-dim); }
#dots a.on{ color:var(--accent); }
#dots a.on span{
  border-color:var(--accent); background:var(--accent);
  box-shadow:0 0 12px rgba(0,229,255,.65); scale:1.15;
}

#totop{
  position:fixed; right:28px; bottom:28px; z-index:800;
  width:44px; height:44px; border:1px solid var(--line-bright); background:rgba(13,18,22,.9);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .35s, transform .35s var(--ease), border-color .3s, color .3s;
}
#totop.on{ opacity:1; transform:none; pointer-events:auto; }
#totop:hover{ border-color:var(--accent); color:var(--accent); }

/* ═══ RECHTSSEITEN ════════════════════════════════════════ */

.legal-hero{ padding:calc(var(--nav-h) + 86px) 0 0; }
.crumb{ font-family:var(--font-mono); font-size:12px; color:var(--text-faint); letter-spacing:.09em; margin-bottom:26px; }
.crumb a{ display:inline-block; min-height:24px; line-height:24px; }
.crumb a{ color:var(--text-dim); transition:color .25s; }
.crumb a:hover{ color:var(--accent); }
.crumb i{ font-style:normal; color:var(--line-bright); margin:0 10px; }
/* „Datenschutzerklärung" passt als ein Wort auf schmale Displays nicht.
   hyphens:auto trennt korrekt nach deutschen Regeln (Datenschutz-erklärung)
   statt das Wort roh abzuschneiden. Die Seite ist mit lang="de" ausgezeichnet,
   dadurch greift die deutsche Trennung. */
.legal-hero h1{
  font-size:clamp(32px,6vw,68px); margin-bottom:18px;
  hyphens:auto; -webkit-hyphens:auto;
}
.legal-hero > .container > p{ color:var(--text-dim); font-size:16.5px; max-width:600px; }

.legal-grid{ display:grid; grid-template-columns:220px 1fr; gap:70px; padding:70px 0 120px; align-items:start; }
/* Ohne min-width:0 dehnt sich die Grid-Spalte auf die Breite ihres breitesten
   Inhalts (Standard ist min-width:auto) — .table-wrap könnte dann nie scrollen
   und die breite Tabelle würde die ganze Seite seitlich überlaufen lassen. */
.legal-grid > *{ min-width:0; }

.legal-toc{ position:sticky; top:calc(var(--nav-h) + 34px); }
.legal-toc h3{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--accent); margin-bottom:18px; font-weight:500;
}
.legal-toc ul{ list-style:none; border-left:1px solid var(--line); }
.legal-toc a{
  display:block; font-family:var(--font-mono); font-size:12px; line-height:1.45;
  color:var(--text-faint);
  padding:5px 0 5px 16px; margin-left:-1px; border-left:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.legal-toc a:hover{ color:var(--accent); border-left-color:var(--accent); }

.legal{ max-width:760px; }
.legal h2{
  font-family:var(--font-display); font-size:24px; margin:0 0 22px;
  padding-top:0; border-top:none;
}
/* Ausdrücklich als Kurzform, nicht nur padding-bottom: Sonst bleiben die
   130px padding-top aus der globalen section-Regel stehen und reißen
   zwischen den Rechtstext-Abschnitten riesige Lücken auf. */
.legal-sec{ padding:0 0 56px; margin-bottom:56px; border-bottom:1px solid var(--line); }
.legal-sec:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.legal-sec .k{ font-family:var(--font-mono); font-size:12px; color:var(--accent); letter-spacing:.15em; display:block; margin-bottom:14px; }

.stamp{
  display:inline-flex; align-items:center; gap:9px; margin-top:24px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.07em;
  color:var(--text-dim); border:1px solid var(--line); padding:9px 15px;
}
.stamp::before{ content:''; width:5px; height:5px; background:var(--accent); }

.highlight-box{
  border-left:2px solid var(--accent); background:var(--surface);
  padding:18px 22px; margin:26px 0;
}
.highlight-box p{ margin-bottom:0; font-size:14.5px; }

.info-list{ border-top:1px solid var(--line); }
.info-list > div{
  display:grid; grid-template-columns:190px 1fr; gap:20px;
  padding:15px 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.info-list dt{ font-family:var(--font-mono); font-size:12px; color:var(--text-faint); letter-spacing:.1em; text-transform:uppercase; }
.info-list dd{ font-size:15.5px; color:var(--text); }
.info-list dd a{ color:var(--text); border-bottom:1px solid var(--line-bright); transition:color .25s, border-color .25s; }
.info-list dd a:hover{ color:var(--accent); border-bottom-color:var(--accent); }

.legal h3{ font-size:16.5px; margin:28px 0 12px; color:var(--text); }
/* Rechtstexte stecken voller langer Komposita. hyphens:auto trennt sie
   nach deutschen Regeln, statt sie hart abzuschneiden (lang="de" ist gesetzt). */
.legal p,.legal li,.legal dd{ hyphens:auto; -webkit-hyphens:auto; }
.legal p,.legal li{ color:var(--text-dim); font-size:15.5px; margin-bottom:14px; }
.legal ul,.legal ol{ padding-left:22px; margin-bottom:20px; }
.legal li{ margin-bottom:9px; }
/* Verweise im Rechtstext waren nur an der Farbe erkennbar (axe:
   link-in-text-block). Die Linie ist jetzt von Anfang an da und wird
   bei Hover kraeftiger, statt erst dann zu erscheinen. */
.legal a{ color:var(--accent); border-bottom:1px solid rgba(0,229,255,.42); transition:border-color .25s; }
.legal a:hover{ border-bottom-color:var(--accent); }
/* Treffbare Flaeche am Telefon mindestens 24 px, wie auf der Startseite. */
.legal a,.legal-toc a,.foot-nav a{ display:inline-block; min-height:24px; line-height:24px; }
.legal strong{ color:var(--text); font-weight:600; }
.legal code{
  font-family:var(--font-mono); font-size:13.5px; color:var(--accent);
  background:var(--surface); border:1px solid var(--line); padding:2px 7px;
}
/* Breite Tabellen scrollen in sich statt die Seite zu sprengen */
.table-wrap{ overflow-x:auto; margin-bottom:22px; }
.legal table{ width:100%; min-width:520px; border-collapse:collapse; margin-bottom:22px; font-size:14.5px; }
.table-wrap table{ margin-bottom:0; }
.legal th,.legal td{ border:1px solid var(--line); padding:11px 13px; text-align:left; color:var(--text-dim); }
.legal th{ background:var(--surface); color:var(--text); font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; font-weight:500; }
.legal-back{
  font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim);
  display:inline-flex; align-items:center; gap:9px; transition:color .25s;
}
.legal-back:hover{ color:var(--accent); }

/* ═══ RESPONSIVE ══════════════════════════════════════════ */

@media (max-width:1080px){
  /* Ab hier ist alles einspaltig: seitliches Einblenden ergibt ohne
     Nebeneinander keinen Sinn mehr und schiebt die Elemente ausserdem
     um 34px über den rechten Rand hinaus. Daher nur noch vertikal. */
  .rv-l,.rv-r{ transform:translateY(26px); }

  .hero-grid{ grid-template-columns:1fr; gap:52px; }
  .term-body{ height:280px; }
  .about-grid,.contact-grid{ grid-template-columns:1fr; gap:56px; }
  .usp-grid{ grid-template-columns:1fr; margin-top:72px; }
  .usp-item{ border-right:none; border-bottom:1px solid var(--line); padding:44px 0; }
  .usp-item:last-child{ border-bottom:none; padding-bottom:0; }
  .about-badge{ left:0; }
}

@media (max-width:860px){
  .container{ padding:0 22px; }
  section{ padding:88px 0; }
  .section-head{ margin-bottom:52px; }
  .nav-links,.nav-cta{ display:none; }
  .burger{ display:flex; }

  /* Ohne Kopfbereich braucht der Abschnitt auf Mobile wieder eigenen Abstand */
  #dienste{ padding:70px 0; }

  /* Sticky-Szene auf Mobile auflösen — alle Leistungen untereinander */
  .svc-scene{ height:auto; }
  .svc-sticky{ position:static; height:auto; display:block; }
  .svc-list{ display:none; }
  .svc-stage{ min-height:0; }
  .svc-detail{
    position:static; opacity:1; transform:none; pointer-events:auto;
    padding:34px 0; border-bottom:1px solid var(--line);
  }
  .svc-detail:last-child{ border-bottom:none; }

  .about-stats{ grid-template-columns:repeat(2,1fr); }
  .about-stat{ border-bottom:1px solid var(--line); }
  /* Bei zwei Spalten beginnt in jeder Reihe eine neue linke Kante */
  .about-stat:nth-child(2n+1){ padding-left:0; }
  .about-stat:nth-child(2n){ border-right:none; padding-right:0; }
  .f-row{ grid-template-columns:1fr; gap:0; }
  .cdetail{ grid-template-columns:1fr; gap:6px; }
  .tl{ padding-left:34px; }
  .tl::before,.tl::after{ left:5px; }
  .tl-dot{ left:-34px; }
  #totop{ right:16px; bottom:16px; }
  /* Am schmalen Rand ist kein Platz — und das Springen ist
     auf Mobile ohnehin abgeschaltet (Wischen bleibt natürlich). */
  #dots{ display:none; }

  /* Ladescreen: Logo und Statuszeilen als GRUPPE mittig, nicht nur das Logo.
     Der Log läuft dazu wieder im normalen Fluss statt absolut darunter;
     min-height haelt die Hoehe konstant, damit das Logo beim Tippen
     nicht nach oben wandert. */
  .boot-inner{ flex-direction:column; align-items:center; width:auto; }
  .boot-logo{ width:118px; height:125px; }
  #boot-log{
    position:static; transform:none; left:auto; top:auto;
    width:auto; margin-top:26px; min-height:118px;
    font-size:12.5px; line-height:1.95;
  }

  .legal-grid{ grid-template-columns:1fr; gap:0; padding:44px 0 84px; }
  .legal-toc{ position:static; margin-bottom:46px; }
  .info-list > div{ grid-template-columns:1fr; gap:5px; }
}

/* ═══ REDUZIERTE BEWEGUNG ═════════════════════════════════ */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  /* Der Ladescreen bleibt sichtbar. Die Bewegung darin nimmt ihm der
     Block darueber: Animationen und Uebergaenge stehen auf 0,001 ms,
     das Logo steht damit sofort fertig da. */
  .rv,.rv-l,.rv-r{ opacity:1 !important; transform:none !important; }
  .hero-h1 .ln > span{ transform:none !important; }
  .about-img::after{ transform:scaleY(0) !important; }
  .about-img img{ transform:none !important; }
  .svc-detail{ position:static; opacity:1; transform:none; }
  .svc-scene{ height:auto; }
  .svc-sticky{ position:static; height:auto; display:block; }
  .svc-list{ display:none; }
  #cursor-glow{ display:none !important; }
}

/* Betreuungsabschnitt */
/* Zeilenlaenge wie im Rest der Seite: der Abschnittskopf bricht bei 620 bis
   760 px um, ohne Deckel liefe die Liste ueber 1200 px. */
.betreuung-liste,.erfahrung-liste{ list-style:none; margin:38px 0 0; padding:0; display:grid; gap:14px; max-width:760px; }
/* Die Erfahrungssaetze sind laenger als die Betreuungspunkte und brauchen Luft. */
.erfahrung-liste{ gap:20px; }
.betreuung-liste li,.erfahrung-liste li{ position:relative; padding-left:26px; color:var(--text-dim); }
.betreuung-liste li::before,.erfahrung-liste li::before{ content:""; position:absolute; left:0; top:.7em; width:8px; height:1px; background:var(--accent); }
.betreuung-schluss{ margin-top:34px; padding-top:26px; border-top:1px solid var(--line); color:var(--text-dim); max-width:760px; }

/* Kurzer Hinweis unter einem Formularfeld. */
.f-hinweis{ margin-top:6px; font-size:12px; color:var(--text-dim); }

/* Hinweis unter dem Absenden-Knopf. Zurueckhaltend, er soll informieren
   und nicht vom Absenden ablenken. */
.f-datenschutz{ margin-top:18px; font-size:13px; color:var(--text-dim); max-width:520px; }
.f-datenschutz a{ color:var(--text-dim); border-bottom:1px solid rgba(0,229,255,.42); transition:color .25s, border-color .25s;
  /* Treffbare Flaeche am Telefon mindestens 24 px, wie ueberall sonst. */
  display:inline-block; min-height:24px; line-height:24px; }
.f-datenschutz a:hover{ color:var(--accent); border-bottom-color:var(--accent); }

/* Check-Abschnitt */
.check-hinweis{ margin:34px 0; padding:22px 26px; max-width:760px; border:1px solid var(--line); border-left:2px solid var(--accent); color:var(--text-dim); }
.check-menge{ margin:0 0 34px; max-width:760px; color:var(--text-dim); font-size:16px; }