:root{
  --primary:#01155B;
  --secondary:#0067BB;

  --bg:#ffffff;
  --soft:#f5f7fa;

  --text:#0b0d10;
  --muted: rgba(1,21,91,.70);

  --border: rgba(1,21,91,.14);
  --ring: rgba(0,103,187,.26);

  --container:1120px;
  --header-h:78px;

  --radius:18px;
  --shadow: 0 18px 44px rgba(1,21,91,.10);

  /* V1 polish tokens */
  --shadow-soft: 0 12px 26px rgba(1,21,91,.10);
  --shadow-lift: 0 18px 44px rgba(1,21,91,.14);
  --stroke: rgba(1,21,91,.12);
}

@font-face{font-family:"Montserrat";src:url("assets/fonts/Montserrat-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Montserrat";src:url("assets/fonts/Montserrat-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Montserrat";src:url("assets/fonts/Montserrat-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Montserrat";src:url("assets/fonts/Montserrat-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: 0; }
body{
  margin:0;
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  text-rendering: optimizeLegibility;
}

img{ max-width:100%; display:block; height:auto; }
a{ color:var(--secondary); text-decoration:none; }
a:hover{ color:var(--primary); text-decoration:underline; }
.container{ width:min(var(--container),calc(100% - 32px)); margin-inline:auto; }

:focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-999px;top:12px;padding:10px 12px;
  border:1px solid var(--border);background:#fff;z-index:9999;
}
.skip-link:focus{ left:16px; }

/* Header (hell) */
.site-header{
  position:sticky;
  top:0;
  z-index:1200;
  height:var(--header-h);
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(1,21,91,.10);
  backdrop-filter:saturate(1.1) blur(8px);
}
.header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand-logo{ height:50px; width:auto; }

/* Nav */
.nav-toggle{
  display:none;
  border:1px solid rgba(1,21,91,.14);
  background:#fff;
  border-radius:14px;
  width:44px;height:44px;
}
.burger{ display:block;width:18px;height:2px;background:var(--primary); margin:0 auto; position:relative; }
.burger::before,.burger::after{ content:""; position:absolute; left:0; width:18px;height:2px;background:var(--primary); }
.burger::before{ top:-6px; } .burger::after{ top:6px; }

.site-nav{
  display:flex;
  align-items:center;
  gap:10px;
}
.site-nav a{
  padding:10px 10px;
  border-radius:14px;
  font-weight:800;
  font-size:14px;
  color:var(--primary);
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.site-nav a:hover{
  text-decoration:none;
  background:rgba(0,103,187,.08);
}
.site-nav a:active{ transform: translateY(1px); }
.site-nav a.is-active:not(.nav-cta){
  box-shadow: inset 0 -3px 0 var(--secondary);
  border-radius:0;
}
.nav-cta{
  border:1px solid rgba(1,21,91,.18);
  background:#fff;
}
.nav-cta:hover{ border-color:rgba(0,103,187,.55); }

/* Progress bar */
.progress{
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:3px;
  background:transparent;
}
.progress span{
  display:block;
  height:3px;
  width:0%;
  background:linear-gradient(90deg,var(--primary),var(--secondary));
}

/* Sections */
.section{
  padding: clamp(30px, 5.4vw, 64px) 0;
}

section[id]{
  scroll-margin-top: var(--header-h);
}

/* Beim Ankersprung weniger "Luft" oben, damit kein Balken entsteht */
.section:target{
  padding-top: 18px;
}

.section-head{
  position: relative;
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.section-head::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:64px;
  height:3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--secondary), rgba(0,103,187,.15));
}

.section-head h2{
  margin:0 0 10px 0;
  letter-spacing:-.4px;
  font-size:clamp(22px,2.4vw,34px);
}
.section-head p{
  margin:0;
  max-width:85ch;
}

/* Alternating backgrounds */
.section-light{
  color:var(--text);
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(0,103,187,.08), transparent 60%),
    radial-gradient(900px 520px at 92% 10%, rgba(1,21,91,.08), transparent 62%),
    linear-gradient(180deg, #fff, var(--soft));
}
.section-light .section-head h2{ color:var(--primary); }
.section-light .section-head p{ color:var(--muted); }

/* === CHANGE 1: Version 2 blue background for all dark sections (hero + kontakt/footer) === */
.section-dark{
  color:#fff;
  background: linear-gradient(180deg, #01155B, #021b72);
}
.section-dark .section-head h2{ color:#fff; }
.section-dark .section-head p{ color:rgba(255,255,255,.84); }
.section-dark .section-head::after{
  background: linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,.12));
}

.section-intro{
  margin:14px 0 0 0;
  max-width:95ch;
}
.section-light .section-intro{ color:rgba(1,21,91,.78); }
.section-dark .section-intro{ color:rgba(255,255,255,.84); }

.note{
  margin:18px 0 0 0;
  font-size:13.5px;
  max-width:95ch;
}
.section-light .note{ color:rgba(1,21,91,.68); }
.section-dark .note{ color:rgba(255,255,255,.78); }

/* HERO specifics */
.hero{
  padding-top: clamp(34px, 6vw, 78px);
  min-height: calc(100vh - var(--header-h));
  position: relative;
  display: flex;
  align-items: stretch;
}

.hero-shell{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.hero-top{ max-width: 78ch; }

.kicker{
  margin:0 0 10px 0;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.hero h1{
  margin:0 0 10px 0;
  font-size:clamp(30px,3.2vw,52px);
  line-height:1.07;
  letter-spacing:-.8px;
  color:#fff;
  max-width:26ch;
}
.hero-top h1 + h1{
  opacity:.92;
  font-weight:700;
}
.lead{
  margin:0;
  color:rgba(255,255,255,.86);
  max-width: 70ch;
}

/* === CHANGE 2: Hero CTA box from Version 2 (technical panel, no glow) === */
.hero-cta{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:16px;
  margin-top: 18px;
  max-width: 100%;
  align-items:center;

  padding: 22px 24px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);

  box-shadow: none;
}
.hero-cta h3{
  margin:0 0 6px 0;
  color:#fff;
  letter-spacing:-.2px;
  line-height:1.2;
}
.hero-cta p{
  margin:0;
  color:rgba(255,255,255,.82);
  max-width:60ch;
}

/* Keep V1 layout but neutralize margin-bottom if present */
.cta-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin:0;
}

/* Keep the proof line as in V1 */
.hero-proof{
  font-size:13px;
  color:rgba(255,255,255,.78);
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 30px;
}

/* Buttons (global – V1) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(1,21,91,.22);
  background:#fff;
  color:var(--primary);
  font-weight:800;
  letter-spacing:-.1px;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover{ text-decoration:none; box-shadow: 0 10px 22px rgba(0,0,0,.14); transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); }

.btn.primary{
  background: var(--primary);
  color:#fff;
  border-color: rgba(255,255,255,.14);
}
.btn.primary:hover{ background: rgba(1,21,91,.92); }

.btn.ghost{
  background: transparent;
  color: #fff;
  border:1px solid rgba(255,255,255,.45);
}
.btn.ghost:hover{ background: rgba(255,255,255,.10); }

.btn.link{
  background: transparent;
  border:none;
  padding:12px 0;
  color: var(--secondary);
}
.btn.link:hover{ text-decoration:underline; color: var(--primary); box-shadow:none; transform:none; }

/* Hero CTA button style from Version 2: primary in secondary (only in hero) */
.hero-cta .btn.primary{
  background: var(--secondary);
  border-color: var(--secondary);
  color:#fff;
}
.hero-cta .btn.primary:hover{
  background: rgba(0,103,187,.92);
}

/* Cards / grids (V1) */
.services-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px 22px;
}

.service-block{
  background:#fff;
  border:1px solid rgba(1,21,91,.12);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-block:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(0,103,187,.18);
}

.service-block h3{
  display:flex;
  align-items:center;
  gap:10px;

  margin:0 0 10px 0;
  color:var(--primary);
  letter-spacing:-.2px;
  font-size:16px;
}
.service-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:32px;
  height:32px;
  border-radius:10px;

  background: linear-gradient(180deg, rgba(0,103,187,.10), rgba(1,21,91,.06));
  color: var(--primary);
  font-size:18px;
  line-height:1;
  flex-shrink:0;
  box-shadow: inset 0 0 0 1px rgba(1,21,91,.08);
}
.service-block ul{
  margin:0;
  padding-left:18px;
  color:rgba(1,21,91,.78);
  font-size:14px;
}
.service-block li{ margin:6px 0; }

/* Inline CTA (V1) */
.inline-cta{
  margin-top:18px;
  border-top:1px solid rgba(1,21,91,.14);
  padding-top:14px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
}
.inline-cta h3,
.inline-cta p{
  color: var(--secondary);
}
.inline-cta .btn.primary{
  background: var(--secondary);
  border-color: var(--secondary);
  color: #fff;
}
.inline-cta .btn.primary:hover{
  background: rgba(0,103,187,.92);
}

/* Dark panels (V1) */
.two-col{
  margin-top:18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px 22px;
}
.panel{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  padding:16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
}
.panel h3{ margin:0 0 10px 0; color:#fff; letter-spacing:-.2px; }
.panel p{ margin:0 0 10px 0; color:rgba(255,255,255,.84); }

/* Gallery (V1) */
.gallery-block{
  margin-top:18px;
  background:#fff;
  border:1px solid rgba(1,21,91,.12);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: var(--shadow-soft);
}
.gallery-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.gallery-head h3{
  margin:0;
  color:var(--primary);
  font-size:16px;
  letter-spacing:-.2px;
}
.muted{ margin:0; color:rgba(1,21,91,.62); font-size:13px; }

.gallery{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}
.thumb{
  margin:0;
  border-radius: 14px;
  overflow:hidden;
  border:1px solid rgba(1,21,91,.12);
  background:#fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
.thumb:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(1,21,91,.14);
}
.thumb img{
  width:100%;
  height:100%;
  aspect-ratio: 4 / 3;
  object-fit:cover;
  filter: contrast(1.03);
}

/* Contact (V1) */
.contact-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap:16px 22px;
}
.contact-info{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  padding:16px;
  position:relative;
  overflow:hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
}
.contact-info::before{
  content:"";
  position:absolute;
  inset:-12%;
  background:url("assets/img/Logo_Alex/HH%20Logo%20Icon.svg") no-repeat;
  background-position: 86% 22%;
  background-size: min(640px, 70vw);
  opacity:.10;
  transform: rotate(-10deg);
  pointer-events:none;
}
.contact-info > *{ position:relative; z-index:1; }

.contact-logo{ max-width:240px; margin-bottom:14px; opacity:.95; }
.contact-info p{ margin:0 0 12px 0; color:rgba(255,255,255,.86); }
.contact-info a{ color:#fff; text-decoration:underline; }
.micro p{ margin:0 0 6px 0; color:rgba(255,255,255,.82); font-size:13.5px; }

.contact-form{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.16);
  background:#fff;
  padding:16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.14);
  color:var(--text);
}
.contact-form h3{ margin:0 0 12px 0; color:var(--primary); }

.form{ display:grid; gap:12px; }
.field label{
  display:block;
  font-size:13px;
  color:rgba(1,21,91,.70);
  margin-bottom:6px;
}
.field input,.field textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(1,21,91,.16);
  background:#fff;
  color:var(--text);
  font-family:inherit;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field input:focus,.field textarea:focus{
  outline:0;
  box-shadow: 0 0 0 4px rgba(0,103,187,.18);
  border-color:rgba(0,103,187,.55);
}
.honeypot{ position:absolute; left:-9999px; height:0; overflow:hidden; }
.form-actions{ display:grid; gap:10px; align-items:start; }
.form-hint{ margin:0; color:rgba(1,21,91,.70); font-size:13px; }
.legal-hint{ margin:14px 0 0 0; color:rgba(255,255,255,.78); font-size:13px; }
.legal-hint a{ color:#fff; text-decoration:underline; }

/* Footer inside dark contact */
.site-footer-dark{
  margin-top:22px;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.78);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.footer-links{ display:flex; gap:10px; align-items:center; }
.footer-links a{ color:#fff; text-decoration:underline; }

/* Responsive */
@media (max-width:980px){
  .services-grid{ grid-template-columns:1fr; }
  .two-col{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns: repeat(2, 1fr); }
  .contact-grid{ grid-template-columns:1fr; }

  .hero-cta{ grid-template-columns:1fr; }
  .cta-actions{ justify-content:flex-start; }
}

@media (max-width:820px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .site-nav{
    position:absolute;
    right:16px;
    top:calc(var(--header-h) - 10px);
    width:min(360px,calc(100% - 32px));
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:12px;
    border-radius:16px;
    border:1px solid rgba(1,21,91,.14);
    background:rgba(255,255,255,.98);
    box-shadow: 0 18px 44px rgba(1,21,91,.12);
  }
  .site-nav a{ padding:12px 12px; }
  .site-nav.is-open{ display:flex; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .service-block,
  .thumb,
  .btn,
  .site-nav a{ transition:none; }
}

/* === Hero / Landing: vertikale Zentrierung + sauberer Rhythmus === */
.hero{
  /* statt großem padding-top: wir zentrieren über Layout */
  padding-top: 0;
  padding-bottom: 0;

  /* sorgt für echte "Bildschirmhöhe minus Header" */
  min-height: calc(100vh - var(--header-h));

  display: flex;
  align-items: stretch;
}

.hero .container{
  /* der Container soll die volle Hero-Höhe mitgehen */
  display: flex;
  min-height: calc(100vh - var(--header-h));
}

/* Das gesamte Paket (Kicker → Headline → Lead → CTA → Proof) mittig ausrichten */
.hero-shell{
  width: 100%;
  display: flex;
  flex-direction: column;

  /* echte Zentrierung */
  justify-content: center;

  /* angenehme seitliche/vertikale Luft */
  padding-block: clamp(28px, 5vh, 64px);

  /* Rhythmus zwischen Text / CTA / Proof */
  gap: 16px;
}

/* Textblock etwas kompakter + bessere Lesebreite */
.hero-top{
  max-width: 72ch;
}

.kicker{
  margin: 0 0 12px 0;
  letter-spacing: .22em;
}

/* Headline: weniger "sprunghaft", besserer Zeilenrhythmus */
.hero h1{
  margin: 0 0 10px 0;
  line-height: 1.06;
  letter-spacing: -.9px;
  max-width: 28ch;
}

/* Lead näher an Headline, aber nicht kleben */
.lead{
  margin-top: 6px;
  max-width: 66ch;
}

/* CTA: nicht zu nah am Text, aber auch nicht zu tief */
.hero-cta{
  margin-top: 18px;
}

/* Proof-Zeile: näher an CTA, damit der Block als Einheit wirkt */
.hero-proof{
  margin-top: 14px;
}

/* Mobile: etwas weniger "Luft", damit alles auf einem Screen bleibt */
@media (max-width: 980px){
  .hero-shell{
    padding-block: 24px;
    gap: 14px;
  }
  .hero h1{
    max-width: 22ch;
  }
  .hero-cta{
    margin-top: 14px;
  }
}
/* Secondary CTA unter Hero-Box – zentriert & transparent */
.hero-secondary-cta{
  margin-top: 16px;

  display: flex;
  justify-content: center; /* horizontal zentriert */
  align-items: center;

  background: transparent; /* explizit transparent */
}

/* Bild-Overlay: nutzt deinen bestehenden Hero-Background weiter */
.hero::before{
  content:"";
  position:absolute;
  inset:0;

  transform: scaleX(-1);
  background-image: url("assets/img/logo/hero-banner-ai.png");
  background-repeat: no-repeat;
  background-position: center center;  /* vertikal + horizontal zentriert */
  background-size: 100% auto;          /* volle Breite */

  opacity: 0.10;                       /* Stärke des Wasserzeichens */
  filter: grayscale(100%) contrast(1.05);
  mix-blend-mode: screen;              /* verschmilzt mit Blau (alternativ: overlay/multiply) */

  pointer-events:none;
  z-index:0;
}

/* =========================
   HERO: Mobile ohne Background Image
   ========================= */
@media (max-width: 680px){
  .hero::before{
    content: none;          /* entfernt das Pseudo-Element komplett */
    background-image: none; /* doppelte Sicherheit */
  }
}

/* Inhalt über das Wasserzeichen heben */
.hero > .container{
  position: relative;
  z-index:1;
}

/* === Kontakt (Variante B): ein großes Panel statt Formular === */
.contact-one{
  margin-top: 18px;
}

/* großer Rahmen / Panel */
.contact-panel{
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 16px 22px;

  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  padding: 16px;
}

/* Linke Box (deine bestehende contact-info bleibt optisch gleich, nur ohne Außenabstand) */
.contact-panel .contact-info{
  box-shadow: none;
  border: 1px solid rgba(255,255,255,.14);
}

/* Rechte Seite: Aktionen / Text */
.contact-actions-panel{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding: 16px;
}

.contact-actions-panel h3{
  margin: 0 0 10px 0;
  color: #fff;
  letter-spacing: -.2px;
}

.contact-actions-text{
  margin: 0 0 14px 0;
  color: rgba(255,255,255,.84);
  max-width: 70ch;
}

/* Button-Reihe */
.contact-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

/* Bullets */
.contact-bullets{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,.80);
  font-size: 14px;
}
.contact-bullets li{ margin: 6px 0; }

/* Datenschutz-Hinweis in dunkel */
.contact-actions-panel .legal-hint{
  margin: 14px 0 0 0;
  color: rgba(255,255,255,.78);
  font-size: 13px;
}
.contact-actions-panel .legal-hint a{
  color:#fff;
  text-decoration: underline;
}

/* Responsive: alles untereinander */
@media (max-width: 980px){
  .contact-panel{
    grid-template-columns: 1fr;
  }
}
/* === Swipe Gallery (Referenzen) === */
.swipe-gallery{
  position: relative;
  margin-top: 14px;
}

.swipe-track{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 10px 2px;
  -webkit-overflow-scrolling: touch;
}

.swipe-track::-webkit-scrollbar{ height: 10px; }
.swipe-track::-webkit-scrollbar-thumb{
  background: rgba(1,21,91,.18);
  border-radius: 999px;
}
.swipe-track::-webkit-scrollbar-track{
  background: rgba(1,21,91,.06);
  border-radius: 999px;
}

.swipe-item{
  scroll-snap-align: start;
  border: 1px solid rgba(1,21,91,.12);
  border-radius: 16px;
  background: #fff;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
  width: min(260px, 72vw);
  box-shadow: 0 12px 26px rgba(1,21,91,.10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.swipe-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(1,21,91,.14);
  border-color: rgba(0,103,187,.20);
}

.swipe-item img{
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* Pfeile (Desktop) */
.swipe-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(1,21,91,.18);
  background: rgba(255,255,255,.92);
  color: var(--primary);
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(1,21,91,.12);
  backdrop-filter: blur(6px);
}

.swipe-btn:hover{ border-color: rgba(0,103,187,.35); }
.swipe-btn.prev{ left: -10px; }
.swipe-btn.next{ right: -10px; }

@media (max-width: 980px){
  .swipe-btn{ display: none; }
  .swipe-item{ width: min(240px, 78vw); }
}

/* === Lightbox === */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
}
.lightbox.is-open{ display: block; }

.lightbox-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
}

.lightbox-dialog{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}

.lightbox-figure{
  margin: 0;
  width: min(1100px, 94vw);
  max-height: min(78vh, 820px);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 70px rgba(0,0,0,.40);
  position: relative;
}

.lightbox-img{
  width: 100%;
  height: 100%;
  max-height: min(78vh, 820px);
  object-fit: contain;
  background: rgba(0,0,0,.22);
  display: block;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next{
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.35);
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lightbox-close{ top: 14px; right: 14px; }
.lightbox-prev{ left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox-next{ right: 14px; top: 50%; transform: translateY(-50%); }

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{
  background: rgba(0,0,0,.55);
}

.gallery-block{
  margin-top: 18px;
}

.gallery-head{
  margin-bottom: 10px;
}

.gallery-head h3{
  margin: 0 0 6px 0;
  color: var(--primary);
  letter-spacing: -.2px;
}

.gallery-desc{
  margin: 0;
  color: var(--muted);
  max-width: 85ch;
  font-size: 14px;
}

/* === Galerie-Trenner zwischen Referenzen === */
.gallery-block{
  position: relative;
  padding-top: 18px;
}

/* Linie nur zwischen Galerien, nicht vor der ersten */
.gallery-block + .gallery-block::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(1,21,91,.18),
    transparent
  );
}

/* ===== Legal Pages (Impressum/Datenschutz) ===== */
.legal-page .legal-content{
  max-width: 85ch;
}

.legal-page .legal-content h3{
  margin: 18px 0 8px 0;
  color: var(--primary);
  letter-spacing: -.2px;
}

.legal-page .legal-content p{
  margin: 0 0 12px 0;
  color: var(--text);
}

.legal-page .legal-content address{
  font-style: normal;   /* kein kursiv */
  margin: 0 0 12px 0;
  line-height: 1.65;
  color: var(--text);
}
/* Footer eigenständig machen (auch für Impressum/Datenschutz) */
.site-footer{
  border-top: 1px solid rgba(1,21,91,.12);
  margin-top: clamp(40px, 6vw, 72px);
}
/* Legal pages: Footer-Wrap ohne Section-Padding, damit es wie auf index wirkt */
.footer-wrap{
  padding: 0;
}

/* =========================================================
   TEAM – ÜBER UNS (Variante 1) – CLEAN + 2 Stellschrauben
   Stellschrauben:
   - Desktop/Tablet: --team-desktop-h
   - Mobile:         --team-mobile-h
   ========================================================= */

#ueber-uns{
  --team-desktop-h: 360px; /* <- DESKTOP HÖHE: ändere NUR das */
  --team-mobile-h:  260px; /* <- MOBILE  HÖHE: ändere NUR das */
}

#ueber-uns .team-block{
  margin-top: 22px;
}

/* ---------- Teamfoto (Banner) ---------- */
#ueber-uns .team-banner{
  margin: 0 0 14px 0;
}

/* Desktop: kein Scroll nötig */
#ueber-uns .team-banner__scroll{
  overflow: visible;
}

/* Frame: Look wie Panels */
#ueber-uns .team-banner__frame{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}

/* Desktop/Tablet: Höhe über eine Stellschraube */
#ueber-uns .team-banner__frame img{
  width: 100%;
  height: var(--team-desktop-h);
  object-fit: cover;
  object-position: center 12%;
  display:block;
  opacity: .92;
  filter: saturate(.95) contrast(1.03);
}

#ueber-uns .team-banner figcaption{
  margin-top: 8px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.35;
}

/* ---------- Ansprechpartner Cards ---------- */
#ueber-uns .team-cards{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 22px;
  align-items: start;
}

#ueber-uns .team-card{
  display:flex;
  gap: 14px;
  align-items:flex-start;

  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  padding: 16px;

  box-shadow: 0 12px 28px rgba(0,0,0,.10);
}

/* Einzelfotos (Größe hier einstellen, wenn nötig) */
#ueber-uns .team-card__avatar{
  width: 120px;
  height: 120px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
}

#ueber-uns .team-card__avatar img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center 14%;
  display:block;
}

#ueber-uns .team-card__avatar img.focus-yulia{ object-position: center 10%; }
#ueber-uns .team-card__avatar img.focus-alex{ object-position: center 14%; }

#ueber-uns .team-card__name{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.2px;
  color: #fff;
}

#ueber-uns .team-card__role{
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(255,255,255,.82);
}

#ueber-uns .team-card__body p{
  margin: 10px 0 0 0;
  color: rgba(255,255,255,.84);
  line-height: 1.55;
}

/* Optional: gleiche Card-Höhe ohne <br> */
#ueber-uns .team-card__body{
  min-height: 140px;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  #ueber-uns .team-cards{
    grid-template-columns: 1fr;
  }
  #ueber-uns .team-card__avatar{
    width: 130px;
    height: 130px;
  }
}

/* Mobile: Teamfoto horizontal scrollbar + volle Sichtbarkeit (contain) */
@media (max-width: 680px){
  #ueber-uns .team-banner__scroll{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }

  #ueber-uns .team-banner__scroll::-webkit-scrollbar{ height: 10px; }
  #ueber-uns .team-banner__scroll::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.22);
    border-radius: 999px;
  }
  #ueber-uns .team-banner__scroll::-webkit-scrollbar-track{
    background: rgba(255,255,255,.10);
    border-radius: 999px;
  }

  /* Breite wird von eurem JS gesetzt: --team-scroll-w */
  #ueber-uns .team-banner__frame{
    width: var(--team-scroll-w, 140vw);
  }

  /* Mobile: Höhe über zweite Stellschraube */
  #ueber-uns .team-banner__frame img{
    height: var(--team-mobile-h);
    object-fit: contain;
    background: rgba(0,0,0,.22);
    filter: none;
    opacity: 1;
  }
}