:root {
    --bg: #071426;
    --bg-2: #0A192F;
    --panel: #0D1F38;
    --petrol: #0E4B68;
    --teal: #2EA8B6;
    --sky: #5CE1E6;
    --text: #EEF3F7;
    --muted: #8E9CB0;
    --line: rgba(255,255,255,0.09);
    --line-2: rgba(255,255,255,0.16);
  }
  * { box-sizing: border-box; }
  html { background: var(--bg); scroll-behavior: smooth; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    background: var(--bg); color: var(--text); line-height: 1.6;
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
  }
  /* feines Korn gegen den "glatten" Digital-Look */
  body::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .07; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
  h1, h2, h3 { font-family: 'Manrope', sans-serif; margin: 0; letter-spacing: -0.03em; }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; position: relative; }
  @media (max-width: 600px) { .wrap { padding: 0 20px; } }
  .mono { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .04em; color: var(--muted); }
  .mono b { color: var(--sky); font-weight: 500; }

  /* ---------- Header ---------- */
  header { position: relative; z-index: 5; }
  header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 88px; }
  header img { height: 38px; width: auto; display: block; }
  header nav { display: flex; align-items: center; gap: 30px; font-size: 14px; }
  header nav a { text-decoration: none; color: var(--muted); transition: color .15s; }
  header nav a:hover { color: var(--text); }
  header nav .tel { color: var(--text); font-weight: 500; padding-left: 30px; border-left: 1px solid var(--line-2); }
  @media (max-width: 820px) { header nav a:not(.tel) { display: none; } header nav .tel { border: 0; padding: 0; } }

  /* ---------- Hero ---------- */
  .stage { position: relative; overflow: hidden; }
  .hero { position: relative; padding: 56px 0 64px; }
  .stage::before {
    content: ""; position: absolute; width: 1100px; height: 1100px; right: -380px; top: -520px; pointer-events: none;
    background: radial-gradient(closest-side, rgba(14,75,104,0.85), rgba(14,75,104,0) 100%);
  }
  .hero .wrap:not(.pulse-wrap) { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end; }
  @media (max-width: 900px) { .hero .wrap:not(.pulse-wrap) { grid-template-columns: 1fr; gap: 48px; } .hero { padding-top: 28px; } }
  .hero .mono { display: block; margin-bottom: 30px; }
  .hero h1 {
    font-weight: 800; font-size: clamp(44px, 7.4vw, 92px); line-height: .98; margin-bottom: 32px;
  }
  .hero h1 .soft { color: var(--muted); font-weight: 600; }
  .hero .lead { font-size: clamp(16.5px, 1.9vw, 19px); color: #B6C2D1; max-width: 560px; margin: 0 0 40px; }
  .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
  .btn {
    display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
    background: var(--text); color: var(--bg); font-weight: 600; font-size: 15px;
    padding: 16px 26px; border-radius: 2px; transition: background .2s, transform .2s;
  }
  .btn:hover { background: var(--sky); }
  .btn .arr { transition: transform .2s; }
  .btn:hover .arr { transform: translateX(4px); }
  .tlink { text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--line-2); padding-bottom: 3px; transition: border-color .2s, color .2s; }
  .tlink:hover { color: var(--sky); border-color: var(--sky); }

  /* Foto in Duoton */
  .portrait { position: relative; margin: 0; }
  .photo { position: relative; aspect-ratio: 4 / 5; background: var(--panel); overflow: hidden; }
  .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.95); }
  .photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,75,104,0) 40%, rgba(7,20,38,.75) 100%), #0E4B68; mix-blend-mode: color; opacity: .55; pointer-events: none; }
  .ph { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
  .ph svg { width: 74%; height: auto; fill: #14304D; }
  .ph span { position: absolute; top: 16px; left: 16px; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--muted); }
  .portrait figcaption {
    position: absolute; left: -1px; bottom: 28px; transform: translateX(-28%);
    background: var(--bg); border: 1px solid var(--line-2); padding: 14px 18px; min-width: 220px;
  }
  @media (max-width: 900px) { .portrait figcaption { transform: none; left: 16px; bottom: 16px; } }
  .portrait figcaption strong { display: block; font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 700; }
  .portrait figcaption span { font-size: 13px; color: var(--muted); }

  /* Impuls-Linie */
  .pulse { position: relative; margin-top: 64px; height: 150px; }
  @media (max-width: 900px) { .pulse { margin-top: 40px; height: 100px; } }
  .pulse svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; overflow: visible; }
  .pulse .base { stroke: var(--line-2); stroke-width: 1; fill: none; }
  .pulse .sig {
    stroke: url(#sigGrad); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: draw 2.6s cubic-bezier(.6,0,.2,1) .3s forwards;
    filter: drop-shadow(0 0 6px rgba(92,225,230,.45));
  }
  .pulse .dot { position: absolute; right: -5px; top: calc(22 / 150 * 100% - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 4px rgba(92,225,230,.18), 0 0 16px rgba(92,225,230,.9); opacity: 0; animation: show .3s ease 2.8s forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes show { to { opacity: 1; } }
  .pulse .labels { position: absolute; left: 0; right: 0; bottom: -30px; display: flex; justify-content: space-between; }

  /* ---------- Leistungen ---------- */
  .services { padding: 120px 0 100px; }
  @media (max-width: 900px) { .services { padding: 88px 0 64px; } }
  .services .wrap { display: grid; grid-template-columns: 320px 1fr; gap: 64px; }
  @media (max-width: 900px) { .services .wrap { grid-template-columns: 1fr; gap: 32px; } }
  .services .side { position: sticky; top: 40px; align-self: start; }
  @media (max-width: 900px) { .services .side { position: static; } }
  .services h2 { font-size: clamp(32px, 3.8vw, 46px); font-weight: 800; line-height: 1.05; margin: 14px 0 18px; }
  .services .side p { color: var(--muted); margin: 0; }
  .rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
  .rows li {
    position: relative; display: grid; grid-template-columns: 64px 1fr 1.25fr; gap: 24px; align-items: baseline;
    padding: 30px 0; border-bottom: 1px solid var(--line);
  }
  .rows li::before {
    content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0;
    background: linear-gradient(90deg, var(--sky), var(--teal)); transition: width .5s cubic-bezier(.6,0,.2,1);
  }
  .rows li:hover::before { width: 100%; }
  @media (max-width: 760px) { .rows li { grid-template-columns: 44px 1fr; gap: 6px 14px; padding: 24px 0; } .rows li p { grid-column: 2; } }
  .rows .no { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--sky); }
  .rows h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; letter-spacing: -0.02em; }
  .rows p { margin: 0; color: var(--muted); font-size: 15.5px; }

  /* ---------- Fakten ---------- */
  .facts { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .facts .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
  .facts .f { padding: 40px 28px 40px 0; }
  .facts .f + .f { padding-left: 28px; border-left: 1px solid var(--line); }
  @media (max-width: 900px) {
    .facts .wrap { grid-template-columns: 1fr 1fr; }
    .facts .f { padding: 28px 18px 28px 0; }
    .facts .f:nth-child(3) { border-left: 0; padding-left: 0; }
    .facts .f:nth-child(n+3) { border-top: 1px solid var(--line); }
  }
  @media (max-width: 500px) { .facts .wrap { grid-template-columns: 1fr; } .facts .f, .facts .f + .f { border-left: 0; padding: 22px 0; } .facts .f + .f { border-top: 1px solid var(--line); } }
  .facts .mono { display: block; margin-bottom: 10px; }
  .facts p { margin: 0; font-size: 15.5px; line-height: 1.5; }

  /* ---------- Kontakt ---------- */
  .contact { position: relative; padding: 120px 0 48px; overflow: hidden; }
  .contact::before {
    content: ""; position: absolute; width: 900px; height: 900px; left: -420px; bottom: -520px; pointer-events: none;
    background: radial-gradient(closest-side, rgba(14,75,104,0.7), rgba(14,75,104,0));
  }
  @media (max-width: 900px) { .contact { padding: 88px 0 40px; } }
  .contact .mono { display: block; margin-bottom: 22px; }
  .contact h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; line-height: 1.1; max-width: 640px; margin-bottom: 40px; color: #B6C2D1; }
  .contact h2 strong { color: var(--text); font-weight: 800; }
  .bignum {
    display: inline-block; text-decoration: none; font-family: 'Manrope', sans-serif; font-weight: 800;
    font-size: clamp(42px, 8.6vw, 112px); line-height: 1; letter-spacing: -0.04em;
    background: linear-gradient(90deg, var(--text) 0%, var(--text) 50%, var(--sky) 50%, var(--teal) 100%);
    background-size: 200% 100%; background-position: 0 0;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    transition: background-position .6s cubic-bezier(.6,0,.2,1);
  }
  .bignum:hover { background-position: -100% 0; }
  .cinfo { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 18px 64px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line-2); }
  @media (max-width: 760px) { .cinfo { grid-template-columns: 1fr; } }
  .cinfo .mono { margin-bottom: 6px; }
  .cinfo a, .cinfo span.v { font-size: 17px; font-weight: 500; text-decoration: none; }
  .cinfo a:hover { color: var(--sky); }
  .foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 96px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
  .foot a { text-decoration: none; color: var(--text); }
  .foot a:hover { color: var(--sky); }

  /* ---------- Bewegung ---------- */
  .rv { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
  .rv.in { opacity: 1; transform: none; }
  .no-js .rv { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01s !important; animation-delay: 0s !important; transition: none !important; }
    .rv { opacity: 1; transform: none; }
  }

  /* ===== Brand-Board-Flächen (v2) ===== */
  /* Leistungen auf surface-50, Text ink-950, Akzente teal/cyan */
  .services { background: #F8FAFC; color: #0A192F; }
  .services .mono { color: #5A6B80; }
  .services .mono b { color: #1D7893; }
  .services .side p { color: #4A5A6E; }
  .rows { border-top: 1px solid #E2E8F0; padding-left: 44px; position: relative; }
  .rows li { border-bottom: 1px solid #E2E8F0; }
  .rows li::before { display: none; }
  .rows .no { color: #1D7893; }
  .rows p { color: #4A5A6E; }
  .rows h3 { transition: color .3s; }
  /* Impuls-Schiene */
  .rail { position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: #E2E8F0; }
  .rail-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: linear-gradient(180deg, #5CE1E6, #2EA8B6 60%, #1D7893); }
  .rail-fill::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #2EA8B6; box-shadow: 0 0 0 4px rgba(46,168,182,.2), 0 0 14px rgba(46,168,182,.7); }
  .rows .node { position: absolute; left: -44px; top: 37px; width: 16px; height: 16px; border-radius: 50%; background: #F8FAFC; border: 2px solid #CBD5E1; transition: border-color .3s, background .3s, box-shadow .3s; }
  @media (max-width: 760px) { .rows .node { top: 29px; } }
  .rows li.on .node { border-color: #2EA8B6; background: #2EA8B6; box-shadow: 0 0 0 4px rgba(46,168,182,.18); }
  .rows li.on h3 { color: #0E4B68; }

  .rows p { hyphens: auto; -webkit-hyphens: auto; }
  /* Fakten auf petrol-800 */
  .facts { background: #0E4B68; border: 0; }
  .facts .f + .f { border-left-color: rgba(255,255,255,0.14); }
  .facts .mono { color: #5CE1E6; }
  @media (max-width: 900px) { .facts .f:nth-child(n+3) { border-top-color: rgba(255,255,255,0.14); } }
  @media (max-width: 500px) { .facts .f + .f { border-top-color: rgba(255,255,255,0.14); } }

  /* Kontakt ruhiger */
  .contact { background: #0A192F; }
  .contact h2 { margin-bottom: 0; }
  .cinfo { grid-template-columns: 1.3fr 1.3fr 1fr; justify-content: stretch; gap: 24px 48px; margin-top: 44px; }
  @media (max-width: 760px) { .cinfo { grid-template-columns: 1fr; } }
  .cinfo .phone { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.02em; line-height: 1.15; }
  .cinfo .phone:hover { color: #5CE1E6; }

  /* ===== Vorgehen ===== */
  .process { background: #0A192F; padding: 110px 0 100px; border-top: 1px solid var(--line); }
  @media (max-width: 900px) { .process { padding: 80px 0 72px; } }
  .process .head { display: grid; grid-template-columns: 320px 1fr; gap: 64px; align-items: end; margin-bottom: 56px; }
  @media (max-width: 900px) { .process .head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 40px; } }
  .process h2 { font-size: clamp(32px, 3.8vw, 46px); font-weight: 800; line-height: 1.05; margin-top: 14px; }
  .process .head p { margin: 0; color: var(--muted); max-width: 520px; }
  .steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; list-style: none; margin: 0; padding: 34px 0 0; }
  .steps::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line-2); }
  .steps .bar { position: absolute; left: 0; top: 6px; height: 3px; width: 0; background: linear-gradient(90deg, #2EA8B6, #5CE1E6); transition: width 1.8s cubic-bezier(.6,0,.2,1) .2s; box-shadow: 0 0 10px rgba(92,225,230,.5); }
  .steps.in .bar { width: 100%; }
  .steps li { position: relative; }
  .steps li::before { content: ""; position: absolute; top: -34px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: #0A192F; border: 2px solid var(--line-2); transition: border-color .4s, background .4s; }
  .steps.in li::before { border-color: #5CE1E6; background: #2EA8B6; }
  .steps.in li:nth-of-type(1)::before { transition-delay: .3s; } .steps.in li:nth-of-type(2)::before { transition-delay: .8s; }
  .steps.in li:nth-of-type(3)::before { transition-delay: 1.3s; } .steps.in li:nth-of-type(4)::before { transition-delay: 1.8s; }
  .steps .mono { display: block; margin-bottom: 12px; color: var(--sky); }
  .steps h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
  .steps p { margin: 0; color: var(--muted); font-size: 15px; }
  @media (max-width: 900px) {
    .steps { grid-template-columns: 1fr 1fr; row-gap: 48px; }
    .steps::before, .steps .bar { display: none; }
    .steps li::before { top: -26px; }
  }
  @media (max-width: 520px) { .steps { grid-template-columns: 1fr; row-gap: 40px; } }

  /* Skip-Link */
  .skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: #fff; color: #0A192F; padding: 10px 16px; font-weight: 600; text-decoration: none; }
  .skip:focus { top: 16px; }
  .foot nav { display: flex; gap: 22px; }

  /* ===== Rechtsseiten ===== */
  .legal-top { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
  .legal-top::before { content: ""; position: absolute; width: 900px; height: 900px; right: -360px; top: -560px; pointer-events: none; background: radial-gradient(closest-side, rgba(14,75,104,0.8), rgba(14,75,104,0)); }
  .legal-top .title { padding-top: 40px; padding-bottom: 56px; }
  .legal-top h1 { font-size: clamp(38px, 6vw, 64px); font-weight: 800; line-height: 1; margin-top: 18px; }
  .legal { background: #F8FAFC; color: #0A192F; padding: 72px 0 96px; }
  .legal .wrap { display: grid; grid-template-columns: 240px 1fr; gap: 64px; }
  @media (max-width: 860px) { .legal .wrap { grid-template-columns: 1fr; gap: 28px; } .legal { padding: 48px 0 64px; } }
  .legal aside { position: sticky; top: 32px; align-self: start; }
  @media (max-width: 860px) { .legal aside { position: static; } }
  .legal aside .mono { color: #5A6B80; display: block; margin-bottom: 14px; }
  .legal aside a { display: block; text-decoration: none; color: #4A5A6E; font-size: 14px; padding: 5px 0; border-left: 2px solid #E2E8F0; padding-left: 12px; }
  .legal aside a:hover { color: #0E4B68; border-color: #2EA8B6; }
  @media (max-width: 860px) { .legal aside { display: none; } }
  .legal article { max-width: 720px; }
  .legal section { padding: 0 0 30px; margin-bottom: 30px; border-bottom: 1px solid #E2E8F0; scroll-margin-top: 24px; }
  .legal section:last-child { border-bottom: 0; }
  .legal h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; }
  .legal h3 { font-size: 16.5px; font-weight: 700; margin: 20px 0 8px; }
  .legal p, .legal li { font-size: 15.5px; line-height: 1.75; color: #2A3646; }
  .legal p { margin: 0 0 12px; }
  .legal ul { margin: 0 0 12px; padding-left: 20px; }
  .legal a { color: #1D7893; text-decoration: none; font-weight: 500; }
  .legal a:hover { text-decoration: underline; }
  .legal .card { background: #fff; border: 1px solid #E2E8F0; border-left: 3px solid #2EA8B6; padding: 22px 24px; margin-bottom: 30px; }
  .legal .card p { color: #0A192F; margin: 0; }
  .legal .muted { color: #5A6B80; }
  .legal .todo { background: #FFF6D6; color: #6B4E00; padding: 1px 6px; font-size: 14px; font-weight: 600; }
  .legal-foot { background: #0A192F; }
  .legal-foot .foot { margin-top: 0; border-top: 0; padding: 26px 0 32px; }

  /* Zertifikate (breites Feld) */
  .facts .wrap { grid-template-columns: 2fr 1fr 1fr; }
  .certs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
  .certs li { position: relative; padding-left: 16px; font-size: 15.5px; line-height: 1.4; }
  .certs li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: #5CE1E6; }
  .certs small { display: block; font-size: 12.5px; color: rgba(255,255,255,0.6); margin-top: 2px; }
  @media (max-width: 900px) {
    .facts .wrap { grid-template-columns: 1fr 1fr; }
    .facts .f-certs { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
    .facts .f:nth-child(2) { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.14); }
    .facts .f:nth-child(3) { border-left: 1px solid rgba(255,255,255,0.14); padding-left: 18px; border-top: 1px solid rgba(255,255,255,0.14); }
  }
  @media (max-width: 500px) {
    .facts .wrap { grid-template-columns: 1fr; }
    .certs { grid-template-columns: 1fr; }
    .facts .f:nth-child(3) { border-left: 0; padding-left: 0; }
  }

  /* Rechtsseiten: Impuls-Linie und Kontaktliste */
  .legal-top .title { padding-bottom: 20px; }
  .legal-pulse { height: 60px; margin-bottom: 28px; }
  .legal-pulse svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 5px rgba(92,225,230,.35)); }
  .legal dl.kv { display: grid; grid-template-columns: 110px 1fr; margin: 0; border-top: 1px solid #E2E8F0; }
  .legal dl.kv dt, .legal dl.kv dd { margin: 0; padding: 11px 0; border-bottom: 1px solid #E2E8F0; font-size: 15.5px; }
  .legal dl.kv dt { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: #5A6B80; padding-top: 14px; }
  .legal dl.kv dd { color: #0A192F; font-weight: 500; }
  .legal strong { color: #0A192F; }

  /* ===== Kopfbereich v3 (Foto freigestellt, Naturfarben) ===== */
  .home header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; }
  .home header.stuck { background: rgba(7,20,38,0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: var(--line); }
  .home header .wrap { height: 80px; }
  .hero2 { position: relative; overflow: hidden; padding-top: 110px; min-height: min(860px, 100vh); display: flex; }
  .hero2-grid { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; }
  .hero2-text { align-self: center; padding: 24px 0 170px; }
  .hero2-text .mono { display: block; margin-bottom: 28px; }
  .hero2 h1 { font-weight: 800; font-size: clamp(44px, 6.6vw, 88px); line-height: .98; margin-bottom: 28px; }
  .hero2 h1 .soft { color: var(--muted); font-weight: 600; }
  .hero2 .lead { font-size: clamp(16.5px, 1.6vw, 19px); color: #B6C2D1; max-width: 540px; margin: 0 0 38px; }
  .hero2-person { position: relative; margin: 0; align-self: end; display: flex; justify-content: center; align-items: flex-end; min-height: 100%; }
  .hero2-person img { position: relative; z-index: 2; display: block; height: min(660px, 76vh); width: auto; max-width: none;
    filter: drop-shadow(0 30px 40px rgba(0,0,0,.35)); opacity: 0; transform: translateY(24px); animation: rise 1.1s cubic-bezier(.2,.7,.2,1) .25s forwards; }
  @keyframes rise { to { opacity: 1; transform: none; } }
  .hero2-person .halo { position: absolute; z-index: 0; left: 50%; bottom: 8%; width: 640px; height: 640px; margin-left: -320px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(14,75,104,.95), rgba(14,75,104,.35) 60%, rgba(14,75,104,0)); }
  .hero2-person .ring { position: absolute; z-index: 1; left: 50%; bottom: 14%; width: 520px; height: 520px; margin-left: -260px; border-radius: 50%;
    border: 1px solid rgba(92,225,230,.22); }
  .hero2-person .ring::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid transparent; border-top-color: #5CE1E6; transform: rotate(-38deg); filter: drop-shadow(0 0 6px rgba(92,225,230,.6)); }
  .hero2-person figcaption { position: absolute; z-index: 3; left: 0; bottom: 64px; background: rgba(7,20,38,.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid var(--line-2); border-left: 2px solid #2EA8B6; padding: 13px 18px; }
  .hero2-person figcaption strong { display: block; font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 700; }
  .hero2-person figcaption span { font-size: 13px; color: var(--muted); }
  .hero2-pulse { position: absolute; z-index: 1; left: 0; width: 100%; bottom: 44px; height: 120px; overflow: visible; pointer-events: none; }
  .hero2-pulse .base { stroke: var(--line-2); stroke-width: 1; fill: none; }
  .hero2-pulse .sig { stroke: url(#sigGrad); stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round;
    stroke-dasharray: 2600; stroke-dashoffset: 2600; animation: draw 2.6s cubic-bezier(.6,0,.2,1) .4s forwards; filter: drop-shadow(0 0 6px rgba(92,225,230,.45)); }
  @media (max-width: 900px) {
    .home header .wrap { height: 68px; }
    .hero2 { padding-top: 88px; min-height: 0; }
    .hero2-grid { grid-template-columns: 1fr; gap: 0; }
    .hero2-text { padding: 12px 0 8px; }
    .hero2-person { min-height: 0; padding-top: 56px; }
    .hero2-person img { height: 440px; }
    .hero2-person .halo { width: 440px; height: 440px; margin-left: -220px; }
    .hero2-person .ring { width: 360px; height: 360px; margin-left: -180px; }
    .hero2-person figcaption { left: 0; bottom: 20px; }
    .hero2-pulse { bottom: 120px; height: 90px; }
  }
  @media (max-width: 420px) { .hero2-person img { height: 380px; } }
  @media (prefers-reduced-motion: reduce) { .hero2-person img { opacity: 1; transform: none; } .hero2-pulse .sig { stroke-dashoffset: 0; } }

  /* ===== Kopfzeile & Menü (v4) ===== */
  .site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 80; border-bottom: 1px solid transparent;
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
  .site-head .wrap { display: flex; align-items: center; gap: 32px; height: 84px; transition: height .3s ease; }
  .site-head.stuck { background: rgba(7,20,38,0.88); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: var(--line); box-shadow: 0 10px 30px -20px rgba(0,0,0,.6); }
  .site-head.stuck .wrap { height: 66px; }
  .site-head .brand { display: block; flex-shrink: 0; }
  .site-head .brand img { height: 38px; width: auto; display: block; transition: height .3s ease; }
  .site-head.stuck .brand img { height: 32px; }

  .site-head .links { display: flex; gap: 6px; margin-left: auto; }
  .site-head .links a { position: relative; text-decoration: none; font-size: 14.5px; font-weight: 500; color: #B6C2D1; padding: 8px 14px; border-radius: 2px; transition: color .2s, background .2s; }
  .site-head .links a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: linear-gradient(90deg, #2EA8B6, #5CE1E6);
    transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.6,0,.2,1); }
  .site-head .links a:hover { color: #fff; background: rgba(255,255,255,.04); }
  .site-head .links a:hover::after, .site-head .links a.active::after { transform: scaleX(1); }
  .site-head .links a.active { color: #fff; }

  .head-cta { display: flex; align-items: center; gap: 18px; padding-left: 22px; border-left: 1px solid var(--line-2); }
  .head-tel { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 500; font-size: 14.5px; color: #fff; white-space: nowrap; }
  .head-tel svg { color: #5CE1E6; }
  .head-tel:hover span { color: #5CE1E6; }
  .head-btn { text-decoration: none; white-space: nowrap; font-size: 14px; font-weight: 600; color: #071426; background: #5CE1E6; padding: 10px 16px; border-radius: 2px;
    transition: background .2s, transform .2s; }
  .head-btn:hover { background: #8CEDF0; transform: translateY(-1px); }

  .burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); border-radius: 2px; cursor: pointer; position: relative; }
  .burger span { position: absolute; left: 12px; right: 12px; height: 2px; background: #fff; transition: transform .3s ease, top .3s ease; }
  .burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 25px; right: 18px; }
  .burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { top: 21px; right: 12px; transform: rotate(-45deg); }

  @media (max-width: 1080px) { .head-btn { display: none; } }
  @media (max-width: 900px) {
    .site-head .links, .head-cta { display: none; }
    .burger { display: block; }
    .site-head .wrap { height: 68px; }
    .site-head.stuck .wrap { height: 60px; }
    .site-head .brand img { height: 32px; }
    .site-head.stuck .brand img { height: 28px; }
  }

  /* Vollbild-Menü (mobil) */
  .menu { position: fixed; inset: 0; z-index: 70; background: #071426; padding-top: 68px; overflow-y: auto;
    opacity: 0; transform: translateY(-12px); transition: opacity .3s ease, transform .3s ease; }
  .menu.open { opacity: 1; transform: none; }
  .menu::before { content: ""; position: absolute; width: 700px; height: 700px; right: -320px; top: -260px; pointer-events: none;
    background: radial-gradient(closest-side, rgba(14,75,104,.85), rgba(14,75,104,0)); }
  .menu-inner { position: relative; display: flex; flex-direction: column; min-height: calc(100vh - 68px); min-height: calc(100dvh - 68px); padding-top: 28px; padding-bottom: 32px; }
  .menu-links { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
  .menu-links a { display: flex; align-items: baseline; gap: 16px; text-decoration: none; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 34px; letter-spacing: -0.03em;
    padding: 18px 0; border-bottom: 1px solid var(--line); color: #fff; }
  .menu-links a .mono { color: #5CE1E6; font-size: 12px; }
  .menu-links a:active { color: #5CE1E6; }
  .menu.open .menu-links a { animation: menuIn .5s cubic-bezier(.2,.7,.2,1) both; }
  .menu.open .menu-links a:nth-child(2) { animation-delay: .06s; } .menu.open .menu-links a:nth-child(3) { animation-delay: .12s; }
  @keyframes menuIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .menu-contact { margin-top: 36px; display: flex; flex-direction: column; gap: 8px; }
  .menu-contact .mono { margin-bottom: 6px; }
  .menu-contact a { text-decoration: none; color: #B6C2D1; font-size: 16px; }
  .menu-contact a.big { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 28px; color: #fff; letter-spacing: -0.02em; }
  .menu-contact .addr { color: var(--muted); font-size: 14.5px; }
  .menu-legal { margin-top: auto; padding-top: 28px; display: flex; gap: 22px; font-size: 13.5px; }
  .menu-legal a { color: var(--muted); text-decoration: none; }
  html.menu-open { overflow: hidden; }
  html.menu-open .site-head { background: #071426; border-bottom-color: var(--line); }
  @media (min-width: 901px) { .menu { display: none; } }

  /* Rechtsseiten: Platz für feste Kopfzeile */
  .legal-top { padding-top: 84px; }
  @media (max-width: 900px) { .legal-top { padding-top: 68px; } }
  @media (prefers-reduced-motion: reduce) { .menu, .menu.open .menu-links a { transition: none; animation: none; } }
  /* Sprungziele unter der festen Kopfzeile */
  section[id], .legal section { scroll-margin-top: 76px; }
  .legal aside { top: 92px; }

  /* Ohne JavaScript alles sichtbar */
  html:not(.js) .rv { opacity: 1; transform: none; }

  /* ===== FAQ ===== */
  .faq { background: #F8FAFC; color: #0A192F; padding: 110px 0; }
  @media (max-width: 900px) { .faq { padding: 76px 0; } }
  .faq .wrap { display: grid; grid-template-columns: 320px 1fr; gap: 64px; }
  @media (max-width: 900px) { .faq .wrap { grid-template-columns: 1fr; gap: 28px; } }
  .faq-head { align-self: start; position: sticky; top: 100px; }
  @media (max-width: 900px) { .faq-head { position: static; } }
  .faq-head .mono { color: #5A6B80; }
  .faq-head .mono b { color: #1D7893; }
  .faq-head h2 { font-size: clamp(32px, 3.8vw, 46px); font-weight: 800; line-height: 1.05; margin: 14px 0 16px; }
  .faq-head p { margin: 0; color: #4A5A6E; }
  .faq-list { border-top: 1px solid #E2E8F0; }
  .faq details { border-bottom: 1px solid #E2E8F0; }
  .faq summary { list-style: none; cursor: pointer; position: relative; padding: 24px 52px 24px 0; font-family: 'Manrope', sans-serif; font-weight: 700;
    font-size: clamp(17px, 1.7vw, 20px); letter-spacing: -0.015em; transition: color .2s; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::before, .faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 2px; background: #1D7893; transition: transform .3s ease; }
  .faq summary::after { transform: rotate(90deg); }
  .faq details[open] summary::after { transform: rotate(0deg); }
  .faq summary:hover { color: #0E4B68; }
  .faq summary:focus-visible { outline: 2px solid #2EA8B6; outline-offset: 4px; }
  .faq details p { margin: -6px 0 24px; max-width: 720px; color: #3A4858; font-size: 15.5px; line-height: 1.75; }
  .faq details[open] { background: linear-gradient(90deg, rgba(46,168,182,.06), transparent 60%); }

  /* Kontakt-Aktionen */
  .c-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 40px; }

  /* Impressum-Karte */
  .legal .card-label { font-size: 13px; margin-bottom: 8px; }

  /* 404 */
  .nf { min-height: 100vh; display: flex; align-items: center; padding: 120px 0 80px; position: relative; overflow: hidden; }
  .nf::before { content: ""; position: absolute; width: 1000px; height: 1000px; right: -420px; top: -460px; background: radial-gradient(closest-side, rgba(14,75,104,.85), rgba(14,75,104,0)); pointer-events: none; }
  .nf .code { font-family: 'IBM Plex Mono', monospace; color: #5CE1E6; font-size: 14px; }
  .nf h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 800; line-height: 1; margin: 16px 0 20px; }
  .nf p { color: #B6C2D1; max-width: 520px; margin: 0 0 32px; font-size: 17px; }
  .nf .wrap { width: 100%; }
  .legal code { font-family: "IBM Plex Mono", monospace; font-size: 13.5px; background: #EEF2F6; padding: 1px 5px; }

  /* ===== Kopfzeile Enterpage (v5: reduziert) ===== */
  .site-head .wrap { gap: 24px; }
  .head-status { display: inline-flex; align-items: center; gap: 10px; margin-left: 28px; padding-left: 28px; border-left: 1px solid var(--line-2);
    font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
  .pulse-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #5CE1E6; flex-shrink: 0; }
  .pulse-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #5CE1E6; opacity: 0; animation: ping 2.4s ease-out infinite; }
  @keyframes ping { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
  .head-cta { margin-left: auto; border-left: 0; padding-left: 0; gap: 22px; }
  .head-btn { display: inline-block; padding: 10px 20px; }
  .head-back { text-decoration: none; font-size: 14.5px; font-weight: 500; color: #B6C2D1; white-space: nowrap; }
  .head-back:hover { color: #fff; }
  @media (max-width: 1080px) { .head-btn { display: inline-block; } }
  @media (max-width: 900px) {
    .head-cta { display: flex; gap: 10px; }
    .head-status { display: none; }
  }
  @media (max-width: 640px) {
    .head-tel { width: 42px; height: 42px; justify-content: center; border: 1px solid var(--line-2); border-radius: 2px; background: rgba(255,255,255,.03); }
    .head-tel span { display: none; }
    .head-btn { padding: 10px 14px; }
    .head-back span { display: none; }
  }
  @media (prefers-reduced-motion: reduce) { .pulse-dot::after { animation: none; } }
  @media (max-width: 640px) {
    .head-back { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: 2px; background: rgba(255,255,255,.03); }
  }

  /* ===== Footer (v2) ===== */
  .site-foot { position: relative; background: #071426; border-top: 1px solid var(--line); padding: 72px 0 0; color: #B6C2D1; overflow: hidden; }
  .site-foot::before { content: ""; position: absolute; width: 900px; height: 900px; left: -420px; bottom: -620px; pointer-events: none; background: radial-gradient(closest-side, rgba(14,75,104,.6), rgba(14,75,104,0)); }
  .foot-pulse { position: absolute; top: -1px; left: 0; width: 100%; height: 40px; pointer-events: none; }
  .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 0.8fr; gap: 40px; padding-bottom: 56px; }
  @media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px 28px; } .foot-brand { grid-column: 1 / -1; } }
  @media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }
  .foot-brand img { height: 36px; width: auto; display: block; margin-bottom: 18px; }
  .foot-brand p { margin: 0; max-width: 340px; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
  .foot-col { display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; }
  .foot-col .mono { color: #5CE1E6; margin-bottom: 6px; }
  .foot-col a { color: #DCE4EC; text-decoration: none; width: fit-content; background: linear-gradient(#5CE1E6,#5CE1E6) left bottom / 0 1px no-repeat; transition: background-size .3s, color .2s; }
  .foot-col a:hover { color: #fff; background-size: 100% 1px; }
  .foot-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; padding-bottom: 28px; border-top: 1px solid var(--line);
    font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); position: relative; }
  .contact { padding-bottom: 110px; }
  @media (max-width: 900px) { .contact { padding-bottom: 80px; } }
  .nf + .site-foot { margin-top: 0; }
  .foot-bar { border-top: 0; }
  .foot-bar::before { content: ""; position: absolute; left: 32px; right: 32px; top: 0; height: 1px; background: var(--line); }
  @media (max-width: 600px) { .foot-bar::before { left: 20px; right: 20px; } }

  /* ===== Footer (v3: kompakt für die Enterpage) ===== */
  .site-foot { padding: 0; border-top: 0; background: #061224; }
  .site-foot::before { display: none; }
  .site-foot::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, rgba(46,168,182,0) 0%, rgba(46,168,182,.55) 45%, rgba(92,225,230,.9) 100%); }
  .foot-pulse { display: none; }
  .foot-main { display: flex; align-items: center; gap: 28px 48px; padding-top: 44px; padding-bottom: 36px; flex-wrap: wrap; }
  .foot-brand { display: flex; align-items: center; gap: 22px; margin-right: auto; }
  .foot-brand img { height: 30px; width: auto; display: block; margin: 0; }
  .foot-brand p { margin: 0; padding-left: 22px; border-left: 1px solid var(--line-2); font-size: 14px; color: var(--muted); max-width: none; white-space: nowrap; }
  .foot-contact { display: flex; gap: 24px; font-size: 14.5px; }
  .foot-contact a, .foot-nav a { color: #DCE4EC; text-decoration: none; background: linear-gradient(#5CE1E6,#5CE1E6) left bottom / 0 1px no-repeat; transition: background-size .3s, color .2s; padding-bottom: 2px; }
  .foot-contact a:hover, .foot-nav a:hover { color: #fff; background-size: 100% 1px; }
  .foot-nav { display: flex; gap: 24px; font-size: 14.5px; }
  .foot-top { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 2px; color: #5CE1E6; transition: background .2s, border-color .2s, transform .2s; }
  .foot-top:hover { background: rgba(92,225,230,.08); border-color: rgba(92,225,230,.45); transform: translateY(-2px); }
  .foot-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-top: 18px; padding-bottom: 26px; font-size: 11.5px; }
  @media (max-width: 900px) {
    .foot-brand p { white-space: normal; }
    .foot-main { gap: 22px 32px; }
  }
  @media (max-width: 640px) {
    .foot-main { flex-direction: column; align-items: flex-start; padding-top: 36px; padding-bottom: 28px; }
    .foot-brand { flex-direction: column; align-items: flex-start; gap: 12px; }
    .foot-brand p { padding-left: 0; border-left: 0; }
    .foot-contact { flex-direction: column; gap: 8px; }
    .foot-top { position: absolute; right: 20px; top: 32px; }
    .foot-main { position: relative; }
    .foot-bar { flex-direction: column; }
  }

  /* =====================================================================
     v6 · HIG-Schicht – Tiefe, Materialien, Squircles, Spring-Motion
     Bewegung: physikalische Federn (gedämpfter Oszillator, als linear() abgetastet).
     Interaktive Bewegung (Druck, Scroll, FAQ, Einblenden) läuft in assets/motion.js.
     ===================================================================== */
  :root {
    /* Typografie: SF Pro auf Apple-Geräten, sonst die Hausschriften */
    --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Manrope", "Segoe UI", sans-serif;
    --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "IBM Plex Sans", "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, monospace;

    /* Radien (kontinuierliche Ecken, wo unterstützt) */
    --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;

    /* Federn: response / ζ  →  abgetastete Lösung x(t) */
    --spring-snappy: linear(0, 0.0265, 0.0903, 0.1756, 0.271, 0.3685, 0.4628, 0.5504, 0.6295, 0.6992, 0.7595, 0.8085, 0.8515, 0.8869, 0.9156, 0.9385, 0.9565, 0.9704, 0.981, 0.9889, 0.9946, 0.9984, 1.0012, 1.003, 1.004, 1.0045, 1.0046, 1.0044, 1.0041, 1.0037, 1.0033, 1.0028, 1.0024, 1.002, 1.0017, 1.0013, 1.0011, 1.0008, 1.0007, 1.0005, 1);
    --dur-snappy: 458ms;   /* response .30 · ζ .86 */
    --spring-smooth: linear(0, 0.0251, 0.0829, 0.161, 0.245, 0.3325, 0.4148, 0.4936, 0.5635, 0.6277, 0.683, 0.7312, 0.7742, 0.81, 0.8415, 0.8675, 0.89, 0.9085, 0.9244, 0.9374, 0.9482, 0.9574, 0.9649, 0.9712, 0.9763, 0.9807, 0.9841, 0.987, 0.9894, 0.9914, 0.9929, 0.9942, 0.9953, 0.9962, 0.9969, 0.9975, 0.9979, 0.9983, 0.9986, 0.9989, 1);
    --dur-smooth: 749ms;   /* response .50 · ζ 1 */
    --spring-bouncy: linear(0, 0.0288, 0.1002, 0.1975, 0.3076, 0.4208, 0.5301, 0.631, 0.7207, 0.7978, 0.8621, 0.914, 0.9547, 0.9854, 1.0075, 1.0225, 1.0317, 1.0364, 1.0378, 1.0367, 1.0341, 1.0305, 1.0263, 1.0221, 1.0179, 1.0141, 1.0107, 1.0078, 1.0053, 1.0033, 1.0018, 1.0006, 0.9997, 0.9992, 0.9988, 0.9986, 0.9986, 0.9986, 0.9987, 0.9988, 1);
    --dur-bouncy: 719ms;   /* response .45 · ζ .72 */
    --spring-gentle: linear(0, 0.0195, 0.0683, 0.1355, 0.2128, 0.2943, 0.3757, 0.4542, 0.5278, 0.5954, 0.6553, 0.7097, 0.7575, 0.7991, 0.835, 0.8655, 0.8914, 0.913, 0.931, 0.9459, 0.9578, 0.9677, 0.9757, 0.982, 0.9871, 0.991, 0.994, 0.9962, 0.9979, 0.9992, 1.0001, 1.0007, 1.0011, 1.0013, 1.0014, 1.0014, 1.0014, 1.0013, 1.0012, 1.0011, 1);
    --dur-gentle: 1058ms;  /* response .80 · ζ .90 */
    --spring-slow: linear(0, 0.0236, 0.0798, 0.1552, 0.2381, 0.3226, 0.4056, 0.4824, 0.5528, 0.6168, 0.6729, 0.7226, 0.7654, 0.8022, 0.8342, 0.8611, 0.884, 0.9035, 0.9198, 0.9335, 0.9449, 0.9544, 0.9625, 0.969, 0.9745, 0.9791, 0.9828, 0.9859, 0.9884, 0.9905, 0.9923, 0.9937, 0.9948, 0.9958, 0.9966, 0.9972, 0.9977, 0.9981, 0.9985, 0.9988, 1);
    --dur-slow: 1767ms;    /* response 1.2 · ζ 1 */

    /* Tiefe: mehrlagige, weiche Schatten */
    --shadow-1: 0 0.5px 1px rgba(2,12,27,.08), 0 1px 3px rgba(2,12,27,.06);
    --shadow-2: 0 1px 2px rgba(2,12,27,.06), 0 4px 12px -2px rgba(2,12,27,.10), 0 16px 32px -12px rgba(2,12,27,.14);
    --shadow-3: 0 2px 4px rgba(0,0,0,.10), 0 12px 28px -6px rgba(0,0,0,.28), 0 32px 64px -20px rgba(0,0,0,.40);
    --hairline: 0.5px;
    --edge-light: inset 0 0.5px 0 rgba(255,255,255,.14);   /* Lichtkante oben auf dunklen Ebenen */

    /* Materialien */
    --mat-thin: rgba(10,25,47,.74);
    --mat-regular: rgba(7,20,38,.72);
    --mat-light: rgba(255,255,255,.07);
  }
  @supports (corner-shape: squircle) {
    :root { --r-xs: 12px; --r-sm: 18px; --r-md: 24px; --r-lg: 36px; }
  }

  html.js { scroll-behavior: auto; }   /* Scrollen übernimmt die Feder (unterbrechbar) */
  body { font-family: var(--font-text); text-rendering: optimizeLegibility; font-feature-settings: "kern"; }
  h1, h2, h3, .cinfo .phone, .menu-links a, .hero2-person figcaption strong { font-family: var(--font-display); }
  .mono, .rows .no, .head-status, .foot-bar, .legal dl.kv dt, .nf .code { font-family: var(--font-mono); }
  h1 { letter-spacing: -0.028em; }
  h2 { letter-spacing: -0.024em; }
  h3 { letter-spacing: -0.016em; }
  .hero2 h1, .services h2, .process h2, .faq-head h2, .legal-top h1, .nf h1 { font-weight: 700; }
  .contact h2 strong, .cinfo .phone { font-weight: 700; }

  /* Fokus: weicher Ring, folgt den Ecken */
  :focus-visible { outline: 3px solid rgba(92,225,230,.55); outline-offset: 2px; }

  /* ---------- Bedienelemente: sofortige Rückmeldung ---------- */
  .btn, .head-btn, .head-tel, .head-back, .foot-top, .tlink, .faq summary, .cinfo a, .foot-nav a, .brand {
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none; user-select: none; will-change: transform;
  }
  .btn {
    border-radius: var(--r-sm); padding: 15px 24px; font-family: var(--font-text); font-weight: 600; letter-spacing: -0.01em;
    background: #F5F8FB; color: #071426;
    box-shadow: var(--shadow-3), inset 0 -1px 0 rgba(2,12,27,.10), inset 0 1px 0 rgba(255,255,255,.9);
    transition: background-color var(--dur-snappy) var(--spring-snappy), box-shadow var(--dur-snappy) var(--spring-snappy);
  }
  .btn:hover { background: #fff; }
  .btn.is-pressed { background: #DCE6EE; transition: none; box-shadow: 0 1px 2px rgba(0,0,0,.25), inset 0 1px 2px rgba(2,12,27,.12); }
  .btn .arr { transition: transform var(--dur-bouncy) var(--spring-bouncy); }
  .head-btn {
    border-radius: var(--r-pill); padding: 9px 18px; background: #5CE1E6; color: #04202B; font-weight: 600; letter-spacing: -0.005em;
    box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 6px 16px -6px rgba(92,225,230,.55), inset 0 1px 0 rgba(255,255,255,.45);
    transition: background-color var(--dur-snappy) var(--spring-snappy), box-shadow var(--dur-snappy) var(--spring-snappy);
  }
  .head-btn:hover { background: #8CEDF0; transform: none; }
  .head-btn.is-pressed { background: #45C9CE; transition: none; }
  .head-tel, .head-back { border-radius: var(--r-sm); transition: color var(--dur-snappy) var(--spring-snappy); }
  .head-tel.is-pressed, .head-back.is-pressed { opacity: .6; }
  .tlink { border-radius: 2px; transition: color var(--dur-snappy) var(--spring-snappy), border-color var(--dur-snappy) var(--spring-snappy); }
  .tlink.is-pressed, .cinfo a.is-pressed, .foot-nav a.is-pressed, .brand.is-pressed { opacity: .55; transition: none; }
  .foot-top { border-radius: var(--r-sm); border-width: var(--hairline); background: var(--mat-light); box-shadow: var(--edge-light);
    transition: background-color var(--dur-snappy) var(--spring-snappy), border-color var(--dur-snappy) var(--spring-snappy); }
  .foot-top:hover { transform: none; }
  .foot-top.is-pressed { background: rgba(92,225,230,.18); transition: none; }
  .skip { border-radius: var(--r-sm); box-shadow: var(--shadow-3); }
  @media (max-width: 640px) {
    .head-tel, .head-back { border-radius: var(--r-sm); border-width: var(--hairline); background: var(--mat-light); box-shadow: var(--edge-light); }
  }

  /* ---------- Kopfzeile: Material statt Fläche ---------- */
  .site-head { transition: background-color var(--dur-smooth) var(--spring-smooth), border-color var(--dur-smooth) var(--spring-smooth), box-shadow var(--dur-smooth) var(--spring-smooth); border-bottom-width: var(--hairline); }
  .site-head .wrap { transition: height var(--dur-smooth) var(--spring-smooth); }
  .site-head .brand img { transition: height var(--dur-smooth) var(--spring-smooth); }
  .site-head.stuck {
    background: var(--mat-thin);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-bottom-color: rgba(255,255,255,.10);
    box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 12px 32px -18px rgba(0,0,0,.55);
  }
  .pulse-dot::after { animation: ping 2.4s var(--spring-smooth) infinite; }

  /* ---------- Hero ---------- */
  .hero2-person img { animation: rise var(--dur-gentle) var(--spring-gentle) .2s forwards; }
  .hero2-pulse .sig { animation: draw var(--dur-slow) var(--spring-slow) .35s forwards; }
  .hero2-person figcaption {
    border-radius: var(--r-md); border: var(--hairline) solid rgba(255,255,255,.16);
    background: var(--mat-regular);
    -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
    box-shadow: var(--shadow-3), var(--edge-light); padding: 14px 20px 14px 18px;
  }
  .hero2-person figcaption::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: #2EA8B6; }
  .hero2-person figcaption { border-left-width: var(--hairline); border-left-color: rgba(255,255,255,.16); }

  /* ---------- Einblenden: Feder in JS, hier nur Startzustand ---------- */
  html.js .rv { transition: none; }

  /* ---------- Leistungen ---------- */
  .rows .node { transition: border-color var(--dur-snappy) var(--spring-snappy), background-color var(--dur-snappy) var(--spring-snappy), box-shadow var(--dur-snappy) var(--spring-snappy), transform var(--dur-bouncy) var(--spring-bouncy); }
  .rows li.on .node { transform: scale(1.12); }
  .rows h3 { transition: color var(--dur-snappy) var(--spring-snappy); }
  .rail { border-radius: 2px; }
  .rail-fill { border-radius: 2px; }

  /* ---------- Vorgehen ---------- */
  .steps .bar { width: 100%; transform: scaleX(0); transform-origin: left center; border-radius: 3px;
    transition: transform var(--dur-slow) var(--spring-slow) .15s; }
  .steps.in .bar { transform: scaleX(1); }
  .steps li::before { transition: border-color var(--dur-smooth) var(--spring-smooth), background-color var(--dur-smooth) var(--spring-smooth), transform var(--dur-bouncy) var(--spring-bouncy); transform: scale(.7); }
  .steps.in li::before { transform: scale(1); }
  .steps.in li:nth-of-type(1)::before { transition-delay: .15s; } .steps.in li:nth-of-type(2)::before { transition-delay: .45s; }
  .steps.in li:nth-of-type(3)::before { transition-delay: .75s; } .steps.in li:nth-of-type(4)::before { transition-delay: 1.05s; }

  /* ---------- Fakten: transluzente Karten auf Petrol ---------- */
  .facts { padding: 56px 0; background: radial-gradient(120% 140% at 85% 0%, #135C7E 0%, #0E4B68 45%, #0B3F59 100%); }
  .facts .wrap { gap: 16px; }
  .facts .wrap > .f.f {
    position: relative; overflow: hidden; padding: 28px 28px 30px; border: var(--hairline) solid rgba(255,255,255,.16);
    border-radius: var(--r-lg); background: rgba(255,255,255,.06);
    -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
    box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 18px 40px -22px rgba(0,0,0,.55), var(--edge-light);
  }
  .facts .f::after, .cinfo > div::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.10), transparent 60%);
    transition: opacity var(--dur-smooth) var(--spring-smooth);
  }
  .facts .f:hover::after, .cinfo > div:hover::after { opacity: 1; }
  .certs li::before { border-radius: 2px; }
  @media (max-width: 900px) { .facts .wrap > .f-certs { grid-column: 1 / -1; } }

  /* ---------- FAQ: gruppierte Liste ---------- */
  .faq-list {
    border: 0; background: #fff; border-radius: var(--r-lg); overflow: hidden;
    box-shadow: var(--shadow-2), 0 0 0 var(--hairline) rgba(2,12,27,.08);
  }
  .faq details { border: 0; position: relative; }
  .faq details + details::before { content: ""; position: absolute; left: 24px; right: 0; top: 0; height: var(--hairline); background: #DCE3EA; }
  .faq summary { padding: 22px 64px 22px 24px; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.012em;
    transition: color var(--dur-snappy) var(--spring-snappy), background-color var(--dur-snappy) var(--spring-snappy); }
  .faq summary:hover { background: rgba(14,75,104,.035); }
  .faq summary.is-pressed { background: rgba(14,75,104,.08); transition: none; }
  .faq summary::before, .faq summary::after { right: 26px; border-radius: 2px; transition: transform var(--dur-bouncy) var(--spring-bouncy); }
  html.js .faq details[open] summary::after { transform: rotate(90deg); }
  html.js .faq details.is-open summary::after { transform: rotate(0deg); }
  .faq details[open] { background: none; }
  .faq details .faq-body > p { margin: -4px 64px 24px 24px; }
  @media (max-width: 600px) { .faq details .faq-body > p { margin-right: 24px; } }
  .faq summary:focus-visible { outline-offset: -3px; border-radius: var(--r-md); }

  /* ---------- Kontakt: Karten ---------- */
  .cinfo { border-top: 0; padding-top: 0; gap: 14px; }
  .cinfo > div {
    position: relative; overflow: hidden; padding: 22px 24px 24px; border-radius: var(--r-lg);
    background: rgba(255,255,255,.04); border: var(--hairline) solid rgba(255,255,255,.12);
    box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 20px 40px -24px rgba(0,0,0,.6), var(--edge-light);
  }
  .cinfo .mono { display: block; margin-bottom: 8px; }
  .cinfo a { transition: color var(--dur-snappy) var(--spring-snappy); }

  /* ---------- Footer ---------- */
  .foot-contact a, .foot-nav a, .foot-col a { transition: background-size var(--dur-smooth) var(--spring-smooth), color var(--dur-snappy) var(--spring-snappy); }

  /* ---------- Rechtsseiten ---------- */
  .legal .card { border-radius: var(--r-md); border: var(--hairline) solid #DCE3EA; box-shadow: var(--shadow-1); position: relative; overflow: hidden; }
  .legal .card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #2EA8B6; }
  .legal .card { border-left-width: var(--hairline); }
  .legal aside a { transition: color var(--dur-snappy) var(--spring-snappy), border-color var(--dur-snappy) var(--spring-snappy); }
  .legal code { border-radius: 6px; }
  .legal .todo { border-radius: 6px; }

  /* Kontinuierliche Ecken (Squircle), wo der Browser es kann */
  @supports (corner-shape: squircle) {
    .btn, .head-tel, .head-back, .foot-top, .skip, .hero2-person figcaption, .facts .f, .faq-list, .faq summary:focus-visible,
    .cinfo > div, .legal .card, .legal code, .legal .todo { corner-shape: squircle; }
  }

  @media (prefers-reduced-motion: reduce) {
    .steps .bar { transform: scaleX(1); }
    .steps li::before, .rows li.on .node { transform: none; }
  }

  /* ---------- Touch: keine "hängenden" Hover-Zustände ---------- */
  @media (hover: none) {
    .btn:hover { background: #F5F8FB; }
    .btn:hover .arr { transform: none; }
    .head-btn:hover { background: #5CE1E6; }
    .head-tel:hover span, .head-back:hover { color: inherit; }
    .tlink:hover { color: inherit; border-color: var(--line-2); }
    .cinfo a:hover, .cinfo .phone:hover { color: inherit; }
    .faq summary:hover { background: none; color: inherit; }
    .facts .f:hover::after, .cinfo > div:hover::after { opacity: 0; }
    .foot-top:hover { background: var(--mat-light); border-color: var(--line-2); }
    .foot-contact a:hover, .foot-nav a:hover, .foot-col a:hover { color: #DCE4EC; background-size: 0 1px; }
    .legal aside a:hover { color: #4A5A6E; border-color: #E2E8F0; }
    .legal a:hover { text-decoration: none; }
  }

  /* ---------- Kopfzeile passt sich dem Untergrund an ---------- */
  .site-head.stuck.on-light {
    background: rgba(8,22,40,.96);
    border-bottom-color: rgba(255,255,255,.06);
    box-shadow: 0 1px 0 rgba(2,12,27,.10), 0 10px 28px -14px rgba(2,12,27,.35);
  }