/* ═══════════════════════════════════════════════════════════════════════
   DESIGNPIXELS — Designsystem "Präzision in Weiß"
   Heller, moderner SaaS-Look mit hohem Weißanteil.
   Ein Stylesheet für alle Seiten. Änderungen hier wirken überall.

   SCHRIFTEN / DSGVO — self-hosted (konform)
   Alle Schriften werden lokal aus /assets/fonts/ geladen. Es besteht KEINE
   Verbindung zu Google-Servern, keine IP-Übertragung in die USA. Damit ist
   die Anforderung des LG München I (3 O 17493/20) erfüllt.
   Schriften: Space Grotesk 500/700 · Figtree 400/500/600/700 · Space Mono 400/700
   Lizenz: SIL Open Font License 1.1 (siehe assets/fonts/OFL.txt)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Self-hosted Schriften (SIL OFL 1.1) ─────────────────────────────── */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/space-grotesk-500.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+2074,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/space-grotesk-500-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/space-grotesk-700.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+2074,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/space-grotesk-700-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:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/figtree-400.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/figtree-400-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:"Figtree";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/figtree-500.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/figtree-500-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:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/figtree-600.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/figtree-600-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:"Figtree";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/figtree-700.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Figtree";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/figtree-700-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 Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/space-mono-400.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/space-mono-400-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 Mono";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/space-mono-700.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/space-mono-700-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{
  /* Palette — hoher Weißanteil, ein Blau-Akzent, ein Grün nur für Häkchen */
  --paper:#FFFFFF;
  --mist:#F5F7FB;
  --ink:#0E1726;
  --ink-2:#334155;
  --slate:#64748B;
  --line:#E6EBF2;
  --line-2:#EFF3F8;

  --accent:#2F5BEA;
  --accent-ink:#1E40AF;
  --accent-soft:#EAF0FE;
  --ok:#16A34A;
  --ok-soft:#E7F6ED;

  --display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --body:"Figtree","Segoe UI",Roboto,system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,"Courier New",monospace;

  --mass:1180px;
  --r:16px;
  --r-sm:11px;
  --r-pill:999px;

  --shadow-sm:0 1px 2px rgba(16,23,38,.05),0 1px 3px rgba(16,23,38,.04);
  --shadow-md:0 4px 14px rgba(16,23,38,.06),0 14px 34px -16px rgba(16,23,38,.18);
  --shadow-lg:0 10px 30px rgba(16,23,38,.08),0 30px 60px -24px rgba(16,23,38,.22);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0;text-wrap:balance;color:var(--ink);}
h1{font-size:clamp(2.35rem,5.2vw,4rem);}
h2{font-size:clamp(1.85rem,3.6vw,2.85rem);}
h3{font-size:1.15rem;line-height:1.3;letter-spacing:-.01em;}
p{margin:0 0 1rem;text-wrap:pretty;}
a{color:var(--accent-ink);text-decoration-thickness:1px;text-underline-offset:3px;}
img{max-width:100%;height:auto;display:block;}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px;}

.wrap{max-width:var(--mass);margin:0 auto;padding:0 1.5rem;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--ink);color:#fff;padding:.7rem 1rem;border-radius:var(--r-sm);}

/* ─── Eyebrow mit Präzisions-Tick ─────────────────────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.72rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 1.1rem;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px;}

/* ─── Signatur: feine Messskala als Trenner ───────────────────────────── */
.skala{
  height:26px;
  background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 26px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}
.skala--gelb{
  background-image:
    repeating-linear-gradient(90deg,var(--accent) 0 2px,transparent 2px 130px),
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 26px);
}

/* ─── Buttons ─────────────────────────────────────────────────────────── */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--body);font-weight:600;font-size:.98rem;line-height:1;
  padding:.95rem 1.5rem;border-radius:var(--r-sm);border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.knopf--voll{background:var(--accent);color:#fff;box-shadow:0 6px 18px -6px rgba(47,91,234,.55);}
.knopf--voll:hover{background:var(--accent-ink);transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(47,91,234,.6);}
.knopf--leer{background:var(--paper);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-sm);}
.knopf--leer:hover{background:var(--mist);border-color:#D4DCE8;transform:translateY(-2px);}
.knopf--geist{background:transparent;color:var(--ink);border-color:transparent;}
.knopf--geist:hover{background:var(--accent-soft);color:var(--accent-ink);}
@media (prefers-reduced-motion:reduce){.knopf{transition:none;}.knopf:hover{transform:none;}}

/* ─── Kopf ────────────────────────────────────────────────────────────── */
.kopf{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.82);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line);}
.kopf__inner{display:flex;align-items:center;gap:1.5rem;min-height:72px;}
.marke{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:-.03em;text-decoration:none;color:var(--ink);margin-right:auto;}
.marke span{color:var(--accent);}
.marke img{height:34px;width:auto;display:block;}
.fuss .marke img{height:30px;}
.nav{display:flex;gap:1.7rem;}
.nav a{position:relative;font-size:.94rem;font-weight:500;text-decoration:none;color:var(--ink-2);transition:color .15s ease;}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);}
.nav a:hover,.nav a[aria-current="page"]{color:var(--accent-ink);}
.nav .nur-mobil{display:none;}
.nav-schalter{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-sm);padding:.55rem .85rem;font:inherit;font-size:.85rem;cursor:pointer;color:var(--ink);}

/* ─── Blöcke / Sektionen ──────────────────────────────────────────────── */
.block{padding:6.5rem 0;}
.block--weiss{background:var(--paper);}
.block--mist{background:var(--mist);}
.block--dunkel{background:var(--ink);color:#CBD5E1;}
.block--dunkel h2,.block--dunkel h3{color:#fff;}
.block--dunkel .eyebrow{color:#93B4FF;}
.block--dunkel .eyebrow::before{background:#93B4FF;}
.block__kopf{max-width:56ch;margin-bottom:3.5rem;}
.block__kopf p{font-size:1.15rem;color:var(--slate);margin-top:1rem;}
.block--dunkel .block__kopf p{color:#94A3B8;}
.block__kopf--mitte{margin-left:auto;margin-right:auto;text-align:center;}
.block__kopf--mitte .eyebrow{justify-content:center;}

/* ─── Seitenkopf (Unterseiten) ────────────────────────────────────────── */
.seitenkopf{background:var(--mist);border-bottom:1px solid var(--line);padding:4.5rem 0 4rem;}
.seitenkopf h1{max-width:22ch;}
.seitenkopf p{color:var(--slate);max-width:56ch;margin-top:1.2rem;font-size:1.15rem;}

/* ─── Hero ────────────────────────────────────────────────────────────── */
.hero{padding:5rem 0 4rem;position:relative;overflow:hidden;background:var(--paper);}
/* Hintergrundbild + heller Verlauf: links dicht (Text), rechts durchscheinend */
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(95deg,rgba(255,255,255,0.91) 0%,rgba(255,255,255,0.92) 26%,rgba(255,255,255,0.94) 52%,rgba(255,255,255,0.95) 74%,rgba(255,255,255,0.97) 100%),
                   url("../images/hero-ki-webdesign-ottobrunn.jpg");
  background-size:cover,cover;background-position:center,center right;background-repeat:no-repeat;}
.hero::before{content:"";position:absolute;inset:-25% -12% auto -12%;height:135%;z-index:0;pointer-events:none;
  background:radial-gradient(58% 55% at 80% 5%,var(--accent-soft) 0%,transparent 62%);}
.hero .wrap{position:relative;z-index:1;}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center;}
.hero h1{margin-bottom:1.4rem;}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero__text{font-size:1.2rem;max-width:40ch;color:var(--ink-2);margin:0 0 2rem;}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.9rem;}
.hero__beleg{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.4rem;}
.pill{
  display:inline-flex;align-items:center;gap:.5rem;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.5rem .95rem;
  font-family:var(--mono);font-size:.76rem;color:var(--ink-2);box-shadow:var(--shadow-sm);
}
.pill b{color:var(--accent-ink);font-weight:700;}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);}

/* ─── Der Check als helle Karte ───────────────────────────────────────── */
.check{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);overflow:hidden;}
.check__kopf{padding:1.5rem 1.6rem 1.2rem;border-bottom:1px solid var(--line);}
.check__kopf h2{font-size:1.3rem;}
.check__kopf p{margin:.5rem 0 0;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);}
.check__liste{list-style:none;margin:0;padding:.6rem 1.6rem 1.2rem;}
.check__liste li{display:flex;align-items:baseline;gap:.9rem;padding:.9rem 0;border-bottom:1px solid var(--line-2);font-size:.96rem;color:var(--ink-2);}
.check__liste li:last-child{border-bottom:0;}
.check__liste b{font-family:var(--mono);font-weight:700;font-size:.78rem;color:var(--accent);flex:0 0 1.6rem;}
.check__fuss{padding:0 1.6rem 1.6rem;}
.check__fuss .knopf{width:100%;}
.check__fuss small{display:block;margin-top:.85rem;font-size:.8rem;color:var(--slate);text-align:center;}

/* ─── Kennzahlen-Band ─────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.8rem;box-shadow:var(--shadow-sm);}
.stat__zahl{font-family:var(--display);font-weight:700;font-size:2.5rem;line-height:1;letter-spacing:-.03em;color:var(--ink);}
.stat__zahl span{color:var(--accent);}
.stat__label{margin-top:.6rem;font-size:.92rem;color:var(--slate);}

/* ─── Zwei Jobs ───────────────────────────────────────────────────────── */
.jobs{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}
.job{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:2.4rem;box-shadow:var(--shadow-sm);transition:box-shadow .2s ease,transform .2s ease;}
.job:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.job--akzent{background:linear-gradient(180deg,var(--accent-soft),var(--paper));border-color:#D5E1FD;}
.job h3{font-size:1.55rem;margin-bottom:1rem;}
.job p:last-child{margin-bottom:0;}
.job__marke{display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent-soft);padding:.35rem .7rem;border-radius:var(--r-pill);margin-bottom:1.4rem;}
@media (prefers-reduced-motion:reduce){.job:hover{transform:none;}}

/* ─── Leistungen ──────────────────────────────────────────────────────── */
.leistungen{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
.leistung{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:2rem;box-shadow:var(--shadow-sm);transition:box-shadow .2s ease,transform .2s ease;}
.leistung:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.leistung__ic{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem;}
.leistung__ic svg{width:22px;height:22px;}
.leistung h3{margin-bottom:.6rem;}
.leistung p{font-size:.96rem;color:var(--slate);margin:0;}
.leistung__tag{display:inline-block;margin-top:1.1rem;font-family:var(--mono);font-size:.72rem;color:var(--ok);}
.leistung__tag::before{content:"✓ ";}
@media (prefers-reduced-motion:reduce){.leistung:hover{transform:none;}}

/* ─── Branchen ────────────────────────────────────────────────────────── */
.branchen{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
.branche{display:block;position:relative;overflow:hidden;border-radius:var(--r);text-decoration:none;box-shadow:var(--shadow-sm);border:1px solid var(--line);background:var(--ink);transition:box-shadow .2s ease,transform .2s ease;}
.branche:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.branche img{width:100%;height:200px;object-fit:cover;opacity:.72;transition:opacity .25s ease,transform .5s ease;}
.branche:hover img{opacity:.6;transform:scale(1.04);}
.branche__label{position:absolute;left:1.3rem;right:1.3rem;bottom:1.2rem;color:#fff;}
.branche__label strong{font-family:var(--display);font-weight:700;font-size:1.2rem;display:block;line-height:1.15;}
.branche__label span{font-family:var(--mono);font-size:.72rem;color:#BFD1FF;}
@media (prefers-reduced-motion:reduce){.branche:hover,.branche:hover img{transform:none;}}

/* ─── Ablauf (echte Reihenfolge → Nummerierung berechtigt) ────────────── */
.ablauf{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;counter-reset:s;margin:0;padding-inline-start:0;list-style:none;}
.ablauf li{list-style:none;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.9rem;box-shadow:var(--shadow-sm);position:relative;}
.ablauf li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--mono);font-weight:700;font-size:.85rem;color:var(--accent);background:var(--accent-soft);width:2.4rem;height:2.4rem;display:flex;align-items:center;justify-content:center;border-radius:10px;margin-bottom:1.1rem;}
.ablauf h3,.ablauf__titel{font-size:1.15rem;font-weight:700;font-family:var(--display);line-height:1.25;margin:0 0 .5rem;color:var(--ink);}
.ablauf p{color:var(--slate);margin:0 0 1rem;font-size:.95rem;}
.ablauf .dauer{font-family:var(--mono);font-size:.74rem;color:var(--accent-ink);padding-top:.9rem;border-top:1px solid var(--line-2);display:block;}

/* ─── Pakete ──────────────────────────────────────────────────────────── */
.pakete{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:start;}
.paket{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:2.2rem;box-shadow:var(--shadow-sm);}
.paket--empfohlen{border:2px solid var(--accent);box-shadow:var(--shadow-lg);position:relative;transform:translateY(-8px);}
.paket--empfohlen::after{content:"Meistgewählt";position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;padding:.28rem .9rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-pill);}
.paket h3{font-size:1.4rem;margin-bottom:.4rem;}
.paket__fuer{font-size:.92rem;color:var(--slate);margin-bottom:1.4rem;min-height:2.8rem;}
.paket__preis{font-family:var(--display);font-weight:700;font-size:2rem;letter-spacing:-.03em;padding-bottom:1.4rem;border-bottom:1px solid var(--line);margin-bottom:1.4rem;}
.paket__preis small{display:block;font-family:var(--body);font-weight:400;font-size:.78rem;color:var(--slate);letter-spacing:0;margin-top:.3rem;}
.paket ul{list-style:none;margin:0 0 1.8rem;padding:0;font-size:.95rem;}
.paket li{padding:.5rem 0 .5rem 1.8rem;position:relative;color:var(--ink-2);}
.paket li::before{content:"";position:absolute;left:0;top:.62rem;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--ok-soft);}
.paket li::after{content:"";position:absolute;left:.32rem;top:.86rem;width:.42rem;height:.24rem;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg);}
.paket li.aus{color:#AEB7C4;}
.paket li.aus::before{background:var(--line-2);}
.paket li.aus::after{border-color:#C4CCD8;}
.paket .knopf{width:100%;}

/* ─── Region ──────────────────────────────────────────────────────────── */
.region{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}
.orte{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:1.6rem 0 0;padding:0;}
.orte li{font-family:var(--mono);font-size:.8rem;background:var(--paper);border:1px solid var(--line);padding:.42rem .8rem;border-radius:var(--r-pill);color:var(--ink-2);}
.region img{border-radius:var(--r);box-shadow:var(--shadow-md);border:1px solid var(--line);}

/* ─── FAQ ─────────────────────────────────────────────────────────────── */
.faq{max-width:840px;margin:0 auto;}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:.85rem;box-shadow:var(--shadow-sm);overflow:hidden;}
.faq summary{font-family:var(--display);font-weight:500;font-size:1.08rem;padding:1.3rem 3rem 1.3rem 1.4rem;cursor:pointer;list-style:none;position:relative;color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"";position:absolute;right:1.4rem;top:1.55rem;width:11px;height:11px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .2s ease;}
.faq details[open] summary::after{transform:rotate(-135deg);}
.faq .antwort{padding:0 1.4rem 1.4rem;color:var(--ink-2);}
.faq .antwort p:last-child{margin-bottom:0;}

/* ─── Kontakt & Formular ──────────────────────────────────────────────── */
.kontakt{display:grid;grid-template-columns:.9fr 1.1fr;gap:4rem;align-items:start;}
.nap{font-style:normal;}
.nap a{color:var(--accent-ink);text-decoration:none;}
.nap a:hover{text-decoration:underline;}
.nap dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-top:1.4rem;}
.nap dd{margin:.2rem 0 0;font-size:1.05rem;line-height:1.7;color:var(--ink);}
.formular{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:2.2rem;box-shadow:var(--shadow-md);}
.feld{margin-bottom:1.15rem;}
.feld label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.45rem;color:var(--ink-2);}
.feld input,.feld select,.feld textarea{width:100%;padding:.85rem .95rem;border:1px solid var(--line);border-radius:var(--r-sm);font:inherit;font-size:.98rem;background:var(--mist);color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--accent);background:var(--paper);box-shadow:0 0 0 4px var(--accent-soft);}
.feld textarea{min-height:120px;resize:vertical;}
.zustimmung{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;color:var(--slate);margin-bottom:1.4rem;}
.zustimmung input{margin-top:.25rem;flex:0 0 auto;width:auto;accent-color:var(--accent);}
.honig{position:absolute;left:-9999px;}
.hinweis{padding:.95rem 1.2rem;border-radius:var(--r-sm);background:var(--accent-soft);border:1px solid #D5E1FD;font-size:.92rem;margin-bottom:1.4rem;color:var(--accent-ink);}
.hinweis--fehler{background:#FDECEC;border-color:#F5C6C6;color:#B4342A;}

/* ─── Rechtstexte ─────────────────────────────────────────────────────── */
.recht{max-width:800px;padding:4.5rem 0 6rem;}
.recht h2{font-family:var(--display);font-size:1.5rem;margin:3rem 0 1rem;padding-top:1.8rem;border-top:1px solid var(--line);}
.recht h2:first-of-type{margin-top:0;border-top:0;padding-top:0;}
.recht h3{font-size:1.05rem;margin:1.8rem 0 .6rem;font-family:var(--body);font-weight:700;letter-spacing:0;}
.recht p,.recht li{font-size:1rem;color:var(--ink-2);}
.recht ul{padding-left:1.2rem;}
.recht li{margin-bottom:.4rem;}
.recht strong{color:var(--ink);}
.recht a{color:var(--accent-ink);}
.recht address{font-style:normal;background:var(--mist);border:1px solid var(--line);padding:1.2rem 1.4rem;border-radius:var(--r-sm);line-height:1.8;color:var(--ink);}
.recht__stand{font-family:var(--mono);font-size:.78rem;color:var(--slate);margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);}
.platzhalter{background:#FFF3CD;color:#7A5B00;padding:.05em .4em;font-weight:600;border-radius:4px;border:1px solid #F5E3A3;}
.inhalt-nav{background:var(--mist);border:1px solid var(--line);border-radius:var(--r-sm);padding:1.5rem 1.7rem;margin-bottom:3rem;}
.inhalt-nav h2{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;border:0;padding:0;margin:0 0 .8rem;color:var(--accent-ink);}
.inhalt-nav ol{margin:0;padding-left:1.2rem;font-size:.94rem;}
.inhalt-nav li{margin-bottom:.3rem;}
.inhalt-nav a{color:var(--ink-2);}
.muster{background:var(--mist);border:1px dashed #C7D2E4;border-radius:var(--r-sm);padding:1.8rem;font-family:var(--mono);font-size:.86rem;line-height:2;color:var(--ink-2);}

/* ─── CTA-Band (der eine dunkle Moment) ───────────────────────────────── */
.cta-band{text-align:center;}
.cta-band h2{max-width:22ch;margin:0 auto;}
.cta-band p{color:#94A3B8;max-width:50ch;margin:1.2rem auto 2rem;font-size:1.1rem;}

/* ─── Fuß ─────────────────────────────────────────────────────────────── */
.fuss{background:var(--ink);color:#94A3B8;padding:4rem 0 2rem;font-size:.92rem;}
.fuss__grid{display:grid;grid-template-columns:1.6fr 1fr 1.2fr 1fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.1);}
.fuss .marke{color:#fff;}
.fuss h3,.fuss__titel{font-family:var(--mono);font-size:.74rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:#93B4FF;margin:0 0 1rem;}
.fuss ul{list-style:none;margin:0;padding:0;}
.fuss li{padding:.28rem 0;}
.fuss a{color:#94A3B8;text-decoration:none;transition:color .15s ease;}
.fuss a:hover{color:#fff;}
.fuss__unten{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-top:1.5rem;font-size:.84rem;}
.fuss__unten a{color:#94A3B8;}

/* ─── Reveal ──────────────────────────────────────────────────────────── */
.rein{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
.rein.da{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.rein{opacity:1;transform:none;transition:none;}}

/* ─── Mobil ───────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .fuss__grid{grid-template-columns:repeat(2,1fr);}
  .hero__grid,.region,.kontakt{grid-template-columns:1fr;gap:2.5rem;}
  /* Mobil: heller Bildteil zeigen + kräftigerer Weißschleier (schmales Format vergrößert stark) */
  .hero::after{background-image:linear-gradient(rgba(255,255,255,.94),rgba(255,255,255,.91)),url("../images/hero-ki-webdesign-ottobrunn.jpg");
    background-position:center,center left;background-size:cover,cover;}
  .stats,.ablauf{grid-template-columns:1fr 1fr;}
  .leistungen,.branchen,.pakete,.jobs{grid-template-columns:1fr 1fr;}
  .fuss__grid{grid-template-columns:1fr 1fr;}
  .paket--empfohlen{transform:none;}
  .block{padding:4.5rem 0;}
}
/* Kopfzeile klappt bereits ab 980px ein — sonst sprengen Navigation und
   beide Buttons zusammen die Zeile (Überlauf zwischen 681 und 900px). */
@media (max-width:980px){
  .nav{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:.5rem 1.5rem 1.2rem;box-shadow:var(--shadow-md);}
  .nav.offen{display:flex;}
  .nav a{padding:.85rem 0;border-bottom:1px solid var(--line-2);}
  .nav .nur-mobil{display:block;color:var(--accent-ink);font-weight:600;}
  .nav-schalter{display:block;}
  /* Terminvereinbarung steckt im Menü — der Haupt-CTA bleibt sichtbar */
  .kopf .knopf--termin{display:none;}
}
@media (max-width:680px){
  .stats,.leistungen,.branchen,.pakete,.jobs,.ablauf,.fuss__grid{grid-template-columns:1fr;}
  .hero{padding:3rem 0 2.5rem;}
  .kopf .knopf{display:none;}
}


/* ═══ Leben & Bewegung (respektiert prefers-reduced-motion) ═════════════ */
@media (prefers-reduced-motion:no-preference){

  /* Hero-Glow driftet langsam */
  .hero::before{animation:heroDrift 22s ease-in-out infinite alternate;}
  @keyframes heroDrift{0%{transform:translate(0,0) scale(1);}100%{transform:translate(-5%,4%) scale(1.1);}}

  /* Messskala: Akzent-Tick wandert entlang der Linie (Signatur lebt) */
  .skala--gelb{animation:tickMove 6s linear infinite;}
  @keyframes tickMove{to{background-position:130px 0,0 0;}}

  /* Gestaffelte Einblendung ganzer Karten-Gruppen */
  .stagger > *{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease;}
  .stagger.in > *{opacity:1;transform:none;}

  /* Leistungs-Icon reagiert beim Hover der Karte */
  .leistung__ic{transition:transform .25s ease,background .25s ease;}
  .leistung:hover .leistung__ic{transform:scale(1.1) rotate(-4deg);background:var(--accent);color:#fff;}

  /* FAQ-Antwort gleitet sanft auf */
  .faq details[open] .antwort{animation:faqOpen .3s ease;}
  @keyframes faqOpen{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}

  /* Primär-Button: dezenter Puls-Schimmer beim Hover */
  .knopf--voll{position:relative;overflow:hidden;}
  .knopf--voll::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);}
  .knopf--voll:hover::after{animation:sheen .7s ease;}
  @keyframes sheen{to{left:140%;}}
}

/* Reduced-Motion: alles ruhig, nichts versteckt */
@media (prefers-reduced-motion:reduce){
  .stagger > *{opacity:1;transform:none;}
}

/* ═══ Standortkarte (statisch, DSGVO-konform) ══════════════════════════ */
.karte{margin:0;}
.karte figcaption{margin-top:.85rem;font-family:var(--mono);font-size:.78rem;color:var(--slate);text-align:center;}
/* Leistungs-Intro auf Desktop in einer Zeile */
@media (min-width:1024px){.block__kopf p.einzeilig{white-space:nowrap;max-width:none;}}

/* ═══ Ihr Ansprechpartner (Trust-Block in Leistungen) ══════════════════ */
.chef{margin-top:4.5rem;padding-top:4rem;border-top:1px solid var(--line);}
.chef__bild{margin:0 0 2.75rem;}
.chef__bild img{width:100%;height:auto;display:block;border-radius:var(--r);box-shadow:var(--shadow-lg);border:1px solid var(--line);}
.chef__text{max-width:66ch;margin:0 auto;text-align:center;}
.chef__text h3{font-size:clamp(1.5rem,2.6vw,2rem);margin:.5rem 0 1rem;}
.chef__text p{color:var(--slate);}
.chef__name{margin-top:1.5rem;font-family:var(--mono);font-size:.8rem;color:var(--ink-2);}
@media (max-width:820px){.chef{margin-top:3rem;padding-top:2.5rem;}.chef__bild{margin-bottom:2rem;}}

/* ═══ Versprechen-Karten ═══════════════════════════════════════════════ */
.versprechen{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;}
.vers{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.8rem 1.7rem;
  box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease;}
.vers:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.vers__nr{display:inline-block;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;
  color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:.28rem .7rem;margin-bottom:1rem;}
.vers h3,.vers__titel{font-size:1.12rem;font-weight:700;font-family:var(--display);line-height:1.3;margin:0 0 .6rem;color:var(--ink);}
.vers p{color:var(--slate);font-size:.96rem;margin:0;}
@media (max-width:980px){.versprechen{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.versprechen{grid-template-columns:1fr;gap:1.1rem;}}

/* ═══ Textumbruch: lange deutsche Komposita und Formularlinien ══════════
   „Datenschutzerklärung", „Elektronikentwicklung" oder die Unterstrich-
   Linien im Muster-Widerrufsformular passen auf schmalen Displays sonst
   nicht in die Zeile und erzeugen horizontales Scrollen. */
h1,h2,h3,h4{overflow-wrap:break-word;hyphens:auto;}
p,li,dd,dt,figcaption,summary,.antwort,address{overflow-wrap:break-word;}
.muster{overflow-wrap:anywhere;}

/* Grid-Elemente schrumpfen sonst nicht unter ihre Inhaltsbreite
   (min-width:auto), wodurch lange Wörter das Raster sprengen. */
.jobs>*,.leistungen>*,.branchen>*,.pakete>*,.stats>*,.ablauf>*,.versprechen>*,
.hero__grid>*,.region>*,.kontakt>*,.fuss__grid>*{min-width:0;}