:root {
  --akzent:#0082C8; --akzent-hover:#026CA5; --akzent-dunkelgrund:#5AC0F0;
  --dunkel:#0F172A; --flaeche:#F5F8FA; --linie:#E9EEF3; --input-rand:#D7DFE6;
  --label-farbe:#0082C8; --knopf-hover-text:#0082C8;
  --akzent-22:rgba(0,130,200,.22);
  --hero-dunkel-a:rgba(8,17,28,.84); --hero-dunkel-b:rgba(8,17,28,.74);
  --hero-dunkel-rand:rgba(8,17,28,.05);
  --erfolg-flaeche:#F2F9FD; --faq-linie:#E2E8F0; --kk-linie:#E2E8F0;
  --fusszeile-linie:#E9EEF3; --linie-dunkler:#E2E8F0; --akzent-text:#0082C8;
  --nummer-blass:#CBD5E1;
}
/* ============================================================
   Gemeinsames Stylesheet kworkx.de / klogistik.eu
   Werte exakt nach Design-Übergabe (CLAUDE-DESIGN.md + README).
   Marken-Tokens (--akzent …) setzt build.py als :root-Block davor.
   ============================================================ */

@font-face { font-family:'Brandon'; src:url('assets/fonts/BrandonGrotesque-Black.woff2') format('woff2'); font-weight:900; font-display:swap; }
@font-face { font-family:'Brandon'; src:url('assets/fonts/BrandonGrotesque-Light.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Brandon'; src:url('assets/fonts/BrandonGrotesque-RegularItalic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }

/* ---------- Basis ---------- */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:112px; }
body { margin:0; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#475569; background:#fff; -webkit-font-smoothing:antialiased; }
a { color:var(--akzent); text-decoration:none; }
a:hover { color:var(--akzent-hover); }
img { max-width:100%; }
/* <picture> soll layoutneutral sein: img-Regeln wirken direkt im Grid/Absolut-Kontext.
   source muss dabei explizit unsichtbar bleiben, sonst wird es selbst zum Grid-Item. */
picture { display:contents; }
source { display:none; }
input,select,textarea,button { font-family:inherit; font-size:inherit; }
h1,h2,h3,p { margin:0; }
h3 { font-size:inherit; font-weight:inherit; }  /* Kartentitel sind h3 für die Gliederung, sehen aber unverändert aus */

.container { max-width:1180px; margin:0 auto; padding:0 32px; }

/* Label mit Akzentstrich davor */
.label { display:flex; align-items:center; gap:11px; font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--label-farbe); }
.label::before { content:''; width:28px; height:2px; background:var(--akzent); flex:none; }
.label--hell { font-size:11.5px; letter-spacing:.16em; color:rgba(255,255,255,.62); }
.label--ohne-strich::before { display:none; }

h2.titel { font-family:'Brandon',sans-serif; font-weight:300; font-size:clamp(36px,4.2vw,54px); line-height:1.06; letter-spacing:-.02em; color:#0F172A; margin-top:22px; }
h2.titel--mittel { font-size:clamp(32px,3.6vw,46px); line-height:1.08; }
h2.titel--klein { font-size:clamp(30px,3.4vw,42px); line-height:1.08; margin-top:0; }

/* ---------- Navigationskapsel ---------- */
.nav-huelle { position:fixed; top:20px; left:0; right:0; z-index:80; display:flex; justify-content:center; padding:0 20px; pointer-events:none; }
/* Nav-Größen 26.08. auf Philipps Wunsch angehoben (vorher 11,5 px) — CLAUDE-DESIGN.md nachgezogen */
.nav-kapsel { pointer-events:auto; display:flex; align-items:center; gap:10px; width:100%; max-width:1180px; padding:10px 10px 10px 22px; background:rgba(11,18,32,.66); -webkit-backdrop-filter:blur(20px) saturate(140%); backdrop-filter:blur(20px) saturate(140%); border:1px solid rgba(255,255,255,.11); border-radius:999px; box-shadow:0 18px 50px rgba(8,15,26,.34); }
.nav-logo { display:flex; align-items:center; flex:none; margin-right:8px; }
.nav-logo img { height:54px; width:auto; display:block; }
.nav-links { display:flex; align-items:center; gap:2px; flex:1 1 auto; min-width:0; justify-content:center; overflow:hidden; }
.nav-links a { padding:10px 11px; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; color:rgba(255,255,255,.72); font-size:13.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.nav-links a:hover { color:#fff; }
.nav-telefon { flex:none; color:rgba(255,255,255,.72); font-size:14px; font-weight:600; white-space:nowrap; padding:0 10px 0 14px; }
.nav-telefon:hover { color:#fff; }
.nav-cta { flex:none; background:var(--akzent); color:#fff; padding:14px 26px; font-size:13.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; border-radius:999px; }
.nav-cta:hover { background:#fff; color:var(--akzent); }
/* Kunden/Bewerber-Umschalter: Segment-Pille in der Kapsel */
.nav-strang { flex:none; display:flex; gap:3px; padding:4px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); border-radius:999px; }
.nav-strang a { padding:8px 16px; border-radius:999px; color:rgba(255,255,255,.72); font-size:12.5px; font-weight:700; letter-spacing:.05em; white-space:nowrap; }
.nav-strang a:hover { color:#fff; }
.nav-strang a.aktiv { background:#fff; color:#0F172A; }
.nav-strang--mobil { display:none; }
/* Sprachumschalter: bewusst zurückhaltend (kleiner Kreis am Kapselrand) */
.nav-sprache { flex:none; margin-left:2px; padding:9px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.72); font-size:12px; font-weight:700; letter-spacing:.08em; }
.nav-sprache:hover { color:#fff; border-color:rgba(255,255,255,.45); }

/* Mobiles Menü (unter 768 px): mitlaufender Sektionsname als Trigger + Dropdown.
   Der Plus-Marker (FAQ-Ästhetik) dreht bei geöffnetem Menü zum ×. */
.nav-spy { display:none; flex:1; min-width:0; align-items:center; justify-content:space-between; gap:12px; border:0; background:none; cursor:pointer; padding:8px 8px 8px 14px; color:#fff; }
.nav-spy [data-spy-text] { font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.88); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-spy-plus { flex:none; }
.nav-huelle.offen .nav-spy-plus { transform:rotate(45deg); }
.nav-dropdown { display:none; }
.strang-gate { display:none; }
@media (max-width:768px) {
  .nav-huelle { flex-direction:column; align-items:center; }
  .nav-dropdown { width:100%; margin-top:10px; pointer-events:auto; background:rgba(11,18,32,.94); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.12); border-radius:24px; padding:10px; box-shadow:0 18px 50px rgba(8,15,26,.4); }
  .nav-huelle.offen .nav-dropdown { display:block; }
  .nav-dropdown a { display:block; padding:13px 18px; color:rgba(255,255,255,.82); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
  .nav-dropdown a:hover { color:#fff; }
  .nav-dropdown .dropdown-link + .dropdown-link,
  .nav-dropdown .dropdown-telefon, .nav-dropdown .dropdown-strang { border-top:1px solid rgba(255,255,255,.07); }
  .nav-dropdown .dropdown-telefon { text-transform:none; letter-spacing:.02em; font-weight:600; font-size:15px; }
  .nav-dropdown .dropdown-cta { background:var(--akzent); color:#fff; text-align:center; border-radius:999px; margin:10px 8px; padding:15px 18px; letter-spacing:.06em; }
  .nav-dropdown .dropdown-cta:hover { color:#fff; }
  .nav-dropdown .dropdown-strang { color:rgba(255,255,255,.55); }
  .strang-gate[hidden] { display:none; }
  .strang-gate:not([hidden]) { display:flex; position:fixed; inset:0; z-index:300; background:rgba(11,18,32,.97); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); flex-direction:column; align-items:center; justify-content:center; gap:26px; padding:32px; text-align:center; }
  .gate-logo { height:64px; width:auto; }
  .gate-titel { font-family:'Brandon',sans-serif; font-weight:300; font-size:32px; line-height:1.1; color:#fff; }
  .gate-knoepfe { display:flex; flex-direction:column; gap:14px; width:100%; max-width:300px; }
  .gate-knoepfe .knopf { width:100%; text-align:center; }
  .gate-hinweis { font-size:13px; font-weight:300; color:rgba(255,255,255,.55); max-width:32ch; }
}

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; }
.hero-bild { position:absolute; inset:0; }
.hero-bild img { width:100%; height:100%; object-fit:cover; object-position:var(--hero-position, center 30%); display:block; }
/* Hintergrund-Loop über dem Standbild (Bild bleibt Fallback und Poster);
   das Abdunklungs-Overlay (::after) liegt über beidem */
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--hero-position, center 30%); pointer-events:none; }
@media (prefers-reduced-motion: reduce) { .hero-video { display:none; } }
.hero-bild::after { content:''; position:absolute; inset:0; background:linear-gradient(var(--hero-dunkel-a), var(--hero-dunkel-b)), linear-gradient(135deg, var(--akzent-22) 0%, var(--hero-dunkel-rand) 62%); }
.hero-inhalt { position:relative; max-width:920px; margin:0 auto; padding:216px 32px 148px; text-align:center; }
.hero-inhalt .label { display:inline-flex; color:rgba(255,255,255,.62); font-size:11.5px; letter-spacing:.16em; }
.hero h1 { font-family:'Brandon',sans-serif; font-weight:300; font-size:clamp(52px,7.6vw,104px); line-height:.94; letter-spacing:-.036em; color:#fff; margin-top:28px; }
.hero h1 strong { font-weight:900; }
.hero p { font-size:19px; font-weight:300; line-height:1.62; color:rgba(255,255,255,.84); margin:26px auto 0; max-width:58ch; text-wrap:pretty; }
.hero-ctas { display:flex; flex-wrap:wrap; gap:14px; margin-top:40px; justify-content:center; }

/* Buttons (Radius 0, Farbtausch statt Effekte) */
.knopf { display:inline-block; background:var(--akzent); color:#fff; padding:18px 32px; font-size:16px; font-weight:700; border:0; cursor:pointer; }
.knopf:hover { background:#fff; color:var(--knopf-hover-text); }
.knopf--kontur { background:none; border:1px solid rgba(255,255,255,.42); color:#fff; }
.knopf--kontur:hover { border-color:#fff; background:rgba(255,255,255,.1); color:#fff; }
.knopf--dunkel-hover:hover { background:var(--dunkel); color:#fff; }

/* ---------- Zahlenband ---------- */
.zahlenband { background:var(--dunkel); color:#fff; }
.zahlenband-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.13); }
.zahl-zelle { background:var(--dunkel); padding:34px 30px; }
.zahl-zelle .zahl { font-family:'Brandon',sans-serif; font-weight:900; font-size:34px; color:var(--akzent-dunkelgrund); line-height:1; }
.zahl-zelle .zahl-text { font-size:13.5px; font-weight:300; color:rgba(255,255,255,.7); margin-top:8px; line-height:1.45; }

/* ---------- Filmsektion ---------- */
.film { background:#0B1220; }
.film-rahmen { position:relative; height:min(78vh,660px); overflow:hidden; }
.film-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.38; }
.film-verlauf { position:absolute; inset:0; background:linear-gradient(rgba(11,18,32,.4), rgba(11,18,32,.72)); }
.film-inhalt { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; text-align:center; padding:0 32px; }
.film-label { font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.film-titel { font-family:'Brandon',sans-serif; font-weight:300; font-size:clamp(32px,4.2vw,54px); line-height:1.04; letter-spacing:-.022em; color:#fff; max-width:26ch; text-wrap:pretty; }
.film-play { width:92px; height:92px; border-radius:50%; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); cursor:pointer; display:flex; align-items:center; justify-content:center; margin-top:6px; }
.film-play:hover { background:var(--akzent); border-color:var(--akzent); }
.film-play span { width:0; height:0; border-left:20px solid #fff; border-top:13px solid transparent; border-bottom:13px solid transparent; margin-left:5px; }
.film-hinweis { font-size:13px; font-weight:300; color:rgba(255,255,255,.55); }
.film-leer { display:inline-flex; align-items:center; gap:12px; margin-top:8px; padding:13px 22px; border:1px dashed rgba(255,255,255,.26); color:rgba(255,255,255,.5); font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.film-leer::before { content:''; width:20px; height:2px; background:rgba(255,255,255,.4); }
.film-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; display:block; }

/* ---------- Kartenraster ---------- */
.sektion { padding:110px 0; }
.sektion--flaeche { background:var(--flaeche); }
.sektion--eng { padding:96px 0; }

.raster { display:grid; gap:1px; background:var(--linie); margin-top:56px; }
.raster--3 { grid-template-columns:repeat(3,1fr); }
.raster--4 { grid-template-columns:repeat(4,1fr); }
.raster--rahmen { border:1px solid var(--linie); }
.raster--oben-buendig { margin-top:0; }
.kachel { background:#fff; padding:38px 34px 42px; }
.kachel-label { font-family:'Brandon',sans-serif; font-weight:900; font-size:15px; letter-spacing:.09em; text-transform:uppercase; color:var(--label-farbe); }
.kachel-titel { font-family:'Brandon',sans-serif; font-size:27px; font-weight:300; color:#0F172A; margin-top:15px; line-height:1.14; }
.kachel p { font-size:15px; font-weight:300; line-height:1.62; color:#64748B; margin-top:14px; text-wrap:pretty; }
/* kleinere Variante (USP-Streifen K-Logistik) */
.kachel--klein { padding:32px 28px; }
.kachel--klein .kachel-label { font-size:14px; }
.kachel--klein .kachel-titel { font-size:23px; margin-top:13px; line-height:1.16; }
.kachel--klein p { font-size:14.5px; line-height:1.6; margin-top:11px; }
/* Leistungskarten mit Ordnungszahl (K-Logistik) */
.kachel--nummer { padding:38px 32px 42px; }
.kachel-nummer { font-family:'Brandon',sans-serif; font-weight:900; font-size:34px; color:#D5E4E2; line-height:.9; }
.kachel--nummer .kachel-titel { font-size:26px; margin-top:18px; }
.kachel--nummer p { margin-top:12px; }

/* Fotoband */
.fotoband { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--linie); margin-top:1px; }
.fotoband img { width:100%; height:240px; object-fit:cover; display:block; }

/* Branchenband */
.branchen { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linie); margin-top:1px; }
.branche { background:var(--flaeche); padding:26px 24px; }
.branche .branche-titel { font-size:17px; font-weight:700; color:#0F172A; }
.branche p { font-size:14px; font-weight:300; color:#64748B; margin-top:8px; line-height:1.5; }

/* ---------- Ablauf (K-Workx) ---------- */
.ablauf-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:76px; align-items:start; }
.schritte { display:flex; flex-direction:column; gap:1px; background:#E2E8F0; margin-top:48px; }
.schritt { background:var(--flaeche); display:flex; gap:26px; padding:30px 0; }
.schritt-nummer { font-family:'Brandon',sans-serif; font-weight:900; font-size:40px; color:#CBD5E1; line-height:.9; flex:none; width:64px; }
.schritt-titel { font-family:'Brandon',sans-serif; font-size:24px; font-weight:300; color:#0F172A; }
.schritt p { font-size:15.5px; font-weight:300; line-height:1.6; color:#64748B; margin-top:10px; text-wrap:pretty; }
.ablauf-foto img { width:100%; height:300px; object-fit:cover; display:block; }
.akzent-karte { background:var(--akzent); color:#fff; padding:36px 34px 40px; }
.akzent-karte .karten-label { font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.68); }
.akzent-karte .karten-titel { font-family:'Brandon',sans-serif; font-weight:300; font-size:30px; line-height:1.12; margin-top:14px; }
.akzent-karte p { font-size:15px; font-weight:300; line-height:1.6; color:rgba(255,255,255,.88); margin-top:14px; text-wrap:pretty; }

/* ---------- Kundenmodul (dunkel) ---------- */
.modul { background:var(--dunkel); color:#fff; }
.modul-grid { display:grid; grid-template-columns:1fr 1fr; gap:76px; align-items:start; }
.modul h2 { font-family:'Brandon',sans-serif; font-weight:300; font-size:clamp(36px,4.2vw,54px); line-height:1.06; letter-spacing:-.02em; color:#fff; margin-top:22px; }
.modul-text { font-size:17.5px; font-weight:300; line-height:1.62; color:rgba(255,255,255,.8); margin-top:20px; max-width:52ch; text-wrap:pretty; }
.modul-hinweis { display:flex; align-items:flex-start; gap:13px; margin-top:30px; padding-top:26px; border-top:1px solid rgba(255,255,255,.14); }
.modul-hinweis::before { content:''; flex:none; margin-top:9px; width:22px; height:2px; background:var(--akzent); }
.modul-hinweis div { font-size:15px; font-weight:300; line-height:1.6; color:rgba(255,255,255,.72); }
.modul .knopf { margin-top:34px; padding:17px 32px; font-size:15.5px; }
.modul-kacheln { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14); }
.modul-kachel { background:var(--dunkel); padding:32px 28px; }
.modul-kachel .nummer { font-family:'Brandon',sans-serif; font-weight:900; font-size:26px; color:var(--akzent-dunkelgrund); }
.modul-kachel .titel { font-family:'Brandon',sans-serif; font-size:22px; font-weight:300; color:#fff; margin-top:13px; }
.modul-kachel p { font-size:14.5px; font-weight:300; color:rgba(255,255,255,.62); margin-top:9px; line-height:1.55; }

/* ---------- Über uns ---------- */
.ueber-uns-absatz { font-size:17px; font-weight:300; line-height:1.65; color:#64748B; margin-top:20px; max-width:68ch; text-wrap:pretty; }
/* Team-Karten: kompakte Rasterkacheln, Foto links neben dem Text (CD-Fotoregel:
   randlos, keine Rundungen) */
.team-raster { display:grid; gap:1px; background:var(--linie); border:1px solid var(--linie); margin-top:48px; }
.team-raster--1 { grid-template-columns:minmax(0, 560px); }
.team-raster--2 { grid-template-columns:1fr 1fr; }
.team-karte { background:#fff; display:flex; gap:22px; padding:26px 26px 28px; align-items:flex-start; }
.team-foto { width:132px; flex:none; aspect-ratio:4/5; object-fit:cover; object-position:center 18%; display:block; }
.team-text { min-width:0; }
.team-name { font-family:'Brandon',sans-serif; font-weight:300; font-size:23px; line-height:1.15; color:#0F172A; }
.team-rolle { font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--label-farbe); margin-top:6px; }
.team-karte p { font-size:14.5px; font-weight:300; line-height:1.6; color:#64748B; margin-top:12px; text-wrap:pretty; }

.meilensteine { margin-top:48px; border:1px solid var(--linie); }
.meilenstein { background:#fff; padding:32px 28px 36px; }
.meilenstein-jahr { font-family:'Brandon',sans-serif; font-weight:900; font-size:34px; line-height:.9; color:var(--nummer-blass); }
.meilenstein p { font-size:15px; font-weight:300; line-height:1.6; color:#64748B; margin-top:14px; text-wrap:pretty; }

/* App-Erklärclips im Handy-Format (App-UI darf Radius/Schatten tragen) */
/* K-Connect dreispaltig: Text | Kacheln | Handy-Clip */
.modul-grid--mit-video { grid-template-columns:minmax(0,.92fr) minmax(0,1.12fr) 372px; gap:44px; align-items:stretch; }
.modul-grid--mit-video .modul-kachel { padding:22px 20px; }
.modul-grid--mit-video .modul-kachel .nummer { font-size:22px; }
.modul-grid--mit-video .modul-kachel .titel { font-size:19px; margin-top:10px; }
.modul-grid--mit-video .modul-kachel p { font-size:13.5px; margin-top:7px; line-height:1.5; }
.modul-grid--mit-video .phone-video-spalte { align-self:center; justify-self:end; }
.modul-video { margin-top:72px; display:flex; flex-direction:column; align-items:center; }
.phone-video { width:100%; max-width:372px; display:block; border-radius:30px; border:1px solid rgba(255,255,255,.16); box-shadow:0 24px 70px rgba(0,0,0,.4); }
.modul-video-caption { font-size:13px; font-weight:300; color:rgba(255,255,255,.55); text-align:center; margin-top:14px; }
/* „So funktioniert's": Erklärtext + Handy-Clip nebeneinander */
.sofunk-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:76px; align-items:center; }
.sofunk-punkt { margin-top:22px; padding-top:0; border-top:0; }
.phone-video-spalte { display:flex; flex-direction:column; align-items:center; }
.sofunk-foto img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }

/* ---------- Positionen & Ab-Preis (K-Workx) ---------- */
.pos-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:stretch; }
.pos-kacheln { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--linie); border:1px solid var(--linie); margin-top:44px; }
.pos-kachel { background:#fff; padding:24px 24px 26px; }
.pos-titel { font-family:'Brandon',sans-serif; font-weight:300; font-size:22px; color:#0F172A; }
.pos-kachel p { font-size:13.5px; font-weight:300; line-height:1.55; color:#64748B; margin-top:7px; text-wrap:pretty; }
.pos-preis { margin-top:34px; padding-top:26px; border-top:1px solid var(--linie); display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.pos-preis .preis { font-family:'Brandon',sans-serif; font-weight:900; font-size:30px; color:var(--akzent); }
.pos-preis .preis-text { font-size:14.5px; font-weight:300; color:#64748B; }
.pos-foto { position:relative; min-height:520px; }
.pos-foto img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 25%; display:block; }

/* ---------- Warum Service (K-Logistik) ---------- */
.warum-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--linie-dunkler); margin-top:52px; }
.warum-karte { background:#fff; padding:46px 40px 52px; }
.warum-karte .karten-label { font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--akzent-hover); }
.warum-karte .karten-titel { font-family:'Brandon',sans-serif; font-weight:300; font-size:32px; color:#0F172A; margin-top:16px; line-height:1.14; }
.warum-karte p { font-size:16px; font-weight:300; line-height:1.65; color:#64748B; margin-top:18px; text-wrap:pretty; }

/* ---------- Event-Split (K-Logistik) ---------- */
.split { position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:640px; }
.split-text { background:var(--dunkel); color:#fff; display:flex; align-items:center; }
/* content-box: max-width meint hier die reine Inhaltsbreite — das linke Padding
   zentriert die Spalte auf das 1180er-Raster und darf nicht eingerechnet werden */
.split-text-innen { box-sizing:content-box; padding:96px 60px 96px max(32px, calc((100vw - 1180px) / 2 + 32px)); max-width:660px; }
.split-text h2 { font-family:'Brandon',sans-serif; font-weight:300; font-size:clamp(34px,3.8vw,48px); line-height:1.07; letter-spacing:-.02em; color:#fff; margin-top:22px; }
.split-text .split-absatz { font-size:16.5px; font-weight:300; line-height:1.65; color:rgba(255,255,255,.8); margin-top:20px; text-wrap:pretty; }
.split-kacheln { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.14); margin-top:40px; }
.split-kachel { background:var(--dunkel); padding:22px 20px; }
.split-kachel .titel { font-size:16.5px; font-weight:700; color:#fff; }
.split-kachel p { font-size:14px; font-weight:300; color:rgba(255,255,255,.6); margin-top:8px; }
.split-preis { margin-top:36px; padding-top:28px; border-top:1px solid rgba(255,255,255,.14); display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.split-preis .preis { font-family:'Brandon',sans-serif; font-weight:900; font-size:30px; color:var(--akzent-dunkelgrund); }
.split-preis .preis-text { font-size:14.5px; font-weight:300; color:rgba(255,255,255,.68); }
/* Fotospalte absolut: ihre Höhe folgt der Textspalte, die Bilder werden beschnitten
   (sonst treiben die intrinsischen Bildhöhen die Sektionshöhe hoch). Die Bilder sind
   bewusst selbst absolut in je einer Hälfte verankert — Prozent-Höhen durch den
   <picture>-Wrapper hindurch rendern nicht in jedem Browser gleich. */
.split-fotos { position:absolute; top:0; right:0; bottom:0; width:50%; overflow:hidden; }
.split-fotos img { position:absolute; left:0; width:100%; height:50%; object-fit:cover; display:block; }
.split-fotos picture:first-child img { top:0; }
.split-fotos picture:last-child img { top:50%; }

/* ---------- Referenzen ---------- */
.referenzen-kopf { display:flex; align-items:flex-end; justify-content:space-between; gap:36px; flex-wrap:wrap; }
.referenzen-hinweis { font-size:14px; font-weight:300; color:#94A3B8; max-width:38ch; text-align:right; }
.referenzen-grid { display:grid; grid-template-columns:repeat(var(--ref-spalten, 6),1fr); gap:1px; background:#E2E8F0; margin-top:44px; border:1px solid #E2E8F0; }
.referenz-zelle { background:#fff; height:118px; display:flex; align-items:center; justify-content:center; padding:22px; }
.referenz-zelle img { max-height:100%; max-width:100%; object-fit:contain; }
.referenz-zelle--fueller { display:none; }

/* ---------- Anfrage + Formulare ---------- */
.anfrage-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:70px; align-items:start; }
.anfrage-einleitung { font-size:17px; font-weight:300; line-height:1.6; color:#64748B; margin-top:18px; max-width:52ch; text-wrap:pretty; }
.formular { margin-top:44px; display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.formular label { display:block; }
.formular .feld-label { display:block; font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#94A3B8; margin-bottom:9px; }
.formular input, .formular select, .formular textarea { width:100%; padding:15px 14px; border:1px solid var(--input-rand); background:#fff; color:#0F172A; font-size:15.5px; border-radius:0; -webkit-appearance:none; appearance:none; }
.formular select { background-image:linear-gradient(45deg, transparent 50%, #64748B 50%), linear-gradient(135deg, #64748B 50%, transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size:6px 6px; background-repeat:no-repeat; }
.formular textarea { resize:vertical; }
.formular .voll { grid-column:span 2; }
.formular-fuss { grid-column:span 2; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.formular-fuss .knopf { padding:18px 34px; }
.formular-fuss .knopf:hover { background:var(--dunkel); color:#fff; }
.formular-hinweis { font-size:13.5px; font-weight:300; color:#94A3B8; max-width:36ch; }
.formular .knopf[disabled] { opacity:.55; cursor:default; }
/* Honeypot: für Menschen unsichtbar, für Bots ein normales Feld */
.formular .hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.erfolg { margin-top:44px; border:1px solid var(--akzent); padding:44px 38px; background:var(--erfolg-flaeche); }
.erfolg .erfolg-titel { font-family:'Brandon',sans-serif; font-weight:300; font-size:30px; color:#0F172A; }
.erfolg p { font-size:16px; font-weight:300; line-height:1.6; color:#475569; margin-top:14px; }
.erfolg p a { font-weight:700; }
.fehler { grid-column:span 2; border:1px solid #EF4444; padding:18px 20px; background:#FEF2F2; font-size:14.5px; font-weight:300; color:#7F1D1D; display:none; }
.fehler.sichtbar { display:block; }

.kontakt-karte { background:var(--flaeche); padding:40px 34px; }
.kontakt-karte .karten-label { font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#94A3B8; }
.kontakt-karte .name { font-family:'Brandon',sans-serif; font-weight:300; font-size:28px; color:#0F172A; margin-top:16px; line-height:1.16; }
.kontakt-karte .rolle { font-size:14.5px; font-weight:300; color:#64748B; margin-top:6px; }
.kontakt-karte hr { border:0; height:1px; background:var(--kk-linie); margin:26px 0; }
.kontakt-karte .telefon { display:block; font-size:19px; font-weight:700; color:var(--akzent-text, var(--akzent)); }
.kontakt-karte .mail { display:block; font-size:15px; font-weight:400; color:var(--akzent-text, var(--akzent)); margin-top:10px; word-break:break-all; }
.kontakt-karte .adresse { font-size:14.5px; font-weight:300; line-height:1.6; color:#64748B; }
.kontakt-karte .anfahrt { display:inline-block; margin-top:12px; font-size:13.5px; font-weight:600; }

/* ---------- FAQ ---------- */
.faq-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:start; }
.faq-einleitung { font-size:15.5px; font-weight:300; line-height:1.6; color:#64748B; margin-top:18px; text-wrap:pretty; }
.faq-liste { display:flex; flex-direction:column; gap:1px; background:var(--faq-linie); border-top:1px solid var(--faq-linie); border-bottom:1px solid var(--faq-linie); }
.faq-liste details { background:#fff; padding:26px 28px; }
.faq-liste summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:18px; font-weight:700; color:#0F172A; }
.faq-liste summary::-webkit-details-marker { display:none; }
.faq-plus { flex:none; position:relative; width:18px; height:18px; transition:transform .18s ease; }
.faq-plus::before, .faq-plus::after { content:''; position:absolute; background:var(--akzent); }
.faq-plus::before { left:0; top:8px; width:18px; height:2px; }
.faq-plus::after { left:8px; top:0; width:2px; height:18px; }
details[open] .faq-plus { transform:rotate(45deg); }
.faq-liste details p { font-size:15.5px; font-weight:300; line-height:1.65; color:#64748B; margin-top:16px; text-wrap:pretty; }

/* ---------- Jobs-Band (K-Workx) ---------- */
.jobs { position:relative; overflow:hidden; }
.jobs-bild { position:absolute; inset:0; }
.jobs-bild img { width:100%; height:100%; object-fit:cover; object-position:70% 30%; display:block; }
.jobs-bild::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(9,20,32,.94) 0%, rgba(9,20,32,.72) 58%, rgba(9,20,32,.4) 100%); }
.jobs-grid { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; padding:104px 32px; max-width:1180px; margin:0 auto; }
.jobs h2 { font-family:'Brandon',sans-serif; font-weight:300; font-size:clamp(34px,4vw,50px); line-height:1.06; letter-spacing:-.02em; color:#fff; margin-top:20px; }
.jobs-absatz { font-size:17.5px; font-weight:300; line-height:1.6; color:rgba(255,255,255,.85); margin-top:20px; text-wrap:pretty; }
.benefit-kacheln { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.16); margin-top:34px; }
.benefit { background:rgba(9,20,32,.55); padding:24px 22px; }
.benefit .titel { font-size:16.5px; font-weight:700; color:#fff; }
.benefit p { font-size:14px; font-weight:300; color:rgba(255,255,255,.66); margin-top:8px; line-height:1.5; }
.jobs-zwischenlabel { font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-top:38px; }
.anforderungen { display:flex; flex-direction:column; gap:14px; margin-top:18px; }
.anforderung { display:flex; gap:13px; align-items:flex-start; }
.anforderung::before { content:''; flex:none; margin-top:10px; width:20px; height:2px; background:var(--akzent); }
.anforderung div { font-size:15.5px; font-weight:300; color:rgba(255,255,255,.85); line-height:1.55; }
.bewerbung-karte { background:#fff; padding:40px 36px 44px; }
.bewerbung-karte .karten-titel { font-family:'Brandon',sans-serif; font-weight:300; font-size:28px; color:#0F172A; }
.bewerbung-karte .formular { margin-top:26px; gap:18px; }
.bewerbung-karte .feld-label { font-size:11.5px; margin-bottom:8px; }
.bewerbung-karte .formular input, .bewerbung-karte .formular select, .bewerbung-karte .formular textarea { padding:14px 13px; font-size:15px; }
.bewerbung-karte .knopf { grid-column:span 2; background:var(--dunkel); padding:17px 24px; font-size:15.5px; }
.bewerbung-karte .knopf:hover { background:var(--akzent); color:#fff; }
.bewerbung-karte .erfolg { margin-top:0; border:0; padding:0; background:none; }
.bewerbung-karte .erfolg .erfolg-titel { font-size:28px; }
.bewerbung-karte .erfolg p { font-size:15.5px; color:#64748B; }

/* ---------- Fußzeile ---------- */
.fusszeile { background:#fff; border-top:1px solid var(--fusszeile-linie); padding:56px 0 44px; }
.fusszeile-grid { display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap; align-items:flex-start; }
.fusszeile-logo img { height:54px; width:auto; display:block; }
.fusszeile-adresse { font-size:14px; font-weight:300; line-height:1.65; color:#64748B; margin-top:22px; }
.fusszeile-spalten { display:flex; gap:56px; flex-wrap:wrap; font-size:14.5px; }
.fusszeile-spalte { display:flex; flex-direction:column; gap:11px; }
.fusszeile-spalte .spalten-label { font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#94A3B8; margin-bottom:4px; }
.fusszeile-spalte a { color:#475569; }
.fusszeile-spalte a:hover { color:var(--akzent); }

/* ---------- Rechtsseiten (Impressum / Datenschutz) ---------- */
.rechtsseite { padding:196px 0 110px; }
.rechtsseite .container { max-width:820px; }
.rechtsseite h1 { font-family:'Brandon',sans-serif; font-weight:300; font-size:clamp(40px,5vw,64px); line-height:1.02; letter-spacing:-.03em; color:#0F172A; }
.rechtsseite h2 { font-family:'Brandon',sans-serif; font-weight:300; font-size:26px; color:#0F172A; margin-top:44px; }
.rechtsseite p, .rechtsseite li { font-size:15.5px; font-weight:300; line-height:1.7; color:#475569; }
.rechtsseite p { margin-top:14px; }
.rechtsseite ul { margin:14px 0 0; padding-left:20px; }
.rechtsseite .hinweisblock { margin-top:34px; border:1px solid var(--linie); background:var(--flaeche); padding:22px 24px; font-size:14px; }
/* Rechtsseiten haben einen hellen Anfang: Kapsel bleibt dank Eigenhintergrund lesbar */

/* ============================================================
   Responsive (nach Übergabe-Vorgaben)
   ============================================================ */
@media (min-width:1100px) {
  .referenzen-grid { grid-template-columns:repeat(var(--ref-spalten, 6),1fr); }
}
/* Telefon weicht als Erstes, wenn die Kapsel eng wird (Umschalter + EN brauchen Platz) */
@media (max-width:1520px) {
  .nav-telefon { display:none; }
}
@media (max-width:1320px) {
  .nav-links a { padding:10px 9px; font-size:12.5px; letter-spacing:.06em; }
}
@media (max-width:1100px) {
  .zahlenband-grid { grid-template-columns:1fr 1fr; }
  .ablauf-grid, .modul-grid, .anfrage-grid, .faq-grid, .jobs-grid, .warum-grid, .sofunk-grid, .pos-grid { grid-template-columns:1fr; gap:56px; }
  .pos-foto { min-height:380px; }
  .warum-grid { gap:1px; }
  .split { grid-template-columns:1fr; }
  .split-text-innen { padding:88px 32px; max-width:none; }
  .split-fotos { position:static; width:auto; display:grid; grid-template-columns:1fr 1fr; overflow:visible; min-height:0; }
  .split-fotos img { position:static; height:320px; }
  .raster--3, .raster--4 { grid-template-columns:repeat(2,1fr); }
  .referenzen-grid { grid-template-columns:repeat(4,1fr); }
  .referenz-zelle--fueller { display:flex; }
  .fotoband { grid-template-columns:repeat(3,1fr); }
  .branchen { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  html { scroll-padding-top:96px; }
  .nav-links, .nav-cta, .nav-kapsel .nav-strang, .nav-telefon { display:none; }
  .nav-sprache { padding:8px 10px; font-size:11.5px; }
  .nav-spy { display:flex; }
  .nav-kapsel { padding:10px 14px 10px 18px; }
  .nav-logo img { height:44px; }
  .hero-inhalt { padding:150px 24px 96px; }
  .hero h1 { font-size:clamp(38px,10vw,54px); }
  .hero p { font-size:17px; }
  .sektion { padding:84px 0; }
  .container { padding:0 24px; }
  .film-rahmen { height:min(60vh,420px); }
  .raster--3, .raster--4, .branchen, .fotoband, .benefit-kacheln, .modul-kacheln, .split-kacheln, .split-fotos { grid-template-columns:1fr; }
  .fotoband img { height:220px; }
  .split-fotos img { height:260px; }
  .formular, .bewerbung-karte .formular { grid-template-columns:1fr; }
  .formular .voll, .formular-fuss, .fehler, .bewerbung-karte .knopf { grid-column:span 1; }
  .referenzen-grid { grid-template-columns:repeat(2,1fr); }
  .referenzen-hinweis { text-align:left; }
  .team-raster--2, .team-raster--1 { grid-template-columns:1fr; }
  .team-foto { width:104px; }
  .zahl-zelle { padding:26px 22px; }
  .schritt { gap:18px; }
  .schritt-nummer { width:48px; font-size:32px; }
  .jobs-grid { padding:84px 24px; }
  .rechtsseite { padding:150px 0 84px; }
}