/* ============================================================
   schweiss-roboter.com Redesign, Startseite
   CI: Blau #005ea8, Dunkelblau #003f5c, Rot #dd3333
   Fonts: Teko (Headlines), Lato (Text)
   ============================================================ */

:root {
  --blau: #005ea8;
  --blau-hell: #1574c4;
  --blau-dunkel: #003f5c;
  --nacht: #071019;          /* fast schwarzes Blau fuer dunkle Sektionen */
  --nacht-2: #0b1a28;
  --hell: #f4fafd;           /* sehr helles Blau fuer helle Sektionen */
  --weiss: #ffffff;
  --rot: #dd3333;
  --rot-dunkel: #b82222;
  --text: #16222e;
  --text-hell: rgba(255, 255, 255, 0.82);
  --grau: #5b6b7a;
  --linie: rgba(0, 94, 168, 0.14);
  --linie-hell: rgba(255, 255, 255, 0.12);
  --font-display: "Teko", "Arial Narrow", sans-serif;
  --font-text: "Lato", Helvetica, Arial, sans-serif;
  --radius: 14px;
  /* Sektions-Farben: Standard = dunkle Sektion, .ist-hell kippt sie */
  --s-titel: #ffffff;
  --s-titel-em: #1574c4;
  --s-kicker: #ff6a5e;
  --s-text: rgba(255, 255, 255, 0.66);
  --s-text-stark: rgba(255, 255, 255, 0.88);
  --s-text-zart: rgba(255, 255, 255, 0.5);
  --s-linie: rgba(255, 255, 255, 0.12);
  --s-linie-zart: rgba(255, 255, 255, 0.07);
  --s-flaeche: rgba(255, 255, 255, 0.04);
  --s-flaeche-2: rgba(255, 255, 255, 0.03);
  --s-karte: rgba(255, 255, 255, 0.06);

  --nav-hoehe: 76px;
  --nav-abstand: 16px;                       /* Luft ueber der schwebenden Pille */
  --nav-gesamt: calc(var(--nav-hoehe) + var(--nav-abstand));
  --marquee-hoehe: 72px;
}

/* helle Sektion: kippt die Sektions-Variablen */
.ist-hell {
  --s-titel: #003f5c;
  --s-titel-em: #005ea8;
  --s-kicker: #dd3333;
  --s-text: #5b6b7a;
  --s-text-stark: #16222e;
  --s-text-zart: #8797a5;
  --s-linie: rgba(0, 94, 168, 0.16);
  --s-linie-zart: rgba(0, 63, 92, 0.1);
  --s-flaeche: #ffffff;
  --s-flaeche-2: rgba(0, 94, 168, 0.04);
  --s-karte: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Firefox: Daumen/Bahn in Markenfarben */
  scrollbar-color: var(--rot) var(--nacht-2);
  scrollbar-width: thin;
}

/* Chrome/Safari/Edge: gleiche Farben als eigene Scrollbar-Elemente */
::-webkit-scrollbar { width: 12px; height: 12px; }

::-webkit-scrollbar-track { background: var(--nacht-2); }

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--rot), var(--rot-dunkel));
  border-radius: 999px;
  border: 2px solid var(--nacht-2);
}

::-webkit-scrollbar-thumb:hover { background: var(--blau-hell); }

body {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--nacht);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.container {
  width: min(1200px, 100% - 48px);
  margin-inline: auto;
}

/* Sektionen clippen ueberbreite Deko, nicht html/body (sticky bleibt intakt) */
.section, .hero, .zahlen, .footer { overflow-x: clip; }

/* Anker-Spruenge landen sonst hinter dem fixen Header */
[id] { scroll-margin-top: calc(var(--nav-gesamt) + 12px); }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 300;
  background: var(--rot);
  color: #fff;
  padding: 10px 18px;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--blau-hell);
  outline-offset: 3px;
}

/* ============================================================
   HEADER
   ============================================================ */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: var(--nav-abstand) clamp(16px, 3vw, 32px) 0;
  /* eigener GPU-Layer, verhindert Flackern ueber animiertem Hintergrund.
     translate3d statt translateZ: erzwingt zuverlaessig einen eigenen
     Compositing-Layer, sonst zittert der backdrop-filter beim Scrollen */
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* eigener Stacking-Kontext, entkoppelt den Blur von Repaints darunter */
  isolation: isolate;
  contain: layout style;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

/* beim Runterscrollen sanft nach oben rausfahren */
.nav.ist-versteckt {
  transform: translate3d(0, calc(-100% - 10px), 0);
  opacity: 0;
  pointer-events: none;
}

.nav__inner {
  position: relative;               /* Bezug fuer das mittig positionierte Menue */
  width: min(1200px, 100%);
  margin-inline: auto;
  height: var(--nav-hoehe);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-left: clamp(18px, 3vw, 36px);
  padding-right: clamp(10px, 1.6vw, 18px);
  background: linear-gradient(180deg, rgba(7, 16, 25, 0.78), rgba(7, 16, 25, 0.55));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--linie-hell);
  border-radius: 999px;
  box-shadow: 0 18px 44px rgba(0, 10, 20, 0.35);
  /* zweiter GPU-Layer fuer den Blur-Container selbst */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.nav.ist-gescrollt .nav__inner {
  background: linear-gradient(180deg, rgba(7, 16, 25, 0.94), rgba(7, 16, 25, 0.88));
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 22px 50px rgba(0, 10, 20, 0.45);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex-shrink: 0;
}

/* Logo auf Kundenwunsch groesser. 88px Breite ergeben bei 120:63 rund 46px
   Hoehe und lassen in der 76px hohen Leiste oben und unten noch Luft. */
.nav__logo img { width: 88px; height: auto; }

@media (max-width: 380px) {
  .nav__logo img { width: 76px; }   /* damit der Burger nicht gedraengt wird */
}

/* Logo nur so breit wie das Bild, sonst reicht die Klickflaeche unsichtbar
   bis zur Navigation. Die rechte Gruppe schiebt den CTA an den Rand. */
.nav__logo { flex: 0 0 auto; }

.nav__rechts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 1 1 auto;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.9vw, 30px);
  /* linksbuendig direkt hinter dem Logo, Restbreite bleibt fuer den CTA.
     Die 24px gap der Pille zaehlen mit, deshalb nur wenig Zusatzabstand */
  flex: 1 1 auto;
  justify-content: flex-start;
  margin-left: clamp(0px, 0.6vw, 10px);
}

.nav__menu a {
  color: var(--text-hell);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  position: relative;
  padding: 6px 0;
  transition: color 0.25s ease;
}

.nav__menu a:not(.nav__cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--rot);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.nav__menu a:not(.nav__cta):hover { color: #fff; }
.nav__menu a:not(.nav__cta):hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__cta {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--rot);
  color: #fff !important;
  /* steht jetzt ausserhalb von .nav__menu, deshalb eigene Textformate */
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 10px 22px !important;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(221, 51, 51, 0.55);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.4s ease;
}

/* diagonaler Lichtstreif, faehrt beim Hover einmal durch */
.nav__cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav__cta:hover {
  background: var(--rot-dunkel);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px 0 rgba(221, 51, 51, 0.45);
}

.nav__cta:hover::before { left: 130%; }

.nav__cta:active { transform: translateY(0) scale(0.97); }

/* CTA und Direktkontakt im Klappmenue: auf dem Desktop verborgen,
   dort stehen sie im Header bzw. in der schwebenden Leiste rechts */
.nav__menu a.nav__menu-cta { display: none; }
.nav__menu .nav__direkt { display: none; }

.nav__direkt {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nav__direkt__titel {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.nav__direkt a {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 9px 0 !important;
  border-bottom: 0 !important;
  font-size: 15px !important;
  font-weight: 700;
  color: var(--text-hell);
}

.nav__direkt a svg { flex-shrink: 0; opacity: 0.7; }
.nav__direkt a:hover { color: #fff; }
.nav__direkt a:hover svg { opacity: 1; color: var(--rot); }

.nav__direkt__sozial {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.nav__direkt__sozial a {
  width: 40px;
  height: 40px;
  padding: 0 !important;
  justify-content: center;
  border: 1px solid var(--linie-hell);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 46px;
  height: 46px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--linie-hell);
  border-radius: 10px;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav__burger.ist-offen span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__burger.ist-offen span:nth-child(2) { opacity: 0; }
.nav__burger.ist-offen span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================================
   NACH-OBEN-BUTTON
   ============================================================ */

.nach-oben {
  position: fixed;
  right: 14px;
  bottom: 22px;
  z-index: 95;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linie-hell);
  border-radius: 999px;
  background: rgba(7, 16, 25, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  /* erst sichtbar, wenn weit genug gescrollt wurde */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) translateZ(0);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s 0.35s, border-color 0.3s ease, background 0.3s ease;
}

.nach-oben.ist-sichtbar {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) translateZ(0);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s 0s, border-color 0.3s ease, background 0.3s ease;
}

.nach-oben:hover {
  border-color: rgba(221, 51, 51, 0.7);
  background: var(--rot);
  box-shadow: 0 12px 30px rgba(221, 51, 51, 0.35);
}

.nach-oben:hover svg { animation: pfeilTipp 0.6s ease; }

@keyframes pfeilTipp {
  50% { transform: translateY(-3px); }
}

@media (max-width: 640px) {
  .nach-oben { width: 42px; height: 42px; right: 10px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .nach-oben { transition: opacity 0.2s ease, visibility 0s; transform: none; }
  .nach-oben.ist-sichtbar { transform: none; }
  .nach-oben:hover svg { animation: none; }
}

/* ============================================================
   SCHNELL-KONTAKT (schwebende Leiste rechts)
   ============================================================ */

.schnell-kontakt {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateZ(0);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 14px;
}

.schnell-kontakt__knopf {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  margin-left: auto;              /* Knopf klebt rechts, Label waechst nach links */
  background: rgba(7, 16, 25, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--linie-hell);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.schnell-kontakt__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  transition: color 0.3s ease;
}

/* Label ist eingeklappt (max-width 0) und faehrt bei Hover/Fokus aus */
.schnell-kontakt__label {
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: max-width 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, padding 0.45s ease;
}

.schnell-kontakt__knopf:hover,
.schnell-kontakt__knopf:focus-visible {
  border-color: rgba(221, 51, 51, 0.7);
  background: rgba(7, 16, 25, 0.95);
  box-shadow: 0 12px 30px rgba(221, 51, 51, 0.25);
}

.schnell-kontakt__knopf:hover .schnell-kontakt__label,
.schnell-kontakt__knopf:focus-visible .schnell-kontakt__label {
  max-width: 260px;
  opacity: 1;
  padding-left: 18px;
}

.schnell-kontakt__knopf:hover .schnell-kontakt__icon,
.schnell-kontakt__knopf:focus-visible .schnell-kontakt__icon { color: var(--rot); }

/* Mobil: kompakter und weiter unten, stoert den Daumenbereich nicht */
@media (max-width: 640px) {
  .schnell-kontakt { top: auto; bottom: 90px; transform: translateZ(0); padding-right: 10px; gap: 8px; }
  .schnell-kontakt__icon { width: 42px; height: 42px; }
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--nacht);
}

.hero__bild {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center; /* Brennerspitze im rechten Bilddrittel halten */
  animation: heroZoom 22s ease-out forwards;
}

@keyframes heroZoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 16, 25, 0.95) 0%, rgba(7, 16, 25, 0.84) 34%, rgba(7, 16, 25, 0.44) 64%, rgba(7, 16, 25, 0.58) 100%),
    linear-gradient(0deg, rgba(7, 16, 25, 0.92) 0%, rgba(7, 16, 25, 0) 30%),
    radial-gradient(ellipse 900px 600px at 78% 42%, rgba(0, 94, 168, 0.22), transparent 60%);
}

/* feines technisches Raster als Textur */
.hero__raster {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
}

/* aufsteigende Funken-Partikel */
.hero__funken { position: absolute; inset: 0; pointer-events: none; }

.hero__funken span {
  position: absolute;
  bottom: 18%;
  left: 70%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffb347;
  box-shadow: 0 0 10px 2px rgba(255, 150, 40, 0.75);
  opacity: 0;
  animation: funkeFlug 5s linear infinite;
}

.hero__funken span:nth-child(1) { left: 64%; animation-delay: 0s;    animation-duration: 4.6s; }
.hero__funken span:nth-child(2) { left: 71%; animation-delay: 0.7s;  animation-duration: 5.4s; width: 3px; height: 3px; }
.hero__funken span:nth-child(3) { left: 77%; animation-delay: 1.4s;  animation-duration: 4.2s; }
.hero__funken span:nth-child(4) { left: 83%; animation-delay: 2.1s;  animation-duration: 6s;   width: 3px; height: 3px; }
.hero__funken span:nth-child(5) { left: 68%; animation-delay: 2.8s;  animation-duration: 5s; }
.hero__funken span:nth-child(6) { left: 88%; animation-delay: 3.4s;  animation-duration: 4.4s; width: 2px; height: 2px; }
.hero__funken span:nth-child(7) { left: 74%; animation-delay: 4s;    animation-duration: 5.8s; width: 3px; height: 3px; }
.hero__funken span:nth-child(8) { left: 80%; animation-delay: 4.6s;  animation-duration: 4.8s; }

@keyframes funkeFlug {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }
  8%   { opacity: 1; }
  60%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-40px, -46vh) scale(0.4); }
}

.hero__inhalt {
  position: relative;
  z-index: 2;
  /* schmaler als die Header-Pille: mehr Luft aussen, dadurch ruecken
     Textblock und Galerie deutlich naeher zusammen */
  width: min(1110px, 100% - 96px);
  margin-inline: auto;
  padding-top: calc(var(--nav-gesamt) + 24px);
  padding-bottom: 120px;
}

.hero__grid {
  display: grid;
  /* erste Spalte folgt der realen (skalierten) Breite von .hero__links,
     sonst bleibt bei transform:scale Leerraum stehen und "gap" wirkt kaum */
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 1.8vw, 28px);
  align-items: center;
}


/* Textblock proportional verkleinern, bis er auf die Galerie-Hoehe passt.
   transform:scale erhaelt alle Verhaeltnisse (Kicker/Untertitel bleiben
   exakt so breit wie SCHWEISS), ohne jede Groesse einzeln neu zu rechnen. */
.hero__links {
  transform: scale(var(--hero-skala, 1));
  transform-origin: left center;
}

.hero__kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--rot);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 18px;
  white-space: nowrap;
  /* exakt so breit wie der Titelblock (3.75x die Titelgroesse),
     damit die Zeile buendig mit "MORGEN" endet */
  /* plus 0.22em: gleicht das Letterspacing hinter dem letzten Buchstaben aus */
  width: calc(clamp(262px, 32.9vw, 517px) + 0.22em);
  max-width: 100%;
}

/* Linie fuellt den Rest, der Text sitzt dadurch rechtsbuendig */
.hero__kicker-linie {
  flex: 1 1 auto;
  min-width: 24px;
  height: 2px;
  background: var(--rot);
  display: inline-block;
}

.hero__titel {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(70px, 8.78vw, 138px);
  line-height: 0.9;
  color: #fff;
  letter-spacing: 0.01em;
  margin-bottom: 0.083em;
}

.hero__zeile { display: block; }

/* ROBOTER auf exakt gleiche Breite wie SCHWEISS bringen (Groesse + Letterspacing) */
.hero__zeile--breit {
  font-size: 1.12em;
  letter-spacing: 0.032em;
}

/* kleine Zeile ueber dem grossen Markennamen, wie auf der Originalseite.
   Groesse in em an den Titel gekoppelt: so ist die Zeile auf JEDER
   Bildschirmbreite exakt so breit wie "SCHWEISS" darunter. */
.hero__untertitel {
  display: block;
  font-size: 0.228em;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.75);
  /* grosser Abstand nach unten, gleicht die Descender-Reserve von Teko aus,
     damit der Titelblock oben und unten optisch gleich viel Luft hat */
  margin-bottom: 0.655em;
}

.hero__titel em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.85);
}

/* "Roboter" wird sichtbar eingeschweisst: Kontur als Anriss,
   der weisse Text baut sich mit wanderndem Schweisspunkt auf */
.geschweisst {
  position: relative;
  display: inline-block;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.4);
}

.geschweisst::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #fff;
  -webkit-text-stroke: 0;
  clip-path: inset(0 100% 0 0);
  animation:
    schweissNaht 2.4s linear 1.2s forwards,
    schweissGlut 4s ease-out 1.2s forwards;
}

@keyframes schweissNaht {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 -4% 0 0); }
}

/* Nachgluehen: erst weiss-blau heiss, dann abkuehlen */
@keyframes schweissGlut {
  0%   { text-shadow: 0 0 20px rgba(150, 215, 255, 0.95), 0 0 46px rgba(0, 125, 187, 0.6); }
  70%  { text-shadow: 0 0 20px rgba(150, 215, 255, 0.85), 0 0 40px rgba(0, 125, 187, 0.5); }
  100% { text-shadow: 0 0 0 rgba(150, 215, 255, 0); }
}

/* der wandernde Schweisspunkt */
.geschweisst::after {
  content: "";
  position: absolute;
  top: 54%;
  left: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #cdeaff 40%, rgba(130, 205, 255, 0) 72%);
  box-shadow:
    0 0 16px 6px rgba(160, 220, 255, 0.95),
    0 0 44px 18px rgba(0, 125, 187, 0.55),
    0 0 80px 30px rgba(255, 170, 80, 0.25);
  opacity: 0;
  animation:
    funkeWandern 2.4s linear 1.2s forwards,
    funkeZittern 0.48s ease-in-out 1.2s 5;
}

@keyframes funkeWandern {
  0%   { left: 0%; opacity: 0; }
  4%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { left: 102%; opacity: 0; }
}

/* Pendeln wie beim echten Schweissen: hoch und runter plus Groessen-Flackern */
@keyframes funkeZittern {
  0%   { transform: translateY(0) scale(1); }
  15%  { transform: translateY(-8px) scale(1.3); }
  30%  { transform: translateY(4px) scale(0.9); }
  45%  { transform: translateY(-5px) scale(1.4); }
  60%  { transform: translateY(7px) scale(1.05); }
  78%  { transform: translateY(-9px) scale(1.25); }
  90%  { transform: translateY(3px) scale(1.1); }
  100% { transform: translateY(0) scale(1); }
}

/* Zwei Textfassungen, je nach Bildschirmbreite ist genau eine sichtbar */
.hero__text .nur-schmal { display: none; }

.hero__text {
  max-width: 560px;
  color: var(--text-hell);
  font-size: clamp(16px, 1.4vw, 19px);
  margin-bottom: 38px;
}

.hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 34px;
  border: none;
  border-radius: 999px;
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.btn--rot {
  background: var(--rot);
  color: #fff;
  box-shadow: 0 4px 12px rgba(221, 51, 51, 0.22);
}
.btn--rot:hover {
  background: var(--rot-dunkel);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(221, 51, 51, 0.28);
}

.btn--glas {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn--glas:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-3px);
}

.btn--breit { width: 100%; }

/* Schweißnaht: Linie mit wanderndem Funken ueber dem Lauftext */
.hero__naht {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 72px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 125, 187, 0.55) 20%, rgba(0, 125, 187, 0.55) 80%, transparent);
}

.hero__naht-funke {
  position: absolute;
  top: 50%;
  left: 0;
  width: 90px;
  height: 3px;
  transform: translateY(-50%);
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #7fd0ff 60%, #ffffff);
  box-shadow: 0 0 14px 3px rgba(120, 200, 255, 0.8);
  will-change: transform;
  animation: nahtLauf 34s linear infinite;
}

/* nur transform animieren, kein Dauer-Repaint ueber dem backdrop-filter */
@keyframes nahtLauf {
  from { transform: translateY(-50%) translateX(-12vw); }
  to   { transform: translateY(-50%) translateX(105vw); }
}

/* ============================================================
   AKKORDEON-GALERIE im Hero (rechts)
   ============================================================ */

.hero__galerie {
  --g-zu: 50px;                              /* Breite zugeklappt */
  --g-auf: 264px;                            /* Breite aufgeklappt */
  --g-hoehe: clamp(400px, 52vh, 560px);
  min-width: 0;
}

.galerie {
  display: flex;
  gap: 8px;
  /* rechtsbuendig: Text links, Galerie rechts (space-between im Hero-Grid) */
  justify-content: flex-end;
}

.g-karte {
  position: relative;
  flex: 0 0 auto;
  width: var(--g-zu);
  height: var(--g-hoehe);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 18px;
  overflow: hidden;
  background: var(--nacht-2);
  cursor: pointer;
  /* loest die Karte vom aehnlich dunklen Hero-Hintergrund: eigener Schlagschatten
     + heller Rand-Glow, damit sie auch geblurrt als eigenes Objekt erkennbar bleibt */
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  /* gestaffelter Einstieg nach dem Hero-Text */
  opacity: 0;
  animation: einblenden 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.8s + var(--i) * 0.09s);
  transition:
    width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.g-karte:hover {
  border-color: rgba(21, 116, 196, 0.65);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(21, 116, 196, 0.25) inset;
}

.g-karte.ist-aktiv {
  width: var(--g-auf);
  cursor: default;
  border-color: rgba(21, 116, 196, 0.85);
  box-shadow: 0 0 0 1px rgba(21, 116, 196, 0.4), 0 24px 60px rgba(0, 30, 55, 0.55);
}

.g-karte img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* etwas ueberskaliert, damit der Blur nicht an den Kartenraendern ausfranst */
  transform: scale(1.3);
  /* zugeklappt: unscharf und entsaettigt, nur die offene Karte ist scharf */
  filter: grayscale(0.55) brightness(0.62) blur(5px);
  transition: filter 0.5s ease;
}

.g-karte:hover img { filter: grayscale(0.25) brightness(0.8) blur(2.5px); }

/* kuehler Blau-Tint als eigene Ebene statt hue-rotate (kontrollierbar, kein
   zufaelliger Farbstich): loest die Karte vom warmen Hero-Foto ab.
   ::before, weil ::after schon fuer die Abdunklung unten reserviert ist. */
.g-karte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, rgba(0, 94, 168, 0.32), rgba(7, 16, 25, 0.18) 55%);
  mix-blend-mode: color;
  opacity: 0.85;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.g-karte:hover::before { opacity: 0.4; }
.g-karte.ist-aktiv::before { opacity: 0; }

.g-karte.ist-aktiv img {
  filter: none;
  /* langsame Kamerafahrt, startet bei jedem Aufklappen neu */
  animation: gZoom 7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes gZoom {
  from { transform: scale(1.3); }
  to   { transform: scale(1.03); }
}

/* Abdunklung unten fuer Label-Lesbarkeit */
.g-karte::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 16, 25, 0.05) 45%, rgba(7, 16, 25, 0.85));
  pointer-events: none;
}

/* senkrechte Beschriftung im zugeklappten Zustand */
.g-karte__senkrecht {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 2;
  writing-mode: vertical-rl;
  transform: translateX(-50%) rotate(180deg);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

.g-karte.ist-aktiv .g-karte__senkrecht { opacity: 0; }

.g-karte__chip {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* kein backdrop-filter: darunter laeuft der Ken-Burns-Zoom, der Blur
     wuerde pro Frame neu gesampelt und der Chip zittert */
  background: rgba(7, 16, 25, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 7px 13px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.35s ease 0.15s, transform 0.35s ease 0.15s;
}

.g-karte__chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rot);
  animation: chipPuls 1.6s ease-in-out infinite;
}

@keyframes chipPuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(221, 51, 51, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(221, 51, 51, 0); }
}

.g-karte.ist-aktiv .g-karte__chip { opacity: 1; transform: translateY(0); }

.g-karte__label {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 30px;
  z-index: 2;
  text-align: left;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease 0.22s, transform 0.4s ease 0.22s;
}

.g-karte.ist-aktiv .g-karte__label { opacity: 1; transform: translateY(0); }

.g-karte__label strong {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  white-space: nowrap;
}

.g-karte__label em {
  display: block;
  font-style: normal;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 5px;
  white-space: nowrap;
}

/* Fortschrittsbalken bis zum automatischen Weiterschalten */
.g-karte__balken {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 13px;
  z-index: 2;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease 0.2s;
}

.g-karte.ist-aktiv .g-karte__balken { opacity: 1; }

.g-karte__balken i {
  display: block;
  height: 100%;
  background: var(--rot);
  transform: scaleX(0);
  transform-origin: left;
}

.g-karte.ist-aktiv .g-karte__balken i {
  animation: balkenLauf 5s linear forwards;
}

.galerie.ist-pausiert .g-karte__balken i { animation-play-state: paused; }

@keyframes balkenLauf {
  to { transform: scaleX(1); }
}

/* ============================================================
   MARQUEE / LAUFTEXT am unteren Hero-Rand
   ============================================================ */

.marquee {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--marquee-hoehe);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: rgba(7, 16, 25, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--linie-hell);
}

.marquee__spur {
  display: flex;
  width: max-content;
  will-change: transform;
  /* 3x so lang wie vorher, weil pro Durchlauf jetzt 3 statt 1 Gruppenbreite
     wandert: gleiche Geschwindigkeit, aber nahtloser Neustart */
  animation: marqueeLauf 144s linear infinite;
}

.marquee:hover .marquee__spur { animation-play-state: paused; }

.marquee__gruppe {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.marquee__gruppe span {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  white-space: nowrap;
  padding-top: 4px;
}

/* Gefuellt statt Kontur: Teko-Outlines wirken doppellinig und unruhig */
.marquee__gruppe span.ist-outline {
  color: rgba(255, 255, 255, 0.55);
}

.marquee__gruppe i {
  font-style: normal;
  color: var(--rot);
  font-family: var(--font-display);
  font-size: 26px;
  margin-inline: 28px;
}

/* translate3d: GPU-Pfad, verhindert Subpixel-Ruckeln beim Loop-Neustart */
@keyframes marqueeLauf {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ============================================================
   ZAHLEN
   ============================================================ */

.zahlen {
  background: linear-gradient(180deg, var(--nacht), var(--nacht-2));
  border-bottom: 1px solid var(--linie-hell);
  padding-block: 56px;
}

.zahlen__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.zahlen__item {
  text-align: center;
  position: relative;
}

.zahlen__item:not(:first-child)::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 12%;
  height: 76%;
  width: 1px;
  background: var(--linie-hell);
}

.zahlen__wert {
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 600;
  color: #fff;
  line-height: 1;
  display: block;
}

/* Wechselrhythmus blau/weiss, Farbgebung passiert im Verlauf weiter unten */

.zahlen__label {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* ============================================================
   SEKTIONEN allgemein
   ============================================================ */

.section { padding-block: clamp(80px, 10vw, 130px); }

.section__kopf {
  max-width: 760px;
  margin-bottom: clamp(44px, 6vw, 72px);
}

.section__kicker {
  color: var(--rot);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.section__kicker--hell { color: #ff6a5e; }

.section__titel {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(42px, 5.5vw, 68px);
  line-height: 0.95;
  color: var(--blau-dunkel);
}

.section__titel em {
  font-style: normal;
  color: var(--blau);
}

.section__titel--hell { color: #fff; }
.section__titel--hell em { color: var(--blau-hell); }

.section__intro {
  margin-top: 18px;
  color: var(--grau);
  font-size: 18px;
}

/* ============================================================
   VERGLEICH
   ============================================================ */

.vergleich {
  background:
    radial-gradient(ellipse 700px 460px at 12% 8%, rgba(221, 51, 51, 0.06), transparent 62%),
    radial-gradient(ellipse 760px 500px at 88% 92%, rgba(0, 94, 168, 0.09), transparent 62%),
    linear-gradient(180deg, #ffffff, var(--hell));
}

.vergleich .section__titel { color: var(--s-titel); }
.vergleich .section__titel em { color: var(--s-titel-em); }
.vergleich .section__kicker { color: var(--s-kicker); }
.vergleich .section__intro { color: var(--s-text); }

/* ---- Vergleichs-Matrix ---- */

.matrix {
  --spalte: minmax(0, 1fr) clamp(104px, 12vw, 168px) minmax(0, 1fr);
  border: 1px solid rgba(0, 63, 92, 0.14);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 63, 92, 0.14);
  overflow: hidden;
}

.matrix__kopf {
  display: grid;
  grid-template-columns: var(--spalte);
  align-items: stretch;
  border-bottom: 2px solid rgba(0, 63, 92, 0.24);
}

.matrix__spalte {
  position: relative;
  min-height: 132px;
  display: flex;
  align-items: flex-end;
  padding: 18px 24px;
  overflow: hidden;
}

.matrix__spalte img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, filter 0.5s ease;
}

.matrix__spalte--manuell img { filter: grayscale(0.6) brightness(0.6); }
.matrix__spalte--auto img { filter: brightness(0.72); }
.matrix__spalte:hover img { transform: scale(1.05); }

.matrix__spalte::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 16, 25, 0.08) 35%, rgba(7, 16, 25, 0.82));
}

.matrix__spalte span {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #fff;
}

.matrix__spalte--manuell span { color: rgba(255, 255, 255, 0.85); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); }
.matrix__spalte--auto span { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); }

/* schmaler roter Balken markiert die empfohlene Seite */
.matrix__spalte--auto { box-shadow: inset 0 3px 0 0 var(--blau-hell); }
.matrix__spalte--manuell { box-shadow: inset 0 3px 0 0 rgba(255, 255, 255, 0.22); }

.matrix__empfehlung {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 1;
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--rot);
  padding: 6px 12px;
  border-radius: 999px;
}

.matrix__mitte {
  /* dunkle Saeule, fuehrt die dunklen Kopfbilder nach unten weiter */
  background: linear-gradient(180deg, #0e2233, var(--blau-dunkel));
  display: grid;
  place-items: center;
}

/* rotes VS-Medaillon zwischen den beiden Welten */
.matrix__mitte i {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--rot);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding-top: 3px;
  /* Schleier direkt als wachsender Box-Shadow: kein Pseudo-Element/z-index
     noetig, das von benachbarten Grid-Zellen (eigene Stacking-Contexts)
     verdeckt werden koennte. box-shadow malt immer auf der eigenen Box. */
  box-shadow: 0 12px 28px rgba(221, 51, 51, 0.3), 0 0 0 0 rgba(221, 51, 51, 0.5);
  animation: vsSchleier 2.8s ease-in-out infinite;
}

@keyframes vsSchleier {
  0%, 100% { box-shadow: 0 12px 28px rgba(221, 51, 51, 0.3), 0 0 0 0 rgba(221, 51, 51, 0.5); }
  50%      { box-shadow: 0 12px 28px rgba(221, 51, 51, 0.3), 0 0 0 16px rgba(221, 51, 51, 0); }
}

/* ---- Zeilen ---- */

.matrix__zeilen { margin: 0; }

.mzeile {
  display: grid;
  grid-template-columns: var(--spalte);
  align-items: center;
  border-top: 1px solid rgba(0, 63, 92, 0.1);
  transition: background 0.3s ease;
}

.mzeile:first-child { border-top: 0; }
.mzeile:hover { background: rgba(0, 94, 168, 0.05); }

.mzeile__kriterium,
.mzeile__minus,
.mzeile__plus {
  margin: 0;
  padding: 17px 24px;
  font-size: 15.5px;
  line-height: 1.45;
}

.mzeile__kriterium {
  text-align: center;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
  background: var(--blau-dunkel);
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}

.mzeile:hover .mzeile__kriterium { color: #7fd0ff; }

.mzeile__minus,
.mzeile__plus {
  position: relative;
  padding-left: 52px;
  color: #46586a;
}

.mzeile__minus::before,
.mzeile__plus::before {
  position: absolute;
  left: 24px;
  top: 17px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.mzeile__minus::before {
  content: "\00d7";
  background: rgba(221, 51, 51, 0.16);
  color: var(--rot-dunkel);
}

.mzeile__plus::before {
  content: "\2713";
  background: var(--blau);
  color: #fff;
}

.mzeile__plus { color: var(--s-text-stark); font-weight: 700; }

/* ---- Fuss ---- */

.matrix__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 28px;
  border-top: 0;
  background: linear-gradient(90deg, #0e2233, var(--blau-dunkel));
}

.matrix__fuss p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  /* nimmt die volle Restbreite neben dem Button, damit der Satz einzeilig bleibt */
  flex: 1 1 auto;
  min-width: 0;
}

/* ab hier reicht der Platz fuer eine Zeile nicht mehr, dann darf er umbrechen */
@media (min-width: 1101px) {
  .matrix__fuss p { white-space: nowrap; }
}

/* ============================================================
   LEISTUNGEN
   ============================================================ */

.leistungen {
  background:
    radial-gradient(ellipse 800px 500px at 85% 0%, rgba(0, 94, 168, 0.25), transparent 60%),
    linear-gradient(180deg, var(--nacht-2), var(--nacht));
}

.leistungen__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.l-karte {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
  padding: 34px 30px 30px;
  overflow: hidden;
  transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}

.l-karte:hover {
  transform: translateY(-6px);
  border-color: rgba(21, 116, 196, 0.6);
  background: rgba(0, 94, 168, 0.1);
}

.l-karte__nr {
  font-family: var(--font-display);
  font-size: 88px;
  font-weight: 600;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.22);
  display: block;
  margin-bottom: 18px;
  transition: -webkit-text-stroke-color 0.35s ease;
}

.l-karte:hover .l-karte__nr { -webkit-text-stroke-color: rgba(21, 116, 196, 0.85); }

.l-karte h3 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 10px;
}

.l-karte p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 15.5px;
}

.l-karte--cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  background: linear-gradient(135deg, rgba(0, 94, 168, 0.35), rgba(0, 63, 92, 0.25));
  border-color: rgba(21, 116, 196, 0.5);
}

.l-karte--cta h3 { text-transform: none; font-size: 32px; line-height: 1.05; }

/* ============================================================
   KONFIGURATOR
   ============================================================ */

.konfigurator {
  background:
    radial-gradient(ellipse 780px 520px at 12% 100%, rgba(221, 51, 51, 0.06), transparent 62%),
    radial-gradient(ellipse 820px 540px at 88% 0%, rgba(0, 94, 168, 0.1), transparent 62%),
    linear-gradient(180deg, var(--hell), #ffffff);
}

.konfigurator .section__intro { color: var(--s-text); }
.konfigurator .section__titel { color: var(--s-titel); }
.konfigurator .section__titel em { color: var(--s-titel-em); }
.konfigurator .section__kicker { color: var(--s-kicker); }

.kfg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}

.kfg__schritte { display: grid; gap: 18px; min-width: 0; }

.kfg__block {
  border: 1px solid var(--s-linie);
  border-radius: 18px;
  background: var(--s-flaeche);
  padding: 24px 24px 26px;
  box-shadow: 0 10px 30px rgba(0, 63, 92, 0.05);
  margin: 0;
}

.kfg__block legend {
  /* Ein <legend> setzen Browser per Vorgabe MITTEN auf den Rahmen des
     <fieldset>, der Titel haengt dann halb ausserhalb der Karte. display:flex
     allein genuegt nicht, Safari und Firefox halten an der Rahmenposition
     fest. float mit voller Breite holt das Element zuverlaessig in den
     normalen Fluss, in jedem Browser. */
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--s-titel);
  padding: 0;
  margin-bottom: 18px;
}

/* raeumt den float des Titels wieder auf */
.kfg__block::after {
  content: "";
  display: block;
  clear: both;
}

.kfg__nr {
  /* Fester Kreis mit echter Zentrierung statt Pille mit geschaetzten
     Innenabstaenden. Teko setzt Ziffern optisch hoch, das gleicht der
     kleine padding-top aus (wirkt in der Zentrierung zur Haelfte). */
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding-top: 3px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--rot);
  border: 1px solid rgba(221, 51, 51, 0.5);
  border-radius: 999px;
}

/* ---- Bildkacheln ---- */

.kfg__kacheln {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.kfg__kacheln--drei { grid-template-columns: repeat(3, 1fr); }

.kachel {
  position: relative;
  display: block;
  border: 1px solid var(--s-linie);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: var(--s-karte);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.kachel input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.kachel img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
  filter: grayscale(0.5) brightness(0.7);
  transition: filter 0.35s ease, transform 0.5s ease;
}

.kachel:hover { transform: translateY(-3px); border-color: rgba(21, 116, 196, 0.5); }
.kachel:hover img { filter: grayscale(0.2) brightness(0.85); transform: scale(1.04); }

.kachel__inhalt {
  display: block;
  padding: 12px 14px 14px;
}

.kachel__inhalt strong {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--s-titel);
  line-height: 1.1;
}

.kachel__inhalt em {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: var(--s-text);
  margin-top: 4px;
  line-height: 1.35;
}

/* ausgewaehlt */
.kachel:has(input:checked) {
  border-color: var(--rot);
  box-shadow: 0 0 0 1px var(--rot), 0 14px 34px rgba(221, 51, 51, 0.22);
}

.kachel:has(input:checked) img { filter: none; }

.kachel:has(input:focus-visible) { outline: 3px solid var(--blau-hell); outline-offset: 2px; }

/* Haken oben rechts */
.kachel::after {
  content: "\2713";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--rot);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.kachel:has(input:checked)::after { opacity: 1; transform: scale(1); }

/* ---- Pillen-Auswahl ---- */

.kfg__frage {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s-text-zart);
  margin: 18px 0 10px;
}

.kfg__block .kfg__frage:first-of-type { margin-top: 0; }

.kfg__pillen { display: flex; flex-wrap: wrap; gap: 9px; }

.pille { position: relative; cursor: pointer; }

.pille input { position: absolute; opacity: 0; pointer-events: none; }

.pille span {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--s-linie);
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--s-text-stark);
  background: var(--s-karte);
  transition: all 0.25s ease;
}

.pille:hover span { border-color: var(--blau); color: var(--blau-dunkel); }

.pille input:checked + span {
  background: var(--rot);
  border-color: var(--rot);
  color: #fff;
}

.pille input:focus-visible + span { outline: 3px solid var(--blau-hell); outline-offset: 2px; }

/* ---- Ergebnis-Karte ---- */

.kfg__ergebnis { position: sticky; top: calc(var(--nav-gesamt) + 16px); }

.kfg__karte {
  border: 1px solid var(--s-linie);
  border-radius: 18px;
  background: var(--s-karte);
  box-shadow: 0 18px 44px rgba(0, 63, 92, 0.08);
  padding: 26px 24px;
}

.kfg__karte h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--s-titel);
  margin-bottom: 16px;
}

.kfg__liste { margin: 0 0 18px; }

.kfg__liste > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-top: 1px solid var(--s-linie-zart);
  font-size: 13.5px;
}

.kfg__liste > div:first-child { border-top: 0; }
.kfg__liste dt { color: var(--s-text-zart); flex: 0 0 auto; }
.kfg__liste dd { margin: 0; color: var(--s-titel); font-weight: 700; text-align: right; }

.kfg__empfehlung {
  border: 1px solid rgba(0, 94, 168, 0.28);
  background: rgba(0, 94, 168, 0.07);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

.kfg__empfehlung span {
  display: block;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blau);
  margin-bottom: 5px;
}

.kfg__empfehlung strong {
  display: block;
  color: var(--s-titel);
  font-size: 16px;
  line-height: 1.25;
}

.kfg__empfehlung em {
  display: block;
  font-style: normal;
  color: var(--s-text);
  font-size: 13px;
  margin-top: 5px;
  line-height: 1.4;
}

.kfg__karte .btn { margin-top: 6px; }

/* ============================================================
   KUNDENPROJEKT
   ============================================================ */

.projekt {
  background:
    radial-gradient(ellipse 620px 420px at 90% 6%, rgba(0, 94, 168, 0.09), transparent 62%),
    linear-gradient(180deg, #ffffff, var(--hell));
}

.projekt__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.projekt__bild {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 63, 92, 0.25);
}

.projekt__bild img {
  width: 100%;
  display: block;
  transition: transform 0.7s ease;
}

.projekt__bild:hover img { transform: scale(1.045); }

.projekt__badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--rot);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 15px;
  border-radius: 999px;
}

.projekt__badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: chipPuls 1.8s ease-in-out infinite;
}

/* Bildunterschrift auf abgedunkeltem Verlauf */
.projekt__bildfuss {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 44px 22px 20px;
  background: linear-gradient(180deg, transparent, rgba(7, 16, 25, 0.88));
  color: #fff;
}

.projekt__bildfuss span {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

.projekt__bildfuss em {
  display: block;
  font-style: normal;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
}

.projekt__text { color: var(--grau); margin-top: 16px; }

/* Ergebnis-Punkte mit vertikaler Akzentlinie */
.ergebnis {
  list-style: none;
  margin: 26px 0 0;
  display: grid;
  gap: 14px;
}

.ergebnis li {
  position: relative;
  padding-left: 20px;
  border-left: 3px solid var(--blau);
  padding-block: 2px;
}

.ergebnis strong {
  display: block;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blau-dunkel);
  line-height: 1.1;
}

.ergebnis span { color: var(--grau); font-size: 15px; }

/* ---- Eingesetzte Technik ---- */

.technik {
  margin-top: clamp(48px, 6vw, 76px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--linie);
}

.technik__titel {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 24px;
}

.technik__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.technik__grid li {
  position: relative;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: 20px 22px 20px 62px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.technik__grid li:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 94, 168, 0.4);
  box-shadow: 0 16px 34px rgba(0, 63, 92, 0.12);
}

.technik__nr {
  position: absolute;
  left: 20px;
  top: 18px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(0, 94, 168, 0.45);
  transition: -webkit-text-stroke-color 0.3s ease, color 0.3s ease;
}

.technik__grid li:hover .technik__nr {
  color: var(--blau);
  -webkit-text-stroke-color: transparent;
}

.technik__grid strong {
  display: block;
  font-size: 16px;
  color: var(--blau-dunkel);
  line-height: 1.25;
}

.technik__grid em {
  display: block;
  font-style: normal;
  font-size: 14px;
  color: var(--grau);
  margin-top: 3px;
}

.pfeil-link {
  display: inline-block;
  margin-top: 28px;
  color: var(--blau);
  font-weight: 900;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.pfeil-link:hover { color: var(--blau-dunkel); border-color: var(--rot); }

/* ============================================================
   PARTNER
   ============================================================ */

.partner { background: var(--hell); }

.partner__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.partner__logo {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 22px;
  min-height: 110px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.partner__logo img {
  max-height: 56px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 0.35s ease, opacity 0.35s ease;
}

.partner__logo:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 63, 92, 0.14);
}

.partner__logo:hover img { filter: grayscale(0); opacity: 1; }

/* ============================================================
   KONTAKT
   ============================================================ */

.kontakt {
  background:
    radial-gradient(ellipse 900px 600px at 12% 20%, rgba(0, 94, 168, 0.35), transparent 60%),
    linear-gradient(180deg, var(--nacht), var(--blau-dunkel));
}

.kontakt__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: stretch;      /* beide Spalten gleich hoch */
}

.kontakt__text { color: var(--text-hell); margin-top: 14px; max-width: 480px; }

/* Direktwahl-Karte */
.direktruf {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-block: 28px 26px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-decoration: none;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.direktruf:hover {
  border-color: rgba(221, 51, 51, 0.65);
  background: rgba(221, 51, 51, 0.12);
  transform: translateY(-3px);
}

.direktruf__icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--rot);
  color: #fff;
}

.direktruf__text { display: flex; flex-direction: column; min-width: 0; }

.direktruf__text em {
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ff8a7a;
}

.direktruf__text strong {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.8vw, 38px);
  font-weight: 600;
  color: #fff;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.direktruf__pfeil {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.45);
  font-size: 22px;
  transition: transform 0.3s ease, color 0.3s ease;
}

.direktruf:hover .direktruf__pfeil { transform: translateX(5px); color: #fff; }

/* Kontaktdaten als Karten: Adresse und E-Mail links gestapelt,
   Oeffnungszeiten rechts daneben. Haelt die Spalte kompakt. */
.kdaten {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "adresse zeiten"
    "mail    zeiten";
  gap: 14px;
  align-items: stretch;
}

.kdaten__karte:nth-child(1) { grid-area: adresse; }
.kdaten__karte:nth-child(2) { grid-area: mail; }
.kdaten__karte--breit { grid-area: zeiten; }

.kdaten__karte {
  position: relative;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 0.3s ease, background 0.3s ease;
}

.kdaten__karte:hover {
  border-color: rgba(21, 116, 196, 0.5);
  background: rgba(0, 94, 168, 0.12);
}


.kdaten__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(21, 116, 196, 0.18);
  color: #7fd0ff;
  margin-bottom: 12px;
}

.kdaten__karte h3 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ff8a7a;
  margin-bottom: 6px;
}

.kdaten__karte p {
  color: var(--text-hell);
  font-size: 15.5px;
  margin: 0;
}

.kdaten__karte a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  transition: border-color 0.25s ease;
}

.kdaten__karte a:hover { border-color: var(--rot); }

/* Oeffnungszeiten als saubere Tabelle */
.zeiten {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.zeiten th {
  text-align: left;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  padding: 4px 0;
}

.zeiten td {
  text-align: right;
  color: #fff;
  font-weight: 700;
  padding: 4px 0;
}

.zeiten__zu { color: rgba(255, 255, 255, 0.4) !important; font-weight: 400 !important; }

.kontakt__formular {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: clamp(28px, 3vw, 40px);
}

.kontakt__formular h3 {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 22px;
}

.feld { margin-bottom: 18px; }

.feld__optional {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0;
}

.feld label {
  display: block;
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}

.feld--wachsend { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.feld--wachsend textarea { flex: 1 1 auto; min-height: 120px; }

.feld input,
.feld textarea {
  width: 100%;
  background: rgba(7, 16, 25, 0.55);
  border: 1px solid var(--linie-hell);
  border-radius: 10px;
  color: #fff;
  font-family: var(--font-text);
  font-size: 16px;
  padding: 14px 16px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  resize: vertical;
}

.feld input::placeholder,
.feld textarea::placeholder { color: rgba(255, 255, 255, 0.35); }

.feld input:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--blau-hell);
  box-shadow: 0 0 0 3px rgba(21, 116, 196, 0.3);
}

.kontakt__hinweis {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

.kontakt__hinweis a { color: rgba(255, 255, 255, 0.8); }

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  background: #050b12;
  color: rgba(255, 255, 255, 0.65);
  padding-top: 70px;
}

.footer__grid {
  display: grid;
  /* fuenf Bereiche: Marke, Navigation, Loesungen, Rechtliches, Kontakt.
     Alle in einer Reihe, sonst rutscht der Kontakt allein nach unten. */
  grid-template-columns: 1.5fr 0.9fr 1fr 1.1fr 1.1fr;
  gap: clamp(24px, 3vw, 40px);
  padding-bottom: 50px;
}

@media (max-width: 1100px) {
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__marke { grid-column: 1 / -1; }
}

/* height:auto ist noetig, sonst bleibt die Hoehe beim HTML-Attribut
   stehen und das Logo wird gestaucht. */
.footer__marke img { width: 110px; height: auto; margin-bottom: 18px; }
.footer__marke p { font-size: 14.5px; max-width: 320px; }

.footer h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  margin-bottom: 16px;
}

.footer__nav { display: flex; flex-direction: column; }

.footer__nav a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 14.5px;
  padding-block: 5px;
  width: fit-content;
  transition: color 0.25s ease, transform 0.25s ease;
}

.footer__nav a:hover { color: #fff; transform: translateX(4px); }

.footer__kontakt p { font-size: 14.5px; margin-bottom: 12px; }
.footer__kontakt a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.footer__kontakt a:hover { color: #fff; }

.footer__zeile {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: 20px;
}

.footer__zeile p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
}

/* Agenturhinweis, rechts in der Fusszeile */
.footer__by { color: rgba(255, 255, 255, 0.34); }

.footer__by a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.footer__by a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.6); }

/* Auf schmalen Bildschirmen steht der Nach-oben-Knopf ueber der Fusszeile,
   deshalb dort rechts Platz fuer ihn lassen. */
@media (max-width: 640px) {
  .footer__zeile p { padding-right: 56px; }
}

/* ============================================================
   ANIMATIONEN: Einstieg + Scroll-Reveal
   ============================================================ */

/* Hero-Elemente beim Laden gestaffelt einblenden */
.anim-start {
  opacity: 0;
  transform: translateY(28px);
  animation: einblenden 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--d, 0s);
}

@keyframes einblenden {
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll-Reveal, wird per JS mit .sichtbar aktiviert */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0s);
}

.reveal.sichtbar {
  opacity: 1;
  transform: translateY(0);
}

/* Nutzer wuenscht weniger Bewegung: alles sofort zeigen */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim-start, .reveal { opacity: 1; transform: none; animation: none; transition: none; }
  .hero__bild img { animation: none; }
  .hero__funken, .hero__naht-funke, .hero__scroll { display: none; }
  .marquee__spur { animation: none; }
  .g-karte { opacity: 1; animation: none; }
  .g-karte img { transform: none; animation: none; }
  .g-karte__balken { display: none; }
  .g-karte__chip i { animation: none; }
  .matrix__mitte i::before { animation: none; }
  .nav { transition: none; }
  .geschweisst { color: #fff; -webkit-text-stroke: 0; }
  .geschweisst::before, .geschweisst::after { display: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1360px) {
  .hero__galerie { --g-auf: 232px; --g-zu: 48px; }
}

@media (max-width: 1080px) {
  .leistungen__grid { grid-template-columns: repeat(2, 1fr); }
  .partner__grid { grid-template-columns: repeat(4, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }

  /* Hero: Text oben, Galerie darunter als scrollbare Reihe */
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding-block: 20px 0; }
  .hero__links { transform: none; } /* untereinander: keine Skalierung noetig */
  .hero__galerie { --g-hoehe: 380px; --g-auf: 224px; }
  .galerie {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .galerie::-webkit-scrollbar { display: none; }
}

@media (max-width: 1080px) {
  /* Vollbild-Overlay statt Klappkarte: mehr Platz, kein Scrollen noetig */
  .nav__menu {
    position: fixed;
    inset: 0;
    /* liegt direkt am body, also knapp unter dem Header (z-index 100) */
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: auto;
    max-width: none;
    margin: 0;
    padding: calc(var(--nav-gesamt) + 18px) clamp(24px, 7vw, 44px) max(28px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #050b12 0%, #071019 55%, #0b1a28 100%);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    /* Scrollimpulse bleiben im Overlay, die Seite dahinter ruehrt sich nicht */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    transform: translateZ(0);
    will-change: opacity;
    visibility: hidden;
    transition: opacity 0.32s ease, visibility 0s 0.32s;
  }

  /* dezenter Lichtschein oben, damit die Flaeche nicht tot wirkt */
  .nav__menu::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 55%;
    pointer-events: none;
    background: radial-gradient(ellipse 120% 100% at 50% 0%, rgba(0, 94, 168, 0.22), transparent 70%);
  }

  .nav__menu.ist-offen {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0s 0s;
  }

  /* Logo und Burger liegen ueber dem Overlay und bleiben bedienbar */
  .nav__logo, .nav__rechts { position: relative; z-index: 2; }

  /* Eintraege fahren beim Oeffnen gestaffelt herein */
  .nav__menu > a,
  .nav__menu .nav__direkt {
    position: relative;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .nav__menu.ist-offen > a,
  .nav__menu.ist-offen .nav__direkt { opacity: 1; transform: none; }

  .nav__menu.ist-offen > a:nth-of-type(1) { transition-delay: 0.06s; }
  .nav__menu.ist-offen > a:nth-of-type(2) { transition-delay: 0.11s; }
  .nav__menu.ist-offen > a:nth-of-type(3) { transition-delay: 0.16s; }
  .nav__menu.ist-offen > a:nth-of-type(4) { transition-delay: 0.21s; }
  .nav__menu.ist-offen > a:nth-of-type(5) { transition-delay: 0.26s; }
  .nav__menu.ist-offen > a:nth-of-type(6) { transition-delay: 0.31s; }
  .nav__menu.ist-offen > a:nth-of-type(7) { transition-delay: 0.36s; }
  .nav__menu.ist-offen > a:nth-of-type(8) { transition-delay: 0.42s; }
  .nav__menu.ist-offen .nav__direkt { transition-delay: 0.48s; }

  .nav__menu a:not(.nav__cta)::after { display: none; }

  /* letzter Link braucht keine Trennlinie mehr (CTA sitzt jetzt im Header) */
  .nav__menu a:last-child { border-bottom: 0; }

  .nav__burger { display: flex; }
  .nav__logo, .nav__rechts { flex: 0 0 auto; }

  /* CTA und Schnellkontakt wandern ins Klappmenue, dadurch bekommen
     Logo und Burger Luft und der rechte Rand bleibt frei */
  .nav__rechts .nav__cta { display: none; }
  /* Die schwebende Leiste bleibt auf kleinen Bildschirmen sichtbar: sie ersetzt
     den ausgeblendeten Kopf-CTA und macht Anruf und Konfigurator erreichbar,
     ohne dass erst das Klappmenue geoeffnet werden muss. */

  .nav__menu a.nav__menu-cta {
    display: inline-flex;
    justify-content: center;
    margin-top: 22px;
    border-bottom: 0 !important;
    font-family: var(--font-text);
    font-size: 16px;
    letter-spacing: 0.02em;
    padding: 16px 24px !important;
  }

  .nav__menu .nav__direkt { display: block; }

  /* mehr Innenabstand, damit Logo und Burger nicht am Pillenrand kleben */
  .nav__inner {
    padding-left: 22px;
    padding-right: 18px;
  }

  /* Menue nimmt die volle Hoehe unter dem Header ein */
  .nav__menu a {
    padding: 13px 2px;
    font-size: clamp(20px, 5.5vw, 26px);
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #fff;
  }

  /* Kontakt ist der letzte Navigationslink, danach folgt der CTA */
  .nav__menu a:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
  .nav__menu > a:nth-last-of-type(2) { border-bottom: 0; }

  /* Matrix: Kriterium wandert ueber die Zeile, Werte darunter */
  .matrix { --spalte: minmax(0, 1fr) minmax(0, 1fr); }
  .matrix__kopf { grid-template-columns: 1fr 1fr; }
  .matrix__mitte { display: none; }

  .mzeile {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "krit krit" "minus plus";
    row-gap: 0;
  }

  .mzeile__kriterium {
    grid-area: krit;
    justify-content: flex-start;
    padding: 12px 20px 8px;
    font-size: 17px;
  }

  .mzeile__minus { grid-area: minus; padding-top: 6px; }
  .mzeile__plus  { grid-area: plus;  padding-top: 6px; }

  .projekt__grid { grid-template-columns: 1fr; }
  .technik__grid { grid-template-columns: repeat(2, 1fr); }

  /* Konfigurator: Ergebnis-Karte unter die Schritte */
  .kfg { grid-template-columns: 1fr; }
  .kfg__ergebnis { position: static; }
  .kfg__kacheln { grid-template-columns: repeat(2, 1fr); }
  .kfg__kacheln--drei { grid-template-columns: repeat(3, 1fr); }
  .kontakt__grid { grid-template-columns: 1fr; }

  .zahlen__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .zahlen__item:nth-child(3)::before { display: none; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }

  .hero__inhalt { padding-bottom: 150px; }
  .hero__titel { font-size: clamp(62px, 19.5vw, 84px); }
  .hero__kicker {
    width: calc(clamp(232px, 73.1vw, 315px) + 0.16em);
    font-size: 13px;
    letter-spacing: 0.16em;
  }
  .hero__galerie { --g-hoehe: 330px; --g-auf: 200px; --g-zu: 44px; }
  .g-karte__label strong { font-size: 22px; }
  .hero__text { font-size: 16px; }
  .hero__scroll { display: none; }
  .hero__naht { bottom: 60px; }

  .marquee { --marquee-hoehe: 60px; }
  .marquee__gruppe span { font-size: 26px; }
  .marquee__gruppe i { margin-inline: 18px; }

  .btn { padding: 15px 26px; font-size: 15px; }

  .leistungen__grid { grid-template-columns: 1fr; }
  .partner__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }

  .kdaten {
    grid-template-columns: 1fr;
    /* ohne das bleibt die zweispaltige Vorlage aktiv und die Karten
       schieben sich uebereinander */
    grid-template-areas: "adresse" "mail" "zeiten";
  }
  .vgl-karte__bild { height: 200px; }
}

/* Matrix auf schmalen Screens: alles untereinander */
@media (max-width: 640px) {
  .matrix__kopf { grid-template-columns: 1fr 1fr; }
  .matrix__spalte { min-height: 104px; padding: 14px 16px; }
  .matrix__empfehlung { top: 10px; right: 12px; font-size: 10px; padding: 5px 9px; }

  .mzeile { grid-template-columns: 1fr; grid-template-areas: "krit" "minus" "plus"; }
  .mzeile__kriterium { padding: 14px 18px 6px; }
  .mzeile__minus, .mzeile__plus { padding: 8px 18px 8px 46px; font-size: 15px; }
  .mzeile__minus::before, .mzeile__plus::before { left: 18px; top: 9px; }
  .mzeile__plus { padding-bottom: 16px; }

  .matrix__fuss { padding: 20px; }
  .matrix__fuss .btn { width: 100%; justify-content: center; }
}

/* Technik-Karten auf schmalen Screens untereinander */
@media (max-width: 640px) {
  .technik__grid { grid-template-columns: 1fr; }
  .projekt__bildfuss span { font-size: 22px; }
}

/* Konfigurator auf schmalen Screens */
@media (max-width: 640px) {
  .kfg__kacheln, .kfg__kacheln--drei { grid-template-columns: 1fr 1fr; }
  .kachel img { height: 96px; }
  .kachel__inhalt { padding: 10px 12px 12px; }
  .kachel__inhalt strong { font-size: 17px; }
  .kachel__inhalt em { font-size: 12px; }
  .kfg__block { padding: 18px 16px 20px; }
  .kfg__block legend { font-size: 20px; }
  .kfg__karte { padding: 20px 18px; }
}

/* ---- Konfigurator: Ergaenzungen fuer erweiterte Parameter ---- */
.kfg__sub {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.55);
  margin: -8px 0 18px;
}

/* zweizeilige Pillen (Titel + Zusatz) */
.pille span i {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0.65;
  margin-top: 1px;
}

.pille span { line-height: 1.2; text-align: left; }

/* Mehrfachauswahl (Checkbox): heller roter Grund mit dunkelrotem Text,
   lesbar auf der hellen Glaskarte */
.pille input[type="checkbox"]:checked + span {
  background: rgba(221, 51, 51, 0.1);
  border-color: var(--rot);
  color: var(--rot-dunkel);
}

.pille input[type="checkbox"]:checked + span i { opacity: 0.8; }

/* Massfelder */
.masse { margin-top: 6px; }

.masse__felder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.masse__felder .feld { margin-bottom: 0; }
.masse__felder label { font-size: 12.5px; }
.masse__felder input { padding: 10px 12px; font-size: 15px; }

.kfg__zweispalt { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kfg__zweispalt .feld { margin-bottom: 18px; }

.kfg__hinweis-datei {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
  margin: -6px 0 16px;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .masse__felder { grid-template-columns: 1fr 1fr; }
  .kfg__zweispalt { grid-template-columns: 1fr; gap: 0; }
}

/* ---- Formularfelder in HELLEN Sektionen ---- */
.ist-hell .feld label { color: var(--s-text-stark); }
.ist-hell .feld__optional { color: var(--s-text-zart); }

.ist-hell .feld input,
.ist-hell .feld textarea {
  background: #fff;
  border-color: var(--s-linie);
  color: var(--text);
}

.ist-hell .feld input::placeholder,
.ist-hell .feld textarea::placeholder { color: #a5b3bf; }

.ist-hell .feld input:focus,
.ist-hell .feld textarea:focus {
  border-color: var(--blau);
  box-shadow: 0 0 0 3px rgba(0, 94, 168, 0.16);
}

.ist-hell .kontakt__hinweis { color: var(--s-text-zart); }
.ist-hell .kontakt__hinweis a { color: var(--blau); }
.ist-hell .kfg__sub { color: var(--s-text); }
.ist-hell .kfg__hinweis-datei { color: var(--s-text-zart); }

/* Bildkacheln in hellen Sektionen: Bilder duerfen farbig bleiben */
.ist-hell .kachel img { filter: grayscale(0.35) brightness(0.95); }
.ist-hell .kachel:hover img { filter: grayscale(0.1) brightness(1); }
.ist-hell .kachel:has(input:checked) { box-shadow: 0 0 0 1px var(--rot), 0 14px 34px rgba(221, 51, 51, 0.16); }

/* ---- Kundenprojekt jetzt DUNKEL ---- */
.projekt {
  background:
    radial-gradient(ellipse 700px 460px at 88% 6%, rgba(0, 94, 168, 0.24), transparent 62%),
    linear-gradient(180deg, var(--nacht-2), var(--nacht));
}

.projekt .section__titel { color: #fff; }
.projekt .section__titel em { color: var(--blau-hell); }
.projekt .section__kicker { color: #ff6a5e; }
.projekt__text { color: rgba(255, 255, 255, 0.66); }

.projekt__bild { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); }

.ergebnis li { border-left-color: var(--blau-hell); }
.ergebnis strong { color: #fff; }
.ergebnis span { color: rgba(255, 255, 255, 0.62); }

.technik { border-top-color: rgba(255, 255, 255, 0.12); }
.technik__titel { color: rgba(255, 255, 255, 0.5); }

.technik__grid li {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

.technik__grid li:hover {
  background: rgba(0, 94, 168, 0.14);
  border-color: rgba(21, 116, 196, 0.55);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
}

.technik__nr { -webkit-text-stroke-color: rgba(127, 208, 255, 0.5); }
.technik__grid li:hover .technik__nr { color: #7fd0ff; }
.technik__grid strong { color: #fff; }
.technik__grid em { color: rgba(255, 255, 255, 0.6); }

.projekt .pfeil-link { color: #7fd0ff; }
.projekt .pfeil-link:hover { color: #fff; border-color: var(--rot); }

/* ============================================================
   KONFIGURATOR-TEASER + OVERLAY
   ============================================================ */

.kfg-teaser {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}

.kfg-teaser__text { color: var(--s-text); font-size: 17px; margin-top: 16px; max-width: 54ch; }

.kfg-teaser__punkte {
  list-style: none;
  margin: 22px 0 30px;
  display: grid;
  gap: 10px;
}

.kfg-teaser__punkte li {
  position: relative;
  padding-left: 34px;
  color: var(--s-text-stark);
  font-weight: 700;
  font-size: 15.5px;
}

.kfg-teaser__punkte li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 94, 168, 0.12);
  color: var(--blau);
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn--gross { padding: 18px 38px; font-size: 17px; gap: 12px; }
.btn--gross span { transition: transform 0.3s ease; }
.btn--gross:hover span { transform: translateX(5px); }


   /* MIG/MAG */
  /* Cobot */
   /* Drehtisch */
      /* Positionieren */
     /* Sicherheitsschranke */
     /* Sichtschutz */
   /* Absaugung */
     /* Laser */
      /* Industrieroboter */

/* translate3d haelt die Chips auf einem eigenen GPU-Layer */
@keyframes chipSchweben {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -9px, 0); }
}


/* ---- Overlay ---- */

.kfg-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 40px);
  /* dunkler Schleier + Blur ueber der ganzen Seite */
  background: rgba(7, 16, 25, 0.55);
  backdrop-filter: blur(12px) saturate(0.9);
  -webkit-backdrop-filter: blur(12px) saturate(0.9);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.kfg-overlay[hidden] { display: none; }
.kfg-overlay.ist-offen { opacity: 1; }

.kfg-overlay__karte {
  width: min(1180px, 100%);
  max-height: min(92dvh, 92vh);
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  /* Glaskarte */
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px) saturate(1.1);
  -webkit-backdrop-filter: blur(24px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
  transform: translateY(26px) scale(0.97);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.kfg-overlay.ist-offen .kfg-overlay__karte { transform: translateY(0) scale(1); }

.kfg-overlay__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 26px;
  border-bottom: 1px solid rgba(0, 63, 92, 0.12);
  flex: 0 0 auto;
}

.kfg-overlay__kicker {
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rot);
}

.kfg-overlay__kopf h3 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--blau-dunkel);
  line-height: 1;
}

.kfg-overlay__zu {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 63, 92, 0.18);
  border-radius: 50%;
  background: #fff;
  color: var(--blau-dunkel);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.kfg-overlay__zu:hover { background: var(--rot); color: #fff; transform: rotate(90deg); }

.kfg-overlay__inhalt {
  padding: clamp(18px, 3vw, 30px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Zusammenfassung haftet innerhalb des scrollenden Overlays */
.kfg-overlay .kfg__ergebnis { position: sticky; top: 0; }

/* Seite hinter dem Overlay nicht scrollbar */
body.kfg-offen { overflow: hidden; }

@media (max-width: 1080px) {
  .kfg-teaser { grid-template-columns: 1fr; }
  .kfg-overlay .kfg__ergebnis { position: static; }
}

@media (max-width: 640px) {
  .kfg-overlay { padding: 0; }
  .kfg-overlay__karte { max-height: 100dvh; border-radius: 0; }
  .kfg-overlay__kopf h3 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .kfg-overlay, .kfg-overlay__karte { transition: none; }
}

/* ============================================================
   RECHTSSEITEN (Impressum, Datenschutz, Widerruf, AGB)
   ============================================================ */

.recht-hero {
  position: relative;
  padding: calc(var(--nav-gesamt) + 56px) 0 64px;
  background:
    radial-gradient(ellipse 700px 420px at 88% 0%, rgba(0, 94, 168, 0.28), transparent 62%),
    linear-gradient(180deg, var(--nacht), var(--nacht-2));
}

.recht-hero__kicker {
  color: #ff6a5e;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.recht-hero__titel {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(40px, 6vw, 68px);
  line-height: 0.95;
  color: #fff;
}

.recht-hero__stand {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
}

.recht-body {
  background: #fff;
  padding-block: clamp(48px, 6vw, 80px) 100px;
}

.recht-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

/* Inhaltsverzeichnis links, bleibt beim Scrollen stehen */
.recht-toc {
  position: sticky;
  top: calc(var(--nav-gesamt) + 20px);
  border: 1px solid var(--linie);
  border-radius: 16px;
  padding: 20px 20px 22px;
  background: var(--hell);
}

.recht-toc__titel {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 12px;
}

.recht-toc ol {
  list-style: none;
  counter-reset: toc;
  display: grid;
  gap: 2px;
}

.recht-toc li { counter-increment: toc; }

.recht-toc a {
  display: block;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.35;
  transition: background 0.2s ease, color 0.2s ease;
}

.recht-toc a::before {
  content: counter(toc, decimal-leading-zero) "  ";
  color: var(--blau);
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

.recht-toc a:hover { background: #fff; color: var(--blau-dunkel); }

/* Inhalt */
.recht-inhalt { min-width: 0; max-width: 74ch; }

.recht-inhalt h2 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 28px;
  color: var(--blau-dunkel);
  margin: 46px 0 14px;
  scroll-margin-top: calc(var(--nav-gesamt) + 20px);
}

.recht-inhalt section:first-of-type h2 { margin-top: 0; }

.recht-inhalt h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  margin: 26px 0 10px;
}

.recht-inhalt p {
  color: var(--grau);
  margin-bottom: 14px;
}

.recht-inhalt ul,
.recht-inhalt ol.recht-liste {
  margin: 0 0 14px;
  padding-left: 22px;
  color: var(--grau);
}

.recht-inhalt li { margin-bottom: 6px; }

.recht-inhalt a { color: var(--blau); text-decoration: underline; text-decoration-color: rgba(0,94,168,.35); }
.recht-inhalt a:hover { color: var(--blau-dunkel); }

.recht-inhalt strong { color: var(--text); }

.recht-adresse {
  background: var(--hell);
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: 20px 24px;
  margin: 18px 0 26px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
}

.recht-adresse strong { display: block; margin-bottom: 4px; }

.recht-inhalt table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 20px;
  font-size: 14.5px;
}

.recht-inhalt th, .recht-inhalt td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--linie);
  color: var(--grau);
}

.recht-inhalt th { color: var(--text); font-weight: 800; }

.recht-hinweisbox {
  border-left: 3px solid var(--rot);
  background: #fff5f4;
  padding: 14px 18px;
  border-radius: 0 10px 10px 0;
  margin: 20px 0;
  font-size: 14.5px;
  color: var(--text);
}

@media (max-width: 900px) {
  .recht-layout { grid-template-columns: 1fr; }
  .recht-toc { position: static; }
}

/* Status-Meldung nach Formular-Versand (Erfolg/Fehler) */
.formular__status {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 700;
  display: none;
}

.formular__status:empty { display: none; }
.formular__status.ist-erfolg,
.formular__status.ist-fehler { display: block; }

/* Deckende Flaechen statt Transparenz: die Meldung erscheint sowohl im hellen
   Konfigurator als auch auf dem dunklen Kontaktbereich und war dort vorher
   praktisch unlesbar (Kontrast 1,3:1). */
.formular__status.ist-erfolg {
  background: #e4f2fb;
  color: #0a3a5c;
  border: 1px solid #7fb4da;
}

.formular__status.ist-fehler {
  background: #fdeaea;
  color: #971616;
  border: 1px solid #e39b9b;
}

.ist-hell .formular__status.ist-erfolg { background: rgba(0, 94, 168, 0.08); }

/* ============================================================
   ÜBER UNS
   ============================================================ */

/* Bild-Hero der Ueber-uns-Seite */
.ueber-hero {
  position: relative;
  overflow-x: clip;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-gesamt);
  background: var(--nacht);
}

.ueber-hero__bild {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.ueber-hero__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  animation: heroZoom 18s ease-out forwards;
}

.ueber-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 16, 25, 0.94) 0%, rgba(7, 16, 25, 0.72) 45%, rgba(7, 16, 25, 0.35) 100%),
    linear-gradient(0deg, rgba(7, 16, 25, 0.85) 0%, rgba(7, 16, 25, 0.1) 40%);
}

.ueber-hero__inhalt { position: relative; z-index: 2; }

.ueber-hero__titel {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(44px, 6.5vw, 88px);
  line-height: 0.95;
  color: #fff;
  margin-bottom: 18px;
}

.ueber-hero__titel em { font-style: normal; color: var(--blau-hell); }

.ueber-hero__text {
  color: rgba(255, 255, 255, 0.75);
  font-size: 17px;
  max-width: none;
  margin-bottom: 30px;
  white-space: nowrap;
}

/* auf schmalen Screens reicht der Platz nicht: dort darf sie umbrechen */
@media (max-width: 640px) {
  .ueber-hero__text { white-space: normal; }
}

.ueber-intro { background: #fff; }

.ueber-intro__grid {
  display: block;
  max-width: none;
  margin-bottom: clamp(44px, 6vw, 72px);
}

.ueber-intro__kopf { margin-bottom: 24px; }

/* Titel kleiner als der Standard, damit er neben dem Fliesstext nicht dominiert */
.ueber-intro__titel { font-size: clamp(32px, 3.6vw, 46px); margin-bottom: 16px; }

.ueber-intro__kopf p,
.ueber-intro__text p { color: var(--grau); margin-bottom: 16px; }
.ueber-intro__kopf p:last-child,
.ueber-intro__text p:last-child { margin-bottom: 0; }

/* ---- Video-Buehne: volle Breite, Sucher-Rahmen ---- */

.video-buehne {
  position: relative;
  /* so breit wie das Video selbst (900px) plus Innenabstand, nicht die volle Containerbreite */
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: clamp(14px, 2vw, 22px);
  border-radius: 26px;
  background:
    radial-gradient(ellipse 640px 320px at 15% 0%, rgba(221, 51, 51, 0.12), transparent 60%),
    radial-gradient(ellipse 700px 360px at 85% 100%, rgba(0, 94, 168, 0.18), transparent 60%),
    linear-gradient(160deg, #0e2233, var(--nacht));
  border: 1px solid rgba(0, 63, 92, 0.25);
  box-shadow: 0 34px 80px rgba(0, 63, 92, 0.28);
}

.video-buehne .ueber-video { width: 900px; max-width: 100%; }

/* vier Sucher-Ecken, rot, leicht ueberstehend */
.video-buehne__ecke {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 3px solid var(--rot);
  pointer-events: none;
}

.video-buehne__ecke--ol { top: -7px; left: -7px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.video-buehne__ecke--or { top: -7px; right: -7px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.video-buehne__ecke--ul { bottom: -7px; left: -7px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.video-buehne__ecke--ur { bottom: -7px; right: -7px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }

.video-buehne__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 20px;
  padding: 16px 8px 2px;
  max-width: 900px;
  margin-inline: auto;
}

.video-buehne__zeile span {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
}

.video-buehne__zeile em {
  font-style: normal;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}

.ueber-video {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  max-width: 900px;
  margin-inline: auto;
}

.ueber-video__chip {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* KEIN backdrop-filter: die Puls-Animation des Punkts wuerde den Blur
     jeden Frame neu sampeln, das Badge zittert dann sichtbar */
  background: rgba(7, 16, 25, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 999px;
  pointer-events: none;
  transform: translateZ(0);
}

.ueber-video__chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rot);
  animation: chipPuls 1.6s ease-in-out infinite;
}

.ueber-video video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Die Unternehmen: dunkle Sektion, wie .leistungen */
.unternehmen {
  background:
    radial-gradient(ellipse 800px 500px at 85% 0%, rgba(0, 94, 168, 0.25), transparent 60%),
    linear-gradient(180deg, var(--nacht-2), var(--nacht));
}

.unternehmen__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.u-karte {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
  padding: 34px 30px 30px;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.u-karte:hover {
  transform: translateY(-6px);
  border-color: rgba(21, 116, 196, 0.6);
  background: rgba(0, 94, 168, 0.1);
}

/* Firmenlogo auf weissem Chip (Logos haben weissen Hintergrund) */
.u-karte__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 74px;
  padding: 14px 20px;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 18px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.u-karte__logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

.u-karte:hover .u-karte__logo {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

.u-karte__rolle {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7fd0ff;
  margin-bottom: 8px;
}

.u-karte h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.15;
}

.u-karte p { color: rgba(255, 255, 255, 0.65); font-size: 15px; }

/* Team-Grid */
.team { background: var(--hell); }

.block-titel {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 26px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--s-titel);
}

.block-titel span { flex: 0 0 auto; }

.block-titel::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--s-linie), transparent);
}

.block-titel--abstand { margin-top: clamp(52px, 6vw, 84px); }

/* Der gemeinsame Kopf traegt jetzt einen Einleitungssatz */
.section__text {
  color: var(--s-text);
  margin-top: 16px;
  max-width: 560px;
}

.team__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.team__karte {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: 0 14px 30px rgba(0, 63, 92, 0.12);
}

.team__karte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* volle Farbe von Anfang an, kein Graufilter mehr */
  transition: transform 0.5s ease;
}

.team__karte:hover img { transform: scale(1.06); }

.team__karte span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 12px 12px;
  background: linear-gradient(180deg, transparent, rgba(7, 16, 25, 0.85));
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
}

/* CTA */
/* Helle Sektion, weil die Unternehmen-Sektion darueber dunkel ist */
.ueber-cta {
  background:
    radial-gradient(ellipse 900px 600px at 88% 100%, rgba(0, 94, 168, 0.1), transparent 62%),
    linear-gradient(180deg, #ffffff, var(--hell));
}

.ueber-cta__box { text-align: center; max-width: 640px; margin-inline: auto; }
.ueber-cta__box p { color: var(--grau); margin: 16px 0 30px; font-size: 17px; }

@media (max-width: 1080px) {
  .ueber-intro__grid { grid-template-columns: 1fr; gap: 0; }
  .unternehmen__grid { grid-template-columns: 1fr; }
  .team__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .team__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   WIKI-UEBERSICHT
   ============================================================ */

.wiki-hero {
  position: relative;
  overflow-x: clip;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-gesamt);
  background: var(--nacht);
}

.wiki-hero__bild { position: absolute; inset: 0; overflow: hidden; }

.wiki-hero__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center;
  animation: heroZoom 18s ease-out forwards;
}

.wiki-hero__overlay {
  position: absolute;
  inset: 0;
  /* Bild rechts deutlich sichtbar lassen, Text links trotzdem gut lesbar */
  background:
    radial-gradient(ellipse 1100px 700px at 50% 50%, rgba(7, 16, 25, 0.88), rgba(7, 16, 25, 0.62) 55%, rgba(7, 16, 25, 0.45) 100%),
    radial-gradient(ellipse 900px 620px at 82% 40%, rgba(0, 94, 168, 0.24), transparent 62%),
    linear-gradient(0deg, rgba(7, 16, 25, 0.92) 0%, rgba(7, 16, 25, 0) 42%),
    linear-gradient(180deg, rgba(7, 16, 25, 0.75) 0%, rgba(7, 16, 25, 0) 28%);
}

/* feines technisches Raster wie im Haupt-Hero */
.wiki-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 72%, transparent 100%);
  pointer-events: none;
}

.wiki-hero__inhalt {
  position: relative;
  z-index: 2;
  text-align: center;
}

.wiki-hero__kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--rot);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.wiki-hero__kicker-linie {
  width: 54px;
  height: 2px;
  background: var(--rot);
  flex: 0 0 54px;
}

.wiki-hero__titel {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(44px, 6.5vw, 86px);
  line-height: 0.95;
  color: #fff;
  margin-bottom: 18px;
}

.wiki-hero__titel em { font-style: normal; color: var(--blau-hell); }

.wiki-hero__text {
  color: rgba(255, 255, 255, 0.75);
  font-size: 17px;
  max-width: 56ch;
  margin: 0 auto 26px;
}

/* Themen-Chips: zeigen auf einen Blick, was drin steckt */
.wiki-hero__themen {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-bottom: 32px;
}

.wiki-hero__themen li {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 8px 15px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.wiki-hero__aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* Scroll-Indikator unten mittig */
.wiki-hero__scroll {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 38px;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 14px;
}

.wiki-hero__scroll span {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 4px;
  background: var(--rot);
  animation: wikiScrollPunkt 1.8s ease-in-out infinite;
}

@keyframes wikiScrollPunkt {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

@media (max-width: 640px) {
  .wiki-hero__scroll { display: none; }
  .wiki-hero__themen li { font-size: 12px; padding: 7px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .wiki-hero__scroll span { animation: none; }
  .wiki-hero__bild img { animation: none; }
}

/* Suchfeld (aktuell ungenutzt, Markup evtl. spaeter wieder verwendet) */
.wiki-suche {
  position: relative;
  max-width: 480px;
}

.wiki-suche svg {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

.wiki-suche input {
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-text);
  font-size: 16px;
  padding: 16px 20px 16px 52px;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.wiki-suche input::placeholder { color: rgba(255, 255, 255, 0.4); }

.wiki-suche input:focus {
  outline: none;
  border-color: var(--blau-hell);
  background: rgba(255, 255, 255, 0.1);
}

/* ---- Flache Karten-Liste: 4 Spalten, 2 Reihen (8 Beitraege) ---- */

.wiki-liste { background: var(--hell); }

.wiki-grid--acht {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* neunte Kachel: eigene CTA-Karte, schliesst das 3x3-Raster */
.wiki-karte--cta {
  background: linear-gradient(150deg, var(--blau-dunkel), var(--nacht));
  border-color: rgba(21, 116, 196, 0.4);
}

.wiki-karte--cta a { display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: 100%; }
.wiki-karte--cta h3 { color: #fff; }
.wiki-karte--cta p { color: rgba(255, 255, 255, 0.68); }
.wiki-karte--cta span { color: #ff8a7a; }
.wiki-karte--cta:hover { border-color: var(--blau-hell); box-shadow: 0 20px 44px rgba(0, 63, 92, 0.35); }

.wiki-karte {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--linie);
  background: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.wiki-karte:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(0, 63, 92, 0.14);
  border-color: rgba(0, 94, 168, 0.35);
}

.wiki-karte a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 22px 22px;
  text-decoration: none;
  height: 100%;
}

/* "mehr lesen…" bzw. CTA-Link immer ganz unten, egal wie lang Titel/Text sind */
.wiki-karte span { margin-top: auto; padding-top: 4px; }

.wiki-karte h3 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--blau-dunkel);
  line-height: 1.15;
  margin-bottom: 10px;
}

.wiki-karte p { color: var(--grau); font-size: 14.5px; margin-bottom: 16px; }

.wiki-karte span {
  color: var(--blau);
  font-weight: 700;
  font-size: 14px;
}

/* CTA */
.wiki-cta {
  background:
    radial-gradient(ellipse 900px 600px at 12% 100%, rgba(221, 51, 51, 0.16), transparent 60%),
    linear-gradient(180deg, var(--nacht), var(--blau-dunkel));
}

.wiki-cta__box { text-align: center; max-width: 620px; margin-inline: auto; }
.wiki-cta__box p { color: rgba(255, 255, 255, 0.68); margin: 16px 0 30px; font-size: 17px; }

@media (max-width: 1080px) {
  .wiki-grid--acht { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .wiki-grid--acht { grid-template-columns: 1fr; }
  .wiki-suche input { font-size: 15px; padding: 14px 18px 14px 48px; }
}

/* ============================================================
   WIKI-KATEGORIESEITE (z. B. Automatisch schweissen)
   ============================================================ */

.kat-hero {
  position: relative;
  overflow-x: clip;
  padding: calc(var(--nav-gesamt) + clamp(56px, 8vw, 96px)) 0 clamp(56px, 8vw, 88px);
  background: var(--nacht);
}

.kat-hero__bild { position: absolute; inset: 0; overflow: hidden; }

.kat-hero__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center;
}

.kat-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg, rgba(7, 16, 25, 0.95) 0%, rgba(7, 16, 25, 0.82) 45%, rgba(7, 16, 25, 0.55) 100%),
    linear-gradient(0deg, rgba(7, 16, 25, 0.9) 0%, rgba(7, 16, 25, 0) 45%);
}

.kat-hero__inhalt { position: relative; z-index: 2; }

/* Brotkrumen */
.kat-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 18px;
}

.kat-breadcrumb a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.kat-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.kat-breadcrumb span[aria-current] { color: var(--rot); font-weight: 700; }

.kat-hero__titel {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(40px, 5.6vw, 74px);
  line-height: 0.98;
  color: #fff;
  margin-bottom: 16px;
}

.kat-hero__text {
  color: rgba(255, 255, 255, 0.72);
  font-size: 17px;
  max-width: 62ch;
}

/* Beitragsliste */
.kat-liste { background: var(--hell); }

.kat-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.kat-karte {
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.kat-karte:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(0, 63, 92, 0.14);
  border-color: rgba(0, 94, 168, 0.35);
}

.kat-karte a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 24px 22px 22px;
  text-decoration: none;
}

.kat-karte__datum {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rot);
  margin-bottom: 10px;
}

.kat-karte h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--blau-dunkel);
  line-height: 1.12;
  margin-bottom: 10px;
}

.kat-karte p { color: var(--grau); font-size: 14.5px; margin-bottom: 16px; }

/* Link immer buendig am unteren Kartenrand */
.kat-karte__link {
  margin-top: auto;
  padding-top: 4px;
  color: var(--blau);
  font-weight: 700;
  font-size: 14px;
}

.kat-zurueck { margin-top: 40px; display: flex; justify-content: center; }
.kat-zurueck .btn--glas { color: var(--blau-dunkel); border-color: var(--linie); background: #fff; }
.kat-zurueck .btn--glas:hover { border-color: var(--blau); background: rgba(0, 94, 168, 0.07); }

@media (max-width: 1080px) {
  .kat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .kat-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   WIKI-ARTIKELSEITE (Einzelbeitrag mit Sidebar)
   ============================================================ */

.art-hero {
  position: relative;
  overflow-x: clip;
  padding: calc(var(--nav-gesamt) + clamp(48px, 6vw, 76px)) 0 clamp(40px, 5vw, 60px);
  background:
    radial-gradient(ellipse 800px 500px at 85% 10%, rgba(0, 94, 168, 0.28), transparent 62%),
    linear-gradient(180deg, var(--nacht), var(--nacht-2));
}

.art-hero__inhalt { position: relative; z-index: 2; }

.art-hero__datum {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ff8a7a;
  margin-bottom: 12px;
}

.art-hero__titel {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1;
  color: #fff;
  margin-bottom: 16px;
  max-width: 22ch;
}

/* Kategorie-Chips unter dem Titel */
.art-kategorien {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.art-kategorien a {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 7px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.art-kategorien a:hover { border-color: var(--blau-hell); background: rgba(0, 94, 168, 0.2); }

/* ---- Zweispaltiges Layout: Sidebar + Text ---- */

.art-body { background: #fff; padding-block: clamp(44px, 6vw, 72px) 90px; }

.art-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: start;
}

/* Sidebar mit Inhaltsverzeichnis, klebt beim Scrollen mit.
   Keine eigene Scrollbar: bei langen Verzeichnissen scrollt sie sanft
   mit der Seite weiter, statt einen zweiten Scrollbereich zu erzeugen. */
.art-toc {
  position: sticky;
  top: calc(var(--nav-gesamt) + 20px);
  border: 1px solid var(--linie);
  border-radius: 16px;
  background: var(--hell);
  padding: 22px 20px 24px;
}

.art-toc__titel {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 14px;
}

.art-toc ol { list-style: none; counter-reset: toc; display: grid; gap: 2px; }
.art-toc li { counter-increment: toc; }

.art-toc a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.35;
  border-left: 2px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.art-toc a::before {
  content: counter(toc, decimal-leading-zero) "  ";
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--blau);
  letter-spacing: 0.02em;
}

.art-toc a:hover { background: #fff; color: var(--blau-dunkel); }

/* aktiver Abschnitt beim Scrollen (per JS gesetzt) */
.art-toc a.ist-aktiv {
  background: #fff;
  color: var(--blau-dunkel);
  border-left-color: var(--rot);
  font-weight: 700;
}

/* Sidebar-Fuss: Kontaktbox */
.art-toc__kontakt {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--linie);
}

.art-toc__kontakt p { font-size: 13.5px; color: var(--grau); margin-bottom: 10px; }

.art-toc__kontakt a {
  display: inline-block;
  padding: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--rot);
  text-decoration: none;
  border: 0;
}

.art-toc__kontakt a::before { content: none; }
.art-toc__kontakt a:hover { color: var(--rot-dunkel); background: none; }

/* ---- Artikeltext ---- */

.art-inhalt { min-width: 0; max-width: 78ch; }

.art-inhalt h2 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 30px;
  line-height: 1.1;
  color: var(--blau-dunkel);
  margin: 44px 0 14px;
  scroll-margin-top: calc(var(--nav-gesamt) + 20px);
}

.art-inhalt > h2:first-child,
.art-inhalt > *:first-child { margin-top: 0; }

.art-inhalt h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  margin: 28px 0 10px;
  scroll-margin-top: calc(var(--nav-gesamt) + 20px);
}

.art-inhalt h4 {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--text);
  margin: 22px 0 8px;
}

.art-inhalt p { color: var(--grau); margin-bottom: 16px; line-height: 1.75; }

.art-inhalt ul, .art-inhalt ol {
  margin: 0 0 18px;
  padding-left: 0;
  list-style: none;
  color: var(--grau);
}

.art-inhalt li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 9px;
  line-height: 1.7;
}

/* blaue Rauten als Aufzaehlungszeichen, passend zum Industrie-Look */
.art-inhalt ul > li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  width: 7px;
  height: 7px;
  background: var(--blau);
  transform: rotate(45deg);
}

.art-inhalt ol { counter-reset: aufz; }
.art-inhalt ol > li { counter-increment: aufz; }

.art-inhalt ol > li::before {
  content: counter(aufz);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--blau);
}

.art-inhalt strong { color: var(--text); }

/* Fliesstext-Links unterstrichen, Buttons davon ausnehmen */
.art-inhalt a:not(.btn) {
  color: var(--blau);
  text-decoration: underline;
  text-decoration-color: rgba(0, 94, 168, 0.35);
}

.art-inhalt a:not(.btn):hover { color: var(--blau-dunkel); }

.art-inhalt .btn { text-decoration: none; }
.art-inhalt .btn--rot { color: #fff; }
.art-inhalt .btn--rot:hover { color: #fff; }

/* Abschluss unter dem Artikel */
.art-fuss {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--linie);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.art-fuss p { color: var(--grau); font-size: 15px; margin: 0; }

@media (max-width: 980px) {
  .art-layout { grid-template-columns: 1fr; }
  .art-toc { position: static; max-height: none; }
}


/* =========================================================================
   PREMIUM-EBENE
   Weiche Sektionsraender, Bildveredelung, Mikrointeraktionen, Parallax
   ========================================================================= */

/* ---------- 3) Scroll-Choreografie ----------
   Titel und Text steigen leicht, Bilder skalieren zusaetzlich sanft auf. */
.reveal--bild {
  opacity: 0;
  transform: translateY(28px) scale(0.965);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0s);
}

.reveal--bild.sichtbar { opacity: 1; transform: translateY(0) scale(1); }

/* Kinder eines Grids gestaffelt: das Raster gibt den Takt vor, nicht jedes
   Element eine eigene Zahl im HTML */
.staffel > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.staffel.sichtbar > * { opacity: 1; transform: translateY(0); }
.staffel.sichtbar > :nth-child(1) { transition-delay: 0.05s; }
.staffel.sichtbar > :nth-child(2) { transition-delay: 0.13s; }
.staffel.sichtbar > :nth-child(3) { transition-delay: 0.21s; }
.staffel.sichtbar > :nth-child(4) { transition-delay: 0.29s; }
.staffel.sichtbar > :nth-child(5) { transition-delay: 0.37s; }
.staffel.sichtbar > :nth-child(n + 6) { transition-delay: 0.45s; }

/* Parallax: JS setzt --py, das Bild laeuft langsamer als die Seite */
[data-parallax] { will-change: transform; }
[data-parallax] img { transform: translate3d(0, var(--py, 0px), 0) scale(1.12); }

/* ---------- 4) Zahlenband ---------- */
.zahlen {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 900px 260px at 50% 0%, rgba(0, 94, 168, 0.28), transparent 70%),
    linear-gradient(180deg, var(--nacht), var(--nacht-2));
  padding-block: 72px;
}

/* Ruhiges Raster im Hintergrund, gibt der Leiste Tiefe */
.zahlen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 70% 100% at 50% 50%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 50%, #000, transparent 78%);
}

.zahlen > .container { position: relative; z-index: 1; }

.zahlen__wert {
  /* Zahl als Verlauf statt Vollton, dazu ein weicher Schein */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.01em;
}

/* Der Wechsel blau/weiss bleibt erhalten, nur jetzt mit Tiefe */
.zahlen__item:nth-child(odd) .zahlen__wert {
  background-image: linear-gradient(180deg, #6fb6f0 12%, var(--blau-hell) 62%, #0d5a9e 100%);
  filter: drop-shadow(0 0 24px rgba(21, 116, 196, 0.5));
}

.zahlen__item:nth-child(even) .zahlen__wert {
  background-image: linear-gradient(180deg, #ffffff 28%, rgba(176, 214, 244, 0.9) 100%);
  filter: drop-shadow(0 0 22px rgba(21, 116, 196, 0.32));
}

.zahlen__item {
  /* Spalte, damit der Akzentstrich per order zwischen Zahl und Label passt */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.zahlen__wert { order: 0; }
.zahlen__label { order: 2; }

.zahlen__item::after {
  /* kurzer Akzentstrich zwischen Zahl und Label */
  content: "";
  order: 1;
  width: 26px;
  height: 2px;
  margin: 12px 0 14px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--rot), var(--blau-hell));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

.staffel.sichtbar .zahlen__item::after { transform: scaleX(1); }

.zahlen__label { position: relative; }

.zahlen__item:not(:first-child)::before {
  /* Trennlinie laeuft zu den Enden hin aus */
  background: linear-gradient(180deg, transparent, var(--linie-hell) 25%, var(--linie-hell) 75%, transparent);
}

/* ---------- 5) Bildveredelung ----------
   Alle Fotos bekommen dieselbe kuehle Tonung, damit gemischtes Bildmaterial
   wie eine Serie wirkt. */
.hero__bild img,
.projekt__bild img,
.ueber-hero__bild img,
.wiki-hero__bild img,
.kat-hero__bild img {
  filter: saturate(0.82) contrast(1.06) brightness(0.98);
}

/* Galerie: nur die offene Karte wird getont, die zugeklappten behalten
   ihren eigenen Unschaerfe-Filter */
.g-karte.ist-aktiv img { filter: saturate(0.82) contrast(1.06) brightness(0.98); }

/* Vignette auf grossen Bildflaechen, zieht den Blick in die Mitte */
.projekt__bild::after,
.g-karte::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse 120% 100% at 50% 45%, transparent 52%, rgba(7, 16, 25, 0.34) 100%),
    linear-gradient(180deg, rgba(0, 94, 168, 0.1), transparent 45%);
}

.projekt__bild { isolation: isolate; }
.projekt__badge { z-index: 3; }

/* ---------- 6) Mikrointeraktionen ----------
   Lichtreflex folgt dem Zeiger, JS liefert --mx/--my in Prozent. */
.l-karte::after,
.kdaten__karte::after,
.partner__logo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(21, 116, 196, 0.18), transparent 62%);
}

.l-karte:hover::after,
.kdaten__karte:hover::after { opacity: 1; }

.partner__logo { position: relative; overflow: hidden; }
.partner__logo::after {
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(0, 94, 168, 0.12), transparent 60%);
}
.partner__logo:hover::after { opacity: 1; }

.kdaten__karte { position: relative; overflow: hidden; }

/* Buttons bekommen einen Lichtstreif, der beim Hover durchlaeuft */
.btn--rot, .nav__cta {
  position: relative;
  overflow: hidden;
}

.btn--rot::after, .nav__cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  width: 60%;
  height: 100%;
  pointer-events: none;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
}

.btn--rot:hover::after, .nav__cta:hover::after { animation: schimmer 0.85s ease; }

@keyframes schimmer {
  from { left: -140%; }
  to   { left: 140%; }
}

/* ---------- 7) Kontaktsektion als Abschluss ---------- */
.kontakt {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.kontakt__hintergrund {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.kontakt__hintergrund img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  filter: saturate(0.55) contrast(1.1) brightness(0.6);
  transform: translate3d(0, var(--py, 0px), 0) scale(1.14);
}

.kontakt__hintergrund::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 900px 620px at 14% 22%, rgba(0, 94, 168, 0.45), transparent 62%),
    linear-gradient(180deg, rgba(7, 16, 25, 0.88), rgba(0, 63, 92, 0.92));
}

/* ---------- Weniger Bewegung: alles ruhig stellen ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal--bild { opacity: 1; transform: none; transition: none; }
  .staffel > * { opacity: 1; transform: none; transition: none; }
  .zahlen__item::after { transform: scaleX(1); transition: none; }
  [data-parallax] img,
  .kontakt__hintergrund img { transform: none; }
  .btn--rot:hover::after, .nav__cta:hover::after { animation: none; }
}


/* =========================================================================
   COOKIE-HINWEIS
   ========================================================================= */

.cookie {
  position: fixed;
  left: 50%;
  bottom: clamp(12px, 2.4vw, 24px);
  transform: translate(-50%, 24px);
  z-index: 300;
  width: min(1060px, calc(100vw - 24px));
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.cookie.ist-sichtbar { opacity: 1; transform: translate(-50%, 0); }

/* Text links, Knoepfe rechts: macht die Leiste breit und flach */
.cookie__karte {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 42px);
  background: linear-gradient(180deg, rgba(7, 16, 25, 0.97), rgba(11, 26, 40, 0.97));
  border: 1px solid var(--linie-hell);
  border-radius: 18px;
  padding: 18px clamp(20px, 2.4vw, 28px);
  box-shadow: 0 22px 60px rgba(0, 10, 20, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.cookie__inhalt { flex: 1 1 auto; min-width: 0; }

.cookie__titel {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 500;
  color: #fff;
  margin: 0 0 4px;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.cookie__text {
  color: var(--text-hell);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

.cookie__knoepfe {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cookie__knoepfe .btn {
  justify-content: center;
  padding-inline: 26px;
  font-size: 14px;
  white-space: nowrap;
}

.cookie__mehr {
  background: none;
  border: 0;
  color: var(--text-hell);
  font-family: var(--font-text);
  font-size: 13.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 10px 14px;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.cookie__mehr:hover { color: #fff; }

/* ---------- Einstellungs-Dialog ---------- */
/* display: flex wuerde das hidden-Attribut aushebeln, dann laege der
   unsichtbare Dialog ueber der Seite und schluckte jeden Klick. */
.cookie-dialog[hidden] { display: none; }

.cookie-dialog {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 10, 17, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cookie-dialog.ist-offen { opacity: 1; }

.cookie-dialog__karte {
  width: min(560px, 100%);
  max-height: min(84vh, 720px);
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(7, 16, 25, 0.98), rgba(11, 26, 40, 0.98));
  border: 1px solid var(--linie-hell);
  border-radius: 22px;
  padding: 32px clamp(22px, 4vw, 34px) 28px;
  box-shadow: 0 34px 90px rgba(0, 10, 20, 0.6);
  transform: translateY(18px) scale(0.98);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.cookie-dialog.ist-offen .cookie-dialog__karte { transform: translateY(0) scale(1); }

.cookie-dialog__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.cookie-dialog__kopf h2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  color: #fff;
  margin: 0;
  line-height: 1.05;
}

.cookie-dialog__zu {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--linie-hell);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.cookie-dialog__zu:hover { background: rgba(255, 255, 255, 0.12); transform: rotate(90deg); }

.cookie-dialog__text {
  color: var(--text-hell);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0 0 22px;
}

/* ---------- Kategorien ---------- */
.cookie-kat {
  display: block;
  border: 1px solid var(--linie-hell);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  padding: 18px 20px;
  margin-bottom: 12px;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.cookie-kat:has(input:checked) {
  border-color: rgba(21, 116, 196, 0.55);
  background: rgba(0, 94, 168, 0.12);
}

.cookie-kat__kopf {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.cookie-kat__name {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.02em;
}

.cookie-kat__text {
  display: block;
  color: var(--text-hell);
  font-size: 13.5px;
  line-height: 1.6;
  margin: 8px 0 0;
}

.cookie-kat__dienst {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* Schiebeschalter */
.cookie-kat input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.cookie-schalter {
  flex-shrink: 0;
  width: 50px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid var(--linie-hell);
  position: relative;
  cursor: pointer;
  transition: background 0.28s ease, border-color 0.28s ease;
}

.cookie-schalter::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.cookie-kat input:checked + .cookie-schalter {
  background: var(--blau);
  border-color: var(--blau-hell);
}

.cookie-kat input:checked + .cookie-schalter::after { transform: translateX(22px); }

.cookie-kat input:focus-visible + .cookie-schalter {
  outline: 2px solid var(--blau-hell);
  outline-offset: 3px;
}

/* Notwendige Kategorie: an, aber nicht abwaehlbar */
.cookie-kat--fest { opacity: 0.9; }
.cookie-kat--fest .cookie-schalter { background: rgba(21, 116, 196, 0.5); cursor: not-allowed; }
.cookie-kat--fest .cookie-schalter::after { transform: translateX(22px); }

.cookie-kat--leer { opacity: 0.82; }

.cookie-kat__aus {
  flex-shrink: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--linie-hell);
  border-radius: 999px;
  padding: 5px 12px;
}

.cookie-dialog__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.cookie-dialog__fuss .btn { flex: 1 1 160px; justify-content: center; font-size: 14px; }

.cookie-dialog__rechtlich {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
}

.cookie-dialog__rechtlich a { color: rgba(255, 255, 255, 0.72); text-decoration: underline; }
.cookie-dialog__rechtlich a:hover { color: #fff; }

/* Footer-Eintrag sieht aus wie die Links daneben */
/* Der Cookie-Knopf im Footer sieht aus wie die Links daneben. font:inherit
   nahm die Groesse des Buttons (16px), nicht die der Nachbarn (14,5px). */
.footer__nav .footer__cookie {
  background: none;
  border: 0;
  padding: 5px 0;
  font: inherit;
  font-size: 14.5px;
  line-height: inherit;
  color: rgba(255, 255, 255, 0.65);
  text-align: left;
  width: fit-content;
  cursor: pointer;
  transition: color 0.25s ease, transform 0.25s ease;
}
.footer__nav .footer__cookie:hover { color: #fff; transform: translateX(4px); }
/* ausserhalb des Footers (Landingpage-Fuss) bleibt es ein schlichter Textknopf */
.footer__cookie { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }

body.kein-scroll { overflow: hidden; }

@media (max-width: 780px) {
  .cookie { width: calc(100vw - 20px); bottom: 10px; }
  .cookie__karte { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 18px 16px; }
  .cookie__knoepfe { justify-content: space-between; }
  .cookie__knoepfe .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie, .cookie-dialog, .cookie-dialog__karte,
  .cookie-schalter, .cookie-schalter::after { transition: none; }
  .cookie-dialog__zu:hover { transform: none; }
}


/* =========================================================================
   VERGLEICH VARIANTE B: dunkles Glas-Panel im hellen Abschnitt
   Baut sich beim Hereinscrollen zusammen, Zeilen mit Zeiger-Lichtreflex
   ========================================================================= */

.vgl2 {
  background:
    radial-gradient(ellipse 700px 460px at 12% 8%, rgba(221, 51, 51, 0.06), transparent 62%),
    radial-gradient(ellipse 760px 500px at 88% 92%, rgba(0, 94, 168, 0.09), transparent 62%),
    linear-gradient(180deg, #ffffff, var(--hell));
}

/* das Panel: eine riesige dunkle Glas-Karte. Das Innenleben ist immer
   dunkel, deshalb feste rgba-Werte statt der ist-hell Sektionsvariablen */
.vgl2__panel {
  /* gemeinsames Spaltenraster fuer Kopf und Zeilen: Minus, Mitte, Plus */
  --vgl2-spalten: minmax(0, 1fr) clamp(120px, 14vw, 176px) minmax(0, 1fr);
  position: relative;
  background:
    radial-gradient(ellipse 640px 420px at 85% 0%, rgba(0, 94, 168, 0.3), transparent 60%),
    radial-gradient(ellipse 520px 360px at 6% 100%, rgba(221, 51, 51, 0.1), transparent 62%),
    linear-gradient(180deg, var(--nacht-2), var(--nacht));
  border: 1px solid var(--linie-hell);
  border-radius: 24px;
  box-shadow: 0 30px 70px rgba(0, 63, 92, 0.25);
  overflow: hidden;
}

/* feine Lichtkante oben, laesst das Glas leben */
.vgl2__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
}

/* ---- Kopfzeile ---- */

.vgl2__kopf {
  display: grid;
  grid-template-columns: var(--vgl2-spalten);
  align-items: center;
  padding: 26px 34px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.vgl2__seite {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* die manuelle Seite tritt bewusst zurueck und laeuft auf die Mitte zu */
.vgl2__seite--manuell {
  color: rgba(255, 255, 255, 0.45);
  text-align: right;
}

.vgl2__seite--auto {
  color: #fff;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* rote Empfohlen-Pille wie an der alten Matrix */
.vgl2__empfohlen {
  font-style: normal;
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--rot);
  padding: 6px 12px;
  border-radius: 999px;
  transform: translateY(-2px);
}

/* rotes VS-Medaillon mit pulsierendem Schleier */
.vgl2__vs { display: grid; place-items: center; }

.vgl2__vs i {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--rot);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding-top: 3px;
  animation: vgl2Schleier 2.8s ease-in-out infinite;
}

@keyframes vgl2Schleier {
  0%, 100% { box-shadow: 0 12px 28px rgba(221, 51, 51, 0.3), 0 0 0 0 rgba(221, 51, 51, 0.5); }
  50%      { box-shadow: 0 12px 28px rgba(221, 51, 51, 0.3), 0 0 0 16px rgba(221, 51, 51, 0); }
}

/* ---- Kriterien-Zeilen ---- */

.vgl2__zeilen { margin: 0; }

.vgl2__zeile {
  position: relative;
  display: grid;
  grid-template-columns: var(--vgl2-spalten);
  align-items: center;
  transition: background 0.3s ease;
}

.vgl2__zeile + .vgl2__zeile { border-top: 1px solid rgba(255, 255, 255, 0.07); }

.vgl2__zeile:hover { background: rgba(0, 94, 168, 0.08); }

/* Lichtreflex folgt dem Zeiger, --mx/--my liefert das vorhandene Skript */
.vgl2__zeile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
    rgba(21, 116, 196, 0.13), transparent 62%);
}

.vgl2__zeile:hover::after { opacity: 1; }

/* Spaltenplaetze: Minus links, Kriterium mittig, Plus rechts */
.vgl2__minus     { grid-column: 1; grid-row: 1; }
.vgl2__kriterium { grid-column: 2; grid-row: 1; }
.vgl2__plus      { grid-column: 3; grid-row: 1; }

/* Mittelsaeule: Konturziffer hinter dem Kriterium, wie l-karte__nr */
.vgl2__kriterium {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: 12px 8px;
  border-inline: 1px solid rgba(255, 255, 255, 0.07);
}

.vgl2__krit {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.9);
  transition: color 0.3s ease;
}

.vgl2__zeile:hover .vgl2__krit { color: #7fd0ff; }

/* Minus und Plus flankieren spiegelsymmetrisch die Mittelsaeule */
.vgl2__minus,
.vgl2__plus {
  margin: 0;
  position: relative;
  padding: 18px 30px;
  font-size: 15.5px;
  line-height: 1.45;
}

/* rechtsbuendig zur Mitte hin, Icon spiegelt den Haken der Plus-Spalte */
.vgl2__minus {
  text-align: right;
  padding-right: 64px;
  color: rgba(255, 255, 255, 0.55);
}

/* Plus-Spalte traegt die blaue Seiten-Codierung der Empfehlung */
.vgl2__plus {
  padding-left: 64px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
  box-shadow: inset 3px 0 0 rgba(21, 116, 196, 0.45);
  background: linear-gradient(90deg, rgba(0, 94, 168, 0.07), transparent 55%);
}

.vgl2__minus::after,
.vgl2__plus::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* rot-gedimmtes Kreuz auf der manuellen Seite */
.vgl2__minus::after {
  content: "\00d7";
  right: 26px;
  background: rgba(221, 51, 51, 0.16);
  border: 1px solid rgba(221, 51, 51, 0.35);
  color: #ff8a80;
}

/* satter blauer Haken auf der automatisierten Seite */
.vgl2__plus::before {
  content: "\2713";
  left: 26px;
  background: linear-gradient(135deg, var(--blau-hell), var(--blau));
  color: #fff;
  box-shadow: 0 6px 14px rgba(0, 94, 168, 0.35);
}

/* Hover: die Chips wachsen leicht, der Haken glueht auf */
.vgl2__zeile:hover .vgl2__minus::after { transform: translateY(-50%) scale(1.12); }
.vgl2__zeile:hover .vgl2__plus::before {
  transform: translateY(-50%) scale(1.15);
  box-shadow: 0 6px 18px rgba(21, 116, 196, 0.6), 0 0 22px rgba(21, 116, 196, 0.45);
}

/* ---- Fuss ---- */

.vgl2__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.vgl2__fuss p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- Zusammenbau beim Hereinscrollen ----
   Der Reveal-Beobachter setzt "sichtbar" aufs Panel, alle Teile fahren
   dann choreografiert an ihren Platz: Kopf zuerst, Zeilen von beiden
   Seiten zur Mitte, das VS-Medaillon ploppt, der Fuss kommt zuletzt. */

.vgl2__panel.reveal .vgl2__seite--manuell,
.vgl2__panel.reveal .vgl2__minus {
  opacity: 0;
  transform: translateX(-44px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.vgl2__panel.reveal .vgl2__seite--auto,
.vgl2__panel.reveal .vgl2__plus {
  opacity: 0;
  transform: translateX(44px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.vgl2__panel.reveal .vgl2__kriterium {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.34, 1.4, 0.5, 1);
}

.vgl2__panel.reveal .vgl2__vs i {
  opacity: 0;
  transform: scale(0.25) rotate(-120deg);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vgl2__panel.reveal .vgl2__fuss > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Taktung: Kopf 0.05s, Zeilen ab 0.3s im 0.1s-Takt, Mitte je 0.08s spaeter */
.vgl2__panel.reveal .vgl2__seite--manuell,
.vgl2__panel.reveal .vgl2__seite--auto { transition-delay: 0.05s; }
.vgl2__panel.reveal .vgl2__vs i { transition-delay: 0.4s; }
.vgl2__panel.reveal .vgl2__minus,
.vgl2__panel.reveal .vgl2__plus { transition-delay: calc(0.3s + var(--r, 0) * 0.1s); }
.vgl2__panel.reveal .vgl2__kriterium { transition-delay: calc(0.38s + var(--r, 0) * 0.1s); }
.vgl2__panel.reveal .vgl2__fuss > * { transition-delay: 1.05s; }
.vgl2__panel.reveal .vgl2__fuss .btn { transition-delay: 1.15s; }

/* sichtbar: alles faehrt an seinen Platz */
.vgl2__panel.reveal.sichtbar .vgl2__seite--manuell,
.vgl2__panel.reveal.sichtbar .vgl2__seite--auto,
.vgl2__panel.reveal.sichtbar .vgl2__minus,
.vgl2__panel.reveal.sichtbar .vgl2__plus,
.vgl2__panel.reveal.sichtbar .vgl2__kriterium,
.vgl2__panel.reveal.sichtbar .vgl2__vs i,
.vgl2__panel.reveal.sichtbar .vgl2__fuss > * {
  opacity: 1;
  transform: none;
}

/* ---- Responsive ---- */

@media (max-width: 980px) {
  .vgl2__panel { --vgl2-spalten: minmax(0, 1fr) clamp(96px, 13vw, 130px) minmax(0, 1fr); }

  .vgl2__kopf { padding: 20px 22px 18px; }

  .vgl2__minus, .vgl2__plus { padding: 16px 22px; font-size: 15px; }
  .vgl2__minus { padding-right: 54px; }
  .vgl2__plus { padding-left: 54px; }
  .vgl2__minus::after { right: 20px; }
  .vgl2__plus::before { left: 20px; }

  .vgl2__krit { font-size: 18px; }

  .vgl2__fuss { padding: 22px; }
}

/* Ab hier wird die Mittelsaeule zu eng: jede Zeile wird zur kleinen Karte,
   Kriterium oben, Minus und Plus darunter */
/* Mobil, Konzept "Empfehlung im Fokus": jede Zeile wird zur kleinen Karte.
   Kriterium als Overline-Label, die Plus-Aussage steht gross auf blauer
   Glasflaeche im Mittelpunkt, die Minus-Aussage ordnet sich klein darunter */
@media (max-width: 840px) {

  /* ---- Kopf: kompaktes Duell-Schild statt drei Spalten ----
     VS-Medaillon links ueber beide Zeilen, rechts daneben die Welten
     gestapelt: Manuell klein und gedimmt oben, Automatisiert gross
     darunter, das Empfohlen-Badge haengt direkt am Wort */
  .vgl2__kopf {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 3px;
    align-items: center;
    padding: 20px 18px 18px;
  }

  .vgl2__vs {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .vgl2__vs i { width: 44px; height: 44px; font-size: 19px; }

  /* die unterlegene Seite: klein, breit gesperrt, stark zurueckgenommen */
  .vgl2__seite--manuell {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    font-size: 17px;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.38);
  }

  /* die Empfehlung: gross und weiss, Badge haengt in der Wortzeile
     und bricht auf sehr schmalen Geraeten sauber darunter um */
  .vgl2__seite--auto {
    grid-column: 2;
    grid-row: 2;
    font-size: clamp(24px, 7vw, 30px);
    gap: 10px;
  }

  .vgl2__empfohlen {
    /* Teko-Versalien sitzen im oberen Teil ihrer Zeilenbox, mittige
       Ausrichtung wirkt deshalb zu tief. Die Pille zieht leicht nach oben. */
    transform: translateY(-2px);
    font-size: 10px;
    padding: 5px 10px;
    letter-spacing: 0.14em;
    box-shadow: 0 6px 14px rgba(221, 51, 51, 0.35);
  }

  /* ---- Zeilen: gestapelte Karten, eine Spalte ---- */
  .vgl2__zeile {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px 18px 18px;
  }

  /* Kriterium als Overline: kurze blaue Linie, dann das Teko-Label */
  .vgl2__kriterium {
    grid-column: 1;
    grid-row: 1;
    align-self: auto;
    justify-self: stretch;   /* volle Breite, damit die Fuelllinie rechts auslaufen kann */
    border-inline: 0;
    padding: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* kurze Akzentlinie vor dem Label: rot nach blau, das Duell im Kleinen */
  .vgl2__kriterium::before {
    content: "";
    width: 18px;
    height: 2px;
    border-radius: 999px;
    flex: 0 0 auto;
    background: linear-gradient(90deg, var(--rot), var(--blau-hell));
  }

  /* feine Fuelllinie hinter dem Label, laeuft nach rechts aus */
  .vgl2__kriterium::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.13), transparent);
  }

  .vgl2__krit {
    font-size: 15px;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.55);
  }

  /* Die Plus-Aussage ist der Star: eigene blaue Glasflaeche mit
     Akzentkante innen links, grosser weisser Text, Haken mittig davor */
  .vgl2__plus {
    grid-column: 1;
    grid-row: 2;
    margin: 0 0 11px;
    padding: 13px 14px 13px 50px;
    text-align: left;
    font-size: 16px;
    line-height: 1.4;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(21, 116, 196, 0.18), rgba(255, 255, 255, 0.03) 70%);
    border: 1px solid rgba(21, 116, 196, 0.32);
    border-radius: 12px;
    box-shadow:
      inset 3px 0 0 rgba(21, 116, 196, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 8px 20px rgba(0, 0, 0, 0.2);
  }

  /* Haken bleibt 22px und zentriert sich an der Kartenhoehe */
  .vgl2__plus::before {
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Die Minus-Aussage ordnet sich unter: klein, gedimmt, wie eine
     Fussnote unter der Empfehlung, mit verkleinertem X davor */
  .vgl2__minus {
    grid-column: 1;
    grid-row: 3;
    margin: 0;
    padding: 0 0 0 30px;
    text-align: left;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.45);
  }

  .vgl2__minus::after {
    left: 0;
    right: auto;
    top: 1px;
    transform: none;
    width: 19px;
    height: 19px;
    font-size: 10px;
  }

  /* Hover-Wachsen des X ohne den Zentrier-Versatz des Desktops,
     der Haken behaelt seine Desktop-Hover-Regel (translateY bleibt) */
  .vgl2__zeile:hover .vgl2__minus::after { transform: scale(1.08); }

  /* ---- Fuss: Fazit mittig, Button in voller Breite ---- */
  .vgl2__fuss {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 22px 18px 24px;
    text-align: center;
    background: linear-gradient(180deg, rgba(0, 94, 168, 0.08), rgba(255, 255, 255, 0.02));
  }

  .vgl2__fuss p { font-size: 15px; color: rgba(255, 255, 255, 0.8); }

  .vgl2__fuss .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* Sehr schmale Geraete: alles einen Tick kompakter, kein Ueberlauf */
@media (max-width: 560px) {
  .vgl2__kopf { padding: 18px 16px 16px; column-gap: 13px; }

  .vgl2__vs i { width: 40px; height: 40px; font-size: 17px; }

  .vgl2__seite--manuell { font-size: 15px; }
  .vgl2__seite--auto { font-size: clamp(22px, 7.5vw, 26px); gap: 8px; }
  .vgl2__empfohlen { padding: 4px 9px; }

  .vgl2__zeile { padding: 15px 16px 17px; }

  .vgl2__krit { font-size: 14px; }

  .vgl2__plus { font-size: 15px; padding: 12px 12px 12px 46px; }
  .vgl2__plus::before { left: 13px; }

  .vgl2__minus { font-size: 13px; }

  .vgl2__fuss { padding: 20px 16px 22px; }
}

/* Weniger Bewegung: alles steht sofort, kein Puls, kein Zusammenbau */
@media (prefers-reduced-motion: reduce) {
  .vgl2__vs i { animation: none; }

  .vgl2__panel.reveal .vgl2__seite--manuell,
  .vgl2__panel.reveal .vgl2__seite--auto,
  .vgl2__panel.reveal .vgl2__minus,
  .vgl2__panel.reveal .vgl2__plus,
  .vgl2__panel.reveal .vgl2__kriterium,
  .vgl2__panel.reveal .vgl2__vs i,
  .vgl2__panel.reveal .vgl2__fuss > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* Kleine Geraetehoehen: Klappmenue weiter zusammenruecken, damit die
   Kontaktzeile samt Sozial-Icons ohne Scrollen sichtbar bleibt */
@media (max-width: 1080px) and (max-height: 780px) {
  /* nur unten und seitlich straffen: das obere Padding haelt den Platz
     fuer die Header-Pille frei, sonst verschwinden die ersten Links */
  .nav__menu { padding-inline: 22px; padding-bottom: 16px; }
  .nav__menu a { padding: 10px 4px; font-size: 17px; }
  .nav__menu-cta { margin-top: 10px; padding: 12px 22px !important; font-size: 15px; }
  .nav__direkt { padding-top: 14px; }
  .nav__direkt__titel { margin-bottom: 6px; font-size: 14px; }
  .nav__direkt a { padding: 7px 0 !important; font-size: 14px !important; }
  .nav__direkt__sozial { margin-top: 10px; }
  .nav__direkt__sozial a { width: 36px; height: 36px; }
}


/* =========================================================================
   MOBILER HERO
   Ohne Galerie, alles mittig, Hoehe exakt ein Bildschirm, damit die
   Laufschrift auf jedem Geraet genau am unteren Rand sitzt
   ========================================================================= */

@media (max-width: 780px) {
  :root { --marquee-hoehe: 58px; }

  /* svh statt vh: rechnet mit eingeblendeten Browserleisten, sonst rutscht
     die Laufschrift auf iOS unter den sichtbaren Bereich */
  .hero {
    min-height: 100svh;
    height: 100svh;
  }

  /* die Karten-Galerie entfaellt, sie kostet auf dem Handy nur Hoehe */
  .hero__galerie { display: none; }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: 0;
    align-items: center;
  }

  .hero__inhalt {
    width: min(100%, 100% - 40px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Platz fuer Header oben und Laufschrift unten */
    padding-top: calc(var(--nav-gesamt) + 12px);
    padding-bottom: calc(var(--marquee-hoehe, 60px) + 24px);
    min-height: 0;
  }

  /* alles mittig ausrichten */
  .hero__links {
    text-align: center;
    transform: none;
    width: 100%;
    margin: 0;
  }

  .hero__kicker {
    width: auto;
    justify-content: center;
    margin-inline: auto;
  }

  /* die Linie vor dem Kicker wuerde die Zentrierung verziehen */
  .hero__kicker-linie { display: none; }

  .hero__untertitel,
  .hero__titel,
  .hero__text {
    text-align: center;
    margin-inline: auto;
  }

  /* Auf dem Handy die kurze Fassung: der lange Text bricht wegen
     "Schweißroboter-Lösungen" immer ungleich um und laeuft trichterfoermig
     zu. Volle Breite plus balance ergibt zwei fast gleich lange Zeilen. */
  .hero__text {
    max-width: 100%;
    text-wrap: balance;
  }

  .hero__text .nur-breit { display: none; }
  .hero__text .nur-schmal { display: inline; }

  /* Buttons ueber die volle Breite, untereinander */
  .hero__aktionen {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }

  .hero__aktionen .btn {
    width: 100%;
    justify-content: center;
  }

  .hero__scroll,
  .hero__naht,
  .hero__funken { display: none; }
}

/* Sehr flache Geraete: Textblock weiter straffen, damit nichts ueberlaeuft */
@media (max-width: 780px) and (max-height: 720px) {
  .hero__text { display: none; }
  .hero__inhalt { padding-top: calc(var(--nav-gesamt) + 6px); }
}


/* =========================================================================
   MOBILE FEINSCHLIFF
   ========================================================================= */

@media (max-width: 780px) {
  /* Rufnummer nicht umbrechen lassen, lieber etwas kleiner setzen */
  .direktruf__text strong {
    white-space: nowrap;
    font-size: clamp(17px, 4.6vw, 21px);
  }

  .direktruf { padding: 16px 18px; gap: 13px; }

  /* Konfigurator-Teaser: Knopf ueber die volle Breite statt halb im Raum */
  #kfgOeffnen {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  /* Ueber uns: Hero mittig wie auf der Startseite */
  .ueber-hero__inhalt { text-align: center; }

  .ueber-hero__inhalt .hero__kicker {
    justify-content: center;
    margin-inline: auto;
  }

  /* die Linie vor dem Kicker verzieht die Zentrierung */
  .ueber-hero__inhalt .hero__kicker-linie { display: none; }

  .ueber-hero__titel,
  .ueber-hero__text {
    text-align: center;
    margin-inline: auto;
  }

  /* der harte Umbruch im Titel passt nur zum breiten Layout */
  .ueber-hero__titel br { display: none; }

  .ueber-hero__inhalt .hero__aktionen {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .ueber-hero__inhalt .hero__aktionen .btn {
    width: 100%;
    justify-content: center;
  }
}


/* =========================================================================
   LEISTUNGEN: 3D-Flip-Karten
   Vorderseite wie bisher, bei Hover dreht sich die Karte und zeigt Details.
   Auf Touchgeraeten uebernimmt ein Tippen die Drehung (siehe main.js).
   ========================================================================= */

.l-karte--dreh {
  /* Die Aussenhuelle traegt nur noch die Perspektive, Rahmen und Flaeche
     sitzen auf den beiden Seiten. overflow muss sichtbar bleiben, sonst
     kappt der Browser die 3D-Darstellung. */
  background: none;
  border: 0;
  padding: 0;
  overflow: visible;
  perspective: 1600px;
  outline: none;
}

/* das Anheben bei Hover entfaellt, es wuerde sich mit der Drehung beissen */
.l-karte--dreh:hover { transform: none; background: none; }

/* der Lichtreflex sitzt jetzt auf den Seiten, nicht auf der Huelle */
.l-karte--dreh::after { display: none; }

.l-karte__innen {
  position: relative;
  display: grid;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;   /* Safari kippt sonst in die flache Darstellung */
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover am Zeiger, Fokus per Tastatur, Klick auf Touchgeraeten */
.l-karte--dreh:hover .l-karte__innen,
.l-karte--dreh:focus-visible .l-karte__innen,
.l-karte--dreh.ist-gedreht .l-karte__innen {
  transform: rotateY(180deg);
}

/* beide Seiten liegen in derselben Rasterzelle, dadurch ist die Karte
   automatisch so hoch wie die laengere von beiden */
.l-karte__seite {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  padding: 34px 30px 30px;
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Das overflow:hidden oben erzwingt in Safari und Firefox eine flache
     Darstellung, dadurch wird backface-visibility wirkungslos und die
     abgewandte Seite erscheint spiegelverkehrt. Deshalb wird die jeweils
     abgewandte Seite zusaetzlich ausgeblendet, und zwar in dem Moment, in dem
     die Karte hochkant steht und der Wechsel nicht auffaellt.
     ACHTUNG beim Anpassen: die Drehung nutzt cubic-bezier(0.22, 1, 0.36, 1),
     eine starke Ease-out-Kurve. Die 90-Grad-Stellung ist deshalb schon nach
     13 Prozent der Laufzeit erreicht, also nach 98ms von 750ms, NICHT zur
     Haelfte. Ein spaeterer Wert laesst die Karte kurz ganz verschwinden. */
  transition: border-color 0.35s ease, opacity 0s linear 0.098s;
}

.l-karte__vorne {
  background: rgba(255, 255, 255, 0.04);
  opacity: 1;
}

.l-karte--dreh:hover .l-karte__vorne,
.l-karte--dreh:focus-visible .l-karte__vorne,
.l-karte--dreh.ist-gedreht .l-karte__vorne { opacity: 0; }

.l-karte--dreh:hover .l-karte__hinten,
.l-karte--dreh:focus-visible .l-karte__hinten,
.l-karte--dreh.ist-gedreht .l-karte__hinten { opacity: 1; }

.l-karte__hinten {
  opacity: 0;
  transform: rotateY(180deg);
  justify-content: center;
  background:
    radial-gradient(ellipse 420px 300px at 80% 0%, rgba(21, 116, 196, 0.28), transparent 65%),
    linear-gradient(160deg, rgba(0, 94, 168, 0.22), rgba(7, 16, 25, 0.55));
  border-color: rgba(21, 116, 196, 0.55);
}

.l-karte--dreh:hover .l-karte__vorne,
.l-karte--dreh.ist-gedreht .l-karte__vorne { border-color: rgba(21, 116, 196, 0.6); }

/* feine Lichtkante oben auf der Rueckseite, wie am grossen Panel */
.l-karte__hinten::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

/* ---- Vorderseite ---- */

.l-karte__vorne p { margin-bottom: 0; }

/* dezenter Hinweis unten rechts, dass sich die Karte drehen laesst */
.l-karte__dreh-hinweis {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.35s ease;
}

.l-karte--dreh:hover .l-karte__dreh-hinweis { color: var(--blau-hell); }

.l-karte__dreh-hinweis svg { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.l-karte--dreh:hover .l-karte__dreh-hinweis svg { transform: rotate(-180deg); }

/* ---- Rueckseite ---- */

.l-karte__ruecktitel {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 16px;
}

.l-karte__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.l-karte__liste li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
}

/* blauer Haken vor jedem Punkt, gleiche Sprache wie im Vergleich */
.l-karte__liste li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 1px;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blau-hell), var(--blau));
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

/* Tastaturbedienung sichtbar machen */
.l-karte--dreh:focus-visible .l-karte__seite {
  outline: 2px solid var(--blau-hell);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .l-karte__seite { padding: 28px 24px 26px; }
  .l-karte__ruecktitel { font-size: 19px; }
  .l-karte__liste li { font-size: 14.5px; }
}

/* Weniger Bewegung: keine Drehung, die Rueckseite ist per Tippen erreichbar */
@media (prefers-reduced-motion: reduce) {
  .l-karte__innen { transition: none; }
  .l-karte__seite { transition: border-color 0.35s ease; }   /* ohne Verzoegerung umschalten */
  .l-karte__dreh-hinweis svg { transition: none; }
  .l-karte--dreh:hover .l-karte__dreh-hinweis svg { transform: none; }
}


/* =========================================================================
   TEAM-PROFILE: Karte klickbar, Overlay mit Angaben zur Person
   ========================================================================= */

/* ---- Karte wird zum Knopf ---- */

.team__oeffnen {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: inherit;
  font: inherit;
  color: inherit;
}

/* das span mit dem Namen liegt bereits absolut, hier nur der Zoom-Hover */
.team__karte:hover .team__plus,
.team__karte .team__oeffnen:focus-visible .team__plus {
  opacity: 1;
  transform: scale(1);
}

/* Elternselektor noetig: .team__karte span (der Name unten) ist
   spezifischer und wuerde sonst left/bottom/padding und den dunklen
   Verlauf vererben, die Plakette zoege sich ueber die halbe Karte */
.team__karte .team__plus {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  bottom: auto;
  z-index: 2;
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(7, 16, 25, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.28s ease, transform 0.28s ease, background 0.28s ease;
  box-shadow: none;
}

.team__karte:hover .team__plus { background: var(--blau); border-color: transparent; }

.team__oeffnen:focus-visible {
  outline: 2px solid var(--blau-hell);
  outline-offset: 3px;
  border-radius: 16px;
}

/* ---- Overlay ---- */

.profil[hidden] { display: none; }

.profil {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 10, 17, 0.74);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity 0.32s ease;
}

.profil.ist-offen { opacity: 1; }

.profil__karte {
  position: relative;
  width: min(620px, 100%);
  max-height: min(86vh, 780px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(ellipse 620px 420px at 88% 0%, rgba(0, 94, 168, 0.3), transparent 62%),
    linear-gradient(180deg, var(--nacht-2), var(--nacht));
  border: 1px solid var(--linie-hell);
  border-radius: 22px;
  box-shadow: 0 34px 90px rgba(0, 10, 20, 0.6);
  transform: translateY(18px) scale(0.98);
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.profil.ist-offen .profil__karte { transform: translateY(0) scale(1); }

.profil__zu {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--linie-hell);
  background: rgba(7, 16, 25, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.profil__zu:hover { background: rgba(255, 255, 255, 0.14); transform: rotate(90deg); }

/* ---- Kopfbereich mit Foto ---- */

.profil__kopf {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 26px);
  padding: clamp(24px, 3.5vw, 34px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.profil__bild {
  flex: 0 0 auto;
  width: clamp(92px, 14vw, 122px);
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(0, 10, 20, 0.4);
}

.profil__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.profil__titel { min-width: 0; }

.profil__rolle {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rot);
}

.profil__karte h3 {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 40px);
  font-weight: 500;
  line-height: 1;
  color: #fff;
  margin: 0;
}

.profil__seit {
  margin: 8px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

/* ---- Inhalt ---- */

.profil__inhalt { padding: clamp(22px, 3.5vw, 32px); }

.profil__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  line-height: 1.65;
}

.profil__block { margin-top: 26px; }

.profil__label {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.profil__punkte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.profil__punkte li {
  position: relative;
  padding-left: 26px;
  font-size: 15.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
}

.profil__punkte li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 1px;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blau-hell), var(--blau));
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.profil__kontakt {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.profil__kontakt a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--linie-hell);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-hell);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 700;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.profil__kontakt a:hover {
  background: rgba(0, 94, 168, 0.2);
  border-color: rgba(21, 116, 196, 0.6);
  color: #fff;
}

.profil__kontakt a svg { opacity: 0.7; }

@media (max-width: 560px) {
  .profil { padding: 12px; }
  .profil__kopf { flex-direction: column; align-items: flex-start; gap: 16px; }
  .profil__bild { width: 108px; }
  .profil__kontakt a { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .profil, .profil__karte, .team__plus { transition: none; }
  .profil__zu:hover { transform: none; }
}


/* =========================================================================
   TEAM AUF "UEBER UNS": zwei Bilder je Reihe, Namensleiste bei Hover
   ========================================================================= */

.team2__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
  /* begrenzt, sonst waeren die Portraits bei voller Containerbreite
     ueber 780px hoch und die Sektion endlos lang */
  max-width: 860px;
  margin: 0 auto;
  padding: 0;
}

/* Kopf auf dieselbe Breite wie das Raster, dadurch stehen Titel und
   erste Karte auf einer Kante */
.team__kopf-mittig {
  max-width: 860px;
  margin-inline: auto;
}

.team2__karte {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 63, 92, 0.16);
  transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.team2__karte:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 60px rgba(0, 63, 92, 0.26);
}

.team2__oeffnen {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

.team2__karte img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* volle Farbe von Anfang an, kein Graufilter mehr */
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.team2__karte:hover img,
.team2__oeffnen:focus-visible img { transform: scale(1.04); }

/* ---- Leiste unten: faehrt bei Hover herein ---- */

.team2__leiste {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 46px clamp(18px, 2vw, 24px) clamp(16px, 1.8vw, 20px);
  background: linear-gradient(180deg, transparent, rgba(7, 16, 25, 0.82) 45%, rgba(7, 16, 25, 0.93));
  /* im Ruhezustand ein Stueck nach unten geschoben und unsichtbar */
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.38s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.team2__karte:hover .team2__leiste,
.team2__oeffnen:focus-visible .team2__leiste {
  opacity: 1;
  transform: translateY(0);
}

.team2__namen { min-width: 0; }

.team2__namen strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1.1;
}

.team2__namen em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blau-hell);
}

.team2__plus {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blau);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 94, 168, 0.45);
  transition: background 0.3s ease, transform 0.3s ease;
}

.team2__karte:hover .team2__plus { background: var(--rot); transform: rotate(90deg); }

.team2__oeffnen:focus-visible {
  outline: 2px solid var(--blau-hell);
  outline-offset: 3px;
  border-radius: 20px;
}

/* Auf Touchgeraeten gibt es keinen Hover: Leiste dauerhaft zeigen */
@media (hover: none) {
  .team2__leiste { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  .team2__grid { grid-template-columns: 1fr; gap: 16px; }
  .team2__leiste { padding: 40px 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .team2__karte, .team2__karte img, .team2__leiste, .team2__plus { transition: none; }
  .team2__karte:hover { transform: none; }
  .team2__karte:hover img { transform: none; }
  .team2__karte:hover .team2__plus { transform: none; }
}

/* ==========================================================================
   SUCHE (Wiki + Fehlerseite), FEHLERSEITE, VERWANDTE BEITRAEGE
   ========================================================================== */

/* nur fuer Screenreader, visuell entfernt */
.visuell-versteckt {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wiki-suche,
.fehler-suche {
  position: relative;
  /* .anim-start setzt ein transform und erzeugt damit einen eigenen
     Stapelkontext. Ohne z-index wuerden die spaeter folgenden Buttons
     ueber der Trefferliste liegen. */
  z-index: 50;
  max-width: 560px;
  margin: 30px auto 34px;   /* Luft nach unten, sonst klebt es an den Buttons */
  text-align: left;
}

@media (max-width: 640px) {
  .wiki-suche,
  .fehler-suche { margin: 24px auto 26px; }
}

.wiki-suche input[type="search"],
.fehler-suche input[type="search"] {
  width: 100%;
  padding: 16px 20px 16px 52px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(7, 16, 25, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 20px center;
  color: #fff;
  font-family: var(--font-text);
  font-size: 16px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform: translateZ(0);
}

.wiki-suche input[type="search"]::placeholder,
.fehler-suche input[type="search"]::placeholder {
  color: rgba(255, 255, 255, 0.72);
}

.wiki-suche input[type="search"]:focus-visible,
.fehler-suche input[type="search"]:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  border-color: transparent;
}

/* Trefferliste */
.wiki-treffer,
.fehler-treffer {
  position: absolute;
  z-index: 40;
  left: 0; right: 0; top: calc(100% + 10px);
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(4, 20, 34, 0.34);
  max-height: min(60vh, 420px);
  overflow-y: auto;
  text-align: left;
}

.wiki-treffer li,
.fehler-treffer li { margin: 0; }

.wiki-treffer a,
.fehler-treffer a {
  display: block;
  padding: 9px 13px;
  border-radius: 11px;
  text-decoration: none;
  color: var(--text);
}

.wiki-treffer a strong,
.fehler-treffer a strong {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--blau-dunkel);
  margin-bottom: 3px;
}

.wiki-treffer .suche-text,
.fehler-treffer .suche-text {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  color: #4a5a68;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.suche-typ {
  display: inline-block;
  margin: 0 0 3px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(0, 94, 168, 0.1);
  color: var(--blau);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1px;
}

.wiki-treffer a:hover,
.fehler-treffer a:hover,
.wiki-treffer li.ist-aktiv a,
.fehler-treffer li.ist-aktiv a { background: var(--hell); }

.wiki-treffer a:focus-visible,
.fehler-treffer a:focus-visible { outline: 3px solid var(--blau); outline-offset: -3px; }

.suche-leer {
  padding: 16px 14px;
  font-size: 14.5px;
  color: #4a5a68;
}

/* ---------- Fehlerseite ---------- */
.fehler-code {
  font-family: var(--font-display);
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ff8078;
  margin-bottom: 10px;
}

.fehler-wege {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.fehler-weg a {
  display: block;
  height: 100%;
  padding: 26px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--linie);
  background: #fff;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.fehler-weg a:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 63, 92, 0.12);
}

.fehler-weg h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--blau-dunkel);
  margin: 0 0 8px;
}

.fehler-weg p {
  font-size: 14.5px;
  line-height: 1.55;
  color: #4a5a68;
  margin: 0 0 14px;
}

/* ---------- Verwandte Beitraege am Artikelende ---------- */
.art-verwandt {
  margin-top: 38px;
  padding-top: 28px;
  border-top: 1px solid var(--linie);
}

.art-verwandt__titel {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 600;
  color: var(--blau-dunkel);
  margin: 0 0 16px;
}

.art-verwandt__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.art-verwandt__liste a {
  display: block;
  height: 100%;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--linie);
  background: var(--hell);
  text-decoration: none;
  color: var(--text);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.art-verwandt__liste a:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 63, 92, 0.1);
}

.art-verwandt__liste strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--blau-dunkel);
  margin-bottom: 5px;
  line-height: 1.35;
}

.art-verwandt__liste span {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: #4a5a68;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Konfigurator-Hinweis im Artikelfuss */
.art-fuss__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

@media (prefers-reduced-motion: reduce) {
  .fehler-weg a,
  .art-verwandt__liste a { transition: none; }
  .fehler-weg a:hover,
  .art-verwandt__liste a:hover { transform: none; }
}

/* Konfigurator-Aufruf am Ende der Kategorieseiten */
.kat-cta {
  margin: 6px 0 30px;
  padding: 34px 32px;
  border-radius: var(--radius);
  border: 1px solid var(--linie);
  background: linear-gradient(135deg, var(--hell), #fff);
  text-align: center;
}

.kat-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  color: var(--blau-dunkel);
  margin: 0 0 10px;
}

.kat-cta p {
  max-width: 620px;
  margin: 0 auto 20px;
  font-size: 15.5px;
  line-height: 1.6;
  color: #4a5a68;
}

.kat-cta__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* helle Variante des Glas-Buttons fuer weisse Flaechen */
.btn--glas-hell {
  border: 1px solid var(--blau);
  background: transparent;
  color: var(--blau);
}

.btn--glas-hell:hover {
  background: var(--blau);
  color: #fff;
}

/* Honigtopf-Feld gegen Spam-Bots: fuer Menschen unsichtbar, aber im DOM
   vorhanden. Bewusst kein display:none, das erkennen viele Bots. */
.honigtopf {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Schnellkontakt: zweiter Knopf fuer den Konfigurator, mobil ausgeschrieben */
.schnell-kontakt__knopf--kfg {
  background: rgba(221, 51, 51, 0.92);
  border-color: rgba(255, 255, 255, 0.28);
}

.schnell-kontakt__knopf--kfg:hover,
.schnell-kontakt__knopf--kfg:focus-visible {
  background: var(--rot);
  border-color: #fff;
}

.schnell-kontakt__knopf--kfg:hover .schnell-kontakt__icon,
.schnell-kontakt__knopf--kfg:focus-visible .schnell-kontakt__icon { color: #fff; }

/* Auf kleinen Bildschirmen nur die Symbole zeigen: ausgeschriebene Labels
   wuerden den Inhalt verdecken. Die Knoepfe bleiben aber erreichbar, ohne
   dass erst das Klappmenue geoeffnet werden muss. */
@media (max-width: 1080px) {
  .schnell-kontakt { gap: 9px; }
  .schnell-kontakt__label { max-width: 0; opacity: 0; padding-left: 0; }
}

/* Handlungsaufruf mitten im Artikeltext */
.art-inline-cta {
  display: inline-block;
  font-weight: 700;
  color: var(--blau);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.art-inline-cta:hover { color: var(--rot); }

/* Die Karten der verwandten Beitraege liegen im Artikelrumpf und wuerden
   sonst dessen Rauten-Aufzaehlung, Einrueckung und Link-Unterstreichung erben.
   Die Selektoren sind bewusst so lang, um die Artikel-Regeln zu uebertreffen. */
.art-inhalt .art-verwandt__liste li {
  padding-left: 0;
  margin-bottom: 0;
}

.art-inhalt .art-verwandt__liste > li::before { content: none; }

.art-inhalt .art-verwandt__liste a:not(.btn),
.art-inhalt .art-verwandt__liste a:not(.btn):hover {
  text-decoration: none;
  border-bottom: 0;
}

/* Auf kleinen Bildschirmen nimmt die schwebende Leiste sonst zu viel Platz weg
   und ueberlagert Inhalte. Mail und Social stehen ohnehin im Footer, deshalb
   bleiben mobil nur Anruf und Konfigurator stehen. */
@media (max-width: 900px) {
  .schnell-kontakt__knopf--zweit { display: none; }
}

/* Damit das Suchfeld nicht unter die Leiste laeuft */
@media (max-width: 640px) {
  .wiki-suche,
  .fehler-suche { max-width: calc(100% - 60px); }
}

/* Die globale Scrollleiste ist fuer dunkle Flaechen gebaut (dunkle Bahn,
   roter Griff). In der weissen Trefferliste braucht es eine helle Variante. */
.wiki-treffer::-webkit-scrollbar,
.fehler-treffer::-webkit-scrollbar { width: 10px; }

.wiki-treffer::-webkit-scrollbar-track,
.fehler-treffer::-webkit-scrollbar-track {
  background: transparent;
}

.wiki-treffer::-webkit-scrollbar-thumb,
.fehler-treffer::-webkit-scrollbar-thumb {
  background: rgba(0, 94, 168, 0.28);
  border: 2px solid #fff;
  border-radius: 999px;
}

.wiki-treffer::-webkit-scrollbar-thumb:hover,
.fehler-treffer::-webkit-scrollbar-thumb:hover { background: rgba(0, 94, 168, 0.5); }

.wiki-treffer,
.fehler-treffer { scrollbar-width: thin; scrollbar-color: rgba(0, 94, 168, 0.35) transparent; }

/* ==========================================================================
   NAVIGATION MIT GRUPPEN (Loesungen, Referenzen, Wissen, Ueber uns)
   Haelt die Kopfzeile bei sechs Eintraegen, bringt aber alle Unterseiten unter.
   ========================================================================== */

.nav__gruppe-knopf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  padding: 6px 0;
  color: var(--text-hell);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.25s ease;
}

.nav__gruppe-knopf:hover,
.nav__gruppe:hover .nav__gruppe-knopf,
.nav__gruppe.ist-offen .nav__gruppe-knopf { color: #fff; }

.nav__pfeil { transition: transform 0.3s ease; }

.nav__unter a {
  display: block;
  text-decoration: none;
}

.nav__unter strong {
  display: block;
  font-weight: 700;
  line-height: 1.25;
}

.nav__unter span {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- Ab Tablet-quer: echtes Aufklappmenue ---------- */
@media (min-width: 1081px) {
  .nav__gruppe { position: relative; }

  .nav__unter {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 30;
    min-width: 268px;
    margin-top: 14px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(9, 20, 31, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s 0.25s;
  }

  /* unsichtbare Bruecke, damit die Maus den Spalt zum Menue ueberqueren kann */
  .nav__unter::before {
    content: "";
    position: absolute;
    inset: -16px 0 auto 0;
    height: 16px;
  }

  .nav__gruppe:hover .nav__unter,
  .nav__gruppe:focus-within .nav__unter,
  .nav__gruppe.ist-offen .nav__unter {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s 0s;
  }

  .nav__gruppe:hover .nav__pfeil,
  .nav__gruppe:focus-within .nav__pfeil,
  .nav__gruppe.ist-offen .nav__pfeil { transform: rotate(180deg); }

  .nav__unter a {
    padding: 10px 12px;
    border-radius: 10px;
    color: #fff;
    font-size: 14.5px;
    transition: background 0.2s ease;
  }

  .nav__unter a::after { display: none; }   /* keine Unterstreichung wie bei den Hauptlinks */
  .nav__unter a:hover { background: rgba(255, 255, 255, 0.08); }
  .nav__unter a:focus-visible { outline: 2px solid var(--blau-hell); outline-offset: -2px; }
}

/* ---------- Im Klappmenue auf kleinen Geraeten ---------- */
@media (max-width: 1080px) {
  /* Gruppen fahren wie die uebrigen Eintraege gestaffelt herein */
  .nav__menu .nav__gruppe {
    position: relative;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .nav__menu.ist-offen .nav__gruppe { opacity: 1; transform: none; }
  .nav__menu.ist-offen .nav__gruppe:nth-of-type(1) { transition-delay: 0.11s; }
  .nav__menu.ist-offen .nav__gruppe:nth-of-type(2) { transition-delay: 0.16s; }
  .nav__menu.ist-offen .nav__gruppe:nth-of-type(3) { transition-delay: 0.21s; }
  .nav__menu.ist-offen .nav__gruppe:nth-of-type(4) { transition-delay: 0.26s; }

  /* Der Gruppentitel ist hier nur Beschriftung, die Links stehen offen darunter.
     So braucht niemand zusaetzlich zu tippen, um an eine Seite zu kommen. */
  .nav__gruppe-knopf {
    width: 100%;
    padding: 16px 2px 6px;
    color: rgba(255, 255, 255, 0.42);
    font-family: var(--font-text);
    font-size: 12.5px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: default;
    pointer-events: none;
  }

  .nav__pfeil { display: none; }

  .nav__unter {
    display: grid;
    gap: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .nav__unter a {
    padding: 11px 2px 11px 16px;
    border-left: 2px solid rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  .nav__unter a:active { border-left-color: var(--rot); }

  .nav__unter strong {
    font-family: var(--font-display);
    font-size: clamp(19px, 5vw, 24px);
    font-weight: 500;
    letter-spacing: 0.02em;
  }

  .nav__unter span { font-size: 13px; margin-top: 1px; }
}

@media (max-width: 380px) {
  .nav__unter strong { font-size: 17px; }
  .nav__unter a { padding: 9px 2px 9px 14px; }
}

/* ==========================================================================
   NEUE UNTERSEITEN + LOESUNGS-SEKTION (Neufassung im Hausstil)
   Sektionen brauchen ihren eigenen Hintergrund: .ist-hell kippt nur Variablen.
   ========================================================================== */

/* helle Sektion nach dem Muster von vgl2/konfigurator */
.s-hell {
  background:
    radial-gradient(ellipse 700px 460px at 10% 6%, rgba(221, 51, 51, 0.05), transparent 62%),
    radial-gradient(ellipse 760px 500px at 90% 94%, rgba(0, 94, 168, 0.08), transparent 62%),
    linear-gradient(180deg, #ffffff, var(--hell));
}

/* dunkle Sektion nach dem Muster von leistungen/projekt */
.s-dunkel {
  background:
    radial-gradient(ellipse 800px 500px at 85% 0%, rgba(0, 94, 168, 0.22), transparent 60%),
    linear-gradient(180deg, var(--nacht-2), var(--nacht));
}

/* schmale Textspalte fuer Fliesstext */
.art-schmal { max-width: 860px; }

.fliess {
  max-width: 760px;
  font-size: 17px;
  line-height: 1.75;
  color: #3d4d5c;
  margin: 0 0 18px;
}

.fliess--hell { color: var(--s-text-stark); }

.hinweis-zeile {
  max-width: 760px;
  margin: 26px 0 0;
  padding-left: 18px;
  border-left: 2px solid rgba(21, 116, 196, 0.45);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--s-text-zart);
}

.hinweis-zeile a { color: inherit; font-weight: 700; }
.s-hell .hinweis-zeile { color: #66788a; border-left-color: rgba(0, 94, 168, 0.35); }

/* Stelle, die der Kunde noch fuellen muss: sichtbar, aber nicht schreiend */
.pruefen {
  margin: 22px 0 0;
  padding: 15px 18px 14px;
  border-left: 3px solid var(--rot);
  border-radius: 0 12px 12px 0;
  background: rgba(221, 51, 51, 0.07);
  font-size: 14px;
  line-height: 1.6;
  color: #7a2b2b;
}

.pruefen::before {
  content: "Noch offen";
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rot);
}

.pruefen--gross { font-size: 15px; }

.s-dunkel .pruefen {
  background: rgba(221, 51, 51, 0.14);
  color: #ffc9c9;
}

/* ---------- Baustein-Karten (hell): weisse Karten mit Outline-Nummer ---------- */
.bau-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  counter-reset: baustein;
}

.bau-grid--drei { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

.bau-karte {
  position: relative;
  counter-increment: baustein;
  padding: 26px 26px 26px;
  border: 1px solid var(--linie);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 63, 92, 0.05);
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* grosse Outline-Nummer wie bei den Leistungs-Karten, hier in Blau */
.bau-karte::before {
  content: counter(baustein, decimal-leading-zero);
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 600;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(0, 94, 168, 0.35);
  transition: -webkit-text-stroke-color 0.3s ease, color 0.3s ease;
}

/* feine Leuchtkante oben, wird beim Hover blau */
.bau-karte::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 94, 168, 0.22), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bau-karte:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 94, 168, 0.5);
  box-shadow: 0 20px 46px rgba(0, 63, 92, 0.14);
}

.bau-karte:hover::before {
  -webkit-text-stroke-color: rgba(0, 94, 168, 0.7);
  color: rgba(0, 94, 168, 0.08);
}

.bau-karte:hover::after { opacity: 1; }

.bau-karte h3 {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blau-dunkel);
  margin: 0 0 9px;
}

.bau-karte p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: #4a5a68;
}

/* ---------- Gegenueberstellung (dunkel): Glas-Karten mit Farbkante ---------- */
.gegen {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.gegen__karte {
  position: relative;
  padding: 30px 28px;
  border-radius: 18px;
  border: 1px solid var(--s-linie);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* farbige Leuchtkante oben: blau = dafuer, rot = dagegen */
.gegen__karte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
}

.gegen__karte--ja::before { background: linear-gradient(90deg, transparent, rgba(21, 116, 196, 0.75), transparent); }
.gegen__karte--nein::before { background: linear-gradient(90deg, transparent, rgba(255, 128, 120, 0.65), transparent); }

.gegen__karte:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
}

.gegen__karte--ja:hover { border-color: rgba(21, 116, 196, 0.6); }
.gegen__karte--nein:hover { border-color: rgba(255, 128, 120, 0.45); }

.gegen__karte h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.gegen__karte--ja h3 { color: var(--blau-hell); }
.gegen__karte--nein h3 { color: #ff8078; }

/* kleines Rund-Symbol vor dem Titel: Haken bzw. Strich */
.gegen__karte h3::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.gegen__karte--ja h3::before {
  border: 1.5px solid rgba(21, 116, 196, 0.55);
  background:
    linear-gradient(45deg, transparent 42%, #7fd0ff 42%, #7fd0ff 56%, transparent 56%) no-repeat 7px 9px / 5px 7px,
    linear-gradient(-45deg, transparent 40%, #7fd0ff 40%, #7fd0ff 52%, transparent 52%) no-repeat 10px 6px / 9px 12px;
}

.gegen__karte--nein h3::before {
  border: 1.5px solid rgba(255, 128, 120, 0.5);
  background: linear-gradient(#ff8078, #ff8078) center / 10px 2.5px no-repeat;
}

.gegen__karte ul { list-style: none; margin: 0; padding: 0; }

.gegen__karte li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--s-text-stark);
}

.gegen__karte li:last-child { margin-bottom: 0; }

.gegen__karte li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
}

.gegen__karte--ja li::before { background: var(--blau-hell); }
.gegen__karte--nein li::before { background: #ff8078; }

/* ---------- Ablauf in Schritten (dunkel): Glas-Karten, grosse Nummern ---------- */
.ablauf {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ablauf__schritt {
  position: relative;
  padding: 30px 28px 28px;
  border-radius: 18px;
  border: 1px solid var(--s-linie);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.ablauf__schritt::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
}

.ablauf__schritt:hover {
  transform: translateY(-4px);
  border-color: rgba(21, 116, 196, 0.6);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(21, 116, 196, 0.2) inset;
}

.ablauf__nr {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 600;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.22);
  transition: -webkit-text-stroke-color 0.35s ease;
}

.ablauf__schritt:hover .ablauf__nr { -webkit-text-stroke-color: rgba(127, 208, 255, 0.65); }

.ablauf__schritt h3 {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 9px;
}

.ablauf__schritt p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--s-text);
}

/* ---------- Hakenliste ---------- */
.haken-liste { list-style: none; margin: 0; padding: 0; max-width: 760px; }

.haken-liste li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 13px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--s-text-stark);
}

.haken-liste--eng li { font-size: 14.5px; margin-bottom: 8px; }

.haken-liste li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 15px;
  height: 9px;
  border-left: 2.5px solid var(--blau-hell);
  border-bottom: 2.5px solid var(--blau-hell);
  transform: rotate(-45deg);
}

.s-hell .haken-liste li,
.ref-projekt .haken-liste li { color: #3d4d5c; }
.s-hell .haken-liste li::before,
.ref-projekt .haken-liste li::before { border-color: var(--blau); }

/* ---------- Vergleichstabelle (dunkel): Glas-Panel, Laser-Spalte betont ---------- */
.vgl-tabelle {
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid var(--s-linie);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.vgl-tabelle table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.vgl-tabelle th,
.vgl-tabelle td {
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid var(--s-linie-zart);
  color: var(--s-text-stark);
}

.vgl-tabelle thead th {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid var(--s-linie);
}

.vgl-tabelle tbody th {
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

/* die Laser-Spalte ist das Thema der Seite und wird dezent hervorgehoben */
.vgl-tabelle thead th:nth-child(2) { color: var(--blau-hell); }

.vgl-tabelle th:nth-child(2),
.vgl-tabelle td:nth-child(2) {
  background: rgba(21, 116, 196, 0.09);
  border-inline: 1px solid rgba(21, 116, 196, 0.18);
}

.vgl-tabelle tbody tr { transition: background 0.2s ease; }
.vgl-tabelle tbody tr:hover { background: rgba(255, 255, 255, 0.035); }
.vgl-tabelle tbody tr:last-child th,
.vgl-tabelle tbody tr:last-child td { border-bottom: 0; }

/* ---------- Fragen als Akkordeon (hell) ---------- */
.fragen { display: grid; gap: 12px; }

.frage {
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 63, 92, 0.04);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.frage:hover { border-color: rgba(0, 94, 168, 0.45); }

.frage[open] {
  border-color: rgba(0, 94, 168, 0.55);
  box-shadow: 0 14px 36px rgba(0, 63, 92, 0.1);
}

.frage summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--blau-dunkel);
  transition: background 0.2s ease, color 0.2s ease;
}

.frage summary::-webkit-details-marker { display: none; }

.frage summary:hover { background: var(--hell); color: var(--blau); }
.frage summary:focus-visible { outline: 3px solid var(--blau); outline-offset: -3px; }

/* Plus-Zeichen rechts, dreht sich beim Oeffnen zum Kreuz */
.frage summary::after {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-left: auto;
  margin-top: 4px;
  background:
    linear-gradient(var(--rot), var(--rot)) center / 100% 2.5px no-repeat,
    linear-gradient(var(--rot), var(--rot)) center / 2.5px 100% no-repeat;
  transition: transform 0.3s ease;
}

.frage[open] summary::after { transform: rotate(135deg); }

.frage__antwort { padding: 2px 22px 20px; }

.frage__antwort p {
  margin: 0;
  max-width: 720px;
  font-size: 15.5px;
  line-height: 1.7;
  color: #4a5a68;
}

.faq-gruppe { margin-bottom: 46px; }

/* Gruppentitel mit Linie nach rechts, wie die Zwischentitel der Partner-Sektion */
.faq-gruppe__titel {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--blau-dunkel);
  margin: 0 0 18px;
}

.faq-gruppe__titel::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 94, 168, 0.3), transparent);
}

.kat-cta--schlank { margin-top: 14px; }

/* ---------- Referenzprojekt (hell) ---------- */
.ref-projekt {
  display: grid;
  gap: 34px;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  padding: 34px;
  border-radius: 18px;
  border: 1px solid var(--linie);
  background: #fff;
  box-shadow: 0 16px 44px rgba(0, 63, 92, 0.08);
}

.ref-projekt__bild {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}

.ref-projekt__bild img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.ref-projekt:hover .ref-projekt__bild img { transform: scale(1.045); }

.ref-projekt__branche {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 94, 168, 0.25);
  background: rgba(0, 94, 168, 0.08);
  color: var(--blau);
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ref-projekt__text h3 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 33px);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blau-dunkel);
  margin: 0 0 12px;
}

.ref-projekt__text > p {
  font-size: 15.5px;
  line-height: 1.7;
  color: #4a5a68;
  margin: 0 0 14px;
}

.ref-projekt__label {
  margin: 22px 0 8px !important;
  font-size: 11.5px !important;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rot) !important;
}

.ref-platz {
  margin-top: 24px;
  padding: 30px 28px;
  border-radius: 18px;
  border: 1px dashed rgba(0, 94, 168, 0.35);
  background: rgba(255, 255, 255, 0.6);
}

.ref-platz h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blau-dunkel);
  margin: 0 0 10px;
}

.ref-platz p {
  margin: 0;
  max-width: 860px;
  font-size: 15px;
  line-height: 1.65;
  color: #4a5a68;
}

/* ---------- Videoseite (hell) ---------- */
.video-liste {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

.video-karte {
  margin: 0;
  border-radius: 18px;
  border: 1px solid var(--linie);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(0, 63, 92, 0.07);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.video-karte:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 94, 168, 0.45);
  box-shadow: 0 22px 50px rgba(0, 63, 92, 0.14);
}

.video-karte video {
  width: 100%;
  height: auto;
  display: block;
  background: #071019;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.video-karte figcaption { padding: 22px 24px 24px; }

.video-karte h3 {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blau-dunkel);
  margin: 0 0 8px;
}

.video-karte p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #4a5a68;
}

.video-platz {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: 34px 30px;
  border-radius: 18px;
  border: 1px dashed rgba(0, 94, 168, 0.35);
  background: rgba(255, 255, 255, 0.6);
}

.video-platz__rahmen { color: rgba(0, 94, 168, 0.4); margin-bottom: 12px; }

.video-platz h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blau-dunkel);
  margin: 0 0 10px;
}

.video-platz p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #4a5a68;
}

/* ---------- Weiterlesen (dunkel) ---------- */
.weiter-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.weiter-liste a {
  position: relative;
  display: block;
  height: 100%;
  padding: 20px 22px;
  border-radius: 14px;
  border: 1px solid var(--s-linie);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.weiter-liste a::after {
  content: "\2192";
  position: absolute;
  right: 18px;
  bottom: 14px;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 700;
  transition: transform 0.25s ease, color 0.25s ease;
}

.weiter-liste a:hover {
  transform: translateY(-3px);
  border-color: rgba(21, 116, 196, 0.6);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}

.weiter-liste a:hover::after { transform: translateX(4px); color: var(--blau-hell); }

.weiter-liste strong {
  display: block;
  padding-right: 26px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.art-verwandt__titel--hell { color: #fff; }

/* Hero-Kicker auf den neuen Seiten */
.kat-hero__kicker {
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ff8078;
  margin: 0 0 8px;
}

/* ==========================================================================
   LOESUNGS-SEKTION AUF DER STARTSEITE
   Hell, schliesst oben nahtlos an vgl2 (endet auf --hell) an und endet auf
   Weiss, damit der harte Schnitt zur dunklen Leistungs-Sektion dem Muster
   konfigurator -> projekt entspricht.
   ========================================================================== */
.loesungen {
  background:
    radial-gradient(ellipse 720px 480px at 88% 10%, rgba(0, 94, 168, 0.08), transparent 62%),
    radial-gradient(ellipse 640px 420px at 8% 90%, rgba(221, 51, 51, 0.05), transparent 62%),
    linear-gradient(180deg, var(--hell), #ffffff);
}

.loes-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.loes-karte a {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--linie);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 12px 34px rgba(0, 63, 92, 0.07);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.loes-karte a:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 94, 168, 0.55);
  box-shadow: 0 26px 56px rgba(0, 63, 92, 0.17);
}

.loes-karte a:focus-visible {
  outline: 3px solid var(--blau);
  outline-offset: 3px;
}

.loes-karte__bild {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.loes-karte__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.loes-karte a:hover .loes-karte__bild img { transform: scale(1.06); }

/* Abdunklung unten, damit der Uebergang zur Textflaeche weich ist */
.loes-karte__bild::after {
  content: "";
  position: absolute;
  inset: 55% 0 0 0;
  background: linear-gradient(180deg, transparent, rgba(7, 16, 25, 0.35));
  pointer-events: none;
}

/* Chip oben links wie in der Galerie */
.loes-karte__chip {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(7, 16, 25, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.loes-karte__chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rot);
}

.loes-karte__inhalt {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 24px 26px 26px;
}

.loes-karte__nr {
  /* sitzt in der Fusszeile rechts neben dem Link, nicht mehr absolut oben.
     Dadurch hat die Ueberschrift die volle Kachelbreite. */
  flex: 0 0 auto;
  line-height: 1;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(0, 94, 168, 0.3);
  transition: -webkit-text-stroke-color 0.3s ease;
}

.loes-karte a:hover .loes-karte__nr { -webkit-text-stroke-color: rgba(0, 94, 168, 0.65); }

.loes-karte__inhalt strong {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blau-dunkel);
  margin-bottom: 8px;
  /* gleicht die Zeilen aus, falls ein Titel doch einmal umbricht */
  text-wrap: balance;
}

.loes-karte__text {
  font-size: 14.5px;
  line-height: 1.65;
  color: #4a5a68;
  margin-bottom: 18px;
}

.loes-karte__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--blau);
  transition: color 0.25s ease;
}

/* Fusszeile der Loesungs-Kachel: Link links, Nummer rechts, feine Linie darueber */
.loes-karte__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--linie);
}

.loes-karte__fuss .loes-karte__link { margin-top: 0; }


.loes-karte__link svg { transition: transform 0.25s ease; }

.loes-karte a:hover .loes-karte__link { color: var(--rot); }
.loes-karte a:hover .loes-karte__link svg { transform: translateX(4px); }

.loesungen__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

/* ---------- Anpassungen fuer kleine Bildschirme ---------- */
@media (max-width: 820px) {
  .ref-projekt { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
}

@media (max-width: 640px) {
  .bau-karte, .gegen__karte, .ablauf__schritt { padding: 24px 20px; }
  .vgl-tabelle th, .vgl-tabelle td { padding: 12px 14px; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .bau-karte, .gegen__karte, .ablauf__schritt, .frage,
  .video-karte, .weiter-liste a, .loes-karte a,
  .loes-karte__bild img, .ref-projekt__bild img,
  .loes-karte__link svg, .weiter-liste a::after { transition: none; }
  .bau-karte:hover, .gegen__karte:hover, .ablauf__schritt:hover,
  .video-karte:hover, .weiter-liste a:hover, .loes-karte a:hover { transform: none; }
  .loes-karte a:hover .loes-karte__bild img,
  .ref-projekt:hover .ref-projekt__bild img { transform: none; }
}

/* Die Staffel-Einblendung vererbt ihre transition-delay auch auf Hover-Effekte
   der Kinder (bis 0,45s beim sechsten Element). Beim Zeigen soll die Karte
   sofort reagieren, die gestaffelte Einblendung bleibt davon unberuehrt. */
.staffel.sichtbar > :hover { transition-delay: 0s; }

/* ==========================================================================
   FEINSCHLIFF: Raster, Titelumbruch, Hinweis-Panels
   ========================================================================== */

/* Sechser-Raster laufen als 2 Reihen zu je 3 Karten statt 4 + 2 */
@media (min-width: 1020px) {
  .bau-grid:not(.bau-grid--drei),
  .ablauf { grid-template-columns: repeat(3, 1fr); }
}

/* Titel brechen ausgewogen um, nie mit einem einzelnen Wort in der
   letzten Zeile */
.section__titel,
.kat-hero__titel,
.faq-gruppe__titel { text-wrap: balance; }

/* In schmalen Textspalten den Titel verkleinern, damit er moeglichst auf
   eine Zeile passt, statt mit Restwort umzubrechen */
.art-schmal .section__titel { font-size: clamp(33px, 4vw, 52px); }

/* ---------- Hinweis-Panel: wertet reine Text-Sektionen auf ---------- */
.hinweis-panel {
  position: relative;
  max-width: 980px;
  padding: 36px 38px 34px;
  border-radius: 18px;
  border: 1px solid var(--s-linie);
  background:
    radial-gradient(ellipse 480px 260px at 88% 0%, rgba(21, 116, 196, 0.12), transparent 65%),
    linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  overflow: hidden;
}

/* feine Leuchtkante oben wie an den grossen Panels */
.hinweis-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.hinweis-panel__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  border-radius: 15px;
  border: 1px solid rgba(21, 116, 196, 0.45);
  background: rgba(21, 116, 196, 0.14);
  color: var(--blau-hell);
}

.hinweis-panel .fliess { max-width: 820px; }
.hinweis-panel .fliess:last-child { margin-bottom: 0; }
.hinweis-panel .haken-liste { margin-top: 4px; }
.hinweis-panel .pruefen:last-child { margin-bottom: 0; }

/* Marken-Chips im Panel (Referenzen) */
.marken-reihe {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
}

.marken-reihe li {
  padding: 8px 16px;
  border: 1px solid var(--s-linie);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--s-text-stark);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.marken-reihe li:hover {
  border-color: rgba(21, 116, 196, 0.6);
  background: rgba(21, 116, 196, 0.1);
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  .hinweis-panel { padding: 26px 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .marken-reihe li { transition: none; }
  .marken-reihe li:hover { transform: none; }
}

/* ==========================================================================
   FEINSCHLIFF 2: 4er-Raster, helle Panels, dunkle Loesungs-Sektion
   ========================================================================== */

/* Vierer-Raster immer symmetrisch: eine 4er-Reihe, darunter 2 x 2.
   Doppelklasse noetig, sonst gewinnt die Dreier-Regel per Spezifitaet. */
.bau-grid.bau-grid--vier { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 1180px) {
  .bau-grid.bau-grid--vier { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 620px) {
  .bau-grid.bau-grid--vier { grid-template-columns: 1fr; }
}

/* ---------- helles Hinweis-Panel fuer Einstiegs-Sektionen ---------- */
.hinweis-panel--hell {
  border: 1px solid var(--linie);
  background:
    radial-gradient(ellipse 480px 260px at 90% 0%, rgba(0, 94, 168, 0.06), transparent 65%),
    #ffffff;
  box-shadow: 0 16px 44px rgba(0, 63, 92, 0.08);
}

.hinweis-panel--hell::before {
  background: linear-gradient(90deg, transparent, rgba(0, 94, 168, 0.35), transparent);
}

.hinweis-panel--hell .hinweis-panel__icon {
  border-color: rgba(0, 94, 168, 0.35);
  background: rgba(0, 94, 168, 0.09);
  color: var(--blau);
}

/* Merkmal-Chips unter dem Text: kurze Fakten zum Ueberfliegen */
.merkmal-reihe {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
}

.merkmal-reihe li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(0, 94, 168, 0.25);
  border-radius: 999px;
  background: rgba(0, 94, 168, 0.06);
  color: var(--blau-dunkel);
  font-size: 13.5px;
  font-weight: 700;
}

.merkmal-reihe li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--rot);
  transform: rotate(45deg);
}

/* ---------- Loesungs-Sektion: dunkel, klare Grenze zum hellen Vergleich ---------- */
.loesungen {
  background:
    radial-gradient(ellipse 760px 500px at 12% 0%, rgba(0, 94, 168, 0.26), transparent 60%),
    radial-gradient(ellipse 600px 420px at 92% 100%, rgba(221, 51, 51, 0.07), transparent 62%),
    linear-gradient(180deg, var(--nacht), var(--nacht-2));
}

.loesungen .section__intro { color: var(--s-text); }

/* weisse Bildkarten stehen auf dunklem Grund: kraeftigere Schatten,
   Rahmen erst beim Hover sichtbar machen */
.loesungen .loes-karte a {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.45);
}

.loesungen .loes-karte a:hover {
  border-color: rgba(21, 116, 196, 0.7);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(21, 116, 196, 0.25);
}

/* ==========================================================================
   ZWISCHENBAND: schmale helle Sektion zwischen zwei dunklen Bereichen
   ========================================================================== */
.zwischenband {
  padding-block: clamp(44px, 6vw, 64px);
  background:
    radial-gradient(ellipse 620px 300px at 12% 0%, rgba(221, 51, 51, 0.05), transparent 62%),
    radial-gradient(ellipse 680px 320px at 88% 100%, rgba(0, 94, 168, 0.08), transparent 62%),
    linear-gradient(180deg, #ffffff, var(--hell));
}

.zwischenband__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 48px);
  flex-wrap: wrap;
}

.zwischenband__text { max-width: 640px; }

.zwischenband .zwischenband__titel {   /* schlaegt die Absatz-Regel darunter */
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--blau-dunkel);
  margin: 0 0 8px;
  text-wrap: balance;
}

.zwischenband .zwischenband__titel em { font-style: normal; color: var(--blau); }

.zwischenband__text p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--grau);
}

.zwischenband__aktion {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* sechs kleine Schritt-Punkte als Vorschau auf den Konfigurator */
.zwischenband__schritte {
  display: flex;
  gap: 6px;
  margin-top: 14px;
}

.zwischenband__schritte span {
  width: 26px;
  height: 4px;
  border-radius: 999px;
  background: rgba(0, 94, 168, 0.18);
}

.zwischenband__schritte span:nth-child(-n + 2) { background: var(--rot); }

@media (max-width: 760px) {
  .zwischenband__zeile { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   FEINSCHLIFF 3: Luft unter den Sektionstiteln, Chips symmetrisch,
   Weiterlesen-Karten aufgewertet
   ========================================================================== */

/* Auf den neuen Unterseiten folgt der Inhalt direkt auf den Titel.
   Die grossen Inhaltsbloecke bekommen denselben Abstand, den auf der
   Startseite der section__kopf erzeugt (Margins kollabieren mit dem
   kleinen Abstand von Titel und Einleitung, es zaehlt der groessere). */
.s-hell .hinweis-panel,
.s-dunkel .hinweis-panel,
.s-hell .bau-grid,
.s-dunkel .bau-grid,
.s-dunkel .gegen,
.s-dunkel .ablauf,
.s-dunkel .vgl-tabelle,
.s-hell .ref-projekt,
.s-hell .video-liste,
.s-dunkel .weiter-liste,
.s-dunkel .section__titel + .fliess + .fliess + .marken-reihe,
.s-hell .section__titel + .pruefen {
  margin-top: clamp(28px, 3.8vw, 46px);
}

/* Merkmal-Chips: ab vier Stueck als 2 x 2 statt 3 + 1 */
.merkmal-reihe:has(> :nth-child(4)) {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
}

@media (max-width: 640px) {
  .merkmal-reihe:has(> :nth-child(4)) { grid-template-columns: 1fr; }
}

/* ---------- Weiterlesen-Karten: Pfeil-Chip, Leuchtkante, satter Hover ---------- */
.weiter-liste a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
}

/* feine Leuchtkante oben wie an den uebrigen Glas-Karten */
.weiter-liste a::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
}

/* der Pfeil wird zum runden Chip statt lose in der Ecke zu haengen */
.weiter-liste a::after {
  content: "\2192";
  position: static;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  font-weight: 700;
  transition: transform 0.25s ease, border-color 0.25s ease,
              background 0.25s ease, color 0.25s ease;
}

.weiter-liste a:hover::after {
  transform: translateX(3px);
  border-color: var(--rot);
  background: var(--rot);
  color: #fff;
}

.weiter-liste strong { padding-right: 0; }

/* der Titel "Weiterlesen" braucht keinen eigenen Abstand mehr,
   den bringt die Liste mit (kollabierende Margins) */
.s-dunkel .art-verwandt__titel--hell { margin-bottom: 0; }

/* ==========================================================================
   LASER-RAHMEN: laeuft bei Hover einmal um die Team-Karte herum
   ========================================================================== */

/* Der Winkel muss als Winkel registriert sein, sonst kann der Browser ihn
   nicht animieren. Ohne @property (aeltere Browser) bleibt der Rahmen
   stehen und leuchtet nur auf, die Karte bleibt also intakt. */
@property --laser-winkel {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.team__karte,
.team2__karte { --laser-winkel: 0deg; }

/* Ring am Kartenrand: die Karten haben overflow:hidden, deshalb liegt der
   Laser INNEN und wird per Maske auf die Randbreite beschnitten. */
.team__karte::after,
.team2__karte::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  padding: 3px;
  /* Kometenschweif: langer weicher Anlauf, heller Kopf am Ende */
  background: conic-gradient(
    from var(--laser-winkel),
    rgba(21, 116, 196, 0) 0deg,
    rgba(21, 116, 196, 0) 170deg,
    rgba(21, 116, 196, 0.45) 250deg,
    rgba(127, 208, 255, 0.9) 320deg,
    #ffffff 350deg,
    #ffffff 356deg,
    rgba(127, 208, 255, 0.9) 360deg
  );
  filter: drop-shadow(0 0 6px rgba(127, 208, 255, 0.85));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.team__karte:hover::after,
.team2__karte:hover::after,
.team__karte:focus-within::after,
.team2__karte:focus-within::after {
  opacity: 1;
  animation: laserLauf 2.4s linear infinite;
}

/* weicher Schein nach aussen, damit der Laser nicht flach wirkt */
.team__karte:hover,
.team2__karte:hover {
  box-shadow: 0 26px 60px rgba(0, 63, 92, 0.26), 0 0 0 1px rgba(21, 116, 196, 0.25);
}

@keyframes laserLauf {
  to { --laser-winkel: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .team__karte:hover::after,
  .team2__karte:hover::after,
  .team__karte:focus-within::after,
  .team2__karte:focus-within::after { animation: none; }
}

/* ==========================================================================
   PROFIL: Werdegang, Ausbildung, Weiterbildungen
   ========================================================================== */

.profil__verlauf {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Zeitleiste: senkrechte Linie mit Punkt je Station */
.profil__verlauf > li {
  position: relative;
  padding: 0 0 22px 26px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.profil__verlauf > li:last-child { padding-bottom: 0; border-left-color: transparent; }

.profil__verlauf > li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blau-hell);
  box-shadow: 0 0 0 3px rgba(21, 116, 196, 0.22);
}

/* nur die aktuelle Station im Werdegang wird rot hervorgehoben,
   nicht der erste Eintrag jeder beliebigen Liste */
#profilWerdegang > li:first-child::before {
  background: var(--rot);
  box-shadow: 0 0 0 3px rgba(221, 51, 51, 0.25);
}

.profil__zeit {
  display: block;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blau-hell);
  margin-bottom: 3px;
}

.profil__verlauf strong {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}

.profil__firma {
  display: block;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 1px;
}

.profil__verlauf ul {
  list-style: none;
  margin: 9px 0 0;
  padding: 0;
}

.profil__verlauf ul li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 5px;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

.profil__verlauf ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 1.5px;
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(45deg);
}

/* Weiterbildungen: als kleine Karten mit Siegel-Symbol.
   Das Jahr steht rechts als Chip und entfaellt, wenn keines vorliegt. */
.profil__weiter {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.profil__weiter li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  font-size: 14.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.profil__weiter li:hover {
  border-color: rgba(21, 116, 196, 0.55);
  background: rgba(21, 116, 196, 0.1);
}

.profil__weiter-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--blau-hell), var(--blau));
  color: #fff;
}

.profil__weiter-titel {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
}

.profil__weiter-jahr {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .profil__weiter li { transition: none !important; }
}

/* ============================================================
   Bildergalerie, Filter und Lightbox (galerie.html)
   ============================================================ */

.galerie-hinweis {
  max-width: 720px;
  margin: -10px 0 26px;
  font-size: 15px;
  line-height: 1.65;
  color: #4a5a68;
}

.galerie-hinweis a { color: var(--blau); font-weight: 700; }

/* ---------- Filterknoepfe ---------- */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.filter__knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  border-radius: 999px;
  border: 1px solid var(--linie);
  background: #fff;
  color: var(--blau-dunkel);
  font-family: var(--font-text);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.filter__knopf span {
  font-size: 11.5px;
  font-weight: 900;
  color: var(--grau);
  transition: color 0.25s ease;
}

.filter__knopf:hover {
  border-color: rgba(0, 94, 168, 0.5);
  background: rgba(0, 94, 168, 0.06);
}

.filter__knopf.ist-aktiv {
  background: var(--blau);
  border-color: var(--blau);
  color: #fff;
}

.filter__knopf.ist-aktiv span { color: rgba(255, 255, 255, 0.72); }

.filter__leer {
  margin: 30px 0 0;
  padding: 26px;
  border-radius: 14px;
  border: 1px dashed rgba(0, 94, 168, 0.35);
  text-align: center;
  color: var(--grau);
}

/* ---------- Bildgitter ---------- */
.foto-gitter {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.foto {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  border: 1px solid var(--linie);
  border-radius: 14px;
  overflow: hidden;
  background: var(--nacht-2);
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.foto:hover,
.foto:focus-visible {
  border-color: rgba(0, 94, 168, 0.55);
  box-shadow: 0 16px 38px rgba(0, 63, 92, 0.16);
  transform: translateY(-3px);
}

.foto img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.foto:hover img { transform: scale(1.06); }

/* Lupensymbol, erscheint beim Ueberfahren */
.foto__lupe {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(7, 16, 25, 0.72);
  color: #fff;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.foto:hover .foto__lupe,
.foto:focus-visible .foto__lupe { opacity: 1; transform: none; }

/* Branchenlabel unten links */
.foto__marke {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(7, 16, 25, 0.78);
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
}

.foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(7, 16, 25, 0) 55%, rgba(7, 16, 25, 0.6));
  pointer-events: none;
}

.foto[hidden] { display: none; }

/* ---------- Lightbox ---------- */
.lupe {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(4, 10, 16, 0.93);
  animation: lupeAuf 0.25s ease;
}

.lupe[hidden] { display: none; }

@keyframes lupeAuf { from { opacity: 0; } to { opacity: 1; } }

.lupe__flaeche {
  position: relative;
  width: min(1180px, 100%);
  max-height: 100%;
  display: grid;
  place-items: center;
}

.lupe__figur {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-height: calc(100vh - 44px);
}

.lupe__figur img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 190px);
  width: auto;
  height: auto;
  border-radius: 12px;
  background: var(--nacht-2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.lupe__figur figcaption {
  max-width: 760px;
  text-align: center;
}

.lupe__projekt {
  margin: 0 0 5px;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s-kicker);
}

.lupe__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.lupe__zaehler {
  margin: 8px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

.lupe__zu,
.lupe__pfeil {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.lupe__zu:hover,
.lupe__pfeil:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
}

.lupe__zu {
  top: -6px;
  right: -6px;
  width: 44px;
  height: 44px;
}

.lupe__pfeil {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 60px;
}

.lupe__pfeil--zurueck { left: -6px; }
.lupe__pfeil--vor { right: -6px; }

@media (max-width: 720px) {
  .lupe { padding: 14px; }
  .lupe__zu { top: 0; right: 0; }
  .lupe__pfeil { top: auto; bottom: -4px; transform: none; width: 54px; height: 46px; }
  .lupe__pfeil--zurueck { left: 4px; }
  .lupe__pfeil--vor { right: 4px; }
  .lupe__figur img { max-height: calc(100vh - 250px); }
  .lupe__figur figcaption { padding: 0 62px; }
}

/* ---------- Videoseite: Hochformat und Zusatzangaben ---------- */
.video-liste--hoch {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  align-items: start;
}

.video-karte--hoch video {
  aspect-ratio: 9 / 16;
  max-height: 62vh;
}

.video-karte--quer video { aspect-ratio: 16 / 9; }

.video-karte__marke {
  margin: 0 0 8px !important;
  font-size: 11px !important;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rot) !important;
}

.video-karte__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  color: var(--blau);
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
}

.video-karte__link:hover { color: var(--blau-hell); text-decoration: underline; }

/* Karten in dunklen Abschnitten */
.s-dunkel .video-karte {
  background: var(--s-karte);
  border-color: var(--s-linie);
  box-shadow: none;
}

.s-dunkel .video-karte h3 { color: #fff; }
.s-dunkel .video-karte p { color: var(--s-text); }
.s-dunkel .video-karte__link { color: var(--blau-hell); }
.s-dunkel .video-karte:hover { border-color: rgba(21, 116, 196, 0.55); }

/* ---------- Referenzen: Bildstreifen unter dem Aufmacher ---------- */
.ref-streifen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.ref-streifen__bild {
  display: block;
  border-radius: 9px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--linie);
}

.ref-streifen__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.ref-streifen__bild:hover img { transform: scale(1.08); }

.ref-projekt__video {
  margin: 16px 0 0 !important;
  font-size: 14.5px !important;
}

.ref-projekt__video a {
  color: var(--blau);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 94, 168, 0.3);
}

.ref-projekt__video a:hover { color: var(--blau-hell); border-bottom-color: currentColor; }

.ref-projekt + .ref-projekt { margin-top: 26px; }

/* helle Variante des Hinweisfelds fuer helle Abschnitte */
.hinweis-panel--hell {
  background: #fff;
  border-color: var(--linie);
}

.hinweis-panel--hell .hinweis-panel__icon { color: var(--blau); }
.hinweis-panel--hell .fliess { color: #4a5a68; }

@media (max-width: 860px) {
  .ref-projekt { grid-template-columns: 1fr; padding: 24px; }
}

@media (max-width: 560px) {
  .foto-gitter { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .video-liste--hoch { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
  .filter__knopf { font-size: 12.5px; padding: 8px 13px; }
}

/* Bewegungsreduktion: alle Effekte dieses Blocks stilllegen */
@media (prefers-reduced-motion: reduce) {
  .foto,
  .foto img,
  .foto__lupe,
  .ref-streifen__bild img,
  .filter__knopf { transition: none !important; }
  .foto:hover { transform: none; }
  .foto:hover img,
  .ref-streifen__bild:hover img { transform: none; }
  .foto:hover .foto__lupe,
  .foto:focus-visible .foto__lupe { transform: none; }
  .lupe { animation: none; }
}

/* ---------- Referenzen: Aufmacher und Bildstreifen sauber trennen ----------
   Die Bestandsregel .ref-projekt:hover .ref-projekt__bild img skaliert JEDES Bild
   im Container. Sobald ein Bildstreifen darunter liegt, wuerden dessen Kacheln
   beim Hover ueber die Karte mitwachsen und sich ueberlappen. Deshalb bekommt
   der Aufmacher einen eigenen Rahmen und der Streifen wird ausgenommen. */
.ref-projekt__bild--serie {
  overflow: visible;
  border-radius: 0;
  display: grid;
  gap: 8px;
}

.ref-projekt__haupt {
  display: block;
  border-radius: 14px;
  overflow: hidden;
}

.ref-projekt:hover .ref-streifen img { transform: none; }
.ref-streifen__bild:hover img { transform: scale(1.08); }

/* ---------- Projektvorschau auf den Loesungsseiten ---------- */
.pv-einleitung {
  max-width: 760px;
  margin: -8px 0 26px;
  font-size: 15.5px;
  line-height: 1.7;
  color: #4a5a68;
}

.pv-einleitung--hell { color: var(--s-text); }

.pv-gitter {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.pv-karte {
  margin: 0;
  border-radius: 16px;
  border: 1px solid var(--linie);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 63, 92, 0.07);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.pv-karte:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 94, 168, 0.45);
  box-shadow: 0 20px 46px rgba(0, 63, 92, 0.14);
}

.pv-karte a { display: block; overflow: hidden; }

.pv-karte img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.pv-karte:hover img { transform: scale(1.05); }

.pv-karte figcaption { padding: 18px 20px 20px; }

.pv-karte__marke {
  margin: 0 0 7px !important;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rot);
}

.pv-karte figcaption p:last-child {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #4a5a68;
}

.pv-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* dunkle Variante */
.s-dunkel .pv-karte {
  background: var(--s-karte);
  border-color: var(--s-linie);
  box-shadow: none;
}

.s-dunkel .pv-karte figcaption p:last-child { color: var(--s-text); }
.s-dunkel .pv-karte:hover { border-color: rgba(21, 116, 196, 0.55); }
.s-dunkel .pv-karte__marke { color: var(--s-kicker); }

@media (prefers-reduced-motion: reduce) {
  .pv-karte, .pv-karte img, .ref-streifen__bild img { transition: none !important; }
  .pv-karte:hover { transform: none; }
  .pv-karte:hover img,
  .ref-streifen__bild:hover img { transform: none; }
}

/* ---------- Startseite: weitere Projekte ---------- */
.mehr-projekte {
  margin-top: 34px;
  padding: 30px 30px 32px;
  border-radius: 18px;
  border: 1px solid var(--s-linie);
  background: var(--s-flaeche);
}

.mehr-projekte__kopf h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 8px;
}

.mehr-projekte__kopf p {
  margin: 0 0 22px;
  max-width: 620px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--s-text);
}

.mehr-projekte__reihe {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.mehr-projekte__reihe a {
  display: block;
  border-radius: 13px;
  overflow: hidden;
  border: 1px solid var(--s-linie);
  background: var(--nacht-2);
  text-decoration: none;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.mehr-projekte__reihe a:hover {
  border-color: rgba(21, 116, 196, 0.6);
  transform: translateY(-3px);
}

.mehr-projekte__reihe img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.mehr-projekte__reihe a:hover img { transform: scale(1.06); }

.mehr-projekte__reihe span {
  display: block;
  padding: 13px 15px 15px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
}

.mehr-projekte__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

@media (max-width: 560px) {
  .mehr-projekte { padding: 22px 20px 24px; }
  .mehr-projekte__reihe { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mehr-projekte__reihe img { height: 110px; }
  .mehr-projekte__reihe span { padding: 10px 12px 12px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .mehr-projekte__reihe a,
  .mehr-projekte__reihe img { transition: none !important; }
  .mehr-projekte__reihe a:hover { transform: none; }
  .mehr-projekte__reihe a:hover img { transform: none; }
}

/* ============================================================
   Variantenvergleich im Konfigurator-Teaser
   Zwei Darstellungen zur Auswahl. Nach der Entscheidung koennen die
   unterlegene Variante und der Umschalter ersatzlos entfernt werden.
   ============================================================ */

.kfg-vergleich {
  position: relative;
  min-width: 0;
}


/* ---------- Variante B: Auswahlraster mit vier Loesungen ---------- */
.kfg-auswahl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.kfg-auswahl[hidden] { display: none; }

.kfg-auswahl__karte {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--nacht-2);
  border: 1px solid rgba(0, 94, 168, 0.18);
  box-shadow: 0 14px 34px rgba(0, 63, 92, 0.14);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.32s ease, box-shadow 0.32s ease;
}

.kfg-auswahl__karte:hover {
  transform: translateY(-5px);
  border-color: rgba(21, 116, 196, 0.6);
  box-shadow: 0 22px 50px rgba(0, 63, 92, 0.24);
}

.kfg-auswahl__karte img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.kfg-auswahl__karte:hover img { transform: scale(1.06); }

/* Beschriftung liegt im Bild, dadurch bleiben die Kacheln kompakt */
.kfg-auswahl__karte figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 30px 14px 13px;
  background: linear-gradient(180deg, rgba(7, 16, 25, 0) 0%, rgba(7, 16, 25, 0.88) 55%);
  color: #fff;
}

.kfg-auswahl__karte figcaption strong {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
}

.kfg-auswahl__karte figcaption span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
}


@media (max-width: 640px) {
  .kfg-auswahl { gap: 10px; }
  .kfg-auswahl__karte img { height: 132px; }
  .kfg-auswahl__karte figcaption { padding: 24px 10px 10px; }
  .kfg-auswahl__karte figcaption strong { font-size: 15px; }
  .kfg-auswahl__karte figcaption span { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .kfg-auswahl__karte:hover { transform: none; }
  .kfg-auswahl__karte:hover img { transform: none; }
}


/* ---------- Auswahlraster: Auftritt und Fokus ---------- */

/* Beim Wechsel auf Variante B fahren die vier Kacheln nacheinander herein. */
.kfg-auswahl__karte {
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  animation: kfgKachel 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--k) * 90ms);
}

@keyframes kfgKachel {
  to { opacity: 1; transform: none; }
}

/* Ueberfahrene Kachel tritt hervor, die uebrigen treten zurueck. */
.kfg-auswahl:hover .kfg-auswahl__karte { opacity: 0.62; }
.kfg-auswahl:hover .kfg-auswahl__karte:hover { opacity: 1; }

/* Beschriftung faehrt beim Ueberfahren etwas hoch, der Untertitel klappt auf */
.kfg-auswahl__karte figcaption strong { transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
.kfg-auswahl__karte:hover figcaption strong { transform: translateY(-2px); }

.kfg-auswahl__karte figcaption span {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.32s ease, opacity 0.32s ease, margin-top 0.32s ease;
  margin-top: 0;
}

.kfg-auswahl__karte:hover figcaption span,
.kfg-auswahl__karte:focus-within figcaption span {
  max-height: 24px;
  opacity: 1;
  margin-top: 2px;
}

/* feiner Lichtstreifen, der einmal ueber die Kachel wandert */
.kfg-auswahl__karte::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.16) 50%, transparent 58%);
  transform: translateX(-120%);
  pointer-events: none;
}

.kfg-auswahl__karte:hover::after {
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateX(120%);
}

@media (prefers-reduced-motion: reduce) {
  .kfg-auswahl__karte {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .kfg-auswahl:hover .kfg-auswahl__karte,
  .kfg-auswahl:hover .kfg-auswahl__karte:hover { opacity: 1; }
  .kfg-auswahl__karte figcaption strong,
  .kfg-auswahl__karte figcaption span { transition: none !important; }
  .kfg-auswahl__karte:hover figcaption strong { transform: none; }
  /* Untertitel dauerhaft sichtbar, wenn nicht animiert werden soll */
  .kfg-auswahl__karte figcaption span { max-height: 24px; opacity: 1; margin-top: 2px; }
  .kfg-auswahl__karte::after { display: none; }
}


@keyframes kfgPunktAuf {
  to { opacity: 1; transform: scale(1); }
}


@keyframes kfgPuls {
  0%   { transform: scale(0.7); opacity: 0.85; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}


@media (max-width: 640px) {
}

@media (prefers-reduced-motion: reduce) {
}

/* ---------- Hinweis auf ein Angebot des Kooperationspartners ---------- */
.partner-tipp {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 22px 24px;
  border-radius: 16px;
  border: 1px solid var(--s-linie);
  background: var(--s-flaeche);
}

.partner-tipp__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blau-hell), var(--blau));
  color: #fff;
}

.partner-tipp h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 7px;
}

.partner-tipp p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--s-text);
}

.partner-tipp__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blau-hell);
  font-size: 14.5px;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid rgba(21, 116, 196, 0.4);
  padding-bottom: 2px;
}

.partner-tipp__link:hover {
  color: #fff;
  border-bottom-color: currentColor;
}

@media (max-width: 560px) {
  .partner-tipp { flex-direction: column; gap: 12px; padding: 20px; }
}

/* ============================================================
   Standardzellen (standardzellen.html)
   ============================================================ */

.zellen-intro {
  max-width: 700px;
  margin: -8px 0 28px;
  font-size: 15.5px;
  line-height: 1.7;
  color: #4a5a68;
}

.zellen-intro--hell { color: var(--s-text); }

.zellen-liste {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

.zelle {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--linie);
  background: #fff;
  box-shadow: 0 14px 36px rgba(0, 63, 92, 0.08);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.zelle:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 94, 168, 0.45);
  box-shadow: 0 24px 54px rgba(0, 63, 92, 0.16);
}

.zelle__bild {
  position: relative;
  overflow: hidden;
}

.zelle__bild img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.zelle:hover .zelle__bild img { transform: scale(1.05); }

/* KI-Kennzeichnung nach Artikel 50 EU-KI-Verordnung (gilt seit 02.08.2026).
   Der Hinweis steht zusaetzlich im Bild, wird dort aber bei kleiner Darstellung
   unlesbar. Dieses Label skaliert nicht mit und bleibt ueberall erkennbar. */
.ki-hinweis {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  background: rgba(7, 16, 25, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: rgba(255, 255, 255, 0.92);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
}

.ki-hinweis svg { flex: 0 0 11px; width: 11px; height: 11px; }

/* in Kacheln, deren Beschriftung unten sitzt, nach oben ausweichen */
.ki-hinweis--oben { top: 10px; bottom: auto; }

/* in der Slider-Kachel unten rechts, oberhalb des Fortschrittsbalkens.
   Oben sitzt dort schon der Kategorie-Chip. */
.g-karte .ki-hinweis { top: auto; bottom: 96px; right: 14px; }
@media (max-width: 640px) { .g-karte .ki-hinweis { bottom: 86px; right: 10px; } }

/* auf hellem Grund (Karten der Loesungsseiten) */
.ist-hell .ki-hinweis { background: rgba(255, 255, 255, 0.9); color: #16222e; }

@media (max-width: 640px) {
  .ki-hinweis { right: 7px; bottom: 7px; padding: 3px 7px 3px 6px; font-size: 9px; }
}

/* Kennzeichnung, solange die echten 3D-Bilder fehlen */
.zelle__muster {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(7, 16, 25, 0.82);
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.zelle__inhalt {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 24px 24px;
}

.zelle__inhalt h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blau-dunkel);
  margin: 0 0 8px;
}

.zelle__kurz {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.6;
  color: #4a5a68;
}

.zelle__label {
  margin: 18px 0 8px;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rot);
}

.zelle__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--linie);
}

.zelle__preis {
  margin: 0;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--blau);
}

.zelle__anfrage {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--blau);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.zelle__anfrage:hover { color: var(--blau-hell); text-decoration: underline; }

/* Datenblatt-Download neben dem Anfrage-Link */
.zelle__aktionen { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.zelle__datenblatt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--blau);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.zelle__datenblatt:hover { color: var(--blau-hell); text-decoration: underline; }
.s-dunkel .zelle__datenblatt { color: var(--blau-hell); }

/* dunkle Abschnitte */
.s-dunkel .zelle {
  background: var(--s-karte);
  border-color: var(--s-linie);
  box-shadow: none;
}

.s-dunkel .zelle__inhalt h3 { color: #fff; }
.s-dunkel .zelle__kurz { color: var(--s-text); }
.s-dunkel .zelle__fuss { border-top-color: var(--s-linie); }
.s-dunkel .zelle__preis { color: var(--blau-hell); }
.s-dunkel .zelle__anfrage { color: var(--blau-hell); }
.s-dunkel .zelle .haken-liste li { color: var(--s-text-stark); }
.s-dunkel .zelle:hover { border-color: rgba(21, 116, 196, 0.55); }

/* ---------- Verfügbarkeits-Hinweis ---------- */


@media (max-width: 560px) {
  .zellen-liste { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .zelle, .zelle__bild img { transition: none !important; }
  .zelle:hover { transform: none; }
  .zelle:hover .zelle__bild img { transform: none; }
}


/* ---------- Merkmalsleiste auf der Standardzellen-Seite ---------- */
.merkmale {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.merkmale li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 13px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--linie);
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 63, 92, 0.06);
}

.merkmale__icon {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--blau-hell), var(--blau));
  color: #fff;
}

.merkmale strong {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--blau-dunkel);
}

.merkmale li > span:last-child {
  font-size: 13px;
  line-height: 1.35;
  color: var(--grau);
}

@media (max-width: 560px) {
  .merkmale li { padding: 14px 15px; }
}

/* Vier Verweise wirken im dreispaltigen Raster unausgewogen (drei oben, einer
   allein darunter). Auf Seiten mit vier Einträgen deshalb zwei mal zwei. */
.weiter-liste--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 640px) {
  .weiter-liste--zwei { grid-template-columns: 1fr; }
}

/* ---------- Detailbilder einer Cobot-Anlage ---------- */
.detail-gitter {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.detail-karte {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  width: 100%;
  text-align: left;
  cursor: zoom-in;
  font: inherit;
  border-radius: 16px;
  overflow: hidden;
  background: var(--nacht-2);
  border: 1px solid var(--linie);
  box-shadow: 0 12px 30px rgba(0, 63, 92, 0.1);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.detail-karte:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 94, 168, 0.5);
  box-shadow: 0 20px 46px rgba(0, 63, 92, 0.18);
}

.detail-karte img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.detail-karte:hover img { transform: scale(1.05); }

.detail-karte__text {
  position: absolute;
  inset: auto 0 0 0;
  padding: 34px 16px 15px;
  background: linear-gradient(180deg, rgba(7, 16, 25, 0) 0%, rgba(7, 16, 25, 0.86) 58%);
  color: #fff;
}

.detail-karte__text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
}

.detail-karte__text > span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 560px) {
  .detail-karte img { height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .detail-karte, .detail-karte img { transition: none !important; }
  .detail-karte:hover { transform: none; }
  .detail-karte:hover img { transform: none; }
}


/* Karten sind anklickbar: Lupe beim Ueberfahren, Untertitel bleibt einzeilig */
.detail-karte { border: 1px solid var(--linie); }

.detail-karte__lupe {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(7, 16, 25, 0.72);
  color: #fff;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.detail-karte:hover .detail-karte__lupe,
.detail-karte:focus-visible .detail-karte__lupe { opacity: 1; transform: none; }

.detail-karte__text > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
  .detail-karte__lupe { transition: none !important; }
  .detail-karte:hover .detail-karte__lupe { transform: none; }
}

/* ---------- Erklaerabschnitt: Text links, Bild rechts ---------- */
.erklaer {
  display: grid;
  margin-top: 30px;              /* Luft zur Ueberschrift darueber */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(28px, 4vw, 52px);
  /* stretch statt center: das Bild fuellt die Hoehe der Textspalte,
     dadurch bleibt rechts keine Leerflaeche stehen */
  align-items: stretch;
}

.erklaer__text .fliess { margin-bottom: 16px; }
.erklaer__text .fliess:last-of-type { margin-bottom: 22px; }

.erklaer__punkte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.erklaer__punkte li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--blau-dunkel);
}

.erklaer__punkte li > span {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blau-hell), var(--blau));
  color: #fff;
}

.erklaer__bild {
  margin: 0;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--linie);
  box-shadow: 0 18px 46px rgba(0, 63, 92, 0.14);
  background: var(--nacht-2);
}

.erklaer__bild picture {
  flex: 1 1 auto;
  min-height: 0;
  display: block;
}

.erklaer__bild img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  display: block;
}

.erklaer__bild figcaption {
  padding: 11px 16px 13px;
  background: #fff;
  border-top: 1px solid var(--linie);
  font-size: 13px;
  color: var(--grau);
}

/* dunkle Abschnitte */
.s-dunkel .erklaer__punkte li { color: var(--s-text-stark); }
.s-dunkel .erklaer__bild { border-color: var(--s-linie); box-shadow: none; }
.s-dunkel .erklaer__bild figcaption {
  background: var(--s-flaeche);
  border-top-color: var(--s-linie);
  color: var(--s-text);
}

@media (max-width: 860px) {
  .erklaer { grid-template-columns: 1fr; gap: 26px; }
  .erklaer__bild { max-width: 520px; }
  .erklaer__bild img { min-height: 0; max-height: 420px; }
}

/* ---------- Consent: Schalter, drei Knoepfe ---------- */
.cookie-schalter[role="switch"] {
  border: 1px solid var(--linie-hell);
  background: rgba(255, 255, 255, 0.14);
  padding: 0;
}

.cookie-schalter[role="switch"][aria-checked="true"] {
  background: var(--blau);
  border-color: var(--blau-hell);
}

.cookie-schalter[role="switch"][aria-checked="true"]::after {
  transform: translateX(22px);
  background: #fff;
}

.cookie-schalter:focus-visible {
  outline: 2px solid var(--blau-hell);
  outline-offset: 2px;
}

.cookie__knoepfe { flex-wrap: wrap; }

.cookie__nur {
  background: transparent;
  border: 1px solid var(--linie-hell);
  color: rgba(255, 255, 255, 0.85);
  padding: 11px 18px;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.cookie__nur:hover { border-color: rgba(255, 255, 255, 0.5); color: #fff; }

.cookie-dialog__fuss { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Lange deutsche Komposita brechen lassen ----------
   „AUTOMATISIERUNGSMÖGLICHKEITEN" passt in keine Handy-Spalte und schob
   die ganze Seite 7px nach rechts. hyphens greift dank lang="de" mit
   deutscher Trennung, overflow-wrap ist die Rückfallebene. */
h1, h2, h3, h4,
.section__titel,
.kat-hero__titel,
.art-inhalt h2,
.art-inhalt h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ---------- Zwischenband, blaue Fassung ----------
   Steht seit dem Umsortieren der Startseite (14.09.2026) zwischen dem hellen
   Vergleich und dem dunklen Leistungsblock. Blau statt Nachtblau, damit es
   sich vom Block darunter absetzt. */
.zwischenband--blau {
  background:
    radial-gradient(ellipse 620px 300px at 12% 0%, rgba(255, 255, 255, 0.08), transparent 62%),
    radial-gradient(ellipse 680px 320px at 88% 100%, rgba(0, 0, 0, 0.18), transparent 62%),
    linear-gradient(135deg, var(--blau), var(--blau-dunkel));
}

.zwischenband--blau .zwischenband__titel { color: #fff; }
.zwischenband--blau .zwischenband__titel em { color: #bfe0ff; }
.zwischenband--blau .zwischenband__text p { color: rgba(255, 255, 255, 0.82); }
.zwischenband--blau .zwischenband__schritte span { background: rgba(255, 255, 255, 0.28); }
.zwischenband--blau .zwischenband__schritte span:nth-child(-n + 2) { background: var(--rot); }

/* ============================================================
   LANDINGPAGE /schweisszelle (Google Ads, Meta Ads), 14.09.2026
   Eigener Kopf ohne Menue, wenige Ausgaenge, mobiler Anfrage-Knopf.
   ============================================================ */
.lp { background: var(--nacht); }

.lp-kopf {
  position: sticky; top: 0; z-index: 300;   /* unter Profil-Overlay (320) und Cookie-Dialog */
  background: rgba(7, 16, 25, 0.97);
  border-bottom: 1px solid var(--linie-hell);
  transform: translateZ(0); backface-visibility: hidden;
}
.lp-kopf__zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.lp-kopf__logo img { display: block; height: 44px; width: auto; }
.lp-kopf__rechts { display: flex; align-items: center; gap: 28px; }
.lp-kopf__rechts .btn { padding: 11px 22px; font-size: 14.5px; }
.lp-kopf__tel { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; text-decoration: none; font-size: 15px; }
.lp-kopf__tel svg { color: var(--blau-hell); }
.lp-kopf__tel:hover { color: var(--blau-hell); }

/* Problem */
.lp-problem__liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lp-problem__kachel { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 24px 22px; border-top: 4px solid var(--rot); }
.lp-problem__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(221, 51, 51, 0.1); color: var(--rot); margin-bottom: 14px; }
.lp-problem__kachel strong { display: block; font-size: 17px; color: var(--blau-dunkel); margin-bottom: 6px; }
.lp-problem__kachel p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--grau); }

/* Loesung */
.lp-loesung__zeile { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.lp-loesung__text p { color: var(--s-text); font-size: 16px; line-height: 1.7; }
.lp-loesung__bild picture, .lp-loesung__bild img { display: block; width: 100%; border-radius: var(--radius); }
.lp-loesung__bild img { aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45); }
.lp-vorteile { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.lp-vorteile li { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 14.5px; }
.lp-vorteil__icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(21, 116, 196, 0.22); color: var(--blau-hell); flex-shrink: 0; }

/* Produkte */
.lp .zellen-liste { grid-template-columns: repeat(2, 1fr); }
.lp-produkt__label { margin: 0 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rot); }
.lp-mehr { margin: 26px 0 0; text-align: center; color: var(--grau); font-size: 15px; }
.lp-mehr a { color: var(--blau); font-weight: 700; }

/* Vertrauen */
.lp-zitat { margin: 0; padding: 26px 28px; border-radius: var(--radius); background: #fff; border: 1px solid var(--linie); border-left: 4px solid var(--blau); }
.lp-zitat p { margin: 0 0 12px; font-size: 17px; line-height: 1.55; color: var(--blau-dunkel); font-weight: 600; }
.lp-zitat footer { font-size: 13.5px; color: var(--grau); }
.lp-zitat footer a { color: var(--blau); }
.lp-partner__titel { text-align: center; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: var(--grau); margin: 0 0 16px; }
.lp-partner { grid-template-columns: repeat(6, 1fr); }

/* Fuss */
.lp-fuss { background: #040a10; border-top: 1px solid var(--linie-hell); padding: 22px 0; color: rgba(255, 255, 255, 0.6); font-size: 13px; }
.lp-fuss__zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.lp-fuss p { margin: 0; }
.lp-fuss nav { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.lp-fuss nav a, .lp-fuss .footer__cookie { color: rgba(255, 255, 255, 0.7); text-decoration: none; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.lp-fuss nav a:hover, .lp-fuss .footer__cookie:hover { color: #fff; }

/* Mobiler Anfrage-Knopf, nur auf kleinen Bildschirmen */
.lp-mobil-cta { display: none; }

@media (max-width: 960px) {
  .lp-problem__liste { grid-template-columns: repeat(2, 1fr); }
  .lp-loesung__zeile { grid-template-columns: 1fr; }
  .lp-loesung__bild { order: -1; }
  .lp-partner { grid-template-columns: repeat(3, 1fr); }
  .lp .zellen-liste { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .lp-kopf__tel span { display: none; }
  .lp-kopf__rechts { gap: 16px; }
  .lp-kopf__rechts .btn { padding: 9px 14px; font-size: 13.5px; }
  .lp-problem__liste { grid-template-columns: 1fr; }
  .lp-vorteile { grid-template-columns: 1fr; }
  .lp-zitat { padding: 20px; }
  .lp-fuss__zeile { flex-direction: column; align-items: flex-start; }
  .lp-mobil-cta {
    display: flex; justify-content: center;
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 950;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  }
  .lp main { padding-bottom: 70px; }   /* Platz fuer den festen Knopf */
}
.lp-zitat__kicker { font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rot) !important; margin-bottom: 8px !important; }

/* ---------- Landingpage: Hero wie Startseite, aber unter dem eigenen Kopf ---------- */
.lp .hero--lp { min-height: calc(100svh - 68px); }

.lp-zitat { max-width: 820px; margin: 0 auto 40px; }

/* ---------- Landingpage: Hover-Effekte ---------- */
.lp-problem__kachel { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease; }
.lp-problem__icon { transition: background .3s ease, color .3s ease, transform .3s ease; }
.lp-problem__kachel:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(0, 63, 92, 0.14); border-top-color: var(--blau); }
.lp-problem__kachel:hover .lp-problem__icon { background: var(--rot); color: #fff; transform: rotate(-6deg) scale(1.08); }

.lp-vorteile li { transition: transform .3s ease; }
.lp-vorteil__icon { transition: background .3s ease, color .3s ease, transform .3s ease; }
.lp-vorteile li:hover { transform: translateX(4px); }
.lp-vorteile li:hover .lp-vorteil__icon { background: var(--blau-hell); color: #fff; transform: scale(1.1); }

.lp-loesung__bild img { transition: transform .7s cubic-bezier(.22,1,.36,1); }
.lp-loesung__bild:hover img { transform: scale(1.03); }

.lp-zitat { transition: transform .35s ease, box-shadow .35s ease, border-left-color .35s ease; }
.lp-zitat:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 63, 92, 0.12); border-left-color: var(--rot); }


.lp-kopf__tel { transition: color .25s ease, transform .25s ease; }
.lp-kopf__tel:hover { transform: translateY(-1px); }


@media (prefers-reduced-motion: reduce) {
  .lp-problem__kachel, .lp-problem__icon,
  .lp-vorteile li, .lp-vorteil__icon, .lp-loesung__bild img, .lp-zitat,
  .lp-kopf__tel { transition: none; }
}

/* Landingpage-Hero: beide Zeilen etwas kleiner als auf der Startseite,
   SCHWEISSEN auf die Breite von AUTOMATISCH (gemessen 568 zu 612 px) */
.hero--lp .hero__titel { font-size: clamp(60px, 7.5vw, 118px); }
.hero__zeile--lp { font-size: 1.04em; letter-spacing: 0.026em; }


/* Landingpage: Team-Raster wie Startseite, nur etwas Luft nach unten */
.lp-teamgrid { margin: 8px 0 34px; }