/* ==========================================================================
   BECO — Steuerberatung · Wirtschaftsprüfung · Wirtschaftsrecht
   Design-System „BECO Klar" — Navy #00306E · Grün #4A982B
   Sentient (Serif-Display) + Archivo (Sans) — self-hosted
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face{
  font-family:'Sentient';
  src:url('../fonts/sentient-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Sentient';
  src:url('../fonts/sentient-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Sentient';
  src:url('../fonts/sentient-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Sentient';
  src:url('../fonts/sentient-italic-400.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --ink:#0B2143;            /* Text auf hell */
  --ink-soft:rgba(11,33,67,.68);
  --ink-mute:rgba(11,33,67,.5);
  --marke:#00306E;          /* CI-Navy */
  --nacht:#051A3A;          /* dunkelste Fläche */
  --nacht-2:#072450;
  --gruen:#4A982B;
  --gruen-hell:#63B840;
  --paper:#F5F6F2;          /* warmes Off-White */
  --weiss:#FFFFFF;
  --hell-soft:rgba(245,246,242,.72);
  --hell-mute:rgba(245,246,242,.52);
  --linie:rgba(11,33,67,.14);
  --linie-hell:rgba(245,246,242,.16);

  --font-serif:'Sentient',Georgia,serif;
  --font-sans:'Archivo',system-ui,sans-serif;

  --radius:16px;
  --radius-gross:26px;
  --radius-sheet:clamp(22px,4vw,46px);

  --wrap:1240px;
  --pad:clamp(1.1rem,4vw,2.5rem);
  --sektion:clamp(4.5rem,9vw,8.5rem);

  --ease:cubic-bezier(.22,1,.36,1);
  --t-s:.3s;--t-m:.6s;--t-l:1s;
}

/* ---------- Reset & Basis ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important} /* hidden gewinnt immer — auch gegen display-Klassen */
html{scroll-behavior:smooth;overflow-x:clip}
html:focus-within{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gruen);color:#fff}
:focus-visible{outline:2px solid var(--gruen);outline-offset:3px;border-radius:4px}

/* Grain-Textur */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap--schmal{max-width:880px}

/* Skip-Link */
.skip{
  position:fixed;top:.8rem;left:.8rem;z-index:300;padding:.7em 1.3em;
  background:var(--marke);color:#fff;border-radius:999px;font-weight:600;
  transform:translateY(-260%);transition:transform var(--t-s) var(--ease);
}
.skip:focus{transform:none}

/* ---------- Typo-Bausteine ---------- */
.label{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute);
}
.label::before{content:"";width:1.6em;height:2px;background:var(--gruen);border-radius:2px}
.label--hell{color:var(--hell-mute)}

.titel{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(1.9rem,1rem + 3.4vw,3.4rem);
  line-height:1.08;letter-spacing:-.015em;
  text-wrap:balance;margin-top:.9rem;
}
.titel em{font-style:italic;color:var(--gruen)}
.titel--hell{color:var(--paper)}
.titel--hell em{color:var(--gruen-hell)}
.vortext{max-width:56ch;color:var(--ink-soft);margin-top:1.2rem;font-size:1.1rem}
.vortext--hell{color:var(--hell-soft)}

/* Sprachumschalter DE/EN */
.lang{
  display:inline-flex;align-items:center;
  padding:.45em .85em;border:1px solid var(--linie);border-radius:999px;
  font-size:.78rem;font-weight:700;letter-spacing:.08em;
  color:var(--ink-soft);
}
.lang:hover,.lang:focus-visible{color:var(--marke);border-color:var(--marke)}

/* Kleine Serif-Zwischentitel (GF-Feedback 08/2026) */
.titel--klein{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(1.35rem,1rem + 1.4vw,1.9rem);
  line-height:1.15;letter-spacing:-.012em;
  text-wrap:balance;margin-top:2.6rem;
}
.titel--klein em{font-style:italic;color:var(--gruen)}
.sheet--nacht .titel--klein em{color:var(--gruen-hell)}

/* Zielgruppen-Liste (Legal: „Wir unterstützen insbesondere") */
.zielgruppen{list-style:none;padding:0;margin-top:1.4rem;max-width:60ch}
.zielgruppen li{position:relative;padding-left:1.3em;margin-bottom:.45em;color:var(--ink-soft)}
.zielgruppen li::before{content:"—";position:absolute;left:0;color:var(--gruen)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.95em 1.9em;border-radius:999px;
  background:var(--marke);color:#fff;font-weight:600;font-size:.98rem;
  line-height:1.2;transition:background var(--t-s) var(--ease),transform var(--t-s) var(--ease),box-shadow var(--t-s) var(--ease);
}
.btn:hover{background:var(--gruen);transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(0,48,110,.5)}
.btn:active{transform:none}
.btn .pfeil{transition:transform var(--t-s) var(--ease)}
.btn:hover .pfeil{transform:translateX(4px)}
.btn--gruen{background:var(--gruen)}
.btn--gruen:hover{background:var(--gruen-hell)}
.btn--hell{background:var(--paper);color:var(--marke)}
.btn--hell:hover{background:var(--gruen);color:#fff}
.btn--ghost{
  background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--linie);
}
.btn--ghost:hover{background:var(--marke);color:#fff;box-shadow:inset 0 0 0 1.5px var(--marke)}
.btn--ghost-hell{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--linie-hell)}
.btn--ghost-hell:hover{background:var(--paper);color:var(--marke);box-shadow:inset 0 0 0 1.5px var(--paper)}

.textlink{
  display:inline-flex;align-items:center;gap:.5em;font-weight:600;color:var(--marke);
}
.textlink .pfeil{transition:transform var(--t-s) var(--ease)}
.textlink:hover .pfeil{transform:translateX(4px)}
.textlink:hover{color:var(--gruen)}

/* ---------- Topbar ---------- */
.topbar{
  background:var(--nacht);color:var(--hell-soft);
  font-size:.78rem;letter-spacing:.02em;
  position:relative;z-index:120;
}
.topbar__inner{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:38px;padding-block:.35rem;
}
.topbar__orte{display:flex;gap:1.4rem;flex-wrap:wrap}
.topbar__orte span{white-space:nowrap}
.topbar__orte b{color:#fff;font-weight:600}
.topbar__extra{display:flex;align-items:center;gap:1.4rem;white-space:nowrap}
.topbar__extra a:hover{color:#fff}
.topbar__portal{display:inline-flex;align-items:center;gap:.45em;color:var(--gruen-hell);font-weight:600}
@media (max-width:900px){
  .topbar__orte{display:none}
  .topbar__inner{justify-content:center}
}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-s) var(--ease),background var(--t-s) var(--ease);
}
.header.is-scrolled{border-bottom-color:var(--linie)}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  min-height:76px;
}
.logo{display:inline-flex;align-items:center;flex:0 0 auto}
.logo img{height:44px;width:auto;display:block}
@media (max-width:900px){.logo img{height:36px}}

.nav{display:flex;align-items:center;gap:2rem}
.nav__link{
  position:relative;font-weight:500;font-size:.98rem;color:var(--ink-soft);
  padding-block:.4em;transition:color var(--t-s) var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--gruen);border-radius:2px;
  transform:scaleX(0);transform-origin:right;transition:transform var(--t-s) var(--ease);
}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--ink)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.header__aktion{display:flex;align-items:center;gap:1.2rem}
.header__tel{font-weight:600;font-size:.95rem;color:var(--ink-soft)}
.header__tel:hover{color:var(--gruen)}
.header .btn{padding:.75em 1.5em;font-size:.92rem}

/* Burger */
.burger{
  display:none;position:relative;z-index:220;
  width:44px;height:44px;border-radius:12px;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.burger span{
  width:22px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform var(--t-s) var(--ease),opacity var(--t-s) var(--ease),background var(--t-s) var(--ease);
}
body.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.nav-open .burger span{background:var(--paper)}

/* Mobiles Menü — bewusst AUSSERHALB des Headers (backdrop-filter-Falle) */
.nav-mob{
  position:fixed;inset:0;z-index:210;
  background:var(--nacht);color:var(--paper);
  display:flex;flex-direction:column;justify-content:center;gap:.4rem;
  padding:clamp(1.5rem,6vw,4rem);
  opacity:0;visibility:hidden;transition:opacity var(--t-s) var(--ease),visibility 0s var(--t-s);
}
body.nav-open .nav-mob{opacity:1;visibility:visible;transition-delay:0s}
body.nav-open{overflow:hidden}
.nav-mob a:not(.btn){
  font-family:var(--font-serif);font-size:clamp(1.7rem,6.5vw,2.6rem);
  line-height:1.3;padding-block:.15em;color:var(--hell-soft);
  border-bottom:1px solid var(--linie-hell);
  transition:color var(--t-s) var(--ease),padding-left var(--t-s) var(--ease);
}
.nav-mob a:not(.btn):hover,.nav-mob a[aria-current="page"]:not(.btn){color:#fff;padding-left:.3em}
.nav-mob .btn{
  display:inline-flex;align-self:flex-start;margin-top:1.6rem;
  background:var(--gruen);color:#fff;font-size:1rem;border-bottom:0;
}
.nav-mob__meta{margin-top:2rem;font-size:.9rem;color:var(--hell-mute);display:grid;gap:.3rem}
.nav-mob__meta a{color:var(--hell-soft);font-weight:600}

@media (max-width:1080px){
  .nav,.header__tel{display:none}
  .burger{display:flex}
  .header .btn{display:none}
}

/* ---------- Hero (Startseite) ---------- */
.hero{position:relative;padding-block:clamp(4rem,10vw,8rem) clamp(3.5rem,7vw,5.5rem)}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.7em;
  font-size:.8rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-mute);
}
.hero__eyebrow::before{
  content:"";width:.55em;height:.55em;border-radius:50%;background:var(--gruen);
  box-shadow:0 0 0 0 rgba(74,152,43,.5);animation:puls 2.4s infinite;
}
@keyframes puls{
  0%{box-shadow:0 0 0 0 rgba(74,152,43,.45)}
  70%{box-shadow:0 0 0 10px rgba(74,152,43,0)}
  100%{box-shadow:0 0 0 0 rgba(74,152,43,0)}
}
.hero__titel{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(2.6rem,.6rem + 8.8vw,7.6rem);
  line-height:1.02;letter-spacing:-.02em;text-wrap:balance;
  margin-top:1.4rem;max-width:14em;
}
.hero__titel em{font-style:italic;color:var(--gruen)}
.hero__zeile{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:2rem;margin-top:2.6rem;
}
.hero__text{max-width:46ch;font-size:1.12rem;color:var(--ink-soft)}
.hero__aktionen{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.hero__trust{font-size:.85rem;color:var(--ink-mute)}
.hero__meta{
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  margin-top:clamp(2.5rem,6vw,4.5rem);padding-top:1.2rem;
  border-top:1px solid var(--linie);
  font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-mute);
}

/* ---------- Marquee ---------- */
.marquee{
  overflow:hidden;border-block:1px solid var(--linie);
  padding-block:.9rem;position:relative;
}
.marquee__track{
  display:flex;gap:3.5rem;width:max-content;
  animation:marquee 36s linear infinite;
}
.marquee span{
  display:inline-flex;align-items:center;gap:3.5rem;white-space:nowrap;
  font-family:var(--font-serif);font-style:italic;font-size:1.05rem;color:var(--ink-mute);
}
.marquee span::after{content:"";width:.45em;height:.45em;border-radius:50%;background:var(--gruen);flex:0 0 auto}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Sheets (Sektionswechsel) ---------- */
.sheet{
  position:relative;border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;
  margin-top:calc(var(--radius-sheet) * -1);
}
.sheet--nacht{background:var(--nacht);color:var(--paper)}
.sheet--weiss{background:var(--weiss)}
.sheet--marke{background:var(--marke);color:var(--paper)}
.sektion{padding-block:var(--sektion)}
.sektion__kopf{max-width:760px;margin-bottom:clamp(2.5rem,5vw,4rem)}

/* ---------- Portal (Signature: drei Bereiche) ---------- */
.portal{display:flex;gap:1rem;min-height:min(72vh,680px)}
.portal__panel{
  position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(1.4rem,2.5vw,2.4rem);
  border-radius:var(--radius-gross);overflow:hidden;
  background:var(--nacht-2);color:var(--paper);
  transition:flex var(--t-l) var(--ease);
  isolation:isolate;
}
.portal__panel::before{ /* Foto */
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--foto);background-size:cover;background-position:center;
  opacity:.36;filter:saturate(.45) contrast(1.05);
  transition:opacity var(--t-l) var(--ease),transform var(--t-l) var(--ease);
  transform:scale(1.06);
}
.portal__panel::after{ /* Verlauf für Lesbarkeit */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(5,26,58,.92) 18%,rgba(5,26,58,.35) 55%,rgba(5,26,58,.55));
}
.portal__panel:hover::before,.portal__panel:focus-visible::before{opacity:.5;transform:scale(1)}
/* Bewusst KEINE Breiten-Expansion beim Hover mehr — nichts verschiebt sich
   (Kundenwunsch 07/2026): Effekt kommt aus Foto-Zoom, Strich und Liste. */
.portal__num{
  position:absolute;top:clamp(1.2rem,2.5vw,2rem);left:clamp(1.4rem,2.5vw,2.4rem);
  font-size:.75rem;font-weight:600;letter-spacing:.14em;color:var(--hell-mute);
}
.portal__strich{
  position:absolute;top:0;left:0;height:4px;width:100%;background:var(--gruen);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-m) var(--ease);
}
.portal__panel:hover .portal__strich,.portal__panel:focus-visible .portal__strich{transform:scaleX(1)}
/* Alle drei Panels folgen demselben Raster (Kundenwunsch 07/2026):
   Name, Trennlinie und CTA liegen exakt auf gleicher Höhe — dafür bekommen
   Claim und Liste feste Mindesthöhen. Die Liste klappt beim Hover auf
   (Fade + sanftes Hochgleiten), der Platz ist aber immer reserviert,
   damit sich NICHTS verschiebt. */
.portal__name{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(2.2rem,1rem + 3.6vw,4rem);line-height:1;letter-spacing:-.015em;
}
.portal__claim{margin-top:.5rem;color:var(--hell-soft);max-width:36ch}
.portal__liste{
  display:none;margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--linie-hell);
  font-size:.9rem;color:var(--hell-soft);
  columns:1;
}
.portal__liste li{margin-bottom:.35em;break-inside:avoid;padding-left:1.1em;position:relative}
.portal__liste li::before{content:"—";position:absolute;left:0;color:var(--gruen-hell)}
@media (min-width:901px){
  .portal__claim{min-height:calc(3 * 1.65em)}      /* Platz für 3 Zeilen — Trennlinie gleich hoch */
  .portal__liste{
    display:block;min-height:13.4em;               /* Platz für die längste Liste (6 Punkte) */
    opacity:0;transform:translateY(10px);
    transition:opacity var(--t-m) var(--ease) .06s,transform var(--t-m) var(--ease) .06s;
  }
  .portal__panel:hover .portal__liste,.portal__panel:focus-visible .portal__liste{opacity:1;transform:none}
}
.portal__cta{
  display:inline-flex;align-items:center;gap:.5em;margin-top:1.2rem;
  font-weight:600;font-size:.95rem;color:var(--gruen-hell);
}
.portal__cta .pfeil{transition:transform var(--t-s) var(--ease)}
.portal__panel:hover .portal__cta .pfeil{transform:translateX(5px)}
@media (max-width:900px){
  .portal{flex-direction:column;min-height:0}
  .portal__panel{min-height:280px;flex:none}
  .portal__liste{display:block;columns:1}
}

/* ---------- Statement / Über ---------- */
.statement{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(1.5rem,.9rem + 2.6vw,2.6rem);
  line-height:1.3;letter-spacing:-.01em;text-wrap:balance;max-width:24em;
}
.statement em{font-style:italic;color:var(--gruen-hell)}
.ueber{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.ueber__text p+p{margin-top:1em}
.ueber__text p{color:var(--hell-soft)}
.ueber__media{position:relative;border-radius:var(--radius-gross);overflow:hidden;aspect-ratio:4/5}
.ueber__media img{width:100%;height:100%;object-fit:cover}
.ueber__badge{
  position:absolute;left:1.2rem;bottom:1.2rem;right:1.2rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 1.2rem;border-radius:14px;
  background:rgba(5,26,58,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:.85rem;color:var(--hell-soft);
}
.ueber__badge b{color:#fff;font-weight:600}
@media (max-width:900px){.ueber{grid-template-columns:1fr}.ueber__media{aspect-ratio:16/11}}

/* ---------- Zahlenband ---------- */
.zahlen{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--linie-hell);
}
.zahl{
  padding:clamp(1.4rem,3vw,2.4rem) clamp(1rem,2vw,2rem);
  border-bottom:1px solid var(--linie-hell);
}
.zahl:not(:first-child){border-left:1px solid var(--linie-hell)}
.zahl__wert{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(2.2rem,1.2rem + 3.4vw,3.8rem);line-height:1;
  color:#fff;
}
.zahl__wert sup{font-size:.45em;color:var(--gruen-hell)}
.zahl__label{margin-top:.5rem;font-size:.85rem;color:var(--hell-mute)}
@media (max-width:760px){
  .zahlen{grid-template-columns:1fr 1fr}
  .zahl:nth-child(3){border-left:0}
}

/* ---------- Prinzipien ---------- */
.prinzipien{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.prinzip{
  padding:clamp(1.5rem,3vw,2.2rem);
  border-radius:var(--radius-gross);
  background:var(--weiss);border:1px solid var(--linie);
  transition:transform var(--t-m) var(--ease),box-shadow var(--t-m) var(--ease),border-color var(--t-m) var(--ease);
}
.prinzip:hover{transform:translateY(-6px);box-shadow:0 24px 48px -28px rgba(0,48,110,.35);border-color:transparent}
.prinzip__num{
  font-size:.75rem;font-weight:600;letter-spacing:.13em;color:var(--gruen);
}
.prinzip h3{
  font-family:var(--font-serif);font-weight:500;font-size:1.5rem;margin-top:.9rem;
}
.prinzip p{margin-top:.7rem;color:var(--ink-soft);font-size:.98rem}
@media (max-width:860px){.prinzipien{grid-template-columns:1fr}}

/* ---------- Team ---------- */
.team-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
/* Startseite zeigt das Team als vollständiges Grid (kein Seitwärts-Scrollen,
   Kundenwunsch 07/2026) — nutzt .team-grid wie die Team-Seite. */

.tcard{
  scroll-snap-align:start;text-align:left;display:block;width:100%;
  border-radius:var(--radius-gross);overflow:hidden;
  background:var(--weiss);border:1px solid var(--linie);
  transition:transform var(--t-m) var(--ease),box-shadow var(--t-m) var(--ease);
}
.tcard:hover{transform:translateY(-6px);box-shadow:0 26px 50px -30px rgba(0,48,110,.4)}
/* Karten-Unterelemente sind spans (valide in <a>/<button>) — brauchen Block-Layout */
.tcard__foto,.tcard__info,.tcard__name,.tcard__rolle{display:block}
.tcard__mehr{display:inline-flex}
.tcard__foto{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  background:linear-gradient(160deg,#EDEFEA,#DDE2DA);
}
.tcard__foto img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;
  transition:opacity var(--t-m) var(--ease);
}
.tcard__foto img.foto-b{opacity:0}
.tcard:hover .foto-b{opacity:1}
.tcard:hover .foto-b + .foto-a{opacity:0}
.tcard__info{padding:1.1rem 1.2rem 1.25rem;position:relative}
.tcard__info::before{
  content:"";position:absolute;top:0;left:1.2rem;right:1.2rem;height:1px;background:var(--linie);
}
.tcard__name{font-family:var(--font-serif);font-weight:500;font-size:1.12rem;line-height:1.25}
.tcard__rolle{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gruen);font-weight:600;margin-top:.25rem}
.tcard__mehr{
  margin-top:.6rem;font-size:.85rem;color:var(--ink-mute);
  display:inline-flex;align-items:center;gap:.4em;
}

/* Team-Seite: Grid statt Reihe */
.team-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.1rem;
}
.team-grid .tcard{scroll-snap-align:none}

/* Profil-Dialog — mittig, OHNE Scrollen am Desktop: die Karte wächst mit dem
   Inhalt, die Bildspalte hat exakt das Foto-Seitenverhältnis (2:3) — dadurch
   füllt das Porträt inkl. BECO-Logo die Spalte komplett, ohne Balken/Anschnitt. */
.profil{
  margin:auto; /* exakt mittig im Viewport */
  width:min(960px,calc(100vw - 2rem));
  height:min(690px,calc(100dvh - 2rem)); /* feste Höhe: Bildspalte = Höhe × 2/3 */
  border:0;border-radius:var(--radius-gross);padding:0;
  background:var(--weiss);color:var(--ink);
  box-shadow:0 40px 90px -30px rgba(5,26,58,.55);
}
.profil::backdrop{background:rgba(5,26,58,.6);backdrop-filter:blur(6px)}
.profil__inner{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:stretch;
  height:100%;
}
.profil__foto{
  background:linear-gradient(160deg,#EDEFEA,#DDE2DA);
  height:100%;aspect-ratio:2/3;min-height:0; /* Spaltenbreite folgt dem Foto-Format */
}
.profil__foto img{width:100%;height:100%;object-fit:cover;object-position:center}
.profil__body{
  padding:clamp(1.2rem,2.4vw,1.9rem) clamp(1.4rem,2.6vw,2.1rem);
  min-height:0;overflow-y:auto; /* zeigt NUR bei sehr kleinen Screens eine Scrollbar */
  overscroll-behavior:contain;
}
/* Seite hinter offenem Dialog nicht scrollbar */
html.modal-offen,html.modal-offen body{overflow:hidden}
.profil__rolle{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gruen);font-weight:600}
.profil__name{font-family:var(--font-serif);font-weight:500;font-size:1.55rem;margin-top:.25rem;line-height:1.25;overflow:visible}
.profil h4{
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);
  margin-top:1.1rem;margin-bottom:.35rem;font-weight:600;
}
.profil ul li{
  position:relative;padding-left:1.2em;margin-bottom:.22em;font-size:.92rem;color:var(--ink-soft);line-height:1.5;
}
.profil ul li::before{content:"—";position:absolute;left:0;color:var(--gruen)}
.profil__zitat{
  margin-top:1rem;padding:.75rem 1rem;border-left:3px solid var(--gruen);
  background:var(--paper);border-radius:0 12px 12px 0;
  font-family:var(--font-serif);font-style:italic;font-size:.92rem;line-height:1.55;color:var(--ink-soft);
}
.profil__kontakt{margin-top:.85rem;display:flex;gap:1.4rem;flex-wrap:wrap;font-size:.95rem}
.profil__kontakt a{font-weight:600;color:var(--marke)}
.profil__kontakt a:hover{color:var(--gruen)}
.profil__zu{
  position:absolute;top:.9rem;right:.9rem;width:42px;height:42px;border-radius:50%;
  background:var(--nacht);color:#fff;display:grid;place-items:center;font-size:1.1rem;
  transition:background var(--t-s) var(--ease),transform var(--t-s) var(--ease);
}
.profil__zu:hover{background:var(--gruen);transform:rotate(90deg)}
@media (max-width:720px){
  /* Mobil: kleines Popup über geblurrtem Hintergrund — Foto oben in voller
     Kartenbreite (Original-Seitenverhältnis, nichts liegt über dem Bild),
     darunter der Text; die ganze Karte lässt sich natürlich runterwischen. */
  .profil{
    width:calc(100vw - 1.6rem);height:auto;
    max-height:calc(100dvh - 2.4rem);
    margin:auto;border-radius:var(--radius-gross);
  }
  .profil__inner{
    display:block;max-height:calc(100dvh - 2.4rem);overflow-y:auto;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  }
  .profil__foto{width:100%;height:auto;aspect-ratio:2/3}
  .profil__body{height:auto;overflow:visible;padding:1.3rem 1.2rem 2rem}
  .profil__zu{position:absolute;top:.7rem;right:.7rem;box-shadow:0 6px 18px rgba(5,26,58,.35)}
}

/* ---------- Karriere-Teaser ---------- */
.karriere-teaser{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;
}
.benefit-liste{display:grid;gap:.7rem;margin-top:1.6rem}
.benefit-liste li{
  display:flex;align-items:center;gap:.9em;
  padding:.85rem 1.1rem;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid var(--linie-hell);
  font-size:.98rem;color:var(--hell-soft);
}
.benefit-liste .haken{color:var(--gruen-hell);flex:0 0 auto}
.karriere-teaser__media{position:relative;border-radius:var(--radius-gross);overflow:hidden}
.karriere-teaser__media img{width:100%;object-fit:cover}
@media (max-width:900px){.karriere-teaser{grid-template-columns:1fr}}

/* ---------- Seiten-Hero (Bereiche & Co) ---------- */
.phero{
  position:relative;overflow:hidden;
  background:var(--nacht);color:var(--paper);
  border-radius:0 0 var(--radius-sheet) var(--radius-sheet);
}
.phero__media{position:absolute;inset:0;z-index:0}
.phero__media video,.phero__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.38;filter:saturate(.55) contrast(1.05);
}
.phero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,26,58,.95) 8%,rgba(5,26,58,.45) 55%,rgba(5,26,58,.7));
}
.phero__inner{
  position:relative;z-index:1;
  padding-block:clamp(5rem,12vw,9.5rem) clamp(3rem,7vw,5rem);
}
.crumbs{
  display:flex;gap:.7em;flex-wrap:wrap;align-items:center;
  font-size:.8rem;letter-spacing:.06em;color:var(--hell-mute);
}
.crumbs a:hover{color:#fff}
.crumbs .trenner{opacity:.5}
.crumbs [aria-current]{color:var(--gruen-hell);font-weight:600}
.phero__titel{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(2.4rem,1rem + 6vw,5.4rem);
  line-height:1.04;letter-spacing:-.018em;text-wrap:balance;
  margin-top:1.2rem;max-width:16em;
}
.phero__titel em{font-style:italic;color:var(--gruen-hell)}
.phero__text{max-width:52ch;margin-top:1.4rem;font-size:1.1rem;color:var(--hell-soft)}
.phero__aktionen{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin-top:2rem}

/* ---------- Leistungs-Blöcke (Bereichsseiten) ---------- */
.leistung{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  gap:clamp(1.5rem,4vw,4rem);
  padding-block:clamp(2.2rem,5vw,3.5rem);
  border-top:1px solid var(--linie);
  scroll-margin-top:110px;
}
.leistung:first-of-type{border-top:0}
.leistung__num{
  font-size:.78rem;font-weight:600;letter-spacing:.13em;color:var(--gruen);
}
.leistung__titel{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(1.5rem,1rem + 1.6vw,2.2rem);line-height:1.15;margin-top:.6rem;
  text-wrap:balance;
}
.leistung__intro{margin-top:.9rem;color:var(--ink-soft);font-size:1rem;max-width:44ch}
.leistung__body h4{
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);
  font-weight:600;margin-bottom:.9rem;
}
.kompetenzen{display:grid;gap:.65rem}
.kompetenzen li{
  padding:1rem 1.2rem;border-radius:14px;
  background:var(--weiss);border:1px solid var(--linie);
  transition:border-color var(--t-s) var(--ease),transform var(--t-s) var(--ease);
}
.kompetenzen li:hover{border-color:var(--gruen);transform:translateX(4px)}
.kompetenzen b{display:block;font-weight:600;font-size:1rem}
.kompetenzen p{margin-top:.3rem;font-size:.92rem;color:var(--ink-soft)}
@media (max-width:860px){.leistung{grid-template-columns:1fr;gap:1.2rem}}

/* Bereichs-Intro zweispaltig mit Bild */
.bereich-intro{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
.bereich-intro__text p+p{margin-top:1em}
.bereich-intro__text p{color:var(--ink-soft)}
.bereich-intro__media{border-radius:var(--radius-gross);overflow:hidden}
.bereich-intro__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.bereich-intro__media--hoch img{aspect-ratio:4/5}
@media (max-width:860px){.bereich-intro{grid-template-columns:1fr}}

/* Sprunganker-Leiste */
.anker-leiste{
  display:flex;gap:.6rem;flex-wrap:wrap;margin-top:2rem;
}
.anker-leiste a{
  padding:.5em 1.1em;border-radius:999px;font-size:.85rem;font-weight:600;
  background:rgba(255,255,255,.08);color:var(--hell-soft);
  border:1px solid var(--linie-hell);
  transition:background var(--t-s) var(--ease),color var(--t-s) var(--ease);
}
.anker-leiste a:hover{background:var(--gruen);border-color:var(--gruen);color:#fff}

/* ---------- Akkordeon (Jobs / Legal-Bereiche) ---------- */
.acc{
  border:1px solid var(--linie);border-radius:var(--radius);
  background:var(--weiss);overflow:hidden;
  transition:box-shadow var(--t-m) var(--ease);
  scroll-margin-top:110px;
}
.acc+.acc{margin-top:.8rem}
.acc[open]{box-shadow:0 22px 44px -30px rgba(0,48,110,.35)}
.acc summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:1.2rem;
  padding:1.2rem 1.4rem;
}
.acc summary::-webkit-details-marker{display:none}
.acc__num{font-size:.75rem;font-weight:600;letter-spacing:.12em;color:var(--gruen);flex:0 0 auto}
.acc__titel{font-family:var(--font-serif);font-weight:500;font-size:1.25rem;flex:1;line-height:1.25}
.acc__meta{font-size:.82rem;color:var(--ink-mute);white-space:nowrap}
.acc__plus{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  border:1.5px solid var(--linie);display:grid;place-items:center;
  transition:transform var(--t-m) var(--ease),background var(--t-s) var(--ease),border-color var(--t-s) var(--ease);
}
.acc__plus::before{content:"+";font-size:1.2rem;line-height:1;color:var(--ink)}
.acc[open] .acc__plus{transform:rotate(45deg);background:var(--gruen);border-color:var(--gruen)}
.acc[open] .acc__plus::before{color:#fff}
.acc__body{padding:0 1.4rem 1.5rem;border-top:1px solid var(--linie)}
.acc__body>*+*{margin-top:1rem}
.acc__body{color:var(--ink-soft);font-size:.98rem}
.acc__body h4{
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);
  font-weight:600;margin-top:1.4rem;color:var(--marke);
}
.acc__body ul li{position:relative;padding-left:1.2em;margin-bottom:.35em}
.acc__body ul li::before{content:"—";position:absolute;left:0;color:var(--gruen)}
.acc__fakten{
  display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem;
}
.acc__fakten span{
  padding:.35em .9em;border-radius:999px;font-size:.8rem;font-weight:600;
  background:var(--paper);border:1px solid var(--linie);color:var(--ink-soft);
}
@media (max-width:720px){
  .acc__meta{display:none}
  .acc summary{padding:1rem 1.1rem;gap:.9rem}
  .acc__body{padding:0 1.1rem 1.2rem}
}

/* ---------- Standorte ---------- */
.standorte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.ort{
  padding:1.5rem 1.4rem;border-radius:var(--radius-gross);
  background:var(--weiss);border:1px solid var(--linie);
  display:flex;flex-direction:column;gap:.3rem;
  transition:transform var(--t-m) var(--ease),box-shadow var(--t-m) var(--ease);
}
.ort:hover{transform:translateY(-5px);box-shadow:0 22px 44px -30px rgba(0,48,110,.35)}
.ort__stadt{font-family:var(--font-serif);font-weight:500;font-size:1.35rem}
.ort__adresse{color:var(--ink-soft);font-size:.95rem}
.ort__link{margin-top:auto;padding-top:.9rem;font-size:.88rem;font-weight:600;color:var(--marke)}
.ort__link:hover{color:var(--gruen)}
@media (max-width:1000px){.standorte{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.standorte{grid-template-columns:1fr}}

/* ---------- Kontakt-CTA + Formular ---------- */
.kontakt-cta{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5rem);
}
.kontakt-cta__kicker{font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;color:var(--hell-mute);font-weight:600}
.kontakt-cta__titel{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(2.2rem,1.2rem + 4vw,4rem);line-height:1.05;margin-top:.8rem;
}
.kontakt-cta__titel em{font-style:italic;color:var(--gruen-hell)}
.kontakt-cta__text{margin-top:1.2rem;color:var(--hell-soft);max-width:44ch}
.kontakt-cta__direkt{margin-top:2rem;display:grid;gap:.6rem;font-size:1.05rem}
.kontakt-cta__direkt a{display:inline-flex;align-items:center;gap:.7em;font-weight:600;color:#fff;width:fit-content}
.kontakt-cta__direkt a:hover{color:var(--gruen-hell)}
.kontakt-cta__direkt .mini{font-size:.85rem;color:var(--hell-mute)}
.oeffnung{margin-top:1.8rem;font-size:.9rem;color:var(--hell-mute);display:grid;gap:.2rem}
.oeffnung b{color:var(--hell-soft);font-weight:600}

.form{display:grid;gap:1rem}
.form__reihe{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:640px){.form__reihe{grid-template-columns:1fr}}
.feld{display:grid;gap:.4rem}
.feld label{font-size:.82rem;font-weight:600;letter-spacing:.04em;color:var(--hell-soft)}
.feld input,.feld select,.feld textarea{
  font:inherit;color:#fff;
  background:rgba(255,255,255,.07);
  border:1px solid var(--linie-hell);border-radius:12px;
  padding:.85em 1em;width:100%;
  transition:border-color var(--t-s) var(--ease),background var(--t-s) var(--ease);
}
.feld input::placeholder,.feld textarea::placeholder{color:var(--hell-mute)}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none;border-color:var(--gruen-hell);background-color:rgba(255,255,255,.11);
}
.feld select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A9B4C6' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1em center}
.feld select option{color:var(--ink);background:#fff}
.feld textarea{min-height:130px;resize:vertical}
.form__fuss{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.form__hinweis{font-size:.8rem;color:var(--hell-mute);max-width:38ch}
.form__hinweis a{text-decoration:underline;text-underline-offset:2px}
.form__status{font-size:.95rem;font-weight:600;min-height:1.4em}
.form__status.ok{color:var(--gruen-hell)}
.form__status.fehler{color:#F2A0A0}
/* Honeypot */
.feld--hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
@media (max-width:900px){.kontakt-cta{grid-template-columns:1fr}}

/* Formular auf hellem Grund (kontakt.html) */
.form--hell .feld label{color:var(--ink-soft)}
/* WICHTIG: background-color statt background-Shorthand — der Shorthand hat
   background-repeat zurückgesetzt und das Select-Chevron gekachelt („blaue Wellen"). */
.form--hell .feld input,.form--hell .feld select,.form--hell .feld textarea{
  color:var(--ink);background-color:var(--weiss);border-color:var(--linie);
}
.form--hell .feld input::placeholder,.form--hell .feld textarea::placeholder{color:var(--ink-mute)}
.form--hell .feld input:focus,.form--hell .feld select:focus,.form--hell .feld textarea:focus{
  border-color:var(--gruen);background-color:var(--weiss);
}
.form--hell .feld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230B2143' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.form--hell .form__hinweis{color:var(--ink-mute)}
.form--hell .form__status.ok{color:var(--gruen)}
.form--hell .form__status.fehler{color:#B4231F}

/* ---------- Video-Einbettung (Karriere) ---------- */
.video-box{
  position:relative;border-radius:var(--radius-gross);overflow:hidden;
  background:var(--nacht);aspect-ratio:16/9;
}
.video-box video{width:100%;height:100%;object-fit:cover}
.video-box__start{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(160deg,rgba(5,26,58,.55),rgba(5,26,58,.8));
  color:#fff;transition:opacity var(--t-m) var(--ease);
}
.video-box__start span{
  display:grid;place-items:center;width:84px;height:84px;border-radius:50%;
  background:var(--gruen);transition:transform var(--t-s) var(--ease);
}
.video-box__start:hover span{transform:scale(1.08)}
.video-box__start svg{margin-left:4px}
.video-box.is-playing .video-box__start{opacity:0;pointer-events:none}

/* ---------- Footer ---------- */
.footer{
  position:relative;overflow:clip;
  background:var(--nacht);color:var(--hell-soft);
  border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;
  margin-top:calc(var(--radius-sheet) * -1);
}
.footer__watermark{
  position:absolute;inset-inline:0;bottom:-.18em;z-index:0;
  font-family:var(--font-sans);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(6rem,24vw,22rem);line-height:1;text-align:center;
  color:transparent;-webkit-text-stroke:1px rgba(245,246,242,.07);
  user-select:none;pointer-events:none;
}
.footer__inner{position:relative;z-index:1;padding-block:clamp(3.5rem,7vw,5.5rem) 1.5rem}
.footer__kopf{
  display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  padding-bottom:2.5rem;border-bottom:1px solid var(--linie-hell);
}
.footer__logo img{height:52px;width:auto;display:block}
.footer__claim{margin-top:1rem;font-family:var(--font-serif);font-style:italic;color:var(--hell-mute);max-width:26ch}
.footer__member{font-size:.82rem;color:var(--hell-mute)}
.footer__member a{color:var(--hell-soft);font-weight:600}
.footer__member a:hover{color:#fff}
.footer__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;
  padding-block:2.5rem;
}
.footer__spalte h4{
  font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--hell-mute);
  font-weight:600;margin-bottom:1rem;
}
.footer__spalte ul{display:grid;gap:.45rem;font-size:.95rem}
.footer__spalte a:hover{color:#fff}
.footer__spalte address{font-style:normal;font-size:.95rem;line-height:1.6}
.footer__fuss{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding-top:1.5rem;border-top:1px solid var(--linie-hell);
  font-size:.82rem;color:var(--hell-mute);
}
.footer__fuss nav{display:flex;gap:1.4rem}
.footer__fuss a:hover{color:#fff}
.footer__sozial{display:flex;gap:.6rem}
.footer__sozial a{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--linie-hell);color:var(--hell-soft);
  transition:background var(--t-s) var(--ease),border-color var(--t-s) var(--ease),color var(--t-s) var(--ease),transform var(--t-s) var(--ease);
}
.footer__sozial a:hover{background:var(--gruen);border-color:var(--gruen);color:#fff;transform:translateY(-3px)}
@media (max-width:900px){
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__spalte--breit{grid-column:1 / -1}
  .footer__fuss{justify-content:center;text-align:center}
}

/* ---------- Reveals ---------- */
[data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity var(--t-l) var(--ease),transform var(--t-l) var(--ease);
  transition-delay:calc(var(--d,0) * 80ms);
}
[data-reveal].is-in{opacity:1;transform:none}

/* ---------- Reduced Motion & Debug ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  [data-reveal]{opacity:1;transform:none}
  .marquee__track{animation:none}
  .hero__eyebrow::before{animation:none}
}
html.flat [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
html.flat .marquee__track{animation:none}

/* ---------- Print ---------- */
@media print{
  .topbar,.header,.nav-mob,.footer__sozial,.btn,body::after{display:none !important}
  body{background:#fff;color:#000}
}

/* ==========================================================================
   Ergänzungen 07/2026 — Kundenfeedback
   ========================================================================== */

/* ---------- Ladescreen (wie Live-Site: weiß, Logo, Balken oben) ---------- */
.preloader{
  position:fixed;inset:0;z-index:9999;
  background:#fff;display:grid;place-items:center;
  transition:opacity .7s var(--ease),visibility .7s var(--ease);
}
.preloader img{width:min(420px,64vw);height:auto}
.preloader__bar{
  position:absolute;top:0;left:0;right:0;height:5px;background:#E4E7EC;
}
.preloader__bar::after{
  content:"";position:absolute;inset:0;background:var(--marke);
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
  animation:preloader-lauf 1.4s ease-out forwards;
}
@keyframes preloader-lauf{to{transform:scaleX(.82)}}
.preloader.is-voll .preloader__bar::after{animation:none;transform:scaleX(1)}
.preloader.is-done{opacity:0;visibility:hidden}
@media (prefers-reduced-motion:reduce){.preloader{display:none}}

/* ---------- Startseiten-Hero mit Video (Original der Live-Site) ---------- */
.hero--video{color:var(--paper)}
.hero--video .wrap{position:relative;z-index:1}
.hero--video .hero__hintergrund{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--nacht)}
.hero--video .hero__hintergrund video,
.hero--video .hero__hintergrund img{
  width:100%;height:100%;object-fit:cover;object-position:center;
}
.hero--video .hero__hintergrund::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(5,26,58,.86) 0%,rgba(5,26,58,.55) 55%,rgba(5,26,58,.35) 100%);
}
.hero--video .hero__hintergrund img{position:absolute;inset:0}
.hero--video .hero__hintergrund video{position:relative;z-index:0;opacity:0;transition:opacity .8s var(--ease)}
.hero--video .hero__hintergrund video.is-an{opacity:1}
.hero--video .hero__titel{color:#fff}
.hero--video .hero__titel em{color:var(--gruen-hell)}
.hero--video .hero__eyebrow{color:var(--hell-soft)}
.hero--video .hero__text{color:var(--hell-soft)}
.hero--video .hero__trust{color:var(--hell-mute)}
.hero--video .hero__meta{color:var(--hell-mute);border-color:var(--linie-hell)}

/* ---------- Video-Box: YouTube-Einbettung erst nach Klick (DSGVO) ---------- */
.video-box__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-box__hinweis{
  position:absolute;left:0;right:0;bottom:0;padding:.6rem 1rem;
  font-size:.72rem;color:var(--hell-mute);text-align:center;
  background:linear-gradient(to top,rgba(5,26,58,.8),transparent);
}

/* ---------- Bewerbungsformular (Karte + Datei-Upload) ---------- */
.form--karte{
  background:rgba(255,255,255,.05);
  border:1px solid var(--linie-hell);
  border-radius:var(--radius-gross);
  padding:clamp(1.4rem,3vw,2.2rem);
}
.feld--datei input[type="file"]{
  position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);
}
.feld--datei .datei-zone{
  display:grid;place-items:center;gap:.3rem;text-align:center;
  padding:1.4rem 1rem;border-radius:12px;cursor:pointer;
  border:1.5px dashed var(--linie-hell);color:var(--hell-soft);
  transition:border-color var(--t-s) var(--ease),background-color var(--t-s) var(--ease);
}
.feld--datei .datei-zone:hover,
.feld--datei input[type="file"]:focus-visible + .datei-zone{
  border-color:var(--gruen-hell);background-color:rgba(255,255,255,.06);
}
.feld--datei .datei-zone b{color:#fff;font-weight:600}
.feld--datei .datei-zone .mini{font-size:.78rem;color:var(--hell-mute)}
.feld--datei .datei-liste{
  display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem;font-size:.82rem;
}
.feld--datei .datei-liste span{
  padding:.25em .8em;border-radius:99px;
  background:rgba(74,152,43,.18);color:var(--gruen-hell);border:1px solid rgba(74,152,43,.4);
}

/* ---------- Bewerbungs-Fragebogen (jetzt-bewerben.html) ---------- */
.bkarte{
  background:var(--weiss);border:1px solid var(--linie);
  border-radius:var(--radius-gross);
  padding:clamp(1.6rem,4vw,3rem);
  box-shadow:0 30px 70px -40px rgba(0,48,110,.35);
  scroll-margin-top:110px;
}
.bfortschritt{margin-bottom:clamp(1.8rem,4vw,2.6rem)}
.bfortschritt__leiste{height:6px;border-radius:99px;background:var(--linie);overflow:hidden}
.bfortschritt__fuellung{height:100%;width:14%;background:var(--gruen);border-radius:99px;transition:width .5s var(--ease)}
.bfortschritt__punkte{display:flex;justify-content:space-between;margin-top:.9rem}
.bfortschritt__punkt{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:.75rem;font-weight:700;color:var(--ink-mute);
  background:var(--paper);border:1.5px solid var(--linie);
  transition:background var(--t-s) var(--ease),color var(--t-s) var(--ease),border-color var(--t-s) var(--ease);
}
.bfortschritt__punkt.is-aktiv{background:var(--marke);border-color:var(--marke);color:#fff}
.bfortschritt__punkt.is-fertig{background:var(--gruen);border-color:var(--gruen);color:#fff}
.bschritt__titel{
  font-family:var(--font-serif);font-weight:500;line-height:1.15;
  font-size:clamp(1.5rem,1rem + 2vw,2.2rem);text-wrap:balance;
}
.bschritt__titel em{font-style:italic;color:var(--gruen)}
.bschritt__hinweis{color:var(--ink-mute);font-size:.9rem;margin-top:.4rem}
.braster{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:.9rem;margin-top:1.6rem;
}
.bkachel{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.9rem;
  padding:1.05rem 1.1rem;border-radius:14px;cursor:pointer;
  background:var(--paper);border:1.5px solid var(--linie);
  font-weight:600;font-size:.93rem;line-height:1.35;color:var(--ink);
  transition:border-color var(--t-s) var(--ease),background var(--t-s) var(--ease),transform var(--t-s) var(--ease),box-shadow var(--t-s) var(--ease);
}
.bkachel:hover{border-color:var(--gruen);transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(0,48,110,.35)}
.bkachel input{position:absolute;opacity:0;pointer-events:none}
.bkachel__icon{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.25rem;
  background:#fff;border:1px solid var(--linie);
}
.bkachel__text{min-width:0;overflow-wrap:anywhere} /* Text bleibt IN der Kachel, Haken bleibt frei */
.bkachel__unter{display:block;font-weight:400;font-size:.78rem;color:var(--ink-mute);margin-top:.15em}
.bkachel__haken{
  flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:.75rem;color:#fff;background:var(--gruen);
  opacity:0;transform:scale(.5);transition:opacity var(--t-s) var(--ease),transform var(--t-s) var(--ease);
}
.bkachel:has(input:checked){border-color:var(--gruen);background:#F2F8EE}
.bkachel:has(input:checked) .bkachel__haken{opacity:1;transform:none}
.bkachel:has(input:focus-visible){outline:2px solid var(--gruen);outline-offset:3px}
.bschritt__aktionen{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--linie);
}
.bschritt__aktionen .neustart{margin-left:auto;font-size:.85rem;color:var(--ink-mute)}
.bschritt__aktionen .neustart:hover{color:var(--marke)}
.bfehler{
  margin-top:1rem;padding:.7rem 1rem;border-radius:10px;font-size:.9rem;font-weight:600;
  background:#FBEDEC;color:#B4231F;border:1px solid #EFC5C2;
}
.bdatei{
  display:grid;place-items:center;gap:.35rem;text-align:center;
  margin-top:1.6rem;padding:2rem 1.2rem;border-radius:14px;cursor:pointer;
  border:1.5px dashed var(--linie);background:var(--paper);color:var(--ink-soft);
  transition:border-color var(--t-s) var(--ease);
}
.bdatei:hover{border-color:var(--gruen)}
.bdatei b{color:var(--ink)}
.bdatei .mini{font-size:.8rem;color:var(--ink-mute)}
.bdatei-info{
  margin-top:.8rem;display:inline-block;padding:.35em 1em;border-radius:99px;font-size:.85rem;
  background:#F2F8EE;color:var(--gruen);border:1px solid rgba(74,152,43,.4);font-weight:600;
}
.bkontakt{display:grid;gap:1rem;margin-top:1.6rem}
.bkontakt .form__reihe{grid-template-columns:minmax(110px,150px) 1fr}
.bkontakt .feld input,.bkontakt .feld select{
  color:var(--ink);background-color:#fff;border:1px solid var(--linie);border-radius:12px;
  padding:.85em 1em;width:100%;font:inherit;
}
.bkontakt .feld input:focus,.bkontakt .feld select:focus{outline:none;border-color:var(--gruen)}
.bkontakt .feld label{color:var(--ink-soft);font-size:.82rem;font-weight:600;letter-spacing:.04em}
.bkontakt .feld select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230B2143' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1em center;
}
.bcheck{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;color:var(--ink-soft)}
.bcheck input{width:18px;height:18px;margin-top:.2em;accent-color:var(--gruen)}
.bdanke{text-align:center;padding:clamp(1.5rem,4vw,3rem) 0}
.bdanke__icon{
  width:76px;height:76px;margin:0 auto 1.2rem;border-radius:50%;
  display:grid;place-items:center;font-size:2rem;background:#F2F8EE;border:2px solid var(--gruen);
}
.bdanke h2{font-family:var(--font-serif);font-weight:500;font-size:clamp(1.7rem,1rem + 2.4vw,2.6rem)}
.bdanke p{color:var(--ink-soft);max-width:44ch;margin:1rem auto 0}
@media (max-width:640px){
  .braster{grid-template-columns:1fr}
  .bkontakt .form__reihe{grid-template-columns:1fr}
  .bfortschritt__punkt{width:24px;height:24px;font-size:.68rem}
}
.bschritt{border:0;padding:0;margin:0;min-width:0}
.bschritt legend{padding:0;display:block;width:100%}
.bdatei.is-drag{border-color:var(--gruen);background:#F2F8EE}
/* Benefits-Kacheln + Ansprechpartner auf der Bewerbungsseite */
.bvorteile{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;margin-top:2rem}
.bvorteil{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius-gross);
  padding:1.5rem 1.4rem;
  transition:transform var(--t-m) var(--ease),box-shadow var(--t-m) var(--ease);
}
.bvorteil:hover{transform:translateY(-5px);box-shadow:0 22px 44px -28px rgba(0,48,110,.35)}
.bvorteil__icon{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:1.3rem;
  background:var(--paper);border:1px solid var(--linie);
}
.bvorteil h3{font-family:var(--font-serif);font-weight:500;font-size:1.15rem;margin-top:.9rem}
.bvorteil p{margin-top:.4rem;font-size:.92rem;color:var(--ink-soft)}
.bansprech{display:flex;justify-content:center;gap:clamp(1.5rem,4vw,3rem);flex-wrap:wrap;margin-top:2rem}
.bansprech figure{text-align:center}
.bansprech img{
  width:clamp(110px,14vw,150px);aspect-ratio:1;border-radius:50%;
  object-fit:cover;object-position:50% 34%;margin-inline:auto; /* Logo im Bild wird sauber weggeschnitten */
  background:linear-gradient(160deg,#EDEFEA,#DDE2DA);
  border:3px solid var(--weiss);box-shadow:0 14px 30px -18px rgba(0,48,110,.4);
}
.bansprech figcaption{margin-top:.7rem;font-weight:600;font-size:.95rem}
.bansprech .rolle{display:block;font-weight:400;font-size:.8rem;color:var(--ink-mute)}

/* ---------- Fragebogen: Eingabefelder immer dunkel auf weiß ---------- */
.bkarte .feld input,.bkarte .feld select,.bkarte .feld textarea{
  color:var(--ink);background-color:#fff;border:1px solid var(--linie);
  border-radius:12px;padding:.85em 1em;width:100%;font:inherit;
}
.bkarte .feld input::placeholder,.bkarte .feld textarea::placeholder{color:var(--ink-mute)}
.bkarte .feld input:focus,.bkarte .feld select:focus,.bkarte .feld textarea:focus{
  outline:none;border-color:var(--gruen);background-color:#fff;
}
.bkarte .feld label{color:var(--ink-soft)}

/* ---------- Navigation: Karriere-Dropdown ---------- */
.nav__gruppe{position:relative;display:inline-flex}
.nav__gruppe > .nav__link{display:inline-flex;align-items:center;gap:.35em}
.nav__gruppe .chev{transition:transform var(--t-s) var(--ease)}
.nav__gruppe:hover .chev,.nav__gruppe:focus-within .chev{transform:rotate(180deg)}
.nav__drop{
  position:absolute;top:calc(100% + .4rem);left:50%;transform:translateX(-50%) translateY(6px);
  min-width:230px;padding:.45rem;display:grid;gap:2px;
  background:#fff;border:1px solid var(--linie);border-radius:14px;
  box-shadow:0 24px 50px -24px rgba(0,48,110,.35);
  opacity:0;visibility:hidden;
  transition:opacity var(--t-s) var(--ease),transform var(--t-s) var(--ease),visibility var(--t-s);
  z-index:110;
}
.nav__gruppe:hover .nav__drop,.nav__gruppe:focus-within .nav__drop{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.nav__drop a{
  padding:.6em .9em;border-radius:9px;font-weight:500;font-size:.94rem;color:var(--ink-soft);
  transition:background var(--t-s) var(--ease),color var(--t-s) var(--ease);
}
.nav__drop a:hover{background:var(--paper);color:var(--marke)}
.nav__drop a[aria-current="page"]{color:var(--gruen);font-weight:600}
.nav-mob__sub{margin-left:1.2em;font-size:.92em;opacity:.85}