/* GÖME Dienstleistungen — Konzept, Design und Umsetzung: LEWO Digital
   Schrift: Barlow Semi Condensed (Überschriften) + Barlow (Text), self-hosted, SIL OFL 1.1.
   Farbe: abgeleitet aus dem Logo-Blau #25338B. */

@font-face{font-family:"BarlowSC";src:url("../fonts/bsc-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"BarlowSC";src:url("../fonts/bsc-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-500.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  /* Markenblau, aus dem Logo abgeleitet */
  /* Farbanker: CI-Blau der Visitenkarte. Alle Stufen auf Farbton 231,8°,
     nur Sättigung und Helligkeit variiert. #717AB3 der Karte = --p-300. */
  --p-950:#0B0E1E; --p-900:#11142D; --p-800:#161C41; --p-700:#1C255E;
  --p-600:#212C73; --p-500:#25338B; --p-400:#3F4DA6; --p-300:#717AB3;
  --p-200:#A1A7CE; --p-100:#CED1E9; --p-050:#EDEEF8;
  /* Bereich Außen: dieselbe Rampe, Farbton auf 148° gedreht */
  --g-950:#0C1D14; --g-900:#122B1E; --g-700:#285D41; --g-500:#358259;
  --g-400:#49AB77; --g-300:#7FBD9C; --g-100:#D7EAE0;
  /* Neutral mit Unterton aus dem Markenblau */
  --n-050:#F5F6FA; --n-100:#EAEBF1; --n-300:#AFB1C0; --n-500:#818498;
  --n-700:#424557; --n-900:#1C1E2C; --n-950:#0E101B;
  /* funktional, gedämpft */
  --f-erfolg:#4B9B73; --f-warnung:#C49645; --f-fehler:#BD5B4C;

  /* Aliasse der bisherigen Namen auf die Rampe */
  --b900:var(--p-900); --b800:var(--p-800); --b700:var(--p-700); --b600:var(--p-500);
  --b500:var(--p-400); --b400:var(--p-400); --b300:var(--p-300); --b200:var(--p-200);
  --b100:var(--p-100);
  --gruen:var(--g-500); --gruen-hell:var(--g-300);

  /* Neutrale Ebenen */
  --dunkel:var(--p-900); --dunkel-2:var(--p-800); --dunkel-3:var(--p-950);
  --hell:var(--n-050); --hell-2:#FFFFFF;

  /* Rollen — werden pro Section umgeschaltet */
  --grund:var(--dunkel);
  --schrift:var(--hell);
  --schrift-2:rgba(245,246,250,.76);
  --schrift-3:rgba(245,246,250,.64);
  --linie:rgba(245,246,250,.16);
  --linie-fein:rgba(245,246,250,.09);
  --akzent:var(--b300);

  --rail:clamp(1.5rem,5vw,5rem);
  --maxw:1400px;
  --sec:clamp(5rem,12vh,9rem);
  --sec-s:clamp(3.5rem,8vh,6rem);
}

/* Helle Sections kippen die Rollen — Komponenten passen sich an. */
.hell{
  --grund:var(--hell); --schrift:var(--dunkel);
  --schrift-2:rgba(28,30,44,.78); --schrift-3:rgba(28,30,44,.68);
  --linie:rgba(28,30,44,.16); --linie-fein:rgba(28,30,44,.09);
  --akzent:var(--b600);
  background:var(--grund); color:var(--schrift);
}
.hell--weiss{--grund:var(--hell-2);background:var(--hell-2)}
.dunkel{--grund:var(--dunkel);--schrift:var(--hell);
  --schrift-2:rgba(245,246,250,.76);--schrift-3:rgba(245,246,250,.64);
  --linie:rgba(245,246,250,.16);--linie-fein:rgba(245,246,250,.09);
  --akzent:var(--b300);
  background:var(--grund);color:var(--schrift)}
.dunkel--tief{--grund:var(--dunkel-3);background:var(--dunkel-3)}

*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,ul,ol,figure,dl,dt,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
html{background:var(--grund);scroll-behavior:smooth}
body{background:var(--grund);color:var(--schrift);
  font-family:"Barlow",system-ui,-apple-system,sans-serif;font-weight:400;
  font-size:clamp(15.5px,.4vw+14.2px,17px);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--rail)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Der Sprunglink war dauerhaft weggeclippt und trug die Browser-Linkfarbe —
   für Tastaturnutzer also angekündigt, aber unsichtbar. */
.sr:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;clip:auto;
  z-index:300;padding:12px 20px;border-radius:2px;background:var(--p-500);
  color:#fff;text-decoration:none;font-weight:600;
  outline:2px solid #fff;outline-offset:2px}

/* ---------------- Typo ---------------- */
h1,h2,h3{font-family:"BarlowSC",system-ui,sans-serif;font-weight:700;
  letter-spacing:-.012em;line-height:1.04;text-wrap:balance}
.t1{font-size:clamp(2rem,4.3vw,3.6rem);line-height:1.04}
.t2{font-size:clamp(1.65rem,3.1vw,2.7rem)}
.t3{font-size:clamp(1.2rem,1.8vw,1.6rem);letter-spacing:-.018em}
.lead{font-size:clamp(1rem,.42vw+.92rem,1.14rem);line-height:1.62;color:var(--schrift-2);max-width:56ch}
.txt{color:var(--schrift-2);max-width:58ch}
.klein{font-size:.9rem;line-height:1.6;color:var(--schrift-3)}
.eyebrow{display:inline-flex;align-items:center;gap:.72rem;font-size:.82rem;font-weight:600;
  color:var(--schrift-3);margin-bottom:1.15rem;letter-spacing:.01em}
.eyebrow::before{content:"";width:1.6rem;height:2px;background:var(--akzent);flex:none}
.eyebrow--gruen::before{background:var(--gruen)}

/* ---------------- CTA-System: drei Stufen ---------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  padding:1.05rem 1.9rem;font-family:"BarlowSC",sans-serif;font-weight:600;font-size:1.02rem;
  letter-spacing:.005em;text-decoration:none;border:2px solid transparent;
  background:var(--b600);color:#fff;
  transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s cubic-bezier(.2,.7,.2,1);
}
.btn::after{content:"";width:.55rem;height:.55rem;border-top:2px solid currentColor;
  border-right:2px solid currentColor;transform:rotate(45deg);flex:none;
  transition:transform .24s cubic-bezier(.2,.7,.2,1)}
.btn:hover{background:var(--b700);transform:translateY(-1px)}
.btn:hover::after{transform:rotate(45deg) translate(2px,-2px)}
.btn:active{transform:translateY(0)}

/* Sekundär: Kontur, kein Flächengewicht */
.btn--o{background:transparent;color:var(--schrift);border-color:var(--linie)}
.btn--o::after{opacity:.55}
.btn--o:hover{background:transparent;border-color:var(--schrift);color:var(--schrift);transform:translateY(-1px)}
.btn--o:hover::after{opacity:1}
.hell .btn--o{border-color:rgba(28,30,44,.28)}
.hell .btn--o:hover{border-color:var(--b600);color:var(--b600)}

/* Auf Bildflächen: heller Primärknopf, damit er sich vom Foto löst */
.btn--licht{background:var(--hell-2);color:var(--dunkel)}
.btn--licht:hover{background:var(--b600);color:#fff}

.btn--s{padding:.78rem 1.3rem;font-size:.94rem}

/* Text-CTA */
.link{display:inline-flex;align-items:center;gap:.5rem;color:var(--schrift);text-decoration:none;
  font-family:"BarlowSC",sans-serif;font-weight:600;font-size:1.02rem;
  border-bottom:2px solid var(--akzent);padding-bottom:.16em;
  transition:border-color .2s ease,color .2s ease,gap .2s ease}
.link::after{content:"→";font-family:"Barlow",sans-serif;font-weight:500;transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.link:hover{gap:.75rem}
.link:hover::after{transform:translateX(2px)}
.hell .link{color:var(--b700)}
.hell .link:hover{border-color:var(--b700)}
.link--gruen{border-color:var(--gruen)}
.hell .link--gruen{color:var(--g-700);border-color:var(--gruen)}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--p-300);outline-offset:3px}

.missing{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--p-100);background:rgba(37,51,139,.16);
  border:1px dashed rgba(37,51,139,.5);padding:.2em .55em}

/* ================= 01 HERO ================= */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:clip}
.hero>.wrap{width:100%}
.hero__bg{position:absolute;inset:-9% 0;z-index:0;will-change:transform}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:62% 58%;
  transform:scale(1.06)}
.hero__w1{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,
  rgba(11,14,30,.74) 0%,rgba(11,14,30,.16) 26%,rgba(11,14,30,.34) 56%,rgba(11,14,30,.95) 90%,var(--grund) 100%)}
.hero__w2{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,
  rgba(16,19,45,.95) 0%,rgba(17,21,44,.78) 28%,rgba(28,30,44,.22) 52%,rgba(28,30,44,0) 68%)}
/* Ein tiefer Blauton am unteren Rand bindet den Hero an die Marke. */
.hero__w3{position:absolute;inset:auto 0 0 0;height:46%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(17,20,45,0),rgba(17,20,45,.5) 55%,var(--dunkel) 100%)}

.kopf{position:relative;z-index:20;padding-top:clamp(1.6rem,3.5vh,2.4rem)}
.kopf__in{display:flex;align-items:center;gap:1.5rem;justify-content:space-between}
.kopf__logo img{width:clamp(120px,10vw,150px)}
.kopf__nav{display:flex;align-items:center;gap:clamp(1.1rem,2.2vw,2.1rem)}
.kopf__nav a{color:var(--schrift);text-decoration:none;font-size:.94rem;
  border-bottom:1px solid transparent;padding-bottom:.15em;transition:border-color .2s,color .2s}
.kopf__nav a:hover{border-color:var(--schrift);color:#fff}

.kopf__burger{display:none;padding:.55rem .8rem;border:1px solid var(--linie);font-size:.88rem}
@media (max-width:940px){
  /* width:100vw statt 100% aus inset: auf der Startseite steht .hero mit
     overflow:clip zwischen der Nav und dem echten Wurzel-Containing-Block,
     das ließ die Breite sonst am (nicht sichtbaren) Übergroß-Bild der
     Parallax-Ebene statt am Viewport hängen. */
  .kopf__nav{position:fixed;top:0;left:0;width:100vw;max-width:100vw;
    background:var(--dunkel-3);
    flex-direction:column;align-items:stretch;gap:0;padding:5.5rem var(--rail) 2rem;
    transform:translateY(-102%);transition:transform .38s cubic-bezier(.2,.7,.2,1);
    z-index:60;box-shadow:0 30px 60px -30px #000}
  .kopf__nav[data-auf="1"]{transform:none}
  .kopf__nav a{padding:1rem 0;border-bottom:1px solid var(--linie-fein);font-size:1.1rem}
  .kopf__burger{display:block;position:relative;z-index:70}
}

.hero__mid{position:relative;z-index:5;flex:1;display:flex;align-items:center;
  padding-block:clamp(3rem,8vh,5.5rem)}
.hero__txt{max-width:min(46rem,86%)}
.hero__txt .lead{margin-top:1.5rem}
.hero__cta{margin-top:2.3rem;display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}

/* Nur waehrend das Intro laeuft vorbereitet: Hero-Text baut sich gestaffelt
   auf, sobald sich der Ö-Kreis zu oeffnen beginnt. Ohne Intro (Reduced Motion,
   spaetere interne Navigation) gilt diese Regel gar nicht — Inhalt ist dann
   sofort und garantiert sichtbar, kein Risiko eines haengenden opacity:0. */
html.intro-an .hero__txt > *{opacity:0;transform:translateY(16px)}
html.intro-an .hero__txt.ist-da > *{opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
html.intro-an .hero__txt.ist-da > *:nth-child(1){transition-delay:.05s}
html.intro-an .hero__txt.ist-da > *:nth-child(2){transition-delay:.14s}
html.intro-an .hero__txt.ist-da > *:nth-child(3){transition-delay:.23s}
html.intro-an .hero__txt.ist-da > *:nth-child(4){transition-delay:.32s}
.hero__unten{position:relative;z-index:5;padding-bottom:clamp(1.5rem,3.5vh,2.4rem)}
.hero__leist{display:flex;flex-wrap:wrap;gap:.5rem 2.4rem;align-items:center;
  border-top:1px solid rgba(245,246,250,.22);padding-top:1.15rem}
.hero__leist a{color:rgba(245,246,250,.9);text-decoration:none;font-size:1rem;
  font-family:"BarlowSC",sans-serif;font-weight:600;letter-spacing:.005em;
  border-bottom:1px solid transparent;padding-bottom:.2em;transition:border-color .2s,color .2s}
.hero__leist a:hover{border-color:var(--b300);color:#fff}
.hero__leist span{color:rgba(245,246,250,.6);font-size:.88rem;margin-right:.5rem}

/* ================= 02 LEISTUNGSWELTEN ================= */
.welten{padding-block:var(--sec)}

/* ================= 03 INNEN UND AUSSEN ================= */
.objekt__track{height:190svh}
.objekt__buehne{position:sticky;top:0;height:100svh;overflow:hidden;background:#000;--m:0}
/* Die beiden Aufnahmen stammen aus verschiedenen Tageszeiten. Bis echte
   Bilder desselben Objekts vorliegen, werden sie auf eine gemeinsame
   Temperatur gezogen — kühler, flauer, weniger Postkarte. */
.objekt__lay{position:absolute;inset:0}
.objekt__lay img{filter:saturate(.96) contrast(1.02)}
.objekt__aussen img{filter:saturate(.96) contrast(1.02)}
.objekt__lay img{width:100%;height:100%;object-fit:cover}
/* Weicher Übergang statt harter Schnitt: eine Maske mit 14 vh Verlauf.
   Die Fuge ist das Thema der Sektion, also darf sie keine Rasierklinge sein. */
.objekt__aussen{
  -webkit-mask-image:linear-gradient(to bottom,
    transparent calc((1 - var(--m)) * 100% - 14vh),#000 calc((1 - var(--m)) * 100%));
  mask-image:linear-gradient(to bottom,
    transparent calc((1 - var(--m)) * 100% - 14vh),#000 calc((1 - var(--m)) * 100%))}
.objekt__naht{position:absolute;left:0;right:0;top:calc((1 - var(--m)) * 100%);height:1px;
  background:linear-gradient(90deg,rgba(161,167,206,0) 0%,rgba(161,167,206,.75) 18%,
    rgba(161,167,206,.75) 82%,rgba(161,167,206,0) 100%);
  box-shadow:0 0 18px 1px rgba(113,122,179,.28);z-index:4;
  opacity:calc(1 - var(--m) * var(--m))}
.objekt__w{position:absolute;inset:0;z-index:3;background:
  radial-gradient(96% 78% at 0% 34%,rgba(11,14,30,.88) 0%,rgba(11,14,30,.6) 34%,
    rgba(11,14,30,.2) 62%,rgba(11,14,30,0) 86%),
  linear-gradient(180deg,rgba(11,14,30,.86) 0%,rgba(11,14,30,.22) 30%,
    rgba(11,14,30,.3) 62%,rgba(11,14,30,.9) 100%)}
.objekt__txt{position:absolute;z-index:6;left:var(--rail);right:var(--rail);
  top:clamp(5rem,11vh,7.5rem);max-width:42rem}

/* Ein bildschirmfüllender Moment braucht auch eine bildschirmfüllende Stimme. */
.objekt__h{margin:0;font-family:"BarlowSC",sans-serif;font-weight:700;
  font-size:clamp(2.3rem,4.8vw,4.2rem);line-height:1.02;letter-spacing:-.024em}
.objekt__txt .lead{margin-top:1.4rem;max-width:44ch}

.objekt__txt .lead{margin-top:1.2rem}

/* ================= 04 WARUM ================= */

.gruende{border-top:1px solid var(--linie)}
.grund{display:grid;grid-template-columns:2.6rem 1fr;gap:1.2rem;align-items:start;
  padding:1.4rem 0;border-bottom:1px solid var(--linie-fein)}
.grund b{font-weight:800;font-size:.86rem;color:var(--akzent);padding-top:.2em}
.grund h3{font-size:1.1rem;font-weight:600;letter-spacing:-.012em;margin-bottom:.3rem}
.grund p{font-size:.96rem;color:var(--schrift-2);max-width:52ch}


/* ================= 06 VISUAL BREAK ================= */
.bruch{position:relative;height:clamp(60svh,72svh,720px);overflow:clip;background:#000}
.bruch__bg{position:absolute;inset:-12% 0;will-change:transform}
.bruch__bg img{width:100%;height:100%;object-fit:cover}
.bruch__w{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(11,14,30,.72),rgba(11,14,30,.25) 40%,rgba(11,14,30,.75))}
.bruch__txt{position:relative;z-index:3;height:100%;display:flex;align-items:center}
.bruch__txt p{max-width:30ch;font-size:clamp(1.3rem,2.6vw,2.1rem);font-weight:800;
  letter-spacing:-.022em;line-height:1.14}

/* ================= 07 ABLAUF ================= */

/* ================= 08 OBJEKTANFRAGE ================= */
.anf{padding-block:var(--sec);border-block:1px solid var(--linie)}
.anf__intro{max-width:40rem}
.anf__intro .lead{margin-top:1.2rem}

/* Fluss und Karte als eigene Zeile, exakt auf gleicher Hoehe — keine
   Zusammenfassung, die neben dem Einleitungstext "schwebt". */
.anf__grid{display:grid;grid-template-columns:minmax(0,68fr) minmax(0,32fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:start;margin-top:clamp(2.4rem,5vh,3.4rem)}
@media (max-width:980px){.anf__grid{grid-template-columns:1fr;gap:2rem}}

/* --- Die Eingabe: weich, ohne harten Rahmen, ruht auf Licht statt Kontur -- */
.fluss{border-radius:18px;background:var(--dunkel-3);
  box-shadow:inset 0 1px 0 rgba(245,246,250,.06),0 40px 70px -46px rgba(0,0,0,.65)}
.fluss__bar{display:flex;align-items:center;padding:1.3rem 1.5rem}
.fluss__leib{padding:0 1.6rem clamp(1.6rem,3.5vw,2.2rem)}
.fluss__frage{font-weight:800;font-size:clamp(1.1rem,1.7vw,1.35rem);letter-spacing:-.018em;margin-bottom:1.15rem}

/* --- Fortschritt als Nummern-Kette, kein Standard-Balken ------------------ */
.kette{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.kette li{position:relative;flex:0 0 auto;width:1.75rem;height:1.75rem;
  display:grid;place-content:center;border-radius:7px;
  font-family:"BarlowSC",sans-serif;font-weight:700;font-size:.74rem;
  font-variant-numeric:tabular-nums;color:var(--schrift-3);
  background:rgba(245,246,250,.05);
  transition:color .3s ease,background .3s ease,box-shadow .3s ease}
.kette li + li{margin-left:.6rem}
.kette li + li::before{content:"";position:absolute;right:100%;top:50%;
  width:.6rem;height:1.5px;transform:translateY(-50%);
  background:rgba(245,246,250,.12);transition:background .3s ease}
.kette li.ist-fertig{background:var(--p-500);color:#fff}
.kette li.ist-fertig + li::before,.kette li.ist-jetzt::before{background:var(--p-400)}
.kette li.ist-jetzt{color:#fff;box-shadow:0 0 0 1.5px var(--p-400),0 0 0 5px rgba(63,77,166,.18)}

.opt{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.6rem}
.opt button{position:relative;text-align:left;border:0;color:inherit;border-radius:12px;
  padding:.95rem 2.5rem .95rem 1.15rem;font-size:.95rem;
  background:rgba(245,246,250,.05);
  box-shadow:inset 0 1px 0 rgba(245,246,250,.08);
  transition:background .25s ease,box-shadow .25s ease,color .25s ease,transform .25s ease}
.opt button:hover{background:rgba(63,77,166,.22);
  box-shadow:inset 0 1px 0 rgba(245,246,250,.12)}
.opt button[aria-pressed="true"]{background:var(--p-500);color:#fff;transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 16px 28px -16px rgba(18,26,84,.6)}
/* Haken statt zweitem Hinweistext — der Fuellzustand spricht fuer sich. */
.opt button[aria-pressed="true"]::after{content:"";position:absolute;
  right:1rem;top:50%;transform:translateY(-50%);width:14px;height:10px;
  background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2014%2010%27%3E%3Cpath%20d%3D%27M1%205l4%204%208-8%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20fill%3D%27none%27%20stroke-linecap%3D%27square%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2014%2010%27%3E%3Cpath%20d%3D%27M1%205l4%204%208-8%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20fill%3D%27none%27%20stroke-linecap%3D%27square%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.fluss__nav{display:flex;gap:1rem;align-items:center;margin-top:1.3rem;flex-wrap:wrap}
.fluss__zur{font-size:.9rem;color:var(--schrift-3);border-bottom:1px solid var(--linie);padding-bottom:.12em}
.fluss__zur:hover{color:var(--schrift);border-color:var(--schrift)}

/* Die kompakte Zusammenfassung ersetzt auf Mobile die Karte, nur am Schluss. */
.fluss__zsf{display:none}

/* --- Die Anfragekarte: ein Beleg, kein zweites Formular -------------------
   Bewusst ohne eigenen Rahmen und mit kaum Kontrast — sie soll neben der
   aktiven linken Flaeche zuruecktreten, nicht wie ein zweites Formular wirken.
   Solange leer, zusaetzlich gedaempft; sobald der erste Eintrag kommt, voll da. */
.karte{border-radius:18px;background:rgba(245,246,250,.035);
  position:sticky;top:2rem;
  opacity:1;transition:opacity .4s ease}
.karte.ist-leer{opacity:.7}
@media (max-width:980px){.karte{display:none}
  .fluss__zsf{display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.2rem;
    margin:1.4rem 0 0;padding-top:1.3rem;border-top:1px solid var(--linie)}
  .fluss__zsf dt{font-size:.82rem;color:var(--schrift-3);white-space:nowrap}
  .fluss__zsf dd{font-weight:600;font-size:.94rem;text-align:right}
}
.karte__kopf{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.1rem 1.3rem}
.karte__kopf b{font-weight:700;font-size:.8rem;letter-spacing:-.01em}
.karte__kopf span{font-size:.72rem;color:var(--p-300);font-weight:600}
.karte__leib{padding:0 1.3rem 1.1rem;min-height:15rem}
.karte dl{display:grid;grid-template-columns:auto 1fr;gap:.7rem 1rem}
.karte dt{font-size:.78rem;color:var(--schrift-3);white-space:nowrap}
.karte dd{font-weight:600;font-size:.88rem;text-align:right;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em}
.karte dd.neu{animation:auf .42s cubic-bezier(.2,.75,.25,1) both}
@keyframes auf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Leerzustand: Orientierung statt Leere. */
.karte__leer{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.6rem;padding:1.4rem .5rem;color:var(--schrift-3)}
.karte__icon{width:2.1rem;height:2.1rem;color:var(--p-300);opacity:.75}
.karte__leer p{margin:0;font-size:.92rem;line-height:1.5;color:var(--schrift-2)}
.karte__leer p.karte__hinweis{font-size:.82rem;color:var(--schrift-3)}
.karte__fuss{padding:.9rem 1.3rem;border-top:1px solid rgba(245,246,250,.08);
  display:flex;justify-content:space-between;gap:1rem;font-size:.78rem;color:var(--schrift-3)}

/* ============================================================
   KARRIERE — eigene GOEME-CI: dunkel, #25338B, weich, kein Rahmen
   ============================================================ */
.karr{padding-block:var(--sec);border-block:1px solid var(--linie)}
.karr__kopf{max-width:40rem}
.karr__lead{margin:1.1rem 0 0;color:var(--schrift-2);
  font-size:clamp(1.05rem,.5vw+.95rem,1.25rem);line-height:1.55;max-width:38rem}

.karr__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(1.75rem,4vw,3rem);margin-top:clamp(2.6rem,6vh,4rem);align-items:start}
@media (max-width:900px){.karr__grid{grid-template-columns:1fr}}

.karr__links{display:flex;flex-direction:column;gap:1.25rem}

/* --- Foto: bis zum echten Teamfoto ein klar markierter Platzhalter -------- */
.karr__bild{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/3;
  background:var(--dunkel-3)}
.karr__bild img{width:100%;height:100%;object-fit:cover}
.karr__bild-tag{position:absolute;top:1rem;right:1rem;font-size:.72rem}

.karr__box{border-radius:18px;background:var(--dunkel-3);padding:1.5rem 1.6rem;
  box-shadow:inset 0 1px 0 rgba(245,246,250,.06)}
.karr__box h3{font-family:"BarlowSC",sans-serif;font-weight:700;
  font-size:1.15rem;letter-spacing:-.015em;margin:0 0 .5rem}
.karr__box p{margin:0 0 1.2rem;color:var(--schrift-2);font-size:.94rem;line-height:1.55}
.karr__box .ci-btn{width:100%;justify-content:center}

/* --- Stellenkarten: Accordion, weich, kein Standard-Rahmen --------------- */
.karr__stellen{display:flex;flex-direction:column;gap:.85rem}
.stelle{border-radius:16px;background:var(--dunkel-3);
  box-shadow:inset 0 1px 0 rgba(245,246,250,.06);
  transition:box-shadow .3s ease,background-color .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.stelle.ist-offen{box-shadow:inset 0 1px 0 rgba(245,246,250,.06),
  0 0 0 1.5px var(--p-400),0 18px 34px -22px rgba(18,26,84,.55)}
.stelle:hover{background-color:var(--p-900);transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(245,246,250,.06),0 0 0 1px rgba(113,122,179,.4),
    0 20px 38px -24px rgba(18,26,84,.6)}
.stelle__kopf{width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;text-align:left;border:0;background:transparent;color:inherit;
  padding:1.15rem 1.3rem;cursor:pointer}
.stelle__txt{display:flex;flex-direction:column;gap:.3rem}
.stelle__txt b{font-family:"BarlowSC",sans-serif;font-weight:700;
  font-size:clamp(1.02rem,1.4vw,1.18rem);letter-spacing:-.012em;transition:color .25s ease}
.stelle:hover .stelle__txt b{color:var(--p-200)}
.stelle__txt span{font-size:.86rem;color:var(--schrift-3)}
.stelle__plus{position:relative;flex:none;width:1.9rem;height:1.9rem;border-radius:50%;
  background:rgba(245,246,250,.06);transition:background .25s ease,transform .3s ease}
.stelle:hover .stelle__plus{background:var(--p-500)}
.stelle__plus::before,.stelle__plus::after{content:"";position:absolute;
  left:50%;top:50%;width:.7rem;height:1.5px;background:currentColor;
  transform:translate(-50%,-50%);transition:transform .3s ease}
.stelle__plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.stelle.ist-offen .stelle__plus{background:var(--p-500)}
.stelle.ist-offen .stelle__plus::after{transform:translate(-50%,-50%) rotate(0)}

.stelle__inhalt{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.2,.7,.2,1)}
.stelle.ist-offen .stelle__inhalt{grid-template-rows:1fr}
.stelle__inhalt > ul{overflow:hidden;min-height:0;margin:0;padding:0 1.3rem;list-style:none;
  transition:padding-bottom .35s cubic-bezier(.2,.7,.2,1)}
/* Padding erst im offenen Zustand: verhindert, dass die eigene Innenpolsterung
   die kollabierte Grid-Zeile aufspreizt (0fr wuerde sonst am Padding scheitern). */
.stelle.ist-offen .stelle__inhalt > ul{padding-bottom:1.3rem}
.stelle__inhalt li{position:relative;padding:.32rem 0 .32rem 1.1rem;
  color:var(--schrift-2);font-size:.95rem;line-height:1.5}
.stelle__inhalt li::before{content:"–";position:absolute;left:0;color:var(--p-300)}
.stelle__inhalt li.stelle__bewerben{padding-left:0;margin-top:.4rem;border-top:1px solid var(--linie-fein);
  padding-top:.9rem}
.stelle__inhalt li.stelle__bewerben::before{content:none}
.stelle__inhalt li.stelle__bewerben .link{font-size:.9rem}

.stellen-karte{border-radius:20px;padding:1.4rem clamp(1rem,3vw,1.75rem)}

@media (max-width:900px){
  .karr__bild{aspect-ratio:16/10}
}

/* ============================================================
   BEWERBUNGS-MODAL — dunkel, GOEME-CI, kein Browser-Standard-Look
   ============================================================ */
.bwb{position:fixed;top:0;left:0;width:100vw;height:100vh;max-width:100vw;z-index:400;
  display:grid;place-items:center;
  padding:4vh 1.25rem;opacity:0;pointer-events:none;transition:opacity .3s ease}
.bwb.ist-offen{opacity:1;pointer-events:auto}
.bwb__schleier{position:absolute;inset:0;background:rgba(9,11,24,.72);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.bwb__karte{position:relative;width:100%;max-width:34rem;max-height:92vh;overflow-y:auto;
  border-radius:20px;background:var(--dunkel-3);color:var(--hell);
  padding:2.2rem clamp(1.5rem,4vw,2.4rem) 2rem;
  box-shadow:0 60px 100px -40px rgba(0,0,0,.7);
  transform:translateY(10px) scale(.98);transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.bwb.ist-offen .bwb__karte{transform:none}
.bwb__x{position:absolute;top:1.2rem;right:1.2rem;width:2.2rem;height:2.2rem;
  border-radius:50%;border:0;background:rgba(245,246,250,.06);color:inherit;
  display:grid;place-content:center;cursor:pointer;transition:background .2s ease}
.bwb__x:hover{background:rgba(245,246,250,.12)}
.bwb__x svg{width:1rem;height:1rem}
.bwb__h{margin:.5rem 0 0;font-family:"BarlowSC",sans-serif;font-weight:700;
  font-size:clamp(1.35rem,2.4vw,1.7rem);letter-spacing:-.018em}
.bwb__hinweis{margin:.7rem 0 0;color:rgba(245,246,250,.68);font-size:.92rem;line-height:1.5}

.bwb__form{display:flex;flex-direction:column;gap:1.15rem;margin-top:1.6rem}
.bwbfeld{display:flex;flex-direction:column;gap:.45rem}
.bwbfeld > span{font-size:.84rem;font-weight:600;color:rgba(245,246,250,.82)}
.bwbfeld > span i{font-weight:400;color:rgba(245,246,250,.5);font-style:normal}
.bwbfeld input[type="text"],.bwbfeld input[type="tel"],.bwbfeld input[type="email"],
.bwbfeld select,.bwbfeld textarea{
  width:100%;font:inherit;color:inherit;background:rgba(245,246,250,.05);
  border:0;border-radius:10px;padding:.8rem .95rem;
  box-shadow:inset 0 0 0 1px rgba(245,246,250,.09);
  transition:box-shadow .2s ease}
.bwbfeld textarea{resize:vertical;min-height:5rem}
.bwbfeld input::placeholder,.bwbfeld textarea::placeholder{color:rgba(245,246,250,.38)}
.bwbfeld input:focus-visible,.bwbfeld select:focus-visible,.bwbfeld textarea:focus-visible{
  outline:none;box-shadow:inset 0 0 0 1.5px var(--p-400),0 0 0 4px rgba(63,77,166,.22)}
.bwbfeld select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2012%208%27%3E%3Cpath%20d%3D%27M1%201l5%205%205-5%27%20stroke%3D%27%23A1A7CE%27%20stroke-width%3D%271.5%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat;background-position:right .95rem center;
  background-size:11px 7px;padding-right:2.2rem}
.bwbfeld select option{background:var(--dunkel-3);color:var(--hell)}

.bwbfeld-paar{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:-.4rem}
.bwbfeld-hinweis{margin:-.6rem 0 0;font-size:.82rem;color:rgba(245,246,250,.55)}
.bwbfeld-hinweis b{color:rgba(245,246,250,.8);font-weight:600}

.bwbfeld--datei input[type="file"]{font-size:.86rem;color:rgba(245,246,250,.7)}
.bwbfeld--datei input[type="file"]::file-selector-button{
  font:inherit;font-weight:600;color:#fff;background:var(--p-500);border:0;
  border-radius:8px;padding:.5rem .9rem;margin-right:.8rem;cursor:pointer;
  transition:background .2s ease}
.bwbfeld--datei input[type="file"]::file-selector-button:hover{background:var(--p-600)}

.bwbfeld--check{flex-direction:row;align-items:flex-start;gap:.7rem}
.bwbfeld--check input{margin-top:.2rem;width:1.15rem;height:1.15rem;flex:none;accent-color:var(--p-500)}
.bwbfeld--check span{font-size:.86rem;line-height:1.5;color:rgba(245,246,250,.78)}
.bwbfeld--check a{color:inherit;text-decoration:underline;text-underline-offset:.15em}

.bwb__absenden{width:100%;justify-content:center;margin-top:.3rem}
.bwb__missing{margin-top:.9rem;text-align:center}

@media (max-width:520px){.bwbfeld-paar{grid-template-columns:1fr}}

/* ================= 10 FAQ ================= */
/* ================= 10 FAQ ================= */
.faq{padding-block:var(--sec-s);border-block:1px solid var(--linie)}
.faq__liste{border-top:1px solid var(--linie);max-width:64rem}
.faq details{border-bottom:1px solid var(--linie-fein)}
.faq summary{display:flex;gap:1.5rem;justify-content:space-between;align-items:baseline;
  padding:1.25rem 0;cursor:pointer;list-style:none;font-weight:600;font-size:1.04rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--akzent);font-weight:800;flex:none;font-size:1.2rem}
.faq details[open] summary::after{content:"–"}
.faq__a{padding-bottom:1.4rem;color:var(--schrift-2);max-width:58ch}

/* Dezentes Einblenden beim Scrollen: leichtes Heben, kein Bounce. */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.reveal.ist-da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ================= 11 FINAL CTA ================= */
.final{position:relative;min-height:82svh;display:flex;align-items:center;overflow:clip;background:#000}
.final__bg{position:absolute;inset:-8% 0;will-change:transform}
.final__bg img{width:100%;height:100%;object-fit:cover}
.final__w{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(11,14,30,.85),rgba(11,14,30,.55) 42%,rgba(11,14,30,.94))}
.final__in{position:relative;z-index:3;width:100%;padding-block:clamp(3rem,8vh,5rem)}
.final__in .lead{margin-top:1.25rem}
.final__cta{margin-top:2.4rem;display:flex;gap:.85rem;flex-wrap:wrap;align-items:center}
.final__tel{font-weight:600;font-size:1.02rem;color:var(--schrift);text-decoration:none;
  border-bottom:2px solid var(--linie);padding-bottom:.15em}
.final__tel:hover{border-color:var(--schrift)}

/* ================= FOOTER ================= */
.fuss{padding-block:var(--sec-s) 2rem}
.fuss__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem}
@media (max-width:860px){.fuss__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fuss__grid{grid-template-columns:1fr}}
.fuss h4{font-size:.8rem;font-weight:600;color:var(--schrift-3);margin-bottom:1rem}
.fuss li{margin-bottom:.55rem;font-size:.94rem}
.fuss a{color:var(--schrift-2);text-decoration:none}
.fuss a:hover{color:var(--schrift)}
.fuss__logo{width:148px;margin-bottom:1.1rem}
.fuss__unten{margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--linie);
  display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;justify-content:space-between;
  font-size:.82rem;color:rgba(242,244,245,.5)}
.fuss__unten-re{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem}

/* ================= COOKIE-BANNER =================
   Kompakte, ruhige Karte, unten mittig, dezent gerundet — bewusst kein
   vollflächiger Balken und keine schwere Box. Sie darf die Seite dahinter
   nie dominieren. */
/* Eigener Vollflächen-Anker statt left/right/bottom, siehe Notiz bei
   .direkt-ecke weiter unten — derselbe Grund. */
.cookie-ecke{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:120;
  display:flex;align-items:flex-end;justify-content:center;padding:1.1rem;
  pointer-events:none}
.cookie-ecke > *{pointer-events:auto}
.cookie{transform:translateY(8px);
  width:min(27rem,calc(100vw - 1.6rem));display:none;
  opacity:0;transition:opacity .38s ease,transform .38s ease}
.cookie[data-auf="1"]{display:block}
.cookie[data-an="1"]{opacity:1;transform:translateY(0)}
.cookie__karte{background:var(--p-950);border:1px solid var(--linie-fein);border-radius:14px;
  box-shadow:0 16px 36px -18px rgba(0,0,0,.6);padding:.95rem 1.05rem}
.cookie__txt{font-size:.8rem;line-height:1.5;color:rgba(245,246,250,.68);margin:0 0 .75rem;
  max-width:40ch}
.cookie__set{display:grid;gap:.1rem;margin:.15rem 0 .8rem;border-top:1px solid var(--linie-fein)}
.cookie__set[hidden]{display:none}
.cookie__zeile{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem 0;border-bottom:1px solid var(--linie-fein)}
.cookie__zeile span{display:block;font-size:.8rem;font-weight:600;color:#fff}
.cookie__zeile i{display:block;font-style:normal;font-weight:400;font-size:.72rem;
  color:rgba(245,246,250,.5);margin-top:.1rem}
.cookie__zeile input[type="checkbox"]{width:1.9rem;height:1.05rem;position:relative;appearance:none;
  background:rgba(245,246,250,.16);border-radius:1rem;border:1px solid var(--linie);flex:none;
  cursor:pointer;transition:background .2s}
.cookie__zeile input[type="checkbox"]::after{content:"";position:absolute;top:1px;left:1px;
  width:.75rem;height:.75rem;border-radius:50%;
  background:#fff;transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.cookie__zeile input[type="checkbox"]:checked{background:var(--p-500)}
.cookie__zeile input[type="checkbox"]:checked::after{transform:translateX(.85rem)}
.cookie__zeile input[type="checkbox"]:disabled{opacity:.55;cursor:default}
.cookie__btns{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem}
.cookie__btn{text-align:center;padding:.42rem .85rem;font-size:.76rem;font-weight:600;
  border-radius:7px;border:1px solid var(--linie);color:rgba(245,246,250,.85);
  transition:background .2s,border-color .2s,color .2s}
.cookie__btn:hover{border-color:rgba(245,246,250,.5);color:#fff}
.cookie__btn--haupt{background:var(--p-500);border-color:var(--p-500);color:#fff}
.cookie__btn--haupt:hover{background:var(--p-400);border-color:var(--p-400)}
.cookie__btn--txt{border-color:transparent;color:rgba(245,246,250,.55);padding:.42rem .2rem;
  text-decoration:underline;text-underline-offset:.2em}
.cookie__btn--txt:hover{color:#fff;border-color:transparent}
@media (max-width:480px){.cookie{width:calc(100vw - 1.2rem)}}

.fuss__cookie{background:none;border:0;padding:0;color:inherit;text-decoration:underline;
  text-underline-offset:.2em;cursor:pointer;font:inherit}

.consent-sperre{border:1px dashed var(--linie);padding:2rem 1.5rem;text-align:center;background:rgba(245,246,250,.03)}
.consent-sperre p{font-size:.88rem;color:var(--schrift-2);margin-bottom:1rem}
.consent-sperre button{border:1px solid var(--p-500);background:var(--p-500);color:#fff;
  padding:.7rem 1.3rem;font-size:.86rem;font-weight:600}
.consent-sperre button:hover{background:var(--p-400)}

/* ================= GÖME DIREKT — echter Chat, kein Klick-Baum =================
   Auslöser: kompakte horizontale Pille statt Kreis-Icon. Label atmet einmal
   kurz auf ("Frage stellen" -> kontextabhängiger Satz -> zurück), sonst ruhig.
   Erscheinen ausschließlich über Opacity + wenige Pixel Bewegung, kein
   Scale/Spring, keine SaaS-Chatbot-Optik. */
/* Eigener Vollflächen-Anker statt right/bottom: Mobile-Emulation/manche
   Situationen mit sehr breiten, an sich schon geklippten Elementen weiter
   oben auf der Seite können den rechnerischen Viewport für "right"/"bottom"
   an fixierten Elementen verschieben. width/height in vw/vh plus Flex-Ausrichtung
   bleiben davon zuverlässig unberührt, darum hier der Umweg. */
.direkt-ecke{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:90;
  display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;
  gap:.6rem;padding:1.1rem;pointer-events:none;transition:padding-bottom .3s ease}
.direkt-ecke > *{pointer-events:auto}
/* Weicht dem LEWO-Hinweis in der Fußzeile aus, statt ihn zu verdecken. */
body.fuss-im-bild .direkt-ecke{padding-bottom:calc(1.1rem + 4.5rem)}

.direkt__ruf{display:inline-flex;align-items:center;gap:.55rem;height:44px;
  padding:0 1.05rem 0 .9rem;flex:none;
  background:var(--p-950);border:1px solid var(--linie-fein);border-radius:999px;color:#fff;
  box-shadow:0 14px 32px -18px rgba(0,0,0,.6);
  opacity:0;transform:translateY(10px);
  transition:opacity .45s ease,transform .45s ease,background .25s ease,border-color .25s ease}
.direkt__ruf.ist-da{opacity:1;transform:translateY(0)}
.direkt__ruf:hover{background:var(--p-900);border-color:var(--linie)}
.direkt__ruf-i{width:16px;height:16px;flex:none;color:var(--p-300)}
.direkt__ruf-txt{font-family:"Barlow",sans-serif;font-weight:500;font-size:.85rem;
  white-space:nowrap;overflow:hidden;display:inline-block;max-width:8rem;
  transition:max-width .5s cubic-bezier(.3,.7,.2,1)}
.direkt__ruf.ist-weit .direkt__ruf-txt{max-width:15rem}
@media (max-width:480px){.direkt__ruf{height:42px}}

.direkt{flex:none;width:min(24rem,calc(100vw - 1.6rem));
  max-height:min(36rem,calc(100svh - 2rem));
  background:var(--p-900);border:1px solid var(--linie-fein);border-radius:16px;
  display:none;flex-direction:column;overflow:hidden;
  box-shadow:0 30px 70px -32px rgba(0,0,0,.65);
  opacity:0;transform:translateY(10px);
  transition:opacity .32s ease,transform .32s ease}
.direkt[data-auf="1"]{display:flex}
.direkt[data-an="1"]{opacity:1;transform:translateY(0)}

.direkt__kopf{display:flex;align-items:center;gap:.65rem;padding:.85rem 1rem;
  background:var(--p-950);border-bottom:1px solid var(--linie-fein)}
.direkt__logo{height:24px;width:auto;flex:none}
.direkt__kopf-txt{flex:1;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.direkt__kopf b{font-family:"Barlow",sans-serif;font-weight:600;font-size:.88rem;
  letter-spacing:0;color:rgba(245,246,250,.9)}
.direkt__status{display:flex;align-items:center;gap:.35rem;font-size:.7rem;
  color:rgba(245,246,250,.5)}
.direkt__status i{width:6px;height:6px;border-radius:50%;background:#4ade80;flex:none;
  box-shadow:0 0 0 2px rgba(74,222,128,.18)}
.direkt__x{width:1.8rem;height:1.8rem;display:grid;place-content:center;color:var(--schrift-3);flex:none}
.direkt__x:hover{color:#fff}
.direkt__x svg{width:.9rem;height:.9rem}

.direkt__leib{padding:1rem .95rem;overflow-y:auto;flex:1}
.direkt__thread{display:flex;flex-direction:column;gap:.55rem}
.direkt__msg{max-width:88%;padding:.55rem .8rem;border-radius:11px;font-size:.86rem;
  line-height:1.5;white-space:pre-line}
.direkt__msg--bot{align-self:flex-start;background:rgba(245,246,250,.06);
  color:rgba(245,246,250,.92);border-bottom-left-radius:3px}
.direkt__msg--nutzer{align-self:flex-end;background:var(--p-500);color:#fff;
  border-bottom-right-radius:3px}
.direkt__chips{display:flex;flex-wrap:wrap;align-items:center;gap:0 .05rem;
  align-self:flex-start;max-width:96%;padding-left:.15rem}
.direkt__chips-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;
  color:rgba(245,246,250,.32);margin-right:.5rem;flex:0 0 100%;margin-bottom:.3rem}
.direkt__chip{border:0;border-radius:0;padding:.15rem 0;background:transparent;
  font-size:.78rem;color:rgba(245,246,250,.56);text-decoration:underline;
  text-decoration-color:rgba(245,246,250,.22);text-underline-offset:2px;
  transition:color .2s,text-decoration-color .2s}
.direkt__chip:not(:last-child)::after{content:"·";display:inline-block;margin:0 .45rem;
  color:rgba(245,246,250,.28);text-decoration:none}
.direkt__chip:hover,.direkt__chip:focus-visible{color:#fff;text-decoration-color:#fff}
.direkt__laden{align-self:flex-start;display:flex;align-items:center;padding:.5rem .2rem}
.direkt__laden i{width:7px;height:7px;background:var(--p-400);border-radius:50%;flex:none;
  animation:direktPuls 1.1s ease-in-out infinite}
@keyframes direktPuls{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

.direkt__frei{display:flex;gap:.5rem;padding:.7rem .8rem;align-items:center;
  border-top:1px solid var(--linie-fein)}
.direkt__frei input{flex:1;background:rgba(245,246,250,.05);border:1px solid var(--linie);
  border-radius:9px;color:#fff;padding:.6rem .75rem;font:inherit;font-size:.85rem}
.direkt__frei input::placeholder{color:rgba(245,246,250,.4)}
.direkt__frei input:focus{outline:2px solid var(--p-400);outline-offset:-1px}
.direkt__frei button{width:2.2rem;height:2.2rem;flex:none;display:grid;place-content:center;
  border-radius:8px;background:var(--p-500);color:#fff;transition:background .2s}
.direkt__frei button:hover{background:var(--p-400)}
.direkt__frei button svg{width:.95rem;height:.95rem}

.direkt__fuss{display:flex;justify-content:flex-end;padding:0 .8rem .65rem;font-size:.78rem}
.direkt__fuss button{color:rgba(245,246,250,.42);border-bottom:1px solid transparent;padding-bottom:.05em}
.direkt__fuss button:hover{color:#fff;border-color:#fff}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .objekt__track{height:auto}
  /* position:relative statt static: bleibt aus dem Sticky-Pinning raus, bewahrt
     aber den Containing Block fuer die absolut positionierten Kinder (Bilder,
     Overlay, Text) — sonst fallen die auf den Viewport zurueck und ueberlagern
     den Hero (real reproduziert unter prefers-reduced-motion). */
  .objekt__buehne{position:relative;height:auto;min-height:72svh}
}

/* Die Sektionsthemen stehen bewusst am Ende: sie entscheiden über Grund und Schrift,
   nicht die einzelnen Komponenten. */
section.hell,footer.hell{background:var(--hell);color:var(--dunkel)}
section.hell--weiss,footer.hell--weiss{background:var(--hell-2)}
section.dunkel,footer.dunkel{background:var(--dunkel);color:var(--hell)}
section.dunkel--tief,footer.dunkel--tief{background:var(--dunkel-3)}
.hell .karte{background:var(--hell-2);border-color:rgba(37,51,139,.35)}
.hell .fluss{background:var(--hell-2)}
.hell .opt button:hover{background:rgba(37,51,139,.08)}
.hell .missing{color:var(--p-700);background:rgba(37,51,139,.12);border-color:rgba(37,51,139,.45)}

/* ============================================================
   LEISTUNGSWELTEN — grosse Zeilen mit Bild-Reveal beim Hover
   ============================================================ */
.welt2{padding-block:clamp(2.5rem,6vh,4.5rem);border-top:1px solid var(--linie)}
.welt2__kopf{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;align-items:baseline;
  justify-content:space-between;margin-bottom:clamp(1.5rem,4vh,2.75rem)}
.welt2__kopf h3{font-size:clamp(1.5rem,2.6vw,2.2rem)}
.welt2__kopf p{color:var(--schrift-2);max-width:44ch;font-size:1rem}
.welt2__marke{display:inline-block;background:var(--b600);color:#fff;font-family:"BarlowSC",sans-serif;
  font-weight:600;font-size:.9rem;padding:.35rem .85rem;margin-bottom:.9rem}
.welt2--aussen .welt2__marke{background:var(--gruen)}

.reihe{position:relative;border-top:1px solid var(--linie-fein)}
.reihe__pos{display:grid;grid-template-columns:auto 1fr auto;gap:1.5rem;align-items:center;
  padding:clamp(1.1rem,2.6vh,1.7rem) 0;border-bottom:1px solid var(--linie-fein);
  text-decoration:none;color:inherit;position:relative;
  transition:padding-left .3s cubic-bezier(.2,.7,.2,1)}
.reihe__pos:hover{padding-left:1rem}
.reihe__n{font-family:"BarlowSC",sans-serif;font-weight:600;font-size:.9rem;color:var(--akzent);
  min-width:2.2rem}
.reihe__t{font-family:"BarlowSC",sans-serif;font-weight:700;font-size:clamp(1.25rem,2.4vw,1.85rem);
  letter-spacing:-.012em;line-height:1.15}
.reihe__t span{display:block;font-family:"Barlow",sans-serif;font-weight:400;
  font-size:.98rem;color:var(--schrift-2);letter-spacing:0;margin-top:.25rem;max-width:52ch}
.reihe__pfeil{font-size:1.3rem;color:var(--akzent);opacity:.5;transition:opacity .25s,transform .25s}
.reihe__pos:hover .reihe__pfeil{opacity:1;transform:translateX(3px)}

/* Das Vorschaubild folgt dem Zeiger — nur auf Zeigergeräten */

@media (hover:none),(max-width:900px){}
@media (max-width:700px){
  .reihe__pos{grid-template-columns:auto 1fr;gap:.9rem}
  .reihe__pfeil{display:none}
}


/* ============================================================
   AUFTRAGGEBER — eine Typo-Stufe, zwei gegenlaeufige Laufbaender
   ============================================================ */
.ref{
  --grund:var(--n-050); --schrift:var(--n-900);
  --schrift-2:rgba(28,30,44,.74); --schrift-3:rgba(28,30,44,.56);
  --linie:rgba(28,30,44,.16); --akzent:var(--p-500);
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--grund);color:var(--schrift);
  padding-block:var(--sec)}
/* Dieselbe Materialitaet wie "Warum GOEME": weiches Licht, feines Korn. */
.ref::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(64% 96% at 14% 18%,rgba(37,51,139,.05) 0%,
      rgba(37,51,139,.018) 44%,rgba(37,51,139,0) 74%),
    linear-gradient(90deg,rgba(28,30,44,.05) 0%,rgba(28,30,44,0) 16%,
      rgba(28,30,44,0) 84%,rgba(28,30,44,.05) 100%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27n%27%20x%3D%270%27%20y%3D%270%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.9%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27160%27%20height%3D%27160%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%27.055%27%2F%3E%3C%2Fsvg%3E");
  background-size:auto,auto,160px 160px;
  background-repeat:no-repeat,no-repeat,repeat}

.ref__kopf{display:block;margin-bottom:clamp(3rem,6vh,4.6rem)}
/* Die Zeile nutzt die Breite, statt in einer schmalen Spalte zu haengen. */
.ref__zeile{margin:clamp(1.1rem,2.6vh,1.8rem) 0 0;max-width:46rem;
  color:var(--schrift-2);font-size:clamp(1.08rem,.6vw+.95rem,1.38rem);line-height:1.45}

/* --- Die Baender ---------------------------------------------------------- */
.band{display:grid;row-gap:clamp(.9rem,2vh,1.5rem);overflow:hidden;max-width:100%;
  /* Die Namen laufen an den Raendern aus, statt hart abgeschnitten zu werden. */
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.band__z{display:flex;width:max-content;will-change:transform}
.band__z--a{animation:band-links 58s linear infinite}
.band__z--b{animation:band-rechts 68s linear infinite}
.band:hover .band__z,.band:focus-within .band__z{animation-play-state:paused}
.band__l{display:flex;align-items:center;flex:0 0 auto}

.band__n{display:inline-flex;align-items:center;flex:0 0 auto;
  font-family:"BarlowSC",sans-serif;font-weight:700;
  font-size:clamp(1.05rem,1.5vw,1.45rem);
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--schrift);white-space:nowrap}
/* CI-Trenner: dieselbe Schraege wie Knopf und Visitenkarte. */
.band__n::after{content:"";flex:0 0 auto;
  width:.5rem;height:1.05em;margin-inline:clamp(1.5rem,3vw,2.9rem);
  background:var(--p-500);opacity:.55;
  clip-path:polygon(38% 0,100% 0,62% 100%,0 100%)}

@keyframes band-links{from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}}
@keyframes band-rechts{from{transform:translate3d(-50%,0,0)}
  to{transform:translate3d(0,0,0)}}

/* Ohne Bewegung: die Namen stehen still und umbrechen normal. */
@media (prefers-reduced-motion:reduce){
  .band{mask-image:none}
  .band__z{animation:none;width:auto}
  .band__l{flex-wrap:wrap;row-gap:.8rem}
  .band__l[aria-hidden]{display:none}
}
@media (max-width:700px){
  .band__n{font-size:1rem;letter-spacing:.11em}
  .band__n::after{margin-inline:1.2rem}
}

/* ============================================================
   VISUELLER PEAK — vom Eingang bis zur Grenze
   ============================================================ */
.peak{position:relative}
.peak__spur{height:340svh}
.peak__b{position:sticky;top:0;height:100svh;overflow:hidden;background:#000;--p:0}
.peak__l{position:absolute;inset:0}
.peak__l img{width:100%;height:100%;object-fit:cover}
.peak__l--2{clip-path:inset(0 0 0 calc(100% - clamp(0%, (var(--p) - .06) * 380%, 100%)))}
.peak__l--3{clip-path:inset(0 0 0 calc(100% - clamp(0%, (var(--p) - .36) * 380%, 100%)))}
.peak__l--4{clip-path:inset(0 0 0 calc(100% - clamp(0%, (var(--p) - .66) * 380%, 100%)))}
.peak__wash{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,
  rgba(17,20,45,.82),rgba(28,30,44,.2) 38%,rgba(28,30,44,.35) 66%,rgba(17,20,45,.9))}
.peak__txt{position:absolute;z-index:5;left:var(--rail);right:var(--rail);
  top:50%;transform:translateY(-50%);max-width:34rem}
.peak__txt h2{font-size:clamp(1.9rem,4.2vw,3.4rem);line-height:1.03;color:#fff}
/* Je Bild eine eigene Zeile unter der festen Headline, ueberblendet statt ersetzt. */
.peak__zeilen{display:grid;margin-top:clamp(1rem,2.5vh,1.5rem)}
.peak__zeile{grid-area:1/1;margin:0;font-family:"BarlowSC",sans-serif;font-weight:700;
  font-size:clamp(1.1rem,1.9vw,1.5rem);line-height:1.3;color:rgba(245,246,250,.85);
  opacity:0;transition:opacity .4s ease}
.peak__zeile.an{opacity:1}
.peak__marker{position:absolute;z-index:5;left:var(--rail);right:var(--rail);
  bottom:clamp(2rem,5vh,3.25rem);display:flex;gap:clamp(.9rem,2.5vw,2.25rem);flex-wrap:wrap}
.peak__marker span{font-family:"BarlowSC",sans-serif;font-weight:600;font-size:.94rem;
  color:rgba(245,246,250,.4);transition:color .35s ease;white-space:nowrap}
.peak__marker span.an{color:#fff}


/* ============================================================
   ABLAUF — eine Achse, die mitlaeuft
   ============================================================ */
.ablauf{
  --grund:var(--n-050); --schrift:var(--n-900);
  --schrift-2:rgba(28,30,44,.74); --schrift-3:rgba(28,30,44,.56);
  --akzent:var(--p-500);
  position:relative;isolation:isolate;
  background:var(--grund);color:var(--schrift);padding-block:var(--sec)}
/* Dieselbe Materialitaet wie die anderen hellen Abschnitte. */
.ablauf::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(66% 100% at 82% 22%,rgba(37,51,139,.055) 0%,
      rgba(37,51,139,.02) 44%,rgba(37,51,139,0) 74%),
    linear-gradient(90deg,rgba(28,30,44,.05) 0%,rgba(28,30,44,0) 16%,
      rgba(28,30,44,0) 84%,rgba(28,30,44,.05) 100%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27n%27%20x%3D%270%27%20y%3D%270%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.9%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27160%27%20height%3D%27160%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%27.055%27%2F%3E%3C%2Fsvg%3E");
  background-size:auto,auto,160px 160px;
  background-repeat:no-repeat,no-repeat,repeat}

.ablauf__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2rem,5vw,5.5rem);align-items:start}
.ablauf__halt{position:sticky;top:clamp(2rem,9vh,5.5rem);
  display:flex;flex-direction:column;align-items:flex-start}

/* Der Zaehler fuellt die linke Spalte und zeigt, wo man im Ablauf steht. */
.ablauf__zaehler{display:flex;align-items:baseline;gap:.9rem;
  margin:clamp(2rem,5vh,3.2rem) 0 0;line-height:1}
.ablauf__jetzt{font-family:"BarlowSC",sans-serif;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.05em;
  font-size:clamp(3.4rem,7vw,6rem);color:var(--p-500);
  /* Der Wechsel soll spuerbar sein, aber nicht zappeln. */
  transition:opacity .3s ease}
.ablauf__von{font-family:"BarlowSC",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;font-size:.86rem;
  color:var(--schrift-3)}
.ablauf__cta{margin-top:clamp(1.6rem,3.5vh,2.4rem)}

/* --- Die Achse ----------------------------------------------------------- */
.achse{position:relative;padding-left:clamp(3.5rem,5.5vw,5rem);
  --spur:13px}
/* Grundspur und Fortschritt liegen exakt uebereinander wie die Marker. */
.achse::before,.achse::after{content:"";position:absolute;
  left:calc(var(--spur) / 2 - 1px);width:2px;top:1.05rem;border-radius:2px}
.achse::before{bottom:1.2rem;background:rgba(37,51,139,.16)}
.achse::after{height:calc(var(--fort,0) * (100% - 2.25rem));
  background:linear-gradient(180deg,var(--p-500),var(--p-400));
  transition:height .28s linear}

.stufe{position:relative;padding-bottom:clamp(2.4rem,5.5vh,3.6rem)}
.stufe:last-child{padding-bottom:0}
/* Marker: dieselbe Schraege wie Knopf und Visitenkarte. */
.stufe__m{position:absolute;left:0;margin-left:calc(clamp(3.5rem,5.5vw,5rem) * -1);
  top:1.05rem;width:var(--spur);height:var(--spur);
  background:var(--p-200);
  clip-path:polygon(0 0,100% 0,calc(100% - 4px) 100%,0 100%);
  transition:background .38s ease,box-shadow .38s ease,transform .38s cubic-bezier(.2,.7,.2,1)}
.stufe.ist-an .stufe__m{background:var(--p-500);transform:scale(1.3)}

.stufe__l{display:block;font-family:"BarlowSC",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;
  color:var(--p-400);margin-bottom:.55rem;transition:color .35s ease}
.stufe.ist-an .stufe__l{color:var(--p-500)}
.stufe h3{font-family:"BarlowSC",sans-serif;font-weight:700;
  font-size:clamp(1.4rem,2.3vw,1.95rem);letter-spacing:-.02em;line-height:1.1;
  margin:0 0 .55rem}
.stufe p{margin:0;font-size:1rem;color:var(--schrift-2);line-height:1.62;max-width:34rem}

/* Der aktive Schritt wird hervorgehoben, statt die anderen wegzudimmen:
   so bleibt jeder Fliesstext jederzeit voll lesbar. */
.stufe::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-1rem -1.4rem calc(clamp(2.4rem,5.5vh,3.6rem) - 1rem)
        calc(clamp(3.5rem,5.5vw,5rem) * -1 + 6px);
  background:linear-gradient(100deg,rgba(37,51,139,.075) 0%,
    rgba(37,51,139,.028) 58%,rgba(37,51,139,0) 100%);
  clip-path:polygon(0 0,100% 0,calc(100% - 18px) 100%,0 100%);
  opacity:0;transform:translateX(-10px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.stufe:last-child::before{inset-block-end:-1rem}
.stufe.ist-an::before{opacity:1;transform:none}

@media (max-width:900px){
  .ablauf__grid{grid-template-columns:1fr;gap:2.5rem}
  .ablauf__halt{position:static}
  .ablauf__zaehler{display:none}
  .ablauf__cta{width:100%;justify-content:space-between}
  .achse{padding-left:2.6rem}
  .stufe__m{margin-left:-2.6rem}
  .stufe::before{inset-inline-start:-2.6rem;inset-inline-end:-1rem}
}
@media (prefers-reduced-motion:reduce){
  .stufe,.stufe__m,.stufe__l,.stufe::before,.achse::after{transition:none}
}

/* ============================================================
   UNTERSEITEN
   ============================================================ */
.kopfleiste{position:relative;z-index:30;border-bottom:1px solid var(--linie)}
.kopfleiste .kopf__in{padding-block:1.15rem}

.held{position:relative;overflow:clip;min-height:clamp(24rem,58svh,34rem);
  display:flex;align-items:flex-end}
.held__bg{position:absolute;inset:-8% 0;z-index:0}
.held__bg img{width:100%;height:100%;object-fit:cover}
.held__w{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,
  rgba(17,20,45,.86) 0%,rgba(28,30,44,.52) 40%,rgba(28,30,44,.72) 72%,var(--dunkel) 100%)}
.held__in{position:relative;z-index:3;width:100%;padding-block:clamp(3rem,8vh,5rem)}
.held__in .lead{margin-top:1.2rem}
.held__cta{margin-top:2rem;display:flex;gap:.75rem;flex-wrap:wrap}

.abschnitt{padding-block:var(--sec)}
.abschnitt--s{padding-block:var(--sec-s)}
.zwei-spalten{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:900px){.zwei-spalten{grid-template-columns:1fr;gap:2rem}}
.merkliste{border-top:1px solid var(--linie)}
/* Drei Grid-Kinder (Marker + Titel + Text) in zwei Spalten: Titel UND Text
   gehoeren in Spalte 2, sonst rutscht der Text unter den Marker in Spalte 1
   und wirkt gegenueber dem Titel nach rechts versetzt. */
.merkliste li{display:grid;grid-template-columns:auto 1fr;gap:.15rem 1rem;align-items:start;
  padding:1rem 0;border-bottom:1px solid var(--linie-fein)}
.merkliste li::before{content:"";width:7px;height:7px;background:var(--akzent);margin-top:.62em}
.merkliste b{grid-column:2;font-weight:600;display:block}
.merkliste span{grid-column:2;color:var(--schrift-2);font-size:.96rem;display:block}

/* Variante mit Icon statt Punkt-Marker, je Eintrag ein eigenes SVG als echtes
   Kind-Element (nicht per ::before, das kann kein Icon je Zeile zeigen). */
.merkliste--icons li{grid-template-columns:auto 1fr}
.merkliste--icons li::before{display:none}
.merkliste__icon{grid-row:1/3;grid-column:1;align-self:center;width:1.5rem;height:1.5rem;
  color:var(--p-500);flex:none}

/* Ruhiger Hinweis-Kasten für Transparenz-Notizen: eine Karte mit Icon statt
   ein gestrichelter Debug-Rahmen. */
.hinweis-karte{display:flex;gap:.85rem;align-items:flex-start;margin-top:1.5rem;
  padding:1rem 1.15rem;background:rgba(37,51,139,.07);border-left:3px solid var(--p-500)}
.hinweis-karte__icon{flex:none;width:1.3rem;height:1.3rem;color:var(--p-500);margin-top:.15rem}
.hinweis-karte p{font-size:.88rem;line-height:1.55;color:var(--schrift-2);margin:0}

/* Sichtbarer Platzhalter-Hinweis auf Vollflächenbildern (Hero/Final), bis
   echtes Bildmaterial vorliegt — dieselbe Badge-Optik wie auf der Startseite. */
.platzhalter-tag{position:absolute;z-index:2;top:1.1rem;right:1.1rem;font-size:.72rem}

.faelle{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linie);
  margin-top:clamp(2rem,5vh,3rem)}
@media (max-width:820px){.faelle{grid-template-columns:1fr}}
.fall{background:var(--grund);padding:clamp(1.5rem,3.5vw,2.25rem)}
.fall b{font-family:"BarlowSC",sans-serif;font-weight:700;font-size:clamp(1.7rem,3vw,2.15rem);
  letter-spacing:-.01em;color:var(--akzent);display:block;margin-bottom:.8rem}
.fall h3{font-size:1.15rem;margin-bottom:.45rem}
.fall p{color:var(--schrift-2);font-size:.96rem}

/* Direkt nach dem FAQ-Block: kein zweiter grosser Sektionsabstand obendrauf. */
.leist-weiter{padding:2.25rem 0 var(--sec-s)}

/* Querlinks als kleine Karten statt duenner Umriss-Pillen — gleiche
   Materialsprache wie die Auswahl-Boxen im Anfrage-Assistenten. */
.querlinks{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(1.5rem,3.5vh,2.25rem)}
.querlinks a{display:inline-flex;align-items:center;gap:.65rem;
  border-radius:10px;padding:.9rem 1.25rem;text-decoration:none;
  color:var(--schrift);font-weight:600;font-size:.95rem;
  background:rgba(37,51,139,.045);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(37,51,139,.1);
  transition:background .22s ease,box-shadow .22s ease,color .22s ease,transform .22s cubic-bezier(.2,.7,.2,1)}
.querlinks a::after{content:"";width:7px;height:7px;flex:none;
  border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(45deg);opacity:.5;
  transition:transform .22s cubic-bezier(.2,.7,.2,1),opacity .22s ease}
.querlinks a:hover{background:var(--p-500);color:#fff;transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 16px 28px -18px rgba(18,26,84,.5)}
.querlinks a:hover::after{transform:rotate(45deg) translate(2px,-2px);opacity:1}

/* Footer */
.fuss__oben{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;
  align-items:flex-start;padding-bottom:clamp(2rem,5vh,3.25rem);
  border-bottom:1px solid var(--linie);margin-bottom:clamp(2rem,5vh,3.25rem)}
.fuss__logo{width:160px;margin-bottom:1rem}
.fuss__lewo a{color:var(--b300);border-bottom:1px solid rgba(150,157,218,.5);
  text-decoration:none;padding-bottom:.08em}
.fuss__lewo a:hover{color:#fff;border-color:#fff}

/* Kontaktseite — der Hero traegt jetzt auch den Objekt-CTA (kein zweites
   Foto-Band direkt darunter mehr): Trust-Zeile unter dem Lead, ein leiser
   Nebenlink neben dem Haupt-Button statt eines zweiten gleichwertigen Knopfs. */
.held__trust{margin-top:1.1rem;font-size:.92rem;font-weight:600;color:var(--p-200)}
.held__neben{font-weight:600;font-size:.94rem;color:rgba(245,246,250,.86);
  text-decoration:none;border-bottom:1px solid rgba(245,246,250,.45);padding-bottom:.15em;
  transition:color .3s ease,border-color .3s ease}
.held__neben:hover{color:#fff;border-color:#fff}
@media (max-width:640px){.held__cta{align-items:flex-start;flex-direction:column;gap:1.1rem}}

/* "Telefonisch erreichbar": sauberer 50/50-Split statt Dreiecks-Komposition —
   links EIN durchgehender Info-Block, rechts ausschliesslich das Foto in
   voller Spaltenhoehe. Nichts ragt aus der jeweils anderen Spalte heraus. */
@media (min-width:901px){
  .tel-erreichbar .zwei-spalten{align-items:stretch}
  .tel-erreichbar .direkt-bild{height:100%;aspect-ratio:auto}
}
.direkt-bild{aspect-ratio:16/10;overflow:hidden;position:relative;isolation:isolate;
  box-shadow:0 32px 60px -34px rgba(18,26,84,.4),0 1px 0 rgba(18,26,84,.06);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s cubic-bezier(.2,.7,.2,1)}
.direkt-bild:hover{transform:translateY(-6px);
  box-shadow:0 46px 80px -30px rgba(18,26,84,.48),0 1px 0 rgba(18,26,84,.06)}
.direkt-bild img{width:100%;height:100%;object-fit:cover;transform:scale(1.07);
  transition:filter .5s ease}
.direkt-bild:hover img{filter:brightness(1.04) saturate(1.05)}
/* Dezente Vignette: gibt dem Foto Tiefe, ohne Personen/Fahrzeuge zu verdunkeln */
.direkt-bild::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 70px 6px rgba(11,14,30,.28)}
.direkt-bild figcaption{position:absolute;left:0;bottom:0;right:0;z-index:2;
  padding:.6rem 1rem;font-size:.8rem;color:#fff;
  background:linear-gradient(0deg,rgba(11,14,30,.75),transparent)}
@media (prefers-reduced-motion:reduce){.direkt-bild,.direkt-bild:hover{transform:none;transition:none}}

#formular{position:relative;overflow:hidden}
#formular::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(135deg,rgba(37,51,139,.045) 0 1px,transparent 1px 38px)}
#formular .wrap{position:relative;z-index:1}
/* Groesser und praesenter als der Rest der Seite: eigene Flaeche mit
   Schatten, damit das Formular als das eigentliche Ziel der Sektion wirkt. */
@media (min-width:901px){#formular .zwei-spalten{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}}
/* .formular ist immer eine weisse Flaeche, unabhaengig davon, ob sie in einer
   hellen oder dunklen Sektion steht (z. B. Bewerbungsformular auf dunklem
   Grund). Darum bekommt sie ihre eigenen Rollen-Variablen statt die der
   umgebenden Sektion zu erben — sonst werden Label, Rahmen und Eingabetext
   auf der weissen Flaeche unlesbar hell. */
.formular{--schrift:var(--dunkel);--schrift-2:rgba(28,30,44,.78);--schrift-3:rgba(28,30,44,.68);
  --linie:rgba(28,30,44,.16);--linie-fein:rgba(28,30,44,.09);--akzent:var(--b600);
  color:var(--schrift);
  display:grid;gap:1.25rem;max-width:40rem;margin-top:clamp(2rem,4vh,2.5rem);
  background:var(--hell-2);padding:clamp(1.75rem,3.5vw,2.75rem);
  box-shadow:0 40px 70px -40px rgba(18,26,84,.22)}
.formular .feld input,.formular .feld textarea{padding:1rem 1.1rem;font-size:1.02rem}
.feld label{display:block;font-size:.88rem;color:var(--schrift-2);margin-bottom:.35rem}
.feld input,.feld textarea{width:100%;background:transparent;border:1px solid var(--linie);
  color:inherit;padding:.85rem 1rem;font:inherit}
.feld textarea{min-height:8rem;resize:vertical}
.feld input:focus,.feld textarea:focus{outline:2px solid var(--p-300);outline-offset:2px;border-color:transparent}
.zustimmung{display:flex;gap:.75rem;align-items:flex-start;font-size:.92rem;color:var(--schrift-2)}
.zustimmung input{width:19px;height:19px;margin-top:.2rem;accent-color:var(--b600);flex:none}

/* Karriereseite */
.bew{border:1px solid var(--linie);background:var(--grund);position:relative;z-index:1}
.bew__bar{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.35rem;border-bottom:1px solid var(--linie)}
.bew__bar i{flex:1;height:3px;background:var(--linie);position:relative;font-style:normal}
.bew__bar i b{position:absolute;inset:0 auto 0 0;background:var(--akzent);width:0;transition:width .4s}
.bew__bar span{font-size:.84rem;font-weight:600;color:var(--schrift-2);white-space:nowrap}
.bew__leib{padding:clamp(1.5rem,3.5vw,2.25rem)}
.bew__frage{font-family:"BarlowSC",sans-serif;font-weight:700;font-size:clamp(1.15rem,2vw,1.5rem);
  margin-bottom:1.3rem}

/* Auswahl-Chips im Bewerbungsformular: grosszuegiges Grid statt enger Zeile,
   deutlicher Hover- und Auswahl-Zustand. */
.bew__opt{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.7rem}
.bew__opt button{text-align:left;border:1px solid var(--linie);padding:.9rem 1.05rem;
  font-size:.94rem;line-height:1.4;
  transition:border-color .2s ease,background .2s ease,color .2s ease,transform .2s ease}
.bew__opt button:hover,.bew__opt button:focus-visible{border-color:var(--p-400);
  background:rgba(37,51,139,.16);color:#fff;transform:translateY(-1px)}
.bew__opt button.is-sel{border-color:var(--p-400);background:var(--p-500);color:#fff}
@media (max-width:480px){.bew__opt{grid-template-columns:1fr 1fr}}

/* Der dunkle Bewerbungs-Block bekommt ein sehr dezentes Linienmuster statt
   einer reinen Flächenfarbe, damit er nicht wie eine reine Formular-Fläche
   losgelöst von den übrigen Bild-Sektionen wirkt. */
#bewerbung{position:relative;overflow:hidden}
#bewerbung::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(135deg,rgba(113,122,179,.07) 0 1px,transparent 1px 38px)}
#bewerbung .wrap{position:relative;z-index:1}
.telefon-gross{font-family:"BarlowSC",sans-serif;font-weight:700;
  font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:-.02em;color:var(--schrift);
  text-decoration:none;border-bottom:2px solid var(--akzent);padding-bottom:.1em}
.fehler{display:block;margin-top:.35rem;font-size:.85rem;color:var(--f-fehler)}
.hell .fehler{color:#8F3E33}
.feld[data-err] input,.feld[data-err] textarea{border-color:var(--f-fehler)}
.bew__fertig h3{font-size:clamp(1.3rem,2.4vw,1.8rem);margin-bottom:.8rem}
.ausgabe{width:100%;min-height:13rem;background:rgba(0,0,0,.25);border:1px solid var(--linie);
  color:var(--schrift-2);padding:1rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.78rem;line-height:1.6;white-space:pre;overflow:auto;resize:vertical;margin-top:1rem}
.hell .ausgabe{background:rgba(28,30,44,.05)}

/* .fuss a ist spezifischer als .btn--licht — der Knopf braucht seine Farbe zurück. */
.fuss a.btn{color:#fff}
.fuss a.btn--licht{color:var(--dunkel)}
.fuss a.btn--licht:hover{color:#fff}
/* Inaktive Marker im Peak bleiben lesbar, nicht nur angedeutet. */
.peak__marker span{color:rgba(245,246,250,.58)}

/* ===========================================================================
   DESIGN-RUNDE 1 — Hero: Bild, Typo, Knöpfe, Navigation
   Die Knopfform kommt aus dem Logo: „DIENSTLEISTUNGEN" steht dort in einem
   vollflächigen Riegel ohne Radius. Genau diese Form ist der Primärknopf.
   Der Sekundärknopf ist die gezeichnete Gegenform — eine offene Ecke, die
   sich beim Anfassen zum Rahmen schließt.
   =========================================================================== */

/* --- Knöpfe --------------------------------------------------------------- */
.cta{
  --h:56px;border-radius:4px;
  position:relative;display:inline-flex;align-items:center;gap:1.15rem;
  height:var(--h);padding:0 1.8rem;border-radius:0;text-decoration:none;
  font-family:"BarlowSC",sans-serif;font-weight:700;font-size:.95rem;
  letter-spacing:.085em;white-space:nowrap;overflow:hidden;isolation:isolate
}
.cta > span{position:relative;z-index:2}
.cta svg{position:relative;z-index:2;width:22px;height:10px;flex:none;overflow:visible;
  transition:transform .38s cubic-bezier(.2,.7,.2,1)}
.cta:hover svg{transform:translateX(5px)}
.cta:focus-visible{outline:2px solid var(--b300);outline-offset:3px}

.cta--riegel{background:var(--b600);color:#fff}

.hero__cta{margin-top:2.6rem;display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}

/* --- Navigation ----------------------------------------------------------- */
.kopf__nav{gap:clamp(1.4rem,2.6vw,2.5rem)}
.kopf__nav a{font-family:"BarlowSC",sans-serif;font-weight:600;font-size:.82rem;
  letter-spacing:.13em;color:rgba(245,246,250,.78);border-bottom:0;padding:.35rem 0;
  position:relative;transition:color .3s ease}
.kopf__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .38s cubic-bezier(.2,.7,.2,1)}
.kopf__nav a:hover{color:#fff}
.kopf__nav a:hover::after{transform:scaleX(1)}

/* --- Eyebrow, Headline, Subline als ein Block ------------------------------ */
.hero__txt .eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:.85rem;
  font-family:"BarlowSC",sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.15em;
  color:rgba(245,246,250,.72);margin:0 0 1.5rem}
.hero__txt .eyebrow i{width:34px;height:1px;background:rgba(245,246,250,.42);flex:none}
.hero__txt .t1{font-size:clamp(2.4rem,5.15vw,4.6rem);line-height:1.0;letter-spacing:-.012em;
  text-wrap:nowrap}
.hero__txt .lead{max-width:38ch;margin-top:1.6rem;font-size:clamp(1rem,.5vw+.9rem,1.18rem)}

/* --- Hero-Fläche ---------------------------------------------------------- */
.hero{background:var(--p-950);min-height:100svh;display:flex;flex-direction:column}
.hero__bg{inset:-8% 0}
.hero__bg img{object-position:62% 76%;transform:scale(1.14)}
.hero__w1{background:linear-gradient(180deg,
  rgba(11,14,30,.9) 0%,rgba(11,14,30,.56) 8%,rgba(11,14,30,.16) 18%,rgba(11,14,30,0) 28%)}
.hero__w2{background:radial-gradient(142% 132% at 0% 110%,
  rgba(11,14,30,.97) 0%,rgba(11,14,30,.94) 30%,rgba(11,14,30,.82) 48%,
  rgba(11,14,30,.5) 64%,rgba(11,14,30,.2) 78%,rgba(11,14,30,0) 92%)}
/* Der Hero schließt unten in seinen eigenen Grund. Ohne das blitzt am Fuß ein
   heller Bildstreifen gegen die dunkle Sektion darunter. */
.hero__w3{display:block;position:absolute;inset:auto 0 0 0;height:26%;z-index:1;
  pointer-events:none;background:linear-gradient(180deg,
  rgba(11,14,30,0) 0%,rgba(11,14,30,.35) 42%,rgba(11,14,30,.86) 78%,var(--p-950) 100%)}
.hero__mid{flex:1;display:flex;align-items:flex-end;padding-block:0 clamp(3rem,8vh,5.5rem)}
.hero__txt{max-width:min(44rem,68%)}

@media (max-width:820px){
  .hero__bg img{object-position:66% 78%;transform:scale(1.2)}
  .hero__w2{background:linear-gradient(180deg,
    rgba(11,14,30,0) 0%,rgba(11,14,30,.4) 28%,rgba(11,14,30,.86) 62%,rgba(11,14,30,.97) 100%)}
  .hero__mid{padding-bottom:clamp(2.2rem,6vh,3.4rem)}
  .hero__txt{max-width:none}
  .hero__txt .eyebrow{font-size:.7rem;letter-spacing:.13em;gap:.6rem;margin-bottom:1.1rem}
  .hero__txt .eyebrow i{width:22px}
  .hero__txt .t1{font-size:clamp(2.2rem,9vw,3.4rem)}
  .hero__txt .lead{max-width:36ch;margin-top:1.1rem}
  .cta{--h:54px;padding:0 1.35rem;font-size:.88rem;gap:.9rem}
  .hero__cta{margin-top:1.8rem;gap:.7rem}
  .hero__cta .cta{flex:1 1 100%;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){
  .cta svg,.cta--riegel::before,.cta--riegel::after,.kopf__nav a::after,.direkt__ruf{transition:none}
}

/* Der Chat-Knopf hält sich zurück, solange der Hero im Bild ist. */
.direkt__ruf{transition:background .22s ease,transform .28s cubic-bezier(.2,.7,.2,1),
  opacity .28s ease,visibility .28s}
body.hero-im-bild .direkt__ruf{opacity:0;visibility:hidden;
  transform:translateY(10px) scale(.94);pointer-events:none}

/* --- Laufendes Licht auf dem Primärknopf ----------------------------------
   Portierung des Shimmer-Musters nach Vanilla-CSS: ein Kegelverlauf rotiert
   hinter dem Knopf, eine deckende Grundfläche liegt um --cut eingerückt
   darüber. Sichtbar bleibt davon nur eine Haarlinie an der Kante — dieselbe
   Stärke wie die Linien im Rest der Seite. Kein Pillenradius, keine schwarze
   Fläche: die Form bleibt der Riegel aus dem Logo. */
.cta--riegel{--spread:90deg;--shimmer:#fff;--speed:3.4s;--cut:1.5px;
  z-index:0;isolation:auto}
.cta__funke{position:absolute;inset:0;z-index:-30;filter:blur(1.5px);
  overflow:visible;container-type:size;pointer-events:none}
.cta__funke i{position:absolute;inset:0;height:100cqh;aspect-ratio:1;
  animation:funke-lauf var(--speed) ease-in-out infinite alternate}
.cta__funke i::before{content:"";position:absolute;inset:-100%;width:auto;
  animation:funke-dreh calc(var(--speed)*2) infinite linear;
  background:conic-gradient(from calc(270deg - (var(--spread)*.5)),
    transparent 0,var(--shimmer) var(--spread),transparent var(--spread))}
.cta__grund{position:absolute;inset:var(--cut);z-index:-20;background:var(--b600);
  pointer-events:none}

@keyframes funke-dreh{
  0%{transform:translateZ(0) rotate(0)}
  15%,35%{transform:translateZ(0) rotate(90deg)}
  65%,85%{transform:translateZ(0) rotate(270deg)}
  100%{transform:translateZ(0) rotate(360deg)}
}
@keyframes funke-lauf{to{transform:translate(calc(100cqw - 100%),0)}}
@media (prefers-reduced-motion:reduce){
  .cta__funke{display:none}
}

/* ===========================================================================
   SEKTION LEISTUNGEN — Runde 2
   Zwei Tonvarianten über data-ton. Die Liste ist bewusst unregelmäßig:
   immer genau eine Zeile ist offen, die übrigen fallen auf ihren Titel
   zusammen. Keine Trennlinien zwischen den Zeilen — die perfekte Reihe
   war das, was den Baukasten-Eindruck erzeugt hat.
   =========================================================================== */

/* (a) dunkel — Fortführung der Hero-Welt, eine Stufe angehoben */
.welten[data-ton="dunkel"]{
  --label:var(--p-200);
  --grund:var(--p-900);
  --schrift:var(--n-050);
  --schrift-2:rgba(245,246,250,.7);
  --schrift-3:rgba(245,246,250,.5);
  --linie:rgba(245,246,250,.16);
  --linie-fein:rgba(245,246,250,.1);
  --akzent:var(--b300);
  --wisch:rgba(245,246,250,.042)
}
.welten[data-ton="dunkel"] .sparte--aussen{--akzent:var(--gruen-hell);
  --wisch:rgba(245,246,250,.035)}

/* (b) kühles Fast-Weiß mit Blaustich, aus --b100 nach Weiß gezogen */
.welten[data-ton="hell"]{
  --grund:var(--n-050);
  --schrift:var(--p-900);
  --schrift-2:rgba(17,20,45,.72);
  --schrift-3:rgba(17,20,45,.5);
  --linie:rgba(17,20,45,.2);
  --linie-fein:rgba(17,20,45,.12);
  --akzent:var(--b600);
  --wisch:rgba(17,20,45,.05)
}
.welten[data-ton="hell"] .sparte--aussen{--akzent:var(--gruen)}

/* Die Blöcke tragen ihre Abstände selbst, damit die Farbbänder direkt
   aneinanderstoßen. */
.welten{background:var(--grund);color:var(--schrift);padding-block:0}

/* --- Sparte ---------------------------------------------------------------- */

/* --- Aufteilung ------------------------------------------------------------ */

.fenster__rahmen{position:relative;width:100%;height:100%;min-height:330px;
  overflow:hidden;background:var(--wisch)}
.fenster__rahmen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.055);
  transition:opacity .62s cubic-bezier(.3,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.fenster__rahmen img.ist-an{opacity:1;transform:scale(1)}

/* --- Liste: eine Zeile offen, der Rest zusammengefallen -------------------- */

.lz{display:grid;grid-template-columns:auto 1fr auto;
  column-gap:clamp(.9rem,1.6vw,1.5rem);align-items:start;
  padding:1.02rem 0;text-decoration:none;color:inherit;position:relative;
  transition:padding .44s cubic-bezier(.2,.7,.2,1),opacity .38s ease}
/* keine Trennlinie je Zeile — nur die offene Zeile bekommt eine Fläche */
.lz::before{content:"";position:absolute;inset:-1px -1rem;z-index:-1;opacity:0;
  background:linear-gradient(90deg,var(--wisch) 0%,var(--wisch) 42%,transparent 100%);
  transition:opacity .44s ease}
.sparte--aussen .lz::before{
  background:linear-gradient(270deg,var(--wisch) 0%,var(--wisch) 42%,transparent 100%)}
.lz::after{content:"";position:absolute;left:-1rem;top:-1px;bottom:-1px;width:2px;
  background:var(--akzent);transform:scaleY(0);transform-origin:top;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.lz:not(.ist-aktiv){opacity:.72}
.lz:not(.ist-aktiv):hover{opacity:.92}

/* Nummer als typografisches Element: im Ruhezustand nur Kontur, offen gefüllt */
.lz__n{font-family:"BarlowSC",sans-serif;font-weight:700;line-height:.9;
  font-size:clamp(1.5rem,2.3vw,2rem);letter-spacing:.02em;min-width:3rem;
  color:transparent;-webkit-text-stroke:1.2px var(--schrift-2);
  transition:color .4s ease,-webkit-text-stroke-color .4s ease,font-size .44s cubic-bezier(.2,.7,.2,1);
  padding-top:.12em}
.lz__t{display:block;font-family:"BarlowSC",sans-serif;font-weight:700;
  font-size:clamp(1.15rem,1.8vw,1.45rem);letter-spacing:-.01em;line-height:1.16;
  transition:font-size .44s cubic-bezier(.2,.7,.2,1)}
/* Beschreibung nur bei der offenen Zeile */
.lz__u{display:block;font-family:"Barlow",sans-serif;font-weight:400;font-size:.96rem;
  line-height:1.5;color:var(--schrift-2);max-width:42ch;
  overflow:hidden;max-height:0;opacity:0;margin-top:0;
  transition:max-height .5s cubic-bezier(.2,.7,.2,1),opacity .34s ease,margin-top .5s}
.lz__pf{align-self:center;color:var(--akzent);opacity:0;transform:translateX(-8px);
  transition:opacity .4s ease,transform .44s cubic-bezier(.2,.7,.2,1)}
.lz__pf svg{width:22px;height:10px;display:block;overflow:visible}

.lz.ist-aktiv{padding:1.15rem 0 1.25rem 1.35rem;opacity:1}
.lz.ist-aktiv::before{opacity:1}
.lz.ist-aktiv::after{transform:scaleY(1)}
.lz.ist-aktiv .lz__n{color:var(--akzent);-webkit-text-stroke-color:transparent;
  font-size:clamp(2rem,3.1vw,2.7rem)}
.lz.ist-aktiv .lz__t{font-size:clamp(1.5rem,2.5vw,2.05rem)}
.lz.ist-aktiv .lz__u{max-height:6rem;opacity:1;margin-top:.4rem}
.lz.ist-aktiv .lz__pf{opacity:1;transform:translateX(0)}
.lz:focus-visible{outline:2px solid var(--akzent);outline-offset:4px}

/* --- Mobil: festes Bild je Sparte über der Liste, kein Hover --------------- */
@media (max-width:900px){
  
  
  .fenster__rahmen{position:relative;top:auto;height:clamp(210px,32vh,290px);min-height:0}
  .fenster__rahmen img{transition:none}
  
  .lz{grid-template-columns:auto 1fr;padding:.9rem 0;opacity:1}
  .lz:not(.ist-aktiv){opacity:1}
  .lz::before,.lz::after{display:none}
  .lz__pf{display:none}
  /* auf dem Telefon steht jede Beschreibung, es gibt keinen Hover */
  .lz__u{max-height:none;opacity:1;margin-top:.3rem;max-width:none}
  .lz.ist-aktiv{padding:.9rem 0}
  .lz.ist-aktiv .lz__n,.lz__n{font-size:1.35rem;min-width:2.6rem;
    color:var(--akzent);-webkit-text-stroke-color:transparent}
  .lz.ist-aktiv .lz__t,.lz__t{font-size:1.2rem}
  
  
}
@media (prefers-reduced-motion:reduce){
  .fenster__rahmen img{transition:opacity .01ms;transform:none}
  .lz,.lz::before,.lz::after,.lz__n,.lz__t,.lz__u,.lz__pf{transition:none}
}

/* ===========================================================================
   INTRO — vollflaechig Marken-Blau, Logo mittig, oeffnet sich als wachsender
   Kreis genau durch die Rundung des "Ö". Ursprung wird zur Laufzeit aus der
   tatsaechlich gerenderten Logogroesse berechnet (siehe goeme.js), damit die
   Kreismitte bei jeder Bildschirmgroesse exakt im Ö-Loch sitzt.
   =========================================================================== */
.intro{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:200;display:none;
  overflow:hidden;contain:paint}
html.intro-an .intro{display:block}

.intro__blau{position:absolute;top:0;left:0;width:100%;height:100%;
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(245,246,250,.10), transparent 62%),
    radial-gradient(140% 120% at 50% 100%, rgba(9,11,26,.28), transparent 58%),
    var(--p-500);
  display:flex;align-items:center;justify-content:center;
  --introR:0px;--ox:50%;--oy:50%;
  -webkit-mask-image:radial-gradient(circle at var(--ox) var(--oy),
    transparent var(--introR), #000 calc(var(--introR) + 1px));
  mask-image:radial-gradient(circle at var(--ox) var(--oy),
    transparent var(--introR), #000 calc(var(--introR) + 1px))}

.intro__mitte{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1.1rem}

.intro__logo{width:min(58vw,300px);height:auto;opacity:0;transform:scale(1.1);
  transform-origin:40% 38.1%;
  transition:opacity 480ms cubic-bezier(.16,1,.3,1),transform 480ms cubic-bezier(.16,1,.3,1)}
.intro__mitte.ist-da .intro__logo{opacity:1;transform:scale(1)}
/* Waehrend der Oeffnung uebernimmt goeme.js die Kontrolle ueber Skalierung und
   Deckkraft direkt per rAF (fuer den Zoom-durchs-Ö) — die CSS-Transition wuerde
   den schnellen Frame-fuer-Frame-Werten sonst hinterherhinken. */
.intro__mitte.ist-am-oeffnen .intro__logo{transition:none}

.intro__spur{width:min(30vw,120px);height:1px;background:rgba(245,246,250,.18);overflow:hidden;
  opacity:0;transition:opacity 300ms ease 200ms}
.intro__mitte.ist-da .intro__spur{opacity:1}
.intro__spur i{display:block;height:100%;width:0%;background:rgba(245,246,250,.85);
  transition:width 320ms ease}
html.intro-auf .intro__spur{opacity:0;transition-duration:200ms}

/* Sichtbarer, leuchtender Rand am wachsenden Ö-Loch — macht die Öffnung
   selbst zu einem klar erkennbaren Moment statt einer weichen Maskenkante.
   Groesse/Position werden pro Frame von goeme.js gesetzt. */
.intro__ring{position:absolute;top:0;left:0;width:0;height:0;border-radius:50%;
  border:2px solid rgba(245,246,250,.9);box-shadow:0 0 34px 6px rgba(245,246,250,.4);
  transform:translate(-50%,-50%);pointer-events:none;opacity:0;z-index:2}

@media (prefers-reduced-motion:reduce){
  .intro{display:none !important}
}

/* ===========================================================================
   Navigation, Telefon-Knopf und Hero-Aktionen — Runde 3
   =========================================================================== */

/* Menüpunkte sind zum Lesen da, nicht zur Dekoration: Fließtextschrift,
   16 px, fast kein Sperrsatz. */
.kopf__nav a{font-family:"Barlow",sans-serif;font-weight:500;font-size:1.02rem;
  letter-spacing:.004em;color:rgba(245,246,250,.82);padding:.4rem 0;white-space:nowrap}

.kopf__nav a:hover{color:#fff}

/* --- Hero: ein Knopf, daneben ein Textlink -------------------------------- */
.hero__cta{margin-top:2.6rem;display:flex;align-items:center;flex-wrap:wrap;
  gap:1rem clamp(1.6rem,3vw,2.9rem)}

/* Breiter und flacher, scharfkantig, Text links, Zeichen an der rechten Kante. */
.cta--riegel{background:var(--b600);color:#fff;border-radius:4px;
  min-width:0;justify-content:flex-start;gap:2rem;letter-spacing:.055em;
  transition:background-color .3s ease}
.cta--riegel:hover{background:var(--b700)}
.cta--riegel:hover .cta__grund{background:var(--b700)}
.cta__t{text-align:left}
.cta__pf{transition:transform .34s cubic-bezier(.2,.7,.2,1)}
.cta--riegel:hover .cta__pf{transform:translateX(6px)}
.cta__grund{transition:background-color .3s ease}

/* Der zweite Weg ist kein zweiter Knopf. */
.hero__link{display:inline-flex;align-items:center;gap:.7rem;
  font-family:"BarlowSC",sans-serif;font-weight:700;font-size:.94rem;letter-spacing:.045em;
  color:var(--schrift);text-decoration:none;padding-bottom:.28rem;
  box-shadow:inset 0 -1px 0 rgba(245,246,250,.38);
  transition:box-shadow .3s ease,color .3s ease}
.hero__link svg{width:20px;height:9px;overflow:visible;
  transition:transform .34s cubic-bezier(.2,.7,.2,1)}
.hero__link:hover{color:#fff;box-shadow:inset 0 -1px 0 #fff}
.hero__link:hover svg{transform:translateX(5px)}
.hero__link:focus-visible{outline:2px solid var(--b300);outline-offset:4px}

@media (max-width:600px){
  .cta--riegel{width:100%;justify-content:space-between}
  .hero__cta{gap:1.1rem;flex-direction:column;align-items:flex-start}
}

/* --- Telefon-Link in der Navigation ---------------------------------------
   Ein Nav-Punkt wie jeder andere, keine zusätzliche Knopf-Optik. Das kleine
   Hörer-Icon reicht als Unterscheidung, Typografie und Hover sind identisch
   zu "Leistungen" / "Karriere" / "Kontakt". */
.kopf__nav a.kopf__tel{display:inline-flex;align-items:center;gap:.4rem;flex:none;
  background:none;border:0;color:rgba(245,246,250,.82)}
.kopf__tel-i{flex:none;width:13px;height:13px;opacity:.85}
.kopf__nav a.kopf__tel:hover .kopf__tel-i{opacity:1}

/* --- Innenabstand-Boden für alle Knöpfe ----------------------------------
   Nie unter 14 px oben und unten, nie unter 24 px links und rechts.
   Text berührt keinen Rand. */
.cta,.btn,.cta--riegel{padding:14px 24px}
.cta--riegel{height:auto;min-height:0}

/* Ruhig aus der Tiefe: Unschärfe und Maßstab bauen ab, keine Bewegung von unten. */

/* ===========================================================================
   LEISTUNGEN — zwei Bildwelten
   Kein Verzeichnis, keine Nummern, keine Beschreibungen. Zwei große Bildflächen
   nebeneinander, darüber der Weltname, darunter die Leistungen als reine Namen.
   Das Bild trägt, die Schrift ordnet.
   =========================================================================== */
.welten{background:var(--p-950);color:var(--n-050);padding-block:var(--sec)}
.welten__kopf{max-width:40rem;margin-bottom:clamp(2.2rem,5vh,3.4rem)}
.welten__h{margin:0;font-family:"BarlowSC",sans-serif;font-weight:700;
  font-size:clamp(2.4rem,5.6vw,4.8rem);line-height:1;letter-spacing:-.025em;
  opacity:0;filter:blur(11px);transform:scale(1.035);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),filter 1.05s cubic-bezier(.2,.7,.2,1),
             transform 1.15s cubic-bezier(.2,.7,.2,1)}
.welten__kopf.ist-da .welten__h{opacity:1;filter:blur(0);transform:none}
.welten__satz{margin:1rem 0 0;color:var(--n-300);
  font-size:clamp(1.02rem,.4vw+.94rem,1.15rem)}

/* --- Das Paar ------------------------------------------------------------- */
/* Flex statt Grid, weil flex-grow zuverlässig animiert. */
.welten__paar{display:flex;gap:clamp(.5rem,1.2vw,1.1rem)}
.welt{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  flex:1 1 0;min-width:0;
  min-height:clamp(30rem,62vh,42rem);overflow:hidden;isolation:isolate;
  padding:clamp(1.6rem,3vw,2.6rem);
  transition:flex-grow .62s cubic-bezier(.2,.7,.2,1)}
/* Das berührte Panel bekommt Raum, das andere gibt ihn ab. */
@media (hover:hover) and (min-width:861px){
  .welt:hover{flex-grow:1.22}
  .welt:hover .welt__bild img.ist-an{transform:scale(1.03)}
}
.welt__bild{position:absolute;inset:0;z-index:-1}
.welt__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);
  transition:opacity .7s cubic-bezier(.3,.7,.2,1),transform 1.3s cubic-bezier(.2,.7,.2,1)}
.welt__bild img.ist-an{opacity:1;transform:scale(1)}
/* Ein gerichteter Flor, damit die Schrift auf dem Bild steht und nicht darin. */
/* Zwei Lagen: ein flacher Verlauf über das ganze Bild und ein kräftigerer,
   der nur unter der Textzone liegt. */
.welt__flor{position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(11,14,30,.97) 0%,rgba(11,14,30,.93) 18%,
      rgba(11,14,30,.74) 34%,rgba(11,14,30,.3) 52%,rgba(11,14,30,0) 72%),
    radial-gradient(120% 62% at 22% 100%,rgba(11,14,30,.62) 0%,rgba(11,14,30,0) 70%)}
.welt--innen .welt__bild img{filter:saturate(.82) contrast(1.04)}
.welt--aussen .welt__bild img{filter:saturate(.72) contrast(1.05)}

.welt__t{margin:0 0 clamp(1rem,2vh,1.5rem);font-family:"BarlowSC",sans-serif;
  font-weight:700;font-size:clamp(1.9rem,3.4vw,3rem);line-height:1;letter-spacing:-.022em;
  color:#fff}
.welt__liste{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem}
/* Ruhezustand ohne Unterstrich. Das aktive Element ist nur heller, weil es
   das Bild bestimmt. Der Unterstrich gehört ausschließlich zum Anfassen —
   ein Zustand, eine Bedeutung. */
.welt__l{position:relative;display:inline-flex;align-items:center;text-decoration:none;
  font-family:"BarlowSC",sans-serif;font-weight:600;
  font-size:clamp(1rem,1.35vw,1.22rem);letter-spacing:-.004em;line-height:1.5;
  color:rgba(255,255,255,.66);padding:.24rem 0;
  background-image:linear-gradient(var(--p-300),var(--p-300));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;
  transition:color .34s ease,background-size .42s cubic-bezier(.2,.7,.2,1)}
.welt__l.ist-aktiv{color:#fff}
.welt__l::after{content:"";width:0;height:8px;margin-left:0;flex:none;
  background:var(--p-300);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%208%27%3E%3Cpath%20d%3D%27M0%204h16M12.5%20.8%2015.7%204l-3.2%203.2%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27square%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%208%27%3E%3Cpath%20d%3D%27M0%204h16M12.5%20.8%2015.7%204l-3.2%203.2%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27square%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
  opacity:0;transition:opacity .3s ease,width .42s cubic-bezier(.2,.7,.2,1),
                       margin-left .42s cubic-bezier(.2,.7,.2,1)}
.welt__l:hover,.welt__l:focus-visible{color:#fff;outline:none;background-size:100% 1px}
.welt__l:hover::after,.welt__l:focus-visible::after{opacity:1;width:20px;margin-left:.6rem}
.welt__l:focus-visible{box-shadow:0 0 0 2px var(--p-300);border-radius:1px}

/* --- Abschluss ------------------------------------------------------------ */
/* Der Abschluss zitiert den Flächenbalken der Visitenkarte: gefüllte
   CI-Fläche mit angeschnittener rechter Kante. Ein Zitat, kein Muster. */
.welten__fuss{margin-top:clamp(2rem,4.5vh,3.2rem);display:flex;justify-content:center}
/* Ein Knopf für die ganze Seite: gefüllte CI-Fläche mit angeschnittener
   rechter Kante, das Zitat des Flächenbalkens von der Visitenkarte. */
.ci-btn{display:inline-flex;align-items:center;gap:1.35rem;
  padding:16px 40px 16px 28px;text-decoration:none;background:var(--p-500);color:#fff;
  clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%);
  font-family:"BarlowSC",sans-serif;font-weight:700;font-size:clamp(1rem,1.4vw,1.18rem);
  letter-spacing:.05em;
  transition:background-color .3s ease}
.ci-btn svg{width:22px;height:10px;overflow:visible;flex:none;
  transition:transform .34s cubic-bezier(.2,.7,.2,1)}
.ci-btn:hover{background:var(--p-600);color:#fff}
.ci-btn:hover svg{transform:translateX(7px)}
.ci-btn:focus-visible{outline:2px solid var(--p-300);outline-offset:4px}

/* Ausnahme: auf vollflaechigen dunklen Fotosektionen (Hero, finale CTA)
   loest sich ein blau gefuellter Knopf schlecht vom Bild — dort wird der
   Primaerknopf hell, mit dunklem Text. Sekundaer bleibt Kontur, gleiche Form. */
.ci-btn--licht{background:var(--hell-2);color:var(--dunkel)}
.ci-btn--licht:hover{background:var(--p-600);color:#fff}
.ci-btn--o{background:transparent;color:inherit;
  box-shadow:inset 0 0 0 1.5px rgba(245,246,250,.45)}
.ci-btn--o:hover{background:rgba(245,246,250,.1);
  box-shadow:inset 0 0 0 1.5px rgba(245,246,250,.75)}

/* --- Mobil: zwei Blöcke untereinander, Bild und Namen getrennt ------------ */
@media (max-width:860px){
  .welten__paar{flex-direction:column;gap:clamp(1.4rem,3vh,2.2rem)}
  .welt{flex:1 1 auto;min-height:0;display:block;padding:0;overflow:visible}
  .welt__bild{position:relative;inset:auto;height:clamp(15rem,34vh,20rem);
    z-index:0;overflow:hidden}
  .welt__bild img{transition:none}
  .welt__flor{background:linear-gradient(to top,rgba(11,14,30,.9) 0%,
    rgba(11,14,30,.35) 46%,rgba(11,14,30,0) 100%)}
  .welt__inhalt{position:relative;margin-top:-3.2rem;padding:0 clamp(1rem,4vw,1.4rem)}
  .welt__t{font-size:clamp(1.6rem,7vw,2.1rem);margin-bottom:.9rem}
  .welt__liste{display:grid;grid-template-columns:1fr;gap:0}
  .welt__l{font-size:1.02rem;color:rgba(255,255,255,.8);
    padding:.78rem 0;border-bottom:1px solid rgba(245,246,250,.1);
    background-image:none;justify-content:space-between}
  .welt__l:last-child{border-bottom:0}
  .welt__l::after{opacity:1;width:20px;margin-left:.6rem;background:var(--p-300)}
  .welt__l.ist-aktiv{color:#fff}
  .welten__fuss{justify-content:flex-start}
  .welten__h{font-size:clamp(2rem,8.4vw,3rem)}
}
@media (prefers-reduced-motion:reduce){
  .welten__h{opacity:1;filter:none;transform:none;transition:none}
  .welt__bild img{transition:opacity .01ms;transform:none}
}

/* --- Der Übergang: der Text wechselt mit dem Bild ------------------------
   Zwei Takte auf demselben Platz. Takt 1 benennt das Problem, solange innen
   zu sehen ist; Takt 2 löst es auf, sobald draußen übernimmt. Gesteuert über
   dieselbe Variable wie die Bildmaske — Bild und Aussage bleiben synchron. */
.objekt__takte{display:grid}
.objekt__takt{grid-area:1/1;pointer-events:none}
.objekt__takt--1{opacity:calc(1 - var(--m) * 2.2)}
.objekt__takt--2{opacity:calc(var(--m) * 2.2 - 1.2)}
.objekt__weiter{margin-top:1.8rem}
@media (prefers-reduced-motion:reduce){
  .objekt__takt--1{opacity:1}
  .objekt__takt--2{display:none}
}

/* ===========================================================================
   WARUM GÖME
   Heller Abschnitt aus der Neutral-Rampe statt Reinweiß, mit derselben
   Materialbehandlung wie die dunklen Flächen. Der Übergang von der dunklen
   Sektion darüber ist komponiert, nicht geschnitten.
   =========================================================================== */
.warum{
  --grund:var(--n-050); --schrift:var(--n-900);
  --schrift-2:rgba(28,30,44,.74); --schrift-3:rgba(28,30,44,.56);
  --linie:rgba(28,30,44,.16); --linie-fein:rgba(28,30,44,.1);
  --akzent:var(--p-500);
  position:relative;isolation:isolate;
  background:var(--grund);color:var(--schrift);
  padding-block:calc(var(--sec) + 2rem) var(--sec)}
/* Der Übergang: die dunkle Fläche läuft in den hellen Grund aus. */
.warum::before{content:"";position:absolute;inset:0 0 auto 0;height:8.5rem;z-index:-1;
  background:linear-gradient(180deg,#0B0E1E 0%,rgba(11,14,30,.5) 14%,
    rgba(11,14,30,.14) 40%,rgba(11,14,30,0) 100%)}
/* Dieselbe Materialität wie in den dunklen Sektionen: weiches Licht, feines Korn. */
.warum::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(72% 108% at 88% 26%,rgba(37,51,139,.055) 0%,
      rgba(37,51,139,.02) 42%,rgba(37,51,139,0) 72%),
    linear-gradient(90deg,rgba(28,30,44,.05) 0%,rgba(28,30,44,0) 16%,
      rgba(28,30,44,0) 84%,rgba(28,30,44,.05) 100%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27n%27%20x%3D%270%27%20y%3D%270%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.9%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27160%27%20height%3D%27160%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%27.055%27%2F%3E%3C%2Fsvg%3E");
  background-size:auto,auto,160px 160px;
  background-repeat:no-repeat,no-repeat,repeat}

.warum__grid{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:clamp(2rem,5vw,5.5rem);align-items:stretch}
.warum__halt{position:sticky;top:clamp(2rem,8vh,5rem);display:flex;flex-direction:column;
  align-items:flex-start}
.warum__h{margin:0;font-family:"BarlowSC",sans-serif;font-weight:700;
  font-size:clamp(1.8rem,3.1vw,2.7rem);line-height:1.08;letter-spacing:-.02em}
.warum__cta{margin-top:clamp(1.6rem,3.5vh,2.4rem)}

/* --- Bildelement, zwei Varianten ----------------------------------------- */
.warum__bild{margin:clamp(1.75rem,4vh,2.5rem) 0 0;width:100%;overflow:hidden;
  background:var(--p-950)}

.warum__bild{aspect-ratio:3/2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 50px -38px rgba(11,14,30,.6)}
.warum__bild img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.94) contrast(1.02);
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.warum__bild:hover img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){.warum__bild:hover img{transform:none}}

/* --- Die vier Argumente: eine Kante fuer die Ziffern, eine fuer den Text --- */
.warum__liste{display:grid;align-content:space-between;
  row-gap:clamp(2.4rem,4.6vh,3.6rem)}
.arg{display:grid;
  grid-template-columns:clamp(3.2rem,4.8vw,4.4rem) minmax(0,1fr);
  column-gap:clamp(1.1rem,2vw,1.7rem);align-items:start;position:relative;
  opacity:0;transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.arg.ist-da{opacity:1;transform:none}
/* Die Flaeche faehrt beim Zeigen auf, mit der CI-Schraege an der Kante. */
.arg::before{content:"";position:absolute;z-index:0;pointer-events:none;
  inset:-1.15rem -1.4rem -1.15rem -1.5rem;
  background:linear-gradient(100deg,rgba(37,51,139,.075) 0%,
    rgba(37,51,139,.028) 58%,rgba(37,51,139,0) 100%);
  clip-path:polygon(0 0,100% 0,calc(100% - 18px) 100%,0 100%);
  opacity:0;transform:translateX(-10px);
  transition:opacity .42s ease,transform .42s cubic-bezier(.2,.7,.2,1)}
.arg__n,.arg__txt{position:relative;z-index:1}
/* Ziffern rechtsbuendig: 01-04 bilden eine saubere Kante zur Textspalte. */
.arg__n{justify-self:end;isolation:isolate;
  transition:color .3s ease,transform .38s cubic-bezier(.2,.7,.2,1);
  font-family:"BarlowSC",sans-serif;font-weight:700;font-variant-numeric:tabular-nums;
  font-size:clamp(2.1rem,3.4vw,2.9rem);line-height:1;letter-spacing:-.04em;
  color:var(--p-500);
  /* Versalhoehe der Ziffer auf die Versalhoehe der Zeile ziehen */
  margin-top:-.09em}
/* Ein Mass fuer Titel und Text: alle vier brechen auf derselben Kante. */
.arg__txt{max-width:34rem}
.arg h3{font-family:"BarlowSC",sans-serif;font-weight:700;
  font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.18;margin:0 0 .5rem;
  letter-spacing:-.014em}
.arg p{margin:0;color:var(--schrift-2);line-height:1.62}
/* Hinter der Ziffer faehrt dieselbe Plakette auf wie am Knopf. */
.arg__n::before{content:"";position:absolute;z-index:-1;
  inset:-.17em -.36em -.11em -.36em;background:var(--p-500);
  clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%);
  opacity:0;transform:scaleX(.7);transform-origin:left center;
  transition:opacity .34s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.arg__txt{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.arg h3{transition:color .3s ease}

@media (hover:hover){
  .arg:hover::before{opacity:1;transform:none}
  .arg:hover .arg__n{color:#fff;transform:translateX(3px)}
  .arg:hover .arg__n::before{opacity:1;transform:none}
  .arg:hover .arg__txt{transform:translateX(5px)}
  .arg:hover h3{color:var(--p-500)}
}
@media (prefers-reduced-motion:reduce){
  .arg{opacity:1;transform:none;transition:none}
  .arg::before,.arg__n::before,.arg__n,.arg__txt,.arg h3{transition:none}
}

@media (max-width:900px){
  .warum{padding-block:calc(var(--sec-s) + 3rem) var(--sec-s)}
  .warum::before{height:6rem}
  .warum__grid{grid-template-columns:1fr;gap:2.4rem}
  .warum__halt{position:static}
  .warum__liste{row-gap:2rem}
  .arg{grid-template-columns:2.6rem minmax(0,1fr);column-gap:1rem}
  .arg__n{font-size:1.9rem;margin-top:-.05em}
  .arg__txt{max-width:none}
  .warum__cta{width:100%;justify-content:space-between}
}