/*
Theme Name: Greenfield Technology
Description: Eigenes Coded Theme fuer den Greenfield-Relaunch. CSS 1:1 aus dem statischen Nachbau uebernommen, Mont als selbst gehostete Font-Dateien statt Base64.
Author: Novamira / Claude Code
Version: 0.5.3
Text Domain: greenfield
*/

@font-face{font-family:'Mont';src:url('assets/fonts/Mont-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Mont';src:url('assets/fonts/Mont-BoldItalic.otf') format('opentype');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Mont';src:url('assets/fonts/Mont-Thin.otf') format('opentype');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Mont';src:url('assets/fonts/Mont-ThinItalic.otf') format('opentype');font-weight:200;font-style:italic;font-display:swap}
/* "Mont SemiBold" als eigener Font-Name (nicht ueber font-weight an 'Mont'
   gehaengt), weil an ~20 Stellen im Theme genau dieser Literal-String als
   font-family verwendet wird -- ohne dieses @font-face war das Fontfile nie
   eingebunden und der Browser musste auf einen lokal installierten Font
   gleichen Namens ausweichen oder zurueckfallen. Dadurch sah die Schrift
   von Maschine zu Maschine / Browser zu Browser unterschiedlich aus, je
   nachdem, ob dort zufaellig ein System-Font namens "Mont SemiBold"
   vorhanden war. */
@font-face{font-family:'Mont SemiBold';src:url('assets/fonts/Mont-SemiBold.woff2') format('woff2'),url('assets/fonts/Mont-SemiBold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}

:root{
  /* CI-final laut Master-Dokument (01.09.2026): Navy #00253A · Teal #01A4A7
     · Orange #FF7F37 · Off-White #F4F8FA.
     Schrift: Mont SemiBold für H1-H5 (eingebettet), Open Sans Normal für Fließtext.
     Textfarben-Regel: Navy auf Hell; auf Dunkel Weiß/Orange/Teal je nach Passung. */
  --navy:#00253A;
  --navy-2:#013450;
  --teal:#01A4A7;
  --teal-text:#017377;
  --teal-soft:#E2F6F6;
  --grey:#5C6B77; /* neutraler Grauton fuer Link-Hover/Header-Menue-Default (2026-09-23) */
  --orange:#FF7F37;
  --orange-dark:#E96C26;
  --text:#00253A;
  --bg:#FFFFFF;
  --bg-soft:#F4F8FA;
  --line:#E3E8EB;
  --grid:rgba(1,164,167,.05); /* Feinlinie — Teal, 5 % */
  --font-heading:'Mont','Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif; /* Mont SemiBold, eingebettet (Base64) — Fallback Open Sans falls das Fontfile nicht laedt */
  --fw-heading:700; /* H1-H5 = Mont SemiBold. Korrektur: Schriftmetadaten (usWeightClass) melden 700, nicht 600 wie zunaechst angenommen */
  --fw-thin:200; /* Mont Thin, per Metadaten bestaetigt — eingebettet, aktuell auf keinem Baustein aktiv */
  --font-body:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif; /* Fliesstext, .body, .small */
  --fw-body:400; /* Open Sans hat einen echten Regular-Schnitt - kein Book-Problem mehr */
  --pad:clamp(20px,5vw,80px);
  --max:1400px; /* Menü + Content — synchron über denselben Token, siehe Baustein 0b */
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-weight:var(--fw-body);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--teal-text);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);container-type:inline-size;container-name:secwrap}
.sec{--secpad:clamp(52px,7vw,96px);padding:var(--secpad) 0;background-color:var(--bg)}
.sec--soft{background-color:var(--bg-soft)}
.sec--navy{background-color:var(--navy);color:#fff;position:relative;overflow:hidden}
.sec--grid,.sec:not(.sec--soft):not(.sec--navy):not(.sec--nogrid){background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:48px 48px,48px 48px}
.sec--nogrid{background-image:none}

/* Eyebrow: kleines Label mit Linie nach rechts, wie im PDF */
.eyebrow{display:flex;align-items:center;gap:16px;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--navy);margin:0 0 18px}
.eyebrow::after{content:'';flex:1;height:2px;background:var(--teal);max-width:420px;opacity:.5}
.sec--navy .eyebrow,.techpanel .eyebrow{color:#fff}
.sec--navy .btn--line{color:#fff;border-color:rgba(255,255,255,.55)}
.sec--navy .btn--line:hover{background:var(--teal);border-color:var(--teal);color:var(--navy)}
.sec--navy .h1,.sec--navy .h2,.sec--navy .h3{color:#fff}
.sec--navy .body{color:rgba(255,255,255,.82)}
.sec--navy .crumb{color:rgba(255,255,255,.6)}
.sec--navy .crumb b{color:#fff}
.sec--navy .portrait{color:#fff}
/* Trophäe im Hero: über die Höhe begrenzt, sonst wird sie im schmalen
   Spaltenformat unverhältnismäßig groß. */
.trophy{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.trophy img{display:block;width:auto;height:auto;max-width:100%;max-height:520px}
@media (max-width:860px){.trophy img{max-height:400px}}
.sec--navy .eyebrow{color:#fff}

.h1{font-family:var(--font-heading);font-weight:var(--fw-heading);font-size:clamp(30px,4.6vw,50px);line-height:1.18;color:var(--navy);margin:0 0 20px}
.h2{font-family:var(--font-heading);font-weight:var(--fw-heading);font-size:clamp(24px,3.4vw,36px);line-height:1.22;color:var(--navy);margin:0 0 16px}
.h4{font-family:var(--font-heading);font-weight:var(--fw-heading);font-size:15px;line-height:1.35;color:var(--navy);margin:0 0 4px}
.h5{font-family:var(--font-heading);font-weight:var(--fw-heading);font-size:13px;letter-spacing:.02em;color:var(--navy);margin:0 0 4px}
h1,h2,h3,h4,h5{font-family:var(--font-heading);font-weight:var(--fw-heading);color:var(--navy)}
.sec--navy .h1,.sec--navy .h2{color:#fff}
.body{margin:0 0 1em;color:var(--text);max-width:56ch}
.body--muted{color:var(--navy)}
.sec--navy .body{color:#C9D6DD}

/* Buttons: orange, gerundet, Versalien — wie KONTAKT / UNSERE CASES im PDF */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 28px;border-radius:8px;font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:2px solid var(--orange);transition:background .15s ease}
.btn--fill{background:var(--orange);color:var(--navy)}
.btn--fill:hover{background:var(--teal-text);border-color:var(--teal-text);color:#fff}
.btn--line{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--line:hover{background:var(--teal-text);border-color:var(--teal-text);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.btn-center{display:flex;justify-content:center;margin-top:clamp(28px,3.6vw,44px)}

/* Zweispalter Text + Bild, wie Mission/Vision/Engagement im PDF */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.split > div:not(.blkGroupHandle){container-type:inline-size;container-name:colwrap}
.split--flip > :first-child{order:2}
@media (max-width:860px){.split{grid-template-columns:1fr}.split--flip > :first-child{order:0}.split--mobile-flip > :first-child{order:2}}
.imgph{background:var(--bg-soft);border-radius:14px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
/* Motiv-Briefing im Platzhalter — normal lesbar statt Versalien-Label */
.imgph--brief,.portrait--brief{text-transform:none;letter-spacing:0;font-size:13px;line-height:1.5;text-align:left;align-items:flex-start;padding:20px 22px;border:1px dashed var(--line);flex-direction:column;gap:7px}
.imgph--brief b,.portrait--brief b{font-family:"Mont SemiBold",sans-serif;font-weight:var(--fw-heading);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--teal-text)}
.imgph--brief span,.portrait--brief span{display:block;color:var(--navy);opacity:.85}
.imgph--brief i,.portrait--brief i{font-style:normal;font-size:12px;color:var(--navy);opacity:.6}

/* Teal-Statkacheln, wie "Wofür wir stehen" im PDF */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:clamp(26px,3.4vw,40px)}
@media (max-width:900px){.stats{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.stats{grid-template-columns:1fr}}
.stat{background:var(--teal);border-radius:12px;padding:22px 20px 20px;color:var(--navy)}
.stats--text-weiss .stat{color:#fff}
.stat__pre{display:block;font-size:12px;font-weight:var(--fw-body);margin-bottom:2px;min-height:1.3em}
.stat__n{display:block;font-weight:700;font-size:clamp(34px,4.4vw,48px);line-height:1;margin-bottom:8px}
.stat__l{margin:0;font-size:13.5px;line-height:1.45;font-weight:var(--fw-body)}
.stats-caption{margin:20px 0 0;font-size:14px;color:var(--navy)}

/* Logoleiste */
.logos-title{text-align:center;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--navy);margin:0 0 26px}
.logos{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
@media (max-width:820px){.logos{grid-template-columns:repeat(2,1fr)}}
.logos div{background:#fff;border-radius:10px;aspect-ratio:16/7;display:flex;align-items:center;justify-content:center;padding:10px;text-align:center;font-size:12px;color:var(--navy)}
.logoscroll{overflow:hidden;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-soft)}
.logoscroll__track{display:flex;align-items:center;gap:clamp(60px,5.5vw,90px);width:max-content;animation:logoscroll-move 34s linear infinite}
.logoscroll:hover .logoscroll__track{animation-play-state:paused}
.logoscroll__item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:46px;padding:0;border:none;background:none;font-family:"Mont SemiBold",sans-serif;font-size:14px;color:var(--navy);white-space:nowrap;opacity:.88;transition:opacity .3s ease}
.logoscroll:hover .logoscroll__item{opacity:1}
.logoscroll__item img{display:block;width:auto;height:auto;max-height:46px;max-width:230px}
@keyframes logoscroll-move{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.logoscroll__track{animation:none}}
/* Variante im Hero: keine eigene Fläche, keine Trennlinien — das Rasterband
   des Hero läuft dahinter durch, damit beides als ein Block gelesen wird.
   Die Weichzeichnung an den Rändern lässt die Logos ein- und ausblenden
   statt hart abzuschneiden. */
.logoscroll--hero{background:none;border-top:none;border-bottom:none;padding:clamp(44px,5.2vw,78px) 0 clamp(26px,2.8vw,34px)}
.logoscroll--hero .logoscroll__track{padding:26px 0 2px;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logoscroll__label{margin:0 0 16px;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);opacity:.55}
/* Hero mit anschließendem Fließband: unten weniger Luft, damit beides
   zusammenhängt statt als zwei getrennte Blöcke zu wirken. */
.sec--hasLogos{padding-top:max(28px,calc(var(--secpad) - 30px));padding-bottom:clamp(22px,2.6vw,34px)}


/* Teal-Chips + Textblöcke, wie die Mission-Unterpunkte im PDF */
.points{display:grid;gap:22px;margin-top:6px}
.point .chip{display:inline-block;background:var(--teal);color:var(--navy);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:6px;margin-bottom:8px}
.point h3{font-weight:600;font-size:17px;color:var(--navy);margin:0 0 5px}
.point p{margin:0;font-size:15px;color:var(--navy);max-width:52ch}

/* Case-Karten, wie "Referenzen & Cases" im PDF */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,30px);margin-top:clamp(26px,3.4vw,40px)}
@media (max-width:860px){.cases{grid-template-columns:1fr}}
.vcards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(26px,3.4vw,40px)}
@media (max-width:900px){.vcards{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.vcards{grid-template-columns:1fr}}
/* Case-Karten mit Herausforderung / Lösung / Ergebnis */
.ccards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,28px);margin-top:clamp(26px,3.4vw,40px)}
@media (max-width:860px){.ccards{grid-template-columns:1fr}}
/* Karriere-Block — freierer Auftritt: getönte Fläche, versetzte Foto-Collage */
.career{position:relative;background:linear-gradient(134deg,rgba(1,164,167,.09),rgba(255,127,55,.08));border-radius:clamp(20px,2.6vw,30px);padding:clamp(26px,3.6vw,54px);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,54px);align-items:center;overflow:hidden}
@media (max-width:860px){.career{grid-template-columns:1fr;gap:34px}}
.career__body{position:relative;z-index:1}
.career__kicker{display:inline-block;margin:0 0 14px;font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#fff;background:var(--orange);border-radius:99px;padding:6px 14px}
.career h2{margin:0 0 14px}
.career__photos{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;padding-bottom:30px}
.career__photo{aspect-ratio:3/4;border-radius:16px;background:#fff;border:1px solid var(--line);display:flex;align-items:flex-end;padding:14px;font-size:11.5px;line-height:1.4;color:var(--navy);box-shadow:0 12px 30px rgba(0,37,58,.09);transition:rotate .55s cubic-bezier(.2,.7,.3,1),translate .55s cubic-bezier(.2,.7,.3,1)}
/* Zwei versetzte quadratische Fotos mit Logo-Badge — GreenfieldCare-Hero */
.gcphotos{display:grid;grid-template-columns:1fr 1fr;gap:18px;width:100%;align-items:start}
.gcphotos__item{position:relative}
.gcphotos__item--b{margin-top:48px}
.gcphotos__photo{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:18px;box-shadow:0 16px 34px rgba(0,37,58,.14)}
/* ===== Feste Hero-Hoehe auf allen Unterseiten — ohne Ausnahme =====
   430px auf jeder Bildschirmbreite, auch mobil. Inhalt und Medien passen
   sich dieser Hoehe an, nicht umgekehrt. overflow:hidden ist die harte
   Grenze: nichts kann die 430px sprengen, auch im Extremfall nicht. */
.sec--hero{height:500px;min-height:500px;max-height:500px;padding:32px 0;overflow:hidden;box-sizing:border-box}
.sec--hero > .wrap{height:100%;box-sizing:border-box}

/* Kein Stapeln auf schmalen Bildschirmen — Text und Bild bleiben
   nebeneinander, sonst wuerde die Hoehe sofort gesprengt. Ueberschreibt
   die allgemeine Split-Stapel-Regel durch hoehere Selektor-Spezifitaet.
   Jede Stufe bekommt eine EXPLIZITE Hoehe (nicht nur "zentriert" in einer
   auto-grossen Box) — das war die eigentliche Ursache des Fehlers. */
.sec--hero .split,
.sec--hero .split--ratio-a{grid-template-columns:3fr 2fr;gap:28px;align-items:stretch;height:100%;box-sizing:border-box}
/* Textspalte: selbst voller Hoehe, Inhalt darin senkrecht zentriert */
.sec--hero .split > div:first-child{display:flex;flex-direction:column;justify-content:center;height:100%;min-height:0}
.sec--hero .split > div:last-child{height:100%;max-height:100%;overflow:hidden}

/* Textspalte: kompakter, damit sie auch auf schmalen Bildschirmen passt */
.sec--hero .crumb{font-size:12px;margin:0 0 10px}
.sec--hero .eyebrow{font-size:11px;gap:10px;margin:0 0 16px}
.sec--hero .eyebrow::after{max-width:90px}
.sec--hero .h1{font-size:clamp(19px,3.4vw,40px);line-height:1.18;margin:0 0 16px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sec--hero .body{font-size:14.5px;line-height:1.55;margin:0 0 20px;max-width:none;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sec--hero .btn-row{margin-top:8px;gap:12px}
.sec--hero .btn{padding:11px 18px;font-size:11.5px}

/* Platzhalter- und Einzelbilder: fuellen die volle verfuegbare Hoehe */
.sec--hero .imgph{height:100%;aspect-ratio:auto}
.sec--hero .portrait{height:100%;aspect-ratio:auto;max-width:none}
.sec--hero .trophy{height:100%}
.sec--hero .trophy img{height:100%;max-height:100%;width:auto;object-fit:contain}

/* GreenfieldCare-Komposition: passt sich jetzt ebenfalls an, statt die
   Referenzhoehe organisch vorzugeben — die Zahl 430px ist jetzt die Regel. */
.sec--hero .gcphotos{height:100%;display:grid}
.sec--hero .gcphotos__item{height:calc(50% - 12px)}
.sec--hero .gcphotos__item--b{margin-top:24px}
.sec--hero .gcphotos__photo{height:100%;aspect-ratio:auto;object-fit:cover}
.sec--hero .gcphotos__badge{width:26%}

/* Kennzeichnung fuer Sektionen ausserhalb des Master-Dokuments — Kontext
   oder Live-Seite, nicht Nellis 1:1-Text. Dezent, aber unuebersehbar. */
.docflag{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--orange-dark);background:rgba(255,127,55,.1);border:1px solid rgba(255,127,55,.35);border-radius:99px;padding:5px 12px 5px 9px;margin:0 0 14px}
.docflag svg{width:13px;height:13px;flex:0 0 auto}
.sec--navy .docflag,.techpanel .docflag{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35)}

/* ================= Karriere-Stimmung: freier, lebendiger, einladender =================
   Gleiche Farben und Schrift wie ueberall, aber wärmere Flächen, schräge
   Foto-Collagen und Pill-Kicker statt förmlicher Eyebrows — fuer eine
   Zielgruppe, die anders angesprochen werden will als Geschaeftskunden. */

/* Pill-Kicker: generalisierte Fassung des Home-Karriere-Kickers, in zwei Farben */
.kicker{display:inline-flex;align-items:center;gap:7px;margin:0 0 14px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--orange);border-radius:99px;padding:7px 16px}
.kicker--teal{background:var(--teal-text)}
/* Eyebrow-Variante mit Farbakzent statt Navy — Struktur bleibt wie ueberall,
   nur Text und Linie bekommen Farbe statt der sonst ueblichen Navy-Neutralitaet */
.eyebrow--orange{color:var(--orange-dark)}
.eyebrow--orange::after{background:var(--orange)}
.eyebrow--teal{color:var(--teal-text)}
.eyebrow--teal::after{background:var(--teal)}

/* Warme, getönte Sektionsflaeche statt hell/navy — derselbe Verlauf wie beim
   Home-Karriere-Block, hier aber als volle Sektion nutzbar */
.sec--warm{background:linear-gradient(134deg,rgba(1,164,167,.10),rgba(255,127,55,.09))}
.sec--warm-r{background:linear-gradient(-134deg,rgba(255,127,55,.09),rgba(1,164,167,.10))}

/* Schraege Foto-Collage, wiederverwendbar (nicht nur im Home-Hero-Block) */
.tiltphotos{display:grid;grid-template-columns:1fr 1fr;gap:18px;width:100%;align-items:start}
.tiltphotos__item{position:relative;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 32px rgba(0,37,58,.1);aspect-ratio:3/4;overflow:hidden;transition:rotate .5s cubic-bezier(.2,.7,.3,1),translate .5s cubic-bezier(.2,.7,.3,1)}
.tiltphotos__item img{width:100%;height:100%;object-fit:cover;display:block}
.tiltphotos__item:nth-child(1){rotate:-3deg}
.tiltphotos__item:nth-child(2){rotate:2.4deg;translate:0 26px}
.tiltphotos:hover .tiltphotos__item{rotate:0deg}
.tiltphotos:hover .tiltphotos__item:nth-child(2){translate:0 14px}
@media (max-width:620px){.tiltphotos__item:nth-child(1),.tiltphotos__item:nth-child(2){rotate:0deg;translate:0 0}}

/* Journey: die sechs Bewerbungsschritte als lebendiger Pfad statt Formular-Kacheln */
.journey{display:flex;flex-direction:column;gap:0;counter-reset:step}
.journey__step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.6vw,30px);padding:clamp(18px,2.2vw,26px) 0}
.journey__step + .journey__step{border-top:1px dashed var(--line)}
.journey__num{counter-increment:step;width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:"Mont SemiBold",sans-serif;font-weight:var(--fw-heading);font-size:19px;flex:0 0 auto}
.journey__step:nth-child(odd) .journey__num{background:var(--orange)}
.journey__step:nth-child(even) .journey__num{background:var(--teal-text)}
.journey__body h3{font-family:"Mont SemiBold",sans-serif;font-weight:var(--fw-heading);font-size:18px;margin:2px 0 8px;color:var(--navy)}
.journey__body p{margin:0;font-size:14px;line-height:1.6;color:var(--navy);opacity:.82}

/* Benefits als warme Icon-Kacheln statt schlichter Text-Karten */
.perks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(14px,1.8vw,20px)}
.perk{background:#fff;border-radius:18px;padding:20px 18px;display:flex;align-items:center;gap:14px;border:1px solid var(--line);transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease}
.perk:nth-child(4n+1){rotate:-.6deg}
.perk:nth-child(4n+2){rotate:.5deg}
.perk:nth-child(4n+3){rotate:-.3deg}
.perk:nth-child(4n+4){rotate:.7deg}
.perk:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 16px 32px rgba(0,37,58,.12);rotate:0deg}
.perk:hover .perk__ico{transform:rotate(-8deg) scale(1.1)}
.perk__ico{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.perk__ico{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:#fff}
.perk__ico svg{width:20px;height:20px}
.perk:nth-child(5n+1) .perk__ico{background:var(--orange)}
.perk:nth-child(5n+2) .perk__ico{background:var(--teal-text)}
.perk:nth-child(5n+3) .perk__ico{background:var(--navy)}
.perk:nth-child(5n+4) .perk__ico{background:var(--orange-dark)}
.perk:nth-child(5n+5) .perk__ico{background:#55C2C4}

/* ================= Karriere-Hero: grossformatiges Mitarbeiterfoto ================= */
.herophoto{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/5;background:var(--teal)}
.herophoto img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.herophoto__stat{position:absolute;left:18px;bottom:18px;background:#fff;border-radius:14px;padding:12px 16px;box-shadow:0 14px 30px rgba(0,37,58,.18);display:flex;align-items:center;gap:10px}
.herophoto__stat__ico{width:34px;height:34px;border-radius:9px;background:var(--bg-soft);color:var(--teal-text);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.herophoto__stat__ico svg{width:18px;height:18px}
.herophoto__stat b{display:block;font-family:"Mont SemiBold",sans-serif;font-weight:var(--fw-heading);font-size:15px;color:var(--navy);line-height:1.1}
.herophoto__stat span{display:block;font-size:10.5px;color:var(--navy);opacity:.6}
/* Hero als Foto-Collage: grosses Gruppenfoto plus ueberlappende Akzentkarte */
.herocollage{position:relative}
.herocollage__main{border-radius:22px;overflow:hidden;aspect-ratio:21/9;box-shadow:0 20px 44px rgba(0,37,58,.16)}
.herocollage__main img{width:100%;height:100%;object-fit:cover;display:block}
.herocollage__accent{position:absolute;right:clamp(12px,3vw,32px);bottom:clamp(-64px,-8vw,-30px);width:clamp(120px,16vw,168px);border-radius:16px;overflow:hidden;border:4px solid #fff;box-shadow:0 16px 34px rgba(0,37,58,.22);rotate:-4deg;transition:rotate .4s cubic-bezier(.2,.7,.3,1),transform .4s cubic-bezier(.2,.7,.3,1)}
.herocollage__accent img{width:100%;height:100%;object-fit:cover;display:block}
.herocollage:hover .herocollage__accent{rotate:0deg;transform:translateY(-4px)}
@media (max-width:760px){.herocollage__main{aspect-ratio:16/10}.herocollage__accent{width:104px;bottom:-20px;right:14px}}

/* Vollflaechiger Foto-Hero: Team im Hintergrund, Text und Buttons darueber */
.heroPhotoSec{position:relative;overflow:hidden;padding-top:clamp(70px,10vw,120px)!important;padding-bottom:clamp(120px,14vw,170px)!important}
.heroPhotoSec__bg{position:absolute;inset:0;z-index:0}
.heroPhotoSec__bg img{width:100%;height:100%;object-fit:cover;display:block}
.heroPhotoSec__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(0,37,58,.96) 0%,rgba(0,37,58,.93) 38%,rgba(0,37,58,.55) 64%,rgba(0,37,58,.18) 88%)}
.heroPhotoSec__bg::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,37,58,.5),transparent 40%);z-index:1}
.heroPhotoSec .wrap{position:relative;z-index:1}
.heroPhotoSec .eyebrow{color:#fff}
.heroPhotoSec .eyebrow::after{background:#fff;opacity:.4}
.heroPhotoSec .h1{color:#fff}
.heroPhotoSec .body{color:rgba(255,255,255,.85)}
.heroPhotoSec .btn--line{color:#fff;border-color:rgba(255,255,255,.55)}
.heroPhotoSec .btn--line:hover{background:var(--teal);border-color:var(--teal);color:var(--navy)}
.heroPhotoSec__accent{position:absolute;right:clamp(20px,5vw,64px);bottom:clamp(-46px,-6vw,-30px);width:clamp(130px,15vw,180px);border-radius:16px;overflow:hidden;border:4px solid #fff;box-shadow:0 18px 38px rgba(0,37,58,.3);rotate:-4deg;z-index:2;transition:rotate .4s cubic-bezier(.2,.7,.3,1),transform .4s cubic-bezier(.2,.7,.3,1)}
.heroPhotoSec__accent img{width:100%;height:100%;object-fit:cover;display:block}
.heroPhotoSec__accent2{position:absolute;left:clamp(20px,5vw,64px);top:clamp(18px,4vw,40px);width:clamp(88px,10vw,120px);border-radius:14px;overflow:hidden;border:3px solid #fff;box-shadow:0 14px 30px rgba(0,37,58,.28);rotate:5deg;z-index:2;transition:rotate .4s cubic-bezier(.2,.7,.3,1)}
.heroPhotoSec__accent2 img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1}
.heroPhotoSec:hover .heroPhotoSec__accent2{rotate:0deg}
@media (max-width:640px){.heroPhotoSec__accent2{display:none}}
.heroPhotoSec:hover .heroPhotoSec__accent{rotate:0deg;transform:translateY(-4px)}
.heroPhotoSec__stat{position:absolute;left:clamp(20px,5vw,64px);bottom:clamp(18px,3vw,30px);z-index:2;background:rgba(255,255,255,.97);border-radius:14px;padding:11px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 12px 26px rgba(0,37,58,.2)}
@media (max-width:640px){.heroPhotoSec__accent{display:none}}
@media (max-width:760px){.herophoto{aspect-ratio:4/3}}

/* ================= Journey 2.0: verspielter, geschwungener Bewerbungspfad =================
   Zickzack-Layout, farbige Icon-Blasen statt Nummern, dezente Konfetti-
   Punkte im Hintergrund, gestaffelte Einblendung beim Scrollen. */

.pathwrap{position:relative;padding:8px 0}
/* Dezente Konfetti-Punkte als Textur — rein dekorativ, per SVG-Musterkachel */
.pathwrap::before{content:"";position:absolute;inset:-20px -40px;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(circle, var(--teal) 3px, transparent 3.5px),
    radial-gradient(circle, var(--orange) 2.5px, transparent 3px),
    radial-gradient(circle, var(--navy) 2px, transparent 2.5px);
  background-size:220px 220px, 260px 260px, 190px 190px;
  background-position:10px 30px, 140px 160px, 60px 190px;
  background-repeat:repeat-y;
  mask-image:linear-gradient(180deg,#000,#000 92%,transparent);
}

.path{position:relative;z-index:1;display:flex;flex-direction:column;gap:0}
/* Geschwungene Verbindungslinie: gewellte SVG-Kachel, senkrecht wiederholt */
.path::before{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:64px;transform:translateX(-50%);z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='160' viewBox='0 0 64 160'%3E%3Cpath d='M32 0 C 8 30, 56 50, 32 80 C 8 110, 56 130, 32 160' fill='none' stroke='%23E3E8EB' stroke-width='3'/%3E%3C/svg%3E");
  background-repeat:repeat-y;background-size:64px 160px;
}
@media (max-width:760px){.path::before{left:34px;width:20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='120' viewBox='0 0 20 120'%3E%3Cpath d='M10 0 V120' fill='none' stroke='%23E3E8EB' stroke-width='3'/%3E%3C/svg%3E");
  background-size:20px 120px}}

.path__step{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(20px,3vw,40px);padding:clamp(20px,2.6vw,32px) 0}
.path__step:nth-child(even){flex-direction:row-reverse}
.path__step__card{flex:1;background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(18px,2vw,24px);box-shadow:0 10px 26px rgba(0,37,58,.07);transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease}
.path__step:hover .path__step__card{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,37,58,.12)}
.path__step__card h3{margin:0 0 8px;font-family:"Mont SemiBold",sans-serif;font-weight:var(--fw-heading);font-size:18px;color:var(--navy)}
.path__step__card p{margin:0;font-size:14px;line-height:1.6;color:var(--navy);opacity:.82}
.path__badge{flex:0 0 auto;width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 10px 22px rgba(0,37,58,.16);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.path__step:hover .path__badge{transform:scale(1.08) rotate(-4deg)}
.path__badge svg{width:30px;height:30px;color:#fff}
.path__badge__num{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font-family:"Mont SemiBold",sans-serif;font-weight:var(--fw-heading);font-size:12px;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.path__step:nth-child(6n+1) .path__badge{background:linear-gradient(140deg,var(--orange),var(--orange-dark))}
.path__step:nth-child(6n+2) .path__badge{background:linear-gradient(140deg,var(--teal),var(--teal-text))}
.path__step:nth-child(6n+3) .path__badge{background:linear-gradient(140deg,var(--navy),#0a3a56)}
.path__step:nth-child(6n+4) .path__badge{background:linear-gradient(140deg,#55C2C4,var(--teal))}
.path__step:nth-child(6n+5) .path__badge{background:linear-gradient(140deg,var(--orange-dark),#c9541a)}
.path__step:nth-child(6n+6) .path__badge{background:linear-gradient(140deg,var(--teal-text),var(--navy))}

@media (max-width:760px){
  .path__step,.path__step:nth-child(even){flex-direction:row;gap:16px}
  .path__badge{width:56px;height:56px}
  .path__badge svg{width:24px;height:24px}
}

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .path__step{animation:gf-rise linear both;animation-timeline:view();animation-range:entry 4% entry 42%}
  }
}

/* ================= Benefits als Moodboard: freischwebend, ueberlappend =================
   Ersetzt das gleichfoermige Kachelraster durch eine lose gestreute
   Anordnung mit bewusster Ueberlappung. Karten starten staerker verdreht
   und leicht versetzt, "setzen sich" beim Scrollen in ihre schraege
   Ruheposition — die bleibt dauerhaft schraeg, nicht gerade. */
.moodboard{position:relative;display:flex;flex-wrap:wrap;gap:0;padding:16px 0 34px;width:100%}
/* 2026-09-28 Feedback: Karten insgesamt groesser, verspielter verteilt (mehr
   Rotations-/Versatz-Varianten als vorher, mod 5 statt mod 7) und ueber
   Farbvarianten editierbar (siehe moodcard--*). */
.moodcard{position:relative;flex:0 0 auto;width:clamp(210px,25vw,290px);margin:-6px -18px 30px 18px;background:#fff;border-radius:18px;padding:24px 22px;box-shadow:0 12px 26px rgba(0,37,58,.1);display:flex;flex-direction:column;gap:14px;z-index:1;
  --rest-rot:0deg;--rest-x:0px;--rest-y:0px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease,z-index 0s}
.moodcard:hover{transform:translate(var(--rest-x),calc(var(--rest-y) - 6px)) rotate(0deg) scale(1.06)!important;box-shadow:0 20px 40px rgba(0,37,58,.16);z-index:5}
.moodcard__ico{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--orange);flex:0 0 auto}
.moodcard__ico svg{width:24px;height:24px}
.moodcard h3{margin:0;font-family:"Mont SemiBold",sans-serif;font-weight:var(--fw-heading);font-size:20px;line-height:1.3;color:var(--navy)}
.moodcard h3 mark{background:none;color:var(--orange-dark);font-weight:800}
.moodcard h3 strong{font-weight:800}
.moodcard:nth-child(5n+1){--rest-rot:-7deg;margin-top:10px}
.moodcard:nth-child(5n+2){--rest-rot:5deg;margin-top:48px}
.moodcard:nth-child(5n+3){--rest-rot:-9deg;margin-top:-16px}
.moodcard:nth-child(5n+4){--rest-rot:8deg;margin-top:30px}
.moodcard:nth-child(5n+5){--rest-rot:-4deg;margin-top:0}
.moodcard:nth-child(10n+1) .moodcard__ico{background:var(--orange)}
.moodcard:nth-child(10n+2) .moodcard__ico{background:var(--teal-text)}
.moodcard:nth-child(10n+3) .moodcard__ico{background:var(--navy)}
.moodcard:nth-child(10n+4) .moodcard__ico{background:var(--orange-dark)}
.moodcard:nth-child(10n+5) .moodcard__ico{background:#55C2C4}
.moodcard:nth-child(10n+6) .moodcard__ico{background:var(--teal)}
.moodcard:nth-child(10n+7) .moodcard__ico{background:var(--navy)}
.moodcard:nth-child(10n+8) .moodcard__ico{background:var(--orange)}
.moodcard:nth-child(10n+9) .moodcard__ico{background:var(--teal-text)}
.moodcard:nth-child(10n+10) .moodcard__ico{background:var(--orange-dark)}

/* Editierbare Kartenfarbe (2026-09-28 Feedback) -- Icon-Chip wechselt auf
   dunklem/farbigem Grund zu einer hellen, transluzenten Flaeche statt der
   eigenen Akzentfarbe, damit er sichtbar bleibt. */
.moodcard.moodcard--soft{background:var(--bg-soft)}
.moodcard.moodcard--navy{background:var(--navy)}
.moodcard.moodcard--navy h3{color:#fff}
.moodcard.moodcard--navy .moodcard__ico{background:rgba(255,255,255,.14)}
.moodcard.moodcard--orange{background:var(--orange)}
.moodcard.moodcard--orange h3{color:#fff}
.moodcard.moodcard--orange h3 mark{color:var(--navy)}
.moodcard.moodcard--orange .moodcard__ico{background:rgba(255,255,255,.22)}
.moodcard.moodcard--teal{background:var(--teal)}
.moodcard.moodcard--teal h3{color:#fff}
.moodcard.moodcard--teal .moodcard__ico{background:rgba(255,255,255,.22)}
.moodcard.moodcard--warm{background:linear-gradient(134deg,rgba(1,164,167,.16),rgba(255,127,55,.15))}

.moodcard{transform:translate(var(--rest-x),var(--rest-y)) rotate(var(--rest-rot))}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .moodcard{animation:settle-in linear both;animation-timeline:view();animation-range:entry 6% entry 46%}
  }
}
@keyframes settle-in{
  from{opacity:0;transform:translate(calc(var(--rest-x) - 26px), calc(var(--rest-y) + 30px)) rotate(calc(var(--rest-rot) - 14deg)) scale(.9)}
  to{opacity:1;transform:translate(var(--rest-x),var(--rest-y)) rotate(var(--rest-rot)) scale(1)}
}
@media (max-width:600px){
  .moodboard{gap:14px}
  .moodcard{width:calc(50% - 20px);margin:0!important;--rest-rot:0deg!important}
}

/* ================= Bewerbungsweg: Zickzack im normalen Textfluss =================
   2026-09-28 Redesign: vorher absolut positioniert an fest verdrahteten
   Pixel-Koordinaten (abgestimmt auf eine ebenso fest verdrahtete SVG-Kurve)
   -- das ueberlappte zuverlaessig, sobald eine Station mehr Text hatte als
   beim Entwurf vorgesehen. Jetzt normaler Flex-Fluss: jede Station nimmt
   genau den Platz ein, den ihr eigener Inhalt braucht, und nutzt die volle
   Breite der Inhaltsbox statt einer schmalen 420px-Spalte in der Mitte. */
.river{position:relative}
.river__svg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.river__svg path{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.river__stations{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(32px,4.5vw,56px)}
.river__station{display:flex;align-items:center;gap:clamp(24px,3.4vw,48px)}
.river__station:nth-child(even){flex-direction:row-reverse}
.river__station:nth-child(even) .river__card{text-align:right}
.river__station:nth-child(even) .river__quote{margin-left:auto;border-bottom-left-radius:12px;border-bottom-right-radius:3px}
.river__marker{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;gap:8px}

/* Karten sitzen an ihrem eigenen Inhalt fest (flex:0 1 auto statt 1) --
   Breite UND Hoehe duerfen dadurch je nach Textmenge variieren, statt jede
   Karte starr auf dieselbe Restbreite zu zwingen (2026-09-28 Feedback). */
.river__card{flex:0 1 auto;width:auto;min-width:260px;max-width:min(560px,100% - 228px);background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(20px,2.4vw,30px);box-shadow:0 10px 26px rgba(0,37,58,.07);transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease}
.river__station:hover .river__card{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,37,58,.12)}
.river__card h3{margin:0 0 8px;font-family:"Mont SemiBold",sans-serif;font-weight:var(--fw-heading);font-size:19px;color:var(--navy)}
.river__card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--navy);opacity:.82}
.river__quote{position:relative;margin-top:12px;background:var(--bg-soft);border-radius:12px;border-bottom-left-radius:3px;padding:12px 16px;font-size:13px;line-height:1.45;font-style:italic;color:var(--navy);max-width:360px}
.river__name{display:block;font-family:"Mont SemiBold",sans-serif;font-weight:var(--fw-heading);font-size:12.5px;color:var(--navy);text-align:center}

/* Bild-/Icon-Marker: mindestens 125% groesser als der vorherige 72-76px-Kreis
   (2026-09-28 Feedback) -- 180px, gleich fuer Foto- und Icon-Stationen. */
.river__badge,.river__person{flex:0 0 auto;width:180px;height:180px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.river__station:hover .river__badge,.river__station:hover .river__person{transform:scale(1.06)}
.river__badge svg{width:64px;height:64px;color:#fff}
.river__badge__num{position:absolute;top:-8px;right:-8px;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font-family:"Mont SemiBold",sans-serif;font-weight:var(--fw-heading);font-size:14px;display:flex;align-items:center;justify-content:center;border:3px solid #fff}
.river__station:nth-child(6n+1) .river__badge{background:linear-gradient(140deg,var(--orange),var(--orange-dark))}
.river__station:nth-child(6n+2) .river__badge{background:linear-gradient(140deg,var(--teal),var(--teal-text))}
.river__station:nth-child(6n+3) .river__badge{background:linear-gradient(140deg,var(--navy),#0a3a56)}
.river__station:nth-child(6n+4) .river__badge{background:linear-gradient(140deg,#55C2C4,var(--teal))}
.river__station:nth-child(6n+5) .river__badge{background:linear-gradient(140deg,var(--orange-dark),#c9541a)}
.river__station:nth-child(6n+6) .river__badge{background:linear-gradient(140deg,var(--teal-text),var(--navy))}

.river__person{border:4px solid #fff;box-shadow:0 14px 30px rgba(0,37,58,.2);background:var(--bg-soft);overflow:hidden}
.river__person img{width:100%;height:100%;object-fit:cover;display:block}

/* Abschluss-Schritt: kleiner Konfetti-Ausbruch statt reinem Icon-Kreis */
.river__badge--finale{position:relative}
.river__badge--finale::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,rgba(1,164,167,.28),transparent 70%);z-index:-1}
.river__badge--finale::after{content:"";position:absolute;inset:-22px;background-image:
    radial-gradient(circle, var(--orange) 2.5px, transparent 3px),
    radial-gradient(circle, var(--teal) 2px, transparent 2.5px),
    radial-gradient(circle, var(--navy) 2px, transparent 2.5px);
  background-position:0 0, 70% 10%, 20% 80%, 90% 70%;
  background-size:44px 44px;opacity:.7;z-index:-1;pointer-events:none}

@media (max-width:760px){
  .river__svg{display:none}
  .river__station,.river__station:nth-child(even){flex-direction:column;text-align:center;gap:18px}
  .river__station:nth-child(even) .river__card{text-align:center}
  .river__station:nth-child(even) .river__quote{margin-left:0;margin-right:0}
  .river__card{max-width:100%}
  .river__badge,.river__person{width:120px;height:120px}
  .river__badge svg{width:44px;height:44px}
}

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .river__station{animation:gf-rise linear both;animation-timeline:view();animation-range:entry 4% entry 42%}
  }
}
.perk h3{margin:0;font-family:"Mont SemiBold",sans-serif;font-weight:var(--fw-heading);font-size:14.5px;line-height:1.3;color:var(--navy)}

/* Stationen mit Scroll-Fokus: der Pfad ganz links steht fest -- von der
   ersten bis zur letzten Station immer komplett sichtbar. Nur der orangene
   Fokus-Punkt und das dazugehoerige Bild wechseln beim Scrollen (JS toggelt
   .is-active, siehe main.js). Mischung aus dem strikten Portfolio-Aufbau
   und dem Bewerbungsweg. */
.stationen__grid{display:grid;grid-template-columns:24px 180px 1fr;gap:clamp(20px,4vw,48px);align-items:start}
/* Zentrierung bewusst NUR ueber "top" (calc), nie per transform: eine
   negative translateY() auf einem position:sticky-Element wird vom
   Sticky-Clamping ignoriert und kann die Box ueber den Sektionsrand hinaus
   in die vorherige Sektion schieben (siehe 2026-09-24 Bugfix). "top" dagegen
   ist Teil der reglaeren Sticky-Berechnung und bleibt sauber begrenzt. */
.stationen__track{position:sticky;top:calc(50vh - 130px);width:24px;height:260px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:12px 0}
.stationen__track::before{content:"";position:absolute;top:12px;bottom:12px;width:2px;background:var(--teal);opacity:.3}
.stationen__dot{width:8px;height:8px;border-radius:50%;background:var(--teal);opacity:.5;border:2px solid var(--bg,#fff);padding:0;cursor:pointer;position:relative;z-index:1;flex:0 0 auto;transition:width .35s cubic-bezier(.34,1.56,.64,1),height .35s cubic-bezier(.34,1.56,.64,1),background-color .3s ease,opacity .3s ease,box-shadow .3s ease}
.stationen__dot.is-active{width:26px;height:26px;background:var(--orange);opacity:1;box-shadow:0 0 0 6px rgba(255,127,55,.22),0 4px 14px rgba(255,127,55,.45)}
.stationen__dot.is-active::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--orange);opacity:.5;animation:stationen-pulse 1.8s ease-out infinite}
.stationen__imgs{position:sticky;top:calc(50vh - 113px);width:180px;aspect-ratio:4/5}
.stationen__img{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.stationen__img.is-active{opacity:1}
.stationen__img img{width:100%;height:100%;object-fit:cover;border-radius:14px;box-shadow:0 18px 40px rgba(0,37,58,.14)}
.stationen__list{display:flex;flex-direction:column;gap:clamp(56px,9vw,104px)}
/* Fokus-Station deutlich hervorheben: inaktive Stationen treten zurueck,
   die im Sichtbereich befindliche steht klar im Vordergrund. */
.stationen__station{opacity:.4;transition:opacity .4s ease}
.stationen__station.is-active{opacity:1}
.stationen__station.is-active .eyebrow{color:var(--orange)}
.stationen__station.is-active .eyebrow::after{background:var(--orange)}
@keyframes stationen-pulse{from{transform:scale(1);opacity:.5}to{transform:scale(1.5);opacity:0}}
@media (max-width:860px){
  .stationen__grid{grid-template-columns:1fr}
  .stationen__track{display:none}
  .stationen__imgs{position:relative;top:auto;width:130px;margin-bottom:20px}
  .stationen__station{opacity:1}
}
@media (prefers-reduced-motion: reduce){.stationen__img{transition:none}.stationen__dot{transition:none}.stationen__dot.is-active::after{animation:none;display:none}.stationen__station{transition:none}}

/* Akkordion (FAQ/Q&A): natives <details>/<summary>, eigener Chevron statt
   Browser-Standardmarker, keine Hoehen-Animation noetig -- klappt sofort auf/zu. */
.akkordion{display:flex;flex-direction:column;max-width:820px}
.akkordion__item{border-bottom:1px solid var(--line)}
.akkordion__item:first-child{border-top:1px solid var(--line)}
.akkordion__q{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 2px;font-family:"Mont SemiBold",sans-serif;font-weight:var(--fw-heading);font-size:17px;line-height:1.3;color:var(--navy)}
.akkordion__q::-webkit-details-marker{display:none}
.akkordion__q::after{content:"";flex:0 0 auto;width:10px;height:10px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(45deg);transition:transform .25s ease;margin-right:2px}
.akkordion__item[open] .akkordion__q::after{transform:rotate(-135deg)}
.akkordion__item:hover .akkordion__q{color:var(--teal-text)}
.akkordion__a{padding:0 2px 22px}
.akkordion__a > *:first-child{margin-top:0}
.akkordion__a > *:last-child{margin-bottom:0}

/* Lightbox: generischer Klick-zu-Grossansicht-Mechanismus fuer jedes Bild mit
   [data-lightbox-src] (aktuell die Bildergalerie-Sektion) -- eigene
   Body-Klasse statt .hasModalOpen, damit sie unabhaengig vom caseModal bleibt. */
.lightbox__trigger{all:unset;cursor:zoom-in;display:block;width:100%}
.lightbox__trigger:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:14px}
.lightbox{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:24px}
.lightbox.is-open{display:flex}
.lightbox::before{content:"";position:absolute;inset:0;background:rgba(0,37,58,.8);backdrop-filter:blur(2px)}
.lightbox__img{position:relative;max-width:min(1100px,92vw);max-height:88vh;width:auto;height:auto;display:block;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.lightbox__close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:8px;border:1px solid rgba(255,255,255,.3);background:rgba(0,37,58,.6);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1}
.lightbox__close:hover{background:var(--teal)}
body.hasLightboxOpen{overflow:hidden}

/* Team-Konstellation: verspielte, sich ueberlappende Kreisreihe statt
   schlichter Flex-Row — passend zur Karriere-Bildsprache. */
.constellation{display:flex;align-items:center;flex-wrap:wrap;gap:0;margin-top:28px}
.constellation .path__person{margin-right:-14px;border:3px solid #fff;transition:transform .35s cubic-bezier(.34,1.56,.64,1),z-index 0s;position:relative}
.constellation .path__person:hover{transform:translateY(-6px) scale(1.12);z-index:5}
.constellation .path__person:nth-child(odd){transform:translateY(-6px) rotate(-3deg)}
.constellation .path__person:nth-child(even){transform:translateY(4px) rotate(3deg)}
.constellation .path__person:hover{rotate:0deg}
.constellation .path__person:nth-child(3n+1){width:76px;height:76px}
.constellation .path__person:nth-child(3n+2){width:60px;height:60px}
.constellation .path__person:nth-child(3n+3){width:68px;height:68px}
.gcphotos__badge{position:absolute;left:-16px;bottom:-16px;width:30%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:4px solid #fff;box-shadow:0 8px 20px rgba(0,37,58,.22)}
@media (max-width:620px){.gcphotos__item--b{margin-top:30px}.gcphotos__badge{width:26%;left:-10px;bottom:-10px;border-width:3px}}
.career__photo:nth-child(1){rotate:-2.6deg}
.career__photo:nth-child(2){rotate:2.2deg;translate:0 30px}
.career:hover .career__photo{rotate:0deg}
.career:hover .career__photo:nth-child(2){translate:0 18px}
@media (prefers-reduced-motion: reduce){.career__photo{transition:none}}
@media (max-width:520px){.career__photos{grid-template-columns:1fr;padding-bottom:0}.career__photo:nth-child(1),.career__photo:nth-child(2){rotate:0deg;translate:0 0}}

/* ===== Vorstands-Portrait: freigestellt, unten am Sektionsrand angesetzt =====
   Die Sektion verliert dafür ihren unteren Innenabstand, damit die Unterkante
   des Bildes exakt mit der Sektionskante abschliesst. */
/* Der untere Innenabstand bleibt erhalten (Text soll symmetrisch stehen);
   nur das Portrait ragt per negativem Aussenabstand bis zur Sektionskante. */
/* Vision-Diagramm: volle Inhaltsbreite, auf schmalen Bildschirmen seitlich
   scrollbar statt unlesbar zusammengequetscht. */
.visiondia{margin:clamp(28px,3.4vw,42px) 0 0;overflow-x:auto;scrollbar-width:thin;padding-bottom:6px}
.herodia{width:100%;display:flex;justify-content:center}
.herodia svg{display:block;width:100%;max-width:330px;height:auto}

/* ===== Service-Karten: gleichrangige Leistungen nebeneinander ===== */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px);margin-top:clamp(28px,3.4vw,42px)}
@media (max-width:900px){.svcs{grid-template-columns:1fr}}
.svc{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:13px;transition:transform .36s cubic-bezier(.2,.7,.3,1),box-shadow .36s ease,border-color .36s ease}
.svc:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,37,58,.11);border-color:var(--teal)}
.svc__ico{width:46px;height:46px;border-radius:12px;background:var(--bg-soft);color:var(--teal-text);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.svc__ico svg{width:25px;height:25px;display:block}
.svc__tag{margin:0;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-text)}
.svc h3{font-family:"Mont SemiBold",sans-serif;font-weight:var(--fw-heading);font-size:20px;line-height:1.28;margin:0;color:var(--navy)}
.svc__lead{margin:0;font-size:14px;line-height:1.6;color:var(--navy);opacity:.82;font-weight:var(--fw-body)}
.svc__list{list-style:none;margin:auto 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
.svc__list li{position:relative;padding-left:17px;font-size:13.5px;line-height:1.5;color:var(--navy);opacity:.82}
.svc__list li::before{content:'';position:absolute;left:0;top:.52em;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.svc__more{margin:16px 0 0;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);text-decoration:none;transition:color .2s ease;display:inline-block}
.svc__more:hover,.svc:hover .svc__more{color:var(--grey);text-decoration:underline}
.vcard__more{margin:auto 0 0;padding-top:14px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);text-decoration:none;transition:color .2s ease;display:inline-block}
.vcard__more:hover,.vcard:hover .vcard__more{color:var(--grey);text-decoration:underline}
/* Quernavigation zwischen gleichrangigen Seiten */
.pilllinks{display:flex;flex-wrap:wrap;gap:9px 10px;margin-top:clamp(22px,2.6vw,30px)}
.pilllinks a{font-size:13px;font-weight:600;color:var(--navy);text-decoration:none;border:1px solid var(--line);border-radius:99px;padding:7px 15px;background:#fff;white-space:nowrap;transition:background .22s ease,border-color .22s ease,color .22s ease}
.pilllinks a:hover{background:var(--teal-text);border-color:var(--teal-text);color:#fff}
.pilllinks a[aria-current="page"]{background:var(--bg-soft);color:var(--navy);opacity:.55;pointer-events:none}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .svc{animation:gf-rise linear both;animation-timeline:view();animation-range:entry 4% entry 44%}
    .svcs > .svc:nth-child(2){animation-range:entry 7% entry 47%}
    .svcs > .svc:nth-child(3){animation-range:entry 10% entry 50%}
  }
}
.visiondia svg{display:block;width:100%;height:auto;min-width:660px}
.quote-grid--boss{grid-template-columns:1fr 1.05fr;align-items:center}
@media (max-width:860px){.quote-grid--boss{grid-template-columns:1fr}}
.boss{position:relative;margin:0 0 calc(-1 * var(--secpad));padding:0;line-height:0;width:100%;max-width:600px;justify-self:end;align-self:end}
@media (max-width:860px){.boss{justify-self:center;max-width:460px}}
/* Netzmuster schraeg dahinter — rein dekorativ, laeuft rechts aus dem Bild
   heraus und wird vom overflow:hidden der Sektion beschnitten. */
.boss__net{position:absolute;z-index:0;right:-16%;bottom:14%;width:92%;opacity:.5;rotate:-14deg;pointer-events:none;user-select:none}
.boss__person{position:relative;z-index:1;display:block;width:100%;height:auto}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .boss{animation:gf-rise linear both;animation-timeline:view();animation-range:entry 2% entry 40%}
  }
}

/* Technologie-Panel — dunkle Fläche INNERHALB einer hellen Sektion, damit sie
   Gewicht bekommt, ohne ein drittes durchgehendes Dunkelband einzuführen. */
.techpanel{position:relative;overflow:hidden;background:var(--navy);color:#fff;border-radius:clamp(20px,2.6vw,30px);padding:clamp(28px,3.6vw,54px)}
.techpanel::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(105% 72% at 88% -6%,rgba(1,164,167,.26),transparent 60%)}
.techpanel > *{position:relative;z-index:1}
.techpanel__lead{max-width:640px;margin:0 0 clamp(26px,3vw,38px);font-size:15px;line-height:1.6;color:rgba(255,255,255,.8);font-weight:var(--fw-body)}
.techgrid{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media (max-width:780px){.techgrid{grid-template-columns:1fr}}
.techitem{padding:clamp(22px,2.4vw,30px) 0;border-top:1px solid rgba(255,255,255,.16)}
.techgrid > .techitem:nth-child(odd){padding-right:clamp(22px,3vw,44px)}
.techgrid > .techitem:nth-child(even){padding-left:clamp(22px,3vw,44px);border-left:1px solid rgba(255,255,255,.16)}
@media (max-width:780px){.techgrid > .techitem:nth-child(odd),.techgrid > .techitem:nth-child(even){padding-left:0;padding-right:0;border-left:none}}
.techitem h3{font-family:"Mont SemiBold",sans-serif;font-weight:var(--fw-heading);font-size:19px;line-height:1.3;margin:0 0 9px;color:#fff}
.techitem p{margin:0 0 12px;font-size:14px;line-height:1.58;color:rgba(255,255,255,.82);font-weight:var(--fw-body)}
.techitem__tag{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--teal);border:1px solid rgba(1,164,167,.45);border-radius:99px;padding:5px 11px}
.techpanel .btn-row{margin-top:clamp(24px,2.6vw,34px)}
/* Ohne eigene Fläche — wenn die ganze Sektion schon dunkel ist */
.techpanel--bare{background:none;border-radius:0;padding:0}
.techpanel--bare::before{display:none}

/* ================= Moderne Feinheiten — dezent gehalten ================= */
html{scroll-behavior:smooth}

/* Tiefe in den dunklen Bändern: weicher Teal-Schimmer aus der oberen Ecke.
   z-index sorgt dafür, dass der Schimmer HINTER dem Text bleibt. */
.sec--navy::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(115% 78% at 84% -8%,rgba(1,164,167,.20),transparent 62%)}
.sec--navy > .wrap{position:relative;z-index:1}

/* Mikro-Interaktionen: leichtes Anheben, einheitlich über alle Kacheln */
.vcard{transition:transform .34s cubic-bezier(.2,.7,.3,1),box-shadow .34s ease,border-color .34s ease}
.sec:not(.sec--navy) .vcard:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,37,58,.10);border-color:var(--teal)}
.sec--navy .vcard{transition:transform .34s cubic-bezier(.2,.7,.3,1),background .34s ease}
.sec--navy .vcard:hover{transform:translateY(-3px);background:rgba(255,255,255,.11)}
.stat{transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.stat:hover{transform:translateY(-3px)}
.btn{transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s ease}
.btn:hover{transform:translateY(-1px)}

/* Sanftes Einblenden beim Scrollen. Bewusst kurz und flach gehalten —
   spürbar, aber nicht als Effekt wahrnehmbar. Nutzt "translate" statt
   "transform", damit die Hover-Effekte oben nicht überschrieben werden. */
@keyframes gf-rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes gf-line{from{scale:0 1;opacity:0}to{scale:1 1;opacity:.5}}

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    :where(.sec > .wrap > .eyebrow,.sec > .wrap > .h1,.sec > .wrap > .h2,
           .sec > .wrap > .body,.sec > .wrap > .btn-row,.sec > .wrap > .split,
           .sec > .wrap > .quote-grid,.sec > .wrap > .career,.sec > .wrap > .points,
           .sec > .wrap > .cases,.sec > .wrap > .logos){
      animation:gf-rise linear both;animation-timeline:view();animation-range:entry 2% entry 40%;
    }
    /* Kachelgruppen gestaffelt, damit sie nacheinander erscheinen */
    .vcard,.stat{animation:gf-rise linear both;animation-timeline:view();animation-range:entry 4% entry 44%}
    .vcards > .vcard:nth-child(2),.stats > .stat:nth-child(2){animation-range:entry 7% entry 47%}
    .vcards > .vcard:nth-child(3),.stats > .stat:nth-child(3){animation-range:entry 10% entry 50%}
    .vcards > .vcard:nth-child(4),.stats > .stat:nth-child(4){animation-range:entry 13% entry 53%}
    .vcards > .vcard:nth-child(5){animation-range:entry 16% entry 56%}
    .vcards > .vcard:nth-child(6){animation-range:entry 19% entry 59%}
    /* Die Teal-Linie neben der Eyebrow zieht sich beim Scrollen auf */
    .eyebrow::after{transform-origin:left center;animation:gf-line linear both;animation-timeline:view();animation-range:entry 4% entry 42%}
  }
}
.ccard{--pad-x:clamp(22px,2.4vw,30px);background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:13px;transition:transform .38s cubic-bezier(.2,.7,.3,1),box-shadow .38s cubic-bezier(.2,.7,.3,1),border-color .38s ease}
.ccard:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,37,58,.13);border-color:var(--teal)}
.ccard__branch{margin:0;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-text)}
.ccard h3{font-family:"Mont SemiBold",sans-serif;font-weight:var(--fw-heading);font-size:19px;line-height:1.3;margin:0;color:var(--navy)}
.ccard__line{margin:0;font-size:14px;line-height:1.55;color:var(--navy);font-weight:var(--fw-body);opacity:.82}
/* Die Kennzahl ist der visuelle Anker — sie wird beim Überfliegen zuerst
   gelesen, der Fließtext danach nur bei Interesse. */
.ccard__metric{margin:auto 0 0;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ccard__num{font-family:"Mont SemiBold",sans-serif;font-weight:var(--fw-heading);font-size:clamp(26px,3.2vw,34px);line-height:1;color:var(--teal-text);hyphens:auto;overflow-wrap:break-word}
.ccard__unit{font-size:13px;line-height:1.35;color:var(--navy);opacity:.75;font-weight:var(--fw-body);hyphens:auto;overflow-wrap:break-word}
.ccard__more{margin:12px 0 0;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);text-decoration:none;transition:color .2s ease;display:inline-block}
.ccard__more:hover,.ccard:hover .ccard__more{color:var(--grey);text-decoration:underline}
/* Karten-Redesign 2026-09-25: Kunde/Projekt getrennt, Eck-Logo als
   Registermarke, Farbverlauf-Trennlinie, bis zu zwei Kennzahlen
   nebeneinander -- .ccard.ccard--v2 ueberschreibt gezielt die Basis-
   .ccard-Regeln (auch innerhalb .carousel), Struktur bleibt sonst gleich. */
.ccard.ccard--v2{padding:0;gap:0;overflow:hidden}
.ccard--v2 .ccard__toprow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ccard--v2 .ccard__badge{margin:0 0 0 clamp(22px,2.4vw,30px);background:var(--bg-soft);color:var(--teal-text);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:4px 12px;border-radius:20px;white-space:nowrap}
.ccard--v2 .ccard__logo{flex:0 0 34%;width:34%;aspect-ratio:16/9;background:var(--bg-soft) center/cover;border-left:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0 0 0 10px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:8%;overflow:hidden}
.ccard--v2 .ccard__logo img{max-width:100%;max-height:100%;object-fit:contain;background:#fff;padding:4px 8px;border-radius:6px;box-shadow:0 1px 4px rgba(0,37,58,.12)}
.ccard--v2 .ccard__titles{padding:clamp(16px,1.8vw,20px) clamp(22px,2.4vw,30px) 0}
.ccard--v2 .ccard__subtitle{margin:4px 0 0;font-size:13px;color:var(--grey)}
.ccard--v2 .ccard__divider{height:3px;margin-top:clamp(22px,2.4vw,28px);background:linear-gradient(90deg,var(--teal),var(--orange))}
.ccard--v2 .ccard__content{padding:clamp(22px,2.4vw,28px) clamp(22px,2.4vw,30px) clamp(24px,2.6vw,30px);display:flex;flex-direction:column;flex:1}
.ccard--v2 .ccard__footer{margin-top:auto;display:flex;flex-direction:column;gap:clamp(20px,2.4vw,28px)}
.ccard--v2 .ccard__metrics{display:flex;gap:24px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line)}
.ccard--v2 .ccard__metric{display:flex;flex-direction:column;margin:0;padding-top:0;border-top:none}
.ccard--v2 .ccard__more{margin-top:0;display:inline-block}
/* Farbverlauf-Trennlinie zwischen Kartenheader (Ueberschrift) und Inhaltstext
   -- fuer alle Karten-Familien ausser .ccard--v2 (hat schon ihre eigene volle
   Trennlinie); der Kindselektor ">" trifft deren h3 nicht, weil sie tiefer
   in .ccard__titles verschachtelt ist. Als ::after statt border-image, mit
   negativem Rand in Hoehe des jeweiligen --pad-x, damit die Linie randlos bis
   zur echten Kartenkante reicht statt nur so breit wie die Ueberschrift zu sein. */
.vcard>h3::after,.vcard__body>h3::after,.ccard>h3::after,.ccard__body>h3::after{content:'';display:block;height:3px;margin-top:13px;margin-inline:calc(var(--pad-x) * -1);background:linear-gradient(90deg,var(--teal),var(--orange))}

/* ================= Case-Karussell ================= */
.carousel{position:relative;--cgap:clamp(14px,1.8vw,22px);--cvis:4}
.carousel__track{display:flex;gap:var(--cgap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:2px 2px 14px;margin:0 -2px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.carousel__track::-webkit-scrollbar{height:7px}
.carousel__track::-webkit-scrollbar-track{background:transparent}
.carousel__track::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.carousel__track::-webkit-scrollbar-thumb:hover{background:var(--teal)}
.carousel__track > *{flex:0 0 calc((100% - (var(--cvis) - 1) * var(--cgap)) / var(--cvis));scroll-snap-align:start;min-width:0}
@media (max-width:1180px){.carousel{--cvis:3}}
@media (max-width:900px){.carousel{--cvis:2}}
@media (max-width:620px){.carousel{--cvis:1.12}}
/* Steuerpfeile — reiner Komfort; ohne sie bleibt Wischen/Scrollen möglich */
.carousel__nav{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
.carousel__btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .22s ease,border-color .22s ease,color .22s ease,opacity .22s ease}
.carousel__btn svg{width:17px;height:17px;display:block}
.carousel__btn:hover:not(:disabled){background:var(--teal-text);border-color:var(--teal-text);color:#fff}
.carousel__btn:disabled{opacity:.32;cursor:default}
.sec--navy .carousel__btn{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.sec--navy .carousel__btn:hover:not(:disabled){background:var(--teal);border-color:var(--teal);color:var(--navy)}
/* Im Karussell keine Scroll-Einblendung: die Animation würde sich auf den
   waagerechten Scrollbereich beziehen statt auf die Seite und die Karten
   beim Blättern flackern lassen. */
.carousel .ccard{animation:none}
/* Etwas kompakter, weil die Karten hier schmaler stehen */
.carousel .ccard{--pad-x:clamp(20px,2vw,26px);padding:clamp(20px,2vw,26px);gap:11px}
.carousel .ccard.ccard--v2{padding:0;gap:0}
.carousel .ccard h3{font-size:17.5px}
.carousel .ccard__num{font-size:clamp(24px,2.6vw,30px)}
/* Karussell-Karte mit Vorschaubild (karussell_bild) -- gleiches Muster wie
   .vcard--event, eigene Klasse weil .ccard eine andere Basis-Padding-Regel
   hat (.carousel .ccard oben), die hier gezielt auf 0 ueberschrieben wird. */
.carousel .ccard--event{padding:0;overflow:hidden;gap:0}
.ccard--event .ccard__media{aspect-ratio:16/9;overflow:hidden}
.ccard--event .ccard__body{--pad-x:clamp(20px,2vw,26px);padding:clamp(20px,2vw,26px);display:flex;flex-direction:column;gap:11px;flex:1}
/* Scroll-Animation: nutzt "translate" statt "transform", damit sie sich nicht
   mit dem transform des :hover-Effekts überschreibt — beide Eigenschaften
   wirken unabhängig und lassen sich kombinieren. */
@keyframes ccard-reveal{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .ccard{animation:ccard-reveal linear both;animation-timeline:view();animation-range:entry 4% entry 52%}
  }
}
.vcard{--pad-x:22px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 22px 24px;display:flex;flex-direction:column;gap:12px}
.vcard__ico{width:44px;height:44px;border-radius:11px;background:var(--bg-soft);color:var(--teal-text);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.vcard__ico svg{width:24px;height:24px;display:block}
.vcard h3{font-family:"Mont SemiBold",sans-serif;font-weight:var(--fw-heading);font-size:17px;line-height:1.3;margin:0;color:var(--navy)}
.vcard p{margin:0;font-size:14px;line-height:1.55;color:var(--navy);font-weight:var(--fw-body)}
.sec--navy .vcard{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.sec--navy .vcard h3,.sec--navy .vcard p{color:#fff}
.sec--navy .vcard__ico{background:rgba(255,255,255,.1);color:var(--teal)}
.case{background:#fff;border:1px solid var(--line);border-radius:12px;padding:clamp(22px,2.8vw,30px);display:flex;flex-direction:column}
.case__branch{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.case__efflabel{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-text);margin:0 0 2px}
.case__eff{font-weight:700;font-size:clamp(32px,4vw,44px);line-height:1.05;color:var(--teal-text);margin:0 0 4px}
.case__effl{font-size:13.5px;color:var(--navy);margin:0 0 20px}
.case h4{font-weight:600;font-size:14px;color:var(--navy);margin:0 0 3px}
.case p{margin:0 0 14px;font-size:14px;line-height:1.6;color:var(--navy)}
.case__link{margin-top:auto;padding-top:8px;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-text);text-decoration:underline;text-underline-offset:4px}

/* Dunkle Zitat-Bahn mit Punktenetz, wie "Stimmen aus dem Vorstand" */
.dots{position:absolute;inset:0;pointer-events:none}
.quote-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center;position:relative;z-index:1}
@media (max-width:860px){.quote-grid{grid-template-columns:1fr}}
.bigquote{font-weight:600;font-size:clamp(21px,3vw,30px);line-height:1.4;color:#fff;margin:0 0 22px}
.bigquote em{font-style:normal;color:var(--teal)}
.attrib{margin:18px 0 0;font-family:var(--font-heading);font-weight:var(--fw-heading);font-size:clamp(16px,1.8vw,19px);letter-spacing:0;text-transform:none;color:#fff}
.attribRole{margin:4px 0 0;font-family:var(--font-body);font-size:14px;line-height:1.45;color:var(--teal-light,#55C2C4)}
/* auf hellen Flaechen */
.sec:not(.sec--navy) .attrib{color:var(--navy)}
.sec:not(.sec--navy) .attribRole{color:var(--navy);opacity:.7}
.portrait{background:var(--bg-soft);border-radius:14px;aspect-ratio:4/5;max-width:340px;justify-self:end;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
@media (max-width:860px){.portrait{justify-self:start}}

/* Kontakt */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:center}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
.pcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px}
.pcard b{display:block;font-size:18px;font-weight:600;color:var(--navy)}
.pcard i{display:block;font-style:normal;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-text);margin:2px 0 16px}
.pcard a{display:block;font-size:15px;text-decoration:none;margin-bottom:6px}
.pcard a:hover{text-decoration:underline}

/* Header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hdr__in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:82px;display:flex;align-items:center;gap:28px}
.logo{font-weight:700;font-size:19px;letter-spacing:.02em;color:var(--navy);text-decoration:none;display:inline-flex;align-items:center;flex:0 0 auto}
.logo span{color:var(--teal)}
.logo img,.logo svg{height:55px;width:auto;display:block}
@media (max-width:620px){.logo img,.logo svg{height:45px}}
.nav{display:flex;gap:6px;margin-left:auto;font-size:14px;font-weight:500;align-items:center}
.nav__item{position:relative}
.nav__item > a{text-decoration:none;color:var(--grey);padding:8px 10px;display:inline-flex;align-items:center;gap:4px;border-radius:6px;transition:color .2s ease}
.nav__item > a:hover{color:var(--teal);text-decoration:underline}
.nav__item > a.on{color:var(--teal-text)}
.nav__caret{font-size:9px;opacity:.65;transform:translateY(1px)}
.nav__dropdown{display:none;flex-direction:column;gap:2px;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 34px rgba(0,37,58,.14);min-width:230px;padding:8px;z-index:60}
.nav__item:hover .nav__dropdown{display:flex}
.nav__dropdown a{display:block;padding:9px 12px;border-radius:7px;color:var(--grey);text-decoration:none;font-size:13.5px;font-weight:500;transition:color .2s ease}
.nav__dropdown a:hover{background:var(--bg-soft);color:var(--teal);text-decoration:underline}
.nav__dropdown a.on{color:var(--teal-text)}
.lang{font-size:13px;font-weight:500;color:var(--navy)}
@media (max-width:940px){.nav,.lang{display:none}}

/* Mobiles Menü — ersetzt die verschwundene Desktop-Navigation unterhalb 940px */
.navToggle{display:none;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;margin-left:auto;padding:0}
.navToggle span{display:block;width:18px;height:2px;background:var(--navy);position:relative}
.navToggle span::before,.navToggle span::after{content:'';position:absolute;left:0;width:18px;height:2px;background:var(--navy)}
.navToggle span::before{top:-6px}
.navToggle span::after{top:6px}
@media (max-width:940px){.navToggle{display:flex}}
.navMobile{display:none;position:fixed;top:82px;left:0;right:0;bottom:0;background:#fff;z-index:59;overflow-y:auto;padding:8px var(--pad) 40px}
body.navOpen .navMobile{display:block}
.navMobile__item{border-bottom:1px solid var(--line)}
.navMobile__row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.navMobile__row a{text-decoration:none;color:var(--grey);font-size:16px;font-weight:600;padding:16px 4px;flex:1;transition:color .2s ease}
.navMobile__row a:hover{color:var(--teal);text-decoration:underline}
.navMobile__caret{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;color:var(--navy);font-size:13px;transition:transform .15s}
.navMobile__item.open .navMobile__caret{transform:rotate(180deg)}
.navMobile__sub{display:none;flex-direction:column;padding:0 0 14px 4px;gap:2px}
.navMobile__item.open .navMobile__sub{display:flex}
.navMobile__sub a{text-decoration:none;color:var(--grey);font-size:14.5px;padding:9px 12px;border-radius:7px;transition:color .2s ease}
.navMobile__sub a:hover{background:var(--bg-soft);color:var(--teal);text-decoration:underline}
.navMobile__row a.on,.navMobile__sub a.on{color:var(--teal-text)}
.navMobile__lang{padding:18px 4px;font-size:14px;color:var(--navy);font-weight:500}

.crumb{font-size:13px;color:var(--navy);margin:0 0 14px}
.crumb b{color:var(--teal-text);font-weight:600}

/* Footer */
.foot{background:var(--navy);color:#C9D6DD;padding:34px 0;font-size:13.5px}
.foot a{color:#C9D6DD;text-decoration:none;margin-right:20px}

/* Begründungen */
.note{display:none;margin:26px 0 0;padding:15px 18px;border-left:3px solid var(--orange);background:#FFF4EE;border-radius:0 8px 8px 0;font-size:13px;line-height:1.65;color:var(--text)}
.sec--navy .note{background:rgba(255,255,255,.07);color:#C9D6DD;position:relative;z-index:1}
.note b{font-weight:600;color:var(--navy)}
.sec--navy .note b{color:#fff}
body.show-notes .note{display:block}
.notebar{position:fixed;right:16px;bottom:16px;z-index:60}
.notebar button{font-family:var(--font-body);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:11px 18px;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;box-shadow:0 6px 22px rgba(0,37,58,.16)}
body.show-notes .notebar button{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ============ Einfacher Bearbeitungsmodus ============ */
#blkPanel{position:fixed;top:0;left:0;bottom:0;width:280px;background:#fff;border-right:1px solid var(--line);box-shadow:4px 0 24px rgba(0,37,58,.14);z-index:70;overflow-y:auto;font-size:13.5px;display:none;flex-direction:column}
.blkPanel__head{padding:14px 16px;font-weight:700;font-family:var(--font-heading);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--navy);border-bottom:1px solid var(--line);background:var(--bg-soft)}
.blkPanel__lib{padding:10px 12px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--line)}
.blkLibItem{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:8px}
.blkLibItem span{font-size:12.5px;color:var(--navy);font-weight:500;flex:1;min-width:0}
.blkLibActions{display:flex;gap:6px;flex:none}
.blkLibItem button{font-size:11px;font-weight:600;letter-spacing:.03em;padding:6px 9px;border-radius:6px;border:1px solid var(--teal-text);background:var(--teal-soft);color:var(--teal-text);cursor:pointer;white-space:nowrap}
.blkLibItem button:hover{background:var(--teal-text);color:#fff}
.blkLibDel{border-color:#F09595 !important;background:#fff !important;color:#A32D2D !important;padding:6px 8px !important}
.blkLibDel:hover{background:#FCEBEB !important}
.blkLibSaveNew{display:block;width:100%;margin-top:10px;font-family:var(--font-body);font-size:11.5px;font-weight:600;padding:10px;border-radius:8px;border:1px dashed var(--teal-text);background:transparent;color:var(--teal-text);cursor:pointer}
.blkLibSaveNew:hover{background:var(--teal-soft)}
.blkPanel__props{padding:16px;display:flex;flex-direction:column;gap:16px}
.blkProp label{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);margin-bottom:8px}
.blkSwatches{display:flex;gap:8px}
.blkSwatches button{width:28px;height:28px;border-radius:6px;border:2px solid var(--line);cursor:pointer;padding:0}
.blkSwatches button.on{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange)}
.blkSwatches--text{flex-wrap:wrap}
.blkSwatches--text button{width:auto;height:auto;padding:7px 10px;font-size:11.5px;border-radius:6px;color:var(--navy);background:#fff;font-weight:500}
.blkSwatches--text button:hover{border-color:var(--navy)}
.blkPosGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;max-width:126px}
.blkPosGrid button{aspect-ratio:1;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer;font-size:13px;line-height:1;color:var(--navy);display:flex;align-items:center;justify-content:center;padding:0}
.blkPosGrid button:hover{border-color:var(--teal-text)}
.blkPosGrid button.on{background:var(--teal-text);border-color:var(--teal-text);color:#fff}
.blkProp--row{display:flex;gap:8px}
.blkAction{flex:1;font-size:12px;font-weight:600;padding:9px 10px;border-radius:6px;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer}
.blkAction.on{border-color:var(--teal-text);background:var(--teal-soft);color:var(--teal-text)}
.blkAction:hover{border-color:var(--navy)}
.blkAction--danger{border-color:#E24B4A;color:#A32D2D}
.blkAction--danger:hover{background:#FCEBEB}
body.editing{padding-left:280px}
body.editing #blkPanel{display:flex}
body.editing section[data-blk-id]{position:relative}
.blkHandle{display:none;position:absolute;top:0;left:0;z-index:40;background:var(--teal-text);color:#fff;font-size:11px;font-weight:600;letter-spacing:.04em;border-radius:0 0 8px 0;user-select:none;align-items:center;gap:0}
.blkHandle span{padding:5px 6px 5px 12px;cursor:pointer}
body.editing .blkHandle{display:flex}
section.blk-selected{outline:2px solid var(--orange);outline-offset:-2px}
body.editing [contenteditable="true"]:hover{outline:1px dashed var(--teal-text);outline-offset:2px;cursor:text}
body.editing [contenteditable="true"]:focus{outline:2px solid var(--orange);outline-offset:2px}
body.editing .imgph,body.editing .portrait{cursor:pointer}
body.editing .imgph::after,body.editing .portrait::after{content:'Bild ersetzen ↗';display:block;font-size:10.5px;margin-top:6px;opacity:.7}
@media (max-width:900px){#blkPanel{width:240px}body.editing{padding-left:240px}}


.blkUrlInput{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:13px;font-family:var(--font-body);color:var(--navy)}
.blkUrlInput:focus{outline:2px solid var(--teal-text);outline-offset:1px;border-color:var(--teal-text)}
.blkCheckLabel{display:flex;align-items:center;gap:8px;text-transform:none;font-weight:500;font-size:12.5px;letter-spacing:0;color:var(--navy);cursor:pointer}
a.lnk-selected{outline:2px solid var(--teal-text);outline-offset:2px;border-radius:3px}

/* Button-Farben — kombinierbar mit Gefüllt/Umriss */
.btn--fill.btn--c-orange{background:var(--orange);color:var(--navy);border-color:var(--orange)}
.btn--fill.btn--c-orange:hover{background:var(--teal-text);border-color:var(--teal-text);color:#fff}
.btn--fill.btn--c-teal{background:var(--teal);color:var(--navy);border-color:var(--teal)}
.btn--fill.btn--c-teal:hover{background:var(--teal-text);border-color:var(--teal-text);color:#fff}
.btn--fill.btn--c-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn--fill.btn--c-navy:hover{background:var(--navy-2);border-color:var(--navy-2)}
.btn--line.btn--c-navy{color:var(--navy);border-color:var(--navy)}
.btn--line.btn--c-teal{color:var(--teal-text);border-color:var(--teal-text)}
.btn--line.btn--c-teal:hover{background:var(--teal-text);border-color:var(--teal-text);color:#fff}

/* Einzelne Elemente innerhalb einer Sektion entfernen (Stat-Kachel, Case-Karte, Punkt, Logo) */
/* Werkzeugleiste an jedem beweg- und löschbaren Element (Bewegen ↑ ← → ↓, Entfernen ×) */
/* Auswahl eines Elements (Baustein-intern) — Optionen dazu im Bausteine-Panel, nicht am Element selbst */
.itm-selected{outline:2px solid var(--teal-text);outline-offset:2px}

/* Löschsymbol direkt am Sektions-Griff */
.blkHandle .blkHandleDel{background:rgba(255,255,255,.2);border:none;color:#fff;width:20px;height:20px;border-radius:4px;margin-right:6px;cursor:pointer;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.blkHandle .blkHandleDel:hover{background:#E24B4A}

.blkSelect{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:12.5px;font-family:var(--font-body);color:var(--navy);background:#fff}
.blkSelect:focus{outline:2px solid var(--teal-text);outline-offset:1px;border-color:var(--teal-text)}
.blkSelect + .blkSelect{margin-top:8px}

/* Zusammengesetzte Bausteine (Zweispalter, Zitat-Block, Kennzahlen-Reihe usw.) als Ganzes auswählbar */
.blkGroupHandle{display:none;position:absolute;top:-14px;left:0;z-index:35;background:var(--orange);color:var(--navy);font-size:10.5px;font-weight:600;letter-spacing:.04em;padding:4px 10px;border-radius:6px;cursor:pointer;user-select:none}
body.editing .blkGroupHandle{display:block}

/* Wählbares Spaltenverhältnis beim Zweispalter — nur oberhalb der Stapel-Grenze (860px) */
@media (min-width:861px){
  .split.split--ratio-a{grid-template-columns:2fr 1fr}
  .split.split--ratio-b{grid-template-columns:1fr 2fr}
}
/* Wählbare Spaltenzahl bei Kennzahlen-Reihe — nur oberhalb der Umbruch-Grenze (900px) */
@media (min-width:901px){
  .stats.stats--cols-2{grid-template-columns:repeat(2,1fr)}
  .stats.stats--cols-3{grid-template-columns:repeat(3,1fr)}
  .stats.stats--cols-5{grid-template-columns:repeat(5,1fr)}
  .stats.stats--cols-6{grid-template-columns:repeat(6,1fr)}
}
/* Wählbare Spaltenzahl bei Logo-Reihe — nur oberhalb der Umbruch-Grenze (820px) */
@media (min-width:821px){
  .logos.logos--cols-2{grid-template-columns:repeat(2,1fr)}
  .logos.logos--cols-3{grid-template-columns:repeat(3,1fr)}
  .logos.logos--cols-4{grid-template-columns:repeat(4,1fr)}
  .logos.logos--cols-6{grid-template-columns:repeat(6,1fr)}
  .vcards.vcards--cols-2{grid-template-columns:repeat(2,1fr)}
  .vcards.vcards--cols-3{grid-template-columns:repeat(3,1fr)}
  .vcards.vcards--cols-5{grid-template-columns:repeat(5,1fr)}
  .vcards.vcards--cols-6{grid-template-columns:repeat(6,1fr)}
}

/* ============================================================
   APP-SHELL: Sitemap-Ansicht, Seiten-Editor-Rahmen, Modal
   ============================================================ */
.app-view{min-height:100vh;background:var(--bg)}
.app-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px var(--pad);border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);z-index:20}
.app-topbar__title{font-family:var(--font-heading);font-weight:var(--fw-heading);font-size:18px;color:var(--navy)}

.sitemap-wrap{max-width:var(--max);margin:0 auto;padding:56px var(--pad) 40px}
.sitemap-tree{display:flex;flex-direction:column;align-items:center}
.sitemap-connector{width:1px;height:32px;background:var(--line)}
.sitemap-connector--sm{height:22px}
.sitemap-row{display:flex;gap:28px;flex-wrap:wrap;justify-content:center}
.sitemap-row--sm{gap:18px;margin-top:0}
.sitemap-branch{display:flex;flex-direction:column;align-items:center}

.pageCard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 18px;min-width:190px;max-width:220px;text-align:center;box-shadow:0 2px 10px rgba(0,37,58,.05)}
.pageCard--home{border-color:var(--orange);box-shadow:0 4px 18px rgba(255,127,55,.18)}
.pageCard__level{display:inline-block;font-family:var(--font-body);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-text);background:var(--teal-soft);padding:3px 9px;border-radius:99px;margin-bottom:9px}
.pageCard__title{font-family:var(--font-heading);font-weight:var(--fw-heading);font-size:15px;line-height:1.3;color:var(--navy);margin:0 0 13px;word-break:break-word}
.pageCard__actions{display:flex;gap:8px;justify-content:center}
.pageCard__btn{font-family:var(--font-body);font-size:11.5px;font-weight:600;padding:7px 11px;border-radius:6px;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer}
.pageCard__btn:hover{border-color:var(--navy)}
.pageCard__btn--danger{color:#A32D2D;border-color:#F09595}
.pageCard__btn--danger:hover{background:#FCEBEB}

.trash-section{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 64px}
.trash-section h3{font-family:var(--font-heading);font-weight:var(--fw-heading);font-size:15px;color:var(--navy);border-top:1px solid var(--line);padding-top:26px;margin:0 0 16px}
.trashItem{display:flex;align-items:center;justify-content:space-between;padding:11px 15px;border:1px solid var(--line);border-radius:8px;margin-bottom:8px;font-size:13.5px;color:var(--navy);background:var(--bg-soft)}
.trashItem div{display:flex;gap:8px}
.trashItem button{font-family:var(--font-body);font-size:11px;font-weight:600;padding:6px 10px;border-radius:6px;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--navy)}
.trashItem button.pageCard__btn--danger{color:#A32D2D;border-color:#F09595}

.modalOverlay{position:fixed;inset:0;background:rgba(0,37,58,.5);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.modalBox{background:#fff;border-radius:12px;padding:30px;max-width:420px;width:100%;box-shadow:0 24px 64px rgba(0,37,58,.28)}
.modalBox h3{font-family:var(--font-heading);font-weight:var(--fw-heading);font-size:18px;color:var(--navy);margin:0 0 22px}
.modalBox label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--navy);margin:18px 0 7px}
.modalBox label:first-of-type{margin-top:0}
.modalActions{display:flex;justify-content:flex-end;gap:10px;margin-top:28px}
.modalHint{font-size:12.5px;color:var(--muted,#5D716B);margin:6px 0 0}

.editor-topbar{display:flex;align-items:center;gap:16px;padding:14px var(--pad);border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);z-index:55}
.editor-topbar__title{font-family:var(--font-heading);font-weight:var(--fw-heading);font-size:14.5px;color:var(--navy)}
.editor-topbar__level{font-family:var(--font-body);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-text);background:var(--teal-soft);padding:3px 9px;border-radius:99px}


.app-projectbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px var(--pad);border-bottom:1px solid var(--line);background:var(--bg-soft);font-size:12.5px}
.app-projectbar__label{font-family:var(--font-heading);font-weight:var(--fw-heading);font-size:12px;color:var(--navy);letter-spacing:.04em;text-transform:uppercase;margin-right:2px}
.app-projectbar__status{color:var(--teal-text);font-weight:500}

/* Wählbare Breite für Elemente/Bausteine — 12-Spalten-Raster, aktiviert sich
   nur am jeweiligen Elternbereich, sobald dort erstmals eine Breite gesetzt wird.
   Unangetastete Sektionen bleiben normaler Blockfluss, kein Risiko fuer Bestehendes. */
/* Wählbare Breite für Elemente/Bausteine — wirkt NUR auf das gewählte Element
   selbst (Prozentbreite relativ zur Sektion, also zur vollen .wrap-Breite —
   das ist bei einem Prozentwert auf einem normalen Element ohnehin immer die
   Bezugsgröße, unabhängig davon was daneben steht). Kein Umbau des Elternbereichs,
   kein gemeinsamer Abstand, keine Streckung — Höhe und bestehende Ränder der
   Elemente bleiben unangetastet. Nebeneinanderstehen ergibt sich einzig daraus,
   dass zwei schmalere Elemente in Folge nicht mehr die volle Zeile für sich
   beanspruchen.*/
.w-100,.w-66,.w-50,.w-33{box-sizing:border-box;vertical-align:top;display:inline-block}
.w-100{width:100cqw}
.w-66{width:66.666cqw}
.w-50{width:50cqw}
.w-33{width:33.333cqw}
/* Zusammengesetzte Bausteine haben ihr eigenes inneres Layout (Grid oder Flex) —
   das bleibt erhalten, nur die äußere Einordnung wird "inline" gemacht. */
.split.w-100,.split.w-66,.split.w-50,.split.w-33,
.stats.w-100,.stats.w-66,.stats.w-50,.stats.w-33,
.cases.w-100,.cases.w-66,.cases.w-50,.cases.w-33,
.points.w-100,.points.w-66,.points.w-50,.points.w-33,
.logos.w-100,.logos.w-66,.logos.w-50,.logos.w-33,
.quote-grid.w-100,.quote-grid.w-66,.quote-grid.w-50,.quote-grid.w-33{display:inline-grid}
.btn-row.w-100,.btn-row.w-66,.btn-row.w-50,.btn-row.w-33{display:inline-flex}
@media (max-width:700px){
  .w-100,.w-66,.w-50,.w-33{width:100%;display:block}
}
/* Zusammengesetzte Bausteine brauchen ihren EIGENEN Umbruch-Breakpoint, nicht
   den generischen 700px-Wert oben — sonst entsteht eine "tote Zone" zwischen
   700px und ihrem tatsächlichen Umbruch, in der die äußere Breite (z.B. 50%)
   noch aktiv ist, während das innere Spalten-Layout schon zusammengefallen
   ist: ein schmaler, gestauchter Baustein statt sauber voller Breite. */
@media (max-width:860px){
  .split.w-100,.split.w-66,.split.w-50,.split.w-33,
  .cases.w-100,.cases.w-66,.cases.w-50,.cases.w-33,
  .quote-grid.w-100,.quote-grid.w-66,.quote-grid.w-50,.quote-grid.w-33,
  .ccards.w-100,.ccards.w-66,.ccards.w-50,.ccards.w-33{width:100%;display:grid}
}
@media (max-width:900px){
  .stats.w-100,.stats.w-66,.stats.w-50,.stats.w-33,
  .vcards.w-100,.vcards.w-66,.vcards.w-50,.vcards.w-33,
  .svcs.w-100,.svcs.w-66,.svcs.w-50,.svcs.w-33{width:100%;display:grid}
}
@media (max-width:820px){
  .logos.w-100,.logos.w-66,.logos.w-50,.logos.w-33{width:100%;display:grid}
}
@media (max-width:700px){
  .points.w-100,.points.w-66,.points.w-50,.points.w-33{width:100%;display:grid}
  .btn-row.w-100,.btn-row.w-66,.btn-row.w-50,.btn-row.w-33{width:100%;display:flex}
}


/* ==========================================================================
   LINKEDIN-STREIFEN
   Vier eingebettete LinkedIn-Beitraege nebeneinander. Beitraege werden in
   linkedin-posts.js gepflegt. Die iframes bringen LinkedIns eigene Optik mit;
   gestaltet wird hier nur der Rahmen.
   ========================================================================== */
.listrip{--li-h:560px}
.listrip[data-listrip="compact"]{--li-h:500px}

.listrip__rail{
  margin-top:28px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.listrip__slot{
  position:relative;
  height:var(--li-h);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.listrip__slot iframe{flex:1;width:100%;height:100%;border:0;display:block}

/* Unter 1000px: seitlich scrollender Streifen mit Snap */
@media (max-width:1000px){
  .listrip__rail{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:10px;
    margin-left:calc(var(--pad) * -1);
    margin-right:calc(var(--pad) * -1);
    padding-left:var(--pad);
    padding-right:var(--pad);
  }
  .listrip__slot{flex:0 0 min(325px,82vw);scroll-snap-align:start}
}

/* --- Platzhalter, solange keine Beitrags-URL eingetragen ist --- */
.listrip__badge{
  position:absolute;top:12px;right:12px;z-index:3;
  font-family:var(--font-body);font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  background:var(--orange);color:#fff;border-radius:4px;padding:3px 7px;
}
.listrip__ph{flex:1;display:flex;flex-direction:column;gap:14px;padding:18px}
.listrip__ph-top{display:flex;align-items:center;gap:11px}
.listrip__ph-av{width:40px;height:40px;border-radius:50%;background:var(--navy);flex:0 0 auto}
.listrip__ph-av.is-person{background:var(--teal)}
.listrip__ph-lines{flex:1;display:flex;flex-direction:column;gap:7px}
.listrip__ph-lines i,.listrip__ph-body i{display:block;height:9px;border-radius:5px;background:var(--line)}
.listrip__ph-body{display:flex;flex-direction:column;gap:9px}
.listrip__ph-media{
  flex:1;min-height:80px;border-radius:8px;
  background:linear-gradient(140deg,var(--teal-soft),var(--teal));opacity:.45;
}
.listrip__ph-note{
  margin:0;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--font-body);font-size:12px;line-height:1.5;color:var(--orange-dark);
}

/* --- Zwei-Klick-Einwilligung (DSGVO): greift erst, wenn echte Beitraege gesetzt sind --- */
.listrip__gate{
  grid-column:1/-1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  min-height:220px;padding:40px 24px;text-align:center;
  background:var(--bg);border:1px dashed var(--line);border-radius:14px;
}
.listrip__gate .body{margin:0;max-width:52ch}
.listrip__gate-note{font-size:12px;color:var(--navy);opacity:.55}
@media (max-width:1000px){.listrip__gate{flex:0 0 100%}}


/* Widget-Modus: der Anbieter bringt sein eigenes Layout mit, deshalb faellt
   das Vier-Spalten-Raster weg. Nur der Rahmen bleibt. */
.listrip__rail--widget{display:block;grid-template-columns:none;overflow:visible}
.listrip__rail--widget .listrip__slot{height:auto}

.listrip__foot{margin-top:18px;font-size:12px;color:var(--navy);opacity:.55}


/* ==========================================================================
   CASE-SEITEN: Ausgangslage und Loesung nebeneinander
   Ergebnis-Band sitzt darueber als Highlight.
   ========================================================================== */
/* Ausgangslage bleibt auf der Off-White-Flaeche der Sektion, die Loesung
   steht auf Weiss. Die Trennung entsteht allein durch den Hintergrund. */
.caseSplit{align-items:stretch;gap:clamp(20px,3vw,44px)}
.caseSplit > div{padding:clamp(22px,2.6vw,34px) 0}
.caseSplit > div:last-child{
  background:var(--bg);
  border-radius:14px;
  padding:clamp(22px,2.6vw,34px) clamp(24px,2.8vw,38px);
}
.caseSplit .h2{font-size:clamp(20px,2.4vw,26px)}
.caseSplit .body{max-width:none}
@media (max-width:860px){
  .caseSplit > div{padding-top:0}
  .caseSplit > div:last-child{padding:clamp(22px,5vw,30px);margin-top:clamp(20px,4vw,30px)}
}

/* Case-Overlay, zweispaltiges Layout (2026-09-22): Ausgangslage/Loesung
   stehen gestapelt in der linken Spalte, rechts das optionale Beleg-Bild
   (Nachweis-Screenshot, z. B. Konferenzfolie) plus Zitat-Karte -- angelehnt
   an Nellis Sachsen-Mockup (sachsen-case-karte.png). Fehlen Beleg-Bild UND
   Zitat, faellt die rechte Spalte weg (--solo, ein Textblock voller Breite). */
.caseSplit2{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(28px,4vw,56px);align-items:start;margin:24px 0}
.caseSplit2--solo{grid-template-columns:1fr;max-width:820px}
@media (max-width:860px){.caseSplit2{grid-template-columns:1fr}}

.caseWarum{margin-top:22px;padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,24px);background:var(--bg-soft);border-left:3px solid var(--orange);border-radius:0 10px 10px 0}
.caseWarum .body{margin:0}

.caseProof{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,37,58,.09);background:#fff}
.caseProof__bar{height:26px;background:var(--navy)}
.caseProof img{width:100%;height:auto;display:block}
.caseProof__caption{margin:10px 0 0;font-family:var(--font-body);font-size:13px;letter-spacing:.04em;color:var(--teal-text);font-weight:600}

.caseQuote{margin-top:20px;padding:clamp(20px,2.4vw,26px);background:var(--teal-soft);border-left:4px solid var(--teal);border-radius:0 12px 12px 0}
.caseQuote--first{margin-top:0}
.caseQuote .bigquote{font-size:clamp(18px,2.2vw,22px);margin-bottom:14px}


/* ==========================================================================
   LUECKEN-BLOCK: Stelle, die das Master-Dokument fordert, aber nicht befuellt.
   Bleibt sichtbar, bis ein Wortlaut vorliegt.
   MD-FIGUR: Grafik-Entwurf mit Pruefvermerk.
   ========================================================================== */
.gapBlock{max-width:760px;border:2px dashed var(--orange);border-radius:12px;padding:clamp(18px,2.4vw,26px);background:rgba(255,127,55,.05)}
.gapBlock p{margin:0 0 10px;font-family:var(--font-body);font-size:15px;line-height:1.6;color:var(--navy)}
.gapBlock p:last-child{margin-bottom:0}
.gapBlock__head{font-weight:700;color:var(--orange-dark)}
.gapBlock__src{font-size:13px;opacity:.7}
.gapBlock code{background:rgba(1,164,167,.12);padding:1px 5px;border-radius:4px;font-size:.92em}
.mdFig{margin:clamp(26px,3.2vw,40px) 0 0;max-width:100%}
.mdFig img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:14px;background:#fff}
.mdFig figcaption{margin-top:10px;font-family:var(--font-body);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-text);font-weight:600}
/* Vollbild-Grafik: bricht aus dem Textmass aus, bleibt im Seitenrand */
.mdFig--full{max-width:none}
.mdFig--full img{border:none;border-radius:16px;box-shadow:0 18px 50px rgba(0,37,58,.09)}
/* Drei Stationen nebeneinander */
.figRow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);margin-top:clamp(26px,3.2vw,40px)}
.figRow .mdFig{margin:0}
@media (max-width:860px){.figRow{grid-template-columns:1fr}}


/* ==========================================================================
   MANAGEMENT-TEAM-KARUSSELL
   Aktive Karte gross und farbig hinterlegt, Nachbarn zurueckgenommen.
   Kurzbio darunter, wechselt mit der Auswahl.
   ========================================================================== */
.teamCar{position:relative;margin-top:clamp(26px,3.4vw,40px)}
.teamCar__track{
  display:flex;justify-content:center;align-items:center;
  gap:clamp(14px,1.6vw,22px);
  overflow:hidden;padding:6px 0 18px;
}
.teamCar__card{
  flex:0 0 min(300px,58vw);
  position:relative;padding:0;border:none;background:none;cursor:pointer;
  border-radius:16px;overflow:hidden;aspect-ratio:4/5;
  filter:saturate(.55);opacity:.62;transform:scale(.9);
  transition:opacity .4s ease,transform .4s ease,filter .4s ease;
}
.teamCar__card[data-dist="2"]{opacity:.32;transform:scale(.82)}
.teamCar__card img{width:100%;height:100%;object-fit:cover;display:block}
.teamCar__card:hover{opacity:.85}
.teamCar__card.is-active{opacity:1;transform:scale(1);filter:none}
.teamCar__card:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

.teamCar__label{
  position:absolute;left:0;right:0;bottom:0;
  padding:70px 22px 22px;text-align:center;color:#fff;
  background:linear-gradient(to top,rgba(0,37,58,.92) 0%,rgba(1,164,167,.55) 55%,transparent 100%);
  opacity:0;transform:translateY(12px);
  transition:opacity .35s ease,transform .35s ease;
}
.teamCar__card.is-active .teamCar__label{opacity:1;transform:none}
.teamCar__role{display:block;font-family:var(--font-body);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin-bottom:4px}
.teamCar__name{display:block;font-family:var(--font-heading);font-weight:var(--fw-heading);
  font-size:clamp(20px,2.2vw,26px);line-height:1.2}

.teamCar__nav{
  position:absolute;top:calc(50% - 20px);z-index:2;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:var(--bg);color:var(--navy);
  border:1px solid var(--line);box-shadow:0 6px 20px rgba(0,37,58,.12);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.teamCar__nav svg{width:20px;height:20px}
.teamCar__nav:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.teamCar__nav:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.teamCar__nav--prev{left:0}
.teamCar__nav--next{right:0}
@media (max-width:700px){
  .teamCar__nav{top:auto;bottom:-8px}
  .teamCar__nav--prev{left:calc(50% - 56px)}
  .teamCar__nav--next{right:calc(50% - 56px)}
  .teamCar{padding-bottom:52px}
}

.teamBio{margin-top:clamp(22px,2.6vw,32px);max-width:720px}
.teamBio__item{display:none}
.teamBio__item.is-active{display:block}
.teamBio__role{margin:0;font-family:var(--font-body);font-size:13px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--teal-text)}
.teamBio__name{margin:6px 0 10px;font-family:var(--font-heading);
  font-weight:var(--fw-heading);font-size:clamp(22px,2.6vw,30px);color:var(--navy)}
@media (prefers-reduced-motion:reduce){
  .teamCar__card,.teamCar__label{transition:none}
  .teamCar__track{scroll-behavior:auto}
}


/* Ergebnis-Punkte im dunklen Highlight-Band der Case-Seiten */
.caseErg{list-style:none;margin:clamp(22px,2.6vw,30px) 0 0;padding:0;max-width:820px;display:grid;gap:10px}
.caseErg li{position:relative;padding-left:26px;font-family:var(--font-body);font-size:15px;line-height:1.55;color:#fff}
.caseErg li::before{content:'';position:absolute;left:0;top:.6em;width:10px;height:2px;background:var(--orange)}

/* ---- Case-Overlay (#case-{slug}), Branchen-Seite -- neu, nicht Teil des
   urspruenglichen Nachbaus: Referenzen leben nur noch als Overlay auf der
   Branchenseite statt als eigene Case-Seite (2026-09-18 Feedback). ---- */
.caseModal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:24px}
.caseModal.is-open{display:flex}
.caseModal::before{content:'';position:absolute;inset:0;background:rgba(0,37,58,.55);backdrop-filter:blur(2px)}
.caseModal__panel{position:relative;background:var(--bg);border-radius:14px;max-width:var(--max);width:100%;max-height:90vh;overflow-y:auto;padding:clamp(28px,4vw,64px);box-shadow:0 20px 60px rgba(0,37,58,.35)}
.caseModal__close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:8px;border:1px solid var(--line);background:var(--bg);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--navy)}
.caseModal__close:hover{background:var(--teal-soft);border-color:var(--teal)}
.caseModal .bigquote{color:var(--navy)}
.caseModal .attrib{color:var(--navy)}
body.hasModalOpen{overflow:hidden}
@media (max-width:600px){
  .caseModal{padding:12px}
  .caseModal__panel{max-height:92vh}
}

/* Event-Status-Badges (Jahresplan, Event-Seite, Homepage-Spotlight) */
.eventBadge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.eventBadge--kommend{background:var(--teal-soft);color:var(--teal-text)}
.eventBadge--laufend{background:var(--orange);color:#fff}
.eventBadge--vergangen{background:var(--bg-soft);color:#767676}

/* Homepage-Spotlight-Banner: fest 250px hoch, zweispaltig mit optionalem
   Bild/Video, Seite waehlbar per ACF-Feld "bildposition" (2026-09-21). */
.eventBanner{height:250px;padding:0;display:flex;align-items:center;overflow:hidden}
.eventBanner__row{display:flex;align-items:stretch;justify-content:space-between;gap:32px;width:100%;height:100%;flex-wrap:wrap}
.eventBanner__text{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:20px 0}
.eventBanner__meta{display:flex;align-items:center;gap:14px;flex-wrap:nowrap;margin-top:8px}
.eventBanner__title{margin:0;font-size:clamp(20px,2.4vw,28px);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.eventBanner__teaser{margin:0;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:380px}
.eventBanner__media{flex:0 0 340px;height:100%;border-radius:14px;overflow:hidden;order:0}
.eventBanner--links .eventBanner__media{order:-1}
@media (max-width:760px){
  .eventBanner{height:auto;min-height:250px;padding:28px 0}
  .eventBanner__row{flex-direction:column;height:auto}
  .eventBanner__title,.eventBanner__teaser{white-space:normal;max-width:none}
  .eventBanner__meta{flex-wrap:wrap}
  .eventBanner__media{flex:0 0 auto;width:100%;height:180px;order:0 !important}
}

/* Event-Detailseite: Bild/Video + Inhalt als eine zusammenhaengende Karte,
   Medienbereich immer im 16:9-Format unabhaengig von der Originalgroesse. */
.eventCard{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 14px 34px rgba(0,37,58,.08);margin-top:20px}
.eventCard__media{width:100%;aspect-ratio:16/9;position:relative;background:var(--bg-soft)}
.eventCard__body{padding:clamp(28px,4vw,40px)}
.eventMedia{width:100%;height:100%;object-fit:cover;display:block;border:none}
/* Event-Overlay: Hero-Media auf 150px gedeckelt (2026-09-21). */
.eventModal__hero{height:150px;overflow:hidden;border-radius:12px;margin-bottom:16px}

/* Event-Feedback Runde 2 (2026-09-21): waehlbare Hintergrundfarben,
   Banner-Abstand, Karten-Bild, Monats-Label ohne Eyebrow-Linie. */
.sec--orange{background-color:var(--orange)}
.sec--teal{background-color:var(--teal)}
.eventBanner{margin:30px 0}
.vcard--event{padding:0;overflow:hidden}
.vcard--event .vcard__media{aspect-ratio:16/9;overflow:hidden}
.vcard--event .vcard__body{--pad-x:22px;padding:26px 22px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.eventMonthLabel{font-weight:600;color:var(--navy);font-size:13px;letter-spacing:.04em;text-transform:uppercase;margin:0}
/* Bugfix: .btn--fill (orange) verschwindet auf orangem Sektions-Hintergrund -- Button auf Orange wird umgekehrt (weiss/navy) dargestellt. */
.sec--orange .btn--fill{background:#fff;border-color:#fff;color:var(--navy)}
.sec--orange .btn--fill:hover{background:var(--navy);border-color:var(--navy);color:#fff}

/* Bild-/Farboptionen fuer Sektionen (2026-09-23): Orange/Teal-Kontrastfix,
   generischer Foto-Hintergrund (Vorbild: .heroPhotoSec auf page-karriere.php,
   bleibt dort unangetastet), Karten-Farbvarianten. */
.sec--light-text .eyebrow{color:#fff}
.sec--light-text .eyebrow::after{background:#fff;opacity:.4}
.sec--light-text .h1,.sec--light-text .h2,.sec--light-text .h3{color:#fff}
.sec--light-text .body{color:rgba(255,255,255,.88)}
.sec--light-text .crumb{color:rgba(255,255,255,.7)}
.sec--light-text .crumb b{color:#fff}
.sec--light-text .btn--line{color:#fff;border-color:rgba(255,255,255,.55)}
.sec--light-text .btn--line:hover{background:#fff;border-color:#fff;color:var(--navy)}

.sec--photo{position:relative;overflow:hidden}
.sec--photo__bg{position:absolute;inset:0;z-index:0}
.sec--photo__bg img{width:100%;height:100%;object-fit:cover;display:block}
.sec--photo__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(0,37,58,.94) 0%,rgba(0,37,58,.88) 40%,rgba(0,37,58,.55) 68%,rgba(0,37,58,.25) 100%)}
.sec--photo > .wrap{position:relative;z-index:1}

/* .vcard.vcard--X (2 Klassen) statt .vcard--X allein: muss auch
   .sec--navy .vcard{...} (Zeile ~605/697, Spezifitaet 0,2,0/0,2,1)
   zuverlaessig schlagen, nicht nur die eigene .vcard-Basisregel --
   sonst gewinnt bei einer Karte in einer Navy-Sektion faelschlich der
   Umgebungs-Look statt der explizit gewaehlten Kartenfarbe (2026-09-23 Bugfix). */
.vcard.vcard--weiss{background:#fff}
.vcard.vcard--weiss h3,.vcard.vcard--weiss p{color:var(--navy)}
.vcard.vcard--soft{background:var(--bg-soft)}
.vcard.vcard--soft h3,.vcard.vcard--soft p{color:var(--navy)}
.vcard.vcard--navy{background:var(--navy)}
.vcard.vcard--navy h3,.vcard.vcard--navy p{color:#fff}
.vcard.vcard--navy .vcard__ico{background:rgba(255,255,255,.1);color:var(--teal)}
.vcard.vcard--navy .vcard__more{color:#fff;opacity:.7}
.vcard.vcard--orange{background:var(--orange)}
.vcard.vcard--orange h3,.vcard.vcard--orange p{color:#fff}
.vcard.vcard--orange .vcard__more{color:#fff;opacity:.75}
.vcard.vcard--teal{background:var(--teal)}
.vcard.vcard--teal h3,.vcard.vcard--teal p{color:#fff}
.vcard.vcard--teal .vcard__more{color:#fff;opacity:.75}
.vcard.vcard--warm{background:linear-gradient(134deg,rgba(1,164,167,.14),rgba(255,127,55,.13))}
.vcard.vcard--warm h3,.vcard.vcard--warm p{color:var(--navy)}

/* Optionale Hover-Farbe je Karte (2026-09-23) -- Klasse liegt immer auf der
   Karte, die Farbe greift erst bei :hover; gleiche 2-Klassen-Taktik wie
   oben, damit sie auch in einer Navy-Sektion zuverlaessig gewinnt. */
.vcard[class*="vcard--hover-"]{transition:background-color .25s ease,color .25s ease}
.vcard.vcard--hover-weiss:hover{background:#fff}
.vcard.vcard--hover-weiss:hover h3,.vcard.vcard--hover-weiss:hover p{color:var(--navy)}
.vcard.vcard--hover-soft:hover{background:var(--bg-soft)}
.vcard.vcard--hover-soft:hover h3,.vcard.vcard--hover-soft:hover p{color:var(--navy)}
.vcard.vcard--hover-navy:hover{background:var(--navy)}
.vcard.vcard--hover-navy:hover h3,.vcard.vcard--hover-navy:hover p{color:#fff}
.vcard.vcard--hover-navy:hover .vcard__ico{background:rgba(255,255,255,.1);color:var(--teal)}
.vcard.vcard--hover-navy:hover .vcard__more{color:#fff;opacity:.7}
.vcard.vcard--hover-orange:hover{background:var(--orange)}
.vcard.vcard--hover-orange:hover h3,.vcard.vcard--hover-orange:hover p{color:#fff}
.vcard.vcard--hover-orange:hover .vcard__more{color:#fff;opacity:.75}
.vcard.vcard--hover-teal:hover{background:var(--teal)}
.vcard.vcard--hover-teal:hover h3,.vcard.vcard--hover-teal:hover p{color:#fff}
.vcard.vcard--hover-teal:hover .vcard__more{color:#fff;opacity:.75}
.vcard.vcard--hover-warm:hover{background:linear-gradient(134deg,rgba(1,164,167,.14),rgba(255,127,55,.13))}
.vcard.vcard--hover-warm:hover h3,.vcard.vcard--hover-warm:hover p{color:var(--navy)}