/* =========================================================
   Platzhirsch — dunkles Design
   Clash Display ausschließlich für die Überschrift der Startseite.
   Alles andere: General Sans. Kleinschrift in Versalien: IBM Plex Mono.
   ========================================================= */

:root{
  --bg:#050505;
  --bg-2:#0A0A0A;
  --surface:rgba(255,255,255,.04);
  --surface-2:rgba(255,255,255,.07);
  --white:#FFFFFF;
  --dim:rgba(255,255,255,.74);
  --mute:rgba(255,255,255,.56);
  --faint:rgba(255,255,255,.44);
  --hair:rgba(255,255,255,.12);
  --hair-2:rgba(255,255,255,.2);

  --ui:"General Sans",system-ui,-apple-system,sans-serif;
  --display:"Clash Display","General Sans",system-ui,sans-serif;
  --m:"IBM Plex Mono",ui-monospace,monospace;

  --grad:linear-gradient(96deg,#EFAE6B 0%,#E5A15F 18%,#DFA089 52%,#D8A9A1 74%,#C9BEB2 100%);
  --accent:#E4A263;

  --e:cubic-bezier(.22,.68,0,1);
  --pad:clamp(1.25rem,4vw,3.5rem);
  --wrap:1440px;
  --panel:min(58vw,1040px);
}

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

body{margin:0;min-height:100dvh;background:var(--bg);color:var(--white);
  font-family:var(--ui);font-size:1rem;line-height:1.6;
  overflow-x:clip;-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
/* Überschriften eine Stufe dünner: 400 statt 500. Clash Display trägt in
   400 deutlich mehr Weißraum in den Buchstaben — das nimmt der Seite den
   Anschein, alles sei auf Wirkung gebaut. Zwischentitel (h3) bleiben bei
   500, sonst verlieren sie sich im Fließtext. */
h1,h2,h4{margin:0;font-weight:400;letter-spacing:-.02em;line-height:1.12;}
h3{margin:0;font-weight:500;letter-spacing:-.02em;line-height:1.12;}
p{margin:0;} ul,ol{margin:0;padding:0;list-style:none;}

/* Farbverlauf in einzelnen Wörtern */
/* Überschriften tragen keine zweite Farbe mehr — sie laufen durchgehend in
   der Textfarbe der Seite, also schwarz auf hellem und weiß auf dunklem
   Grund. Was eine Überschrift von der nächsten unterscheidet, ist ihre
   Größe, nicht ihr Farbton.

   Die Auszeichnung bleibt im Markup stehen: sie kostet nichts und wäre
   sonst auf dreizehn Seiten von Hand zu entfernen. Sie nimmt jetzt nur
   Farbe und Gewicht des umgebenden Textes an. Zum Zurückdrehen genügt es,
   diesen Block durch die alten vier Zeilen zu ersetzen. */
.key{font-weight:inherit;color:inherit;
  background-image:none;-webkit-text-fill-color:currentColor;}

.skip{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--white);color:#050505;padding:.7rem 1.1rem;border-radius:0 0 10px 0;font-weight:600;}
.skip:focus{left:0;}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}

/* ============ Kopf: Glasleiste ============ */
/* Drei Spalten mit gleich starken Außenspalten: dadurch sitzt die Mitte
   auf der Seitenmitte, egal wie breit Wortmarke links und Knopfgruppe
   rechts gerade sind. Mit Flex und „space-between" hing die Navigation
   immer an der breiteren der beiden Seiten. */
.top{position:sticky;top:0;z-index:40;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.2rem;
  padding:clamp(.5rem,1.1vh,.72rem) var(--pad);
  background:rgba(255,255,255,.03);
  /* Beim Herunterscrollen schiebt sie sich nach oben aus dem Bild, beim
     Hochscrollen kommt sie zurück (dark.js). Der Übergang läuft über
     „transform", nicht über „top" — nur so bleibt es flüssig, weil der
     Browser dafür nichts neu berechnen muss. */
  transition:transform .34s var(--e);
  will-change:transform;
  -webkit-backdrop-filter:blur(26px) saturate(150%);
          backdrop-filter:blur(26px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .top{background:rgba(5,5,5,.72);}
}
/* Die Wortmarke steht in der ersten Spalte, die Knopfgruppe in der dritten. */
.brand{grid-column:1;justify-self:start;}
.kopf-rechts{grid-column:3;justify-self:end;}
.brand{display:flex;align-items:center;gap:.6rem;flex:none;}
.brand img{height:21px;width:auto;filter:brightness(0) invert(1);}
.brand b{font-size:.92rem;font-weight:500;letter-spacing:-.02em;}
.brand span{font:500 .56rem/1 var(--m);letter-spacing:.2em;text-transform:uppercase;color:var(--faint);}

.nav{display:flex;align-items:center;gap:clamp(1rem,2.1vw,2rem);
  font-size:.86rem;font-weight:500;color:var(--dim);}
.nav a{position:relative;white-space:nowrap;padding:.28rem 0;transition:color .25s var(--e);}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--e);}
.nav a[aria-current="page"]{color:var(--white);}
.nav a[aria-current="page"]::after{transform:scaleX(1);}
@media (hover:hover) and (pointer:fine){
  .nav a:hover{color:var(--white);}
  .nav a:hover::after{transform:scaleX(1);}
}

.menu{display:none;position:relative;}
.menu summary{list-style:none;cursor:pointer;width:42px;height:42px;border-radius:100px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:1px solid var(--hair-2);background:rgba(255,255,255,.06);}
.menu summary::-webkit-details-marker{display:none;}
.menu summary i{display:block;width:16px;height:1.5px;background:var(--white);border-radius:2px;
  transition:transform .3s var(--e),opacity .2s var(--e);}
.menu[open] summary i:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.menu[open] summary i:nth-child(2){opacity:0;}
.menu[open] summary i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.menu-panel{position:absolute;right:0;top:calc(100% + .7rem);min-width:14rem;
  display:flex;flex-direction:column;gap:.15rem;padding:.55rem;
  border-radius:16px;border:1px solid rgba(255,255,255,.16);background:rgba(11,11,11,.96);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08);}
.menu-panel a:not(.btn){padding:.7rem .85rem;border-radius:10px;font-size:.95rem;font-weight:500;color:var(--dim);
  transition:background .2s var(--e),color .2s var(--e);}
@media (hover:hover) and (pointer:fine){
  .menu-panel a:not(.btn):hover{background:rgba(255,255,255,.1);color:var(--white);}
}
/* Beide Schwellen müssen dieselbe sein. Standen sie auf 1080 und 1000,
   gab es dazwischen weder Navigation noch Klappmenü — 80 Pixel breit war
   die Seite ohne jede Wegführung. */
@media (max-width:1080px){.nav{display:none;} .menu{display:block;}}
@media (max-width:620px){
  .brand span{display:none;} .brand img{height:22px;} .brand b{font-size:.92rem;}
  .top{padding:.75rem 1rem;}
}

/* ============ Schaltflächen ============ */
.btn{position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:56px;padding:.8rem 1.7rem;border-radius:100px;
  font-family:var(--ui);font-weight:500;font-size:1rem;border:1px solid transparent;cursor:pointer;
  transition:background .22s var(--e),color .22s var(--e),border-color .22s var(--e);}
.btn--fill{background:var(--white);color:#050505;}
.btn--line{border-color:rgba(255,255,255,.45);color:var(--white);
  background:rgba(5,5,5,.35);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.btn::after{content:"";position:absolute;top:-45%;bottom:-45%;left:-62%;width:42%;
  pointer-events:none;transform:skewX(-18deg) translateX(0);
  animation:sheen 6.5s cubic-bezier(.5,0,.2,1) infinite;}
.btn--fill::after{background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.05) 42%,rgba(0,0,0,.05) 58%,rgba(0,0,0,0) 100%);}
.btn--line::after{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.15) 42%,rgba(255,255,255,.15) 58%,rgba(255,255,255,0) 100%);animation-delay:1.6s;}
@keyframes sheen{
  0%{transform:skewX(-18deg) translateX(0);}
  22%{transform:skewX(-18deg) translateX(470%);}
  100%{transform:skewX(-18deg) translateX(470%);}
}
@media (prefers-reduced-motion:reduce){.btn::after{animation:none;opacity:0;}}
@media (hover:hover) and (pointer:fine){
  .btn--fill:hover{background:#E6E2D9;}
  .btn--line:hover{background:rgba(255,255,255,.12);border-color:var(--white);}
}
@media (max-width:520px){.btn{width:100%;}}

/* ============ Startseiten-Hero mit Video ============ */
.hero{position:relative;}
.hero .core{position:relative;z-index:3;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(1rem,2vh,1.6rem) var(--pad) clamp(1.5rem,3vh,2.4rem);
  min-height:calc(100dvh - 4.3rem);display:flex;flex-direction:column;justify-content:center;}
.hero h1{font-family:var(--display);
  font-size:clamp(2rem,.92rem + 3.7vw,3.95rem);font-weight:500;
  letter-spacing:-.025em;line-height:1.08;max-width:min(15ch,40vw);}

.hero .sub{margin-top:1.15rem;max-width:min(38ch,36vw);color:var(--dim);
  font-size:clamp(.98rem,.95rem + .3vw,1.125rem);line-height:1.55;}

.media{position:fixed;top:0;right:0;z-index:1;width:var(--panel);height:100dvh;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,
    rgba(0,0,0,0) 0%,rgba(0,0,0,.02) 7%,rgba(0,0,0,.06) 14%,rgba(0,0,0,.13) 21%,
    rgba(0,0,0,.23) 28%,rgba(0,0,0,.36) 35%,rgba(0,0,0,.5) 42%,rgba(0,0,0,.64) 49%,
    rgba(0,0,0,.76) 56%,rgba(0,0,0,.86) 63%,rgba(0,0,0,.93) 70%,rgba(0,0,0,.97) 77%,
    rgba(0,0,0,.99) 84%,rgba(0,0,0,1) 92%);
          mask-image:linear-gradient(to right,
    rgba(0,0,0,0) 0%,rgba(0,0,0,.02) 7%,rgba(0,0,0,.06) 14%,rgba(0,0,0,.13) 21%,
    rgba(0,0,0,.23) 28%,rgba(0,0,0,.36) 35%,rgba(0,0,0,.5) 42%,rgba(0,0,0,.64) 49%,
    rgba(0,0,0,.76) 56%,rgba(0,0,0,.86) 63%,rgba(0,0,0,.93) 70%,rgba(0,0,0,.97) 77%,
    rgba(0,0,0,.99) 84%,rgba(0,0,0,1) 92%);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.media video{display:block;width:100%;height:100%;object-fit:cover;}

.eyebrow{display:inline-flex;align-items:center;gap:.55rem;width:fit-content;
  font:500 .66rem/1 var(--m);letter-spacing:.26em;text-transform:uppercase;
  color:var(--faint);margin-bottom:clamp(.9rem,2.2vh,1.5rem);}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;}

.cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(1.4rem,3vh,2.2rem);}
.trust{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;
  margin-top:clamp(1.3rem,2.8vh,2rem);padding-top:clamp(1rem,2.2vh,1.6rem);
  border-top:1px solid var(--hair);max-width:min(38ch,36vw);
  font:500 .62rem/1.6 var(--m);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);}

@media (max-width:1100px){
  :root{--panel:100vw;}
  .hero h1{max-width:none;}
  .hero .sub{max-width:min(32ch,76vw);font-size:.95rem;line-height:1.5;}
  .trust{max-width:min(32ch,82vw);}
  .media{
    -webkit-mask-image:radial-gradient(126% 84% at 104% 84%,#000 0%,#000 30%,rgba(0,0,0,.9) 46%,
      rgba(0,0,0,.58) 60%,rgba(0,0,0,.26) 73%,rgba(0,0,0,.08) 84%,transparent 95%);
            mask-image:radial-gradient(126% 84% at 104% 84%,#000 0%,#000 30%,rgba(0,0,0,.9) 46%,
      rgba(0,0,0,.58) 60%,rgba(0,0,0,.26) 73%,rgba(0,0,0,.08) 84%,transparent 95%);}
  .hero .core{justify-content:flex-start;padding-top:clamp(1.5rem,5vh,3rem);padding-bottom:6rem;}
  .hero .cta{flex-direction:column;align-items:flex-start;}
  .hero .btn{width:min(100%,20rem);}
  .hero .eyebrow,.hero h1,.hero .sub{text-shadow:0 2px 18px rgba(5,5,5,.75);}
  .trust{color:rgba(255,255,255,.62);text-shadow:0 2px 14px rgba(5,5,5,.85);}
}
@media (max-width:560px){
  .hero .sub{max-width:min(30ch,80vw);font-size:.875rem;margin-top:.95rem;color:rgba(255,255,255,.66);}
  .trust{max-width:min(30ch,86vw);gap:.3rem 1.1rem;font-size:.58rem;}
}

/* ============ Referenzen-Leiste ============ */
.refs{position:relative;z-index:3;background:var(--bg);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:clamp(1.6rem,4vh,2.6rem) 0;}
.refs .cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.4rem;
  padding-inline:var(--pad);max-width:var(--wrap);margin:0 auto clamp(1.1rem,2.6vh,1.7rem);}
.refs .cap span{font:500 .62rem/1 var(--m);letter-spacing:.24em;
  text-transform:uppercase;color:var(--faint);}
.refs .cap p{color:var(--mute);font-size:.93rem;}

/* Breiter Ausblendbereich an beiden Rändern: die Namen tauchen auf und
   vergehen wieder, statt an einer Kante abgeschnitten zu werden. */
.marquee{overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,
    transparent 0%, rgba(0,0,0,.06) 4%, rgba(0,0,0,.24) 9%, rgba(0,0,0,.55) 14%,
    rgba(0,0,0,.85) 19%, #000 25%, #000 75%, rgba(0,0,0,.85) 81%,
    rgba(0,0,0,.55) 86%, rgba(0,0,0,.24) 91%, rgba(0,0,0,.06) 96%, transparent 100%);
          mask-image:linear-gradient(to right,
    transparent 0%, rgba(0,0,0,.06) 4%, rgba(0,0,0,.24) 9%, rgba(0,0,0,.55) 14%,
    rgba(0,0,0,.85) 19%, #000 25%, #000 75%, rgba(0,0,0,.85) 81%,
    rgba(0,0,0,.55) 86%, rgba(0,0,0,.24) 91%, rgba(0,0,0,.06) 96%, transparent 100%);}
.track{display:flex;width:max-content;align-items:center;
  gap:clamp(2rem,5vw,4.5rem);padding-right:clamp(2rem,5vw,4.5rem);
  animation:slide 42s linear infinite;}
@keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}
/* Die Leiste läuft durch. Früher hielt sie an, sobald der Zeiger darüber lag —
   das sah aus, als sei die Seite hängen geblieben. Nur wer Bewegung im System
   abgestellt hat, bekommt sie weiterhin ruhig. */
@media (prefers-reduced-motion:reduce){.track{animation:none;}}

.slot{flex:none;display:flex;align-items:center;justify-content:center;
  height:clamp(2.3rem,4vw,3.1rem);min-width:clamp(7.5rem,13vw,11rem);
  padding:0 1rem;border:1px dashed rgba(255,255,255,.16);border-radius:10px;
  font:500 .58rem/1 var(--m);letter-spacing:.2em;text-transform:uppercase;color:var(--faint);}
/* Sobald echte Logos vorliegen: <span class="slot"> durch <span class="slot slot--img">
   mit <img> ersetzen. Der gestrichelte Rahmen fällt dann automatisch weg. */
.slot--img{border:0;padding:0;}

/* Beispiel-Wortmarken nach dem Vorbild der Logo-Wand: jede Marke bekommt ein
   eigenes Zeichen und eine eigene Schriftbehandlung. Gleiche Schrift für alle
   liest sich als Wortliste, unterschiedliche liest sich als Logo-Reihe.
   Kursiv und Strichstärke 800 aus der Vorlage nutze ich nicht — beides ist in
   General Sans nicht geladen und der Browser würde es nachahmen. */
.slot.marke{border:0;padding:0;min-width:0;height:auto;
  display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;
  text-transform:none;color:rgba(255,255,255,.5);
  transition:color .3s var(--e);}
.slot.marke svg{width:24px;height:24px;fill:currentColor;flex:none;}
@media (hover:hover) and (pointer:fine){
  .slot.marke:hover{color:#FFFFFF;}
}

.lb-1{font:700 1.25rem/1 var(--ui);letter-spacing:-.03em;}
.lb-2{font:600 1rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;}
.lb-3{font:500 1rem/1 var(--m);letter-spacing:.02em;}
.lb-4{font:700 1.06rem/1 var(--ui);letter-spacing:.02em;text-transform:uppercase;}
.lb-5{font:500 1.19rem/1 var(--ui);letter-spacing:-.01em;}
.lb-6{font:700 1.25rem/1 var(--ui);letter-spacing:-.02em;}
.lb-6 span{font-weight:300;}
.lb-7{font:300 1.31rem/1 var(--ui);letter-spacing:.04em;}
/* Die Logos liegen freigestellt vor — der weiße Grund ist aus den Dateien
   selbst entfernt, nicht per Mischmodus kaschiert. Das musste so sein: Die
   Leiste trägt eine Maske für den weichen Rand, und eine Maske kapselt das
   Mischen ab, sodass „multiply“ hier wirkungslos blieb.
   Grau und zurückgenommen, damit sechs Hausfarben die Zeile nicht
   zerreißen; beim Überfahren kommt die Farbe zurück. */
.slot img{height:100%;width:auto;max-width:11rem;object-fit:contain;
  filter:grayscale(1) contrast(1.05);opacity:.55;
  transition:opacity .3s var(--e),filter .3s var(--e);}
@media (hover:hover) and (pointer:fine){
  .slot img:hover{opacity:.95;filter:grayscale(0) contrast(1);}
}
.slot--img{height:clamp(2.6rem,4.4vw,3.4rem);}

/* ============ Beleg-Zeile in der Heropage ============
   Überlappende Köpfe plus eine Zahl. Die Ringe um die Bilder haben die Farbe
   des Hintergrunds, dadurch wirken sie ausgestanzt statt umrandet. */
.beleg{display:flex;align-items:center;gap:clamp(.8rem,1.6vw,1.1rem);
  margin-top:clamp(1.4rem,3vh,2.2rem);}
.koepfe{display:flex;flex:none;}
.koepfe img{width:clamp(2.1rem,4vw,2.6rem);height:clamp(2.1rem,4vw,2.6rem);
  border-radius:50%;object-fit:cover;object-position:50% 22%;
  border:2px solid var(--bg);
  box-shadow:0 4px 14px -6px rgba(0,0,0,.9);}
.koepfe img + img{margin-left:calc(-1 * clamp(.6rem,1.2vw,.8rem));}
.beleg p{font-size:clamp(.95rem,.92rem + .25vw,1.08rem);line-height:1.4;
  color:var(--dim);}
.beleg b{color:var(--white);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);}

/* ============ Leistungs-Unterseiten ============
   Kopf wie eine Heropage: Überschrift links über die volle Breite, Video
   rechts daneben.

   Wichtig: Kopfhöhe und Videogröße sind bewusst voneinander gelöst. Wäre das
   Video an die Kopfhöhe gebunden, würde es mitschrumpfen, sobald die
   Überschrift eine Zeile weniger braucht. Der Kopf hat deshalb eine
   Mindesthöhe, das Video eine eigene feste Größe.

   Das Video ist vollständig zu sehen: Der Kasten hat dasselbe Seitenverhältnis
   wie die Datei (3:4) und „contain“ passt es ein, statt es zu beschneiden.
   Der Verlauf löst es nach allen Seiten auf, damit keine Kante bleibt. */
.phead--video{position:relative;overflow:hidden;isolation:isolate;
  min-height:min(86vh,50rem);display:flex;align-items:center;
  /* Echtes Schwarz, damit das Video ohne Farbstich darauf sitzt. */
  background:#000000;border-bottom:0;}
.phead--video .in{position:relative;z-index:3;width:100%;
  max-width:var(--wrap);margin-inline:auto;}
.ph-txt{max-width:100%;}
.phead--video h1{max-width:30ch;position:relative;z-index:4;}
.phead--video .lead,.phead--video .cta{max-width:36rem;}

.ph-video{position:absolute;z-index:1;pointer-events:none;
  top:50%;right:clamp(0rem,2vw,2rem);transform:translateY(-50%);
  height:min(74vh,43rem);width:auto;aspect-ratio:3/4;
  /* Zwei Verläufe übereinander, sichtbar bleibt nur, wo beide decken.
     Eine runde Maske ist hier falsch: Ihr Radius erreicht die
     Durchsichtigkeit erst außerhalb des Kastens, an den Kanten stand sie
     noch bei rund 25 Prozent — das war der sichtbare Strich.
     Diese beiden erreichen an allen vier Rändern null. */
  -webkit-mask-image:
    linear-gradient(to right,
      rgba(0,0,0,0) 0%,rgba(0,0,0,.06) 6%,rgba(0,0,0,.24) 13%,rgba(0,0,0,.52) 21%,
      rgba(0,0,0,.78) 29%,rgba(0,0,0,.94) 37%,rgba(0,0,0,1) 45%,
      rgba(0,0,0,1) 55%,rgba(0,0,0,.94) 63%,rgba(0,0,0,.78) 71%,
      rgba(0,0,0,.52) 79%,rgba(0,0,0,.24) 87%,rgba(0,0,0,.06) 94%,rgba(0,0,0,0) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,rgba(0,0,0,.06) 6%,rgba(0,0,0,.24) 13%,rgba(0,0,0,.52) 21%,
      rgba(0,0,0,.78) 29%,rgba(0,0,0,.94) 37%,rgba(0,0,0,1) 45%,
      rgba(0,0,0,1) 55%,rgba(0,0,0,.94) 63%,rgba(0,0,0,.78) 71%,
      rgba(0,0,0,.52) 79%,rgba(0,0,0,.24) 87%,rgba(0,0,0,.06) 94%,rgba(0,0,0,0) 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,
      rgba(0,0,0,0) 0%,rgba(0,0,0,.06) 6%,rgba(0,0,0,.24) 13%,rgba(0,0,0,.52) 21%,
      rgba(0,0,0,.78) 29%,rgba(0,0,0,.94) 37%,rgba(0,0,0,1) 45%,
      rgba(0,0,0,1) 55%,rgba(0,0,0,.94) 63%,rgba(0,0,0,.78) 71%,
      rgba(0,0,0,.52) 79%,rgba(0,0,0,.24) 87%,rgba(0,0,0,.06) 94%,rgba(0,0,0,0) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,rgba(0,0,0,.06) 6%,rgba(0,0,0,.24) 13%,rgba(0,0,0,.52) 21%,
      rgba(0,0,0,.78) 29%,rgba(0,0,0,.94) 37%,rgba(0,0,0,1) 45%,
      rgba(0,0,0,1) 55%,rgba(0,0,0,.94) 63%,rgba(0,0,0,.78) 71%,
      rgba(0,0,0,.52) 79%,rgba(0,0,0,.24) 87%,rgba(0,0,0,.06) 94%,rgba(0,0,0,0) 100%);
  mask-composite:intersect;}
/* „lighten“ ersetzt zusätzlich alles, was dunkler als der Seitengrund ist,
   durch den Seitengrund. Damit verschwindet auch die leichte Aufhellung,
   die die Videos an ihren Rändern mitbringen. */
/* Die Videodateien bringen einen warmen Grundton mit — deshalb wirkte das
   Ganze golden. „grayscale“ nimmt ihn heraus, das Glas ist ohnehin silbern. */
.ph-video video,.ph-video img{display:block;width:100%;height:100%;object-fit:contain;
  mix-blend-mode:lighten;
  filter:grayscale(1) contrast(1.04);}
/* Ausnahme für Aufnahmen statt Glasobjekten: Die Glaszeichen leben von Form
   und Reflex, da stört Farbe. Ein Raum mit Menschen lebt vom Licht — den
   entfärbt man nicht. */
.ph-video--farbe video{filter:contrast(1.03) saturate(1.04);}

/* Schmaler: Video unter den Text, damit der Überschrift die Zeilenbreite bleibt */
@media (max-width:900px){
  .phead--video{min-height:auto;display:block;}
  .phead--video h1{max-width:20ch;}
  .ph-video{position:static;transform:none;
    width:min(72%,17rem);height:auto;aspect-ratio:3/4;
    margin:clamp(1.2rem,3vh,2rem) auto 0;}
}

.zurueck-link{display:block;width:fit-content;
  margin-bottom:clamp(1rem,2.4vh,1.6rem);
  color:var(--mute);font-size:.9rem;}
@media (hover:hover) and (pointer:fine){.zurueck-link:hover{color:var(--white);}}

/* Überschrift im Kopf: Silber mit festem Glanzband.
   Die Silbertöne sind aus dem Glasvideo gemessen und rein kühl gehalten —
   der Blauanteil liegt bei jeder Stufe über dem Rotanteil, also kein Braun.
   Der helle Streifen bei 47 bis 55 Prozent ist die Spiegelung. */
/* Der Silberverlauf auf den Video-Seitenköpfen ist mit entfallen —
   siehe .key weiter oben. */



/* ============ Beleg-Zeile in der Heropage ============
   Überlappende Köpfe plus eine Zahl. Die Ringe um die Bilder haben die Farbe
   des Hintergrunds, dadurch wirken sie ausgestanzt statt umrandet. */
.beleg{display:flex;align-items:center;gap:clamp(.8rem,1.6vw,1.1rem);
  margin-top:clamp(1.4rem,3vh,2.2rem);}
.koepfe{display:flex;flex:none;}
.koepfe img{width:clamp(2.1rem,4vw,2.6rem);height:clamp(2.1rem,4vw,2.6rem);
  border-radius:50%;object-fit:cover;object-position:50% 22%;
  border:2px solid var(--bg);
  box-shadow:0 4px 14px -6px rgba(0,0,0,.9);}
.koepfe img + img{margin-left:calc(-1 * clamp(.6rem,1.2vw,.8rem));}
.beleg p{font-size:clamp(.95rem,.92rem + .25vw,1.08rem);line-height:1.4;
  color:var(--dim);}
.beleg b{color:var(--white);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);}



/* Großes Bild, an allen vier Seiten auslaufend — kein Rahmen, keine Kante */
.lp-bild{max-width:56rem;margin-inline:auto;}
.lp-bild img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  mix-blend-mode:lighten;
  -webkit-mask-image:
    linear-gradient(to right,
      rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 8%,rgba(0,0,0,.78) 17%,rgba(0,0,0,.96) 26%,
      rgba(0,0,0,1) 36%,rgba(0,0,0,1) 64%,rgba(0,0,0,.96) 74%,rgba(0,0,0,.78) 83%,
      rgba(0,0,0,.35) 92%,rgba(0,0,0,0) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 8%,rgba(0,0,0,.78) 17%,rgba(0,0,0,.96) 26%,
      rgba(0,0,0,1) 36%,rgba(0,0,0,1) 64%,rgba(0,0,0,.96) 74%,rgba(0,0,0,.78) 83%,
      rgba(0,0,0,.35) 92%,rgba(0,0,0,0) 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,
      rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 8%,rgba(0,0,0,.78) 17%,rgba(0,0,0,.96) 26%,
      rgba(0,0,0,1) 36%,rgba(0,0,0,1) 64%,rgba(0,0,0,.96) 74%,rgba(0,0,0,.78) 83%,
      rgba(0,0,0,.35) 92%,rgba(0,0,0,0) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 8%,rgba(0,0,0,.78) 17%,rgba(0,0,0,.96) 26%,
      rgba(0,0,0,1) 36%,rgba(0,0,0,1) 64%,rgba(0,0,0,.96) 74%,rgba(0,0,0,.78) 83%,
      rgba(0,0,0,.35) 92%,rgba(0,0,0,0) 100%);
  mask-composite:intersect;}

/* ============ Leistungen: stehende Übersicht, laufende Einzelheiten ============
   Links bleibt die Liste beim Scrollen stehen und markiert, wo man ist.
   Rechts laufen die Einzelheiten durch. */
.lst-grid{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;}

.lst-nav{position:sticky;top:clamp(5.5rem,13vh,7.5rem);display:grid;gap:.1rem;}
.lst-link{display:flex;align-items:baseline;gap:.85rem;padding:.72rem .9rem .72rem 0;
  color:var(--faint);position:relative;
  transition:color .3s var(--e);}
.lst-link .n{font:500 .62rem/1.6 var(--m);letter-spacing:.16em;flex:none;
  color:inherit;opacity:.75;}
.lst-link .t{font-size:1.02rem;line-height:1.35;letter-spacing:-.01em;}
/* Marke am linken Rand — wächst mit, wenn der Abschnitt aktiv ist */
.lst-link::before{content:"";position:absolute;left:-1rem;top:50%;
  width:2px;height:0;margin-top:0;border-radius:2px;background:var(--accent);
  transform:translateY(-50%);
  transition:height .35s var(--e);}
.lst-link[aria-current="true"]{color:var(--white);}
.lst-link[aria-current="true"] .t{font-weight:600;}
.lst-link[aria-current="true"]::before{height:1.5rem;}
@media (hover:hover) and (pointer:fine){
  .lst-link:hover{color:var(--dim);}
}
.lst-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}

.lst-panels{display:grid;}
.lst-panel{display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(1.2rem,3vw,2.8rem);
  padding-block:clamp(2.2rem,6vh,3.6rem);
  border-top:1px solid var(--hair);scroll-margin-top:clamp(5rem,12vh,7rem);}
.lst-panel:first-child{border-top:0;padding-top:0;}
.lst-txt{grid-column:1;grid-row:1;min-width:0;}

/* Bild ohne Kante: derselbe Verlauf wie bei den Schrittbildern.
   Zwei Verläufe liegen übereinander, sichtbar bleibt nur, wo beide decken. */
/* Kein isolation:isolate mehr. Es machte aus dem Rahmen eine eigene Ebene,
   und „lighten" am Bild rechnete dann gegen den leeren Rahmen statt gegen das
   schwarze Band — der schwarze Bildkasten blieb als Rechteck stehen. Ohne die
   Ebene mischt das Bild gegen den echten Hintergrund, und sein Schwarz
   verschwindet vollständig. */
.lst-panel figure{grid-column:2;grid-row:1;margin:0;min-width:0;
  position:relative;}

/* Der Ring sitzt im linken Drittel auf halber Höhe. Dort liegt ein weicher
   Schein, der ruhig an- und abschwillt — das Bild selbst bleibt unverändert,
   nur das Licht darum atmet. */
.lst-panel figure::before{content:"";position:absolute;z-index:0;
  left:9%;top:50%;width:34%;aspect-ratio:1;transform:translateY(-50%);
  border-radius:50%;pointer-events:none;
  /* Neutrales Licht statt Bernstein. Vorher lagen hier zwei warme Töne
     (255,150,60 und 255,90,40); geblurrt und über der ganzen Fläche
     verteilt haben sie den schwarzen Grund goldstichig gemacht. Der Ring
     im Bild bringt seine Farben selbst mit — der Schein darum muss nur
     hell sein, nicht farbig. */
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.16) 0%, rgba(206,216,230,.09) 36%,
      rgba(160,176,200,.04) 60%, transparent 76%);
  filter:blur(16px);
  animation:ringschein 4.2s ease-in-out infinite;}
@keyframes ringschein{
  0%,100%{opacity:.4; transform:translateY(-50%) scale(.96);}
  50%    {opacity:.8; transform:translateY(-50%) scale(1.06);}
}
@media (prefers-reduced-motion:reduce){
  .lst-panel figure::before{animation:none;opacity:.75;}
}
/* Der Verlauf läuft nach allen vier Seiten aus. Ohne die rechte Flanke bleibt
   dort eine gerade Kante stehen — bei der Filmklappe war genau das der Strich,
   weil ihr Hintergrund eine Spur heller ist als die Seite.
   „lighten“ ersetzt zusätzlich alles, was dunkler als der Seitengrund ist,
   durch den Seitengrund. Damit verschwindet der Rest der Kante. */
.lst-panel figure img{display:block;width:86%;height:auto;margin-inline:auto;
  /* Der Bildgrund ist jetzt echtes Schwarz — beim Zuschneiden auf die Pille
     wurde alles außerhalb heruntergezogen. „lighten" ersetzt damit den
     gesamten Grund durch die Seite; es bleibt nur die Pille mit ihrem Ring.
     Deshalb braucht es hier keinen Verlauf mehr: Es gibt keine Kante, die
     man verstecken müsste. */
  position:relative;z-index:1;
  mix-blend-mode:lighten;}

/* Knopf und Textlink nebeneinander */
.lst-aktion{display:flex;flex-wrap:wrap;align-items:center;
  gap:.9rem 1.4rem;margin-top:clamp(1.2rem,2.6vh,1.7rem);}
.lst-aktion .btn{min-height:48px;padding:.65rem 1.4rem;font-size:.95rem;}
.lst-aktion .lst-cta{margin-top:0;}
.lst-panel .n{display:block;margin-bottom:.7rem;
  font:500 .62rem/1 var(--m);letter-spacing:.24em;color:#FFFFFF;}
.lst-panel h3{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);font-weight:600;
  letter-spacing:-.03em;line-height:1.12;color:var(--white);}
.lst-panel .claim{margin-top:.9rem;color:var(--white);font-weight:500;
  font-size:clamp(1.02rem,.98rem + .3vw,1.16rem);line-height:1.5;max-width:44ch;}
.lst-panel p:not(.claim){margin-top:.8rem;color:var(--mute);
  font-size:1rem;line-height:1.7;max-width:56ch;}

.hakenpunkte{list-style:none;margin:clamp(1.2rem,2.6vh,1.7rem) 0 0;padding:0;
  display:grid;gap:.6rem;max-width:46ch;
  border:1px solid var(--hair);border-radius:14px;
  padding:clamp(1rem,2vw,1.3rem);background:var(--surface);}
.hakenpunkte li{display:flex;align-items:flex-start;gap:.7rem;
  color:var(--dim);font-size:.96rem;line-height:1.5;}
.hk-d{flex:none;width:1.05rem;height:1.05rem;margin-top:.15rem;
  fill:none;stroke:var(--accent);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;}

.lst-cta{display:inline-block;color:var(--accent);
  font-size:.95rem;border-bottom:1px solid rgba(228,162,99,.35);padding-bottom:2px;}
@media (hover:hover) and (pointer:fine){
  .lst-cta:hover{border-bottom-color:var(--accent);}
}

/* ---------- Knopf mit Prismenrand ----------
   Weiße Fläche, dunkle Schrift, dazwischen ein dünner Farbring wie beim
   Abzeichen. Der Ring ist ein Quadrat, das größer als der Knopf ist; nur
   dadurch wandern die Farben beim Drehen rundherum, statt bloß heller und
   dunkler zu werden. Die dunkle Innenfläche verdeckt alles bis auf 1,8 px.

   Im Ruhezustand steht der Ring still. Er dreht sich erst, wenn jemand mit
   der Maus daraufgeht — ein Knopf, der dauernd zappelt, zieht Aufmerksamkeit
   von der Überschrift ab. */
.btn--ring{position:relative;isolation:isolate;overflow:hidden;border:0;
  background:transparent;color:#0B0B0B;font-weight:600;}
.btn--ring::before{content:"";position:absolute;z-index:-2;
  left:50%;top:50%;width:220%;aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(0deg);
  background:conic-gradient(from 0deg,
    #1D4ED8 0%, #6D28D9 15%, #A21CAF 30%, #BE123C 45%,
    #C2410C 60%, #0E7490 80%, #1D4ED8 100%);}
/* Maße ausgeschrieben und die Werte des Glanzstreifens zurückgesetzt: sonst
   schiebt dessen Animation die Innenfläche aus dem Knopf heraus. */
.btn--ring::after{content:"";position:absolute;z-index:-1;
  left:1.8px;top:1.8px;right:auto;bottom:auto;
  width:calc(100% - 3.6px);height:calc(100% - 3.6px);
  transform:none;animation:none;
  border-radius:inherit;background:#FFFFFF;}
@keyframes knopfring{to{transform:translate(-50%,-50%) rotate(360deg);}}
@media (hover:hover) and (pointer:fine){
  .btn--ring::before{animation:knopfring 3s linear infinite;
    animation-play-state:paused;}
  .btn--ring:hover::before{animation-play-state:running;}
  .btn--ring{transition:box-shadow .35s var(--e);}
  .btn--ring:hover{box-shadow:0 0 30px -10px rgba(120,170,255,.55),
                              0 0 34px -12px rgba(255,140,60,.5);}
}

/* Schmal: Die Übersicht wird zur Leiste über den Einzelheiten */
@media (max-width:900px){
  .lst-grid{grid-template-columns:minmax(0,1fr);gap:1.4rem;}
  .lst-panel h3{font-size:clamp(1.3rem,1.1rem + 1.1vw,1.8rem);}
  /* Unter der Kopfleiste einrasten, nicht dahinter verschwinden.
     Die Kopfleiste ist an dieser Breite 67 px hoch. */
  .lst-nav{position:sticky;top:clamp(3.9rem,10vh,4.6rem);z-index:5;
    display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;
    padding:.7rem 0;margin-inline:calc(-1 * var(--pad));
    padding-inline:var(--pad);
    background:linear-gradient(180deg,var(--bg) 72%,rgba(5,5,5,0));}
  .lst-nav::-webkit-scrollbar{display:none;}
  .lst-link{flex:none;padding:.5rem .9rem;border-radius:100px;
    border:1px solid var(--hair);white-space:nowrap;}
  .lst-link::before{display:none;}
  .lst-link .t{font-size:.9rem;}
  .lst-link[aria-current="true"]{border-color:var(--accent);
    background:rgba(228,162,99,.12);}
  /* Das Bild bleibt auch hier neben dem Text — nur die Spalte wird schmaler. */
  .lst-panel{scroll-margin-top:9.5rem;
    grid-template-columns:minmax(0,1fr) minmax(0,.55fr);gap:.9rem;}
}
/* Handy: Bildspalte so schmal wie vertretbar, damit dem Text Zeilenbreite
   bleibt. Enger als hier wird der Fließtext unlesbar. */
/* Handy: Bild unter den Text. Nebeneinander bliebe für den Fließtext nur
   rund 31 Zeichen Zeilenbreite — darunter wird Lesen anstrengend. */
@media (max-width:560px){
  .lst-panel{grid-template-columns:minmax(0,1fr);gap:1.1rem;}
  .lst-txt{grid-column:1;grid-row:1;}
  /* Das Abzeichen steht unter dem Text, aber klein und mittig — nicht als
     Banner über die ganze Breite. Der frühere Verlauf nach oben kann weg:
     Der Bildgrund ist echtes Schwarz, es gibt keine Kante zu verstecken. */
  .lst-panel figure{grid-column:1;grid-row:2;}
  .lst-panel figure img{width:64%;max-width:19rem;}
  .lst-panel figure::before{left:11%;width:22%;}
  .lst-panel h3{font-size:1.5rem;}
  .lst-panel .claim{font-size:1.06rem;}
  .lst-panel p:not(.claim){font-size:.98rem;line-height:1.66;}
  .hakenpunkte{padding:1rem;gap:.55rem;}
  .hakenpunkte li{font-size:.93rem;}
  .lst-aktion{gap:.8rem;}
  .lst-aktion .btn{width:100%;justify-content:center;}
}

/* Zeile unter dem Team: Hinweis auf die übrigen Kolleginnen und Kollegen */
.teamplus{margin-top:clamp(1.2rem,3vh,1.9rem);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.1rem;
  color:var(--mute);font-size:.95rem;}
.teamplus b{color:var(--white);font-size:1.15rem;font-weight:600;letter-spacing:-.02em;}
.teamplus a{color:var(--accent);border-bottom:1px solid rgba(228,162,99,.4);
  padding-bottom:1px;}
@media (hover:hover) and (pointer:fine){
  .teamplus a:hover{border-bottom-color:var(--accent);}
}

/* ============ Kopf der Unterseiten ============ */
.phead{position:relative;background:var(--bg-2);border-bottom:1px solid var(--hair);}
/* Zwei Klassen, damit diese Regel die allgemeine .phead-Regel schlägt —
   sonst stünde der Videokopf auf #0A0A0A statt auf Schwarz. */
.phead.phead--video{background:#000000;border-bottom:0;}
.phead .in{max-width:var(--wrap);margin-inline:auto;padding:clamp(3rem,9vh,6rem) var(--pad) clamp(2.5rem,7vh,4.5rem);}
.phead h1{font-size:clamp(2rem,1.1rem + 2.9vw,3.4rem);max-width:18ch;}
.phead .lead{margin-top:1.2rem;max-width:56ch;color:var(--dim);font-size:clamp(1rem,.97rem + .3vw,1.14rem);}
.phead .cta{margin-top:2rem;}

/* =========================================================
   Bildkopf mit Foto (.phead--foto)
   Aufbau wie der Videokopf auf „Für Arbeitgeber": ein dunkler Kasten,
   helle Schrift darauf. Der Block mit den Farbwerten kippt den ganzen
   Kopf — jedes Kind bezieht seine Farbe aus diesen Tokens, deshalb
   reicht es, sie hier einmal zu setzen.

   Bewusst NICHT „phead--video" wiederverwendet: an dieser Klasse hängen
   über „body:has(...)" ein silberner Akzent und ein anderer Fußbereich.
   Beides gehört hier nicht hin.

   Die Höhe ist großzügig gewählt. Das Foto ist quadratisch, der Kopf ein
   breites Band — die Skalierung richtet sich also nach der Breite, und
   je flacher das Band, desto weniger vom Bild bleibt übrig. Bei 620 px
   waren nur 43 % der Bildhöhe zu sehen und die Gruppe war auf Brusthöhe
   abgeschnitten; bei 780 px sind es 54 % und die Sitzgruppe ist ganz da.
   ========================================================= */
.phead.phead--foto{
  --white:#FFFFFF;
  --dim:rgba(255,255,255,.76);
  --mute:rgba(255,255,255,.62);
  --faint:rgba(255,255,255,.54);
  --hair:rgba(255,255,255,.14);
  --hair-2:rgba(255,255,255,.24);
  --surface:rgba(255,255,255,.06);
  /* Der Ton des Sonnenlichts im Bild — gemessen, nicht geraten. */
  --accent:#E9B274;
  position:relative;overflow:hidden;isolation:isolate;
  color:#FFFFFF;background:#0A0708;border-bottom:0;}

.phead--foto .foto{position:absolute;inset:0;z-index:0;}
/* 18 %: Bei mittigem Zuschnitt wird oben der Kopf des Mannes
   abgeschnitten. So beginnt der sichtbare Ausschnitt weit genug über
   dem Haaransatz. */
.phead--foto .foto img,
.phead--foto .foto video{display:block;width:100%;height:100%;
  object-fit:cover;object-position:50% 18%;}
/* Video sitzt anders im Bild als das Foto — dort war 18 % nötig, damit
   oben kein Kopf abgeschnitten wird, hier ist die Mitte richtig. */
.phead--foto .foto video{object-position:50% 50%;}
/* Von links nach rechts auslaufend: dicht, wo der Text steht, offen
   dort, wo das Bild wirken soll. Die Werte sind ausgerechnet — Weiß
   steht im Textbereich damit über 4,5:1. */
.phead--foto .foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(10,7,8,.88) 0%, rgba(10,7,8,.78) 40%,
    rgba(10,7,8,.34) 72%, rgba(10,7,8,.10) 100%);}

.phead--foto .in{position:relative;z-index:2;
  min-height:min(86vh,780px);
  display:flex;flex-direction:column;justify-content:center;}
/* Die Textspalte bleibt bewusst schmal. Bei 52 Zeichen lief der
   Fließtext auf mittelbreiten Schirmen bis in die helle Bildmitte —
   dort stand er nur noch bei 3,7:1. Schmaler ist hier die bessere
   Lösung als dunkler: Ein stärkerer Schleier hätte genau die Personen
   verdeckt, wegen derer man das Foto nimmt. */
.phead--foto h1{max-width:20ch;}
.phead--foto .lead{max-width:44ch;}
.phead--foto .btn--fill{background:#FFFFFF;color:#0E0B0C;}
.phead--foto .btn--line{background:transparent;color:#FFFFFF;
  border-color:rgba(255,255,255,.30);}
@media (hover:hover) and (pointer:fine){
  .phead--foto .btn--fill:hover{background:#F1EDEA;}
  .phead--foto .btn--line:hover{background:rgba(255,255,255,.08);
    border-color:#FFFFFF;}
}
/* Die Kante des dunklen Kopfes ist die Trennung — eine Haarlinie
   darunter wäre eine zweite. */
.phead--foto + .sec{border-top:0;}

@media (max-width:900px){
  /* Das Foto ist quadratisch, ein Handy hochkant. Füllt man damit die
     ganze Fläche, bleibt von den drei Personen genau eine übrig, die
     anderen werden links und rechts weggeschnitten. Deshalb sitzt das
     Bild hier als Band über die volle Breite oben, in seiner eigenen
     Form, und der Text steht darunter auf dunklem Grund. */
  .phead--foto .foto{inset:0 0 auto 0;height:66vw;}
  .phead--foto .foto img{object-position:50% 30%;}
  .phead--foto .foto video{object-position:50% 50%;}
  .phead--foto .foto::after{
    background:linear-gradient(178deg,
      rgba(10,7,8,0) 34%, rgba(10,7,8,.30) 62%,
      rgba(10,7,8,.78) 86%, rgba(10,7,8,1) 100%);}
  /* Der Text beginnt knapp UNTER dem Bildband. Ragte er hinein, stand
     die kleine Kennzeichnung auf der hellen Gardine — gemessen 2,5:1. */
  .phead--foto .in{justify-content:flex-start;min-height:0;
    padding-top:calc(66vw + 2rem);}
  .phead--foto h1{max-width:18ch;}
}


/* ============ Abschnitte ============ */
.sec{position:relative;z-index:3;background:var(--bg);
  padding:clamp(3.5rem,9vh,7rem) 0;border-top:1px solid var(--hair);}
.sec--alt{background:var(--bg-2);}
.in{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);}
/* Abschnittsüberschriften sind kleiner geworden: von bis zu 2,7 rem auf
   2,05 rem, der Abstand darunter von 3,2 auf 2,2 rem. Die alte Größe war
   auf jeder zweiten Seite dieselbe Geste und hat vor allem Platz belegt —
   die Inhalte darunter tragen sich selbst. */
.sec h2{font-size:clamp(1.45rem,1.05rem + 1.25vw,2.05rem);max-width:24ch;
  letter-spacing:-.03em;line-height:1.14;}
.sec .lead{margin-top:.85rem;max-width:56ch;color:var(--dim);
  font-size:clamp(.98rem,.95rem + .2vw,1.06rem);}
.sec-head{margin-bottom:clamp(1.5rem,3.4vh,2.2rem);}

/* Ohne sichtbare Überschrift: die Kennzeichnung rückt näher an den Text,
   und die Einleitung wird zur tragenden Zeile — etwas größer, etwas
   dunkler, aber immer noch kein Schrei. */
.sec-head--knapp{margin-bottom:clamp(1.4rem,3.2vh,2rem);}
.sec-head--knapp .lead{margin-top:.7rem;color:var(--white);
  font-size:clamp(1.05rem,1rem + .38vw,1.25rem);line-height:1.5;max-width:52ch;}

/* Raster */
.grid{display:grid;gap:clamp(.8rem,1.6vw,1.2rem);}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1000px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .g-3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr);}}

/* Karte */
.card{background:var(--surface);border:1px solid var(--hair);border-radius:16px;
  padding:clamp(1.2rem,2vw,1.7rem);display:flex;flex-direction:column;gap:.6rem;}
.card h3{font-size:1.14rem;font-weight:600;}
.card p{color:var(--mute);font-size:.95rem;line-height:1.55;}
.card .num{font:500 .62rem/1 var(--m);letter-spacing:.2em;color:var(--accent);}

/* Nummerierte Schritte */
.steps{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--hair);}
.step{display:grid;grid-template-columns:4.5rem 1fr 8rem;gap:1.2rem;align-items:start;
  padding:clamp(1.3rem,3vh,2rem) 0;border-bottom:1px solid var(--hair);}
.step .n{font:500 .68rem/1 var(--m);letter-spacing:.16em;color:var(--accent);padding-top:.35rem;}
.step h3{font-size:1.16rem;font-weight:600;margin-bottom:.5rem;}
.step p{color:var(--mute);font-size:.96rem;max-width:62ch;}
.step .when{font:500 .62rem/1.5 var(--m);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);text-align:right;padding-top:.35rem;}
@media (max-width:800px){
  .step{grid-template-columns:3.2rem 1fr;}
  .step .when{grid-column:2;text-align:left;padding-top:0;}
}

/* Liste mit Zeilen */
.rows{border-top:1px solid var(--hair);}
.row{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.15rem 0;border-bottom:1px solid var(--hair);transition:padding-left .25s var(--e);}
.row b{font-weight:500;font-size:1.05rem;}
.row span{font:500 .62rem/1.5 var(--m);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}
@media (hover:hover) and (pointer:fine){
  a.row:hover{padding-left:.6rem;}
  a.row:hover b{color:var(--accent);}
}
@media (max-width:640px){
  .row{flex-direction:column;align-items:flex-start;gap:.35rem;}
}

/* Fachbereiche */
.fields{display:grid;gap:clamp(.8rem,1.6vw,1.2rem);grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:980px){.fields{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:620px){.fields{grid-template-columns:minmax(0,1fr);}}
.field{background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:clamp(1.2rem,2vw,1.6rem);}
.field .num{font:500 .62rem/1 var(--m);letter-spacing:.2em;color:var(--accent);}
.field h3{margin:.7rem 0 .5rem;font-size:1.1rem;font-weight:600;}
.field p{color:var(--mute);font-size:.92rem;line-height:1.5;}
.field ul{margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:.35rem .7rem;font-size:.85rem;color:var(--faint);}
.field li{white-space:nowrap;}

/* ---------- Fachbereiche als Band: Bild links, Liste rechts ----------
   Das Bild sitzt in der linken Spalte und bleibt beim Scrollen stehen,
   während rechts die sechs Bereiche durchlaufen.

   Damit „sticky" hier überhaupt wandern kann, muss die Rasterzeile höher
   sein als das Bildfeld selbst. Genau das leistet „align-items:start":
   die Zeile behält die Höhe der Listenspalte, das Bildfeld schrumpft auf
   seine eigene Höhe und hat dadurch Weg zum Wandern. Ohne diese Zeile
   würde beides gleich hoch — und „sticky" täte gar nichts. */
/* Drei Spalten statt zwei — und das ist kein Umweg, sondern der einzige
   Weg zu exakt gleich großen Bildern. Das Über-uns-Raster darüber läuft
   auf „1fr 1fr .92fr" mit demselben Zwischenraum. Dieselben Anteile in
   umgekehrter Folge ergeben zwangsläufig dieselbe Spaltenbreite, egal wie
   breit das Fenster ist. Die Liste greift über die beiden rechten. */
.fb{display:grid;align-items:start;
  grid-template-columns:minmax(0,.92fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(.7rem,1.5vw,1.1rem);}
.fb-liste{grid-column:2 / -1;min-width:0;}

/* 2:3 ist das Seitenverhältnis der Vorlage. Bewusst nicht 3:4 — sonst
   schnitte der Rahmen oben und unten etwas vom Tisch ab. */
/* Klebt jetzt die ganze linke Spalte, nicht nur das Bild — sonst bliebe
   die Kennzeichnung darüber beim Scrollen zurück. */
.fb-links{position:sticky;top:clamp(4.6rem,11vh,6.4rem);
  display:grid;gap:.8rem;min-width:0;}
.fb-links .eyebrow{display:block;}
/* „position:relative" ist hier keine Kosmetik, sondern nötig: Die
   Beschriftung liegt absolut. Ein Kasten mit „overflow:hidden" beschneidet
   absolut gesetzte Nachfahren nur, wenn er selbst positioniert ist — sonst
   hängen sie am nächsten positionierten Vorfahren und laufen über die runde
   Ecke hinaus. Seit das Kleben von hier auf die Spalte gewandert ist, war
   das Feld statisch, und die beiden unteren Ecken standen eckig. */
.fb-bild{margin:0;position:relative;
  aspect-ratio:2/3;border-radius:24px;overflow:hidden;background:var(--bg-2);}
.fb-bild img{display:block;width:100%;height:100%;object-fit:cover;}
.fb-bild figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:clamp(2.6rem,7vh,4rem) clamp(1.1rem,2vw,1.5rem) clamp(1rem,2vw,1.35rem);
  color:#FFFFFF;font-size:.94rem;line-height:1.4;letter-spacing:-.01em;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.62) 100%);}


/* Die Liste selbst: keine Kästen, keine Flächen, keine Pillen. Nur die
   Nummer, der Titel, ein Satz und darunter die Rollen in einer ruhigen
   Zeile. Getrennt wird ausschließlich durch eine Haarlinie. */
.bl{list-style:none;padding:0;margin:0;}
.bl > li{display:grid;grid-template-columns:3rem minmax(0,1fr);
  gap:0 .4rem;padding:clamp(1.1rem,2.2vh,1.5rem) 0;
  border-top:1px solid var(--hair);}
.bl > li:first-child{border-top:0;padding-top:0;}
.bl-n{font:500 .62rem/1 var(--m);letter-spacing:.2em;color:var(--accent);
  padding-top:.35rem;}
.bl h3{font-size:1.12rem;font-weight:600;letter-spacing:-.015em;margin:0 0 .35rem;}
.bl p{color:var(--mute);font-size:.95rem;line-height:1.55;}
.bl-rollen{margin-top:.5rem;color:var(--faint);font-size:.88rem;line-height:1.6;}

/* Der Abschluss ist eine Zeile, kein Kasten — sonst käme genau die Fläche
   zurück, die aus der Liste heraus soll. */
.fb-schluss{margin-top:clamp(1.6rem,3.4vh,2.4rem);
  padding-top:clamp(1.2rem,2.4vh,1.6rem);border-top:1px solid var(--hair-2);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem 1.6rem;}
.fb-schluss p{flex:1 1 20rem;min-width:0;margin:0;
  color:var(--mute);font-size:.95rem;line-height:1.55;}
.fb-schluss p b{color:var(--white);font-weight:600;}
.fb-schluss .btn{flex:none;min-height:48px;}

/* Umbruch bei 1000 px, nicht bei 860 — das ist genau die Breite, bei der
   auch das Über-uns-Band einspaltig wird. Beide Bänder wechseln dadurch im
   selben Moment und zeigen ihr Bild im selben Format. Wären es zwei
   verschiedene Punkte, sähen die beiden auf dem Tablet unterschiedlich aus,
   und genau das sollte hier weg. */
@media (max-width:1000px){
  .fb{grid-template-columns:minmax(0,1fr);gap:clamp(1.4rem,3.5vh,2.2rem);}
  /* Einspaltig gibt es keine zweite Spalte mehr, über die die Liste greifen
     könnte — ohne diese Zeile bliebe sie auf eine leere Spur gesetzt. */
  .fb-liste{grid-column:auto;}
  .fb-links{position:static;}
  .fb-bild{aspect-ratio:16/9;}
}
@media (max-width:620px){
  .fb-bild{aspect-ratio:4/3;}
  .bl > li{grid-template-columns:minmax(0,1fr);gap:.35rem;}
  .bl-n{padding-top:0;}
  .fb-schluss{flex-direction:column;align-items:stretch;}
  .fb-schluss p{flex:0 1 auto;}
  .fb-schluss .btn{width:100%;justify-content:center;}
}

/* Kennzahlen */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.2rem);}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));}}
.stat{background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:clamp(1.1rem,2vw,1.5rem);}
.stat b{display:block;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem);font-weight:600;letter-spacing:-.03em;}
.stat span{display:block;margin-top:.4rem;color:var(--mute);font-size:.9rem;line-height:1.45;}
.todo{margin-top:1rem;color:var(--faint);font-size:.85rem;max-width:60ch;}

/* ---------- Kennzahlen, gefüllt ----------
   Die umrandete Fassung oben bleibt, wo sie steht. Diese hier ist die
   laute Variante: schwarze Flächen statt Umrandungen, und genau eine
   davon in Gold. Nur eine — zwei goldene Flächen heben sich gegenseitig
   auf, dann trägt keine mehr den Blick.

   Gemessene Kontraste (WCAG, Text gegen Fläche):
     Schwarze Kachel   #FFFFFF auf #131013  → 18,9:1
     Steinkachel       #FFFFFF auf Bild + Schleier → 6,0:1 im ungünstigsten Fall
   Alle über 4,5:1, also auch für die kleine Beschriftung tragfähig. */
.stats--voll{--kachel:#131013;}
.stats--voll .stat{background:var(--kachel);
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;padding:clamp(1.25rem,2.2vw,1.7rem);
  display:flex;flex-direction:column;justify-content:space-between;
  gap:.9rem;min-height:clamp(8.5rem,17vh,11rem);
  position:relative;overflow:hidden;}
/* Ein sehr flacher Lichtstreif über der oberen Kante — sonst wirken vier
   gleich schwarze Rechtecke wie Löcher im Blatt. */
.stats--voll .stat::after{content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,rgba(255,255,255,.20) 50%,rgba(255,255,255,0) 100%);}
.stats--voll .stat b{color:#FFFFFF;
  font-size:clamp(2rem,1.3rem + 2.4vw,3.1rem);font-weight:600;
  letter-spacing:-.04em;line-height:1;}
/* Die Einheit steht kleiner und leichter neben der Zahl, damit „48" trägt
   und „Stunden" nur erklärt. */
.stats--voll .stat b i{font-style:normal;font-size:.4em;font-weight:500;
  letter-spacing:-.01em;color:rgba(255,255,255,.66);}
.stats--voll .stat span{margin-top:0;color:rgba(255,255,255,.7);
  font-size:.92rem;line-height:1.45;}

/* Die erste Kachel trägt statt einer Farbfläche eine Wand aus Stein.
   Zuerst stand hier Gold, danach das Terrakotta der Seite — beides zog zu
   viel Aufmerksamkeit auf die Farbe statt auf die Zahl. Der Stein hebt die
   Kachel über die Textur ab, nicht über den Farbton.

   Über dem Bild liegt ein dunkler Schleier. Ohne ihn stünde Weiß über den
   hellen Diagonalen bei etwa 1,8:1 — unlesbar. Nachgerechnet über jedes
   Pixel der Vorlage: das hellste ist rgb(207,208,210); unter dem
   schwächsten Punkt des Schleiers (.55) bleibt rgb(99,99,101), Weiß darauf
   6,0:1, die Beschriftung mit 86 % Deckung 4,9:1. Unter dem stärksten
   Punkt (.86) sind es 15,1:1. Beide Werte über 4,5:1 — auch im
   ungünstigsten Ausschnitt, den das Bild überhaupt zeigen kann. */
.stats--voll .stat--marke{border-color:transparent;
  background-color:#0E0E10;
  background-image:
    linear-gradient(146deg,rgba(10,10,12,.55) 0%,rgba(10,10,12,.74) 58%,rgba(10,10,12,.86) 100%),
    url("img/marmor-kachel.jpg");
  background-size:cover, cover;
  background-position:center, 30% 40%;
  background-repeat:no-repeat, no-repeat;}
.stats--voll .stat--marke::after{background:linear-gradient(90deg,
  rgba(255,255,255,0) 0%,rgba(255,255,255,.34) 50%,rgba(255,255,255,0) 100%);}
.stats--voll .stat--marke b{color:#FFFFFF;}
.stats--voll .stat--marke b i{color:rgba(255,255,255,.7);}
.stats--voll .stat--marke span{color:rgba(255,255,255,.86);}

@media (max-width:900px){
  .stats--voll .stat{min-height:0;}
}

/* ---------- Über uns: Aspekte links, ein Bild rechts ----------
   Bewusst nur ein Bild. Drei nebeneinander waren Dekoration; eines mit
   Format ist eine Aussage — und daneben ist Platz für den Inhalt.

   Die Karten liegen über „display:contents" unmittelbar im Raster. Ohne
   das bräuchte die linke Seite ein eigenes, verschachteltes Raster, und
   das Bild rechts könnte nicht über beide Kartenreihen reichen. */
.ub{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(.7rem,1.5vw,1.1rem);}
.ub-karten{display:contents;}
.ub-karte{background:var(--surface);border:1px solid var(--hair);
  border-radius:16px;padding:clamp(1.15rem,2vw,1.6rem);min-width:0;
  transition:transform .45s var(--e),border-color .45s var(--e),
             box-shadow .45s var(--e);}
.ub-karte h3{font-size:1.08rem;font-weight:600;letter-spacing:-.015em;
  margin-bottom:.55rem;}
.ub-karte p{color:var(--mute);font-size:.92rem;line-height:1.55;}
@media (hover:hover) and (pointer:fine){
  .ub-karte:hover{transform:translateY(-4px);border-color:var(--hair-2);
    box-shadow:0 24px 46px -30px rgba(0,0,0,.25);}
  .ub-karte--voll:hover{border-color:transparent;}
}

/* Die erste Karte ist gefüllt und trägt den Knopf — dasselbe Mittel wie
   bei den Fachbereichen, damit beide Bänder als ein System lesbar sind. */
.ub-karte--voll{background:#141013;border-color:transparent;
  display:flex;flex-direction:column;justify-content:space-between;gap:1.2rem;}
.ub-karte--voll h3{color:#FFFFFF;}
.ub-karte--voll p{color:rgba(255,255,255,.72);}
.ub-karte--voll .btn--fill{background:#FFFFFF;color:#141013;
  border-color:transparent;min-height:48px;align-self:flex-start;}
@media (hover:hover) and (pointer:fine){
  .ub-karte--voll .btn--fill:hover{background:#EFE9E7;}
}

.ub-bild{grid-column:3;grid-row:1 / span 2;margin:0;
  border-radius:24px;overflow:hidden;background:var(--bg-2);min-height:22rem;}
.ub-bild img{display:block;width:100%;height:100%;object-fit:cover;}

@media (max-width:1000px){
  /* Zwei Spalten Karten, das Bild rutscht darunter und legt sich quer.
     Hochkant über die volle Breite wäre es ein Turm. */
  .ub{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ub-bild{grid-column:1 / -1;grid-row:auto;min-height:0;aspect-ratio:16/9;}
}
@media (max-width:620px){
  .ub{grid-template-columns:minmax(0,1fr);}
  .ub-bild{aspect-ratio:4/3;}
  .ub-karte--voll .btn--fill{align-self:stretch;justify-content:center;}
}

/* Team */
/* Drei Spalten: acht Gesichter plus die Kachel für den freien Platz
   ergeben neun — das geht in drei Reihen glatt auf. Bei vier Spalten
   blieb die neunte Kachel allein in der dritten Reihe stehen. */
/* Begrenzt, nicht über die volle Inhaltsbreite. Bei drei Spalten über
   1328 px wäre jede Kachel 430 px breit — Portraits in dieser Größe
   drängen sich vor den Text daneben. Mit der Deckelung liegen sie bei
   rund 310 px, also dort, wo sie vorher bei vier Spalten schon waren. */
/* Drei Spalten, gedeckelt und mittig im Inhalt.

   Neun Kacheln — acht Portraits und die Mehr-Kachel — ergeben damit drei
   volle Reihen, ohne Rest. Die Deckelung hält die Bilder auf 307 px;
   ohne sie werden sie über die ganze Breite 430 px groß.

   Der Abschnittskopf darüber bleibt bewusst linksbündig am Inhaltsrand,
   auf einer Linie mit „Unser Anspruch" und allen anderen Überschriften
   der Seite. Nur das Kachelraster sitzt mittig. */
.team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.8rem,1.6vw,1.2rem);
  max-width:60rem;margin-inline:auto;}

@media (max-width:900px){.team{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.team{grid-template-columns:minmax(0,1fr);}}
.person figure{margin:0;border-radius:16px;overflow:hidden;background:var(--bg-2);aspect-ratio:4/5;}
.person img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25) contrast(1.03);}
.person b{display:block;margin-top:.85rem;font-weight:500;}
.person span{display:block;color:var(--faint);font-size:.88rem;}

/* ---------- Kachel ohne Foto ----------
   Für Kolleginnen und Kollegen, von denen noch kein Bild vorliegt. Ein
   leerer Kasten sähe nach Ladefehler aus, ein fremdes Symbolbild wäre
   gelogen — also die Initialen auf getönter Fläche. Maße und Radius sind
   dieselben wie bei den Portraits, damit die Reihe nicht auseinanderfällt.

   Sobald ein Foto da ist: <figure> gegen dasselbe <img> wie bei den
   anderen tauschen und „person--offen" aus der Klassenliste streichen —
   sonst ist nichts zu tun. */
.person--offen figure{display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--hair);}
.person--offen .kuerzel{
  font:500 clamp(1.5rem,1.1rem + 1.5vw,2.1rem)/1 var(--display);
  letter-spacing:.06em;color:var(--faint);}

/* =========================================================
   Vierer-Bildreihe mit Beschriftung (.vier)
   Hochformate nebeneinander, jedes mit einer Zeile darunter, die sagt,
   worum es geht. Ein festes Format 3:4 für alle vier — die Vorlagen
   kommen in zwei verschiedenen Seitenverhältnissen, und ohne den festen
   Rahmen stünden sie ungleich hoch nebeneinander.
   ========================================================= */
.vier{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.8rem,1.6vw,1.2rem);
  margin-top:clamp(1.8rem,3.6vh,2.6rem);}
.vier figure{margin:0;min-width:0;}
.vier .rahmen{position:relative;aspect-ratio:3/4;border-radius:16px;
  overflow:hidden;background:var(--bg-2);}
.vier img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;}
.vier figcaption{margin-top:.85rem;}
.vier figcaption b{display:block;font-size:1rem;font-weight:600;
  letter-spacing:-.015em;}
.vier figcaption span{display:block;margin-top:.25rem;color:var(--mute);
  font-size:.9rem;line-height:1.5;}

@media (max-width:900px){.vier{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.vier{grid-template-columns:minmax(0,1fr);}
  .vier .rahmen{aspect-ratio:4/3;}}

/* Bilderreihe */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.2rem);}
@media (max-width:760px){.shots{grid-template-columns:repeat(2,minmax(0,1fr));}
  .shots figure:last-child{grid-column:span 2;}}
.shots figure{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--bg-2);}
.shots img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2);}

/* =========================================================
   Benefits (.bene)
   Keine Kästen. Oben die vier Bilder als Beleg, darunter das ganze
   Paket als Stichpunktliste in drei Spalten.

   Jeder Punkt trägt ein kleines Strichzeichen. Die liegen als
   <symbol> einmal im Quelltext und werden per <use> geholt — so steht
   jede Form genau einmal in der Datei, egal wie oft sie vorkommt.
   Bewusst Striche und keine Emojis: Emojis rendern auf jedem System
   anders, tragen fremde Farben herein und sehen auf einer Karriereseite
   nach Chat aus.
   ========================================================= */
.bene{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.8rem,3.4vh,2.6rem) clamp(1.4rem,3vw,2.4rem);
  margin-top:clamp(1.8rem,3.6vh,2.6rem);}
.bene-gruppe{min-width:0;}
.bene-gruppe h3{font:500 .62rem/1 var(--m);letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin-bottom:1.05rem;}
.bene-gruppe ul{margin:0;padding:0;}
.bene-gruppe li{display:flex;gap:.7rem;align-items:flex-start;
  margin-top:.8rem;color:var(--dim);font-size:.95rem;line-height:1.5;}
.bene-gruppe li:first-child{margin-top:0;}

.bene-i{flex:none;width:1.15rem;height:1.15rem;margin-top:.15rem;
  fill:none;stroke:var(--accent);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;}

@media (max-width:900px){
  .bene{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:560px){
  .bene{grid-template-columns:minmax(0,1fr);}
}

/* =========================================================
   Bewerbungsweg (.weg4)
   Vorher eine Liste mit Haarlinien dazwischen — vier gleich aussehende
   Zeilen, an denen nichts zeigte, dass sie aufeinander folgen. Jetzt
   liegen die vier Schritte auf einer Schiene: Kreis, Linie, Haken,
   nächster Kreis. Die Richtung ist damit gezeichnet, nicht behauptet.

   Auf schmalen Schirmen kippt dieselbe Schiene um 90 Grad und läuft
   senkrecht am linken Rand herunter — der Haken zeigt dann nach unten.
   ========================================================= */
.weg4{--wg:clamp(1.2rem,2.6vw,2.2rem);
  list-style:none;margin:clamp(2rem,4.5vh,3rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--wg);}
.weg4 li{position:relative;min-width:0;}

.weg4-kreis{position:relative;z-index:2;
  display:grid;place-items:center;width:2.8rem;height:2.8rem;
  border-radius:50%;border:1px solid var(--hair-2);background:var(--surface);}
.weg4-kreis svg{width:1.25rem;height:1.25rem;fill:none;stroke:var(--accent);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}

/* Die Verbindung zum nächsten Schritt. Sie gehört zum vorherigen
   Element, deshalb hat der letzte Schritt keine. */
.weg4 li:not(:last-child)::after{content:"";position:absolute;
  top:1.4rem;left:3.2rem;right:calc(-1 * var(--wg) - 1px);
  height:1px;background:var(--hair-2);}
.weg4 li:not(:last-child)::before{content:"";position:absolute;z-index:2;
  top:1.4rem;right:calc(-1 * var(--wg) - 1px);width:6px;height:6px;
  margin-top:-3.4px;
  border-top:1.5px solid var(--accent);border-right:1.5px solid var(--accent);
  transform:translateX(-2px) rotate(45deg);}

.weg4-nr{display:block;margin-top:1.1rem;
  font:500 .6rem/1 var(--m);letter-spacing:.22em;color:var(--faint);}
.weg4 h3{margin-top:.5rem;font-size:1.05rem;font-weight:600;
  letter-spacing:-.015em;}
.weg4 p{margin-top:.45rem;color:var(--mute);font-size:.93rem;line-height:1.55;}
/* „justify-self" ist nötig, weil das Element unter 900 px ein Rasterfeld
   ist — Rasterfelder werden gestreckt, „inline-block" allein hilft da
   nicht, und die Marke lief über die ganze Spaltenbreite. */
.weg4-zeit{display:inline-block;justify-self:start;width:fit-content;
  margin-top:.85rem;
  padding:.34rem .7rem;border:1px solid var(--hair);border-radius:100px;
  font:500 .58rem/1 var(--m);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);}

@media (max-width:900px){
  .weg4{grid-template-columns:minmax(0,1fr);gap:0;}
  .weg4 li{display:grid;grid-template-columns:2.8rem minmax(0,1fr);
    gap:0 clamp(.9rem,2.4vw,1.3rem);
    padding-bottom:clamp(1.6rem,3.6vh,2.3rem);}
  .weg4 li:last-child{padding-bottom:0;}
  .weg4-kreis{grid-row:1 / span 4;}
  .weg4 li:not(:last-child)::after{
    top:3.3rem;bottom:.9rem;left:1.4rem;right:auto;
    width:1px;height:auto;}
  .weg4 li:not(:last-child)::before{
    top:auto;bottom:.55rem;left:1.4rem;right:auto;
    margin-top:0;transform:translateX(-3.4px) rotate(135deg);}
  .weg4-nr{margin-top:.15rem;}
}
@media (prefers-reduced-motion:reduce){.weg4 li{transition:none;}}

/* Merkmale */
.perks{display:flex;flex-wrap:wrap;gap:.6rem;}
.perk{border:1px solid var(--hair);border-radius:100px;padding:.55rem 1.05rem;
  color:var(--dim);font-size:.92rem;background:var(--surface);}

/* Fragen */
/* Die Trennlinien laufen an beiden Enden aus, statt hart abzubrechen. Eine
   durchgezogene Linie zwischen zwei Fragen liest sich als Schnitt; eine, die
   zu den Rändern hin verschwindet, hält die Liste zusammen. */
/* ---------- Fragen und Antworten ----------
   Die alte Fassung war eine Liste mit Haarlinien dazwischen. Sie war
   ruhig, aber tot: Beim Aufklappen passierte optisch nichts außer dass
   Text erschien.

   Jetzt ist jede Frage eine eigene Karte, und die offene hebt sich ab —
   getönte Fläche, Rahmen in der Hausfarbe, Frage in der Akzentfarbe. Der
   Wechsel läuft weich, damit man sieht, welche Karte sich gerade öffnet.

   Kontrast der offenen Frage: #9C4F42 auf der getönten Fläche 5,4:1.
   Der Fließtext darunter bleibt in der normalen Textfarbe. */
.faq{display:grid;gap:.6rem;}
.faq details{border-radius:16px;
  border:1px solid var(--hair);background:var(--bg);
  transition:background .35s var(--e),border-color .35s var(--e),
             box-shadow .35s var(--e);}
.faq details[open]{
  border-color:color-mix(in srgb,var(--accent) 38%,transparent);
  background:color-mix(in srgb,var(--accent) 5%,var(--bg));
  box-shadow:0 14px 34px -26px color-mix(in srgb,var(--accent) 60%,transparent);}
/* Ohne color-mix bleibt die Karte hell, nur der Rahmen färbt sich. */
@supports not (color:color-mix(in srgb,red 50%,blue)){
  .faq details[open]{border-color:var(--accent);background:var(--surface);}
}

.faq summary{list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:clamp(1rem,2.2vh,1.3rem) clamp(1.1rem,2.4vw,1.6rem);
  font-size:1.04rem;font-weight:600;letter-spacing:-.015em;
  transition:color .3s var(--e);}
.faq summary::-webkit-details-marker{display:none;}
.faq details[open] summary{color:var(--accent);}
@media (hover:hover) and (pointer:fine){
  .faq details:not([open]):hover{border-color:var(--hair-2);background:var(--surface);}
}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:16px;}

/* Der Haken zeigt nach unten und dreht sich beim Öffnen nach oben. */
.faq summary::after{content:"";flex:none;width:11px;height:11px;margin-top:.4rem;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);opacity:.55;
  transition:transform .35s var(--e),opacity .3s var(--e);}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px);opacity:1;}

.faq p{margin:0;padding:0 clamp(1.1rem,2.4vw,1.6rem) clamp(1.1rem,2.4vh,1.4rem);
  color:var(--mute);max-width:76ch;font-size:.98rem;line-height:1.65;}

@media (prefers-reduced-motion:reduce){
  .faq details,.faq summary,.faq summary::after{transition:none;}
}

/* =========================================================
   Stellenkarten (.jobs)
   Baut auf demselben Muster wie die Fragen darüber: getönte Karte,
   Rahmen in der Hausfarbe beim Öffnen, derselbe Haken. Nur der Kopf der
   Karte trägt mehr — Fachbereich, Titel und die Eckdaten übereinander.

   Bewusst dasselbe Muster und keine eigene Optik: Wer die Fragen auf den
   anderen Seiten kennt, weiß hier sofort, dass sich etwas aufklappt.
   ========================================================= */
.jobs{display:grid;gap:.6rem;}
.jobs details{border-radius:16px;
  border:1px solid var(--hair);background:var(--bg);
  transition:background .35s var(--e),border-color .35s var(--e),
             box-shadow .35s var(--e);}
.jobs details[open]{
  border-color:color-mix(in srgb,var(--accent) 38%,transparent);
  background:color-mix(in srgb,var(--accent) 5%,var(--bg));
  box-shadow:0 14px 34px -26px color-mix(in srgb,var(--accent) 60%,transparent);}
@supports not (color:color-mix(in srgb,red 50%,blue)){
  .jobs details[open]{border-color:var(--accent);background:var(--surface);}
}

.jobs summary{list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:clamp(1rem,2.2vh,1.3rem) clamp(1.1rem,2.4vw,1.6rem);}
.jobs summary::-webkit-details-marker{display:none;}
@media (hover:hover) and (pointer:fine){
  .jobs details:not([open]):hover{border-color:var(--hair-2);background:var(--surface);}
}
.jobs summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:16px;}
.jobs summary::after{content:"";flex:none;width:11px;height:11px;margin-top:.55rem;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);opacity:.55;
  transition:transform .35s var(--e),opacity .3s var(--e);}
.jobs details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px);opacity:1;}

.job-feld{display:block;font:500 .62rem/1 var(--m);letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);}
.jobs summary b{display:block;margin-top:.5rem;
  font-size:1.04rem;font-weight:600;letter-spacing:-.015em;
  transition:color .3s var(--e);}
.jobs details[open] summary b{color:var(--accent);}
.job-meta{display:block;margin-top:.35rem;color:var(--mute);
  font:400 .82rem/1.5 var(--m);}

.job-body{padding:0 clamp(1.1rem,2.4vw,1.6rem) clamp(1.1rem,2.4vh,1.4rem);}
.job-body > p{margin:0;color:var(--mute);max-width:72ch;
  font-size:.98rem;line-height:1.65;}
.job-spalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2.4vw,2rem);margin-top:clamp(1.1rem,2.4vh,1.5rem);}
.job-spalten h4{margin:0 0 .6rem;font-size:.94rem;font-weight:600;
  letter-spacing:-.01em;}
/* Global sind Listen punktlos gesetzt. Statt die Browserpunkte
   zurueckzuholen bekommt jeder Eintrag denselben kleinen Punkt in der
   Hausfarbe, den auch die Kennzeichnungen tragen — dasselbe Motiv, an
   einer weiteren Stelle. */
.job-spalten ul{margin:0;padding:0;color:var(--mute);
  font-size:.94rem;line-height:1.6;}
.job-spalten li{position:relative;padding-left:1.05rem;margin-top:.4rem;}
.job-spalten li:first-child{margin-top:0;}
.job-spalten li::before{content:"";position:absolute;left:0;top:.6em;
  width:5px;height:5px;border-radius:50%;background:var(--accent);}

.job-fuss{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:1rem;
  margin-top:clamp(1.2rem,2.6vh,1.6rem);padding-top:clamp(1rem,2.2vh,1.3rem);
  border-top:1px solid var(--hair);}
.job-geld{margin:0;}
.job-geld span{display:block;font:500 .62rem/1 var(--m);letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);}
.job-geld b{display:block;margin-top:.35rem;font-weight:600;}

@media (max-width:640px){
  .job-spalten{grid-template-columns:minmax(0,1fr);}
  .job-fuss .btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .jobs details,.jobs summary,.jobs summary::after,.jobs summary b{transition:none;}
}


/* Abschluss-Ruf */
.end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;
  background:var(--surface);border:1px solid var(--hair);border-radius:20px;
  padding:clamp(1.5rem,3.5vw,2.6rem);}
.end h2{font-size:clamp(1.4rem,1.1rem + 1.2vw,2.1rem);max-width:22ch;}
/* Eine Stufe kleiner als das h2 — der Kasten unter den Stellen ist ein
   Nachsatz zum Abschnitt, keine eigene Ansage. */
.end h3{font-size:clamp(1.15rem,1rem + .7vw,1.5rem);letter-spacing:-.02em;
  max-width:24ch;}
.end p{margin-top:.6rem;color:var(--mute);max-width:52ch;}

/* Fuß */
.foot{background:var(--bg-2);border-top:1px solid var(--hair);
  padding:clamp(2.5rem,6vh,4rem) 0 clamp(1.5rem,4vh,2.5rem);position:relative;z-index:3;}
.foot .in{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;}
.foot nav{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;font-size:.95rem;color:var(--dim);}
@media (hover:hover) and (pointer:fine){.foot nav a:hover{color:var(--white);}}
.foot .fine{width:100%;margin-top:clamp(1.5rem,4vh,2.5rem);padding-top:1.2rem;
  border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  font:500 .62rem/1.6 var(--m);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}

/* Rechtstexte */
/* Linksbündig unter der Überschrift, nicht mittig. Mit „margin-inline:auto"
   aus „.in" begann der Text 330 px weiter rechts als das h1 darüber. */
.legal{max-width:78ch;margin-inline:0;}
/* Ohne das Zurücksetzen erbt die Zwischenüberschrift die Zeilenbreite der
   Abschnittsköpfe (24ch) und bricht mitten im Satz um. */
.legal h2{font-size:1.3rem;max-width:none;margin-top:clamp(2rem,5vh,3rem);}
.legal h2:first-of-type{margin-top:0;}
.legal p,.legal li{color:var(--dim);font-size:1rem;margin-top:.8rem;}
.legal ul{margin-top:.6rem;}
.legal li{position:relative;padding-left:1.2rem;}
.legal li::before{content:"";position:absolute;left:0;top:.7em;width:5px;height:5px;
  border-radius:50%;background:var(--accent);}
.legal a{border-bottom:1px solid var(--hair-2);}
.legal .note{margin-top:1.2rem;padding:1rem 1.2rem;border-radius:12px;
  background:var(--surface);border:1px solid var(--hair);color:var(--faint);font-size:.92rem;}
.legal dl{margin:0;} .legal dt{font-weight:600;margin-top:1rem;}
.legal dd{margin:.25rem 0 0;color:var(--dim);}

/* ---------- Rechtstexte: Zwischenebene und zwei Sonderfälle ----------
   Bei 2000 Wörtern reicht eine Ebene nicht mehr. Das h3 gliedert
   innerhalb eines Abschnitts, ohne eine neue Nummer zu beanspruchen. */
.legal h3{font-size:1.02rem;font-weight:600;letter-spacing:-.01em;
  margin-top:clamp(1.4rem,3vh,2rem);}
.legal h3 + p{margin-top:.5rem;}

/* Der Hinweis auf die zwei noch offenen Angaben. Bewusst ohne Kasten
   und ohne Farbe — er soll auffindbar sein, nicht laut. */
.ds-offen-text{color:var(--mute);}

/* Die Absatznummer der AGB hängt links am Text, damit die Nummerierung
   beim Überfliegen erkennbar bleibt, ohne fett zu sein. */
.agb-nr{color:var(--faint);font:400 .92rem/1 var(--m);margin-right:.35rem;}

/* Inhaltsverzeichnis: schlichte Liste, kein Kasten, keine Fläche.
   Bei sechzehn Abschnitten braucht der Leser eine Übersicht, aber sie
   soll wie Text aussehen und nicht wie ein Bauteil. */
.legal-inhalt{margin:0 0 clamp(2rem,5vh,3rem);}
.legal-inhalt .inhalt-marke{display:block;font:500 .62rem/1 var(--m);letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);margin-bottom:.9rem;font-weight:500;}
.legal-inhalt ol{list-style:none;margin:0;padding:0;counter-reset:dsn;
  columns:2;column-gap:clamp(1.4rem,3vw,2.6rem);}
.legal-inhalt li{counter-increment:dsn;padding-left:0;
  break-inside:avoid;margin-top:.3rem;}
.legal-inhalt li::before{content:none;}
.legal-inhalt a{color:var(--mute);font-size:.95rem;border-bottom:0;}
.legal-inhalt a::before{content:counter(dsn) ". ";color:var(--faint);}
/* Die AGB-Punkte tragen ihre Nummer schon im Text („§ 5 …") — dort
   würde eine zweite davor stehen. */
.legal-inhalt--roh a::before{content:none;}
@media (hover:hover) and (pointer:fine){
  .legal-inhalt a:hover{color:var(--white);}}
@media (max-width:640px){.legal-inhalt ol{columns:1;}}
.legal h2{scroll-margin-top:6rem;}

/* Nur für Vorlesehilfen, im Bild nicht vorhanden.
   „display:none" wäre falsch: was so ausgeblendet ist, wird auch nicht
   vorgelesen. Diese Fassung nimmt keinen Platz ein, bleibt aber im
   Baum stehen — für Zwischenüberschriften, die im Entwurf bewusst fehlen,
   in der Gliederung des Dokuments aber gebraucht werden. */
.nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}

/* Einblenden beim Scrollen — nur wenn JavaScript läuft */
.js .rev{opacity:0;transform:translateY(14px);}
.js .rev.on{opacity:1;transform:none;
  transition:opacity .7s var(--e),transform .7s var(--e);}
@media (prefers-reduced-motion:reduce){
  .js .rev{opacity:1;transform:none;}
}

/* =========================================================
   Erstgespräch — Auswahlfenster
   Der Verweis „Erstgespräch vereinbaren" führt ohne Skript direkt zur
   Telefonnummer. Mit Skript öffnet er stattdessen dieses Fenster mit zwei
   Wegen: anrufen oder selbst eine Zeit im Kalender wählen.

   Das Fenster ist immer dunkel, auch auf den hellen Seiten. Es liegt über
   allem, und ein dunkles Feld über einer hellen Seite liest sich als
   „hier passiert jetzt etwas" — ein helles Feld auf heller Seite nicht.
   ========================================================= */
.tdlg{
  width:min(38rem,calc(100vw - 2rem));
  --white:#FFFFFF;
  --dim:rgba(255,255,255,.74);
  --mute:rgba(255,255,255,.62);
  --faint:rgba(255,255,255,.52);
  --hair:rgba(255,255,255,.12);
  --hair-2:rgba(255,255,255,.24);
  --accent:#E4A263;
  max-height:min(88vh,54rem);
  padding:0;border:0;border-radius:20px;overflow:hidden;
  color:#FFFFFF;
  background:linear-gradient(160deg,#0B0A0A 0%,#0F0E0E 54%,#0B0A0A 100%);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);}
.tdlg::backdrop{background:rgba(8,7,7,.62);backdrop-filter:blur(3px);}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .tdlg::backdrop{background:rgba(8,7,7,.82);}
}
.tdlg-in{padding:clamp(1.7rem,4vw,2.4rem);overflow-y:auto;max-height:inherit;}

.tdlg-zu{position:absolute;top:.9rem;right:.9rem;z-index:4;
  width:2.4rem;height:2.4rem;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.18);border-radius:50%;
  background:rgba(255,255,255,.04);color:#FFFFFF;
  font-size:1.1rem;line-height:1;cursor:pointer;
  transition:background .2s var(--e),border-color .2s var(--e);}
@media (hover:hover) and (pointer:fine){
  .tdlg-zu:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34);}
}
.tdlg h2{font-family:var(--display);font-weight:400;
  font-size:clamp(1.35rem,1.15rem + .9vw,1.75rem);
  letter-spacing:-.025em;line-height:1.15;}
.tdlg-lead{color:var(--mute);margin-top:.5rem;max-width:44ch;font-size:.95rem;}

/* ---------- Die zwei Wege ----------
   Vorher standen hier zwei große Felder mit Nummern und je drei Zeilen. Das
   liest sich wie eine Auswahl, die sich selbst wichtig nimmt. Jetzt zwei
   nüchterne Zeilen: was es ist, die harte Angabe, ein Satz Erklärung. */
.tdlg-wege{display:grid;gap:.6rem;margin-top:clamp(1.2rem,2.6vw,1.7rem);}
@media (min-width:620px){.tdlg-wege{grid-template-columns:1fr 1fr;gap:.7rem;}}
.tweg{display:block;text-align:left;width:100%;
  padding:1.05rem 1.15rem;
  border:1px solid var(--hair);border-radius:12px;
  background:transparent;color:#FFFFFF;font:inherit;cursor:pointer;
  transition:border-color .2s var(--e),background .2s var(--e);}
.tweg b{display:block;font-size:1.02rem;font-weight:600;letter-spacing:-.015em;
  line-height:1.25;}
/* Die zweite Zeile steht unter der Überschrift und ist kleiner als sie —
   sie nennt die Sache, nicht den Weg. */
.tweg .t{display:block;margin-top:.45rem;font-size:.92rem;font-weight:500;
  letter-spacing:-.01em;color:rgba(255,255,255,.88);}
/* Nur die Rufnummer in der Schreibmaschinenschrift — dort hilft die feste
   Zeichenbreite beim Ablesen. Ein Satz darin läse sich wie Quelltext. */
.tweg .tel{font:500 .95rem/1.3 var(--m);letter-spacing:.01em;}
.tweg .z{display:block;margin-top:.5rem;font-size:.85rem;line-height:1.5;
  color:var(--mute);}
@media (hover:hover) and (pointer:fine){
  .tweg:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.045);}
}
.tweg:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* ---------- Kalenderfach ---------- */
.tdlg-kal{margin-top:clamp(1.4rem,3vw,2rem);}
/* Ist der Kalender geladen, wird aus dem schmalen Auswahlfenster ein breites:
   unter etwa 1000px zeigt Calendly eine schmale Spalte, die nach unten
   ausufert und im Fenster abgeschnitten wird. */
.tdlg--kalender{width:min(64rem,calc(100vw - 2rem));max-height:min(94vh,62rem);}
.tdlg--kalender .tdlg-in{padding-bottom:clamp(1rem,2vw,1.4rem);
  display:flex;flex-direction:column;}
/* Auswahl und Einleitung haben ihren Zweck erfüllt — der Platz gehört jetzt
   dem Kalender, der sonst unten abgeschnitten wird. */
.tdlg--kalender .tdlg-wege,
.tdlg--kalender .tdlg-lead{display:none;}
.tdlg--kalender .tdlg-kal{flex:1 1 auto;display:flex;flex-direction:column;}
#kal-ziel{flex:1 1 auto;}
#kal-ziel iframe{display:block;width:100%;min-height:inherit;border:0;}
.tdlg-kal .hinweis{padding:clamp(1.1rem,2.4vw,1.5rem);
  border:1px solid var(--hair);border-radius:14px;background:rgba(255,255,255,.035);}
.tdlg-kal .hinweis p{font-size:.88rem;line-height:1.6;color:var(--mute);}
.tdlg-kal .hinweis p + p{margin-top:.6rem;}
/* Nur Verweise im Fließtext — nicht der Knopf darunter, der ebenfalls ein
   <a> sein kann und sonst bernsteinfarbene Schrift auf weißer Fläche bekäme. */
.tdlg-kal .hinweis p a{color:var(--accent);border-bottom:1px solid rgba(228,162,99,.4);}
.tdlg .btn--fill{background:#FFFFFF;color:#0B0B0B;border-color:transparent;}
.tdlg-kal .hinweis .btn{margin-top:1.1rem;}
#kal-ziel{min-height:0;}
/* 700px gibt Calendly für die eingebettete Ansicht an. Vorher stand hier
   min(64vh,42rem) — das ergab auf dieser Seite nur gut 600px, weil die
   Grundschrift kleiner als die üblichen 16px ist, und schnitt den Kalender
   unten ab. Ist das Fenster niedriger, scrollt der Fensterinhalt. */
#kal-ziel:not(:empty){min-height:700px;}

/* ---------- Anfragefenster ----------
   Das Fenster ist dunkel, die Formularfelder kommen aber aus den hellen
   Themen und waren dort weiß — auf weißem Grund weiße Schrift, man sah
   beim Tippen nichts. Deshalb bekommt das Fenster seine eigenen Felder. */
#ph-anfrage h2{font-size:clamp(1.1rem,2.4vw,1.45rem);padding-right:3rem;
  line-height:1.25;}
#ph-anfrage .fields{margin-top:clamp(1.1rem,2.4vw,1.5rem);}
#ph-anfrage label{color:var(--dim);font-size:.9rem;}
#ph-anfrage .req{color:var(--accent);}

#ph-anfrage input[type="text"],
#ph-anfrage input[type="email"],
#ph-anfrage input[type="tel"],
#ph-anfrage textarea{
  background:rgba(255,255,255,.05);
  border:1px solid var(--hair);
  border-radius:12px;
  color:#FFFFFF;
  caret-color:var(--accent);}
#ph-anfrage input::placeholder,
#ph-anfrage textarea::placeholder{color:rgba(255,255,255,.38);}
#ph-anfrage input:focus,
#ph-anfrage textarea:focus{outline:none;
  border-color:var(--accent);background:rgba(255,255,255,.09);}
#ph-anfrage .ungueltig{border-color:#E88A72;}

/* Das Dateifeld sieht ohne Zutun nach nacktem Browser aus. */
#ph-anfrage input[type="file"]{
  background:rgba(255,255,255,.05);
  border:1px dashed var(--hair-2);
  border-radius:12px;
  color:var(--mute);font-size:.9rem;
  padding:.85rem .9rem;width:100%;cursor:pointer;}
#ph-anfrage input[type="file"]::file-selector-button{
  background:rgba(255,255,255,.1);
  border:1px solid var(--hair-2);
  border-radius:8px;
  color:#FFFFFF;font:inherit;font-size:.88rem;
  padding:.4rem .8rem;margin-right:.8rem;cursor:pointer;}
#ph-anfrage input[type="file"]:hover::file-selector-button{
  background:rgba(255,255,255,.16);}

#ph-anfrage .agree{margin-top:1.2rem;}
#ph-anfrage .agree label{color:var(--mute);font-size:.88rem;line-height:1.6;}
#ph-anfrage input[type="checkbox"]{accent-color:var(--accent);
  width:1.1rem;height:1.1rem;}
#ph-anfrage .fehler{color:#E88A72;font-size:.9rem;margin-top:.9rem;}
#ph-anfrage .send{margin-top:1.3rem;width:100%;}

/* ---------- Rückweg ---------- */
.tdlg-zurueck{margin-top:1.1rem;
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:.88rem;color:var(--mute);
  border-bottom:1px solid transparent;transition:color .2s var(--e);}
@media (hover:hover) and (pointer:fine){
  .tdlg-zurueck:hover{color:#FFFFFF;border-bottom-color:var(--hair-2);}
}

/* =========================================================
   Zusage — der Satz, der aus der Masse stechen soll
   Dunkel auf heller Seite: der stärkste Kontrast, den diese Seite hergibt,
   ohne eine neue Farbe einzuführen. Die Farbmarken werden im Block
   umgestellt, damit Schrift, Linien und Haken darin von allein stimmen.
   ========================================================= */
.zusage{
  --white:#FFFFFF;
  --dim:rgba(255,255,255,.76);
  --mute:rgba(255,255,255,.66);
  --faint:rgba(255,255,255,.54);
  --hair:rgba(255,255,255,.12);
  --hair-2:rgba(255,255,255,.24);
  --surface:rgba(255,255,255,.04);
  --accent:#E4A263;
  margin-top:clamp(2.2rem,5vh,3.6rem);
  padding:clamp(1.8rem,4.5vw,3.2rem);
  border-radius:20px;color:#FFFFFF;
  background:linear-gradient(160deg,#0B0A0A 0%,#0F0E0E 54%,#0B0A0A 100%);}
.zusage h3{font-family:var(--display);font-weight:400;
  font-size:clamp(1.55rem,1.1rem + 1.9vw,2.5rem);
  letter-spacing:-.03em;line-height:1.1;max-width:22ch;color:#FFFFFF;}
.zusage .lead{color:var(--dim);margin-top:.9rem;max-width:58ch;font-size:1rem;}
/* Die Haken stehen hier frei, nicht im eigenen Kasten: Ein Rahmen im
   Rahmen macht den Block kleinteilig, und die Grundbreite von 46 Zeichen
   quetscht vier Punkte in zwei schmale Spalten. */
.zusage .hakenpunkte{margin-top:clamp(1.5rem,3.4vh,2.2rem);
  max-width:none;border:0;background:none;padding:0;
  gap:1rem clamp(1.8rem,4vw,3.4rem);}
.zusage .hakenpunkte li{color:var(--dim);}
@media (min-width:720px){
  .zusage .hakenpunkte{grid-template-columns:1fr 1fr;}
}
@media (min-width:1100px){
  .zusage .hakenpunkte{grid-template-columns:repeat(4,1fr);gap:1.6rem;}
  .zusage .hakenpunkte li{flex-direction:column;gap:.7rem;}
}

/* Dritte Stufe der Schaltflächen: vorhanden, aber leiser als die beiden
   davor. Damit liest sich eine Dreierreihe als Reihenfolge und nicht als
   drei gleichwertige Angebote. */
.btn--leise{background:transparent;color:var(--mute);border-color:var(--hair);}
@media (hover:hover) and (pointer:fine){
  .btn--leise:hover{color:var(--white);border-color:var(--hair-2);
    background:rgba(255,255,255,.05);}
}

/* =========================================================
   Ablauf als Schieber
   Fünf Karten in einer Spur. Das Blättern macht der Browser selbst:
   overflow-x mit scroll-snap. Das bringt Wischen, Tastatur und Trackpad
   ohne eine Zeile Skript mit — das Skript setzt nur die Punkte und den
   Selbstlauf. Fällt es aus, bleibt die Spur ein normaler Schieber.
   ========================================================= */
.ab{display:grid;gap:clamp(2rem,5vw,3.6rem);align-items:center;
  grid-template-columns:minmax(0,1fr);}
/* Ohne min-width:0 nimmt sich die Bühne die Breite ihres Inhalts — fünf
   Karten nebeneinander — und schiebt die ganze Seite seitlich hinaus. */
.ab-buehne{min-width:0;}
@media (min-width:980px){
  .ab{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    gap:clamp(2.5rem,5vw,4.5rem);}
}
.ab-txt h2{font-family:var(--display);font-weight:400;
  font-size:clamp(1.9rem,1.3rem + 2.2vw,3rem);
  letter-spacing:-.03em;line-height:1.08;margin-top:.9rem;}
.ab-txt .lead{color:var(--dim);margin-top:1rem;max-width:38ch;}
.ab-geld{margin-top:clamp(1.2rem,2.6vh,1.8rem);color:var(--mute);
  font-size:.96rem;line-height:1.6;max-width:40ch;
  padding-top:clamp(1.1rem,2.4vh,1.6rem);border-top:1px solid var(--hair);}
.ab-geld b{display:block;margin-bottom:.35rem;
  color:var(--white);font-weight:700;font-size:1.06rem;letter-spacing:-.01em;}

.ab-spur{display:flex;align-items:center;gap:clamp(.5rem,1vw,.8rem);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  margin:0;padding:0;list-style:none;}
.ab-spur::-webkit-scrollbar{display:none;}
@media (prefers-reduced-motion:reduce){.ab-spur{scroll-behavior:auto;}}

/* Die aktive Karte steht größer als ihre Nachbarn — dasselbe Verhältnis
   wie in der Vorlage: 292 zu 264 Pixel, also rund neun Prozent kleiner.
   Dort ändert sich die echte Breite und alles daneben rutscht mit; hier
   wird nur skaliert. Sieht gleich aus, kostet aber kein Neuberechnen des
   Layouts bei jedem Bild und bringt das Wischen nicht durcheinander. */
.ab-karte{flex:0 0 clamp(12.5rem,21vw,16.5rem);scroll-snap-align:start;
  position:relative;margin:0;border-radius:16px;overflow:hidden;
  isolation:isolate;aspect-ratio:5/7;
  transform:scale(.904);transform-origin:center;
  transition:transform .55s var(--e);}
.ab-karte.ist-aktiv{transform:scale(1);}
@media (prefers-reduced-motion:reduce){
  .ab-karte{transition:none;}
}
.ab-karte .n{display:block;font:500 .6rem/1 var(--m);letter-spacing:.24em;}
.ab-karte h3{font-size:1.02rem;font-weight:600;letter-spacing:-.01em;
  line-height:1.22;margin-top:.55rem;}
.ab-karte p{font-size:.86rem;line-height:1.5;margin-top:.45rem;}

/* ---- Stil A: Bild mit Titel darauf, wie in der Vorlage ---- */
[data-stil="a"] .ab-karte{display:flex;align-items:flex-start;background:#0B0A0A;}
[data-stil="a"] .ab-karte img{position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;}
/* Der Schleier muss dort tragen, wo die Schrift steht — auch wenn darunter
   ein heller Bildschirm liegt. Deshalb oben kräftig und erst nach dem Text
   schnell auslaufend, statt gleichmäßig über die ganze Karte. */
[data-stil="a"] .ab-karte::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.74) 26%,
    rgba(0,0,0,.36) 46%,rgba(0,0,0,.06) 64%,rgba(0,0,0,.30) 100%);}
[data-stil="a"] .ab-karte .txt{position:relative;z-index:2;
  padding:clamp(1rem,2vw,1.35rem);color:#FFFFFF;}
[data-stil="a"] .ab-karte .n{color:rgba(255,255,255,.72);}
[data-stil="a"] .ab-karte h3{color:#FFFFFF;}
[data-stil="a"] .ab-karte p{color:rgba(255,255,255,.82);}

/* ---- Stil B: Bild oben, Text darunter ---- */
[data-stil="b"] .ab-karte{display:flex;flex-direction:column;
  background:var(--bg);border:1px solid var(--hair);aspect-ratio:auto;}
/* height:auto und flex:none sind nötig: In einer Spalten-Flexbox nimmt
   das Bild sonst die Höhe aus seinem height-Attribut (1120) als
   Ausgangsgröße, und das Seitenverhältnis kommt nie zum Zug. */
[data-stil="b"] .ab-karte img{width:100%;height:auto;flex:none;
  aspect-ratio:4/3;object-fit:cover;display:block;}
[data-stil="b"] .ab-karte .txt{padding:clamp(1rem,2vw,1.35rem);}
[data-stil="b"] .ab-karte .n{color:var(--accent);}
[data-stil="b"] .ab-karte p{color:var(--mute);}

/* ---- Stil C: ohne Bild, nur Zahl und Satz ---- */
[data-stil="c"] .ab-karte{background:var(--surface);border:1px solid var(--hair);
  display:flex;align-items:flex-end;}
[data-stil="c"] .ab-karte img{display:none;}
[data-stil="c"] .ab-karte .txt{padding:clamp(1.1rem,2.2vw,1.5rem);}
[data-stil="c"] .ab-karte .n{font-size:1.5rem;letter-spacing:0;
  color:var(--accent);margin-bottom:.8rem;}
[data-stil="c"] .ab-karte p{color:var(--mute);}

/* ---- Punkte ---- */
.ab-punkte{display:flex;gap:.45rem;margin-top:clamp(1rem,2.4vh,1.5rem);}
.ab-punkt{width:9px;height:9px;padding:0;border:0;border-radius:50%;
  background:var(--hair-2);cursor:pointer;
  transition:background .3s var(--e),transform .3s var(--e);}
.ab-punkt[aria-current="true"]{background:var(--white);transform:scale(1.15);}
.ab-punkt:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){.ab-punkt{transition:none;}}

/* Unterschied-Liste: zweispaltig ab Tablet, damit fünf Punkte nicht als
   lange Kolonne stehen. Der erste Halbsatz ist fett — man liest die fünf
   Aussagen auch, wenn man nur überfliegt. */
.unterschied{max-width:none;}
@media (min-width:820px){
  .unterschied{display:grid;grid-template-columns:1fr 1fr;
    gap:.9rem clamp(2rem,4vw,3.4rem);align-items:start;}
}
.unterschied li{align-items:flex-start;}
.unterschied b{color:var(--white);font-weight:600;}
.unterschied span{line-height:1.6;}

/* =========================================================
   Kopfleiste: die beiden Hauptwege in der Display-Schrift
   „Für Arbeitgeber" und „Für Arbeitnehmer" trugen zuerst die Farbe ihrer
   Seite — Eiche und Orange. Zwei farbige Wörter in einer sonst ruhigen
   Leiste zogen aber mehr Aufmerksamkeit auf sich als der Knopf daneben.

   Jetzt heben sie sich über die Form: dieselbe Schrift wie die großen
   Überschriften, eine Spur größer als der Rest der Leiste und in voller
   Textfarbe statt in der gedämpften. Die Strichstärke bleibt bei 500 wie
   überall sonst in der Leiste — der Unterschied kommt allein aus der Form
   der Buchstaben, der Größe und dem Kontrast. Kein einziges davon farbig,
   dadurch bleiben sie auf jeder Haut der Seite gleich deutlich, ohne dass
   eine Farbe nachgezogen werden muss.

   Clash Display muss auf jeder Seite im Kopf geladen sein, sonst fällt die
   Zeile still auf General Sans zurück und der Unterschied verschwindet.
   ========================================================= */
/* Kein „display" hier. Diese Regel steht weiter unten in der Datei als die
   Abfrage, die die Navigation schmal ausblendet — stünde display:flex darin,
   gewänne sie und die Navigation bliebe neben dem Klappmenü stehen. Die
   Grundregel oben setzt display, hier kommt nur Ausrichtung und Abstand. */
.nav{align-items:center;justify-content:center;
  grid-column:2;gap:clamp(.9rem,2vw,1.7rem);}
.nav-ag,.nav-an{font-family:var(--display);
  font-weight:500;font-size:.98rem;letter-spacing:-.02em;
  color:var(--white);}

/* ---------- Die beiden Aufklappfelder ----------
   „Leistungen" und „Über uns" sind selbst Verweise: ein Klick führt auf
   die Übersicht, das Feld darunter öffnet beim Überfahren. Vorher war es
   ein <details>, das man erst aufklappen musste — dabei ist genau das
   Wort das Ziel, das die meisten suchen.

   Deshalb hover statt Klick, und zusätzlich „focus-within": wer mit der
   Tabulatortaste hineingeht, bekommt dasselbe Feld zu sehen. Auf einem
   Bildschirm ohne Zeigegerät gibt es kein Überfahren — dort führt der
   erste Tipper direkt auf die Übersichtsseite, auf der ohnehin alles
   steht. Kein Zustand, in dem man irgendwo hängen bleibt. */
.nav-drop{position:relative;}
.nav-titel{display:inline-flex;align-items:center;gap:.4rem;
  white-space:nowrap;color:var(--dim);font-size:.9rem;font-weight:500;}
.nav-pfeil{width:6px;height:6px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .25s var(--e);}

.nav-panel{position:absolute;
  /* Bezug ist das Wort darüber, nicht die Leiste — „100%" endet also an
     der Unterkante der Schrift, nicht an der der Leiste. Der Zuschlag ist
     der halbe Abstand zwischen beiden: Leistenhöhe minus Zeilenhöhe,
     geteilt durch zwei. Nachgemessen sind das 1,1 rem: damit sitzt die
     Oberkante des Feldes bündig auf der Unterkante der Leiste. Mit dem
     bloßen Innenabstand der Leiste lag es sechs Pixel zu hoch und schnitt
     deren Unterkante an, mit 1,4 rem fünf Pixel zu tief. */
  top:calc(100% + 1.1rem);
  left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:13rem;display:grid;gap:.1rem;padding:.5rem;z-index:60;
  border-radius:0 0 14px 14px;border:0;
  /* Dieselbe Fläche und dieselbe Unschärfe wie die Leiste darüber, damit
     beide als ein Material lesbar sind. Zwei verschiedene Deckungen ergaben
     an der Naht einen sichtbaren Absatz. */
  background:var(--glas,rgba(11,11,11,.72));
  -webkit-backdrop-filter:blur(26px) saturate(150%);
          backdrop-filter:blur(26px) saturate(150%);
  box-shadow:0 20px 44px -26px rgba(0,0,0,.3);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--e),transform .22s var(--e),visibility .22s;}
/* Der Zwischenraum zur Leiste ist durchsichtig — ohne diese Brücke fiele
   das Feld zu, sobald der Zeiger ihn überquert. */
.nav-panel::before{content:"";position:absolute;left:0;right:0;
  top:-1.1rem;height:1.1rem;}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .nav-panel{background:var(--glas-fest,rgba(11,11,11,.97));}
}
.nav-panel a{padding:.6rem .8rem;border-radius:8px;
  font-size:.92rem;color:var(--dim);white-space:nowrap;}
.nav-panel a::after{display:none;}
.nav-panel a[aria-current="page"]{color:var(--white);font-weight:600;}

@media (hover:hover) and (pointer:fine){
  .nav-drop:hover .nav-panel,
  .nav-drop:focus-within .nav-panel{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateX(-50%) translateY(0);}
  .nav-drop:hover .nav-pfeil{transform:rotate(-135deg) translate(-2px,-2px);}
  .nav-drop:hover .nav-titel{color:var(--white);}
  .nav-panel a:hover{background:var(--surface-2,rgba(255,255,255,.08));color:var(--white);}
}
/* Ohne Zeigegerät bleibt das Feld zu; der Verweis oben führt zum Ziel. */
.nav-drop:focus-within .nav-panel{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);}
.nav-titel:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px;}
@media (prefers-reduced-motion:reduce){
  .nav-panel,.nav-pfeil{transition:none;}
}

/* ---------- Der Knopf am rechten Ende ----------
   Ein Rechteck mit weichen Ecken statt der runden Pille der übrigen
   Schaltflächen: In einer Leiste voller Schrift ist die Pille die
   auffälligste Form überhaupt, und genau deshalb wirkte sie angeklebt.

   Gebaut aus den Farbmarken, nicht aus festen Werten. „--white" ist auf den
   hellen Seiten die dunkle Textfarbe und auf den dunklen Seiten Weiß —
   der Knopf dreht sich damit von selbst mit der Haut der Seite um. Mit
   festen Werten wäre er auf Impressum, Karriere und Datenschutz ein
   dunkles Rechteck auf dunklem Grund gewesen, also unsichtbar.

   Der Verlauf ist bewusst flach: oben eine Spur aufgehellt, unten eine
   Spur abgedunkelt. Er soll Tiefe geben, nicht glänzen.

   Kontrast Schrift zu Fläche: heller Grund 16,1:1, dunkler Grund 15,9:1. */
.nav-cta{display:inline-flex;align-items:center;justify-content:center;gap:.52rem;
  padding:.55rem 1.25rem;border-radius:9px;
  font-family:var(--ui);font-size:.86rem;font-weight:600;letter-spacing:-.005em;
  white-space:nowrap;border:1px solid transparent;
  color:var(--bg);background-color:var(--white);
  background-image:linear-gradient(168deg,
    color-mix(in srgb,var(--white) 82%,#8A7476) 0%,
    var(--white) 52%,
    color-mix(in srgb,var(--white) 90%,#000000) 100%);
  box-shadow:0 10px 22px -16px color-mix(in srgb,var(--white) 70%,transparent);
  transition:background-image .25s var(--e),box-shadow .25s var(--e),
             transform .25s var(--e);}
/* Ohne color-mix bleibt die volle Fläche — ohne Verlauf, aber lesbar. */
@supports not (color:color-mix(in srgb,red 50%,blue)){
  .nav-cta{background-image:none;}
}
/* Die Leiste setzt allen Verweisen eine Unterstreichung an. Hier stört sie. */
.nav-cta::after{display:none;}
@media (hover:hover) and (pointer:fine){
  .nav-cta:hover{
    background-image:linear-gradient(168deg,
      color-mix(in srgb,var(--white) 74%,#8A7476) 0%,
      color-mix(in srgb,var(--white) 94%,#8A7476) 52%,
      color-mix(in srgb,var(--white) 94%,#000000) 100%);
    box-shadow:0 14px 26px -16px color-mix(in srgb,var(--white) 80%,transparent);
    transform:translateY(-1px);}
}
.nav-cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* Der Pfeil rutscht beim Zeigen ein Stück weiter — dieselbe Bewegung wie
   bei den Textverweisen im Inhalt, nur kleiner. */
.cta-pfeil{width:1.05em;height:1.05em;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .25s var(--e);}
@media (hover:hover) and (pointer:fine){
  .nav-cta:hover .cta-pfeil{transform:translateX(3px);}
}
@media (prefers-reduced-motion:reduce){
  .cta-pfeil{transition:none;}
  .nav-cta:hover .cta-pfeil{transform:none;}
}

/* =========================================================
   Rechte Gruppe: Trennstrich, Knopf, Kundenzugang
   ========================================================= */
.kopf-rechts{display:flex;align-items:center;gap:clamp(.7rem,1.4vw,1.1rem);}
.kopf-teiler{width:1px;height:1.35rem;flex:none;background:var(--hair-2);}

/* Weggeschoben beim Herunterscrollen. „-101%" statt „-100%", damit auch die
   Trennlinie an der Unterkante mit verschwindet und kein Haarstrich am
   oberen Bildrand stehen bleibt. */
.top.kopf-weg{transform:translateY(-101%);}
@media (prefers-reduced-motion:reduce){
  .top{transition:none;}
}

/* ---------- Kundenzugang ----------
   Bewusst nur ein Zeichen, kein beschrifteter Knopf: Der Zugang ist für
   wenige gedacht und soll den Hauptweg daneben nicht verwässern. */
.konto{position:relative;flex:none;}
.konto summary{list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:100px;
  border:1px solid var(--hair-2);color:var(--dim);
  transition:border-color .25s var(--e),color .25s var(--e),background .25s var(--e);}
.konto summary::-webkit-details-marker{display:none;}
.konto summary svg{width:16px;height:16px;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
@media (hover:hover) and (pointer:fine){
  .konto summary:hover{border-color:var(--white);color:var(--white);}
}
.konto summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.konto[open] summary{border-color:var(--white);color:var(--white);}

/* Das Feld hängt wie das Aufklappmenü an der Unterkante der Leiste, ist
   aber rechtsbündig — es steht am Rand, nicht in der Mitte. */
.konto-panel{position:absolute;
  top:calc(100% + clamp(.85rem,1.9vh,1.25rem));right:0;
  width:17.5rem;padding:1.1rem;z-index:60;
  border-radius:0 0 14px 14px;border:0;
  background:var(--glas,rgba(11,11,11,.92));
  -webkit-backdrop-filter:blur(22px);
          backdrop-filter:blur(22px);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.28);}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .konto-panel{background:var(--glas-fest,rgba(11,11,11,.97));}
}
.konto-kopf{margin:0 0 .85rem;font:500 .62rem/1 var(--m);
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);}
.konto-form{display:grid;gap:.3rem;}
.konto-form label{font-size:.82rem;font-weight:500;color:var(--dim);}
.konto-form label + input{margin-bottom:.6rem;}
.konto-form input{width:100%;font:400 .95rem/1.4 var(--ui);color:var(--white);
  background:var(--bg);border:1px solid var(--hair-2);border-radius:9px;
  padding:.6rem .75rem;min-height:42px;
  transition:border-color .25s var(--e);}
.konto-form input::placeholder{color:var(--faint);}
.konto-form input:focus-visible{outline:none;border-color:var(--accent);}
.konto-knopf{margin-top:.35rem;width:100%;min-height:44px;cursor:pointer;
  border:1px solid transparent;border-radius:9px;
  font:600 .94rem/1 var(--ui);color:var(--bg);background:var(--white);
  transition:opacity .25s var(--e);}
@media (hover:hover) and (pointer:fine){.konto-knopf:hover{opacity:.86;}}
.konto-knopf:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.konto-hinweis{margin:.8rem 0 0;color:var(--faint);font-size:.8rem;line-height:1.5;}
.konto-hinweis a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}

@media (max-width:1080px){
  /* Schmal übernimmt das Klappmenü. Knopf und Zugang stehen dort drin, in
     der Leiste bliebe sonst kein Platz für die Wortmarke. */
  .kopf-rechts{display:none;}
  .top{grid-template-columns:1fr auto;}
  .menu{grid-column:2;justify-self:end;}
}

/* Im Klappmenü der schmalen Ansicht steht die Schaltfläche unten */
/* Der Knopf im Handymenü ist ein Knopf, kein Menülink. „.menu-panel a"
   wiegt mit Klasse plus Element schwerer als „.btn--fill" und hat dem
   Knopf die Textfarbe der Links aufgezwungen — dunkle Schrift auf
   dunklem Grund, gemessen 1,00:1, also vollständig unsichtbar. Das
   „:not(.btn)" oben nimmt die Knöpfe aus der Regel heraus, damit jede
   Haut ihre eigene Knopffarbe behält. */
.menu-panel .btn{margin-top:.5rem;width:100%;justify-content:center;}
/* Die drei Leistungen stehen eingerückt unter ihrem Oberpunkt. */
.menu-unter{padding-left:1.5rem!important;font-size:.9rem;color:var(--faint);
  position:relative;}
.menu-unter::before{content:"";position:absolute;left:.75rem;top:50%;
  width:.4rem;height:1px;background:currentColor;opacity:.6;}
/* Der Kundenzugang steht hier als beschrifteter Verweis statt als Zeichen —
   ein 40-Pixel-Kreis zwischen Textzeilen läse sich als Fehler. */
.menu-zugang{display:flex;align-items:center;gap:.55rem;
  margin-top:.5rem;padding-top:.7rem;border-top:1px solid var(--hair);
  color:var(--faint);font-size:.9rem;}
.menu-zugang svg{width:17px;height:17px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}

/* =========================================================
   Kontaktseite — Erstgespräch vereinbaren
   Links das Formular, rechts drei ruhige Kästen. Die Feldgestaltung
   ist bewusst neu und nicht aus warm.css geerbt: jene Regeln hängen
   an der Bewerbungsseite und deren cremefarbener Haut. Hier arbeitet
   alles über die Farbmarken, damit die Seite auf jeder Haut sitzt.
   ========================================================= */
.kgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(1.4rem,3vw,2.6rem);align-items:start;}

.kform{min-width:0;}
.kform .fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.9rem,2vw,1.2rem);}
.kform .f{display:flex;flex-direction:column;gap:.35rem;min-width:0;}
.kform .f.wide{grid-column:1 / -1;}
.kform label{font-size:.9rem;font-weight:500;color:var(--dim);}
.kform label .req{color:var(--accent);}
.kform input:not([type="checkbox"]),
.kform select,
.kform textarea{
  width:100%;font:400 1rem/1.4 var(--s);color:var(--white);
  background:var(--bg);border:1px solid var(--hair-2);border-radius:12px;
  padding:.8rem .95rem;min-height:48px;
  transition:border-color .25s var(--e),box-shadow .25s var(--e);}
.kform textarea{min-height:7rem;resize:vertical;}
.kform input::placeholder,.kform textarea::placeholder{color:var(--faint);}
.kform input:focus-visible,.kform select:focus-visible,
.kform textarea:focus-visible,.kform .agree input:focus-visible{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);}
/* Fällt color-mix aus, bleibt wenigstens der Rahmen sichtbar. */
@supports not (color:color-mix(in srgb,red 50%,blue)){
  .kform input:focus-visible,.kform select:focus-visible,
  .kform textarea:focus-visible{box-shadow:0 0 0 3px var(--surface-2);}
}
.kform .ungueltig{border-color:var(--accent);}

.kform .agree{display:flex;align-items:flex-start;gap:.7rem;
  margin-top:clamp(1.1rem,2.4vh,1.5rem);}
.kform .agree input{flex:none;width:1.15rem;height:1.15rem;margin-top:.15rem;
  accent-color:var(--accent);}
.kform .agree label{font-size:.88rem;line-height:1.55;color:var(--mute);font-weight:400;}
.kform .agree a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}

.kform .fehler{margin-top:.9rem;color:var(--accent);font-size:.9rem;font-weight:500;}
.kform .send{width:100%;margin-top:1.2rem;min-height:52px;justify-content:center;}
.kform .note{margin-top:.9rem;color:var(--faint);font-size:.88rem;line-height:1.6;}
.kform .note a{color:var(--accent);}

/* ---------- Seitenspalte ---------- */
.kseite{display:grid;gap:clamp(.8rem,1.8vw,1.1rem);min-width:0;
  position:sticky;top:clamp(5.5rem,13vh,7.5rem);}
.kbox{background:var(--surface);border:1px solid var(--hair);
  border-radius:16px;padding:clamp(1.1rem,2vw,1.5rem);}
.kbox h2{font-size:.98rem;font-weight:600;letter-spacing:-.01em;margin:0 0 .9rem;}
.kbox--fest{background:#141013;border-color:transparent;}
.kbox--fest h2{color:#FFFFFF;}
.kbox--fest .hakenpunkte span{color:rgba(255,255,255,.78);}
.kbox--fest .hk-d{stroke:#FFFFFF;}

.kschritte{list-style:none;margin:0;padding:0;counter-reset:ks;display:grid;gap:.9rem;}
.kschritte li{counter-increment:ks;display:grid;
  grid-template-columns:1.6rem minmax(0,1fr);gap:.1rem .6rem;}
.kschritte li::before{content:counter(ks,decimal-leading-zero);grid-row:1 / span 2;
  font:500 .62rem/1.6 var(--m);letter-spacing:.14em;color:var(--accent);}
.kschritte b{font-size:.94rem;font-weight:600;}
.kschritte span{color:var(--mute);font-size:.88rem;line-height:1.5;}

.kdirekt{display:grid;gap:.35rem;margin:0;}
.kdirekt a{font-size:1.02rem;font-weight:500;color:var(--white);
  text-decoration:none;border-bottom:1px solid var(--hair-2);
  justify-self:start;padding-bottom:1px;}
.kdirekt span{color:var(--faint);font-size:.88rem;margin-top:.3rem;}
@media (hover:hover) and (pointer:fine){
  .kdirekt a:hover{border-bottom-color:var(--accent);color:var(--accent);}
}

@media (max-width:920px){
  .kgrid{grid-template-columns:minmax(0,1fr);}
  /* Untereinander darf die Spalte nicht mehr kleben — sie stünde sonst
     über dem Formular fest, während man darin tippt. */
  .kseite{position:static;grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:620px){
  .kform .fields{grid-template-columns:minmax(0,1fr);}
  .kseite{grid-template-columns:minmax(0,1fr);}
}

/* =========================================================
   Die Gabelung
   Zwei Wege, einmal und deutlich. Beide Karten sind gleich stark gebaut —
   sobald eine dominiert, ist es keine Gabelung mehr, sondern eine Empfehlung
   mit Alibi daneben.

   Die weiße Schrift steht auf Fotos, also braucht sie einen Schleier. Der
   erste Versuch begann bei 42 % — nachgerechnet über jedes Pixel beider
   Aufnahmen stand Weiß dort auf der hellsten Stelle bei 2,96:1, also weit
   unter der Grenze. Jetzt beginnt er bei 62 %; die Werte stehen unten an
   den einzelnen Zeilen.
   ========================================================= */
.gabel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.8rem,1.8vw,1.3rem);}
.gabel-weg{position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;
  min-height:clamp(17rem,34vh,23rem);
  padding:clamp(1.4rem,3vw,2.2rem);border-radius:20px;
  background-color:#141013;background-size:cover;background-position:center;
  color:#FFFFFF;text-decoration:none;
  transition:transform .45s var(--e),box-shadow .45s var(--e);}
/* Der Schleier liegt als eigene Ebene über dem Bild, nicht im
   background-image daneben: so kann er sich unter der Maus verstärken,
   ohne dass das Foto neu geladen oder neu skaliert wird. */
.gabel-weg::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(168deg,
    rgba(12,10,11,.62) 0%,rgba(12,10,11,.80) 52%,rgba(12,10,11,.92) 100%);
  transition:opacity .45s var(--e);}
.gabel-weg--ag{background-image:url("img/gabel-ag.jpg");}
.gabel-weg--an{background-image:url("img/kandidaten-hand.jpg");}

/* Kennzeichnung 4,9:1, Fließtext 4,8:1, Überschrift und Verweis 5,8:1 —
   jeweils auf der hellsten Stelle, die das Foto an dieser Stelle zeigt. */
.gabel-nr{font:500 .62rem/1 var(--m);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.88);}
.gabel h2{margin:.9rem 0 .6rem;max-width:16ch;
  font-size:clamp(1.35rem,1.1rem + 1.1vw,1.9rem);font-weight:600;
  letter-spacing:-.03em;line-height:1.12;color:#FFFFFF;}
.gabel p{max-width:34ch;color:rgba(255,255,255,.86);
  font-size:.96rem;line-height:1.55;}
/* Der Verweis sitzt unten, egal wie lang der Text darüber ausfällt. */
.gabel-mehr{margin-top:auto;padding-top:1.4rem;
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.95rem;font-weight:600;color:#FFFFFF;}
.gabel-mehr svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s var(--e);}

@media (hover:hover) and (pointer:fine){
  .gabel-weg:hover{transform:translateY(-4px);
    box-shadow:0 30px 60px -34px rgba(12,10,11,.7);}
  .gabel-weg:hover::before{opacity:.82;}
  .gabel-weg:hover .gabel-mehr svg{transform:translateX(4px);}
}
.gabel-weg:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
@media (prefers-reduced-motion:reduce){
  .gabel-weg,.gabel-weg::before,.gabel-mehr svg{transition:none;}
  .gabel-weg:hover{transform:none;}
}
@media (max-width:760px){
  .gabel{grid-template-columns:minmax(0,1fr);}
  .gabel-weg{min-height:clamp(13rem,26vh,17rem);}
}

/* =========================================================
   Der freie Platz im Team
   Dieselbe Kachel wie die acht daneben, das Bild darin aber unscharf und
   abgedunkelt: das Team geht weiter, man sieht nur nicht mehr, wer.

   Die Unschärfe braucht die Vergrößerung daneben. Ein Weichzeichner
   greift über die Kanten des Bildes hinaus und zieht dort Durchsichtigkeit
   herein; ohne die 12 Prozent Zuschlag stünde außen ein heller Saum.

   Kontraste auf der hellsten Stelle unter dem Schleier (rgb(89,88,89)):
   die obere Zeile in Weiß 7,1:1, die darunter mit 74 % Deckung 5,3:1.
   ========================================================= */
.person--mehr{display:block;text-decoration:none;color:inherit;}
.person--mehr figure{position:relative;overflow:hidden;background:#141013;}

/* Genauer als „.person img" weiter oben — sonst gewinnt dort der
   Graustich der Portraits und überschreibt die Unschärfe. */
/* Absolut gesetzt, damit das Bild keine Höhe beiträgt. Als Band über die
   volle Breite hätte es sich sonst auf sein eigenes Format aufgezogen —
   1660 px hoch. So gibt allein die Mindesthöhe darüber den Ausschlag. */
.person--mehr img.mehr-bild{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  filter:blur(9px) grayscale(.45) contrast(1.02);
  transform:scale(1.12);
  transition:transform .6s var(--e);}
.person--mehr figure::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(178deg,
    rgba(14,11,12,.52) 0%,rgba(14,11,12,.70) 46%,rgba(14,11,12,.86) 100%);}

.person--mehr figcaption{position:absolute;inset:0;z-index:2;
  display:grid;align-content:end;justify-items:center;gap:.4rem;
  padding:clamp(1rem,2.2vw,1.5rem);text-align:center;}
.person--mehr figcaption b{
  font-size:clamp(1rem,.93rem + .38vw,1.2rem);font-weight:600;
  letter-spacing:-.02em;color:#FFFFFF;}
.person--mehr figcaption > span:not(.mehr-knopf){
  font-size:.9rem;line-height:1.4;color:rgba(255,255,255,.74);}
/* Genauer als „.person span" weiter oben. Ohne den zusätzlichen Namen
   gewann dort die gedämpfte Textfarbe — auf der hellen Haut ein dunkles
   Grau, und die Beschriftung stand mit rund 1,4:1 fast unsichtbar auf der
   dunklen Kachel. Genau das war der Grund, warum der Knopf nicht zu
   erkennen war.

   Gefüllt statt umrandet: ein Umriss auf dunklem Grund neben zwei Zeilen
   heller Schrift verschwindet, die weiße Fläche trägt. Schrift auf Fläche
   17,9:1. */
.person--mehr .mehr-knopf{margin-top:.8rem;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;padding:.55rem 1.5rem;border-radius:100px;
  border:1px solid transparent;background:#FFFFFF;
  font-size:.92rem;font-weight:600;letter-spacing:-.005em;color:#100D0E;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.6);
  transition:background .3s var(--e),transform .3s var(--e);}

@media (hover:hover) and (pointer:fine){
  .person--mehr:hover img.mehr-bild{transform:scale(1.18);}
  .person--mehr:hover .mehr-knopf{background:#F0EAE8;transform:translateY(-1px);}
}
.person--mehr:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:16px;}
@media (prefers-reduced-motion:reduce){
  img.mehr-bild,.mehr-knopf{transition:none;}
  .person--mehr:hover img.mehr-bild{transform:scale(1.12);}
}

/* =========================================================
   In Zahlen — die schmale Zeile unter dem Hero
   Vier Angaben nebeneinander, getrennt nur durch eine Haarlinie. Als
   Beschreibungsliste ausgezeichnet: Zahl und Erklärung gehören paarweise
   zusammen, und Vorlesehilfen geben sie dann auch als Paar aus.
   ========================================================= */
/* ---------- Die Ausgangslage ----------
   Nutzt dasselbe Raster wie das Band auf der Über-uns-Seite (.ub): vier
   Karten links, ein hohes Bild rechts. Hier stehen deshalb nur die
   Abweichungen — die Überschriften sind Zitate und dürfen breiter laufen
   als die Stichworte dort. */
.sec--lage .ub-karte h3{max-width:26ch;line-height:1.32;}

.zahlen{margin-top:clamp(2.4rem,5.5vh,3.6rem);
  padding-top:clamp(1.6rem,3.5vh,2.4rem);border-top:1px solid var(--hair);}

@media (max-width:860px){
  .lage{grid-template-columns:minmax(0,1fr);gap:clamp(1.2rem,3vh,1.8rem);}
}

.zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,2.4vw,2.2rem);}
.zahl{padding-left:clamp(1rem,2.4vw,2.2rem);border-left:1px solid var(--hair);
  min-width:0;}
.zahl:first-child{padding-left:0;border-left:0;}
.zahl dt{font-size:clamp(1.7rem,1.2rem + 1.9vw,2.5rem);font-weight:600;
  letter-spacing:-.04em;line-height:1;color:var(--white);}
/* Einheit und Pluszeichen kleiner und leichter — die Zahl soll tragen. */
.zahl dt span{font-size:.44em;font-weight:500;letter-spacing:-.01em;
  color:var(--mute);}
.zahl dd{margin:.6rem 0 0;color:var(--mute);
  font-size:.92rem;line-height:1.5;max-width:26ch;}

@media (max-width:860px){
  .zahlen{grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(1.2rem,3.5vh,1.8rem) clamp(1rem,2.4vw,2.2rem);}
  /* In zwei Spalten steht die dritte Zahl links — dort darf keine
     Trennlinie stehen, sonst hinge sie im Nichts. */
  .zahl:nth-child(odd){padding-left:0;border-left:0;}
}
@media (max-width:520px){
  .zahlen{grid-template-columns:minmax(0,1fr);}
  .zahl{padding-left:0;border-left:0;
    padding-top:1rem;border-top:1px solid var(--hair);}
  .zahl:first-child{padding-top:0;border-top:0;}
  .zahl dd{max-width:none;}
}

/* =========================================================
   So läuft es ab — vier Bildkacheln
   Kopf mit Knopf rechts daneben, darunter die Reihe. Auf breiten
   Bildschirmen stehen alle vier nebeneinander, darunter wird die Reihe
   seitlich verschiebbar.

   Die Reihe bricht bewusst aus dem Inhaltsraster aus („weg-rand"): sie
   läuft bis an beide Fensterkanten, damit die nächste Kachel halb ins
   Bild schaut und zum Wischen einlädt. Das Anfangs- und Endpolster hält
   die erste und letzte Kachel trotzdem auf der Textkante.
   ========================================================= */
/* Kennzeichnung und Überschrift stehen links zusammen, der Knopf rechts
   daneben. Alle drei als Geschwister nebeneinander hätten die Überschrift
   in die Mitte gedrückt — dort steht sie sonst nirgends auf der Seite. */
.weg-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:1rem 2rem;}
.weg-kopf > div{min-width:0;}
.weg-kopf > .btn{flex:none;min-height:48px;}

.weg-rand{margin-top:clamp(1.5rem,3.4vh,2.2rem);}
.weg-reihe{display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:clamp(.8rem,1.6vw,1.2rem);
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);}
/* Ohne sichtbaren Rahmen, aber mit Ziel: wer mit der Tastatur hineingeht,
   muss sehen, dass die Reihe den Fokus hat. */
.weg-reihe:focus-visible{outline:2px solid var(--accent);outline-offset:6px;
  border-radius:20px;}

.weg-karte{min-width:0;}
.weg-karte figure{position:relative;margin:0;overflow:hidden;
  border-radius:24px;aspect-ratio:3/4;background:var(--bg-2);}
.weg-karte img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--e);}
/* Die Nummer sitzt auf dem Bild und braucht Grund unter sich — die
   Aufnahmen sind oben hell. */
.weg-nr{position:absolute;top:.9rem;left:.9rem;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.1rem;height:2.1rem;padding:0 .5rem;border-radius:100px;
  background:rgba(12,10,11,.72);color:#FFFFFF;
  font:500 .68rem/1 var(--m);letter-spacing:.12em;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
.weg-karte h3{margin:1rem 0 .35rem;font-size:1.05rem;font-weight:600;
  letter-spacing:-.015em;}
.weg-karte p{color:var(--mute);font-size:.92rem;line-height:1.5;}
@media (hover:hover) and (pointer:fine){
  .weg-karte:hover img{transform:scale(1.05);}
}

/* ---------- Punkte ---------- */
.weg-punkte{display:flex;gap:.5rem;justify-content:center;
  margin-top:clamp(1.2rem,2.6vh,1.8rem);}
.weg-punkt{width:8px;height:8px;padding:0;border:0;border-radius:100px;
  background:var(--hair-2);cursor:pointer;
  transition:background .3s var(--e),width .3s var(--e);}
.weg-punkt[aria-current="true"]{width:22px;background:var(--white);}
.weg-punkt:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

@media (max-width:1080px){
  /* Ab hier wird gewischt. „scroll-padding" sorgt dafür, dass die
     angeschnappte Kachel auf derselben Kante sitzt wie der Text darüber. */
  /* Feste Spaltenbreite, nicht „minmax(0, …)": die untere Grenze null
     erlaubt dem Raster, die Spalten zusammenzudrücken, statt die Reihe
     überlaufen zu lassen — dann gibt es nichts mehr zu wischen. Genau das
     ist beim ersten Versuch passiert: vier Kacheln zu 74 Pixeln nebeneinander. */
  .weg-reihe{grid-auto-columns:clamp(13rem,42vw,17rem);
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
    max-width:none;
    -ms-overflow-style:none;scrollbar-width:none;}
  .weg-reihe::-webkit-scrollbar{display:none;}
  .weg-karte{scroll-snap-align:start;}
}
@media (max-width:620px){
  .weg-reihe{grid-auto-columns:clamp(12rem,66vw,15rem);}
  .weg-kopf > .btn{width:100%;justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
  .weg-karte img,.weg-punkt{transition:none;}
  .weg-karte:hover img{transform:none;}
  .weg-reihe{scroll-behavior:auto;}
}

/* =========================================================
   Konditionenblatt
   Links der Punkt, rechts die Regel, dazwischen eine Haarlinie. Kein
   Kasten, keine Fläche, keine großen Wörter — die Angaben tragen sich
   selbst, und genau so liest man Vertragsbedingungen auch sonst.
   ========================================================= */
.kond{margin:0;display:grid;}
.kond-zeile{display:grid;
  grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:.4rem clamp(1.4rem,4vw,3.5rem);
  padding:clamp(1rem,2.2vh,1.4rem) 0;
  border-top:1px solid var(--hair);}
.kond-zeile:first-child{border-top:0;padding-top:0;}
.kond dt{font-size:1.02rem;font-weight:600;letter-spacing:-.015em;
  color:var(--white);}
.kond dd{margin:0;color:var(--mute);font-size:.98rem;line-height:1.65;
  max-width:62ch;}

@media (max-width:700px){
  .kond-zeile{grid-template-columns:minmax(0,1fr);gap:.3rem;}
}

/* =========================================================
   Anspruch und Grundsätze
   Links die Aussage, in der Mitte die vier Grundsätze, rechts das Bild.

   Das Bild hat bewusst KEIN festes Seitenverhältnis. Vorher stand es auf
   2:3 und wurde dadurch 611 px hoch, während die Liste daneben bei rund
   500 endete — es ragte also über den letzten Grundsatz hinaus und sah aus,
   als fehlte darunter ein fünfter. Jetzt streckt es sich auf die Höhe der
   Rasterzeile, und die gibt die Liste vor. Bild und Liste enden auf
   derselben Linie, egal wie lang die Texte werden.
   ========================================================= */
.pa{display:grid;align-items:stretch;
  grid-template-columns:minmax(0,1fr) minmax(0,1.06fr) minmax(0,.92fr);
  gap:clamp(.7rem,1.5vw,1.1rem) clamp(1.4rem,3vw,2.4rem);}

.pa-bild{margin:0;position:relative;min-height:0;
  border-radius:24px;overflow:hidden;background:var(--bg-2);}
/* Absolut gesetzt, damit das Bild überhaupt keine Höhe in die Rechnung
   einbringt. Mit „height:100%" allein löst sich der Wert zu „auto" auf,
   solange der Rahmen darum keine feste Höhe hat — das Bild stand dann
   wieder in seinem eigenen Format da und ragte 209 px über die Liste
   hinaus. So gibt allein die Rasterzeile die Höhe vor, und die kommt von
   den vier Grundsätzen. */
.pa-bild img{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;}

.pa-liste{list-style:none;margin:0;padding:0;min-width:0;}
.pa-liste li{display:grid;grid-template-columns:2.8rem minmax(0,1fr);
  gap:0 .4rem;padding:clamp(1rem,2.2vh,1.4rem) 0;
  border-top:1px solid var(--hair);}
.pa-liste li:first-child{border-top:0;padding-top:0;}
.pa-n{font:500 .62rem/1 var(--m);letter-spacing:.2em;color:var(--accent);
  padding-top:.35rem;}
.pa h3{font-size:1.12rem;font-weight:600;letter-spacing:-.015em;}
.pa-liste p{margin-top:.35rem;color:var(--mute);font-size:.98rem;line-height:1.65;}

.pa-text{min-width:0;}
.pa-text .lead{margin-top:.85rem;}

@media (max-width:1000px){
  /* Zwei Spalten: die Aussage über die volle Breite, darunter Liste
     und Bild nebeneinander — in der Quelltextfolge, ohne Umsortieren. */
  .pa{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);}
  .pa-text{grid-column:1 / -1;margin-bottom:clamp(1.2rem,3vh,2rem);}
}
@media (max-width:760px){
  .pa{grid-template-columns:minmax(0,1fr);}
  .pa-bild{aspect-ratio:4/3;}
}