@font-face {
  font-family: "Inter";
  src: url("fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --blue: #0868B5;
  --trust: #004A8F;
  --cyan: #19A7E0;
  --ice: #DFF3FF;
  --charcoal: #20252B;
  --white: #FFFFFF;
  --muted: #66727F;
  --border: #D9E1E8;
  --surface: #F4F7FA;
  --success: #16804A;
  --error: #C93434;
  --sbb: #F07E10;
  --sbb-deep: #D9650A;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(16, 42, 74, .08);
  --container: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2.25rem, 4.4vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 800; color: var(--trust); }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0 0 1em; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.eyebrow {
  display: block; font-size: .8rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--charcoal); margin-bottom: .75rem;
}
.accent { color: var(--blue); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--white); padding: 8px 12px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .85em 1.5em; border-radius: 999px; border: 2px solid var(--blue);
  font: inherit; font-size: .95rem; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--blue); color: var(--white); box-shadow: 0 6px 18px rgba(8, 104, 181, .3); }
.btn-primary:hover { background: var(--trust); border-color: var(--trust); }
.btn-secondary { background: var(--white); color: var(--blue); }
.btn-secondary:hover { background: var(--ice); }
.btn-sbb { background: var(--sbb); border-color: var(--sbb); color: var(--white); }
.btn-sbb:hover { background: var(--sbb-deep); border-color: var(--sbb-deep); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--cyan); outline-offset: 3px;
}

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--border);
}
.site-header .nav { max-width: none; padding: 0 clamp(20px, 4vw, 72px); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 3vw, 56px); height: 84px; }
.logo { flex: none; }
.logo img { height: 60px; width: auto; }
.nav-links { display: flex; white-space: nowrap; gap: clamp(16px, 1.6vw, 32px); list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav-links a {
  color: var(--charcoal); text-decoration: none; font-size: .95rem; font-weight: 500;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--blue); }
.nav-links { position: relative; }
.nav-ink {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
}
.nav-ink.ready { transition: transform .6s cubic-bezier(.34, 1.25, .64, 1), width .6s cubic-bezier(.34, 1.25, .64, 1); }
@media (prefers-reduced-motion: reduce) { .nav-ink.ready { transition: none; } }
.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; white-space: nowrap; }
.nav-actions .btn { padding: .55em 1.1em; font-size: .85rem; gap: .45em; }
.nav-actions .btn svg { width: 15px; height: 15px; }
.lang-switch {
  position: relative; display: flex; gap: 0; padding: 3px; border-radius: 999px;
  background: linear-gradient(180deg, #E9EEF3, var(--surface)); border: 1px solid var(--border);
  box-shadow: inset 0 2px 4px rgba(16, 42, 74, .1);
}
.lang-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 999px; pointer-events: none;
  background: linear-gradient(140deg, var(--cyan), var(--blue) 55%, var(--trust));
  box-shadow: 0 4px 12px rgba(8, 104, 181, .4), inset 0 1px 0 rgba(255,255,255,.4);
}
.lang-ready .lang-thumb { transition: transform .85s cubic-bezier(.34, 1.3, .64, 1), width .85s cubic-bezier(.34, 1.3, .64, 1); }
.lang-switch button {
  position: relative; z-index: 1; font: inherit; font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  padding: 4px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px;
  transition: color .6s ease;
}
.lang-switch button:hover { color: var(--blue); }
.lang-switch button[aria-pressed="true"] { color: var(--white); }
.lang-switch button:active .flag { transform: scale(.85); }
.flag { width: 15px; height: 10px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); flex: none; transition: transform .2s; }
.lang-switch button[aria-pressed="true"] .flag { box-shadow: 0 0 0 1.5px rgba(255,255,255,.9); }
main, .site-footer, .nav-links, .nav-actions .btn { transition: opacity .45s ease, filter .45s ease; }
.lang-fading main, .lang-fading .site-footer, .lang-fading .nav-links, .lang-fading .nav-actions .btn { opacity: 0; filter: blur(3px); }
.nav-close-row, .nav-promo { display: none; }
/* Abdunklung hinter dem Schubfach; auf dem Desktop nie sichtbar. */
.nav-backdrop {
  position: fixed; inset: 0; z-index: 55; background: rgba(8, 20, 36, .5);
  opacity: 0; pointer-events: none; transition: opacity .32s ease;
}
body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
body.nav-open { overflow: hidden; }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--charcoal); }
.nav-toggle svg { width: 28px; height: 28px; }

/* Hero: full-width; text hugs the left, service car photo fills the right */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, #fff 100%), linear-gradient(160deg, #fff 30%, var(--ice) 100%); }
.hero-inner { position: relative; height: clamp(560px, 46vw, 800px); padding: 0 clamp(20px, 4vw, 72px) 56px; display: flex; align-items: center; }
.hero-copy { position: relative; z-index: 1; width: min(34vw, 600px); padding: 48px 0; }
.hero-copy .eyebrow { margin-bottom: 1.25rem; }
.hero-copy h1 { margin-bottom: .6em; }
.hero-copy h1 { font-size: clamp(2.25rem, 3.7vw, 4rem); }
.hero-copy p { font-size: clamp(1.05rem, 1.3vw, 1.25rem); max-width: 30ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2.5rem; }
.hero-actions .btn { padding: .8em 1.2em; }
.hero-media { position: absolute; top: 0; right: 0; bottom: 0; left: 28%; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 100% 60%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .25) 14%, rgba(0, 0, 0, .7) 26%, #000 38%), linear-gradient(180deg, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .25) 14%, rgba(0, 0, 0, .7) 26%, #000 38%), linear-gradient(180deg, #000 82%, transparent 100%);
  mask-composite: intersect;
}


/* Trust bar: floating premium feature card overlapping the hero */
.trust { position: relative; z-index: 2; margin-top: -56px; padding-bottom: 24px; }
.trust-card {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
  width: min(100% - 48px, var(--container) - 48px); margin: 0 auto; padding: 0;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 22px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(16, 42, 74, .14), 0 2px 6px rgba(16, 42, 74, .05);
}
.trust li {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding: 28px 22px; transition: background .25s;
}
.trust li + li::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: linear-gradient(transparent, var(--border), transparent); }
.trust li::after {
  content: ""; position: absolute; left: 26px; right: 26px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--blue), var(--cyan)); transform: scaleX(0); transform-origin: left; transition: transform .35s;
}
.trust li:hover { background: linear-gradient(180deg, #fff, var(--ice)); }
.trust li:hover::after { transform: scaleX(1); }
.trust-icon {
  flex: none; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: var(--white);
  background: linear-gradient(140deg, var(--cyan), var(--blue) 55%, var(--trust));
  box-shadow: 0 10px 22px rgba(8, 104, 181, .3), inset 0 1px 0 rgba(255,255,255,.35);
}
.trust-icon svg { width: 28px; height: 28px; }
.trust strong { display: block; font-size: 1rem; color: var(--charcoal); line-height: 1.3; margin-bottom: 2px; }
.trust li span:not(.trust-icon) { font-size: .86rem; color: var(--muted); line-height: 1.4; }

/* Sections */
section { scroll-margin-top: 90px; }
.section { padding: 88px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.section-head h2 { margin: 0; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem;
  text-decoration: none; border-bottom: 2px solid var(--blue); padding-bottom: 4px; white-space: nowrap;
}
.link-arrow svg { width: 16px; height: 16px; }

/* Service cards */
/* Services slider */
.slider-nav { display: flex; gap: 10px; }
.slider-btn {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--blue); background: var(--white);
  color: var(--blue); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s;
}
.slider-btn:hover { background: var(--blue); color: var(--white); }
.slider-btn svg { width: 20px; height: 20px; }
.services {
  --per-view: 3; --gap: 28px;
  display: grid; grid-auto-flow: column; gap: var(--gap);
  grid-auto-columns: calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  width: min(100% - 48px, var(--container) - 48px); margin: 0 auto; padding: 8px 0 28px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.services::-webkit-scrollbar { display: none; }
.services .card { scroll-snap-align: start; }
.services .card-img { aspect-ratio: 5 / 4; }
.services .card-body { padding: 26px 26px 24px; }
.services .card h3 { font-size: 1.35rem; }
.services .checks { font-size: .98rem; }
.slider-dots { display: flex; justify-content: center; gap: 8px; }
.slider-dots button {
  position: relative; width: 10px; height: 10px; border-radius: 999px; border: 0; padding: 0;
  background: var(--border); cursor: pointer; transition: width .25s, background .25s;
}
/* Der Punkt bleibt klein, die Trefferfläche wird fingergerecht. */
.slider-dots button::after { content: ""; position: absolute; inset: -12px -9px; }
.slider-dots button.active { width: 28px; background: var(--blue); }
.card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: transform .25s, box-shadow .25s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(16, 42, 74, .14); }
.card-img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.card-body { padding: 20px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.card-icon { width: 32px; height: 32px; color: var(--blue); margin-bottom: 14px; }
.card h3 { font-size: 1.1rem; color: var(--charcoal); }
.checks { list-style: none; margin: 0 0 16px; padding: 0; font-size: .88rem; color: var(--muted); }
.checks li { position: relative; padding-left: 22px; margin-bottom: 4px; line-height: 1.4; }
.checks li::before {
  content: ""; position: absolute; left: 2px; top: 4px; width: 11px; height: 6px;
  border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg);
}
.card-more {
  margin-top: auto; align-self: flex-end; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ice); color: var(--blue); display: grid; place-items: center;
}
.card-more svg { width: 16px; height: 16px; }

/* Audience (Gewerbe / Privat) */
.audience { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.aud-card {
  position: relative; border-radius: 20px; overflow: hidden; min-height: 380px;
  display: flex; align-items: flex-end; color: var(--white);
}
.aud-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aud-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,25,45,.15) 0%, rgba(10,25,45,.7) 40%, rgba(10,25,45,.92) 100%); }
.aud-body { position: relative; z-index: 1; padding: 32px; }
.aud-body h3 { font-size: 1.6rem; color: var(--white); }
.aud-body p { color: rgba(255,255,255,.9); max-width: 44ch; }
.aud-body .checks { color: rgba(255,255,255,.92); font-size: .95rem; }
.aud-body .checks li::before { border-color: var(--cyan); }

/* About: premium layout on light grey */
.about-section { position: relative; overflow: hidden; background: var(--surface); padding: 112px 0; }
.about-section::before {
  content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(25, 167, 224, .14), transparent 70%); pointer-events: none;
}
.about { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about-media { position: relative; padding: 0 40px 64px 0; }
.about-frame { position: absolute; top: 28px; left: 28px; right: 12px; bottom: 36px; border: 2px solid var(--cyan); border-radius: 26px; opacity: .55; }
.about-main { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; box-shadow: 0 30px 70px rgba(16, 42, 74, .22); }
.about-badge {
  position: absolute; left: -20px; bottom: 96px; display: flex; gap: 12px; align-items: center;
  background: rgba(255,255,255,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.9); border-radius: 16px; padding: 14px 18px; box-shadow: 0 16px 40px rgba(16, 42, 74, .16);
}
.about-badge svg { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--blue); color: var(--white); flex: none; }
.about-badge strong { display: block; color: var(--trust); font-size: 1rem; line-height: 1.2; }
.about-badge span { font-size: .85rem; color: var(--muted); }
.about-copy .eyebrow { color: var(--trust); display: inline-flex; align-items: center; gap: 12px; }
.about-copy .eyebrow::before { content: ""; width: 32px; height: 2px; background: linear-gradient(90deg, var(--blue), transparent); }
.about-copy h2 { font-size: clamp(2rem, 3.6vw, 3rem); color: var(--charcoal); }
.about-lead { font-size: 1.2rem; color: var(--charcoal); font-weight: 500; }
.about-copy > p { color: #3D4752; }
.about-company {
  display: flex; align-items: center; gap: 14px; margin: 24px 0; padding: 16px 20px; max-width: 440px;
  background: var(--white); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 8px 24px rgba(16, 42, 74, .06);
}
.about-company small { display: block; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.about-company strong { display: block; color: var(--trust); font-size: 1.05rem; }
.about-company span:not(.c-icon) { font-size: .9rem; color: #3D4752; }
.footer-address { font-style: normal; line-height: 1.6; margin-top: 12px; }
.about-sub { margin: 28px 0 8px; font-size: 1.05rem; color: var(--trust); }
.about-quote { margin: 28px 0; padding: 0; }
.about-quote p { font-size: 1.2rem; font-style: italic; color: var(--trust); margin: 0 0 6px; }
.about-quote cite { font-style: normal; font-size: .88rem; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 32px; }
.stat {
  background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 18px 16px;
  box-shadow: 0 8px 24px rgba(16, 42, 74, .06); transition: transform .25s, box-shadow .25s;
}
.stat:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(16, 42, 74, .12); }
.stat svg { width: 26px; height: 26px; color: var(--blue); margin-bottom: 10px; }
.stat strong { display: block; font-size: 1.05rem; color: var(--trust); }
.stat span { font-size: .84rem; color: var(--muted); }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; grid-auto-flow: dense; gap: 14px; }
.gallery figure { margin: 0; position: relative; border-radius: 12px; overflow: hidden; }
.gallery figure img {
  position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover;
  transform: translate3d(0, var(--py, 0px), 0) scale(var(--s, 1)); transition: scale .4s; will-change: transform;
}
.gallery figure { cursor: pointer; }
.gallery figure:hover img { --s: 1.04; }
/* Parallax reveal: the gallery rises over the About section and its tiles drift in */
#galerie {
  position: relative; z-index: 1; background: var(--white); border-radius: 40px 40px 0 0;
  box-shadow: 0 -30px 60px -30px rgba(16, 42, 74, .25), 0 calc(-40px - var(--lift, 0px)) 0 0 var(--surface); transform: translate3d(0, var(--lift, 0px), 0); will-change: transform;
}
.js-parallax .gallery figure { opacity: 0; translate: 0 60px; transition: opacity .9s ease, translate 1s cubic-bezier(.2, .8, .2, 1); }
.js-parallax .gallery figure.in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { #galerie { transform: none; } .gallery figure img { transform: none; } }
.g-wide { grid-column: span 2; }
.g-tall { grid-row: span 2; }

/* Partner band */
/* Schiebt sich über das Zitatband: eigene Ebene, deckende Fläche - ohne sie
   würde das Band unter dem Kasten durchscheinen. */
.partner { position: relative; z-index: 1; background: var(--white); padding: 72px 0; }
.partner .container { max-width: 1488px; }
.partner-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(420px, .9fr); align-items: stretch;
  border-radius: 28px; overflow: hidden; border: 1px solid var(--border);
  background: radial-gradient(120% 140% at 0% 0%, #fff 30%, var(--ice) 100%);
  box-shadow: 0 34px 70px -34px rgba(0, 74, 143, .4);
}
.partner-brands { display: flex; align-items: center; gap: 16px; padding: 44px 0 44px 44px; }
.partner-logo {
  width: 150px; height: 150px; display: grid; place-items: center; border-radius: 24px; background: #fff;
  box-shadow: 0 12px 26px -14px rgba(16, 42, 74, .35), inset 0 0 0 1px rgba(16, 42, 74, .06);
  transition: transform .5s cubic-bezier(.34, 1.4, .64, 1), box-shadow .5s ease;
}
.partner-logo img { max-width: 80%; max-height: 66%; width: auto; height: auto; }
.partner-logo:hover { transform: translateY(-10px) scale(1.04); box-shadow: 0 30px 46px -18px rgba(8, 104, 181, .5), inset 0 0 0 1px rgba(8, 104, 181, .18); }
.partner-logo-sbb:hover { box-shadow: 0 30px 46px -18px rgba(240, 126, 16, .55), inset 0 0 0 1px rgba(240, 126, 16, .25); }
.partner-plus { font-size: 1.8rem; font-weight: 300; color: var(--muted); }
.partner-copy { align-self: center; padding: 44px 36px; }
.partner-copy .eyebrow { color: var(--blue); }
.partner h2 { margin: .3em 0 .25em; font-size: clamp(1.7rem, 2.4vw, 2.2rem); color: var(--trust); }
.partner p { margin: 0; color: var(--muted); }
.partner-cta {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px;
  padding: 44px 48px 44px 72px; color: #fff; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(135deg, rgba(240, 126, 16, .82), rgba(196, 88, 6, .88)), url("img/partner-solar.jpg") center / cover;
}
.partner-cta h3 { margin: 0; color: #fff; font-size: 1.45rem; line-height: 1.25; }
.partner-cta .btn-sbb { padding: .65em 1.25em; font-size: .88rem; background: #fff; border-color: #fff; color: var(--sbb-deep); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .35); }
.partner-cta .btn-sbb:hover { background: #FFF3E6; border-color: #FFF3E6; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .partner-logo { transition: none; } .partner-logo:hover { transform: none; } }

/* Contact: premium split card */
.contact-section {
  position: relative; overflow: hidden; padding: 120px 0;
  background: radial-gradient(700px 400px at 100% 0%, rgba(25, 167, 224, .14), transparent 65%), radial-gradient(600px 400px at 0% 100%, rgba(8, 104, 181, .1), transparent 65%), linear-gradient(180deg, var(--white), var(--surface));
}
.contact {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0;
  border-radius: 30px; overflow: hidden; background: var(--white);
  box-shadow: 0 40px 100px rgba(16, 42, 74, .16), 0 2px 8px rgba(16, 42, 74, .05);
  padding: 0; width: min(100% - 48px, 1440px); max-width: none;
}
.contact-info {
  position: relative; isolation: isolate; color: var(--white); padding: 64px 56px; min-height: 720px;
  background: radial-gradient(500px 300px at 100% 0%, rgba(25, 167, 224, .35), transparent 60%), linear-gradient(160deg, #0B1B2E 0%, #0A2A4D 60%, var(--trust) 100%);
}
/* Das Foto hängte vorher an der Höhe der Spalte, und die richtet sich nach
   dem Formular daneben: 1600x893 (Verhältnis 1,79) in einem Kasten mit
   Verhältnis 0,37 - sichtbar blieb ein Fünftel der Bildbreite, und jede
   Änderung am Formular (Leistungsliste auf, Fehlermeldung, Turnstile)
   verschob den Ausschnitt. Jetzt steht es unten in seinem eigenen
   Seitenverhältnis und blendet nach oben ins Navy aus. */
.contact-bg {
  position: absolute; left: 0; right: 0; bottom: 0; top: auto;
  width: 100%; height: auto; aspect-ratio: 1600 / 893;
  object-fit: cover; object-position: 50% 50%; z-index: -2;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
}
.contact-info::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 20, 36, .92) 0%, rgba(8, 24, 44, .78) 45%, rgba(8, 24, 44, .35) 100%), linear-gradient(0deg, rgba(8, 20, 36, .62), rgba(8, 20, 36, .22) 32%, transparent 52%); }
.contact-info .eyebrow { color: var(--cyan); display: inline-flex; align-items: center; gap: 12px; }
.contact-info .eyebrow::before { content: ""; width: 32px; height: 2px; background: linear-gradient(90deg, var(--cyan), transparent); }
.contact-info h2 { color: var(--white); font-size: clamp(2rem, 3.4vw, 2.75rem); }
.contact-info p { color: rgba(255,255,255,.8); }
.contact-promise { list-style: none; padding: 0; margin: 22px 0 30px; display: flex; flex-wrap: wrap; gap: 8px; }
.contact-promise li {
  font-size: .82rem; font-weight: 600; padding: 6px 14px 6px 30px; border-radius: 999px; position: relative;
  background: rgba(25, 167, 224, .16); border: 1px solid rgba(25, 167, 224, .4); color: #CDEFFC;
}
.contact-promise li::before {
  content: ""; position: absolute; left: 13px; top: 50%; width: 9px; height: 5px; margin-top: -4px;
  border-left: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(-45deg);
}
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; max-width: 460px; }
.contact-list li {
  display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .25s, border-color .25s;
}
.contact-list li:hover { background: rgba(255,255,255,.12); border-color: rgba(25, 167, 224, .5); }
.c-icon {
  flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--white);
  background: linear-gradient(140deg, var(--cyan), var(--blue)); box-shadow: 0 8px 18px rgba(8, 104, 181, .4);
}
.c-icon svg { width: 22px; height: 22px; }
.contact-list small { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 2px; }
.contact-list a { display: inline-block; padding: 3px 0; color: var(--white); }
.contact-info .placeholder { color: #FFD9AE; }
.contact-form { padding: 64px 60px; align-content: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 22px; }
.contact-form-head h3 { font-size: 1.6rem; margin-bottom: .2em; }
.contact-form-head p { color: var(--muted); font-size: .9rem; margin: 0; }
.contact-form input:not([type=checkbox]), .contact-form select, .contact-form textarea { width: 100%; background-color: var(--surface); border-color: transparent; padding: 16px 18px; border-radius: 12px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { background-color: var(--white); border-color: var(--blue); }
.contact-form .btn-primary { background: linear-gradient(135deg, var(--blue), var(--trust)); border-color: transparent; padding: 1em 2em; }
.contact-form .btn-primary:hover { filter: brightness(1.08); }
.placeholder { background: rgba(240, 126, 16, .18); border: 1px dashed var(--sbb); border-radius: 4px; padding: 0 4px; }

form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-full { grid-column: 1 / -1; }
label { font-size: .9rem; font-weight: 600; }
input, select, textarea {
  font: inherit; font-size: .98rem; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--white); color: var(--charcoal);
}
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(8, 104, 181, .2); outline: none; }
textarea { min-height: 130px; resize: vertical; }
select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230868B5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px;
}
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--muted); font-weight: 400; }
.consent input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
/* Kundentyp: zwei Möglichkeiten, deshalb ein Schalter und kein Aufklappmenü -
   beide Optionen sind sofort sichtbar und mit einem Fingertipp erreichbar. */
.firma-feld { animation: firma-ein .22s ease; }
@keyframes firma-ein { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .firma-feld { animation: none; } }

.seg-field { border: 0; padding: 0; margin: 0; grid-column: 1 / -1; }
.seg-field legend { font-size: .9rem; font-weight: 600; padding: 0; margin-bottom: 8px; }
.segmented {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  background: var(--surface); border-radius: 12px; max-width: 360px;
}
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmented span {
  display: block; text-align: center; padding: 11px 14px; border-radius: 9px;
  font-size: .95rem; font-weight: 600; color: var(--muted); transition: background .2s, color .2s, box-shadow .2s;
}
.segmented label:has(input:checked) span {
  background: var(--white); color: var(--trust); box-shadow: 0 1px 2px rgba(16, 42, 74, .1), 0 4px 12px rgba(16, 42, 74, .08);
}
.segmented label:has(input:focus-visible) span { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* Leistungen: untereinander statt als Chips - die Bezeichnungen sind lang,
   und Mehrfachauswahl liest sich als Liste schlicht schneller. */
.check-field { border: 0; padding: 0; margin: 0; grid-column: 1 / -1; }
.check-field legend { font-size: .9rem; font-weight: 600; padding: 0; }
.field-hint { font-size: .8rem; color: var(--muted); margin: 2px 0 10px; }
.check-list { display: grid; gap: 8px; }
.check-list label {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 12px; background: var(--white);
  font-weight: 500; font-size: .95rem; transition: border-color .2s, background .2s;
}
.check-list label:hover { border-color: var(--blue); }
.check-list input { width: 20px; height: 20px; flex: none; accent-color: var(--blue); margin: 0; }
.check-list label:has(input:checked) { border-color: var(--blue); background: var(--ice); }
.check-list label:has(input:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 2px; }

.address-head { margin-top: 6px; }
.address-head h4 { margin: 0; font-size: 1.05rem; color: var(--charcoal); }
.photo-note { grid-column: 1 / -1; margin: -8px 0 0; font-size: .85rem; color: var(--muted); line-height: 1.6; }
.photo-note a { color: var(--blue); font-weight: 600; }

/* WhatsApp: der schnellste Weg für Fotos, deshalb steht er neben dem Formular
   und nicht darin. Grün bleibt aus der Palette heraus - es ist ein Fremdlogo. */
.whatsapp-hint {
  cursor: pointer; display: flex; align-items: flex-start; gap: 14px; margin: 22px 0 30px; padding: 16px 18px;
  border-radius: 16px; text-decoration: none; color: var(--white);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  transition: background .25s, border-color .25s, transform .25s;
}
.whatsapp-hint:hover { background: rgba(255,255,255,.12); border-color: rgba(37, 211, 102, .5); transform: translateY(-2px); }
.whatsapp-hint .wa-icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #25D366; color: #fff; }
.whatsapp-hint .wa-icon svg { width: 24px; height: 24px; }
.whatsapp-hint strong { display: block; font-size: 1rem; margin-bottom: 3px; }
.whatsapp-hint small { display: block; font-size: .84rem; line-height: 1.55; color: rgba(255,255,255,.72); }

/* Überschrift, die nicht umbrechen soll, solange Platz da ist. */
.nowrap-title { text-wrap: balance; }

.form-note { font-size: .82rem; color: var(--muted); grid-column: 1 / -1; margin: 0; }
.form-status { grid-column: 1 / -1; padding: 12px 14px; border-radius: 10px; font-size: .92rem; display: none; }
.form-status.ok { display: block; background: #E8F5EE; color: var(--success); }
.form-status.err { display: block; background: #FBEAEA; color: var(--error); }

/* ---------------------------------------------------- Datei-Upload */
/* Eine Fläche zum Antippen, darunter die Liste des Hochgeladenen. Bewusst
   schlicht: das Formular ist schon lang, der Upload darf nicht dominieren. */
.uploader { display: grid; gap: 10px; }
.uploader h4 { margin: 0; font-size: 1.05rem; color: var(--charcoal); }
.uploader .field-hint { margin: 0; }
.up-zone {
  display: grid; justify-items: center; gap: 4px; padding: 26px 18px; cursor: pointer;
  border: 1.5px dashed var(--border); border-radius: 14px; background: var(--surface);
  text-align: center; font-weight: 400; transition: border-color .2s, background .2s;
}
.up-zone:hover, .up-zone.is-over { border-color: var(--blue); background: var(--ice); }
.up-zone:focus-within { outline: 3px solid var(--cyan); outline-offset: 2px; }
.up-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.up-icon { width: 26px; height: 26px; color: var(--blue); }
.up-zone strong { font-size: .98rem; color: var(--trust); }
.up-zone span { font-size: .84rem; color: var(--muted); }

.up-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.up-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--white); font-size: .92rem;
}
.up-item .up-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-item .up-size { color: var(--muted); font-size: .82rem; flex: none; }
.up-item.is-busy { opacity: .75; }
.up-item.is-error { border-color: var(--error); background: #FDF2F2; color: var(--error); }
.up-thumb { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; flex: none; background: var(--surface); }
.up-bar { flex: none; width: 56px; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.up-bar i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .2s; }
.up-remove {
  flex: none; width: 32px; height: 32px; border-radius: 8px; border: 0; cursor: pointer;
  background: transparent; color: var(--muted); font-size: 20px; line-height: 1;
}
.up-remove:hover { background: var(--surface); color: var(--error); }
.up-status { margin: 0; font-size: .85rem; color: var(--muted); min-height: 1.2em; }
.up-status.err { color: var(--error); }


/* Kundentyp: zwei Karten statt eines Schalters. Die beiden Fälle sind der
   erste inhaltliche Unterschied im Formular - das darf man sehen. */
.type-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.type-card {
  position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 14px 16px; border: 1.5px solid var(--border); border-radius: 16px; background: var(--white);
  font-weight: 400; transition: border-color .2s, box-shadow .25s, background .2s;
}
.type-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.type-icon {
  flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface); color: var(--muted); transition: background .25s, color .25s;
}
.type-icon svg { width: 22px; height: 22px; }
.type-text { display: grid; gap: 1px; min-width: 0; }
.type-text strong { font-size: 1rem; color: var(--charcoal); }
.type-text small { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.type-tick {
  position: absolute; top: 10px; right: 12px; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--border); transition: border-color .2s, background .2s;
}
.type-card:hover { border-color: var(--blue); }
.type-card:has(input:checked) {
  border-color: var(--blue); background: linear-gradient(180deg, var(--white), var(--ice));
  box-shadow: 0 10px 26px -14px rgba(8, 104, 181, .55);
}
.type-card:has(input:checked) .type-icon {
  background: linear-gradient(140deg, var(--cyan), var(--blue) 60%, var(--trust)); color: var(--white);
}
.type-card:has(input:checked) .type-tick {
  border-color: var(--blue); background: var(--blue) no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 11px;
}
.type-card:has(input:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* Das Anfrageformular in drei Abschnitten. Es bleibt ein Formular; die
   Abschnitte steuern nur, was gerade sichtbar ist. Immer nur einer offen,
   sonst ist es wieder eine lange Liste mit Zwischenüberschriften. */
/* Drei Abschnitte, und man soll sehen, in welchem man steht. Der aktive
   bekommt dafür keine Dekoration, die inaktiven nehmen sich zurück: sie
   liegen flach auf der Fläche, der offene steht als weiße Karte darüber.
   Ein Signal, nicht vier. */
.form-section {
  grid-column: 1 / -1; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); overflow: hidden;
  transition: background-color .22s ease, box-shadow .22s ease;
}
.form-section + .form-section { margin-top: -6px; }
.form-section summary {
  display: flex; align-items: center; gap: 12px; padding: 15px 16px; cursor: pointer;
  list-style: none; font-size: .98rem; font-weight: 600; color: var(--muted);
}
.form-section summary::-webkit-details-marker { display: none; }
.form-section summary::marker { content: ""; }
.form-section summary:hover { color: var(--charcoal); }
.form-section summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; }

/* Offen: weißes Papier, leicht angehoben. Mehr braucht es nicht. */
.form-section[open] {
  background: var(--white);
  box-shadow: 0 14px 34px -24px rgba(16, 42, 74, .75);
}
.form-section[open] summary { color: var(--charcoal); }

/* Die Ziffer ist eine Kontur; gefüllt ist nur die, an der gearbeitet wird. */
.sec-no {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--border); color: var(--muted); font-size: .8rem; font-weight: 600;
  transition: background-color .22s, color .22s, border-color .22s;
}
#contact-form .form-section[open] .sec-no {
  background-color: var(--trust); border-color: var(--trust); color: var(--white);
}
.sec-title { flex: 1; min-width: 0; }

/* Erledigt: ein Haken, kein zweites Abzeichen. */
.sec-state { flex: none; width: 16px; height: 16px; }
.form-section.is-done .sec-state {
  background: no-repeat center / 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366727F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.sec-chevron { width: 18px; height: 18px; flex: none; color: var(--muted); transition: transform .25s; }
.form-section[open] .sec-chevron { transform: rotate(180deg); }

.sec-body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px 18px; padding: 20px 16px 22px;
}
@media (max-width: 760px) {
  .sec-body { grid-template-columns: minmax(0, 1fr); }
}

/* WhatsApp: sichtbarer Aufruf statt eines bloßen Pfeils. */
.wa-cta {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 7px 14px;
  border-radius: 999px; background: #25D366; color: #06301A; font-size: .86rem; font-weight: 700;
}
.wa-cta svg { width: 14px; height: 14px; }
.whatsapp-hint:hover .wa-cta { background: #1FBF5B; }

/* Das Teamfoto beantwortet die Frage, die jeder Bewerber zuerst hat:
   mit wem arbeite ich und womit. */
.karriere-media { position: relative; margin: 0 0 28px; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
.karriere-media img { display: block; width: 100%; height: auto; }
.karriere-media figcaption {
  position: absolute; left: 16px; bottom: 16px; display: grid; gap: 1px;
  padding: 10px 16px; border-radius: 12px; color: var(--white);
  background: rgba(10, 30, 54, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.karriere-media strong { font-size: .95rem; }
.karriere-media span { font-size: .78rem; color: rgba(255,255,255,.75); }
.field-note { font-size: .78rem; color: var(--muted); font-weight: 400; }

/* ---------------------------------------------------- Karriere */
/* Zitatband als Abschluss des Karriereteils. Ein einziger Satz über die
   ganze Breite - er lebt von der Fläche, nicht von Dekoration. */
.zitat-band {
  /* Bleibt am oberen Rand stehen, während der Partnerkasten darüber
     hinwegzieht. Reines CSS - sticky statt Scroll-Rechnerei. Damit das Band
     dahinter verschwindet und nicht durchscheint, braucht der Partnerkasten
     eine eigene Fläche und eine höhere Ebene (siehe dort).

     Die Höhe ist kein Zufall: gepinnt wird nur so lange, bis die Unterkante
     des Bands die Unterkante von <main> erreicht. Der Weg dafür entspricht
     der Höhe des Partnerkastens (384px). Bleibt das Band darunter, ist es am
     Ende vollständig verdeckt statt halb angeschnitten. */
  position: sticky; top: 0; z-index: 0;
  background: var(--trust);
  background-image:
    radial-gradient(70rem 32rem at 50% -40%, rgba(25, 167, 224, .26), transparent 64%),
    linear-gradient(158deg, #0A2C52 0%, var(--trust) 55%, #06243F 100%);
  padding: clamp(96px, 9vw, 116px) 0 clamp(110px, 11vw, 132px);
}
.zitat-band blockquote { margin: 0 auto; padding: 0; width: min(100% - 48px, 860px); text-align: center; }
.zitat-band p {
  margin: 0 0 18px; color: var(--white); font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 2.1rem); line-height: 1.38; text-wrap: balance;
}
.zitat-band cite {
  font-style: normal; display: block; max-width: 620px; margin: 0 auto;
  font-size: .95rem; line-height: 1.7; color: rgba(223, 243, 255, .72);
}

.karriere-section { background: linear-gradient(180deg, var(--white), var(--surface)); }
/* Gleiche Breite wie die Kontaktkarte darunter: beide brechen bewusst aus
   den 1200px der übrigen Abschnitte aus, sonst wirkt der Bereich eingeengt. */
.karriere {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: start;
  width: min(100% - 48px, 1440px); max-width: none; padding: 0;
}
.karriere-lead { font-size: 1.15rem; color: var(--charcoal); margin: .6em 0 1em; max-width: 54ch; }

/* Das Eintrittsdatum ist die erste Frage jedes Bewerbers - es steht deshalb
   ganz oben und nicht in der Aufzählung. */
.karriere-start {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; padding: 10px 16px;
  border-radius: 999px; background: var(--ice); color: var(--trust); font-size: .95rem;
}
.karriere-start svg { width: 20px; height: 20px; flex: none; }
.karriere-start strong { font-weight: 700; }

/* Die fünf Punkte vom Flyer: was GBB bietet, in Lesereihenfolge. */
.perks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.perks li {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--white);
}
.perk-icon {
  flex: none; width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; color: var(--white);
  background: linear-gradient(140deg, var(--cyan), var(--blue) 55%, var(--trust));
}
.perk-icon svg { width: 23px; height: 23px; }
.perks strong { display: block; font-size: 1rem; color: var(--charcoal); margin-bottom: 2px; }
.perks li > div span { font-size: .88rem; line-height: 1.55; color: var(--muted); }

/* Stellenprofil: Aufgaben und Anforderungen stecken im Dialog, damit die
   Seite nicht ausufert. Der Knopf steht dort, wo die Listen vorher standen. */
.karriere-mitte { margin-top: 28px; display: flex; justify-content: center; }
.karriere-more { margin: 0; }
.info-modal { width: min(880px, calc(100% - 32px)); }
/* Die Fläche kommt beim Beratungsdialog vom Formular darin - dieser hier
   hat keines, also bringt er sie selbst mit. */
.info-inner {
  position: relative; padding: 44px 44px 36px; display: grid; gap: 26px; background: var(--white);
  /* Wie beim Terminkalender: der Inhalt scrollt in sich, sonst wäre er auf
     einem flachen Fenster unerreichbar. */
  max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain;
}
.info-inner .modal-head { margin: 0; }
.info-inner .modal-head p { margin: 8px 0 0; color: var(--muted); }
.info-inner .karriere-cols { margin-top: 0; }
.info-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; border-top: 1px solid var(--border); padding-top: 22px; }

@media (max-width: 760px) {
  .info-inner { padding: 38px 20px 26px; gap: 20px; }
  .info-actions { justify-content: stretch; }
  .info-actions .btn { flex: 1; justify-content: center; }
}

/* Aufgaben und Anforderungen: zwei Karten statt zweier nackter Listen.
   Jede Zeile bekommt eine Haarlinie und ein rundes Häkchen - das trägt die
   Aufzählung, ohne sie mit Farbe zuzukleistern. */
.karriere-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
.karriere-block {
  padding: 24px 26px; border-radius: 18px; background: var(--white);
  border: 1px solid var(--border); box-shadow: 0 12px 34px -22px rgba(16, 42, 74, .55);
}
.info-inner .karriere-block { box-shadow: none; background: var(--surface); border-color: transparent; }
.karriere-block h3 {
  display: flex; align-items: center; gap: 11px; margin: 0 0 16px;
  font-size: 1.02rem; color: var(--trust);
}
.block-icon {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--ice); color: var(--blue);
}
.block-icon svg { width: 18px; height: 18px; }
.task-list { list-style: none; margin: 0; padding: 0; }
.task-list li {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 0;
  border-top: 1px solid var(--border); font-size: .95rem; line-height: 1.55; color: var(--charcoal);
}
.task-list li:first-child { border-top: 0; padding-top: 0; }
.task-list li:last-child { padding-bottom: 0; }
.tick {
  flex: none; width: 21px; height: 21px; border-radius: 50%; margin-top: 1px;
  background: var(--ice) no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230868B5' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 12px;
}

/* Der Abschluss der Karrierespalte. Dieselbe Navy-Fläche mit Rakelzug wie
   der Footer - ein dunkler Block in einer hellen Spalte, nicht drei helle
   Kästen nebeneinander. Das Zitat trägt, die Zusage darunter stützt. */
.karriere-panel {
  position: relative; overflow: hidden; margin-top: 30px; padding: 30px 34px;
  border-radius: 22px; color: var(--white);
  background: var(--trust);
  background-image:
    radial-gradient(60rem 30rem at 85% -20%, rgba(25, 167, 224, .32), transparent 62%),
    linear-gradient(158deg, #0A2C52 0%, var(--trust) 55%, #06243F 100%);
  box-shadow: 0 26px 60px -28px rgba(10, 44, 82, .75);
}
.karriere-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(104deg, transparent 36%, rgba(255,255,255,.085) 46%, rgba(255,255,255,.02) 54%, transparent 64%);
}
.karriere-panel > * { position: relative; }
.panel-note { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.panel-icon {
  flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  color: var(--white); background: rgba(255, 255, 255, .12); border: 1px solid rgba(223, 243, 255, .22);
}
.panel-icon svg { width: 23px; height: 23px; }
.panel-note strong { display: block; font-size: 1rem; margin-bottom: 4px; }
.panel-note > div > span { display: block; font-size: .9rem; line-height: 1.65; color: rgba(223, 243, 255, .74); }

/* Die linke Spalte ist lang geworden; das Formular bleibt beim Lesen sichtbar. */
@media (min-width: 1001px) {
  .karriere-form { position: sticky; top: 104px; }
}
.karriere-form {
  padding: 44px 42px; border-radius: 24px; background: var(--white);
  border: 1px solid var(--border);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 24px;
}
/* Die Karte ist oben rechts abgeschrägt, das Briefband liegt genau auf
   dieser Kante. Die Schenkellänge --cut ist aus der Bandgeometrie gerechnet:
   Abstand der Bandaußenkante von der Ecke mal Wurzel 2.
   box-shadow fällt bei clip-path weg (Schatten liegen außerhalb der Box),
   deshalb drop-shadow - das folgt der beschnittenen Silhouette. */
.karriere-form {
  position: relative; overflow: hidden; --cut: 129px;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  box-shadow: none;
  filter: drop-shadow(0 22px 34px rgba(16, 42, 74, .16)) drop-shadow(0 2px 5px rgba(16, 42, 74, .07));
}
/* Diagonales Eckband oben rechts, auf die Fase der Karte gerechnet.
   Fase C und Band hängen zusammen: das Band liegt mit seiner Außenkante auf
   der Schräge (Abstand C/Wurzel2 vom Eck), und das Beschnittfeld ist genau
   C groß - sonst liefe das Band unterhalb der Schräge als blauer Streifen
   in die Karte hinein. Die Fase wiederum muss lang genug für die Schrift
   sein: Textlänge + Banddicke, geteilt durch Wurzel 2. */
.form-ribbon {
  position: absolute; top: 0; right: 0; width: var(--cut); height: var(--cut);
  overflow: hidden; pointer-events: none; z-index: 2;
}
.form-ribbon-band {
  position: absolute; top: 60px; left: -47px; width: 200px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 0; transform: rotate(45deg);
  background: linear-gradient(135deg, var(--cyan), var(--blue) 52%, var(--trust));
  color: var(--white); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.form-ribbon-band svg { width: 15px; height: 15px; flex: none; }

.karriere-form .contact-form-head { margin-bottom: 4px; }
.karriere-form .uploader { gap: 12px; margin-top: 4px; }
.karriere-form .consent { margin-top: 4px; }
.karriere-form input:not([type=checkbox]), .karriere-form select, .karriere-form textarea {
  width: 100%; background-color: var(--surface); border-color: transparent; padding: 14px 16px; border-radius: 12px;
}
.karriere-form input:focus, .karriere-form select:focus, .karriere-form textarea:focus {
  background-color: var(--white); border-color: var(--blue);
}
.karriere-form textarea { min-height: 110px; }

@media (max-width: 1000px) {
  .karriere { grid-template-columns: 1fr; gap: 32px; width: calc(100% - 48px); }
  .karriere-cols { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
  .karriere-form { padding: 28px 20px; grid-template-columns: minmax(0, 1fr); gap: 22px; }
  /* Auf dem Telefon ist die Karte schmal: das Band schrumpft mit, und die
     Überschrift bekommt rechts Platz, damit sie nicht darunter läuft. */
  /* Auf dem Telefon trägt das Symbol allein: für das Wort müsste die Fase
     halb so breit wie die Karte werden. */
  .karriere-form { --cut: 58px; }
  .form-ribbon-band {
    top: 26px; left: -73px; width: 200px; padding: 7px 0; gap: 0;
  }
  .form-ribbon-band .ribbon-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .form-ribbon-band svg { width: 14px; height: 14px; }
  .karriere-form .contact-form-head { padding-right: 52px; }
  .karriere { width: calc(100% - 32px); }
  .type-cards { grid-template-columns: 1fr; }
  .up-zone { padding: 20px 14px; }
}

/* Consultation modal: image panel follows the selected technique */
.modal {
  width: min(1320px, calc(100% - 48px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; overflow: hidden;
  border-radius: 26px; color: var(--charcoal); background: var(--white); box-shadow: 0 50px 120px rgba(4, 20, 40, .5);
}
.modal::backdrop { background: rgba(8, 20, 36, .65); backdrop-filter: blur(8px); }
.modal[open] { animation: modal-in .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes modal-in { from { opacity: 0; transform: translateY(20px) scale(.97); } }
.modal-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: min(780px, calc(100dvh - 48px)); }
.modal-visual { position: relative; overflow: hidden; background: #0B1B2E; min-height: 100%; }
.modal-visual img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06); transition: opacity .6s ease, transform 1.2s ease;
}
.modal-visual img[data-system="Reinwassersystem"] { object-position: 50% 30%; }
.modal-visual img.is-active { opacity: 1; transform: scale(1); }
.modal-visual::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 20, 36, .1) 30%, rgba(8, 20, 36, .88) 100%), radial-gradient(400px 220px at 0% 0%, rgba(25, 167, 224, .35), transparent 70%);
}
.modal-caption { position: absolute; z-index: 1; left: 40px; right: 40px; bottom: 40px; color: var(--white); }
.modal-caption .eyebrow { color: var(--cyan); display: inline-flex; align-items: center; gap: 10px; }
.modal-caption .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--cyan); }
.caption-item { display: none; }
.caption-item.is-active { display: block; animation: cap-in .5s ease; }
@keyframes cap-in { from { opacity: 0; transform: translateY(8px); } }
.caption-item h3 { color: var(--white); font-size: 2rem; margin-bottom: .3em; }
.caption-item p { color: rgba(255,255,255,.85); margin: 0; font-size: 1.05rem; max-width: 42ch; }
.modal-form { position: relative; overflow-y: auto; padding: 52px 56px 44px; gap: 22px 20px; align-content: safe center; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.modal-form .field input, .modal-form select, .modal-form textarea { width: 100%; }
@media (max-height: 820px) and (min-width: 901px) { .modal-form { padding: 36px 48px 32px; gap: 14px 20px; } .modal-head h2 { font-size: 2rem; } .modal-form textarea { min-height: 90px; } }
.modal-head { grid-column: 1 / -1; margin-bottom: 4px; padding-right: 40px; }
.modal-head h2 { font-size: 2.4rem; color: var(--charcoal); margin-bottom: .3em; }
.modal-head p { color: var(--muted); font-size: .95rem; margin: 0; }
.modal-close {
  position: absolute; top: 18px; right: 18px; z-index: 2; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--white); color: var(--charcoal); font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: background .2s, transform .2s;
}
.modal-close:hover { background: var(--ice); transform: rotate(90deg); }
.chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { font-size: .9rem; font-weight: 600; margin-bottom: 10px; padding: 0; }
.chips label {
  position: relative; cursor: pointer; font-weight: 600; font-size: .92rem; padding: 10px 18px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--white); transition: all .2s;
}
.chips label:hover { border-color: var(--blue); }
.chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chips label:has(input:checked) {
  background: linear-gradient(140deg, var(--blue), var(--trust)); border-color: transparent; color: var(--white);
  box-shadow: 0 8px 20px rgba(8, 104, 181, .3);
}
.chips label:has(input:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 2px; }
.modal-form input:not([type=checkbox]):not([type=radio]), .modal-form select, .modal-form textarea { background-color: var(--surface); border-color: transparent; }
.modal-form input:focus, .modal-form select:focus, .modal-form textarea:focus { background-color: var(--white); border-color: var(--blue); }
.modal-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Social-Media-Zeile im Footer (noch ausgeblendet, siehe index.html) */
.footer-social { list-style: none; display: flex; gap: 10px; margin: 22px 0 0; padding: 0; }
.footer-social a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  color: rgba(223, 243, 255, .8); border: 1px solid rgba(223, 243, 255, .2);
  transition: color .2s, border-color .2s, background-color .2s;
}
.footer-social a:hover { color: var(--white); border-color: rgba(223, 243, 255, .45); background: rgba(255, 255, 255, .08); }
.footer-social svg { width: 20px; height: 20px; }

/* ------------------------------------------------ Einwilligung */
/* Kein Banner über der halben Seite: eine Frage, drei Antworten, fertig.
   Der Schalter ist die einzige Farbe im Dialog - alles andere bleibt ruhig. */
.consent-modal { width: min(620px, calc(100% - 32px)); }
.consent-inner {
  padding: 34px 34px 26px; display: grid; gap: 22px; background: var(--white);
  max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain;
}
.consent-head h2 { margin: 0 0 10px; font-size: 1.35rem; }
.consent-head p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.65; }
.consent-head a { color: var(--blue); }

.consent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.consent-item {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  padding: 16px 0; border-top: 1px solid var(--border);
}
.consent-item:first-child { border-top: 0; }
.consent-item strong { display: block; font-size: .98rem; color: var(--charcoal); margin-bottom: 3px; }
.consent-item span { font-size: .88rem; line-height: 1.6; color: var(--muted); }
.consent-marke {
  align-self: center; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.consent-fest {
  display: block; width: 38px; height: 22px; border-radius: 999px; background: var(--border);
  position: relative;
}
.consent-fest::after {
  content: ""; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--white);
}

/* Schalter: aus ist grau, an ist blau. Mehr Zustände gibt es nicht. */
.schalter { display: inline-flex; cursor: pointer; }
.schalter input { position: absolute; opacity: 0; width: 38px; height: 22px; margin: 0; cursor: pointer; }
.schalter-bahn {
  display: block; width: 38px; height: 22px; border-radius: 999px; background: var(--border);
  position: relative; transition: background-color .2s;
}
.schalter-bahn::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--white); transition: transform .2s;
}
.schalter input:checked + .schalter-bahn { background: var(--blue); }
.schalter input:checked + .schalter-bahn::after { transform: translateX(16px); }
.schalter input:focus-visible + .schalter-bahn { outline: 3px solid var(--cyan); outline-offset: 2px; }

.consent-leer { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--muted); }
.consent-aktionen { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--border); padding-top: 20px; }
.consent-aktionen .btn { font-size: .92rem; }

.footer-legal-btn {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: inherit; text-decoration: none;
}

@media (max-width: 640px) {
  .consent-inner { padding: 26px 20px 20px; gap: 18px; }
  .consent-item { grid-template-columns: 46px minmax(0, 1fr); }
  .consent-marke { grid-column: 2; align-self: start; }
  .consent-aktionen { justify-content: stretch; }
  .consent-aktionen .btn { flex: 1 1 100%; justify-content: center; }
}

/* Footer */
/* Setzt die Navy-Palette der Kontaktspalte darüber fort, nur ruhiger. Die
   Signatur ist ein Rakelzug: ein schräges Lichtband über die Fläche und
   dieselbe Wischbewegung als Unterstrich beim Hovern der Links. */
.site-footer {
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(720px 380px at 90% -12%, rgba(25, 167, 224, .13), transparent 60%),
              linear-gradient(180deg, #0B1B2E 0%, #091626 55%, #070F1A 100%);
  color: rgba(255,255,255,.72); padding: 76px 0 26px; font-size: .92rem;
}
/* Rakelzug */
.site-footer::before {
  content: ""; position: absolute; z-index: -1; inset: -40% -10%;
  background: linear-gradient(104deg, transparent 34%, rgba(223, 243, 255, .05) 41%, rgba(223, 243, 255, .15) 48%, rgba(25, 167, 224, .20) 51%, rgba(223, 243, 255, .11) 55%, rgba(223, 243, 255, .03) 61%, transparent 68%);
  transform: rotate(-6deg); pointer-events: none;
}
/* Saubere Glaskante am oberen Rand */
.site-footer::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(25, 167, 224, .65) 18%, rgba(223, 243, 255, .35) 46%, transparent 78%);
}
/* Gleiche Breite wie Kontakt- und Karrierebereich: der Footer lief über die
   1200px des Standardrasters und stand damit schmaler als alles darüber. */
.footer-inner { position: relative; width: min(100% - 48px, 1440px); max-width: none; padding: 0; }

.footer-grid { display: grid; grid-template-columns: 1.4fr .9fr .9fr 1.45fr; gap: 48px 64px; }

.footer-brand { max-width: 380px; }
.footer-logo { background: var(--white); border-radius: 14px; padding: 12px 16px; display: inline-block; }
.footer-logo img { height: 46px; width: auto; }
.footer-tagline { margin: 18px 0 22px; color: rgba(255,255,255,.66); line-height: 1.65; }

/* Partnerkarte: die zwei Marken gehören demselben Inhaber, das darf man sehen. */
.footer-partner {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
  color: var(--white); text-decoration: none; transition: background .25s, border-color .25s, transform .25s;
}
.footer-partner:hover { background: rgba(240, 126, 16, .14); border-color: rgba(240, 126, 16, .5); transform: translateY(-2px); }
.footer-partner img { width: 42px; height: 42px; object-fit: contain; background: var(--white); border-radius: 10px; padding: 4px; flex: none; }
.footer-partner span { flex: 1; min-width: 0; }
.footer-partner small { display: block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sbb); }
.footer-partner strong { font-size: .95rem; font-weight: 600; color: var(--white); }
.footer-partner > svg { width: 17px; height: 17px; flex: none; color: rgba(255,255,255,.45); transition: transform .25s, color .25s; }
.footer-partner:hover > svg { color: var(--sbb); transform: translateX(3px); }

/* Spaltenüberschriften mit dem Cyan-Strich, den die Seite schon kennt */
.site-footer h4 {
  color: var(--white); margin: 0 0 18px; font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; gap: 11px;
}
.site-footer h4::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(25, 167, 224, .55), transparent); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }

.footer-links li { margin-bottom: 11px; }
.footer-links a {
  position: relative; display: inline-block; color: rgba(255,255,255,.72);
  text-decoration: none; padding-bottom: 2px; transition: color .22s;
}
/* Der Unterstrich wischt von links herein, wie ein Rakelzug über die Scheibe. */
.footer-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--cyan), rgba(25, 167, 224, 0));
  transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.footer-links a:hover, .footer-links a:focus-visible { color: var(--white); }
.footer-links a:hover::after, .footer-links a:focus-visible::after { transform: scaleX(1); }

.footer-contact { display: grid; gap: 14px; }
.footer-contact li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.55; }
.footer-contact address { font-style: normal; color: rgba(255,255,255,.72); }
.footer-contact a {
  display: inline-block; padding: 3px 0; color: rgba(255,255,255,.82); text-decoration: none;
  transition: color .22s; overflow-wrap: anywhere;
}
.footer-contact a:hover { color: var(--cyan); }
.f-icon {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px;
  background: rgba(25, 167, 224, .14); border: 1px solid rgba(25, 167, 224, .25); color: var(--cyan);
}
.f-icon svg { width: 16px; height: 16px; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.10); margin-top: 52px; padding-top: 22px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 26px;
  font-size: .82rem; color: rgba(255,255,255,.55);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.footer-legal a, .footer-legal-btn { display: inline-block; padding: 5px 0; color: rgba(255,255,255,.62); text-decoration: none; transition: color .22s; }
.footer-legal a:hover, .footer-legal-btn:hover { color: var(--cyan); }
.footer-made a { color: rgba(255,255,255,.82); text-decoration: none; transition: color .22s; }
.footer-made a:hover { color: var(--cyan); }
.footer-made .heart { font-style: normal; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 1100px) {
  /* Die Marke liegt hier in einer eigenen Zeile, darunter die drei Spalten.
     Kontakt bekommt den größten Anteil: "mail@glasreinigung-bb.de" ist die
     längste zusammenhängende Zeichenkette der Seite und darf nicht brechen. */
  .footer-grid { grid-template-columns: .85fr .85fr 1.3fr; gap: 44px 48px; }
  .footer-brand { grid-column: 1 / -1; max-width: none; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 28px; }
  .footer-tagline { margin: 0; grid-column: 2; }
  .footer-logo { grid-row: span 2; align-self: start; }
  .footer-partner { grid-column: 2; max-width: 320px; }
}
@media (max-width: 760px) {
  .site-footer { padding-top: 56px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  .footer-col-kontakt { grid-column: 1 / -1; }
  .footer-brand { grid-template-columns: 1fr; gap: 16px; }
  .footer-tagline, .footer-partner { grid-column: 1; }
  .footer-logo { grid-row: auto; justify-self: start; }
  .footer-bottom { flex-direction: column; align-items: flex-start; margin-top: 38px; }
}
@media (max-width: 420px) {
  .footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-links a::after { transition: none; }
  .footer-partner, .footer-partner > svg { transition: none; }
  .footer-partner:hover { transform: none; }
}

/* Responsive */
@media (max-width: 1100px) {
  .partner-card { grid-template-columns: auto minmax(0, 1fr); }
  .partner-cta { grid-column: 1 / -1; clip-path: none; padding: 36px 44px; }
}
@media (max-width: 1100px) {
  .nav-actions .btn { display: none; }
  .site-header { backdrop-filter: none; }
  .trust-card { grid-template-columns: 1fr 1fr; }
  .trust li:nth-child(3)::before { display: none; }
  .hero-inner { height: auto; display: block; padding: 0; }
  .hero-copy { width: auto; padding: 56px 24px 24px; }
  .hero-media { position: static; }
  .hero-media img { height: auto; aspect-ratio: 1672 / 941; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%); mask-image: linear-gradient(180deg, transparent 0%, #000 12%); }
  .nav-toggle { display: block; }
  /* Schubfach von rechts. Es bleibt immer im Dokument, damit der Übergang
     läuft; visibility hält es solange aus der Tabulatorreihenfolge. */
  .nav-links {
    display: flex; flex-direction: column; gap: 0; margin: 0;
    /* Höhe richtet sich nach dem Inhalt; nur wenn der nicht passt, wird
       gescrollt. bottom bleibt deshalb bewusst auto. */
    position: fixed; top: 0; right: 0; bottom: auto; left: auto; z-index: 60;
    width: min(84vw, 330px); max-height: 100vh; max-height: 100dvh;
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--white); box-shadow: -18px 18px 54px rgba(4, 20, 40, .28);
    border-bottom-left-radius: 20px;
    padding: 14px 22px calc(20px + env(safe-area-inset-bottom));
    transform: translateX(101%); visibility: hidden;
    transition: transform .38s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .38s;
  }
  .nav.open .nav-links {
    transform: translateX(0); visibility: visible;
    transition: transform .38s cubic-bezier(.2, .8, .2, 1), visibility 0s linear 0s;
  }
  .nav-ink { display: none; }
  .nav-links a { display: block; padding: 14px 2px; font-size: 1.05rem; border-bottom: 1px solid var(--border); }
  .nav-links li:nth-last-child(3) a { border-bottom: 0; }
  .nav-links a[aria-current="page"] { color: var(--blue); font-weight: 700; }

  .nav-close-row { display: flex; justify-content: flex-end; padding-bottom: 4px; }
  .nav-close {
    width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
    border: 1px solid var(--border); background: var(--white); color: var(--charcoal);
    cursor: pointer; transition: background .2s, transform .2s;
  }
  .nav-close svg { width: 22px; height: 22px; }
  .nav-close:hover { background: var(--ice); transform: rotate(90deg); }

  /* Markenbild am Fuß des Schubfachs. margin-top:auto schiebt es nach unten,
     solange Platz da ist; sonst rutscht es in den Scrollbereich. */
  .nav-promo {
    display: block; position: relative; isolation: isolate; overflow: hidden;
    margin-top: 16px; border-radius: 14px;
  }
  .nav-promo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
  .nav-promo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8, 20, 36, 0) 18%, rgba(8, 20, 36, .72) 55%, rgba(8, 20, 36, .94) 100%);
  }
  /* .nav-links erbt white-space:nowrap von der Desktop-Navigation; ohne das
     Zurücksetzen läuft der Fließtext aus der Karte heraus. */
  .nav-promo-text {
    position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px;
    color: var(--white); white-space: normal;
  }
  .nav-promo-text strong { display: block; font-size: 1rem; line-height: 1.25; margin-bottom: 3px; }
  .nav-promo-text span { display: block; font-size: .8rem; line-height: 1.45; color: rgba(255,255,255,.85); }

}

@media (max-width: 900px) {
  .services { --per-view: 2; }
  .trust { margin-top: -32px; }
  .trust-card { grid-template-columns: 1fr 1fr; }
  .trust li:nth-child(3)::before { display: none; }
  .audience, .about, .contact { grid-template-columns: 1fr; }
  .about { gap: 48px; }
  .about-badge { left: 12px; }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .modal-grid { grid-template-columns: 1fr; height: auto; }
  .modal-visual { min-height: 220px; }
  .modal-caption { left: 20px; right: 20px; bottom: 18px; }
  .caption-item h3 { font-size: 1.3rem; }
  .modal-close { background: rgba(255,255,255,.9); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  /* Lesbarkeit auf dem Telefon: keine Beschriftung unter 12px, und jedes
     Bedienelement bekommt eine Fläche, die man mit dem Daumen trifft. */
  .slider-dots { gap: 18px; }
  /* Telefon und E-Mail sind die wichtigsten Ziele auf dem Handy. */
  .contact-list a { display: inline-block; padding: 6px 0; }
  .footer-links a { padding: 7px 0; }
  .footer-links li { margin-bottom: 4px; }
  .consent input { width: 20px; height: 20px; }
  .footer-contact a { padding: 6px 0; }
  .container { padding-left: 16px; padding-right: 16px; }
  .logo img { height: 48px; }
  .lang-switch { padding: 2px; }
  .lang-thumb { top: 2px; bottom: 2px; }
  /* Auf dem Telefon trägt die Flagge allein. Das Kürzel bleibt im Dokument,
     nur unsichtbar - sonst hätte die Taste für Screenreader keinen Namen. */
  .lang-code {
    position: absolute; width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .flag { width: 21px; height: 14px; border-radius: 3px; }
  .lang-switch button { padding: 3px 8px; gap: 0; min-height: 32px; }
  .nav { gap: 10px; }
  .hero-copy { padding: 40px 16px 20px; }
  .services { --per-view: 1; --gap: 16px; width: calc(100% - 32px); }
  .section { padding: 60px 0; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .trust { margin-top: -20px; }
  .trust-card { grid-template-columns: 1fr; width: calc(100% - 32px); }
  .trust li { padding: 18px 20px; }
  .trust li + li::before { left: 20px; right: 20px; top: 0; bottom: auto; width: auto; height: 1px; background: var(--border); }
  .trust li:nth-child(3)::before { display: block; }
  .stats { grid-template-columns: 1fr; }
  .about-section { padding: 72px 0; }
  .about-media { padding: 0 20px 44px 0; }
  .gallery { grid-template-columns: 1fr; }
  .g-wide, .g-tall { grid-column: auto; grid-row: auto; }
  .partner-card { grid-template-columns: 1fr; }
  .partner-brands { padding: 32px 24px 0; }
  .partner-logo { width: 120px; height: 120px; }
  .partner-copy { padding: 24px; }
  .partner-cta { padding: 28px 24px; }
  form { grid-template-columns: 1fr; }
  .modal-form { padding: 24px 20px 22px; overflow: visible; grid-template-columns: minmax(0, 1fr); }
  .modal { overflow-y: auto; }
  .contact-info { padding: 36px 22px; min-height: 0; }
  .contact-form { padding: 32px 20px; grid-template-columns: minmax(0, 1fr); }
  .contact { width: calc(100% - 32px); }
  .contact-section { padding: 64px 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

.gallery-more { display: flex; justify-content: center; margin-top: 28px; }

/* Galerie-Schublade, fährt von links ein */
.drawer {
  position: fixed; inset: 0 auto 0 0; margin: 0; width: min(760px, 94vw); height: 100dvh; max-height: none; max-width: none;
  padding: 0; border: 0; background: var(--white); color: var(--charcoal); overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 24px 0 64px rgba(8, 20, 36, .3); transform: translateX(-100%);
}
.drawer[open] { animation: drawer-in .55s cubic-bezier(.2, .8, .2, 1) forwards; }
.drawer.closing { animation: drawer-out .42s cubic-bezier(.6, 0, .8, .2) forwards; }
.drawer::backdrop { background: rgba(8, 20, 36, .6); backdrop-filter: blur(6px); animation: fade-in .45s ease; }
.drawer.closing::backdrop { opacity: 0; transition: opacity .42s ease; }
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes drawer-out { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes fade-in { from { opacity: 0; } }
.drawer-head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 36px 40px 24px; background: linear-gradient(180deg, var(--white) 80%, rgba(255, 255, 255, 0));
}
.drawer-head .eyebrow { color: var(--blue); }
.drawer-head h2 { margin: 8px 0 6px; font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--trust); line-height: 1.15; }
.drawer-head p { margin: 0; color: var(--muted); }
.drawer-head .modal-close { position: static; flex: none; }
.jobs-grid { list-style: none; margin: 0; padding: 0 40px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.jobs-grid li { overflow: hidden; border-radius: 14px; background: var(--surface); aspect-ratio: 4 / 3; }
.jobs-grid li:nth-child(5n + 1) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.jobs-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.jobs-grid li:hover img { transform: scale(1.05); }
.jobs-grid li { cursor: pointer; }
.drawer[open] .jobs-grid li { animation: job-in .6s cubic-bezier(.2, .8, .2, 1) backwards; }
.drawer[open] .jobs-grid li:nth-child(2) { animation-delay: .06s; } .drawer[open] .jobs-grid li:nth-child(3) { animation-delay: .12s; }
.drawer[open] .jobs-grid li:nth-child(4) { animation-delay: .18s; } .drawer[open] .jobs-grid li:nth-child(n+5) { animation-delay: .24s; }
@keyframes job-in { from { opacity: 0; transform: translateX(-24px); } }
.drawer-foot { position: sticky; bottom: 0; padding: 20px 40px 28px; background: linear-gradient(0deg, var(--white) 70%, rgba(255, 255, 255, 0)); }
@media (max-width: 640px) {
  .drawer-head { padding: 24px 20px 16px; }
  .jobs-grid { padding: 0 20px 16px; gap: 10px; }
  .drawer-foot { padding: 16px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .drawer[open], .drawer.closing, .drawer[open] .jobs-grid li { animation: none; transform: none; }
}

/* Lightbox der Galerie */
.lightbox {
  width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; display: grid; align-items: center;
  grid-template-columns: 76px minmax(0, 1fr) 76px; place-items: center;
}
.lightbox:not([open]) { display: none; }
.lightbox::backdrop { background: rgba(8, 20, 36, .88); backdrop-filter: blur(8px); }
.lb-stage { grid-column: 2; margin: 0; display: grid; place-items: center; max-height: 100dvh; padding: 72px 0 56px; }
.lb-stage img {
  display: block; max-width: 100%; max-height: calc(100dvh - 128px); width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 40px 90px rgba(0, 0, 0, .55);
}
.lb-nav, .lb-close {
  display: grid; place-items: center; border: 0; cursor: pointer; color: var(--white);
  background: rgba(255, 255, 255, .1); border-radius: 999px; transition: background .2s;
}
.lb-nav:hover, .lb-close:hover { background: rgba(255, 255, 255, .22); }
.lb-nav { width: 52px; height: 52px; }
.lb-prev { grid-column: 1; }
.lb-next { grid-column: 3; }
.lb-nav svg { width: 24px; height: 24px; }
.lb-close { position: fixed; top: 20px; right: 20px; width: 44px; height: 44px; }
.lb-close svg { width: 20px; height: 20px; }
.lb-count {
  position: fixed; left: 0; right: 0; bottom: 20px; margin: 0; text-align: center;
  color: rgba(255, 255, 255, .7); font-size: .82rem; letter-spacing: .08em;
}
@media (max-width: 760px) {
  .lightbox { grid-template-columns: 1fr; }
  .lb-stage { grid-column: 1; padding: 64px 12px 72px; }
  .lb-nav { position: fixed; bottom: 16px; width: 46px; height: 46px; }
  .lb-prev { left: calc(50% - 64px); }
  .lb-next { right: calc(50% - 64px); }
  .lb-count { bottom: 76px; }
}

/* Clear break between the hero and the services section */
.trust { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 64px, var(--surface) 64px); }
#leistungen { background: var(--surface); border-bottom: 1px solid var(--border); }

/* Legal modal (Datenschutz) */
.legal-modal {
  width: min(860px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 26px;
  color: var(--charcoal); background: var(--white); box-shadow: 0 50px 120px rgba(4, 20, 40, .5); overflow: hidden;
}
.legal-modal[open] { display: flex; flex-direction: column; animation: modal-in .35s cubic-bezier(.2, .8, .2, 1); }
.legal-modal::backdrop { background: rgba(8, 20, 36, .65); backdrop-filter: blur(8px); }
.legal-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 36px 44px 24px;
  border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--ice), var(--white));
}
.legal-head .eyebrow { color: var(--blue); }
.legal-head h2 { margin: 8px 0 4px; color: var(--trust); font-size: clamp(1.6rem, 3vw, 2.1rem); }
.legal-note { margin: 0; color: var(--muted); font-size: .9rem; }
.legal-head .modal-close { position: static; flex: none; display: grid; place-items: center; }
.legal-body { overflow-y: auto; overscroll-behavior: contain; padding: 12px 44px 40px; line-height: 1.7; font-size: .97rem; }
.legal-body h3 { margin: 1.8em 0 .5em; font-size: 1.1rem; color: var(--trust); }
.legal-body p { margin: 0 0 1em; color: #3A444F; }
.legal-body a { color: var(--blue); }
.legal-date { margin-top: 2em !important; color: var(--muted) !important; font-size: .88rem; }
@media (max-width: 640px) {
  .legal-modal { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 20px; }
  .legal-head { padding: 24px 20px 18px; gap: 12px; }
  .legal-head > div { min-width: 0; }
  .legal-head h2 { font-size: 1.45rem; overflow-wrap: anywhere; }
  .legal-body { padding: 4px 20px 28px; }
}


/* Honeypot: unsichtbares Feld zur Spam-Abwehr, nicht fokussierbar */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------- Sehr schmale Geräte */
/* Unter rund 400px wird die Kopfzeile eng: Logo, Sprachumschalter und
   Menütaste zusammen brauchen mehr Platz als vorhanden. Erst die Abstände
   straffen, darunter zusätzlich die Flaggen weglassen - DE/EN/FR trägt die
   Bedeutung, die Flagge wiederholt sie nur. */
@media (max-width: 400px) {
  /* Schmale Spalte: der Text braucht mehr Zeilen, also bekommt die Karte
     mehr Höhe, damit das Fahrzeug nicht zur Textur wird. */
  .nav-promo img { aspect-ratio: 5 / 4; }
  .container, .nav.container { padding-left: 14px; padding-right: 14px; }
  .nav { gap: 8px; }
  .lang-switch button { padding: 3px 7px; }
}
@media (max-width: 360px) {
  .lang-switch button { padding: 3px 6px; }
  .logo img { height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links { transition: none; }
  .nav-backdrop { transition: none; }
  .nav-close:hover { transform: none; }
}

/* Niedrige Telefone: Menüzeilen etwas enger, damit das Bild unten im
   Schubfach ohne Scrollen sichtbar bleibt. */
@media (max-width: 1100px) and (max-height: 680px) {
  .nav-links a { padding: 11px 2px; font-size: 1rem; }
  .nav-promo-text span { font-size: .78rem; }
}

/* Turnstile: das Widget bringt eigene Maße mit, es braucht nur Platz. */
.turnstile-box { min-height: 65px; }
.turnstile-box > div { max-width: 100%; }