/* Klüber-IT — ein Stylesheet für alle Seiten.
 *
 * Regeln, die aus dem letzten Durchgang stammen und hier gelten:
 *  - keine Typ+Klasse-Selektoren für Komponenten (button.hamburger schlug .hamburger)
 *  - kein !important
 *  - Navigation über #nav ansprechen, nicht über nav — sonst erwischt die Regel
 *    jedes weitere <nav> auf der Seite (Inhaltsverzeichnis der Rechtstexte)
 *  - object-fit nur dort, wo ein Bild wirklich zugeschnitten werden soll
 */

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

:root{
  --bg:#080B12;--bg2:#0D1120;--bg3:#131826;
  --accent:#B8CC2A;--a10:rgba(184,204,42,.10);--a25:rgba(184,204,42,.25);--a50:rgba(184,204,42,.50);
  --text:#EEF0F5;
  /* Zweimal angehoben: das Original lag bei 1,99:1 und war unlesbar, danach
     auf AA-Niveau. AA ist aber eine Untergrenze, kein Komfortwert — jetzt
     erreicht der Fließtext auf jedem Untergrund AAA (7:1). */
  --muted:#B2BACD;   /* Fließtext — 9,10:1 auf --bg3, 9,66 auf --bg2, 10,12 auf --bg */
  --dim:#9AA2B6;     /* Label, Fußzeilenlinks — 6,93:1 auf --bg3, 7,35 auf --bg2 */
  --border:rgba(255,255,255,.07);--border2:rgba(184,204,42,.15);
  --r:14px;--rl:22px;--f:'Plus Jakarta Sans',system-ui,sans-serif;
  --fm:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  --nav:72px;
}
@media(max-width:640px){:root{--nav:60px}}

/* Selbst gehostete Schrift statt fonts.googleapis.com.
   Ein variables Schriftschnitt-File deckt 200–800 ab. */
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/pjs-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;
}
/* Kein latin-ext-Schnitt: kein einziges Zeichen der Seite faellt in diesen
   Bereich (geprueft ueber alle Seiten). Kommt spaeter eines dazu — etwa in
   einem Namen —, faellt nur dieses Zeichen auf die Systemschrift zurueck. */

html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--f);font-size:16px;line-height:1.65;overflow-x:hidden}
h1,h2,h3{line-height:1.1;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* <picture> ist ein Zwischenelement ohne eigene Masse. Ohne diese Regel
   greift height:100% am <img> nicht und der Rahmen wird hoeher als das Bild. */
.fuellt{display:block;width:100%;height:100%}
.c{max-width:1200px;margin:0 auto;padding:0 28px}
@media(max-width:640px){.c{padding:0 18px}}

/* Tastaturbedienung sichtbar machen — auf der Originalseite gab es keine Fokusanzeige */
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

.sprung{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#080B12;
  padding:12px 20px;border-radius:0 0 10px 0;font-weight:700;font-size:15px}
.sprung:focus{left:0}

/* ── NAVIGATION ─────────────────────────────────────────────── */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav);display:flex;align-items:center;transition:background .35s,border-color .35s}
#nav.s{background:rgba(8,11,18,.9);backdrop-filter:blur(24px);border-bottom:1px solid var(--border)}
.ni{width:100%;max-width:1200px;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between}
@media(max-width:640px){.ni{padding:0 18px}}
.nl{display:flex;align-items:center;min-height:44px}
.nl img{height:30px;width:165px}
.nm{display:flex;gap:36px;align-items:center}
/* Eigene Klasse statt `.nm a` — ein Typselektor (0,1,1) wuerde die
   Knopf-Klasse `.nc` (0,1,0) schlagen und ihr Innenmass zurueckdrehen. */
.nav-link{font-size:14px;font-weight:500;color:var(--muted);transition:color .2s;
  display:inline-flex;align-items:center;min-height:44px;padding:0 2px;white-space:nowrap}
.nav-link:hover{color:var(--text)}
.nav-link[aria-current="page"]{color:var(--text)}
.nc{background:var(--accent);color:#080B12;padding:0 24px;border-radius:8px;font-weight:700;
  transition:transform .2s,box-shadow .2s}
.nc:hover{transform:translateY(-2px);box-shadow:0 8px 28px var(--a50);color:#080B12}

/* Menüknopf: eigenständiges Element, keine Typ+Klasse-Selektoren */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;
  padding:10px;background:none;border:0;min-width:44px;min-height:44px;align-items:center}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform .3s,opacity .3s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:640px){
  .hamburger{display:flex}
  .nm{display:none}
  .nm.open{display:flex;flex-direction:column;position:fixed;top:var(--nav);left:0;right:0;
    background:rgba(8,11,18,.97);backdrop-filter:blur(20px);padding:20px 24px 28px;gap:8px;
    border-bottom:1px solid var(--border);z-index:99}
  .nm.open .nav-link{font-size:16px;color:var(--text);min-height:48px}
  .nm.open .nc{justify-content:center;color:#080B12}
}

/* ── HERO ───────────────────────────────────────────────────── */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding-top:var(--nav)}
#heroCanvas{position:absolute;inset:0;z-index:0;width:100%;height:100%}
.hero-content{position:relative;z-index:2;display:flex;align-items:center;width:100%;max-width:780px}
.hero-left{min-width:0}
.h-badge{display:inline-flex;align-items:center;gap:9px;background:var(--a10);border:1px solid var(--border2);color:var(--accent);padding:7px 18px;border-radius:100px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:28px}
.h-dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.hero h1{font-size:clamp(36px,4.8vw,76px);font-weight:800;margin-bottom:26px;line-height:1.05}
/* Aufbau wie im Original: der wechselnde Begriff steht IN der Überschrift,
   in derselben Größe und mit demselben Verlauf. Im ausgelieferten HTML steht
   dort fest "IT Sicherheit" — die H1 ist also auch ohne Skript vollständig.
   min-height hält die Zeile frei, damit beim Wechseln nichts springt. */
.tw-zeile{position:relative;display:flex;align-items:baseline;min-height:1.4em;
  line-height:1.2;padding-bottom:.12em}
.tw-wort{background:linear-gradient(135deg,var(--accent) 0%,#e0f050 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  white-space:nowrap;display:inline-block;line-height:1.2;padding-bottom:.08em;font-weight:800}
/* Prüfstrahl: der Strahl läuft einmal durch das Wort. Dahinter steht es
   geprüft da, davor ist es noch nicht sichtbar, an der Kante flackern zwei
   bis drei Zeichen als Hex. Die Zeichen erben den Verlauf der Überschrift,
   damit er über das ganze Wort läuft und nicht je Buchstabe neu ansetzt. */
.z{display:inline-block;white-space:pre}
.z.roh{-webkit-text-fill-color:#6b7a33;color:#6b7a33;font-family:var(--fm);
  font-size:.5em;vertical-align:baseline}
/* visibility, nicht opacity: background-clip:text am Elternelement
   schneidet den Verlauf entlang ALLER Buchstaben aus — auch der auf
   Deckkraft 0 gesetzten. Sie schimmerten dadurch durch. */
.z.weg{visibility:hidden}
.strahl{position:absolute;top:.02em;bottom:.18em;width:3px;border-radius:3px;opacity:0;
  pointer-events:none;z-index:3;
  background:linear-gradient(to bottom,rgba(184,204,42,.25),var(--accent) 30%,
    var(--accent) 70%,rgba(184,204,42,.25));
  box-shadow:0 0 20px 5px rgba(184,204,42,.7)}
.hero-p{font-size:clamp(16px,1.7vw,19px);color:var(--muted);max-width:520px;margin-bottom:44px;line-height:1.75}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:10px;font-weight:700;font-size:15px;cursor:pointer;border:none;transition:transform .22s,box-shadow .22s,border-color .22s;font-family:var(--f);min-height:48px}
.btn-a{background:var(--accent);color:#080B12}
.btn-a:hover{transform:translateY(-2px);box-shadow:0 10px 36px var(--a50)}
.btn-b{background:var(--bg3);color:var(--text);border:1px solid var(--border)}
.btn-b:hover{border-color:var(--border2);transform:translateY(-2px)}

/* ── ABSCHNITTE ─────────────────────────────────────────────── */
/* Bewusst eine Klasse, kein `section`-Typselektor: die Rechtsabschnitte sind
   ebenfalls <section>-Elemente und erbten sonst 200 px Innenabstand — ein
   Feld mit 13 Zeichen wurde dadurch 337 px hoch. */
.abschnitt{padding:100px 0}
@media(max-width:640px){.abschnitt{padding:64px 0}}
.slabel{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.stitle{font-size:clamp(28px,4vw,50px);font-weight:800;margin-bottom:16px}
.sdesc{font-size:17px;color:var(--muted);max-width:540px;line-height:1.75;margin-bottom:56px}
@media(max-width:640px){.stitle{margin-bottom:12px}.sdesc{font-size:15px;margin-bottom:36px}}

/* ── SERVICEKACHELN ─────────────────────────────────────────── */
.svc-bg{background:var(--bg2)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none}
@media(max-width:960px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.svc-grid{grid-template-columns:1fr}}
.scard{background:var(--bg3);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;transition:border-color .28s,transform .28s,box-shadow .28s;position:relative;min-width:0;display:flex}
.scard:hover{border-color:var(--border2);transform:translateY(-5px);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.scard:focus-within{border-color:var(--accent)}
.scard > a{display:flex;flex-direction:column;width:100%;min-width:0}
.scard-img{height:180px;overflow:hidden;position:relative}
@media(max-width:640px){.scard-img{height:160px}}
.scard-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.scard:hover .scard-img img{transform:scale(1.07)}
.scard-img-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 30%,var(--bg3))}
.scard-body{padding:22px 24px}
.scard-tag{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.scard h3{font-size:18px;font-weight:700;margin-bottom:8px}
.scard p{font-size:15px;color:var(--muted);line-height:1.6}
.scard-icon{position:absolute;top:16px;right:16px;width:38px;height:38px;background:rgba(8,11,18,.8);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--accent)}
.scard-icon svg{width:18px;height:18px}

/* ── EINZELNE LEISTUNGSSEITE ────────────────────────────────── */
/* Nur padding-top, nicht die Kurzschreibweise: `padding: X 0 0` loescht
   die seitlichen Abstaende, die .c vorgibt — die Unterseiten klebten
   dadurch am Bildschirmrand, die Startseite nicht. */
.seiten-kopf{padding-top:calc(var(--nav) + 56px)}
/* Eigene Klasse statt Inline-Stil: ein style-Attribut laesst sich von einer
   Medienabfrage nicht mehr zurueckholen, der Fussraum blieb mobil zu gross. */
.seiten-fuss{padding-bottom:104px}
@media(max-width:640px){
  .seiten-kopf{padding-top:calc(var(--nav) + 32px)}
  .seiten-fuss{padding-bottom:56px}
}
.krume{font-size:13px;color:var(--dim);margin-bottom:20px}
.krume ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:44px}
.krume li::after{content:'›';margin-left:8px;color:var(--dim)}
.krume li:last-child::after{content:''}
.krume a{color:var(--muted);display:inline-flex;align-items:center;min-height:44px;padding:0 6px;margin:0 -6px}
.krume a:hover{color:var(--accent)}
.krume [aria-current="page"]{color:var(--text)}

.dp-img{width:100%;max-width:900px;aspect-ratio:16/8;border-radius:var(--rl);overflow:hidden;margin-bottom:28px;position:relative}
.dp-img img{width:100%;height:100%;object-fit:cover}
.dp-img-ov{position:absolute;inset:0;background:linear-gradient(135deg,rgba(184,204,42,.12),transparent)}
.dp-tag{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.dp-title{font-size:clamp(28px,4vw,46px);font-weight:800;margin-bottom:16px}
.dp-desc{color:var(--muted);line-height:1.78;margin-bottom:28px;font-size:17px;max-width:680px}
/* Beschreibung und Stichpunkte in einem Block mit reserviertem Platz: sonst
   wandert die Blätterleiste je nach Anzahl der Stichpunkte um bis zu 153 px
   und der Knopf springt beim Weiterklicken unter dem Zeiger weg.
   Der Bedarf steigt, je schmaler die Spalte wird — deshalb eine Leiter statt
   eines Werts. Alle Zahlen sind über die zehn Leistungsseiten gemessen. */
.dp-inhalt{min-height:292px}
@media(max-width:640px){.dp-inhalt{min-height:292px}}
@media(max-width:540px){.dp-inhalt{min-height:322px}}
@media(max-width:480px){.dp-inhalt{min-height:347px}}
@media(max-width:414px){.dp-inhalt{min-height:371px}}
@media(max-width:400px){.dp-inhalt{min-height:402px}}
@media(max-width:340px){.dp-inhalt{min-height:451px}}
@media(max-width:320px){.dp-inhalt{min-height:506px}}
/* Unter 340 px umbricht ein langer Leistungsname in zwei Zeilen, ein kurzer
   nicht — zwei Zeilen werden deshalb dort fest reserviert. */
@media(max-width:340px){.dp-title{min-height:2.3em}}
.dp-feats{list-style:none;display:flex;flex-direction:column;gap:12px;max-width:680px}
.dp-feats li{display:flex;align-items:flex-start;gap:11px;font-size:15px;color:var(--text)}
.dpck{width:20px;height:20px;flex-shrink:0;margin-top:2px;color:var(--accent)}
@media(max-width:640px){.dp-img{aspect-ratio:3/2;margin-bottom:22px}}

/* Blätterleiste zwischen den Leistungsseiten.
 * Einzeilig und nur so breit wie ihr Inhalt. Als halbbreite Karten waren es
 * 592x87 px für 48x22 px Text — 2 % Füllgrad. Fehlt ein Nachbar, bleibt die
 * Seite leer, statt einen Platzhalter zu zeigen.
 */
.blaettern{display:flex;flex-wrap:wrap;gap:14px;margin-top:64px;padding-top:32px;
  border-top:1px solid var(--border)}
.bl{display:inline-flex;align-items:center;gap:13px;min-width:0;max-width:100%;
  background:var(--bg3);border:1px solid var(--border);border-radius:100px;
  padding:0 22px;min-height:52px;
  transition:border-color .25s,background .25s,transform .25s}
.bl:hover{border-color:var(--border2);background:var(--a10)}
.bl--zurueck:hover{transform:translateX(-3px)}
.bl--weiter{margin-left:auto}
.bl--weiter:hover{transform:translateX(3px)}
.bl-pfeil{flex:0 0 auto;display:flex;align-items:center;color:var(--accent)}
.bl-pfeil svg{width:14px;height:14px}
.bl-label{font-family:var(--fm);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap}
.bl-name{font-size:16px;font-weight:700;min-width:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){
  .blaettern{flex-direction:column;gap:10px;margin-top:48px;padding-top:26px}
  .bl{width:100%;padding:0 18px}
  .bl--weiter{margin-left:0}
}

/* ── ÜBERSICHT DER LEISTUNGEN ───────────────────────────────
 * Zwei Wege durch dieselben zehn Leistungen: oben die Schnellwahl für
 * alle, die den Namen schon kennen, darunter Bahnen zum Durchsehen.
 * Bewusst ohne Nummerierung — zehn Leistungen sind keine Reihenfolge.
 */
.wahl{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:88px;list-style:none}
.wahl-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 17px;
  border:1px solid var(--border);border-radius:100px;background:var(--bg3);
  font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap;
  transition:color .2s,border-color .2s,background .2s}
.wahl-chip:hover{color:var(--accent);border-color:var(--border2);background:var(--a10)}

.bahnen{display:flex;flex-direction:column;gap:88px;list-style:none}
.bahn{position:relative;display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center}
.bahn-bild{position:relative;grid-column:1;grid-row:1;border-radius:var(--rl);
  overflow:hidden;aspect-ratio:3/2;background:var(--bg3)}
.bahn-bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.bahn:hover .bahn-bild img{transform:scale(1.05)}
.bahn-text{grid-column:2;grid-row:1;min-width:0}

/* Jede zweite Bahn spiegelverkehrt — Rhythmus statt zehnmal derselbe Riegel. */
.bahn--kehr{grid-template-columns:7fr 5fr}
.bahn--kehr .bahn-bild{grid-column:2}
.bahn--kehr .bahn-text{grid-column:1}

/* Icon und Kategorie sagen dasselbe — sie stehen deshalb nebeneinander.
   In der Bildecke kaempfte das Icon mit der Rundung des Rahmens. */
.bahn-tag{display:flex;align-items:center;gap:14px;margin-bottom:20px;
  font-family:var(--fm);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
.bahn-tag::after{content:"";flex:1;height:1px;
  background:linear-gradient(to right,var(--border2),transparent)}
.bahn-icon{flex:0 0 38px;width:38px;height:38px;display:flex;align-items:center;
  justify-content:center;background:var(--a10);border:1px solid var(--border2);
  border-radius:11px;color:var(--accent)}
.bahn-icon svg{width:19px;height:19px}
.bahn-name{font-size:clamp(26px,3.2vw,40px);font-weight:800;margin-bottom:16px}
/* Die ganze Bahn ist anklickbar, der Verweis heisst trotzdem nur wie die
   Leistung — sonst liest ein Vorleseprogramm vierzig Woerter als Linktext. */
.bahn-link::after{content:"";position:absolute;inset:0}
.bahn-name a:hover{color:var(--accent)}
.bahn-desc{color:var(--muted);font-size:17px;line-height:1.75;margin-bottom:26px;max-width:56ch}
.bahn-mehr{display:inline-flex;align-items:center;gap:10px;font-weight:700;
  font-size:15px;color:var(--accent);transition:gap .25s ease}
.bahn:hover .bahn-mehr{gap:16px}

@media(max-width:900px){
  .bahn{grid-template-columns:1fr;gap:26px}
  .bahn-bild,.bahn--kehr .bahn-bild{grid-column:1;grid-row:1}
  .bahn-text,.bahn--kehr .bahn-text{grid-column:1;grid-row:2}
  .bahnen{gap:72px}
}
@media(max-width:640px){
  .wahl{gap:7px;margin-bottom:56px}
  .wahl-chip{padding:0 14px;font-size:13.5px}
  .bahn-bild{aspect-ratio:16/10}
  .bahn-tag{gap:11px;font-size:11px}
  .bahn-desc{font-size:16px;margin-bottom:22px}
  .bahnen{gap:64px}
}

/* ── ÜBER UNS ───────────────────────────────────────────────
 * Gleiche Anschlagkante und gleiches Spaltenverhältnis wie die Bahnen
 * auf /leistungen/ — vorher stand die Seite als zentrierter Kasten von
 * 580 px in einem bildschirmhohen Hero und wirkte gestaucht.
 */
.ueber-kopf{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:center;
  margin-bottom:88px}
.ueber-text{min-width:0}
.ueber-text p{color:var(--muted);line-height:1.78;font-size:17px;max-width:58ch}
.ueber-text p + p{margin-top:14px}
.ueber-bild{position:relative;border-radius:var(--rl);overflow:hidden;aspect-ratio:4/3;
  background:var(--bg3)}
.ueber-bild img{width:100%;height:100%;object-fit:cover}

.about-vals{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none}
.aval{background:var(--bg3);border:1px solid var(--border);border-radius:var(--rl);
  padding:30px 30px 32px;transition:border-color .2s,transform .2s;min-width:0}
.aval:hover{border-color:var(--border2);transform:translateY(-3px)}
.aval-icon{width:44px;height:44px;background:var(--a10);border:1px solid var(--border2);
  border-radius:12px;display:flex;align-items:center;justify-content:center;
  color:var(--accent);margin-bottom:18px}
.aval-icon svg{width:22px;height:22px}
.aval-titel{font-size:18px;font-weight:700;margin-bottom:8px}
.aval p{font-size:15px;color:var(--muted);line-height:1.65}

@media(max-width:900px){
  .ueber-kopf{grid-template-columns:1fr;gap:32px;margin-bottom:56px}
  .ueber-bild{aspect-ratio:16/10}
  .about-vals{grid-template-columns:1fr}
}

/* ── AUFRUF ─────────────────────────────────────────────────── */
.cta{background:var(--bg);position:relative;overflow:hidden}
.cta-lines{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:48px 48px}
.cta-glow{position:absolute;inset:0;background:radial-gradient(ellipse 70% 70% at 50% 50%,var(--a10),transparent)}
.cta-i{position:relative;z-index:1;text-align:center;max-width:660px;margin:0 auto;padding:0 24px}
.cta-i h2{font-size:clamp(28px,4vw,52px);font-weight:800;margin-bottom:18px}
.cta-i h2 strong{background:linear-gradient(135deg,var(--accent),#e0f050);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cta-i p{color:var(--muted);font-size:18px;margin-bottom:40px;line-height:1.7}
@media(max-width:640px){.cta-i p{font-size:15px}.cta-i .btn{width:100%;justify-content:center}}

/* ── KONTAKT ────────────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:40px}}
.ci-list{display:flex;flex-direction:column;gap:28px;list-style:none}
.ci{display:flex;gap:18px;align-items:flex-start;min-width:0}
.ci-ic{width:46px;height:46px;flex-shrink:0;background:var(--a10);border:1px solid var(--border2);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--accent)}
.ci-ic svg{width:20px;height:20px}
.ci-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
.ci a,.ci p{font-size:16px;color:var(--muted);transition:color .2s}
.ci a{display:inline-flex;align-items:center;min-height:44px}
.ci a:hover{color:var(--accent)}
.contact-alt-title{font-size:22px;font-weight:800;margin-bottom:12px}
.contact-alt-desc{color:var(--muted);font-size:15px;line-height:1.75;margin-bottom:32px;max-width:400px}
.contact-big-btn{display:flex;align-items:center;gap:14px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rl);padding:20px 24px;font-size:17px;font-weight:700;color:var(--text);transition:border-color .25s,color .25s,transform .25s,background .25s;margin-bottom:14px;min-width:0;overflow-wrap:anywhere}
.contact-big-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateX(4px);background:var(--a10)}
.contact-big-btn svg{flex-shrink:0;color:var(--accent)}
.contact-big-btn--sec{color:var(--muted)}
.contact-big-btn--sec:hover{color:var(--accent)}
@media(max-width:640px){.contact-big-btn{padding:16px 18px;font-size:15px}}

/* ── FUSSZEILE ──────────────────────────────────────────────── */
footer{background:var(--bg2);border-top:1px solid var(--border);padding:60px 0 32px}
.fg4{display:grid;grid-template-columns:1.7fr 1.9fr 1fr 1fr;gap:40px;margin-bottom:48px}
@media(max-width:860px){.fg4{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.fg4{grid-template-columns:1fr;gap:28px}}
.fb img{height:26px;width:143px;margin-bottom:16px}
.fb p{font-size:15px;color:var(--muted);line-height:1.7;max-width:220px}
.fc{min-width:0}
.fc h2{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;color:var(--muted)}
.fc ul{list-style:none}
/* Alle zehn Leistungen stehen in der Fusszeile — vorher waren es vier,
   und die vier bekamen dadurch das Fuenffache an internen Verweisen. */
.fc-breit ul{columns:2;column-gap:26px}
.fc-breit li{break-inside:avoid}
@media(max-width:860px){.fc-breit ul{columns:1}}
.fc a{display:flex;align-items:center;min-height:44px;font-size:15px;color:var(--dim);transition:color .2s}
.fc a:hover{color:var(--accent)}
.fb2{border-top:1px solid var(--border);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--dim)}
@media(max-width:640px){.fb2{flex-direction:column;gap:6px;text-align:center}}

/* ── RECHTSTEXTE ────────────────────────────────────────────
 * Ein Impressum ist der Sache nach eine Liste aus Feld und Wert — und
 * bei 74 Wörtern in fünf Abschnitten braucht es weder Inhaltsverzeichnis
 * noch Kästen noch Nummern. Marke links, Wert rechts, Haarlinie dazwischen.
 */
.leg-wrap{background:var(--bg);min-height:100vh;padding-top:var(--nav)}
.leg-hero{background:var(--bg2);border-bottom:1px solid var(--border);padding:52px 0 44px}
.leg-hero-inner{max-width:1200px;margin:0 auto;padding:0 28px}
.leg-hero h1{font-size:clamp(26px,4.4vw,50px);font-weight:800;margin-bottom:14px;
  overflow-wrap:anywhere;hyphens:auto}
.leg-hero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.leg-meta-tag{display:inline-flex;align-items:center;gap:6px;background:var(--a10);
  border:1px solid var(--border2);color:var(--accent);padding:5px 14px;border-radius:100px;
  font-size:12px;font-weight:700;letter-spacing:.06em}

.leg-body{max-width:1200px;margin:0 auto;padding:52px 28px 96px}
.leg-zeile{display:grid;grid-template-columns:230px 1fr;gap:12px 48px;
  padding:26px 0;border-top:1px solid var(--border);
  scroll-margin-top:calc(var(--nav) + 16px)}
.leg-zeile:first-child{border-top:0;padding-top:4px}
.leg-marke{font-family:var(--fm);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);line-height:1.6;padding-top:4px;
  overflow-wrap:anywhere}
.leg-wert{font-size:16px;line-height:1.75;color:var(--text);max-width:62ch;min-width:0}
.leg-wert p{margin-bottom:10px}
.leg-wert p:last-child{margin-bottom:0}
.leg-wert ul{padding-left:20px;margin:8px 0 0}
.leg-wert li{margin-bottom:4px}
.leg-wert a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.leg-wert strong{color:var(--text);font-weight:700}
@media(max-width:760px){
  .leg-hero{padding:36px 0 30px}
  .leg-body{padding:36px 18px 64px}
  .leg-zeile{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .leg-hero-inner{padding:0 18px}
}

/* ── BEWEGUNG ───────────────────────────────────────────────
 * Die Einblendung darf den Inhalt nur verstecken, wenn JavaScript
 * sie auch wieder einblenden kann. Ohne Skript stand die Seite sonst
 * auf opacity:0 — für Besucher unsichtbar.
 */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.js .rv.in{opacity:1;transform:none}
.js .d1{transition-delay:.1s}.js .d2{transition-delay:.2s}
.js .d3{transition-delay:.3s}

.js .anim-fu{animation:fu .9s ease both}
.js .anim-fu-1{animation-delay:.1s}.js .anim-fu-2{animation-delay:.2s}
.js .anim-fu-3{animation-delay:.3s}
.js .h-dot{animation:bl 2s ease-in-out infinite}
@keyframes fu{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.2}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms;animation-iteration-count:1;transition-duration:.01ms}
  .js .rv{opacity:1;transform:none}
  .strahl{display:none}
}