/* ================= HERO CONTROL (zentral, variabel, konfliktfrei) ================= */
/* Default-Variablen für Fokuspunkt und Zoom */
:root {
  --hero-x: 50%; /* Fokuspunkt X (0% = links, 100% = rechts) */
  --hero-y: 50%; /* Fokuspunkt Y (0% = oben, 100% = unten) */
  --hero-scale: 1; /* Zoomfaktor (1 = 100%) */
  --hero-fit: cover;
  --hero-width: 100vw; /* Standardbreite Hero-Container */
  --hero-max-width: 1200px; /* Maximalbreite Hero-Container */
  --hero-aspect: 16/9; /* Seitenverhältnis */
  --hero-height: 60vh; /* kleiner = Verlauf beginnt/endet höher */
  --hero-bottom: 0px;
  --nav-height: 72px;
}

@media (max-width: 1235px) {
  :root {
    --hero-width: 100vw;
    --hero-max-width: 100vw;
    --hero-aspect: 1/1; /* z.B. quadratisch auf Mobil */
    --hero-scale: 1;
  }
}

/* Hero-Container zentral und responsiv */
.hero {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  min-height: clamp(320px, 60vh, 720px);
  max-height: 88vh;
  /* aspect-ratio entfernt */
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Position the hero directly below the fixed header/navigation.
  The JS updates --nav-height on load/resize, so this keeps the
  hero's top edge flush under the header across viewports. */
.hero { margin-top: var(--nav-height, 64px); }

/* ===== HERO: 16:9 Bildbereich, immer gleiches Seitenverhältnis ===== */
.hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  display: block;
  /* Entferne alle height/min-height/max-height/Media-Query/Display-Flex-Regeln */
}
.hero > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fallback für Browser ohne aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
  .hero { height: 0; padding-top: 56.25%; position: relative; }
  .hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}

/* Entferne alle widersprüchlichen/alten Regeln für .hero, .hero img, .hero-content, .hero-media, .hero-gap-bg usw. */
.hero,
.hero-content,
.hero-media,
.hero-media img,
.hero img,
.hero > .hero-media,
.hero > .hero-content,
.hero-gap-bg {
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  aspect-ratio: unset !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  overflow: visible !important;
  background: none !important;
  isolation: auto !important;
  align-items: unset !important;
  justify-content: unset !important;
  border: none !important;
}

/* HERO-MEDIA: Bildcontainer füllt den Hero-Container */
.hero-media {
  position: relative;
  height: 100%;
  width: 100%;
  margin: 0;
  display: block;
  z-index: 0;
  overflow: hidden;
  background: #000;
  pointer-events: none;
  user-select: none;
}

/* Overlay für Hero-Media */
.hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.35));
  transition: opacity .4s ease;
  z-index: 3;
}
.hero-media.loaded::before {
  opacity: 0;
}

/* Optional: Overlay-Element für weiteren Verlauf */
.hero-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35));
  mix-blend-mode: normal;
}

/* HERO-Bild: Endbild und Placeholder */
.hero-media img.hero-endbild,
.hero-media img.hero-placeholder {
  /* Place the image so the desired focus point sits at the viewport center
     and scale around that point. Using translate(-50%,-50%) keeps the
     focus stationary while scaling. */
  position: absolute;
  left: var(--hero-x, 50%);
  top: var(--hero-y, 50%);
  transform: translate(-50%, -50%) scale(var(--hero-scale, 1));
  transform-origin: center center;

  /* Ensure the image always covers the container even when scaled */
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;

  object-fit: cover;
  object-position: var(--hero-x, 50%) var(--hero-y, 50%);
  display: block;
  margin: 0;
  background: #000;
  z-index: 2;
  filter: none;
  transition: transform 0.36s cubic-bezier(.2,.9,.3,1), opacity 0.6s cubic-bezier(.4,0,.2,1);
}

/* Layer für Endbild und Placeholder */
.hero-media img.hero-endbild {
  z-index: 2;
  opacity: 1;
  pointer-events: none;
  user-select: none;
  background: #111;
}
.hero-media img.hero-placeholder {
  z-index: 1;
  opacity: 1;
  filter: blur(18px) saturate(1.2) brightness(1.1);
  pointer-events: none;
  user-select: none;
  background: #111;
}
.hero-media.loaded .hero-placeholder { opacity: 0; }
.hero-media.loaded .hero-endbild { opacity: 1; }

/* Responsive Anpassungen */
@media (max-width: 625px) {
  .hero {
    max-width: 100vw;
    min-height: 68svh;
    aspect-ratio: 1/1;
  }
  .hero-media {
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

/* Konfliktregel: Deaktiviere alle alten Hero-Bild-Overrides */
.hero-media img,
.hero-media picture,
.hero-media {
  filter: none !important;
  transform: none !important;
  object-fit: var(--hero-fit, cover) !important;
  object-position: var(--hero-x, 50%) var(--hero-y, 50%) !important;
  /* entfernt: width: 50%, object-fit: contain, top/left, scale(0.5) etc. */
}
/* Impressum & Datenschutz: Text mittig und Hintergrund wie Mainpage */
.legal-center {
  text-align: center;
}
.legal-bg {
  min-height: 100vh;
  background-color: var(--bg-soft) !important;
  background-image: none !important;
  background-repeat: no-repeat;
}

/* Footer auf rechtlichen Seiten transparent, damit kein Balken entsteht */
.legal-bg .footer {
  background: transparent !important;
  border-top: none !important;
}
.center-link {
  margin-top: 1.25rem;
}
/* Footer-Links mittig, mit gleichmäßigem Abstand und größerem Abstand zwischen den Links */
.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.3em; /* ca. 15% mehr als Standard 2em */
  margin: 18px 0 10px 0;
  text-align: center;
}

.footer-dot {
  font-size: 1.1em;
  color: var(--text);
  user-select: none;
  pointer-events: none;
  display: inline-block;
  text-align: center;
  line-height: 1;
}
/* Hero-Bild: Vermeide breite Entschärfung von transform für hero-spezifische Bilder.
   Alle generischen Bilder bleiben un-transformiert, aber die spezialisierten
   Hero-Bilder (.hero-endbild, .hero-placeholder) dürfen transform: scale() nutzen. */
.hero-media img{
  filter: none !important;
}

/* Non-hero images must not be transformed */
.hero-media img:not(.hero-endbild):not(.hero-placeholder) {
  transform: none !important;
}

@media (min-width: 1236px){
  .hero-media img:not(.hero-endbild):not(.hero-placeholder) { filter: none !important; transform: none !important; }
}
@media (max-width: 1235px){
  .hero-media img:not(.hero-endbild):not(.hero-placeholder) { filter: none !important; transform: none !important; }
}
hr.thin-divider {
  border: none !important;
  height: 1px !important;
  background: rgba(255,255,255,0.08) !important;
  margin: 2rem 0 !important;
}
/* --- Basics --- */
:root{
  --bg:#0f1518;
  --bg-soft:#171e22;
  --text:#e9f1f2;
  --muted:#b8c2c7;
  --accent:#00bfc1;
  --card:#222b31;
  --shadow:0 10px 30px rgba(0,0,0,.35);

  /* Hero sizing (einfach anpassen, falls du andere Höhe willst) */
  --hero-height: 80vh; /* kleiner = Verlauf beginnt/endet höher */

  --hero-blur-desktop: 2.2px;
  --hero-blur-mobile: 1px;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background-color: var(--bg-soft);
  /* Globalen Body-Gradient entfernen, damit unter dem Hero kein schwarzer Bereich entsteht. */
  background-image: none !important;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: 0 0;
  background-attachment: scroll;
  background-clip: border-box;
  background-origin: padding-box;
  color: var(--text);
  font-family: Inter, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* Mobile: anpassen, falls Hero auf Mobil größer/kleiner ist */
@media (max-width: 1235px){
  html,body{ background-image: none !important; }
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Container */
.container{width:min(1200px,92%);margin-inline:auto}

/* --- Header --- */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  background: #101416;
  z-index: 100;
}
.header-inner{position:relative;display:flex;align-items:center;justify-content:flex-end;min-height:64px}

/* --- Navigation Layout & Hamburger --- */
.main-nav {
  display: flex !important;
  gap: 2.2rem;
  align-items: center;
  font-size: 1.08em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-left: calc(20px + auto); /* ersetzt: margin-left: auto; */
  /* ↑ 20px nach links verschoben, auto bleibt für Flex-End */
  position: static;
  background: none;
  opacity: 1;
  pointer-events: auto;
  box-shadow: none;
  margin-right: 35px;
}
.nav-link {
  position: relative;
  color: #f6ffff;
  opacity: 0.92;
  padding: 0 0 4px 0;
  text-decoration: none;
  font-weight: 700;
  background: none;
  box-shadow: none;
}
.nav-link:hover,
.nav-link.active {
  color: #fff;
  opacity: 1;
  /* keine Animation */
}
.nav-link {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  transition: color 0.2s;
}

/* Animierter Strich unter Menüpunkt */
.nav-link::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0.3px;
  width: 0%;
  background: var(--accent);
  /* Glow dünner und mit weniger Deckkraft */
  box-shadow: 0 0 2px 0.5px rgba(200,255,255,0.12), 0 0 1px 0.2px rgba(200,255,255,0.09);
  /* ↑ heller (mehr weiß/blau), weniger Deckkraft */
  border-radius: 2px;
  opacity: 0.95;
  transition: width 0.32s cubic-bezier(.4,0,.2,1), box-shadow 0.2s, background 0.2s;
  pointer-events: none;
  z-index: 1;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
  background: var(--accent);
  /* Glow beim Hover/Aktiv ebenfalls dünner und transparenter */
  box-shadow: 0 0 3px 3px rgba(200,255,255,0.18), 0 0 1.5px 0.5px rgba(200,255,255,0.13);
  /* ↑ heller (mehr weiß/blau), weniger Deckkraft */
}


/* Hamburger-Menü (Mobile) */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  margin-left: 1.5rem;
  z-index: 11;
  height: 44px;
  width: 44px;
  /* transition: none; */ /* entfernt */
}

.nav-toggle-box {
  display: inline-block;
  position: relative;
  width: 28px;
  height: 22px;
}

.nav-toggle-inner,
.nav-toggle-inner::before,
.nav-toggle-inner::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 4px;
  background: #fff;
  border-radius: 2px;
  /* transition: none !important; */ /* entfernt */
}

.nav-toggle-inner {
  top: 50%;
  transform: translateY(-50%);
}

.nav-toggle-inner::before {
  content: "";
  top: -9px;
}

.nav-toggle-inner::after {
  content: "";
  top: 9px;
}

/* Backdrop wird unten definiert (einheitlich) */

/* Mobile Navigation (einheitlicher Breakpoint ≤1235px) */
@media (max-width: 1235px) {
  /* Burger oben rechts sichtbar */
  .nav-toggle { display: inline-flex; align-items:center; position:absolute; right:16px; top:10px; }

  /* Modal in der Mitte des Bildschirms */
  .main-nav {
    position: fixed;
    left: 50%;
  top:600px;
  transform: translateX(-50%);
    width: 70vw;
    max-width: 420px;
    max-height: 90vh;      /* falls sehr klein, nicht über den Bildschirm hinausragen */
    display: none !important;
    flex-direction: column;
    gap: 20px; /* größerer Abstand */
    padding: 28px 28px 22px; /* ~50% mehr Padding */
    background: rgba(16,20,22,0.90); /* 80% Deckkraft */
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 18px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.55);
    z-index: 10010; /* über Backdrop */
    text-align: center;
    text-transform: none; /* gleiche Schrift wie der restliche Text */
    align-items: center; /* Inhalte auch horizontal zentrieren */
  }
  .main-nav.is-open { display: flex !important; }

  /* Strong override: ensure mobile nav sits at the requested vertical offset */
  .site-header .header-inner .main-nav {
    top: 600px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* TEMP DEBUG: set `document.body.classList.add('debug-nav-show')` in Console to force-show the mobile nav
     This is non-invasive: it only applies when the body has the class and can be removed anytime. */
  body.debug-nav-show .main-nav {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    margin-top: 0 !important;
    outline: 2px dashed rgba(255,60,60,0.95) !important;
    background: rgba(16,20,22,0.95) !important;
  }

  /* Links im Modal groß und klar lesbar */
  .main-nav .nav-link{
    color:#fff;
    opacity:1;
    font-weight:700;
    letter-spacing:.02em;
    font-size: clamp(1.2rem, 2.6vw, 1.7rem);
    line-height: 1.35;
    padding: 12px 6px;
    display: block;
    width: 100%;
    background: none;
    box-shadow: none;
    transition: color 0.18s, text-shadow 0.18s, filter 0.18s;
    transform: none !important;
    text-shadow: none;
  }
  .main-nav .nav-link:hover,
  .main-nav .nav-link:focus {
    color: #fff;
    filter: brightness(1.22);
    text-shadow: 0 0 12px rgba(234,252,252,0.22), 0 0 2px #fff;
    background: none !important;
    box-shadow: none !important;
    transition: color 0.18s, text-shadow 0.18s, filter 0.18s;
    outline: none;
  }
  .main-nav .nav-link::after,
  .main-nav .nav-link::before {
    display: none !important;
    content: none !important;
  }
  .main-nav .nav-link:hover,
  .main-nav .nav-link.active {
    color: #fff;
    background: none !important;
    box-shadow: 0 0 8px 1.5px rgba(234,252,252,0.18);
    filter: brightness(1.18);
    transition: color 0.18s, box-shadow 0.18s, filter 0.18s;
    transform: none !important;
  }

  /* MOBILE: animations completely disabled for burger menu links */
  .main-nav .nav-link,
  .main-nav .nav-link:hover,
  .main-nav .nav-link:focus {
    -webkit-transition: none !important;
    transition: none !important;
    text-shadow: none !important;
    filter: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .main-nav .nav-link::after,
  .main-nav .nav-link::before {
    display: none !important;
    content: none !important;
  }

  /* Sicherstellen, dass mobile Nav-Link Transitions nicht global deaktiviert werden */
  .main-nav .nav-link,
  .main-nav .nav-link:hover,
  .main-nav .nav-link:focus {
    -webkit-transition: color 0.18s !important;
    transition: color 0.18s, text-shadow 0.18s, filter 0.18s !important;
  }

  /* Backdrop zum Klick‑außerhalb: sichtbar, aber ohne zusätzliche Tönung */
  .menu-backdrop{ display:block; position:fixed; inset:0; background:transparent; opacity:1; pointer-events:none; z-index: 10000; }
  .menu-backdrop.is-visible{ pointer-events:auto; }

  /* Toggle verwandelt sich in ein X beim Öffnen */
  .nav-toggle[aria-expanded="true"] .nav-toggle-inner,
  .nav-toggle[aria-expanded="true"] .nav-toggle-inner::before,
  .nav-toggle[aria-expanded="true"] .nav-toggle-inner::after{ opacity:0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-box::after{
    content:"×";
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:36px; line-height:1; font-weight:800; /* ~50% größer */
  }
}

/* Entferne alle Animationen für Hamburger-Button */
.main-nav.is-open ~ .nav-toggle .nav-toggle-inner,
.main-nav.is-open ~ .nav-toggle .nav-toggle-inner::before,
.main-nav.is-open ~ .nav-toggle .nav-toggle-inner::after {
  background: #fff;
  transform: none !important;
  transition: none !important;
}

/* --- Hero --- */
.hero {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  min-height: clamp(320px, 60vh, 720px);
  max-height: 88vh;
  /* aspect-ratio entfernt */
  overflow: hidden;
  isolation: isolate;
}

/* HERO-MEDIA: Bildcontainer füllt den Hero-Container */
.hero-media {
  position: relative;
  height: 100%;
  width: 100%;
  margin: 0;
  display: block;
  z-index: 0;
  overflow: hidden;
  background: #000;
  pointer-events: none;
  user-select: none;
}

/* Overlay für Hero-Media */
.hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.35));
  transition: opacity .4s ease;
  z-index: 3;
}
.hero-media.loaded::before {
  opacity: 0;
}

/* Optional: Overlay-Element für weiteren Verlauf */
.hero-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35));
  mix-blend-mode: normal;
}

/* HERO-Bild: Endbild und Placeholder */
.hero-media img.hero-endbild,
.hero-media img.hero-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--hero-fit, cover);
  object-position: var(--hero-x, 50%) var(--hero-y, 50%);
  display: block;
  margin: 0;
  background: #000;
  filter: none;
  transform: none;
  transition: opacity 0.6s cubic-bezier(.4,0,.2,1);
  max-width: none;
  max-height: none;
}

/* Layer für Endbild und Placeholder */
.hero-media img.hero-endbild {
  z-index: 2;
  opacity: 1;
  pointer-events: none;
  user-select: none;
  background: #111;
}
.hero-media img.hero-placeholder {
  z-index: 1;
  opacity: 1;
  filter: blur(18px) saturate(1.2) brightness(1.1);
  pointer-events: none;
  user-select: none;
  background: #111;
}
.hero-media.loaded .hero-placeholder { opacity: 0; }
.hero-media.loaded .hero-endbild { opacity: 1; }

/* Hero-Text: Overlay mittig im Container */
.hero-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  margin: 0;
  padding: 8vh 2vw 0 2vw;
  pointer-events: auto;
  background: none;
  height: 100%;
  min-height: 0;
}

/* Positioniere den Text im oberen Viertel */
.hero-content {
  /* Abstand von oben: 8vh (ca. 1/4 von 32vh, flexibel) */
  padding-top: 8vh;
  /* Optional: falls du es noch höher willst, z.B. 6vh */
  /* padding-top: 6vh; */
  justify-content: flex-start;
}

/* --- HERO: Optimiert für Cross-Device & Accessibility --- */
.hero {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16/9;
  min-height: 0;
  height: auto;
  overflow: hidden;
  isolation: isolate;
}
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}
.hero-media picture,
.hero-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: none !important;
  transform: none !important;
  background: #000;
}
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  background: #000;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  background: #000;
  filter: none !important;
  transform: none !important;
  margin: 0;
  position: static;
  left: auto;
  top: auto;
  max-width: 100%;
  max-height: 100%;
  transition: none !important;
}
.hero-title {
  font-size: clamp(2.2rem, 4.2vw, 3.2rem);
  line-height: 1.1;
  margin: 0 0 .6rem 0;
  text-shadow: 0 6px 24px rgba(0,0,0,.5);
}
.hero-sub {
  max-width: min(820px, 90vw);
  margin-inline: auto;
  color: var(--muted);
  font-size: 1.18rem;
  line-height: 1.5;
}
.hero-cta {
  position: absolute;
  inset-inline: 0;
  bottom: 4.5vh;
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  z-index: 4;
}

/* --- HERO: Desktop --- */
@media (min-width: 1236px) {
  .hero {
    min-height: 80vh;
    height: 80vh;
    max-height: 900px;
  }
  .hero-content {
    padding-top: 10vh;
    padding-bottom: 8vh;
  }
  .hero-media img,
  .hero-media picture {
    min-height: 400px;
    max-height: 900px;
  }
}

/* --- HERO: Mobile --- */
@media (max-width: 1235px) {
  .hero {
    max-width: 100vw;
    min-height: 68svh;
    aspect-ratio: 1/1;
  }
  .hero-content {
    margin-top: 10vh;
    padding-inline: 16px;
  }
  .hero-title { font-size: clamp(2rem,8vw,2.6rem); }
  .hero-sub { font-size: 1rem; }
}

/* Buttons vereinheitlicht (rechter Style) */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;border-radius:999px;padding:.9rem 1.25rem;transition:all .2s ease;
  border:2px solid rgba(255,255,255,.8);background:rgba(0,0,0,.35);color:#fff;backdrop-filter:blur(4px)}
.btn:hover{border-color:var(--accent);box-shadow:0 0 0 4px rgba(0,191,193,.15)}

/* --- Sections --- */
.section{padding:72px 0;background:var(--bg)}
.section-dark{background:var(--bg-soft)}
.section-title{text-align:center;font-size:clamp(1.6rem,2.4vw,2rem);margin:0 0 24px 0}

/* Referenzen ohne oberen Abstand, bündig unter dem Hero */
#references{ padding-top: 0; margin-top: 200px; }

/* Hero-Fade deaktivieren, damit kein dunkles Overlay unter dem Hero bleibt */
:root{ --hero-fade: 0px; }
@media (max-width:760px){ :root{ --hero-fade: 0px; } }

/* Schwarzer Bereich zwischen Hero und Referenzen */
.hero-gap-bg {
  width: 100vw;
  min-height: 0px; /* Passe ggf. an, damit die Lücke immer abgedeckt ist */
  height: 0px;
  background: #000;
  margin: 0;
  padding: 0;
  border: none;
  z-index: 0;
  position: relative;
}




/* Referenzkarten (Animation unverändert/klassisch) */
.cards{display:grid;gap:22px}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 35px rgba(0,0,0,.45)}
.card-hit{display:block;padding:14px}
.card-media.placeholder{height:220px;border-radius:10px;border:2px dashed rgba(0,191,193,.35);
  display:grid;place-items:center;color:var(--muted);font-size:.9rem}
.card-title{margin:.9rem 0 .25rem 0}
.card-sub{margin:0;color:var(--muted)}

/* Leistungen */
.list{list-style:none;padding:0;margin:0 auto;max-width:900px;display:grid;gap:.65rem}
.list li{border-bottom:1px solid rgba(255,255,255,.06);padding:.65rem 0}
.list strong{color:#eafcfc}

/* Unsere Leistungen – immer mittig zentriert (Web und Mobile) */
.section-services .list{
  justify-items: center;
  text-align: center;
}

/* Unsere Leistungen — auf Desktop zusätzlich ohne Zeilenumbruch */
@media (min-width: 1236px) {
  .section-services .list li{
    white-space: nowrap;   /* Keine Zeilenumbrüche auf Desktop */
  }
}

/* Über mich */
.about-copy{max-width:740px;margin:0 auto;color:var(--muted);text-align:center}

/* Kontakt */
.contact-sub{text-align:center;color:var(--muted);margin:4px 0 18px}
.contact-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  margin-top: 6px;
}
.contact-icon img {
  width: 44px;
  height: 44px;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
  transition: transform .2s ease, filter .2s ease;
}
.contact-icon:hover img {
  transform: translateY(-1px);
  filter: drop-shadow(0 0 18px rgba(0,191,193,.45));
}

/* Footer: gleiche Icons */
.footer .contact-icons {
  margin-top: 6px;
  margin-bottom: 8px;
  border: none;
  padding-bottom: 0;
  justify-content: center;
  gap: 26px;
}

/* Footer */
.footer{padding:28px 0;border-top:1px solid rgba(255,255,255,.06);background:var(--bg-soft);color:var(--muted);text-align:center}

/* Footer: Abstand / Position der Legal‑Links (zentriert, etwas über dem unteren Rand) */
.footer .contact-icons{ margin-top:6px; display:flex; justify-content:center; gap:18px; }

.footer .legal-links-wrapper{
  max-width:720px;
  margin:14px auto 0;    /* hochgezogener Abstand vom Footer-Inner */
  padding-inline:6px;
  text-align:center;
}

.footer .legal-links{
  display:flex;
  justify-content:center;
  gap:80px;            /* mehr Abstand zwischen Impressum und Datenschutz */
  align-items:center;
}

.footer .legal-link{
  color: var(--text);  /* gleiche Farbe wie Headlines (weiß) */
  font-weight:700;     /* gleiche Gewichtung wie Überschriften */
  text-decoration:none;
  font-size:.95rem;
  white-space:nowrap;
}

.footer .legal-link:hover{ color:var(--text); text-decoration:underline; }

/* Falls noch Reste vorhanden: entferne link-Anordnung im Kontakt-Bereich */
#contact .legal-links { display:none !important; }

/* --- Responsive --- */
@media (max-width: 1235px){
  .cards.three{grid-template-columns:repeat(2,1fr)}
}
/* Zusätzlicher Breakpoint: ≤700px → 1 Spalte */
@media (max-width: 700px){
  .cards.three{grid-template-columns:1fr}
}
@media (max-width: 1235px){
  .header-inner{min-height:58px}
  .brand{height:58px}
  .brand img{height:28px}
  .main-nav{gap:16px;font-size:.88rem}
  .hero{max-width: 100vw; min-height: 68svh; aspect-ratio: 1/1;}
  .hero-content{margin-top:10vh; /* vorher 14vh — anpassen bei Bedarf */ padding-inline:16px}
  .hero-title{font-size:clamp(2rem,8vw,2.6rem)}
  .hero-sub{font-size:1rem}
  .hero-cta{bottom:3.5vh;gap:12px}
  .btn{padding:.8rem 1.1rem}
  /* Karten-Spaltenanzahl hier nicht setzen; unter 700px geregelt */
}

/* --- NOEL PATCH --- */
/* === NAV ganz nach rechts + Logo mittig (nur Header) === */
.site-header .header-inner.container{
  width:100vw !important;
  max-width:100vw !important;
  margin:0 !important;
  padding-right:6px !important;   /* auf 0 setzen, wenn exakt bündig gewünscht */
  padding-left:14px !important;
  justify-content:flex-end !important;
}
/* Logo bleibt absolut zentriert */
.site-header .brand{ position:absolute; left:50%; transform:translateX(-50%); }

/* === Referenzen-Animation: alte Variante (Lift + leichte Scale + Akzent-Glow) === */
.cards .card{
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.cards .card:hover, .cards .card:focus-within{
  transform: translateY(-4px) scale(1.015) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 18px 60px rgba(0,191,193,.25) !important; /* Akzent-Glow */
}

/* === Kontakt-Icons: alte Hover-Variante (leichter Lift, kein Scale) === */
.contact-icons .icon-link img{
  width:44px !important; height:44px !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)) !important;
  transition: transform .2s ease, filter .2s ease !important;
}
.contact-icons .icon-link:hover img{
  transform: translateY(-1px) !important;
  filter: drop-shadow(0 0 18px rgba(0,191,193,.45)) !important;
}

/* Mobile Hamburger icon (basis) */
.nav-toggle{display:none;border:0;background:transparent;padding:.35rem;margin-right:8px;cursor:pointer;z-index:100}
.nav-toggle-box{display:inline-block;width:34px;height:22px;position:relative}
.nav-toggle-inner, .nav-toggle-inner::before, .nav-toggle-inner::after{
  display:block;background:var(--text);height:2px;border-radius:2px;position:absolute;left:0;right:0;transition:transform .25s ease,opacity .2s ease;
}
.nav-toggle-inner{top:50%;transform:translateY(-50%)}
.nav-toggle-inner::before{content:"";top:-9px}
.nav-toggle-inner::after{content:"";top:9px}

/* alter 760px Overlay‑Block entfernt – ersetzt durch 700px Dropdown oben */

/* Backdrop für das Mobile-Overlay (Dimmer hinter dem Menü) */
.menu-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.50);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:9995;
}
.menu-backdrop.is-visible{
  opacity:1;
  pointer-events:auto;
}
/* Mobile Linkfarbe (≤1235px) */
@media (max-width:1235px){
  #main-nav .nav-link{ color:#fff !important; text-shadow:none; }
}

/* Sicherstellen: Burger-Icon sichtbar innerhalb des 1235px-Breakpoints */
@media (max-width:1235px){
  .nav-toggle{
    display:inline-flex !important;
    align-items:center;
    position:absolute;
    right:16px;
    top:10px;
    z-index:10010;
  }
}

/* Remove desktop blur and bottom cutoff for hero */
.hero-media{ inset:0; /* kein bottom cut */ }
/* Sicherstellen: auch in Media-Queries zurücksetzen */
@media (min-width: 1236px){
  .hero-media{ inset:0; }
  /* .hero-media img{ filter:none !important; } */
}
@media (max-width: 1235px){
  .hero-media{ inset:0; }
  /* .hero-media img{ filter:none !important; } */
}

/* Embedded pages (Impressum / Datenschutz) */
.page{
  position:fixed;
  inset:0;
  background:var(--bg);
  color:var(--text);
  z-index:10050;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:6.5rem 0 4rem;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  transition:opacity .28s ease, transform .32s cubic-bezier(.2,.9,.2,1);
}
.page-inner{ width:min(900px,92%); margin-inline:auto; background:transparent; position:relative; text-align:center; }
.page-hidden{ opacity:0; pointer-events:none; transform:translateY(6%); }
.page.is-open{ opacity:1; pointer-events:auto; transform:none; }

/* Close button */
.page-close{
  position:fixed;
  top:14px;
  right:16px;
  z-index:10060;
  background:transparent;
  border:1px solid rgba(255,255,255,.06);
  color:var(--text);
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
  font-size:1.05rem;
}

/* Page content typography */
.page .section-title{ margin-top:30px; margin-bottom:18px; }
.page .page-content{ color:var(--muted); line-height:1.6; }

/* Auf mobilen Geräten etwas mehr Abstand oben */
@media (max-width:1235px){
  .page{ padding-top:5.5rem; }
  .page-close{ top:10px; right:10px; }
}

/* --- Hintergrund: Sections transparent, damit body‑Verlauf durchscheint --- */
.section,
.section-dark,
.footer{
  background: transparent !important;
}

/* dezente, sehr dünne Trennlinien zwischen Sektionen (sichtbar als feine weiße Streifen) */
.section + .section,
.section + .section-dark,
.section.dark + .section,
.section.dark + .section.dark {
  position:relative;
}
.section + .section::before,
.section + .section-dark::before,
.section.dark + .section::before,
.section.dark + .section.dark::before{
  content:"";
  display:block;
  height:1px;
  width:100%;
  background:rgba(255,255,255,0.035); /* sehr fein, weißlich */
  margin:0 auto;
  position:absolute;
  top:0;
  left:0;
  z-index:2;
}

/* Entferne / überschreibe generische Linien */
.section + .section::before,
.section + .section-dark::before,
.section.dark + .section::before,
.section.dark + .section.dark::before {
  display: none !important;
}

/* Gezielt: dickere Trennlinien (2px) nur an gewünschten Stellen */
#references + #services::before,
#services + #about::before,
#about + #contact::before {
  content: "";
  display: block;
  height: 2px; /* doppelt so dick wie vorher */
  width: 100%;
  background: rgba(255,255,255,0.055); /* dezentes, weißes Band */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

/* gezielte 5px Trennlinie zwischen Referenzen (#references) und Unsere Leistungen (#services) */
#services { position: relative; } /* Parent für das ::before positionieren */

#services::before {
  display: none !important;
}

/* feine Trennlinie oberhalb der Footer‑Legal‑Links + etwas Abstand */
.footer .legal-links-wrapper{
  border-top:1px solid rgba(255,255,255,0.04);
  padding-top:12px;
  margin-top:10px; /* leicht angehoben */
}

/* kleine Trennlinie zwischen Icons und den Legal‑Links (falls Icons Bereich sichtbar) */
.footer .contact-icons{
  border-bottom:1px solid rgba(255,255,255,0.02);
  padding-bottom:12px;
  margin-bottom:8px;
}

/* Bei sehr dunklem Hintergrund: leichte Verstärkung der Linien auf Mobilgeräten */
@media (max-width:760px){
  .section + .section::before{ background:rgba(255,255,255,0.045); }
  .footer .legal-links-wrapper{ border-top-color: rgba(255,255,255,0.06); }
}

/* kleine optische Anpassung: ensure Footer‑links bleiben weiß */
.footer .legal-link{ color:var(--text) !important; }

/* Entferne alle Trennstriche / Linien (Override) */
.section + .section::before,
.section + .section-dark::before,
.section.dark + .section::before,
.section.dark + .section.dark::before,
#references + #services::before,
#services + #about::before,
#about + #contact::before {
  display: none !important;
}

/* generelle Border-Resets für Header / Footer / Lists / Platzhalter */
.site-header { border-bottom: none !important; }
.footer { border-top: none !important; background: transparent !important; }
.footer .legal-links-wrapper { border-top: none !important; }
.footer .contact-icons { border-bottom: none !important; }
.list li { border-bottom: none !important; }
.card-media.placeholder { border: none !important; }
hr, .divider, .line { display: none !important; }

/* Falls noch Reste durch before/after auftauchen */
*::before, *::after { border: none !important; background-image: none !important; }

.brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  height: 64px;
  z-index: 2;
}

.brand img {
  height: 38px;         /* Passt das Logo in die Leiste */
  max-height: 48px;     /* Optional: maximale Höhe */
  display: block;
  margin: 6px 0;        /* Abstand oben/unten innerhalb der Leiste */
  object-fit: cover;
}

.section-divider {
  border: none;
  border-top: 0.5px solid rgba(255,255,255,0.13); /* noch dünner */
  margin: 0;
  width: 100%;
  height: 0;
}

/* NAVIGATION: alte 'nav-mobile-forced'-Klasse entfernt – Steuerung rein via 1100px Media Query */

/* ====== Eigene Compositing-Layer für Performance & Debugging ====== */
.hero,
.hero-media,
.hero img {
  will-change: transform;
}

.site-header {
  will-change: transform;
}

.card {
  will-change: transform;
}