/* nicolajmaranke.de — gemeinsames Stylesheet.
   Änderungen hier wirken auf allen Seiten. */

/* Archivo — vom eigenen Server, keine Verbindung zu Dritten */
  @font-face{
    font-family:'Archivo';
    src:url(/fonts/archivo-var.woff2) format('woff2-variations');
    font-weight:100 900;
    font-style:normal;
    font-display:swap;
  }
/* ---------- Sprungmarken am rechten Rand ---------- */
  .marken{position:fixed;right:clamp(20px,2.4vw,38px);top:50%;transform:translateY(-50%);z-index:40;
    display:flex;flex-direction:column;align-items:flex-end;gap:9px;
    opacity:0;pointer-events:none;transition:opacity .5s ease}
.marken.sichtbar{opacity:1;pointer-events:auto}
.marke{display:flex;align-items:center;justify-content:flex-end;gap:1rem;
    background:none;border:0;cursor:pointer;padding:0;color:var(--ink-mute);transition:color .3s ease}
.marke:hover{color:var(--accent)}
/* jeder Abschnitt ist ein Strichsegment - zusammen ergeben sie die Linie */
  .marke i{display:block;width:1px;height:30px;background:var(--line-2);flex:0 0 auto;
    transition:background .35s ease,width .35s ease,height .35s ease,box-shadow .35s ease}
.marke:hover i{background:var(--ink-soft)}
.marke.davor i{background:rgba(232,184,77,.45)}
.marke.aktiv i{background:var(--accent);width:2px;height:42px;
    box-shadow:0 0 10px rgba(232,184,77,.7)}
.marke span{font-family:"Archivo",sans-serif;font-weight:600;font-size:.68rem;letter-spacing:.2em;
    text-transform:uppercase;white-space:nowrap;
    opacity:0;transform:translateX(8px);transition:opacity .3s ease,transform .3s ease;
    background:rgba(14,15,17,.92);border:1px solid var(--line);padding:.5em .85em;border-radius:2px}
.marke:hover span,.marke.aktiv span{opacity:1;transform:none}
.marke.aktiv span{border-color:rgba(232,184,77,.4);color:var(--accent)}
@media (max-width:1200px){.marken{display:none}}
@media (prefers-reduced-motion:reduce){.marke i,.marke span{transition:none}}
/* ---------- Fokus: übrige Projekte zurücknehmen ---------- */
  .ref{transition:opacity .45s ease,filter .45s ease,background .35s ease}
@media (hover:hover){
    .refs:hover .ref{opacity:.42;filter:saturate(.45) brightness(.72)}
    .refs:hover .ref:hover{opacity:1;filter:none}
  }
/* ---------- Menü mit Untermenüs ---------- */
  .nav-gruppe{position:relative;display:flex;align-items:center}
.nav-gruppe > a{display:inline-flex;align-items:center;gap:.45em}
.nav-plus{display:block;width:11px;height:11px;flex:0 0 auto;opacity:.65;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0.5v13M0.5 7h13' stroke='%23E8B84D' stroke-width='1.3'/%3E%3C/svg%3E");
    background-size:100% 100%;background-repeat:no-repeat;
    transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .3s ease}
.nav-gruppe:hover .nav-plus{opacity:1;transform:rotate(135deg)}
.nav-drop{position:absolute;top:100%;left:-18px;min-width:306px;background:rgba(14,15,17,.97);
    border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:2px;
    padding:10px 0;margin-top:14px;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .28s ease,transform .28s cubic-bezier(.2,.7,.2,1),visibility .28s;
    box-shadow:0 18px 40px rgba(0,0,0,.5);z-index:60}
.nav-drop::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
@media (hover:hover){
    .nav-gruppe:hover .nav-drop{opacity:1;visibility:visible;transform:none}
  }
.nav-drop.offen{opacity:1;visibility:visible;transform:none}
.nav-drop a{display:block!important;padding:.72em 20px;font-size:.88rem;color:var(--ink-soft);
    position:relative;transition:color .25s ease,background .25s ease,padding-left .25s ease}
.nav-drop a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);
    transform:scaleY(0);transform-origin:center;transition:transform .28s ease}
.nav-drop a:hover{color:var(--accent);background:rgba(232,184,77,.06);padding-left:24px}
.nav-drop a:hover::before{transform:scaleY(1)}
.nav-drop .drop-alle{font-family:"Archivo",sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--line);
    margin-bottom:6px;padding-bottom:.85em}
@media (max-width:1080px){
    .nav-gruppe{flex-direction:column;align-items:flex-start;width:100%}
    .nav-drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
      background:none;border:0;border-left:1px solid var(--line);border-radius:0;
      margin:.5rem 0 .3rem .2rem;padding:0;min-width:0;width:100%}
    .nav-drop a{padding:.55em 0 .55em 16px;font-size:.86rem}
    .nav-drop a:hover{padding-left:20px;background:none}
    .nav-drop .drop-alle{border-bottom:0;margin-bottom:2px;padding-bottom:.55em}
    .nav-plus{display:none}
  }
/* ---------- Lesefortschritt oben ---------- */
  .fortschritt{position:fixed;top:0;left:0;height:2px;width:0;z-index:120;
    background:linear-gradient(90deg,rgba(232,184,77,.35),var(--accent));
    box-shadow:0 0 10px rgba(232,184,77,.5);transition:width .12s linear}
/* ---------- Abschnittsmarke links (Nummer + Name, gedreht) ---------- */
  .abschnitt-marke{position:fixed;left:clamp(16px,2vw,30px);top:50%;
    transform:translateY(-50%) rotate(180deg);
    z-index:40;display:flex;flex-direction:row-reverse;align-items:center;gap:1rem;
    writing-mode:vertical-rl;
    opacity:0;pointer-events:none;transition:opacity .5s ease}
.abschnitt-marke.sichtbar{opacity:1}
.am-nr{font-family:"Archivo",sans-serif;font-weight:800;font-size:.78rem;letter-spacing:.2em;
    color:var(--accent);text-shadow:0 0 10px rgba(232,184,77,.45)}
.am-strich{width:1px;height:52px;background:linear-gradient(to bottom,transparent,var(--accent),transparent)}
.am-name{font-family:"Archivo",sans-serif;font-weight:500;font-size:.7rem;letter-spacing:.32em;
    text-transform:uppercase;color:var(--ink-mute);transition:color .4s ease}
.abschnitt-marke.sichtbar .am-name{color:var(--ink-soft)}
@media (max-width:1200px){.abschnitt-marke{display:none}}
/* ---------- gestaffeltes Einblenden von Kacheln ---------- */
  .staffel > *{opacity:0;transform:translateY(18px);
    transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.staffel.in > *{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.staffel > *{opacity:1;transform:none;transition:none}}
/* ---------- Bilder blenden aus ihrer Grundfarbe ein ---------- */
  figure[data-farbe]{background-color:var(--platzhalter,#16191D)}
figure[data-farbe] img{opacity:0;transition:opacity .7s cubic-bezier(.2,.7,.2,1)}
figure[data-farbe] img.geladen{opacity:1}
@media (prefers-reduced-motion:reduce){figure[data-farbe] img{opacity:1;transition:none}}
/* ---------- Feinheiten ---------- */

  /* Ziffern in fester Breite: nichts springt beim Wechsel */
  .sv,.zv,.zit-zaehler,.sw-n,.pj-nr,.am-nr,.pj-eck,.sw-dauer,.zahlen,.stat{
    font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1}
/* Seitenwechsel weich überblenden (Browser ohne Unterstützung ignorieren das) */
  @view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
::view-transition-old(root){animation-timing-function:cubic-bezier(.4,0,1,1)}
::view-transition-new(root){animation-timing-function:cubic-bezier(0,0,.2,1)}
@media (prefers-reduced-motion:reduce){
    ::view-transition-old(root),::view-transition-new(root){animation:none}
  }
/* Millimeterraster im Fußbereich - dieselbe Sprache wie auf dem Bauschild */
  footer{position:relative;isolation:isolate}
footer::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background-image:
      repeating-linear-gradient(to right,rgba(232,184,77,.055) 0 1px,transparent 1px 44px),
      repeating-linear-gradient(to bottom,rgba(232,184,77,.055) 0 1px,transparent 1px 44px);
    -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000 0%,transparent 78%);
            mask-image:radial-gradient(120% 100% at 50% 0%,#000 0%,transparent 78%)}
/* ---------- Hero: einmaliger Aufbau beim Laden ---------- */
  .hero-h1 .zeile{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.hero-h1 .zeile > i{display:inline-block;font-style:normal}
.hero-auf{animation:heroauf .95s cubic-bezier(.16,.84,.28,1) both;
    animation-delay:calc(var(--v,1) * 105ms + 60ms)}
@keyframes heroauf{from{opacity:0;transform:translateY(105%)}to{opacity:1;transform:none}}
/* Vorspann, Fließtext und Knöpfe steigen dezenter auf */
  .eyebrow.hero-auf,.lead.hero-auf,.hero-actions.hero-auf{animation-name:heroauf-soft}
@keyframes heroauf-soft{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero-auf{animation:none}}
/* ---------- Hero: Monogramm als Prägung ---------- */
  .hero-mark{position:absolute;z-index:1;pointer-events:none;
    /* rechte Kante bündig mit dem Textblock der Seite */
    right:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)));top:50%;
    width:clamp(160px,19vw,350px);aspect-ratio:118/110;
    background-image:url("/bilder/logo.png");
    background-size:contain;background-repeat:no-repeat;background-position:center;
    opacity:.06;transform:translateY(-48%)}
@media (max-width:1024px){.hero-mark{display:none}}
/* ================= HÄUFIGE FRAGEN (Wähler) ================= */
  .fq{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(26px,3.6vw,58px);align-items:start}
.fq-liste{display:flex;flex-direction:column}
.fq-frage{position:relative;width:100%;background:none;border:0;cursor:pointer;text-align:left;
    font-family:inherit;display:flex;align-items:center;gap:1.15rem;padding:0 0 0 26px;
    min-height:66px;color:var(--ink-mute);transition:color .3s ease}
.fq-frage i{position:absolute;left:0;top:11px;bottom:11px;display:block;width:1px;background:var(--line-2);
    transition:background .35s ease,width .35s ease,top .35s ease,bottom .35s ease,box-shadow .35s ease}
.fq-frage:hover{color:var(--accent)}
.fq-frage:hover i{background:var(--ink-soft)}
.fq-frage.davor i{background:rgba(232,184,77,.45)}
.fq-frage.aktiv{color:var(--ink)}
.fq-frage.aktiv i{background:var(--accent);width:2px;top:5px;bottom:5px;
    box-shadow:0 0 10px rgba(232,184,77,.7)}
.fq-nr{flex:0 0 auto;font-family:"Archivo",sans-serif;font-weight:700;font-size:.7rem;letter-spacing:.16em;
    color:var(--accent);opacity:.45;transition:opacity .3s ease}
.fq-frage.aktiv .fq-nr{opacity:1;text-shadow:0 0 10px rgba(232,184,77,.55)}
.fq-txt{font-family:"Archivo",sans-serif;font-weight:600;font-size:clamp(.95rem,1.32vw,1.04rem);
    letter-spacing:-.01em;line-height:1.35}
.fq-buehne{position:relative;background:var(--bg-2);border:1px solid var(--line);
    padding:clamp(28px,3.2vw,48px);min-height:clamp(260px,32vh,340px)}
.fq-buehne::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);
    box-shadow:0 0 12px rgba(232,184,77,.6)}
.fq-panel{display:none;animation:fqauf .45s cubic-bezier(.2,.7,.2,1)}
.fq-panel.an{display:block}
@keyframes fqauf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fq-chip{display:inline-block;font-family:"Archivo",sans-serif;font-weight:600;font-size:.7rem;
    letter-spacing:.15em;text-transform:uppercase;color:var(--accent);
    border:1px solid rgba(232,184,77,.35);padding:.34em .75em;border-radius:2px}
.fq-buehne h3{font-family:"Archivo",sans-serif;font-weight:700;font-size:clamp(1.25rem,2.1vw,1.62rem);
    letter-spacing:-.022em;color:var(--ink);margin:1.1rem 0 .9rem;line-height:1.25}
.fq-buehne p{color:var(--ink-soft);font-size:1rem;line-height:1.74;max-width:62ch}
@media (max-width:900px){
    .fq{grid-template-columns:1fr;gap:1.5rem}
    .fq-buehne{min-height:0}
    .fq-frage{min-height:58px}
  }
@media (prefers-reduced-motion:reduce){.fq-panel{animation:none}}
/* ---------- Kachel mit Bildstrecke: läuft beim Überfahren durch ---------- */
  .ref figure.ref-wechsel{display:grid}
.ref figure.ref-wechsel img{grid-area:1/1;
    transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1),filter .45s ease}
/* stärker gewichtet als die allgemeine Bild-Einblendung */
  figure[data-farbe].ref-wechsel img:not(.an){opacity:0}
figure[data-farbe].ref-wechsel img.an{opacity:1}
.ref-fahne{position:absolute;top:0;right:0;z-index:2;font-family:"Archivo",sans-serif;font-weight:600;
    font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
    background:rgba(14,15,17,.82);border-left:1px solid rgba(232,184,77,.3);
    border-bottom:1px solid rgba(232,184,77,.3);padding:.5em .8em;opacity:.9;transition:opacity .35s ease}
.ref:hover .ref-fahne{opacity:0}
/* Fortschrittsstriche der Strecke */
  .ref-takt{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;gap:2px;
    opacity:0;transition:opacity .35s ease}
.ref:hover .ref-takt{opacity:1}
.ref-takt span{flex:1;height:2px;background:rgba(255,255,255,.18);transition:background .3s ease}
.ref-takt span.an{background:var(--accent);box-shadow:0 0 8px rgba(232,184,77,.7)}
:root{
    --bg:#0E0F11;
    --bg-2:#141619;
    --panel:#181B1F;
    --line:#26292F;
    --line-2:#31353C;
    --ink:#ECEAE4;
    --ink-soft:#C7CAD0;
    --ink-mute:#8A8F97;

    --accent:#E8B84D;              /* Marken-Gold */
    --accent-soft:#E8B84D1A;

    /* Leuchtkraft – hier zentral regelbar */
    --glow-s:0 0 10px rgba(232,184,77,.16);
    --glow-m:0 0 16px rgba(232,184,77,.20);
    --glow-l:0 0 22px rgba(232,184,77,.24), 0 0 48px rgba(232,184,77,.10);


    --head-gap:1.15rem;   /* Abstand Goldzeile -> Überschrift -> Text */
    --maxw:1560px;
    --gutter:clamp(20px,5vw,80px);
  }
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
    background:var(--bg);color:var(--ink);
    font-family:"Archivo",system-ui,sans-serif;font-weight:400;line-height:1.6;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#0E0F11}
.eyebrow{
    font-family:"Archivo",sans-serif;font-size:.72rem;font-weight:500;
    letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
    text-shadow:var(--glow-s);display:inline-flex;align-items:center;gap:.65em;
  }
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);opacity:.85}
.h-display{font-family:"Archivo",sans-serif;font-weight:800;line-height:1.02;letter-spacing:-.025em}
.h-sec{font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:-.022em;line-height:1.06;font-size:clamp(1.9rem,4.4vw,3.1rem)}
/* ================= NAV ================= */
  header.nav{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(10px);
    background:rgba(14,15,17,0);border-bottom:1px solid transparent;transition:.35s}
header.nav.scrolled{background:rgba(14,15,17,.92);border-bottom-color:var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{font-family:"Archivo",sans-serif;font-weight:800;letter-spacing:.06em;font-size:1.04rem;
    text-transform:uppercase;display:inline-flex;align-items:center;gap:.75em}
.brand-logo{height:42px;width:auto;display:block;transition:height .3s ease}
header.nav.scrolled .brand-logo{height:34px}
.brand-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.brand em{font-style:normal;color:var(--accent);text-shadow:var(--glow-s)}
.nav-links{display:flex;gap:2.1rem;align-items:center}
.nav-links a{font-size:.9rem;color:var(--ink-soft);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-tel{font-family:"Archivo",sans-serif;font-weight:600;font-size:.86rem;letter-spacing:.02em;
    color:var(--accent)!important;white-space:nowrap;transition:text-shadow .3s ease}
.nav-tel:hover{text-shadow:0 0 12px rgba(232,184,77,.55)}
.nav-cta{font-family:"Archivo",sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.04em;
    border:1px solid var(--line-2);padding:.62em 1.15em;border-radius:2px;color:var(--ink);
    display:inline-flex;align-items:center;gap:.6em;white-space:nowrap;transition:.2s,gap .25s ease}
.nav-cta:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.burger{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:8px}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0}
/* ================= HERO mit Bild ================= */
  .hero{position:relative;min-height:min(92vh,900px);display:flex;align-items:flex-end;overflow:hidden;
    padding-top:150px;padding-bottom:clamp(220px,26vh,300px)}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:#15181c}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      linear-gradient(to top,
        var(--bg) 0%,
        rgba(14,15,17,.97) 12%,
        rgba(14,15,17,.88) 26%,
        rgba(14,15,17,.72) 44%,
        rgba(14,15,17,.55) 64%,
        rgba(14,15,17,.48) 100%),
      radial-gradient(85% 65% at 80% 14%,rgba(232,184,77,.09),transparent 62%);}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero h1{font-size:clamp(2.5rem,7vw,5.4rem);margin:.55em 0 .4em;max-width:18ch}
.hero h1 .accent{color:var(--accent);text-shadow:var(--glow-l)}
.hero p.lead{font-size:clamp(1.02rem,1.7vw,1.26rem);color:var(--ink-soft);max-width:56ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.3rem}
.btn{font-family:"Archivo",sans-serif;font-weight:600;font-size:.98rem;padding:.95em 1.7em;
    border-radius:2px;transition:.2s;display:inline-flex;align-items:center;gap:.6em}
.btn-primary{background:var(--ink);color:#0E0F11}
.btn-primary:hover{background:var(--accent);box-shadow:var(--glow-m)}
.btn-ghost{border:1px solid rgba(236,234,228,.35);color:var(--ink);backdrop-filter:blur(4px)}
.btn-ghost:hover{border-color:var(--ink)}
/* Scroll-Hinweis */
  .scrollcue{position:absolute;left:50%;bottom:calc(clamp(18px,2.4vh,28px)*2 + 3.1rem);transform:translateX(-50%);z-index:3;
    display:flex;flex-direction:column;align-items:center;gap:.9rem;color:var(--ink-mute);
    transition:color .3s ease}
.scrollcue:hover{color:var(--accent)}
.scrollcue span{font-family:"Archivo",sans-serif;font-weight:500;font-size:.68rem;
    letter-spacing:.34em;text-transform:uppercase}
.scrollcue i{display:block;width:1px;height:62px;background:linear-gradient(to bottom,currentColor,transparent);
    position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;
    background:var(--accent);box-shadow:0 0 8px rgba(232,184,77,.8);
    animation:cue 2.2s cubic-bezier(.6,.05,.3,1) infinite}
@keyframes cue{0%{top:-45%}60%,100%{top:105%}}
@media (prefers-reduced-motion:reduce){.scrollcue i::after{animation:none;display:none}}
@media (max-height:620px){.scrollcue{display:none}}
/* ================= MARQUEE ================= */
  .marquee{position:absolute;left:0;right:0;bottom:0;z-index:4;
    padding-block:clamp(18px,2.4vh,28px);overflow:hidden;background:transparent;
    border:0;border-bottom:1px solid rgba(232,184,77,.55);
    box-shadow:0 1px 12px rgba(232,184,77,.18);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;gap:2.6rem;width:max-content;animation:scroll 58s linear infinite}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:nowrap;width:max-content}}
.marquee-track span{
    font-family:"Archivo",sans-serif;font-weight:500;
    font-size:clamp(.8rem,1.05vw,.95rem);
    letter-spacing:.19em;text-transform:uppercase;white-space:nowrap;
    padding:.42em .75em;cursor:default;
    color:rgba(232,184,77,.40);
    /* Die Lichtwelle läuft dauerhaft durch jedes Wort.
       Musteranfang und -ende sind identisch, der Animationsweg
       entspricht genau einer Kachelbreite - dadurch keine Naht. */
    background-image:linear-gradient(100deg,
      rgba(232,184,77,.40) 0%,
      rgba(232,184,77,.40) 34%,
      #FFF6DF 50%,
      rgba(232,184,77,.40) 66%,
      rgba(232,184,77,.40) 100%);
    background-size:360px 100%;
    background-repeat:repeat;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:lichtwelle 2.6s linear infinite;
  }
.marquee-track span::after{content:"|";margin-left:2.6rem;font-weight:300;
    -webkit-text-fill-color:rgba(232,184,77,.15);color:rgba(232,184,77,.15)}
@keyframes lichtwelle{
    from{background-position:360px 0}
    to  {background-position:0 0}
  }
@media (prefers-reduced-motion:reduce){
    .marquee-track span{animation:none;background-image:none;
      -webkit-text-fill-color:rgba(232,184,77,.65)}
  }
@keyframes scroll{to{transform:translateX(-50%)}}
/* ================= SECTION ================= */
  section.block{padding-block:50px;position:relative}
.sec-head{display:flex;flex-direction:column;gap:var(--head-gap);max-width:62ch;margin-bottom:clamp(40px,6vh,68px)}
.sec-head.wide{max-width:78ch}
.sec-head p.sub{color:var(--ink-soft);font-size:1.06rem}
/* ================= KACHEL-EFFEKT (gilt für alle Kacheln) ================= */
  .service,.benefit,.diff-item,.step,.ref,.quote,.phase,.faq-item{position:relative;transition:background .35s ease}
.service::before,.benefit::before,.diff-item::before,.ref::before,.quote::before,.phase::before,.faq-item::before{
    content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);
    transform:scaleX(0);transform-origin:left center;
    transition:transform .4s cubic-bezier(.2,.7,.2,1);
    box-shadow:0 0 12px rgba(232,184,77,.6);z-index:3;pointer-events:none}
.service:hover::before,.benefit:hover::before,.diff-item:hover::before,
  .ref:hover::before,.quote:hover::before,.phase:hover::before,.faq-item:hover::before{transform:scaleX(1)}
.service:hover,.benefit:hover,.diff-item:hover,.step:hover,.quote:hover,.phase:hover,.faq-item:hover{background:#1B1E23}
/* ================= LEISTUNGEN (Rubriken) ================= */
  .services{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.service{background:var(--bg);padding:clamp(30px,3.4vw,52px);display:flex;flex-direction:column}
a.service{color:inherit;text-decoration:none}
.service .ico{margin-bottom:1.5rem;color:var(--ink-soft);transition:color .35s ease,filter .35s ease}
.service .ico svg{width:38px;height:38px;display:block}
.service:hover .ico{color:var(--accent);filter:drop-shadow(0 0 10px rgba(232,184,77,.65))}
.service h3{font-family:"Archivo",sans-serif;font-weight:700;font-size:clamp(1.35rem,2.1vw,1.75rem);
    letter-spacing:-.02em;margin-bottom:.7rem}
.service p{color:var(--ink-soft);font-size:.97rem;max-width:48ch;min-height:6.4em}
.service .items{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:.1rem 2rem;margin-top:1.9rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.service .items span{display:flex;align-items:flex-start;gap:.72em;
    font-family:"Archivo",sans-serif;font-size:.97rem;font-weight:500;color:var(--ink);
    padding:.44em 0;line-height:1.45}
/* Kreuzmarke wie auf Millimeterpapier */
  .service .items span::before{content:"";flex:0 0 auto;margin-top:.44em;
    width:14px;height:14px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0.5v13M0.5 7h13' stroke='%23E8B84D' stroke-width='1.1' stroke-linecap='butt'/%3E%3C/svg%3E");
    background-size:100% 100%;background-repeat:no-repeat;
    opacity:.85;transition:opacity .35s ease,filter .35s ease}
.service:hover .items span::before{opacity:1;filter:drop-shadow(0 0 5px rgba(232,184,77,.9))}
.service .more{margin-top:auto;padding-top:1.9rem;font-family:"Archivo",sans-serif;font-weight:600;font-size:.74rem;
    letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:.6em;
    transition:gap .3s ease,text-shadow .3s ease}
.service:hover .more{gap:1em;text-shadow:0 0 12px rgba(232,184,77,.5)}
.service-wide{grid-column:1 / -1;background:var(--bg-2);flex-direction:row;align-items:center;
    gap:clamp(20px,3vw,44px);flex-wrap:wrap;
    padding:clamp(24px,2.6vw,34px) clamp(26px,3vw,40px)}
.service-wide .ico{margin:0}
.service-wide h3{margin:0;font-size:1.25rem}
.service-wide p{flex:1;min-width:240px;min-height:0;max-width:none}
.service-wide .more{margin-top:0;padding-top:0}
/* ================= LEISTUNGSPHASEN ================= */
  .phases{background:var(--bg-2);border-block:1px solid var(--line)}
.phase-strip{display:grid;grid-template-columns:repeat(9,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.4rem}
.phase{background:var(--bg);padding:20px 12px 26px;text-align:center}
.phase .pn{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.5rem;color:var(--accent);text-shadow:var(--glow-m)}
.phase .pl{font-family:"Archivo",sans-serif;font-size:.6rem;letter-spacing:.04em;color:var(--ink-mute);margin-top:.6rem;line-height:1.35;display:block}
.phase-legend{font-family:"Archivo",sans-serif;font-size:.75rem;color:var(--ink-mute);letter-spacing:.05em;margin-top:1.4rem}
/* ================= REFERENZEN ================= */
  .refs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.ref{background:var(--bg);position:relative;overflow:hidden;display:flex;flex-direction:column}
.ref figure{margin:0;overflow:hidden;position:relative}
.ref img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
    filter:saturate(.88) brightness(.9);transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .45s ease}
.ref:hover img{transform:scale(1.035);filter:saturate(1) brightness(1)}
.ref .cap{padding:clamp(16px,1.5vw,22px) clamp(18px,1.7vw,24px) clamp(20px,1.9vw,26px)}
.ref .cap small{display:block;font-family:"Archivo",sans-serif;font-size:.68rem;color:var(--accent);
    letter-spacing:.14em;text-transform:uppercase;transition:text-shadow .35s ease}
.ref:hover .cap small{text-shadow:0 0 12px rgba(232,184,77,.55)}
.ref .cap h4{font-family:"Archivo",sans-serif;font-weight:600;font-size:1.06rem;margin-top:.5rem;letter-spacing:-.01em}
.ref .cap h4 span{color:var(--ink-mute);font-weight:500}
/* Abschlusskachel über die volle Breite — wie bei den Leistungen */
  .ref-cta{grid-column:1 / -1;background:var(--bg-2);flex-direction:row;align-items:center;
    gap:clamp(20px,3vw,44px);flex-wrap:wrap;padding:clamp(24px,2.6vw,34px) clamp(26px,3vw,40px);
    color:inherit;text-decoration:none}
.ref-cta .ico{color:var(--ink-soft);transition:color .35s ease,filter .35s ease;flex:0 0 auto}
.ref-cta .ico svg{width:38px;height:38px;display:block}
.ref-cta:hover .ico{color:var(--accent);filter:drop-shadow(0 0 10px rgba(232,184,77,.65))}
.ref-cta h4{font-family:"Archivo",sans-serif;font-weight:700;font-size:1.25rem;letter-spacing:-.01em;margin:0}
.ref-cta p{color:var(--ink-soft);font-size:.97rem;flex:1;min-width:240px}
.ref-cta .more{font-family:"Archivo",sans-serif;font-weight:600;font-size:.74rem;
    letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:.6em;
    transition:gap .3s ease,text-shadow .3s ease}
.ref-cta:hover .more{gap:1em;text-shadow:0 0 12px rgba(232,184,77,.5)}
.ref .cap small.todo{color:#E8B84D;border:1px dashed rgba(232,184,77,.6);display:inline-block;
    padding:.2em .5em;border-radius:2px}
/* ================= VORTEILE ================= */
  .why-lead{color:var(--ink-soft);font-size:clamp(1.02rem,1.6vw,1.16rem)}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:1px}
.benefit{background:var(--bg);padding:clamp(26px,3vw,40px)}
.benefit .bv{font-family:"Archivo",sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1;
    font-size:clamp(2.3rem,4.6vw,3.4rem);color:var(--accent);text-shadow:var(--glow-m)}
/* beim Darüberfahren läuft dieselbe Lichtwelle wie im Banner durch die Zahl */
  .benefit:hover .bv{
    text-shadow:none;
    background-image:linear-gradient(100deg,
      rgba(232,184,77,.65) 0%,
      rgba(232,184,77,.65) 34%,
      #FFF6DF 50%,
      rgba(232,184,77,.65) 66%,
      rgba(232,184,77,.65) 100%);
    background-size:360px 100%;
    background-repeat:repeat;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:lichtwelle 2.6s linear infinite;
  }
@media (prefers-reduced-motion:reduce){
    .benefit:hover .bv{animation:none;background-image:none;-webkit-text-fill-color:var(--accent)}
  }
.benefit .bt{font-family:"Archivo",sans-serif;font-weight:600;font-size:1.08rem;margin:.75rem 0 .6rem;letter-spacing:-.01em}
.benefit p{color:var(--ink-soft);font-size:.93rem}
.benefit-note{font-family:"Archivo",sans-serif;font-size:.68rem;color:var(--ink-mute);letter-spacing:.04em;margin-top:1.2rem;max-width:70ch;line-height:1.6}
/* ================= DIFFERENZIATOREN ================= */
  .diff{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.diff-item{background:var(--bg);padding:clamp(24px,2.6vw,36px)}
.diff-item .di-n{font-family:"Archivo",sans-serif;color:var(--accent);font-size:.78rem;letter-spacing:.1em;text-shadow:var(--glow-s);transition:text-shadow .35s ease}
.diff-item:hover .di-n{text-shadow:0 0 16px rgba(232,184,77,.6)}
.diff-item h4{font-family:"Archivo",sans-serif;font-weight:600;font-size:1.14rem;margin:.9rem 0 .55rem;letter-spacing:-.01em}
.diff-item p{color:var(--ink-soft);font-size:.9rem}
/* ================= ABLAUF (Schrittwähler) ================= */
  .waehler{display:grid;gap:clamp(26px,3.4vh,42px)}
.sw-schiene{position:relative;padding-top:26px}
.sw-chips{display:grid;grid-template-columns:repeat(6,1fr)}
.sw-chip{background:none;border:0;cursor:pointer;text-align:left;padding:0 14px 0 0;position:relative;
    display:flex;flex-direction:column;gap:.55rem;color:var(--ink-mute);transition:color .3s ease}
/* Strichsegmente wie die Sprungmarken am Rand - zusammen ergeben sie die Linie */
  .sw-chip::before{content:"";position:absolute;top:-26px;left:0;right:14px;height:1px;
    background:var(--line-2);
    transition:background .35s ease,height .35s ease,top .35s ease,right .35s ease,box-shadow .35s ease}
.sw-chip:hover::before{background:var(--ink-soft)}
.sw-chip:hover{color:var(--ink)}
.sw-chip.aktiv{color:var(--ink)}
.sw-chip.erledigt::before{background:rgba(232,184,77,.45)}
.sw-chip.aktiv::before{background:var(--accent);height:2px;top:-27px;right:8px;
    box-shadow:0 0 10px rgba(232,184,77,.7)}
.sw-n{font-family:"Archivo",sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.16em;color:var(--accent);
    opacity:.55;transition:opacity .3s ease}
.sw-chip.aktiv .sw-n{opacity:1;text-shadow:0 0 10px rgba(232,184,77,.55)}
.sw-t{font-family:"Archivo",sans-serif;font-weight:600;font-size:.95rem;letter-spacing:-.01em;line-height:1.3}
.sw-buehne{position:relative;background:var(--bg);border:1px solid var(--line);
    padding:clamp(30px,3.6vw,52px);min-height:260px;display:flex;flex-direction:column}
.sw-buehne::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);
    box-shadow:0 0 12px rgba(232,184,77,.6)}
.sw-panel{display:none;animation:swauf .45s cubic-bezier(.2,.7,.2,1)}
.sw-panel.an{display:block}
@keyframes swauf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sw-dauer{display:inline-block;font-family:"Archivo",sans-serif;font-size:.72rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--accent);border:1px solid rgba(232,184,77,.35);
    padding:.34em .75em;border-radius:2px}
.sw-buehne h3{font-family:"Archivo",sans-serif;font-weight:700;font-size:clamp(1.6rem,3vw,2.4rem);
    letter-spacing:-.025em;margin:1.2rem 0 .9rem}
.sw-buehne p{color:var(--ink-soft);font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.7;max-width:64ch}
.sw-mehr{margin-top:auto;padding-top:2rem;font-family:"Archivo",sans-serif;font-weight:600;font-size:.74rem;
    letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;
    gap:.6em;align-self:flex-start;transition:gap .3s ease,text-shadow .3s ease}
.sw-mehr:hover{gap:1em;text-shadow:0 0 12px rgba(232,184,77,.5)}
@media (max-width:900px){
    .sw-chips{grid-template-columns:repeat(3,1fr);gap:30px 10px}
    .sw-chip{padding-top:22px}
    .sw-chip::before{top:0;right:10px}
    .sw-chip.aktiv::before{top:-1px;right:6px}
  }
@media (max-width:520px){.sw-chips{grid-template-columns:repeat(2,1fr)}}
/* ================= STIMMEN (Karussell) ================= */
  .zit{position:relative}
.zit-buehne{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:clamp(14px,1.6vw,26px);
    align-items:center}
.zit-karte{background:var(--bg-2);border:1px solid var(--line);position:relative;overflow:hidden;
    display:flex;flex-direction:column;padding:clamp(20px,2vw,30px);
    min-height:clamp(240px,27vh,300px);
    opacity:.5;filter:saturate(.5) brightness(.85);
    transition:opacity .5s ease,filter .5s ease,padding .5s cubic-bezier(.2,.7,.2,1),
               min-height .5s cubic-bezier(.2,.7,.2,1),background .45s ease}
.zit-karte.mitte{opacity:1;filter:none;background:#171B20;
    padding:clamp(34px,3.6vw,56px) clamp(28px,3vw,44px);
    min-height:clamp(330px,38vh,410px)}
.zit-karte:hover{opacity:.8;cursor:pointer}
.zit-karte.mitte:hover{opacity:1;cursor:default}
.zit-karte::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);
    transform:scaleX(0);transform-origin:left center;transition:transform .5s cubic-bezier(.2,.7,.2,1);
    box-shadow:0 0 12px rgba(232,184,77,.6);z-index:2}
.zit-karte.mitte::before{transform:scaleX(1)}
.zit-karte::after{content:"”";position:absolute;right:-.04em;top:-.3em;
    font-family:"Archivo",sans-serif;font-weight:800;font-size:11rem;line-height:1;
    color:var(--accent);opacity:.05;pointer-events:none;transition:opacity .5s ease,font-size .5s ease}
.zit-karte.mitte::after{opacity:.1;font-size:16rem}
/* Zitattext in normaler Fließtextgröße - auf allen drei Karten gleich */
  .zit-text{position:relative;z-index:1;font-family:"Archivo",sans-serif;font-weight:400;
    font-size:1rem;line-height:1.75;letter-spacing:0;color:var(--ink-soft)}
.zit-karte.mitte .zit-text{color:var(--ink)}
.zit-fuss{position:relative;z-index:1;margin-top:auto;padding-top:clamp(20px,2.4vh,32px);
    display:flex;align-items:center;gap:.9rem}
.zit-kreis{flex:0 0 auto;width:40px;height:40px;border-radius:50%;
    border:1.5px solid rgba(232,184,77,.45);display:flex;align-items:center;justify-content:center;
    font-family:"Archivo",sans-serif;font-weight:700;font-size:.94rem;color:var(--accent);transition:.45s}
.zit-karte.mitte .zit-kreis{width:46px;height:46px;font-size:1.02rem;
    border-color:var(--accent);background:var(--accent);color:#0E0F11;
    box-shadow:0 0 16px rgba(232,184,77,.4)}
.zit-person{display:flex;flex-direction:column}
.zit-name{font-family:"Archivo",sans-serif;font-weight:700;font-size:.96rem;letter-spacing:-.01em;color:var(--ink)}
.zit-rolle{font-family:"Archivo",sans-serif;font-size:.73rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink-mute);margin-top:.25rem}
/* Steuerung im Strich-Stil */
  .zit-steuer{display:flex;align-items:center;justify-content:center;gap:clamp(24px,4vw,54px);
    margin-top:clamp(28px,3.4vh,44px)}
.zit-pfeil{background:none;border:0;cursor:pointer;padding:10px 0;display:flex;align-items:center;gap:1rem;
    color:var(--ink-mute);transition:color .3s ease}
.zit-pfeil:hover{color:var(--accent)}
.zit-pfeil span{font-family:"Archivo",sans-serif;font-weight:500;font-size:.68rem;
    letter-spacing:.34em;text-transform:uppercase;white-space:nowrap}
.zit-pfeil i{display:block;width:clamp(54px,7vw,92px);height:1px;position:relative;overflow:hidden}
.zit-pfeil.weiter i{background:linear-gradient(to right,currentColor,transparent)}
.zit-pfeil.zurueck i{background:linear-gradient(to left,currentColor,transparent)}
.zit-pfeil i::after{content:"";position:absolute;top:0;width:34%;height:1px;background:var(--accent);
    box-shadow:0 0 8px rgba(232,184,77,.8)}
.zit-pfeil.weiter i::after{left:-40%;animation:lauf-rechts 2.2s cubic-bezier(.6,.05,.3,1) infinite}
.zit-pfeil.zurueck i::after{right:-40%;animation:lauf-links 2.2s cubic-bezier(.6,.05,.3,1) infinite}
@keyframes lauf-rechts{0%{left:-40%}60%,100%{left:105%}}
@keyframes lauf-links{0%{right:-40%}60%,100%{right:105%}}
@media (prefers-reduced-motion:reduce){.zit-pfeil i::after{animation:none;display:none}}
.zit-zaehler{font-family:"Archivo",sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.2em;
    color:var(--ink-mute);min-width:74px;text-align:center}
.zit-zaehler b{color:var(--accent);font-weight:700}
@media (max-width:900px){
    .zit-buehne{grid-template-columns:1fr}
    .zit-karte{opacity:1;filter:none;min-height:0}
    .zit-karte:not(.mitte){display:none}
    .zit-karte::after{font-size:12rem}
  }
/* ================= ÜBER ================= */
  .about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:start}
.about-lead{font-family:"Archivo",sans-serif;font-weight:400;font-size:1rem;line-height:1.6;letter-spacing:0;color:var(--ink-soft)}
.about-body p{color:var(--ink-soft);margin-top:var(--head-gap)}
.about-body{margin-top:var(--head-gap)}
.ptypes-title{font-family:"Archivo",sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.2em;
    text-transform:uppercase;color:var(--accent);margin-top:2.4rem}
.ptypes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.1rem 2rem;
    margin-top:1.1rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.ptypes span{display:flex;align-items:flex-start;gap:.72em;padding:.44em 0;
    font-family:"Archivo",sans-serif;font-size:1rem;font-weight:500;color:var(--ink);line-height:1.45}
.ptypes span::before{content:"";flex:0 0 auto;margin-top:.4em;width:14px;height:14px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0.5v13M0.5 7h13' stroke='%23E8B84D' stroke-width='1.1'/%3E%3C/svg%3E");
    background-size:100% 100%;background-repeat:no-repeat;opacity:.85}
.about-photo{aspect-ratio:4/5;max-width:75%;margin-inline:auto;display:flex;align-items:flex-end;justify-content:center;margin-bottom:1.4rem;
    position:relative;overflow:visible;
    background:radial-gradient(60% 50% at 50% 72%,rgba(232,184,77,.10),transparent 70%)}
.about-photo img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block;filter:drop-shadow(0 24px 50px rgba(0,0,0,.55))}
.about-photo::after{display:none}
.creds{border:1px solid var(--line);border-radius:3px}
.cred{display:flex;gap:1rem;padding:20px 22px;border-bottom:1px solid var(--line)}
.cred:last-child{border-bottom:0}
.cred .k{font-family:"Archivo",sans-serif;font-size:.7rem;letter-spacing:.08em;color:var(--ink-mute);text-transform:uppercase;min-width:96px;padding-top:2px}
.cred .v{font-weight:500;font-size:.98rem}
/* ================= ZEITSTRAHL (waagerecht) ================= */
  .tl-title{font-family:"Archivo",sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.2em;
    text-transform:uppercase;color:var(--accent);margin-bottom:2rem}
.timeline{position:relative;display:grid;grid-template-columns:repeat(7,1fr)}
.timeline::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;
    background:rgba(232,184,77,.16)}
.tl-fill{position:absolute;left:0;top:5px;height:1px;width:0;background:var(--accent);
    box-shadow:0 0 10px rgba(232,184,77,.55);will-change:width}
.tl-item{position:relative;padding:34px clamp(14px,1.4vw,26px) 0 0;
    opacity:.16;filter:blur(7px);transform:translateY(12px);will-change:opacity,filter,transform}
/* Teilstrich auf der Zeitachse - kreuzt die Linie wie an einer Bemaßung */
  .tl-item::before{content:"";position:absolute;top:0;left:0;
    width:1px;height:11px;background:var(--line-2);
    transition:background .4s ease,width .4s ease,height .4s ease,top .4s ease,box-shadow .4s ease}
.tl-item.on::before{background:var(--accent);width:2px;height:15px;top:-2px;
    box-shadow:0 0 10px rgba(232,184,77,.7)}
.tl-year{font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(1.1rem,1.6vw,1.4rem);
    letter-spacing:-.01em;color:var(--accent);line-height:1}
.tl-text{color:var(--ink);font-size:.9rem;line-height:1.5;margin-top:.6rem}
.tl-wrap{margin-top:clamp(48px,6vh,78px)}
@media (max-width:900px){
    .timeline{grid-template-columns:1fr}
    .timeline::before{left:5px;right:auto;top:0;bottom:0;width:1px;height:auto}
    .tl-fill{left:5px;top:0;width:1px;height:0}
    .tl-item{padding:0 0 clamp(24px,3vh,38px) 34px;transform:translateX(12px)}
    .tl-item::before{top:9px;left:0;width:11px;height:1px}
    .tl-item.on::before{top:8px;width:15px;height:2px}
    .tl-item:last-child{padding-bottom:0}
  }
@media (prefers-reduced-motion:reduce){
    .tl-item{opacity:1!important;filter:none!important;transform:none!important}
  }
/* ================= KENNZAHLEN (Über mich) ================= */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(48px,7vh,80px);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    background:radial-gradient(120% 140% at 50% 0%,rgba(232,184,77,.05),transparent 70%)}
.stat{padding:clamp(34px,4.4vw,58px) 18px;text-align:center;position:relative}
.stat + .stat::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;
    background:linear-gradient(to bottom,transparent,var(--line-2) 30%,var(--line-2) 70%,transparent)}
.stat .sv{font-family:"Archivo",sans-serif;font-weight:800;letter-spacing:-.04em;line-height:1;
    font-size:clamp(2.6rem,5.4vw,4.4rem);color:var(--accent);text-shadow:0 0 26px rgba(232,184,77,.26)}
.stat .sl{font-family:"Archivo",sans-serif;font-weight:500;font-size:.78rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-mute);margin-top:1.1rem;line-height:1.5}
/* ================= ARBEITSWEISE ================= */
  .methode{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,5vw,86px);align-items:start}
.methode-text .sub{color:var(--ink-soft);font-size:1.05rem;margin-top:var(--head-gap)}
.methode-text .h-sec{margin-top:var(--head-gap)}
.methode-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.methode-liste li{position:relative;padding:clamp(20px,2vw,26px) 0 clamp(20px,2vw,26px) 40px;
    border-bottom:1px solid var(--line);color:var(--ink-soft);font-size:.97rem;line-height:1.6;
    transition:color .3s ease}
.methode-liste li strong{display:block;font-family:"Archivo",sans-serif;font-weight:700;
    font-size:1.1rem;color:var(--ink);letter-spacing:-.01em;margin-bottom:.35rem}
.methode-liste li::before{content:"";position:absolute;left:0;top:calc(clamp(20px,2vw,26px) + .25em);
    width:16px;height:16px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0.5v13M0.5 7h13' stroke='%23E8B84D' stroke-width='1.1'/%3E%3C/svg%3E");
    background-size:100% 100%;background-repeat:no-repeat;opacity:.8;transition:filter .35s ease,opacity .35s ease}
.methode-liste li:hover{color:var(--ink)}
.methode-liste li:hover::before{opacity:1;filter:drop-shadow(0 0 6px rgba(232,184,77,.9))}
@media (max-width:900px){.methode{grid-template-columns:1fr}}
/* ================= KONTAKTFORMULAR ================= */
  .form{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);
    text-align:left;margin-top:clamp(28px,3.5vh,44px)}
.feld{background:var(--bg);padding:clamp(16px,1.6vw,22px) clamp(18px,1.8vw,26px);position:relative;
    transition:background .3s ease}
.feld:focus-within{background:#1B1E23}
.feld::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);
    transform:scaleX(0);transform-origin:left center;transition:transform .4s cubic-bezier(.2,.7,.2,1);
    box-shadow:0 0 12px rgba(232,184,77,.6)}
.feld:focus-within::before{transform:scaleX(1)}
.feld.weit{grid-column:1 / -1}
.feld label{display:block;font-family:"Archivo",sans-serif;font-weight:600;font-size:.7rem;
    letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:.6rem}
.feld label .pf{color:var(--accent)}
.feld input,.feld select,.feld textarea{width:100%;background:none;border:0;outline:none;
    font-family:"Archivo",sans-serif;font-size:1rem;color:var(--ink);padding:0;line-height:1.5}
.feld textarea{resize:vertical;min-height:130px}
.feld input::placeholder,.feld textarea::placeholder{color:var(--ink-mute);opacity:.65}
.feld select{cursor:pointer}
.feld select option{background:#141619;color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.zustimmung{grid-column:1 / -1;background:var(--bg-2);padding:clamp(16px,1.6vw,22px) clamp(18px,1.8vw,26px);
    display:flex;gap:.9rem;align-items:flex-start;text-align:left}
.zustimmung input{margin-top:.25rem;width:17px;height:17px;accent-color:#E8B84D;flex:0 0 auto;cursor:pointer}
.zustimmung label{font-size:.88rem;color:var(--ink-soft);line-height:1.6}
.zustimmung a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.form-fuss{grid-column:1 / -1;background:var(--bg);padding:clamp(18px,2vw,26px);
    display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;justify-content:space-between}
.form-fuss .hinweis{font-family:"Archivo",sans-serif;font-size:.8rem;color:var(--ink-mute);letter-spacing:.04em}
.form button{font-family:"Archivo",sans-serif;font-weight:600;font-size:.98rem;padding:.95em 1.9em;
    border:0;border-radius:2px;background:var(--ink);color:#0E0F11;cursor:pointer;
    display:inline-flex;align-items:center;gap:.6em;transition:.2s,gap .25s ease}
.form button:hover{background:var(--accent);box-shadow:var(--glow-m);gap:.95em}
.meldung{grid-column:1 / -1;padding:1.1rem 1.3rem;text-align:left;font-size:.97rem;line-height:1.6;
    border-left:2px solid var(--accent);background:rgba(232,184,77,.08);color:var(--ink);display:none}
.meldung.an{display:block}
.meldung.fehler{border-left-color:#E06C5A;background:rgba(224,108,90,.1)}
@media (max-width:720px){.form{grid-template-columns:1fr}}
/* ================= FAQ ================= */
  .faq{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.faq-item{background:var(--bg);padding:clamp(26px,2.8vw,40px)}
.faq-item h3{font-family:"Archivo",sans-serif;font-weight:700;font-size:1.1rem;letter-spacing:-.01em;
    margin-bottom:.8rem;display:flex;gap:.7em;align-items:flex-start}
.faq-item h3::before{content:"";flex:0 0 auto;margin-top:.42em;width:14px;height:14px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0.5v13M0.5 7h13' stroke='%23E8B84D' stroke-width='1.1'/%3E%3C/svg%3E");
    background-size:100% 100%;background-repeat:no-repeat;opacity:.85;transition:filter .35s ease}
.faq-item:hover h3::before{filter:drop-shadow(0 0 5px rgba(232,184,77,.9))}
.faq-item p{color:var(--ink-soft);font-size:.95rem;line-height:1.7}
@media (max-width:820px){.faq{grid-template-columns:1fr}}
/* ================= KONTAKT ================= */
  .contact{background:var(--bg-2);border-top:1px solid var(--line);text-align:center}
.contact h2{font-size:clamp(2.1rem,5vw,3.6rem);margin-top:var(--head-gap);margin-bottom:var(--head-gap)}
.contact p.sub{color:var(--ink-soft);max-width:48ch;margin:0 auto 2.4rem;font-size:1.08rem}
.contact-meta{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:1.4rem 2.6rem;justify-content:center;font-family:"Archivo",sans-serif;font-size:.85rem;color:var(--ink-soft)}
.contact-meta a:hover{color:var(--accent)}
footer{border-top:1px solid var(--line);padding-block:44px;color:var(--ink-mute)}
.foot-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:center;font-size:.85rem}
.foot-links{display:flex;gap:1.6rem}
.foot-links a:hover{color:var(--ink-soft)}
.note{background:var(--accent-soft);border:1px dashed var(--accent);color:var(--accent);
    font-family:"Archivo",sans-serif;font-size:.68rem;letter-spacing:.03em;padding:.35em .7em;border-radius:2px;display:inline-block}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (min-width:1400px){
    .hero h1{font-size:clamp(3.4rem,5.2vw,6.2rem)}
    .hero p.lead{font-size:1.34rem;max-width:62ch}
  }
@media (max-width:980px){
    .services{grid-template-columns:1fr}
    .diff{grid-template-columns:repeat(2,1fr)}
    .benefits{grid-template-columns:repeat(2,1fr)}
  }
@media (max-width:820px){
    .nav-links,.nav-cta{display:none}
    .burger{display:block}
    .nav-links.open{display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--line);padding:22px var(--gutter);gap:1.3rem}
    .steps{grid-template-columns:repeat(2,1fr)}
    .quotes{grid-template-columns:1fr}
    .stats{grid-template-columns:repeat(2,1fr)}
    .stat:nth-child(3)::before{display:none}
    .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--line)}
    .refs{grid-template-columns:repeat(2,1fr)}
    .about-grid{grid-template-columns:1fr}
    .phase-strip{grid-template-columns:repeat(3,1fr)}
    .img-hint{display:none}
  }
@media (max-width:520px){
    .services,.diff,.refs,.benefits,.steps{grid-template-columns:1fr}
    .phase-strip{grid-template-columns:repeat(2,1fr)}
  }
/* ---------- Zurück nach oben ---------- */
  .nachoben-zone{position:relative;height:118px;background:var(--bg-2)}
.nachoben{position:absolute;right:var(--gutter);bottom:0;display:flex;flex-direction:column;
    align-items:center;gap:.9rem;color:var(--ink-mute);transition:color .3s ease;padding-bottom:26px;z-index:2}
.nachoben:hover{color:var(--accent)}
.nachoben span{font-family:"Archivo",sans-serif;font-weight:500;font-size:.68rem;
    letter-spacing:.34em;text-transform:uppercase;order:2}
.nachoben i{display:block;width:1px;height:152px;order:1;position:relative;overflow:hidden;
    background:linear-gradient(to top,currentColor,transparent)}
.nachoben i::after{content:"";position:absolute;left:0;bottom:-40%;width:1px;height:40%;
    background:var(--accent);box-shadow:0 0 8px rgba(232,184,77,.8);
    animation:cue-auf 2.2s cubic-bezier(.6,.05,.3,1) infinite}
@keyframes cue-auf{0%{bottom:-45%}60%,100%{bottom:105%}}
@media (prefers-reduced-motion:reduce){.nachoben i::after{animation:none;display:none}}
@media (max-width:640px){.nachoben-zone{height:92px}.nachoben i{height:110px}}
/* ---------- Fußzeile ---------- */
  footer{border-top:1px solid var(--line);padding-block:clamp(44px,5.5vh,68px) 0;color:var(--ink-mute)}
.foot-sp p,.foot-sp a{font-size:.94rem;line-height:1.75;color:var(--ink-soft)}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
/* ---------- Fußzeile (dreispaltig) ---------- */
  footer{border-top:1px solid var(--line);padding-block:clamp(46px,6vh,72px) 0;color:var(--ink-mute)}
.foot-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(30px,5vw,80px)}
.foot-sp h4{font-family:"Archivo",sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:-.01em;
    color:var(--ink);margin-bottom:1.5rem}
.foot-sp a{display:block;font-size:.95rem;line-height:1.7;color:var(--ink-soft);padding:.34em 0;
    transition:color .25s ease}
.foot-sp a:hover{color:var(--accent)}
.foot-marke .fm-logo{display:block;height:75px;width:auto;max-width:100%;object-fit:contain}
.foot-marke .fm-adresse{margin-top:1.5rem;font-size:.95rem;line-height:1.75;color:var(--ink-soft)}
.foot-marke .fm-adresse strong{display:block;color:var(--ink);font-weight:600;margin-bottom:.2rem}
.foot-sp a.fm-zeile{display:flex;align-items:center;gap:1.25em;margin-top:1rem;font-size:.95rem;
    color:var(--ink-soft);transition:color .25s ease;padding:0}
.foot-sp a.fm-zeile:hover{color:var(--accent)}
.foot-sp a.fm-zeile svg{width:16px;height:16px;flex:0 0 auto;color:var(--accent)}
.foot-route{display:inline-flex!important;align-items:center;gap:.7em;margin-top:1.7rem;
    font-family:"Archivo",sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--accent)!important;transition:gap .25s ease,text-shadow .3s ease}
.foot-route:hover{gap:1.05em;text-shadow:0 0 12px rgba(232,184,77,.5)}
.foot-alle{margin-top:.9rem;font-family:"Archivo",sans-serif;font-weight:600;font-size:.74rem!important;
    letter-spacing:.16em;text-transform:uppercase;color:var(--accent)!important;
    display:inline-flex!important;align-items:center;gap:.6em;transition:gap .25s ease}
.foot-alle:hover{gap:.95em}
.foot-unten{margin-top:clamp(36px,5vh,58px);border-top:1px solid var(--line);padding-block:24px;
    display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;align-items:center;font-size:.84rem}
.foot-unten .rechts{display:flex;gap:1.6rem}
.foot-unten a:hover{color:var(--accent)}
.foot-orte{padding-block:0 24px;font-size:.82rem;color:var(--ink-mute);line-height:1.8;max-width:100%}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
/* ---------- Fokus: übrige Projekte zurücknehmen ---------- */
  .pj{transition:opacity .45s ease,filter .45s ease}
@media (hover:hover){
    #liste:hover .pj{opacity:.4;filter:saturate(.45) brightness(.7)}
    #liste:hover .pj:hover{opacity:1;filter:none}
  }
/* ---------- Aktueller Baufortschritt ---------- */
  .pj-stand{margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.pj-stand-kopf{display:inline-flex;align-items:center;gap:.7em;font-family:"Archivo",sans-serif;
    font-weight:600;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
    margin-bottom:.65rem}
.pj-stand-kopf::before{content:"";width:16px;height:1px;background:var(--accent);
    box-shadow:0 0 8px rgba(232,184,77,.6)}
.pj-stand p{color:var(--ink-soft);font-size:.95rem;line-height:1.68;max-width:56ch;margin:0}
/* ---------- Bildstrecke je Projekt ---------- */
  .pj-medien{display:flex;flex-direction:column}
/* Reihenfolge im Wrapper: erst Bild, dann Knöpfe.
     Höhere Gewichtung, damit die Rasterregeln .pj-rechts .pj-bild hier nicht durchschlagen. */
  .pj .pj-medien .pj-bild{order:1}
.pj .pj-medien .pj-steuer{order:2}
.pj-galerie{position:relative;display:grid}
/* höhere Gewichtung als die allgemeine Bild-Einblendung, sonst liegen beide übereinander */
  figure[data-farbe] .pj-galerie img{grid-area:1/1;
    transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),filter .5s ease}
figure[data-farbe] .pj-galerie img:not(.an){opacity:0}
figure[data-farbe] .pj-galerie img.an{opacity:1}
.pj:hover .pj-galerie img.an{transform:scale(1.04);filter:saturate(1) brightness(1)}
.pj-steuer{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.6vw,34px);
    margin-top:1.05rem}
.pj-pfeil{background:none;border:0;cursor:pointer;padding:6px 0;font-family:inherit;
    display:flex;align-items:center;gap:.85rem;color:var(--ink-mute);transition:color .3s ease}
.pj-pfeil:hover{color:var(--accent)}
.pj-pfeil span{font-family:"Archivo",sans-serif;font-weight:500;font-size:.66rem;
    letter-spacing:.3em;text-transform:uppercase;white-space:nowrap}
.pj-pfeil i{display:block;width:clamp(38px,4.6vw,64px);height:1px;position:relative;overflow:hidden}
.pj-pfeil.weiter i{background:linear-gradient(to right,currentColor,transparent)}
.pj-pfeil.zurueck i{background:linear-gradient(to left,currentColor,transparent)}
.pj-pfeil i::after{content:"";position:absolute;top:0;width:34%;height:1px;background:var(--accent);
    box-shadow:0 0 8px rgba(232,184,77,.8)}
.pj-pfeil.weiter i::after{left:-40%;animation:lauf-rechts 2.2s cubic-bezier(.6,.05,.3,1) infinite}
.pj-pfeil.zurueck i::after{right:-40%;animation:lauf-links 2.2s cubic-bezier(.6,.05,.3,1) infinite}
@media (prefers-reduced-motion:reduce){.pj-pfeil i::after{animation:none;display:none}}
.pj-zaehler{font-family:"Archivo",sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.2em;
    color:var(--ink-mute);font-variant-numeric:tabular-nums;min-width:66px;text-align:center}
.pj-zaehler b{color:var(--accent);font-weight:700}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;width:auto}}
/* Erst beim Darüberfahren läuft die Lichtwelle durch jedes Wort.
     Muster­anfang und -ende sind identisch, und der Animationsweg
     entspricht exakt einer Kachelbreite — dadurch keine Naht. */
  .marquee:hover .marquee-track span{
    background-image:linear-gradient(100deg,
      rgba(232,184,77,.40) 0%,
      rgba(232,184,77,.40) 34%,
      #FFF6DF 50%,
      rgba(232,184,77,.40) 66%,
      rgba(232,184,77,.40) 100%);
    background-size:360px 100%;
    background-repeat:repeat;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:lichtwelle 2.6s linear infinite;
  }
@media (prefers-reduced-motion:reduce){
    .marquee:hover .marquee-track span{animation:none;background-image:none;
      -webkit-text-fill-color:rgba(232,184,77,.65)}
  }
/* das Wort unter dem Cursor leuchtet auf und pulsiert sanft */
  @keyframes scroll{to{transform:translateX(-50%)}}
/* ================= ABLAUF ================= */
  .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.step{background:var(--bg);padding:clamp(28px,2.6vw,40px) clamp(22px,2vw,32px) clamp(34px,3.4vw,48px)}
.step .sn{display:inline-flex;align-items:center;justify-content:center;
    width:60px;height:60px;border-radius:50%;border:1.5px solid rgba(232,184,77,.45);
    font-family:"Archivo",sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:.04em;
    color:var(--accent);transition:border-color .35s ease,box-shadow .35s ease,color .35s ease}
.step:hover .sn{border-color:var(--accent);color:#FBE3A0;
    box-shadow:0 0 18px rgba(232,184,77,.45),inset 0 0 14px rgba(232,184,77,.14)}
.step h4{font-family:"Archivo",sans-serif;font-weight:700;font-size:1.16rem;margin:1.7rem 0 .8rem;letter-spacing:-.01em}
.step p{color:var(--ink-soft);font-size:.94rem;line-height:1.65}
/* ================= STIMMEN ================= */
  .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1.6rem}
.quote{background:var(--bg);padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;gap:1.4rem}
.quote p{font-family:"Archivo",sans-serif;font-weight:500;font-size:1.02rem;line-height:1.42}
.quote .who{font-family:"Archivo",sans-serif;font-size:.72rem;color:var(--ink-mute);letter-spacing:.06em;margin-top:auto}
.tl-item::before{content:"";position:absolute;top:0;left:0;
    width:11px;height:11px;border-radius:50%;border:1px solid rgba(232,184,77,.45);
    background:var(--bg-2);transition:background .4s ease,border-color .4s ease,box-shadow .4s ease}
@media (max-width:900px){
    .timeline{grid-template-columns:1fr}
    .timeline::before{left:5px;right:auto;top:0;bottom:0;width:1px;height:auto}
    .tl-fill{left:5px;top:0;width:1px;height:0}
    .tl-item{padding:0 0 clamp(24px,3vh,38px) 34px;transform:translateX(12px)}
    .tl-item::before{top:4px}
    .tl-item:last-child{padding-bottom:0}
  }
.stats-foot{text-align:center;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-mute);margin-top:1.6rem}
.pj-hero{position:relative;padding-top:clamp(140px,17vh,190px);padding-bottom:clamp(40px,5vh,62px);
    border-bottom:1px solid var(--line);
    background:radial-gradient(70% 130% at 30% 0%,rgba(232,184,77,.07),transparent 62%)}
.pj-hero h1{font-size:clamp(2.3rem,5.4vw,4.2rem);margin:var(--head-gap) 0;max-width:18ch}
.pj-hero p.lead{color:var(--ink-soft);font-size:clamp(1.02rem,1.6vw,1.2rem);max-width:66ch}
.krumen{font-family:"Archivo",sans-serif;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-mute);margin-bottom:1.4rem}
.krumen a:hover{color:var(--accent)}
.krumen span{color:var(--accent);margin:0 .7em;font-weight:600}
/* Zahlenleiste */
  .pj-zahlen{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(32px,4vh,52px);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pj-zahlen div{padding:clamp(22px,2.4vw,32px) 10px;text-align:center;position:relative}
.pj-zahlen .zv{font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(1.5rem,3vw,2.3rem);
    color:var(--accent);line-height:1;letter-spacing:-.03em}
.pj-zahlen .zl{font-family:"Archivo",sans-serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-mute);margin-top:.8rem;line-height:1.5}
/* Filter */
  .filter{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:clamp(34px,4.5vh,58px)}
.filter button{font-family:"Archivo",sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.14em;
    text-transform:uppercase;background:none;color:var(--ink-mute);border:1px solid var(--line-2);
    padding:.72em 1.25em;border-radius:2px;cursor:pointer;transition:.25s}
.filter button:hover{color:var(--ink);border-color:var(--ink-mute)}
.filter button.aktiv{color:var(--accent);border-color:var(--accent);background:rgba(232,184,77,.08);
    text-shadow:0 0 10px rgba(232,184,77,.5)}
/* Projektzeilen im Wechsel */
  .pj{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,64px);align-items:center;
    padding:clamp(34px,4.5vh,58px) 0;border-bottom:1px solid var(--line)}
.pj:last-of-type{border-bottom:0}
.pj-rechts{grid-template-columns:.85fr 1.15fr}
.pj-rechts .pj-bild{order:2}
.pj-rechts .pj-medien{order:2}
.pj-rechts .pj-text{order:1}
.pj-bild{margin:0;overflow:hidden;position:relative;border:1px solid var(--line)}
.pj-bild::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);z-index:2;
    transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.2,.7,.2,1);
    box-shadow:0 0 12px rgba(232,184,77,.6)}
.pj:hover .pj-bild::before{transform:scaleX(1)}
.pj-bild img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
    filter:saturate(.88) brightness(.9);transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.pj:hover .pj-bild img{transform:scale(1.04);filter:saturate(1) brightness(1)}
.pj-nr{font-family:"Archivo",sans-serif;font-weight:800;font-size:2.6rem;color:var(--line-2);
    line-height:1;display:block;letter-spacing:-.04em;transition:color .4s ease}
.pj:hover .pj-nr{color:rgba(232,184,77,.5)}
.pj-kat{display:inline-block;margin-top:1rem;font-family:"Archivo",sans-serif;font-weight:600;font-size:.7rem;
    letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.pj-text h2{font-family:"Archivo",sans-serif;font-weight:700;font-size:clamp(1.5rem,2.6vw,2.1rem);
    letter-spacing:-.02em;margin:.6rem 0 .8rem}
.pj-text h2 span{color:var(--ink-mute);font-weight:500}
.pj-satz{color:var(--ink-soft);font-size:1rem;line-height:1.7;max-width:56ch}
.pj-rollen{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.pj-rollen span{font-family:"Archivo",sans-serif;font-size:.76rem;font-weight:500;letter-spacing:.05em;
    color:var(--ink);border:1px solid var(--line-2);padding:.44em .85em;border-radius:2px;transition:.3s}
.pj:hover .pj-rollen span{border-color:rgba(232,184,77,.45)}
.pj-eck{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;margin-bottom:1.1rem}
.pj-eck > span{font-family:"Archivo",sans-serif;font-size:.78rem;letter-spacing:.06em;color:var(--ink-mute)}
.pj-eck > span + span::before{content:"·";margin-right:.9rem;color:var(--line-2)}
.pj-status{font-weight:600;letter-spacing:.12em!important;text-transform:uppercase;font-size:.68rem!important;
    padding:.3em .65em;border-radius:2px;border:1px solid}
.pj-status::before{display:none!important}
.pj-status.fertig{color:var(--accent);border-color:rgba(232,184,77,.45);background:rgba(232,184,77,.07)}
.pj-status.bau{color:#EBE7DC;border-color:var(--line-2);background:rgba(255,255,255,.04)}
.pj-status.genehmigung{color:var(--ink-mute);border-color:var(--line-2)}
.pj-status.planung{color:var(--accent);border-color:rgba(232,184,77,.3);background:rgba(232,184,77,.05)}
.pj.aus{display:none}
@media (max-width:900px){
    .pj,.pj-rechts{grid-template-columns:1fr;gap:1.4rem}
    .pj-rechts .pj-bild{order:0}
  .pj-rechts .pj-medien{order:0}
    .pj-rechts .pj-text{order:1}
    .pj-zahlen{grid-template-columns:repeat(2,1fr)}
    .pj-zahlen div:nth-child(3)::before{display:none}
  }
/* ---------- Preisübersicht ---------- */
  .preise{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line);margin-top:clamp(26px,3.4vh,42px)}
.pr{background:var(--bg);padding:clamp(24px,2.8vw,38px);position:relative;transition:background .35s ease}
.pr::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);
    transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.2,.7,.2,1);
    box-shadow:0 0 12px rgba(232,184,77,.6)}
.pr:hover{background:#1B1E23}
.pr:hover::before{transform:scaleX(1)}
.pr h3{font-family:"Archivo",sans-serif;font-weight:600;font-size:1.06rem;letter-spacing:-.01em;
    color:var(--ink);margin-bottom:.5rem}
.pr .betrag{font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(1.7rem,2.6vw,2.3rem);
    letter-spacing:-.03em;color:var(--accent);line-height:1.1;margin-bottom:.7rem}
.pr .betrag small{font-size:.9rem;font-weight:500;letter-spacing:.04em;color:var(--ink-mute);
    display:block;margin-top:.35rem}
.pr p{color:var(--ink-soft);font-size:.95rem;line-height:1.65;margin:0}
.preis-fuss{grid-column:1 / -1;background:var(--bg-2);padding:clamp(22px,2.6vw,32px)}
.preis-fuss p{color:var(--ink-soft);font-size:.95rem;line-height:1.7;margin:0 0 .7rem}
.preis-fuss p:last-child{margin-bottom:0}
.preis-fuss strong{color:var(--ink);font-weight:600}
@media (max-width:760px){.preise{grid-template-columns:1fr}}
.vt-hero{position:relative;padding-top:clamp(140px,17vh,190px);padding-bottom:clamp(44px,6vh,70px);
    border-bottom:1px solid var(--line);
    background:radial-gradient(70% 130% at 20% 0%,rgba(232,184,77,.08),transparent 60%)}
.vt-hero h1{font-size:clamp(2.3rem,5.4vw,4.2rem);margin:var(--head-gap) 0;max-width:19ch}
.vt-hero p.lead{color:var(--ink-soft);font-size:clamp(1.02rem,1.6vw,1.2rem);max-width:66ch}
/* ---------- Gegenüberstellung ---------- */
  .vgl{border:1px solid var(--line);border-radius:3px;overflow:hidden}
.vgl-kopf{display:grid;grid-template-columns:.8fr 1.1fr 1.1fr;background:var(--bg-2);
    border-bottom:1px solid var(--line)}
.vgl-kopf div{padding:16px clamp(16px,1.6vw,24px);font-family:"Archivo",sans-serif;font-weight:600;
    font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.vgl-kopf div:nth-child(3){color:var(--accent)}
.vgl-zeile{display:grid;grid-template-columns:.8fr 1.1fr 1.1fr;border-bottom:1px solid var(--line);
    transition:background .35s ease}
.vgl-zeile:last-child{border-bottom:0}
.vgl-zeile:hover{background:#16191d}
.vgl-zeile > div{padding:clamp(20px,2vw,28px) clamp(16px,1.6vw,24px)}
.vgl-thema{font-family:"Archivo",sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:-.01em;
    border-right:1px solid var(--line)}
.vgl-ohne{border-right:1px solid var(--line);position:relative}
.vgl-ohne p{color:var(--ink-mute);font-size:.95rem;line-height:1.6}
.vgl-mit{position:relative;background:rgba(232,184,77,.035)}
.vgl-mit p{color:var(--ink);font-size:.95rem;line-height:1.6}
.vgl-mit::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);
    opacity:.5;transition:opacity .35s ease,box-shadow .35s ease}
.vgl-zeile:hover .vgl-mit::before{opacity:1;box-shadow:0 0 12px rgba(232,184,77,.6)}
.vgl-tag{display:none}
/* ---------- Argumente im Wechsel ---------- */
  .args{margin-top:clamp(20px,3vh,40px)}
.arg{display:grid;grid-template-columns:.55fr 1.45fr;gap:clamp(26px,4vw,64px);align-items:start;
    padding:clamp(38px,5vh,64px) 0;border-bottom:1px solid var(--line)}
.arg:last-child{border-bottom:0}
.arg-rechts{grid-template-columns:1.45fr .55fr}
.arg-rechts .arg-zahl{order:2;text-align:right}
.arg-rechts .arg-text{order:1}
.arg-zahl .av{display:block;font-family:"Archivo",sans-serif;font-weight:800;letter-spacing:-.04em;
    line-height:.95;font-size:clamp(3rem,7vw,5.4rem);color:var(--accent);text-shadow:var(--glow-m)}
.arg-zahl .al{display:block;margin-top:.9rem;font-family:"Archivo",sans-serif;font-weight:600;
    font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);line-height:1.5}
.arg-text p{color:var(--ink-soft);font-size:1.04rem;line-height:1.7;max-width:70ch}
.arg-rechts .arg-text p{margin-left:0}
.arg-folge{margin-top:1.2rem;color:var(--ink)!important;border-left:2px solid rgba(232,184,77,.45);
    padding-left:1.1rem}
.arg:hover .arg-zahl .av{
    text-shadow:none;
    background-image:linear-gradient(100deg,rgba(232,184,77,.65) 0%,rgba(232,184,77,.65) 34%,#FFF6DF 50%,rgba(232,184,77,.65) 66%,rgba(232,184,77,.65) 100%);
    background-size:360px 100%;background-repeat:repeat;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    animation:lichtwelle 2.6s linear infinite}
/* ---------- Rechenbeispiel ---------- */
  .rechnung{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line);margin-top:clamp(30px,4vh,48px)}
.rechnung div{background:var(--bg);padding:clamp(26px,3vw,40px);text-align:center;position:relative;
    transition:background .35s ease}
.rechnung div:hover{background:#1B1E23}
.rechnung .rv{font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(1.7rem,3.4vw,2.6rem);
    color:var(--accent);letter-spacing:-.03em;line-height:1}
.rechnung .rl{font-family:"Archivo",sans-serif;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-mute);margin-top:.9rem;line-height:1.5}
@media (max-width:900px){
    .vgl-kopf{display:none}
    .vgl-zeile{grid-template-columns:1fr}
    .vgl-thema{border-right:0;border-bottom:1px solid var(--line)}
    .vgl-ohne{border-right:0;border-bottom:1px solid var(--line)}
    .vgl-tag{display:block;font-family:"Archivo",sans-serif;font-size:.68rem;letter-spacing:.18em;
      text-transform:uppercase;color:var(--ink-mute);margin-bottom:.6rem}
    .vgl-mit .vgl-tag{color:var(--accent)}
    .arg,.arg-rechts{grid-template-columns:1fr;gap:1.6rem}
    .arg-rechts .arg-zahl{order:0;text-align:left}
    .arg-rechts .arg-text{order:1}
    .rechnung{grid-template-columns:1fr}
  }
.ab-hero{position:relative;padding-top:clamp(140px,17vh,190px);padding-bottom:clamp(44px,6vh,70px);
    border-bottom:1px solid var(--line);
    background:radial-gradient(65% 130% at 50% 0%,rgba(232,184,77,.07),transparent 62%)}
.ab-hero h1{font-size:clamp(2.3rem,5.4vw,4.2rem);margin:var(--head-gap) 0;max-width:19ch}
.ab-hero p.lead{color:var(--ink-soft);font-size:clamp(1.02rem,1.6vw,1.2rem);max-width:66ch}
/* zweispaltig mit mitlaufender Übersicht */
  .ab-layout{display:grid;grid-template-columns:230px 1fr;gap:clamp(30px,4vw,70px);align-items:start}
.ab-nav{position:sticky;top:110px}
.ab-nav p{font-family:"Archivo",sans-serif;font-weight:600;font-size:.76rem;letter-spacing:.2em;
    text-transform:uppercase;color:var(--accent);margin-bottom:1.2rem}
.ab-nav a{display:flex;gap:.9em;align-items:baseline;padding:.62em 0;color:var(--ink-mute);
    font-size:.94rem;border-bottom:1px solid var(--line);transition:color .3s ease}
.ab-nav a b{font-family:"Archivo",sans-serif;font-weight:700;font-size:.78rem;color:var(--accent);opacity:.6}
.ab-nav a:hover{color:var(--ink)}
.ab-nav a.aktiv{color:var(--ink)}
.ab-nav a.aktiv b{opacity:1;text-shadow:0 0 10px rgba(232,184,77,.6)}
.st{display:grid;grid-template-columns:82px 1fr;gap:clamp(18px,2vw,32px);
    padding:clamp(34px,4.5vh,58px) 0;border-bottom:1px solid var(--line);position:relative}
.st:first-of-type{padding-top:0}
.st:last-of-type{border-bottom:0}
.st-marke{position:relative}
.st-n{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;
    border:1.5px solid rgba(232,184,77,.4);font-family:"Archivo",sans-serif;font-weight:700;font-size:1.05rem;
    color:var(--accent);transition:.4s}
.st:hover .st-n{border-color:var(--accent);color:#FBE3A0;
    box-shadow:0 0 18px rgba(232,184,77,.45),inset 0 0 14px rgba(232,184,77,.14)}
.st-marke::after{content:"";position:absolute;left:32px;top:76px;bottom:-58px;width:1px;
    background:linear-gradient(to bottom,rgba(232,184,77,.35),rgba(232,184,77,.05))}
.st:last-of-type .st-marke::after{display:none}
.st-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:.9rem 1.4rem}
.st-kopf h2{font-family:"Archivo",sans-serif;font-weight:700;font-size:clamp(1.4rem,2.4vw,1.95rem);
    letter-spacing:-.02em}
.st-dauer{font-family:"Archivo",sans-serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--accent);border:1px solid rgba(232,184,77,.35);padding:.34em .75em;border-radius:2px}
.st-text{color:var(--ink-soft);font-size:1.02rem;line-height:1.7;margin-top:1.1rem;max-width:72ch}
.st-spalten{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,52px);margin-top:1.9rem}
.st-label{font-family:"Archivo",sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--ink-mute);margin-bottom:.9rem}
.st-spalten ul{list-style:none;margin:0;padding:0}
.st-spalten li{position:relative;padding:.36em 0 .36em 26px;color:var(--ink);font-size:.95rem;line-height:1.55}
.st-spalten li::before{content:"";position:absolute;left:0;top:.75em;width:12px;height:12px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0.5v13M0.5 7h13' stroke='%23E8B84D' stroke-width='1.2'/%3E%3C/svg%3E");
    background-size:100% 100%;background-repeat:no-repeat;opacity:.8}
.st-ergebnis{margin-top:1.9rem;background:var(--bg-2);border-left:2px solid var(--accent);
    padding:1rem 1.2rem;color:var(--ink);font-size:.97rem;line-height:1.6;max-width:74ch}
.st-ergebnis span{display:block;font-family:"Archivo",sans-serif;font-weight:600;font-size:.72rem;
    letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:.45rem}
@media (max-width:980px){
    .ab-layout{grid-template-columns:1fr}
    .ab-nav{display:none}
    .st{grid-template-columns:1fr;gap:1.3rem}
    .st-marke::after{display:none}
    .st-spalten{grid-template-columns:1fr}
  }
/* ---------- Kopf mit Porträt ---------- */
  .um-hero{position:relative;padding-top:clamp(130px,15vh,180px);padding-bottom:clamp(30px,4vh,52px);
    border-bottom:1px solid var(--line);overflow:hidden;
    background:radial-gradient(60% 110% at 78% 10%,rgba(232,184,77,.09),transparent 60%)}
.um-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,5vw,80px);align-items:end}
.um-hero h1{font-size:clamp(2.2rem,5vw,3.9rem);margin:var(--head-gap) 0;max-width:17ch}
.um-hero p.lead{color:var(--ink-soft);font-size:clamp(1.02rem,1.6vw,1.18rem);max-width:60ch}
.um-foto{position:relative}
.um-foto img{width:100%;max-width:340px;display:block;margin-left:auto;
    filter:drop-shadow(0 24px 50px rgba(0,0,0,.6))}
.um-fakten{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.um-fakten span{font-family:"Archivo",sans-serif;font-size:.76rem;letter-spacing:.08em;color:var(--ink-soft);
    border:1px solid var(--line-2);padding:.5em .9em;border-radius:2px;transition:.25s}
.um-fakten span:hover{border-color:var(--accent);color:var(--accent)}
/* ---------- Interview ---------- */
  .iv{border-top:1px solid var(--line)}
.iv-block{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,3.5vw,60px);
    padding:clamp(30px,4vh,52px) 0;border-bottom:1px solid var(--line);transition:background .35s ease}
.iv-block:hover{background:#16191d}
.iv-frage{font-family:"Archivo",sans-serif;font-weight:700;font-size:clamp(1.15rem,1.9vw,1.5rem);
    line-height:1.3;letter-spacing:-.015em;color:var(--accent);position:relative;padding-left:34px}
.iv-frage::before{content:"";position:absolute;left:0;top:.42em;width:18px;height:18px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0.5v13M0.5 7h13' stroke='%23E8B84D' stroke-width='1'/%3E%3C/svg%3E");
    background-size:100% 100%;background-repeat:no-repeat;opacity:.8;transition:filter .35s ease}
.iv-block:hover .iv-frage::before{filter:drop-shadow(0 0 7px rgba(232,184,77,.9))}
.iv-antwort{color:var(--ink-soft);font-size:1.04rem;line-height:1.75;max-width:66ch}
/* ---------- Grundsätze ---------- */
  .gs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.gs > div{background:var(--bg);padding:clamp(26px,3vw,42px);position:relative;transition:background .35s ease}
.gs > div::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);
    transform:scaleX(0);transform-origin:left center;transition:transform .4s cubic-bezier(.2,.7,.2,1);
    box-shadow:0 0 12px rgba(232,184,77,.6)}
.gs > div:hover{background:#1B1E23}
.gs > div:hover::before{transform:scaleX(1)}
.gs h3{font-family:"Archivo",sans-serif;font-weight:700;font-size:1.22rem;letter-spacing:-.01em;margin-bottom:.7rem}
.gs p{color:var(--ink-soft);font-size:.95rem;line-height:1.65}
/* ---------- Werdegang als Liste ---------- */
  .wg{border-top:1px solid var(--line);margin-top:1.6rem}
.wg-z{display:grid;grid-template-columns:120px 1fr;gap:clamp(16px,2vw,34px);align-items:baseline;
    padding:clamp(16px,1.8vh,24px) 0;border-bottom:1px solid var(--line);transition:background .3s ease}
.wg-z:hover{background:#16191d}
.wg-j{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.22rem;color:var(--accent);letter-spacing:-.01em}
.wg-t{color:var(--ink);font-size:1rem;line-height:1.55}
@media (max-width:900px){
    .um-grid{grid-template-columns:1fr}
    .um-foto{order:-1}
    .um-foto img{margin:0 auto;max-width:230px}
    .iv-block{grid-template-columns:1fr;gap:1.1rem}
    .gs{grid-template-columns:1fr}
    .wg-z{grid-template-columns:80px 1fr}
  }
.rt-hero{padding-top:clamp(130px,15vh,175px);padding-bottom:clamp(30px,4vh,48px);
    border-bottom:1px solid var(--line)}
.rt-hero h1{font-size:clamp(2rem,4.4vw,3.3rem);margin:var(--head-gap) 0 0}
.rt{max-width:82ch}
.rt h2{font-family:"Archivo",sans-serif;font-weight:700;font-size:clamp(1.25rem,2vw,1.6rem);
    letter-spacing:-.015em;margin:clamp(34px,4.5vh,54px) 0 1rem;padding-top:clamp(24px,3vh,34px);
    border-top:1px solid var(--line)}
.rt h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.rt h3{font-family:"Archivo",sans-serif;font-weight:600;font-size:1.06rem;margin:1.7rem 0 .6rem;color:var(--ink)}
.rt p,.rt li{color:var(--ink-soft);font-size1rem;font-size:1rem;line-height:1.75}
.rt p{margin-bottom:1rem}
.rt ul{margin:.4rem 0 1.2rem;padding-left:0;list-style:none}
.rt li{position:relative;padding:.3em 0 .3em 28px}
.rt li::before{content:"";position:absolute;left:0;top:.85em;width:13px;height:13px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0.5v13M0.5 7h13' stroke='%23E8B84D' stroke-width='1.1'/%3E%3C/svg%3E");
    background-size:100% 100%;background-repeat:no-repeat;opacity:.8}
.rt a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.rt-block{background:var(--bg-2);border-left:2px solid var(--accent);padding:1.1rem 1.3rem;margin-bottom:1.4rem}
.rt-block p{margin:0;color:var(--ink)}
.rt-todo{border:1px dashed rgba(232,184,77,.6);background:rgba(232,184,77,.06);
    padding:1rem 1.2rem;margin-bottom:1.4rem;border-radius:2px}
.rt-todo p{margin:0;color:var(--accent);font-size:.93rem;line-height:1.65}
<style>
  .vier{position:relative;padding-top:clamp(150px,18vh,205px);padding-bottom:clamp(50px,7vh,90px);
    border-bottom:1px solid var(--line)}
/* Millimeterraster wie auf dem Bauschild */
  .vier::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:
      repeating-linear-gradient(to right,rgba(232,184,77,.07) 0 1px,transparent 1px 46px),
      repeating-linear-gradient(to bottom,rgba(232,184,77,.07) 0 1px,transparent 1px 46px);
    -webkit-mask-image:radial-gradient(90% 80% at 50% 45%,#000 0%,transparent 75%);
            mask-image:radial-gradient(90% 80% at 50% 45%,#000 0%,transparent 75%)}
.vier .wrap{position:relative;z-index:1}
.vier-zahl{font-family:"Archivo",sans-serif;font-weight:800;line-height:1;
    font-size:clamp(5rem,16vw,12rem);letter-spacing:-.05em;color:var(--ink);
    display:flex;align-items:baseline;gap:.04em;margin-top:1.2rem}
.vier-zahl span{color:var(--accent);text-shadow:0 0 40px rgba(232,184,77,.3)}
.vier h1{font-size:clamp(1.9rem,4.4vw,3.1rem);margin:var(--head-gap) 0 0}
.vier .lead{margin-top:1.2rem;max-width:56ch}
.wege{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line);margin-top:clamp(26px,3.4vh,42px)}
.wege a{background:var(--bg);padding:clamp(22px,2.4vw,32px);position:relative;overflow:hidden;
    display:flex;flex-direction:column;transition:background .35s ease}
.wege a::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);
    transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.2,.7,.2,1);
    box-shadow:0 0 12px rgba(232,184,77,.6)}
.wege a:hover{background:#1B1E23}
.wege a:hover::before{transform:scaleX(1)}
.wege h2{font-family:"Archivo",sans-serif;font-weight:700;font-size:1.1rem;letter-spacing:-.015em;
    color:var(--ink);margin-bottom:.5rem}
.wege p{color:var(--ink-soft);font-size:.93rem;line-height:1.6;margin:0}
.wege .mehr{margin-top:1.2rem;font-family:"Archivo",sans-serif;font-weight:600;font-size:.7rem;
    letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
    display:inline-flex;align-items:center;gap:.55em;transition:gap .28s ease}
.wege a:hover .mehr{gap:.95em}
@media (max-width:860px){.wege{grid-template-columns:1fr}.vier-zahl{font-size:clamp(4.2rem,22vw,8rem);margin-top:.8rem}}
<style>
  .lp-hero .krumen{font-family:"Archivo",sans-serif;font-size:.76rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-mute);margin-bottom:1.4rem}
.lp-hero .krumen a:hover{color:var(--accent)}
.lp-hero .krumen span{color:var(--accent);margin:0 .7em;font-weight:600}
/* Weitere Leistungsbereiche */
  .lp-weiter{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line);margin-top:clamp(26px,3.4vh,42px)}
.lp-weiter a{background:var(--bg);padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;
    position:relative;overflow:hidden;transition:background .35s ease}
.lp-weiter a::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);
    transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.2,.7,.2,1);
    box-shadow:0 0 12px rgba(232,184,77,.6)}
.lp-weiter a:hover{background:#1B1E23}
.lp-weiter a:hover::before{transform:scaleX(1)}
.lp-weiter h3{font-family:"Archivo",sans-serif;font-weight:700;font-size:1.14rem;letter-spacing:-.015em;
    color:var(--ink);margin-bottom:.6rem}
.lp-weiter p{color:var(--ink-soft);font-size:.94rem;line-height:1.65;margin:0}
.lp-weiter .mehr{margin-top:1.3rem;font-family:"Archivo",sans-serif;font-weight:600;font-size:.72rem;
    letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
    display:inline-flex;align-items:center;gap:.55em;transition:gap .28s ease}
.lp-weiter a:hover .mehr{gap:.95em}
@media (max-width:860px){.lp-weiter{grid-template-columns:1fr}}
/* Übersichtskacheln */
  .lp-uebersicht{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line)}
.lp-karte{background:var(--bg);padding:clamp(30px,3.4vw,50px);display:flex;flex-direction:column;
    position:relative;overflow:hidden;transition:background .35s ease}
.lp-karte::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);
    transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.2,.7,.2,1);
    box-shadow:0 0 12px rgba(232,184,77,.6)}
.lp-karte:hover{background:#1B1E23}
.lp-karte:hover::before{transform:scaleX(1)}
.lp-karte .kopf{display:flex;align-items:flex-start;gap:1.1rem;margin-bottom:1.2rem}
.lp-karte .ico{flex:0 0 auto;width:46px;height:46px;border:1px solid var(--line-2);border-radius:2px;
    display:flex;align-items:center;justify-content:center;color:var(--accent);
    transition:border-color .4s ease,box-shadow .4s ease}
.lp-karte:hover .ico{border-color:var(--accent);box-shadow:0 0 16px rgba(232,184,77,.22)}
.lp-karte .ico svg{width:23px;height:23px}
.lp-karte h2{font-family:"Archivo",sans-serif;font-weight:700;font-size:clamp(1.3rem,2vw,1.7rem);
    letter-spacing:-.02em;margin-top:.1rem}
.lp-karte p{color:var(--ink-soft);font-size:1rem;line-height:1.7;margin:0}
.lp-karte ul{list-style:none;padding:0;margin:1.3rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem .5rem}
.lp-karte li{font-family:"Archivo",sans-serif;font-size:.8rem;letter-spacing:.04em;color:var(--ink-mute);
    border:1px solid var(--line);padding:.34em .7em;border-radius:2px}
.lp-karte .mehr{margin-top:auto;padding-top:1.8rem;font-family:"Archivo",sans-serif;font-weight:600;
    font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
    display:inline-flex;align-items:center;gap:.6em;transition:gap .28s ease}
.lp-karte:hover .mehr{gap:1em}
@media (max-width:860px){.lp-uebersicht{grid-template-columns:1fr}}
.methode-liste li strong,.methode-liste li h3{display:block;font-family:"Archivo",sans-serif;font-weight:700;
    font-size:1.1rem;color:var(--ink);letter-spacing:-.01em;margin-bottom:.35rem}
.lp-hero{position:relative;padding-top:clamp(140px,17vh,190px);padding-bottom:clamp(40px,6vh,64px);
    border-bottom:1px solid var(--line);
    background:radial-gradient(80% 120% at 78% 0%,rgba(232,184,77,.07),transparent 62%)}
.lp-hero h1{font-size:clamp(2.3rem,5.4vw,4.2rem);margin:var(--head-gap) 0;max-width:20ch}
.lp-hero p.lead{color:var(--ink-soft);font-size:clamp(1.02rem,1.6vw,1.2rem);max-width:64ch}
.sprung{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line);margin-top:clamp(34px,4vh,52px)}
.sprung a{background:var(--bg);padding:clamp(18px,1.8vw,26px);display:flex;flex-direction:column;gap:.5rem;
    position:relative;transition:background .35s ease}
.sprung a::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);
    transform:scaleX(0);transform-origin:left center;transition:transform .4s cubic-bezier(.2,.7,.2,1);
    box-shadow:0 0 12px rgba(232,184,77,.6)}
.sprung a:hover{background:#1B1E23}
.sprung a:hover::before{transform:scaleX(1)}
.sprung strong{font-family:"Archivo",sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:-.01em}
.sprung span{font-family:"Archivo",sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.lp-head{display:flex;gap:clamp(18px,2vw,30px);align-items:flex-start;margin-bottom:clamp(38px,5vh,60px)}
.lp-head .ico{color:var(--accent);flex:0 0 auto;margin-top:.2rem}
.lp-head .ico svg{width:42px;height:42px;display:block}
.lp-head .h-sec{margin-top:var(--head-gap)}
.lp-head .sub{color:var(--ink-soft);font-size:1.05rem;margin-top:var(--head-gap);max-width:68ch}
.lp-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,4vw,72px);align-items:start}
.lp-label{font-family:"Archivo",sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.2em;
    text-transform:uppercase;color:var(--accent);margin-bottom:1.3rem}
.lp-wann{list-style:none;margin:0;padding:0}
.lp-wann li{position:relative;padding:.55em 0 .55em 30px;color:var(--ink);font-size:1rem;line-height:1.55}
.lp-wann li::before{content:"";position:absolute;left:0;top:.95em;width:14px;height:14px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0.5v13M0.5 7h13' stroke='%23E8B84D' stroke-width='1.1'/%3E%3C/svg%3E");
    background-size:100% 100%;background-repeat:no-repeat;opacity:.85}
.lp-was{border-top:1px solid var(--line)}
.lp-ergebnis{margin-top:clamp(40px,5vh,64px);border-top:1px solid var(--line);padding-top:clamp(26px,3vh,38px)}
.lp-ergebnis .items{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.1rem 2rem}
.lp-ergebnis .items span{display:flex;align-items:flex-start;gap:.72em;padding:.44em 0;
    font-family:"Archivo",sans-serif;font-size:.97rem;font-weight:500;color:var(--ink);line-height:1.45}
.lp-ergebnis .items span::before{content:"";flex:0 0 auto;margin-top:.44em;width:14px;height:14px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0.5v13M0.5 7h13' stroke='%23E8B84D' stroke-width='1.1'/%3E%3C/svg%3E");
    background-size:100% 100%;background-repeat:no-repeat;opacity:.85}
.lp-hinweis{margin-top:1.6rem;color:var(--ink-mute);font-size:.9rem;line-height:1.65;max-width:76ch;
    border-left:2px solid rgba(232,184,77,.35);padding-left:1rem}
@media (max-width:900px){
    .lp-grid{grid-template-columns:1fr}
    .sprung{grid-template-columns:repeat(2,1fr)}
    .lp-head{flex-direction:column}
  }