/* ==========================================================================
   Basec GmbH — Design Tokens
   Hintergrund/Struktur 1:1 von v0-compute-11.vercel.app übernommen,
   Akzent-/Sekundärfarben durch unser Corporate Design ersetzt.
   ========================================================================== */
:root{
  --primary:#66FFFF;        /* Bold Cyan — CD-Akzentfarbe, ersetzt das Pink der Vorlage */
  --secondary:#0ac9d4;      /* Dark Turquoise — CD-Sekundärfarbe */
  --accent-light:#a3ebf0;   /* Lagoon */
  --accent-warm:#c9a063;    /* Gold */

  --bg:#000101;             /* Seiten-Hintergrund 1:1 von der Vorlage */
  --bg-rgb:0,1,1;
  --ink:#ecebe7;             /* Text auf dunklem Grund, 1:1 von der Vorlage */
  --ink-rgb:236,235,231;
  --white:#ffffff;
  --neutral-gray:#04121e;    /* nur noch für Kontrast-Text auf hellen/bunten Flächen */
  --neutral-light:#748686;

  --hairline: rgba(var(--ink-rgb),0.1);
  --hairline-strong: rgba(var(--ink-rgb),0.28);
  --container-w: 1280px;

  /* ---- Schriftgroessen -----------------------------------------------------
     Festlegung vom 28.7.2026: KEIN Lesetext unter 16,8 px. Vorher lagen
     Kartentexte bei 14 px, Menue und Fusszeile bei 12-13 px – zu klein.
     Angaben in rem statt px, damit eine im Browser vergroesserte Standard-
     schrift wirkt; feste Pixelwerte wuerden sie ignorieren, und das trifft
     genau die Leute, die kleine Schrift ohnehin schlecht lesen.
     Ausgenommen bleiben Elemente, die kein Lesetext sind: .eyebrow (Versalien
     ueber jeder H2), Badges/Chips in Karten fester Breite, Mono-Zahlen und
     Tabellenkoepfe, .btn-sm sowie Dekozeichen. Formular-Hinweise duerfen
     kleiner sein, stehen aber bei 15 px statt frueher 12 px. */
  --text-s: 1.05rem;    /* 16,8 px – Mindestgroesse, Sekundaertext */
  --text-m: 1.125rem;   /* 18 px   – Grundtext */
  --text-l: 1.25rem;    /* 20 px   – Lede, Einleitungen */
  --text-formular: 0.9375rem; /* 15 px – erlaubte Ausnahme: Hinweise an Formularen */
}

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

html{scroll-behavior:auto;}

body{
  background:var(--bg);
  font-family:'Blinker','Blinker Fallback',system-ui,sans-serif;
  font-size:var(--text-s);
  font-weight:400;
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5{
  font-family:'Blinker','Blinker Fallback',system-ui,sans-serif;
  font-weight:600;
  color:var(--ink);
  text-wrap:balance;
}
h1,h2{ line-height:0.9; letter-spacing:-0.025em; }
h3,h4,h5{ line-height:1.15; }

p{color:rgba(var(--ink-rgb),.65);}

a{text-decoration:none;color:inherit;}

/* Inline-Links im Fließtext — als Link erkennbar (Lagoon), aber dezent */
p a{
  color:var(--accent-light);
  text-decoration:none;
  transition:color .2s ease;
}
p a:hover{
  color:var(--primary);
}
img{max-width:100%;display:block;}
ul{list-style:none;}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit;}

.mono{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-weight:400;
}

::selection{background:var(--primary);color:var(--bg);}

/* ==========================================================================
   Fonts (Variable Fonts — je eine Datei deckt alle Schnitte ab)
   ========================================================================== */
@font-face{
  font-family:'Blinker';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/blinker-400.woff2') format('woff2');
}
@font-face{
  font-family:'Blinker';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('assets/fonts/blinker-600.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('assets/fonts/jetbrains-mono-var.woff2') format('woff2');
}

/* ==========================================================================
   Layout utilities
   ========================================================================== */
.container{
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 24px;
}
@media (min-width:1024px){ .container{ padding:0 48px; } }

.section{
  position:relative;
  padding:96px 0;
  overflow:hidden;
}
@media (min-width:768px){ .section{ padding:132px 0; } }
@media (min-width:1024px){ .section{ padding:180px 0; } }

.section-head{
  max-width:640px;
  margin-bottom:56px;
}
.section-head.centered{
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:16px;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:14px;font-weight:400;line-height:1.43;letter-spacing:normal;
  color:var(--primary);
  margin-bottom:24px;
}
.eyebrow .line{width:36px;height:1px;background:var(--hairline-strong);}

.headline{
  font-size:clamp(2.25rem,5vw,4.75rem);
  margin-bottom:24px;
}
.headline .muted{color:rgba(var(--ink-rgb),.85);}
@supports (-webkit-text-stroke: 1px black){
  .headline .muted{
    color:transparent;
    -webkit-text-stroke:1.25px var(--white);
  }
}

/* Konturschrift fuer einzelne Woerter in Ueberschriften, die kein .headline
   tragen – etwa die H1 im Seiten-Hero, die ihre eigene Groesse mitbringt.
   Gleiche Optik wie .headline .muted oben, nur ohne die Bindung daran.
   Fallback ohne text-stroke: das Wort bleibt gefuellt und damit lesbar. */
.kontur{color:rgba(var(--ink-rgb),.85);}
@supports (-webkit-text-stroke: 1px black){
  .kontur{
    color:transparent;
    -webkit-text-stroke:1.25px var(--white);
  }
}

.lede{
  font-size:1.25rem;
  line-height:1.625;
  color:rgba(var(--ink-rgb),.65);
  max-width:46ch;
}

/* ---- Fließtext in zwei Spalten (Zeitungs-Look), z.B. "Ihr Nutzen" ------- */
.nutzen-fliesstext{
  max-width:900px;
  margin:0 auto;
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
}
.nutzen-fliesstext p{
  font-size:1.0625rem;
  line-height:1.7;
  color:rgba(var(--ink-rgb),.65);
  margin:0 0 16px;
}
.nutzen-fliesstext p:last-child{ margin-bottom:0; }
@media (min-width:768px){
  .nutzen-fliesstext{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:48px;
    align-items:start;
  }
  .nutzen-fliesstext p{ margin-bottom:0; }
}
.nutzen-subhead{
  text-align:center;
  font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1.1;
  letter-spacing:-0.015em;
  max-width:720px;
  margin:40px auto 56px;
}

/* ---- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:var(--text-s);font-weight:600;
  padding:14px 26px;
  border-radius:9999px;
  transition:transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--primary);
  color:var(--bg);
  border:1px solid var(--primary);
}
.btn-primary:hover{ transform:translateY(-2px); background:var(--secondary); border-color:var(--secondary); }

.btn:disabled{
  cursor:not-allowed;
  opacity:.5;
  background:rgba(var(--ink-rgb),.12);
  color:rgba(var(--ink-rgb),.55);
  border-color:transparent;
}
.btn:disabled:hover{ transform:none; background:rgba(var(--ink-rgb),.12); border-color:transparent; }

.btn-outline{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--hairline-strong);
}
.btn-outline:hover{ border-color:var(--primary); color:var(--primary); }

.btn-sm{ padding:10px 20px; font-size:13px; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
header.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(var(--bg-rgb),0.75);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.nav-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;
  /* Bezugsrahmen fuer das grosse Services-Panel: Es wird an der Kopfzeile
     ausgerichtet, nicht am Menuepunkt "Services". Der sitzt weit links, und
     ein breites Panel ragte dadurch links aus dem Bild. */
  position:relative;
}
@media (min-width:1024px){ .nav-row{ padding:18px 48px; } }

.brand{display:flex;align-items:center;}
.brand img{height:60px;width:auto;}

.nav-links{
  display:none;
  align-items:center;
  gap:36px;
  font-size:var(--text-s);font-weight:600;
  color:rgba(var(--ink-rgb),.78);
}
.nav-links a, .nav-links button{ color:inherit; font-weight:600; font-size:var(--text-s); }
.nav-links a:hover, .nav-links button:hover{ color:var(--primary); }
@media (min-width:960px){ .nav-links{ display:flex; } }

.nav-cta{ display:none; }
@media (min-width:960px){ .nav-cta{ display:inline-flex; } }

.nav-item-dropdown{ position:relative; }
.nav-dropdown-toggle{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:none; cursor:pointer;
}
.nav-dropdown-toggle .chevron{
  width:12px;height:12px;
  transition:transform .25s ease;
}
.nav-item-dropdown.is-open .nav-dropdown-toggle .chevron{ transform:rotate(180deg); }
.nav-item-dropdown.is-open .nav-dropdown-toggle{ color:var(--primary); }

/* Das grosse Services-Panel haengt an der Kopfzeile statt am Menuepunkt –
   dafuer wird sein Wrapper hier ausnahmsweise static. Die kleinen Panels
   (--single, --two-col) bleiben unter ihrem Menuepunkt haengen. */
.nav-item-dropdown:has(> .nav-dropdown-panel:not(.nav-dropdown-panel--single):not(.nav-dropdown-panel--two-col)){
  position:static;
}

.nav-dropdown-panel{
  position:absolute;
  top:calc(100% + 20px);
  left:50%;
  transform:translateX(-50%);
  /* Breiter als frueher: Seit der Umstellung auf 16,8 px Menueschrift passten
     die vier Spalten nicht mehr in 760 px – BaseCollege lief 137 px ueber die
     Kartenkante hinaus. */
  width:min(1150px, calc(100vw - 40px));
  display:none;
  /* minmax(0,…) ist entscheidend: Mit blossem "1fr" waere die Mindestbreite
     der Spalteninhalt, und statt zu schrumpfen laeuft das Raster ueber den
     Kartenrand. So duerfen die Spalten enger werden und alles bleibt drin.
     Die Verteilung folgt dem Bedarf: BaseConsulting und BaseCollege haben je
     zwei Textspalten, BaseCompliance und BaseCyberSecurity nur eine. */
  grid-template-columns:minmax(0,0.62fr) minmax(0,1.5fr) minmax(0,0.58fr) minmax(0,1.3fr);
  gap:28px;
  padding:32px;
  border-radius:15px;
  border:1px solid var(--hairline);
  background:rgba(var(--bg-rgb),.92);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  z-index:60;
}
.nav-item-dropdown.is-open .nav-dropdown-panel{ display:grid; }
.nav-dropdown-panel--single{
  grid-template-columns:1fr;
  width:200px;
  padding:20px;
}
.nav-dropdown-panel--two-col{
  grid-template-columns:repeat(2,1fr);
  width:340px;
  gap:20px 28px;
}
.nav-dropdown-col{ position:relative; }
.nav-dropdown-col:not(:first-child)::before{
  content:"";
  position:absolute;
  left:-14px;
  top:2px;
  bottom:2px;
  width:1px;
  background:rgba(var(--ink-rgb),.18);
}
.nav-dropdown-panel h4{
  font-size:var(--text-s); font-weight:600; letter-spacing:.02em;
  color:var(--ink); margin-bottom:16px;
}
/* Die BaseCollege-Ueberschrift ist auf die Uebersichtsseite verlinkt. Ohne
   diese Regel wuerde die allgemeine Link-Regel darunter greifen und die
   Ueberschrift wie einen blassen Listeneintrag aussehen lassen. */
.nav-dropdown-panel h4 a{ font-size:inherit; font-weight:inherit; color:inherit; }
.nav-dropdown-panel h4 a:hover{ color:var(--primary); }
.nav-dropdown-panel ul{ display:flex; flex-direction:column; gap:10px; }
.nav-dropdown-panel li{ font-size:var(--text-s); font-weight:400; color:rgba(var(--ink-rgb),.6); }
.nav-dropdown-panel a{ font-size:var(--text-s); font-weight:400; color:rgba(var(--ink-rgb),.6); }
.nav-dropdown-panel a:hover{ color:var(--primary); }

/* BaseCollege-Spalte hat mehr Einträge (10) als die Nachbarspalten — intern
   zweispaltig darstellen, damit sie nicht unproportional hoch wird. */
.nav-dropdown-panel ul.nav-dropdown-list--two-col{
  display:block;
  columns:2;
  column-gap:20px;
}
.nav-dropdown-list--two-col li{ break-inside:avoid; margin-bottom:10px; }

.nav-burger{
  display:inline-flex;
  font-size:22px;color:var(--ink);
}
@media (min-width:960px){ .nav-burger{ display:none; } }

/* ---- Mobil-Menü: Burger klappt die Navigation als Overlay-Panel auf (< 960px) ---- */
@media (max-width:959px){
  body.nav-open{ overflow:hidden; }

  .site-header.is-menu-open .nav-links{
    display:flex;
    position:absolute;
    left:0; right:0;
    top:100%;
    height:calc(100vh - var(--header-h, 92px));
    height:calc(100dvh - var(--header-h, 92px));
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:4px 24px 40px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    background:rgb(var(--bg-rgb));
    border-top:1px solid var(--hairline);
    z-index:55;
  }

  .site-header.is-menu-open .nav-links > a,
  .site-header.is-menu-open .nav-item-dropdown{
    border-bottom:1px solid var(--hairline);
  }
  .site-header.is-menu-open .nav-links > a{ padding:16px 2px; font-size:var(--text-s); }

  .site-header.is-menu-open .nav-dropdown-toggle{
    width:100%; justify-content:space-between;
    padding:16px 2px; font-size:var(--text-s);
  }

  /* Untermenü als Accordion: inline statt absolut positioniert */
  .site-header.is-menu-open .nav-dropdown-panel{
    position:static; transform:none;
    display:none; width:auto;
    grid-template-columns:1fr; gap:0;
    padding:0 0 14px 12px; margin-top:-2px;
    border:none; background:none; box-shadow:none;
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .site-header.is-menu-open .nav-item-dropdown.is-open .nav-dropdown-panel{ display:block; }
  .site-header.is-menu-open .nav-dropdown-panel--two-col{ grid-template-columns:1fr; }
  .site-header.is-menu-open .nav-dropdown-panel ul.nav-dropdown-list--two-col{ columns:1; }
  .site-header.is-menu-open .nav-dropdown-col{ margin:0 0 6px; }
  .site-header.is-menu-open .nav-dropdown-col:not(:first-child)::before{ display:none; }
  .site-header.is-menu-open .nav-dropdown-panel h4{
    font-size:17px; color:var(--ink); margin:26px 0 19px;
  }
  .site-header.is-menu-open .nav-dropdown-panel a{ display:block; padding:9px 0; font-size:var(--text-s); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  text-align:left;
  padding-top:88px;
}

.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.hero-bg organic-particle-field{
  display:block;
  position:absolute;
  right:-14%;
  top:36%;
  transform:translateY(-50%);
  width:128%;
  max-width:2050px;
  aspect-ratio:1584/672;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 3%, black 20%, black 100%);
  mask-image:linear-gradient(90deg, transparent 0%, transparent 3%, black 20%, black 100%);
}
@media (max-width:900px){
  .hero-bg organic-particle-field{ width:150%; right:-45%; opacity:.55; }
}
/* Mobil (Smartphone): Feld nach links holen, damit der Baumstamm sichtbar wird
   (rechts nur die Wurzelspitzen leicht angeschnitten). Nur < 768px. */
@media (max-width:768px){
  .hero-bg organic-particle-field{ width:250%; right:-23%; top:28%; }
}

.hero-inner{
  position:relative; z-index:1;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero h1{
  font-size:clamp(2.25rem,5.5vw,5.25rem);
  font-weight:600;
  max-width:16ch;
  margin:0 0 48px;
}
.hero h1 .rotator{
  display:inline-block;
  color:var(--primary);
}
.hero .sub{
  font-weight:400;
  font-size:clamp(1.15rem,2vw,1.4rem);
  line-height:1.625;
  color:rgba(var(--ink-rgb),.65);
  max-width:44ch;
  margin:0 0 36px;
}
.hero .btn{ margin-bottom:0; align-self:flex-start; }

/* ---- Logo marquee --------------------------------------------------------*/
.marquee{
  position:relative;
  border-top:1px solid var(--hairline);
  padding:40px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  overflow:hidden;
}
.marquee-track{
  display:flex;
  align-items:center;
  gap:80px;
  width:max-content;
  animation:marqueeScroll 38s linear infinite;
}
.marquee-track img{
  height:52px;width:auto;
  opacity:.7;
  filter:brightness(0) invert(1);
}
@media (min-width:768px){
  .marquee-track img{ height:64px; }
}
@keyframes marqueeScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* Laufzeit an die Zahl der Logos gekoppelt, damit die Geschwindigkeit gleich
   bleibt: 9 Logos / 38s war der Ausgangswert, bei 14 Logos sind es 59s
   (rund 48 px/s). Kommt ein Logo dazu, diesen Wert mitziehen. */
.marquee--logos .marquee-track{ animation-duration:59s; }

/* Fristen-Ticker (Hero) — Compliance-Deadlines als scrollende Banderole.
   Nutzt die Marquee-Mechanik, aber mit Text-Pills statt Logos. */
.marquee--fristen .marquee-track{ gap:0; animation-duration:56s; }
.marquee--fristen:hover .marquee-track{ animation-play-state:paused; }
.frist-item{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:0 34px;
  white-space:nowrap;
  text-decoration:none;
  color:inherit;
  border-left:1px solid var(--hairline);
  transition:background-color .3s ease;
}
.frist-item:hover{ background:rgba(var(--ink-rgb),.05); }
.frist-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 8px var(--primary);
  flex:none;
}
.frist-date{
  font-weight:700;
  font-size:18px;
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  color:var(--primary);
}
.frist-reg{ font-weight:600; font-size:18px; color:var(--white); }
.frist-note{ font-size:18px; color:rgba(var(--ink-rgb),.82); }
.frist-item.is-overdue .frist-dot{ background:#c9a063; box-shadow:0 0 8px #c9a063; }
.frist-item.is-overdue .frist-date{ color:#c9a063; }
@media (max-width:640px){
  .frist-item{ padding:0 22px; }
  .frist-note{ display:none; }
}

/* ==========================================================================
   Page Hero (Unterseiten) — kompakter Hero mit austauschbarer
   Deko-Animation, standardmäßig das Schild-Motiv (edge="radial").
   ========================================================================== */
.page-hero{
  min-height:62vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:left;
  padding-top:140px;
  padding-bottom:64px;
}
.page-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.page-hero-bg organic-particle-field{
  display:block;
  width:100%;
  height:100%;
}
/* Nautilus-Hero (BaseCompliance): Grafik + 0/1-Partikel rechts, nach links
   transparent ausgefadet. mix-blend-mode:screen lässt den schwarzen Bild-
   hintergrund verschwinden, sodass nur die leuchtenden Linien/Partikel bleiben. */
.page-hero-bg--nautilus organic-particle-field{
  display:block;
  width:100%;
  height:100%;
  mix-blend-mode:screen;
  /* Sanftes Ausfaden am linken Rand, wo die nach links fliegenden 0/1-Partikel
     sich auflösen; der Rest bleibt sichtbar, damit sie unter dem Text strömen. */
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 16%);
          mask-image:linear-gradient(to right, transparent 0%, #000 16%);
}
@media (max-width:900px){
  .page-hero-bg--nautilus organic-particle-field{ opacity:.5; }
}
/* Mobil: Hero-Grafik als Band OBEN ueber der Eyebrow (alle Unterseiten).
   Generische Struktur; Positionierung/Groesse pro Grafik. Nur < 768px. */
@media (max-width:768px){
  .page-hero{ justify-content:flex-start; min-height:0; padding-top:330px; }
  .page-hero-bg{
    inset:0 0 auto 0; height:370px;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 86%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 0%,#000 86%,transparent 100%);
  }
  /* Nautilus (BaseCompliance): rechts anliegend, gross, leere linke Seite off-screen */
  .page-hero-bg--nautilus organic-particle-field{
    position:absolute; top:0; bottom:auto; left:auto; right:0;
    width:300%; height:100%; opacity:1;
  }
  /* Industrie/Biene ist mittig-links komponiert -> schmaleres Feld holt die
     ganze Biene nach links ins Bild (nur diese Seite). */
  .page-hero-bg--nautilus organic-particle-field[src*="biene"]{ width:170%; }
  /* Oktopus (BaseConsulting): zentriert, gross (leuchtende Variante via mobile-src) */
  .page-hero-bg organic-particle-field[src*="oktopus"]{
    position:absolute; top:0; bottom:auto; left:50%; right:auto; transform:translateX(-50%);
    width:230%; height:100%; opacity:1;
  }
  /* Adler (BaseCyberSecurity): rechts anliegend, gross, leere linke Seite off-screen */
  .page-hero-bg organic-particle-field[src*="adler"]{
    position:absolute; top:0; bottom:auto; left:auto; right:0;
    width:340%; height:100%; opacity:1;
  }
  /* Nest (Unternehmen/ueber-uns): Groesse via Zoom (mobile-image-scale an den
     Feldern), rechts anliegend, etwas nach unten. */
  .page-hero-bg.page-hero-bg--nest organic-particle-field{
    position:absolute; top:0; bottom:auto; left:auto; right:0;
    width:150%; height:100%; transform:translateY(-15px); opacity:1;
    -webkit-filter:brightness(1.8); filter:brightness(1.8);
  }
  /* Kopf (Karriere): rechts anliegend und breit – die linke Bildhaelfte ist
     leer und laeuft off-screen. Ohne das passt sich das Bild in die schmale
     Bandbreite ein und der Kopf bleibt winzig. Die Bandhoehe bleibt bei
     370px, der Abstand nach unten aendert sich also nicht. */
  .page-hero-bg.page-hero-bg--kopf organic-particle-field{
    position:absolute; top:0; bottom:auto; left:auto; right:0;
    width:300%; height:100%;
    /* Weicher Verlauf nur unten – oben wuerde er in die Stirn schneiden,
       sobald der Kopf die Bandhoehe ausfuellt. */
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
            mask-image:linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
  }
  /* Kontakt (kontaktiere-basec): Villa-Wireframe-Partikel mobil als Trenner-Band
     oben ueber der Eyebrow "Besuchen Sie uns"; Berg-Feld mobil aus. */
  #standort-kontakt{ padding-top:340px; }
  #standort-kontakt .case-particles:not(.villa-particles){ display:none; }
  #standort-kontakt .villa-particles{
    inset:0 0 auto 0; height:360px; bottom:auto;
    -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
  }
  #standort-kontakt .villa-particles organic-particle-field{
    position:absolute; top:0; left:auto; right:0;
    width:200%; height:100%;
  }
}
/* Nest-Hero (Über uns): digitales Nest, Digits/Sparks schweben kostbar über den
   Eiern. Zwei gestapelte Felder (Nest-Ambiente + aufsteigende Digits an den Eiern),
   deshalb absolut positioniert, damit sie sich exakt überlagern. screen blendet
   den schwarzen Bildhintergrund weg – nur die leuchtenden Linien/Digits bleiben. */
.page-hero-bg--nest organic-particle-field{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  mix-blend-mode:screen;
  /* linken Textbereich frei halten, Eier rechts bleiben voll sichtbar */
  -webkit-mask-image:linear-gradient(to right, transparent 0%, transparent 34%, #000 80%);
          mask-image:linear-gradient(to right, transparent 0%, transparent 34%, #000 80%);
}
@media (max-width:900px){
  .page-hero-bg--nest organic-particle-field{ opacity:.55; }
}
.page-hero .container{
  position:relative;
  z-index:1;
}
.page-hero .eyebrow{ margin-bottom:20px; }
.page-hero h1{
  font-size:clamp(2.25rem,5.5vw,5.25rem);
  font-weight:600;
  max-width:18ch;
  margin:0 0 32px;
}
.page-hero .lede{
  max-width:56ch;
  margin:0 0 32px;
}

/* ==========================================================================
   Stat block (Digitale Souveränität / Sicherheits-Check)
   ========================================================================== */
.stat-section .container{
  display:grid;
  grid-template-columns:1fr;
  gap:56px;
  position:relative;
  z-index:1;
}
@media (min-width:960px){
  .stat-section .container{ grid-template-columns:1fr 1fr; align-items:start; gap:80px; }
}

/* Adler-Animation: Hintergrund oben rechts, Statistik-Karten rutschen darunter
   auf volle Breite (nur in dieser Section — .stat-grid selbst bleibt unverändert
   für die Sicherheits-Check-Section) */
.eagle-bg{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  right:-34%;
  width:104%;
  max-width:2800px;
  aspect-ratio:1584/672;
  z-index:0;
  pointer-events:none;
}
.eagle-bg organic-particle-field{ display:block; width:100%; height:100%; transform:scaleX(-1); }
@media (max-width:900px){
  .eagle-bg{ width:118%; opacity:.5; }
}
/* Mobil: Adler als Trenner OBEN, ueber der Eyebrow – gross, leere Bildseite
   faellt off-screen weg. Nur < 768px; Desktop unveraendert. */
@media (max-width:768px){
  #digitale-souveraenitaet{ padding-top:300px; }
  .eagle-bg{
    top:0; bottom:auto; transform:none;
    left:0; right:auto;
    width:200%;
    opacity:.9;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
    mask-image:linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  }
}
#digitale-souveraenitaet .stat-grid{
  grid-column:1/-1;
  margin-top:16px;
}

/* Myzel-Animation: leiser, ganzflächiger Hintergrund der Sektion — Partikel
   wandern wie Signale durchs Geflecht statt gerichtet davonzufliegen.
   Zum Text hin ausgeblendet, damit die Copy lesbar bleibt. */
/* Zusätzliche Höhe, damit die Myzel-Grafik unten nicht vom overflow:hidden
   der Section abgeschnitten wird */
#sicherheits-check{ padding-bottom:420px; }
@media (min-width:768px){ #sicherheits-check{ padding-bottom:560px; } }
@media (min-width:1024px){ #sicherheits-check{ padding-bottom:650px; } }

/* Zwei Masken im Schnitt: horizontal blendet die leere linke Bildseite aus,
   vertikal laeuft die Grafik zur Sektionsunterkante weich aus. Ohne die zweite
   Maske schneidet das overflow:hidden bei sehr breiten Viewports hart ab —
   dort waechst die Grafik ueber die Sektionshoehe hinaus. */
.mycel-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, transparent 24%, black 50%, black 100%),
    linear-gradient(180deg, black 0%, black 74%, transparent 97%);
  mask-image:
    linear-gradient(90deg, transparent 0%, transparent 24%, black 50%, black 100%),
    linear-gradient(180deg, black 0%, black 74%, transparent 97%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
/* Größe über aspect-ratio (wie Baum/Adler) statt Prozent der Section-Höhe,
   damit die Grafikgröße unabhängig von der Section-Höhe/dem Padding bleibt */
.mycel-bg organic-particle-field{
  display:block;
  position:absolute;
  left:-16%;
  top:32%;
  width:132%;
  /* Wachstumsbremse wie beim Adler: ab hier wird die Grafik nicht weiter
     vergroessert. Der Wert liegt so hoch, dass die Grafik bis rund 3800 px
     Viewportbreite weiterhin ueber den rechten Rand hinausreicht. */
  max-width:4400px;
  aspect-ratio:1584/672;
  opacity:.7;
}
@media (max-width:900px){
  .mycel-bg{ opacity:.55; }
}
/* Mobil: Myzel als Trenner OBEN, ueber der Eyebrow – gross, leere linke
   Bildseite faellt off-screen weg. Nur < 768px; Desktop unveraendert. */
@media (max-width:768px){
  #sicherheits-check{ padding-top:300px; padding-bottom:64px; }
  .mycel-bg{
    inset:0 0 auto 0;
    height:300px;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
    mask-image:linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
    /* nur eine Maskenebene – das Verschneiden vom Desktop zuruecknehmen */
    -webkit-mask-composite:source-over;
    mask-composite:add;
  }
  .mycel-bg organic-particle-field{
    top:0; bottom:auto; left:auto; right:-20%;
    width:200%; opacity:.9;
  }
}
@media (min-width:960px){
  #digitale-souveraenitaet .container{ grid-template-columns:0.68fr 1fr; }
}

.stat-copy h4{
  font-size:1.15rem;
  margin:24px 0 10px;
}
.stat-copy h4:first-child{ margin-top:0; }
.stat-copy p{ margin-bottom:8px; }
.stat-copy .btn{ margin-top:28px; }

.stat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
@media (max-width:600px){ .stat-grid{ grid-template-columns:1fr; } }
.stat-item .num{
  display:block;
  font-weight:600;
  font-size:clamp(2.2rem,4vw,3rem);
  line-height:1;
  color:var(--primary);
  margin-bottom:8px;
}
.stat-bar{
  display:block;
  width:100%;
  height:2px;
  margin-bottom:16px;
}
.stat-bar-fill{
  display:block;
  height:100%;
  width:0;
  background:var(--primary);
  border-radius:1px;
  transition:width 1.2s cubic-bezier(.16,.8,.32,1);
}
.stat-item.is-counted .stat-bar-fill{ width:calc(var(--target) * 1%); }
.stat-item p{ font-size:var(--text-s); line-height:1.5; }
.stat-source{
  grid-column:1/-1;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:12px;
  color:rgba(var(--ink-rgb),.4);
  margin-top:8px;
}

.sparkle-canvas{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* ==========================================================================
   Leistungsbereiche — Card grid
   ========================================================================== */
.card-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  position:relative;
  z-index:1;
}
@media (min-width:640px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .card-grid{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:900px){ #vorteile-grid{ grid-template-columns:repeat(3,1fr); } }
/* Bundesweit-Sektion hat nur 3 Karten: 3-spaltig und als Gruppe zentriert unter
   dem Text (sonst kleben die 3 Karten im 4-Spalten-Raster links). */
/* Inhalt über dem Sparkle-Hintergrund halten */
#bundesweit .container{ position:relative; z-index:1; }
#bundesweit .card-grid{ max-width:960px; margin-inline:auto; }
@media (min-width:900px){ #bundesweit .card-grid{ grid-template-columns:repeat(3,1fr); } }

/* Stilisierte Deutschlandkarte zwischen Bodytext und Karten: nur Umrisse +
   Bundesländergrenzen, keine Beschriftung. Die Leuchtpunkte leuchten in fester
   Reihenfolge nacheinander auf (animation-delay je Punkt) – Endlosschleife.
   Hinweis: Deutschland ist hochkant, daher wird die Breite bewusst begrenzt. */
.germany-map{
  position:relative;
  max-width:500px;
  margin:0 auto 56px;
}
.germany-map svg{ display:block; width:100%; height:auto; }
.de-outline path{
  fill:rgba(102,255,255,.04);
  stroke:rgba(102,255,255,.30);
  stroke-width:1;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.de-cities .city-dot{
  fill:#8affff;
  pointer-events:none;
  transform-box:fill-box;
  transform-origin:center;
  filter:drop-shadow(0 0 2.5px rgba(102,255,255,.85));
  opacity:.4;
  animation:cityPulse 7.6s linear infinite;
}
/* Headquarter (Deidesheim): dauerhaft größerer Punkt (r im SVG) mit kräftigerem
   Glow und eigener Puls-Kurve – im Ruhezustand größer UND heller als die übrigen
   Orte, synchron zum selben Timing. */
.de-cities .city-dot--hq{
  filter:drop-shadow(0 0 6px rgba(102,255,255,1));
  animation-name:cityPulseHQ;
}
@keyframes cityPulseHQ{
  0%   { opacity:.68; transform:scale(1.05); }
  5%   { opacity:1;   transform:scale(1.55); }
  14%  { opacity:.68; transform:scale(1.05); }
  100% { opacity:.68; transform:scale(1.05); }
}
/* größerer, unsichtbarer Trefferbereich, damit man die kleinen Punkte gut hovern kann */
.de-cities .city-hit{ fill:transparent; pointer-events:all; cursor:pointer; }
/* Tooltip mit Städtenamen bei Hover (per JS positioniert) */
.map-tooltip{
  position:absolute;
  left:0; top:0;
  transform:translate(-50%,-140%);
  padding:4px 10px;
  border:1px solid rgba(102,255,255,.45);
  border-radius:6px;
  background:rgba(0,1,1,.9);
  color:var(--ink);
  font-size:var(--text-s);
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity .14s ease;
  z-index:2;
}
.map-tooltip.is-visible{ opacity:1; }
@keyframes cityPulse{
  0%   { opacity:.4; transform:scale(.8); }
  5%   { opacity:1;  transform:scale(1.4); }
  14%  { opacity:.4; transform:scale(.8); }
  100% { opacity:.4; transform:scale(.8); }
}
@media (prefers-reduced-motion:reduce){
  .de-cities .city-dot{ animation:none; opacity:.75; }
}
@media (min-width:900px){ #absicherungsstufen-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px){ #pruefziele-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px){ #aufbau-grid{ grid-template-columns:repeat(3,1fr); } }
#leistungsbereiche-grid{ align-items:start; }
#module-grid{ align-items:start; }
@media (min-width:900px){ #regulatorik-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px){ #risiko-grid{ grid-template-columns:repeat(3,1fr); } }

.svc-card{
  position:relative;
  overflow:hidden;
  border-radius:15px;
  border:1px solid var(--hairline);
  background:rgba(var(--ink-rgb),.04);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  padding:36px 32px;
  transition:border-color .35s ease, transform .35s ease, background-color .35s ease;
}
.svc-card::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--ink-rgb),.5), transparent);
}
.svc-card:hover{ border-color:var(--primary); transform:translateY(-4px); background:rgba(var(--ink-rgb),.07); }

/* Dauerhaft laufender, dezenter Rand-Glanz — ein feiner Lichtbogen rotiert
   langsam um die Karte (klassische animierte Gradient-Border-Technik) */
@property --svc-glow-angle{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}
.svc-card::after,
.quickfacts-card::after,
.price-card .card-glow-ring,
.faq-item[open]::after,
.meet-contact::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:15px;
  padding:1.5px;
  background:conic-gradient(from var(--svc-glow-angle),
    transparent 0deg,
    transparent 250deg,
    rgba(102,255,255,.15) 285deg,
    rgba(102,255,255,1) 322deg,
    rgba(255,255,255,.95) 330deg,
    rgba(102,255,255,1) 338deg,
    rgba(102,255,255,.15) 355deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  filter:drop-shadow(0 0 3px rgba(102,255,255,.85)) drop-shadow(0 0 7px rgba(102,255,255,.4));
  animation:svcCardGlow 7s linear infinite;
}
@keyframes svcCardGlow{ to{ --svc-glow-angle:360deg; } }
.svc-card h5{ font-size:1.4rem; line-height:1.15; margin-top:12px; margin-bottom:10px; }
.svc-card .tagline{ font-size:var(--text-s); color:rgba(var(--ink-rgb),.55); margin-bottom:22px; }
.svc-card ul{ display:flex; flex-direction:column; gap:9px; }
.svc-card li{
  font-size:var(--text-s);
  color:rgba(var(--ink-rgb),.78);
  display:flex; align-items:baseline; gap:8px;
}
.svc-card li::before{
  content:"✓";
  color:var(--primary);
  font-weight:600;
}
.svc-card li a{ color:inherit; text-decoration:none; }
.svc-card li a:hover{ color:var(--primary); }

/* Aktuelle Themen — Trend-/Regulatorik-Kacheln (Home) */
@media (min-width:900px){ #aktuelle-themen-grid{ grid-template-columns:repeat(3,1fr); } }
.topic-card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
}
.topic-badge{
  display:inline-flex;
  align-self:flex-start;
  align-items:center;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--primary);
  background:rgba(102,255,255,.08);
  border:1px solid rgba(102,255,255,.28);
  border-radius:999px;
  padding:5px 12px;
}
.topic-card h5{ margin-top:14px; }
/* Datumszeile im Newsroom – Kacheln wie Beitragsseiten. Monospace wie die
   uebrigen Metazeilen der Website, bewusst zurueckhaltend: Das Datum ordnet
   ein, es ist nicht die Botschaft. */
.news-datum{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:12px; letter-spacing:.02em;
  color:rgba(var(--ink-rgb),.5);
  margin:6px 0 12px;
}
@media (min-width:900px){ #newsroom-grid{ grid-template-columns:repeat(3,1fr); } }

/* ---- Terminbuchung (/termin) ---------------------------------------------
   Kalender links, was einen erwartet rechts. Der Kalender ist der Grund, warum
   jemand hier ist, und bekommt die breitere Spalte. Solange er nicht geladen
   ist, steht an seiner Stelle der Platzhalter mit der Einwilligungsfrage. */
/* Der Kalender gehoert zur Einleitung darueber und ist kein eigener Abschnitt –
   deshalb deutlich weniger Abstand als die 180px zwischen zwei Abschnitten. */
#termin-buchen{ padding-top:32px; }
.termin-layout{ display:grid; grid-template-columns:1fr; gap:40px; align-items:start; }
@media (min-width:900px){ .termin-layout{ grid-template-columns:1.55fr 1fr; gap:56px; } }
.termin-platzhalter{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:36px 32px 30px;
  border:1px solid var(--hairline); border-radius:20px;
  background:rgba(var(--ink-rgb),.04);
}
.termin-platzhalter h3{ font-size:1.25rem; margin:18px 0 10px; }
.termin-platzhalter p{ font-size:var(--text-s); line-height:1.6; color:rgba(var(--ink-rgb),.72); }
.termin-platzhalter-aktionen{ display:flex; flex-wrap:wrap; gap:14px; margin:24px 0 16px; }
/* Hoehe grosszuegig: Der HubSpot-Rahmen misst sich selbst nach, ein zu kleiner
   Startwert laesst die Seite beim Laden springen. */
/* HubSpot liefert den Kalender in einer eigenen Seite, die um die zweigeteilte
   Karte herum noch einen weissen Rand legt. In den Rahmen hinein kommen wir
   nicht – er gehoert einer fremden Domain. Also schneiden wir den Rand ab:
   Der Rahmen wird ringsum um --schnitt groesser gemacht und um denselben Wert
   nach aussen geschoben, der Behaelter kappt den Ueberstand. Ergebnis: Die
   cyanfarbene Haelfte liegt bis an die Kante, oben und unten bleibt nichts
   Weisses stehen.
   Aendert HubSpot sein Layout, ist --schnitt die einzige Stellschraube. */
/* Kein Zuschnitt mehr – und das ist die eigentliche Erkenntnis: HubSpots
   Buchungsseite hat selbst einen durchsichtigen Hintergrund und bringt ihre
   eigene abgerundete Karte mit. Der weisse Rahmen, den wir tagelang
   weggeschnitten haben, war unser eigener Behaelter, der weiss hinterlegt war.
   Mit durchsichtigem Hintergrund faellt das Problem ersatzlos weg:
   - keine geratenen Schnittwerte, die je nach Buchungsschritt zu viel oder zu
     wenig kappen,
   - die Karte behaelt ihre eigenen runden Ecken, oben wie unten,
   - im zweiten Schritt kann nichts mehr abgeschnitten werden.
   Die Mindesthoehe bleibt nur, damit die Seite beim Laden nicht springt. */
.meetings-iframe-container{
  min-height:520px;
  background:transparent;
  /* HubSpots Karte ist ein Rechteck ohne eigene Rundung; die runden Ecken kamen
     immer von hier. Unten konnte der Behaelter sie nur zeigen, wenn wir bis zur
     Kartenunterkante schneiden – und dieser Abstand schwankt je nach
     Buchungsschritt, weshalb der Zuschnitt zweimal die Knoepfe gekappt hat.
     Deshalb jetzt andersherum: Der Behaelter ist ein eigener, sichtbarer Rahmen
     mit Rundung an allen vier Ecken. Die Karte sitzt darin, der Rest bleibt
     dunkel – und abgeschnitten wird nie wieder etwas. */
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--hairline);
  padding:0;
}
.meetings-iframe-container iframe{
  display:block; border:0; width:100%;
}
.termin-info h3{ font-size:1.4rem; margin-bottom:20px; }
/* Auf Lese-Groesse: dieselbe Schrift wie der Einleitungstext oben, nicht die
   14px, die .form-check-list sonst mitbringt. */
.termin-info .form-check-list{ gap:14px; }
.termin-info .form-check-list li{ font-size:1.25rem; line-height:1.625; gap:12px; }
.termin-info .form-note{ margin-top:24px; font-size:var(--text-formular); }

/* ---- Newsroom: Beitragsseiten -------------------------------------------
   Der Text gehoert zur Ueberschrift und ist kein eigener Abschnitt – deshalb
   deutlich weniger Abstand als die 180px, die zwischen zwei Abschnitten
   stehen. Und: Die Basisregel gibt Absaetzen keinen Abstand, die uebrigen
   Seiten setzen ihn ueber ihre Bausteine. Hier steht Fliesstext, also braucht
   er ihn selbst. */
#beitrag{ padding-top:16px; }
.beitrag-text{ max-width:64ch; }
.beitrag-text .lede{ margin-bottom:22px; }
.beitrag-text p:not(.lede):not(.news-datum){
  font-size:var(--text-s);
  line-height:1.7;
  color:rgba(var(--ink-rgb),.75);
  margin-bottom:16px;
}
.topic-card .topic-teaser{
  font-size:var(--text-s);
  color:rgba(var(--ink-rgb),.72);
  line-height:1.55;
  margin-bottom:24px;
}
.topic-card .topic-cta{
  align-self:flex-start;
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:var(--text-s);
  font-weight:600;
  padding:12px 22px;
  border-radius:9999px;
  background:var(--accent-warm);
  color:var(--bg);
  border:1px solid var(--accent-warm);
  transition:transform .25s ease, gap .3s ease;
}
.topic-card:hover .topic-cta{ transform:translateY(-2px); gap:11px; }

/* Qualle-Animation: Hintergrund der Sektion „Was Unternehmen jetzt bewegt".
   Die Qualle sitzt rechts, ihre binären Partikel (0/1) strömen nach links.
   Container liegt über dem Feld, damit Headline und Kacheln lesbar bleiben. */
#aktuelle-themen .container{ position:relative; z-index:1; }
/* Zusätzlicher Platz unten, damit die tief platzierte Qualle vollständig
   sichtbar ist und nicht vom overflow:hidden der Section abgeschnitten wird. */
#aktuelle-themen{ padding-bottom:320px; }
@media (min-width:768px){ #aktuelle-themen{ padding-bottom:420px; } }
@media (min-width:1024px){ #aktuelle-themen{ padding-bottom:480px; } }
.qualle-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, transparent 24%, black 46%, black 78%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, transparent 24%, black 46%, black 78%, transparent 100%);
}
.qualle-bg organic-particle-field{
  display:block;
  position:absolute;
  right:-8%;
  top:53%;
  width:116%;
  aspect-ratio:1584/672;
  opacity:.5;
}
@media (max-width:900px){
  .qualle-bg organic-particle-field{ right:-20%; width:150%; opacity:.4; }
}
/* Desktop (13-Zoll+): Qualle tiefer, direkt unter den Fristenticker – Sichtfenster
   der Maske in die untere Section-Haelfte verschoben + Feld nach unten. */
@media (min-width:901px){
  .qualle-bg{
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, transparent 42%, #000 60%, #000 90%, transparent 100%);
            mask-image:linear-gradient(180deg, transparent 0%, transparent 42%, #000 60%, #000 90%, transparent 100%);
  }
  .qualle-bg organic-particle-field{ top:70%; }
}
/* Mobil: Qualle als Trenner OBEN, ueber der Eyebrow – gross, leerer linker
   Bildteil faellt off-screen weg. Nur < 768px; Desktop unveraendert. */
@media (max-width:768px){
  #aktuelle-themen{ padding-top:300px; padding-bottom:64px; }
  .qualle-bg{
    inset:0 0 auto 0;
    height:300px;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
    mask-image:linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  }
  .qualle-bg organic-particle-field{
    top:0; bottom:auto; left:auto; right:-25%;
    width:200%; opacity:.9;
  }
}

/* ==========================================================================
   Expertise — borderless feature grid
   ========================================================================== */
#expertise .container{ position:relative; z-index:1; }
#expertise .lede{ font-size:var(--text-s); }
.octopus-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  /* Unten weich auslaufend wie bei der Qualle: Die Grafikhoehe haengt an der
     Fensterbreite, die Sektionshoehe am Text – ab rund 2800 px Fensterbreite
     ragt der Oktopus unter die Sektion und brach dort vorher hart ab. */
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, transparent 30%, black 46%, black 84%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, transparent 30%, black 46%, black 84%, transparent 100%);
}
.octopus-bg organic-particle-field{
  display:block;
  position:absolute;
  left:0;
  top:32%;
  width:100%;
  aspect-ratio:1584/672;
  opacity:.45;
}
@media (max-width:900px){
  .octopus-bg{ opacity:.5; }
}
/* Mobil: Oktopus als Trenner OBEN, ueber der Eyebrow – gross, mittig
   (Oktopus ist zentriert im Bild). Nur < 768px; Desktop unveraendert. */
@media (max-width:768px){
  #expertise{ padding-top:300px; }
  .octopus-bg{
    inset:0 0 auto 0;
    height:300px;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
    mask-image:linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  }
  .octopus-bg organic-particle-field{
    top:0; bottom:auto; left:50%; right:auto; transform:translateX(-50%);
    width:170%; opacity:1;
  }
}
.expertise-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border-top:1px solid var(--hairline);
}
@media (min-width:700px){ .expertise-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .expertise-grid{ grid-template-columns:repeat(4,1fr); } }
.expertise-item{
  position:relative;
  padding:0;
  border-bottom:1px solid var(--hairline);
  border-right:1px solid var(--hairline);
  transition:background-color .35s ease;
}
.expertise-item:hover{ background:rgba(var(--ink-rgb),.06); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.expertise-item:last-child{ border-right:none; }
.expertise-item details[open]{ background:rgba(var(--ink-rgb),.05); }
.expertise-item summary{
  list-style:none;
  cursor:pointer;
  padding:32px 24px;
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:2px 12px;
  -webkit-tap-highlight-color:transparent;
}
.expertise-item summary::-webkit-details-marker{ display:none; }
.expertise-item summary::marker{ content:""; }
.expertise-item .label{
  font-weight:600;
  font-size:1.2rem;
  line-height:1.15;
  width:100%;
  margin-bottom:6px;
}
.expertise-item .chevron{
  width:16px;height:16px;
  margin-left:auto;
  color:rgba(var(--ink-rgb),.5);
  flex-shrink:0;
  transition:transform .3s ease, color .3s ease;
}
.expertise-item details[open] .chevron{ transform:rotate(180deg); color:var(--primary); }
.expertise-item ul{
  list-style:none;
  padding:0 24px 28px;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.expertise-item ul li{
  font-size:var(--text-s);
  color:rgba(var(--ink-rgb),.78);
  display:flex;
  align-items:baseline;
  gap:8px;
}
.expertise-item ul li::before{
  content:"✓";
  color:var(--primary);
  font-weight:600;
}
.expertise-item .desc{ font-size:var(--text-s); color:rgba(var(--ink-rgb),.55); }

/* ==========================================================================
   FAQ — Nummerierte Glow-Cards
   ========================================================================== */
.faq-list{
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:860px;
  margin:0 auto;
  position:relative;
  z-index:1;
}
.faq-item{
  position:relative;
  overflow:hidden;
  border-radius:15px;
  border:1px solid var(--hairline);
  background:rgba(var(--ink-rgb),.04);
  transition:border-color .35s ease, background-color .35s ease, transform .35s ease;
}
.faq-item:hover{ border-color:rgba(102,255,255,.4); background:rgba(var(--ink-rgb),.06); }
.faq-item[open]{ border-color:var(--primary); background:rgba(var(--ink-rgb),.06); }
.faq-item summary{
  position:relative;
  z-index:1;
  list-style:none;
  cursor:pointer;
  padding:18px 22px;
  display:flex;
  align-items:center;
  gap:18px;
  -webkit-tap-highlight-color:transparent;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::marker{ content:""; }
.faq-icon{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;height:46px;
  border-radius:50%;
  border:1px solid var(--hairline-strong);
  background:var(--bg);
  color:var(--primary);
  transition:border-color .35s ease, box-shadow .35s ease;
}
.faq-icon svg{ width:24px;height:24px; }
.faq-item[open] .faq-icon{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(102,255,255,.12), 0 0 14px rgba(102,255,255,.35);
}
.faq-item summary .q{
  flex:1;
  font-weight:600;
  font-size:var(--text-s);
  line-height:1.4;
  color:rgba(var(--ink-rgb),.92);
  transition:color .3s ease;
}
.faq-item summary:hover .q{ color:var(--primary); }
.faq-item .chevron{
  width:14px;height:14px;
  flex-shrink:0;
  color:rgba(var(--ink-rgb),.45);
  transition:transform .3s ease, color .3s ease;
}
.faq-item[open] .chevron{ transform:rotate(180deg); color:var(--primary); }
.faq-item .a{
  position:relative;
  z-index:1;
  margin:-4px 22px 22px 86px;
  max-width:620px;
  font-size:var(--text-s);
  line-height:1.65;
  color:rgba(var(--ink-rgb),.65);
}

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  align-items:start;
  position:relative;
  z-index:1;
}
@media (min-width:900px){ .pricing-grid{ grid-template-columns:repeat(3,1fr); } }

.price-card{
  position:relative;
  overflow:visible;
  border-radius:15px;
  border:1px solid var(--hairline);
  background:rgba(var(--ink-rgb),.04);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  padding:44px 36px;
  display:flex;flex-direction:column;
  height:100%;
  transition:border-color .35s ease;
}
.price-card::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--ink-rgb),.5), transparent);
}
.price-card::after{
  /* Schein nach außen — wie die Glow-Fläche der Capabilities-Boxen der Vorlage */
  content:"";
  position:absolute;
  left:50%; bottom:-70px;
  width:280px; height:280px;
  transform:translateX(-50%);
  background:var(--primary);
  border-radius:9999px;
  filter:blur(90px);
  opacity:.10;
  pointer-events:none;
  z-index:-1;
}
.price-card:hover{ border-color:var(--secondary); }
.price-card.featured{
  border-color:var(--primary);
  background:linear-gradient(180deg, rgba(102,255,255,.1), rgba(var(--ink-rgb),.04) 45%);
  position:relative;
}
.price-card.featured::after{
  width:360px; height:360px;
  opacity:.18;
  filter:blur(100px);
}
@media (min-width:900px){ .price-card.featured{ transform:translateY(-16px); } }
.price-badge{
  position:absolute;top:-14px;left:30px;
  background:var(--accent-warm);
  color:var(--neutral-gray);
  font-size:12px;font-weight:600;
  padding:6px 16px;
  border-radius:9999px;
}
.price-card h3{ font-size:1.6rem; line-height:1.15; margin-bottom:6px; }
.price-card .tagline{ font-size:var(--text-s); color:rgba(var(--ink-rgb),.55); margin-bottom:24px; }
.price-value{ display:flex; align-items:baseline; gap:8px; margin-bottom:28px; }
.price-value .amount{ font-weight:600; font-size:2.4rem; line-height:1; }
.price-value .period{ font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace; font-size:var(--text-s); color:rgba(var(--ink-rgb),.5); }
.price-card ul{ display:flex;flex-direction:column;gap:12px; margin-bottom:30px; flex:1; }
.price-card li{ font-size:var(--text-s); display:flex; gap:8px; }
.price-card li::before{ content:"✓"; color:var(--primary); font-weight:600; }
.price-card .btn{ width:100%; }
/* Zwei Knoepfe untereinander am Kartenfuss (CRA-Toolkit: gesperrter Download
   plus Ausweichangebot). Der Abstand kommt aus dem gap, nicht aus Margins. */
.price-card-actions{ display:flex; flex-direction:column; gap:12px; }

/* ---- ISMS-Pakete ----------------------------------------------
   Die vier Wege als Leiter. Die Reihenfolge traegt die Aussage: Sie beginnt
   beim kostenlosen Toolkit und endet bei "wir uebernehmen" – unterschieden
   wird allein danach, wer die Anpassung macht. Das kostenlose Angebot steht
   bewusst als vollwertige erste Zeile drin. */
.wege{ display:grid; gap:2px; max-width:940px; margin:36px auto 0; list-style:none; padding:0; }
.wege li{
  display:grid; grid-template-columns:172px 1fr auto; gap:24px; align-items:baseline;
  padding:20px 26px;
  background:rgba(var(--ink-rgb),.04);
  border-left:2px solid var(--hairline-strong);
}
.wege li:first-child{ border-radius:12px 12px 0 0; }
.wege li:last-child{ border-radius:0 0 12px 12px; }
/* Die drei Pakete heben sich von der Gratis-Zeile ab – ohne sie abzuwerten. */
.wege li.ist-paket{ border-left-color:var(--primary); }
.wege .weg-name{ font-weight:600; font-size:var(--text-m); }
.wege .weg-wer{ font-size:var(--text-s); color:rgba(var(--ink-rgb),.72); }
.wege .weg-pt{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:var(--text-s); color:var(--neutral-light); white-space:nowrap;
}
@media (max-width:700px){
  /* Name und Beratertage in die erste Zeile, die Beschreibung darunter ueber
     die volle Breite. Ohne die ausdrueckliche Platzierung schiebt die
     automatische Verteilung die Beratertage in eine dritte Zeile. */
  .wege li{ grid-template-columns:1fr auto; gap:6px 16px; padding:18px 20px; }
  .wege .weg-name{ grid-column:1; grid-row:1; }
  .wege .weg-pt{ grid-column:2; grid-row:1; }
  .wege .weg-wer{ grid-column:1/-1; grid-row:2; }
}

/* Vergleichstabelle. Erste Spalte ist das kostenlose Toolkit: Die Zeile
   "Sie erhalten" steht dadurch viermal gleich da – genau das ist die Aussage,
   deshalb ist sie farblich als durchgehendes Band ausgezeichnet. */
.vergleich{
  overflow-x:auto; border:1px solid var(--hairline);
  border-radius:15px; margin-top:36px;
  background:rgba(var(--ink-rgb),.02);
}
.vergleich table{ border-collapse:separate; border-spacing:0; width:100%; min-width:820px; }
.vergleich th,
.vergleich td{
  text-align:left; padding:16px 18px; vertical-align:top;
  font-size:var(--text-s); line-height:1.5;
  border-bottom:1px solid var(--hairline);
}

/* Spaltenkopf: Name gross, Umfang als Zahl darunter. */
.vergleich thead th{
  vertical-align:bottom; padding:22px 18px 18px;
  background:rgba(var(--ink-rgb),.05);
  border-bottom:1px solid var(--hairline-strong);
}
.vergleich .kopf-name{
  display:block; font-size:var(--text-m); font-weight:600; color:var(--ink);
  letter-spacing:-.01em; white-space:nowrap;
}
.vergleich .kopf-umfang{
  display:block; margin-top:6px;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:var(--text-s); color:var(--neutral-light); white-space:nowrap;
}
/* Die drei Pakete heben sich als Gruppe vom kostenlosen Toolkit ab. */
.vergleich .ist-paket{ background:rgba(102,255,255,.035); }
.vergleich thead th.ist-paket{ background:rgba(102,255,255,.07); }
.vergleich thead th.ist-paket .kopf-umfang{ color:var(--primary); }

/* Zeilenkopf links – bleibt beim seitlichen Scrollen stehen, sonst weiss man
   auf schmalen Schirmen nach zwei Spalten nicht mehr, welche Zeile man liest. */
.vergleich tbody th{
  font-weight:600; white-space:nowrap; color:var(--ink);
  position:sticky; left:0; z-index:1;
  background:var(--bg);
  border-right:1px solid var(--hairline);
}
.vergleich thead th:first-child{
  position:sticky; left:0; z-index:2;
  background:rgba(var(--ink-rgb),.05);
  border-right:1px solid var(--hairline);
}

/* Die Identitaetszeile: viermal derselbe Inhalt – als durchgehendes Band. */
.vergleich tbody tr.gleich td{
  background:rgba(102,255,255,.06);
  color:var(--ink);
  font-weight:500;
}
.vergleich tbody tr.gleich th{ color:var(--primary); }

.vergleich tbody tr:hover td{ background:rgba(var(--ink-rgb),.05); }
.vergleich tbody tr.gleich:hover td{ background:rgba(102,255,255,.09); }
.vergleich tbody tr:last-child > *{ border-bottom:none; }

/* Beratertage: gross und tabellarisch, damit die Staffelung sofort sichtbar ist */
.vergleich .zahl{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-variant-numeric:tabular-nums;
  font-size:1.5rem; font-weight:600; color:var(--ink);
}
.vergleich td.zahl.ist-paket{ color:var(--primary); }

/* Die 19 Module als Chips – der Beleg, dass die Zahl keine Marketingangabe ist */
.modul-liste{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  list-style:none; padding:0; margin:36px auto 0; max-width:960px;
}
.modul-liste li{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:var(--text-s); padding:8px 16px; border-radius:9999px;
  border:1px solid var(--hairline); background:rgba(var(--ink-rgb),.03);
  color:rgba(var(--ink-rgb),.78);
  /* Jeder Chip zieht seine eigene kleine Bahn. Die Dauern sind teilerfremd
     gewaehlt, damit sich das Feld nie synchron bewegt und kein Muster
     entsteht – es soll schweben, nicht pulsieren. */
  animation:modul-schweben 13s ease-in-out infinite;
  transition:border-color .3s ease, color .3s ease, background-color .3s ease;
  will-change:transform;
}
.modul-liste li:nth-child(2n){ animation-duration:17s; animation-delay:-3s; }
.modul-liste li:nth-child(3n){ animation-duration:11s; animation-delay:-6s; }
.modul-liste li:nth-child(5n){ animation-duration:19s; animation-delay:-9s; }
.modul-liste li:nth-child(7n){ animation-duration:15s; animation-delay:-1.5s; }
.modul-liste li:nth-child(4n){ animation-direction:reverse; }
.modul-liste li:hover{
  border-color:rgba(102,255,255,.45);
  background:rgba(102,255,255,.06);
  color:var(--ink);
  animation-play-state:paused;
}
@keyframes modul-schweben{
  0%   { transform:translate(0,0); }
  25%  { transform:translate(4px,-5px); }
  50%  { transform:translate(0,-8px); }
  75%  { transform:translate(-4px,-4px); }
  100% { transform:translate(0,0); }
}
@media (prefers-reduced-motion: reduce){
  .modul-liste li{ animation:none; }
}

/* Abgrenzung am Fuss einer Paketkarte: was NICHT enthalten ist. */
.paket-grenze{
  padding-top:18px; margin-bottom:22px;
  border-top:1px solid var(--hairline);
  font-size:var(--text-s); line-height:1.55;
  color:rgba(var(--ink-rgb),.6);
}

/* Hervorhebung fuer ein einzelnes Element, das aus der Aufzaehlung herausragt
   (die Table-Top-Uebung bei Basec Pro). */
.extra-hinweis{
  max-width:760px; margin:36px auto 0;
  border-left:2px solid var(--accent-warm);
  background:rgba(201,160,99,.08);
  border-radius:0 15px 15px 0;
  padding:24px 28px;
}
.extra-hinweis .extra-label{
  display:block; margin-bottom:8px;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:var(--text-s); letter-spacing:.02em; color:var(--accent-warm);
}
.extra-hinweis p{ margin:0; font-size:var(--text-s); line-height:1.65; color:rgba(var(--ink-rgb),.8); }

/* Zweispaltiger Toolkit-/Paketvergleich (z. B. Lite/Standard) — nutzt
   .price-card, aber ohne die 3-Spalten-Annahme von .pricing-grid */
.toolkit-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  max-width:920px;
  margin:0 auto;
  position:relative;
  z-index:1;
}
@media (min-width:760px){ .toolkit-grid{ grid-template-columns:repeat(2,1fr); } }

/* ==========================================================================
   Testimonial — offenes, editoriales Layout ohne Card (Cards bleiben den
   Service-/Preiskarten vorbehalten)
   ========================================================================== */
.testimonial{
  background:var(--bg);
  color:var(--ink);
}
.testimonial .container{
  max-width:760px;
  text-align:center;
}
.testimonial .quote-mark{
  font-size:11rem;
  font-weight:600;
  line-height:1;
  margin-bottom:8px;
  color:var(--primary);
}
@supports (-webkit-text-stroke: 1px black){
  .testimonial .quote-mark{
    color:transparent;
    -webkit-text-stroke:2px var(--primary);
  }
}
/* Zitatgeber mit Bild: Ein Gesicht macht aus einem Zitat eine Aussage von
   jemandem. Das Foto uebernimmt die Graustufen-Behandlung der Teamseite und
   wird beim Ueberfahren farbig – dieselbe Geste wie dort. */
.zitat-person{
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
/* Doppelter Klassenselektor mit Absicht: .team-photo steht weiter unten im
   Stylesheet und wuerde Groesse und Ausschnitt sonst ueberschreiben. */
.zitat-person .zitat-foto{
  width:76px; height:76px; border-radius:50%;
  border:1px solid var(--hairline);
  /* Die Teamfotos zeigen die Person bis zur Huefte. In einem kleinen runden
     Bild wuerde der Kopf darin untergehen – deshalb naeher herangezogen. */
  background-size:215%;
  background-position:center 16%;
  transition:filter .45s ease, border-color .35s ease;
}
.zitat-person:hover .zitat-foto{ filter:grayscale(0) contrast(1); border-color:var(--primary); }

.testimonial blockquote{
  font-weight:600;
  font-size:clamp(1.3rem,2.6vw,1.9rem);
  color:var(--ink);
  line-height:1.35;
  margin-bottom:28px;
  text-wrap:balance;
}
/* Zwei Stimmen nebeneinander (Karriereseite). Untereinander wuerde der
   Abschnitt bei dieser Schriftgroesse ueber zwei Bildschirmhoehen laufen und
   die zweite Stimme faende kaum jemand. Das grosse Anfuehrungszeichen steht
   weiterhin nur einmal darueber – es gehoert zum Abschnitt, nicht zum Zitat. */
.testimonial--duo .container{ max-width:1060px; }
.testimonial--duo .zitat-raster{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:56px;
  align-items:start;
}
/* Kleiner als bei einem Einzelzitat: zwei grosse Bloecke nebeneinander
   erschlagen sich sonst gegenseitig. */
.testimonial--duo blockquote{
  font-size:clamp(1.02rem, 1.5vw, 1.24rem);
  line-height:1.5;
  margin-bottom:22px;
  text-wrap:pretty;
}
@media (max-width:820px){
  .testimonial--duo .zitat-raster{ grid-template-columns:1fr; gap:48px; }
  .testimonial--duo .zitat-block + .zitat-block{
    padding-top:44px;
    border-top:1px solid var(--hairline);
  }
}

.testimonial cite{
  position:relative;
  z-index:1;
  font-style:normal;
  font-size:var(--text-s);
  color:rgba(var(--ink-rgb),.55);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.testimonial cite strong{ color:var(--ink); }
.testimonial cite .sep{
  width:4px;height:4px;
  border-radius:50%;
  background:rgba(var(--ink-rgb),.35);
}

/* Mission (Über uns): zweispaltig – links Überschrift + Text, rechts das
   Einstein-Zitat. Ab 860px nebeneinander, darunter gestapelt (das Zitat
   rutscht unter den Textblock). */
.mission-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:clamp(32px,5vw,72px);
  align-items:center;
}
.mission-intro .section-head{ margin-bottom:28px; }
.mission-intro .lede{ max-width:none; }
.mission-quote{
  margin:0;
  margin-left:clamp(24px,4vw,64px);
  padding-left:clamp(20px,2.5vw,36px);
  border-left:2px solid rgba(102,255,255,.4);
}
.mission-quote .quote-mark{
  font-size:6rem;
  font-weight:600;
  line-height:.8;
  margin-bottom:8px;
  color:var(--primary);
}
@supports (-webkit-text-stroke: 1px black){
  .mission-quote .quote-mark{ color:transparent; -webkit-text-stroke:2px var(--primary); }
}
.mission-quote blockquote{
  margin:0 0 20px;
  font-weight:600;
  font-size:clamp(1.2rem,1.8vw,1.55rem);
  line-height:1.4;
  color:var(--ink);
  text-wrap:balance;
}
.mission-quote figcaption cite{
  font-style:normal;
  font-size:var(--text-s);
  color:rgba(var(--ink-rgb),.55);
}
.mission-quote figcaption cite strong{ color:var(--ink); }
@media (max-width:860px){
  .mission-grid{ grid-template-columns:1fr; gap:36px; }
  .mission-quote{ margin-left:0; }
}

/* „Was basec ausmacht": übergroße Prinzip-Ziffern (1–4) über der Headline,
   cyanfarbene Kontur, nicht gefüllt. Größe an der H1 orientiert. Nur in #werte,
   damit die auf 34 Seiten geteilte .svc-card unberührt bleibt. */
#werte .card-number{
  display:block;
  font-size:clamp(3.25rem,5vw,5.25rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.01em;
  margin-bottom:4px;
  color:var(--primary); /* Fallback: gefüllt, falls kein text-stroke */
}
@supports (-webkit-text-stroke: 1px black){
  #werte .card-number{ color:transparent; -webkit-text-stroke:1.5px var(--primary); }
}

/* „Lernen Sie uns kennen": zwei Foto-Kacheln (Team-Avatare, Villa-Foto) + Cyan-
   Kontakt-Panel (öffnet das Kontaktmodal). Ersetzt die generischen Karten. */
.meet-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin-bottom:28px;
}
.meet-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:300px;
  padding:32px;
  border-radius:15px;
  border:1px solid var(--hairline);
  background:rgba(var(--ink-rgb),.04);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  overflow:hidden;
  text-decoration:none;
  color:var(--ink);
  transition:border-color .35s ease, transform .35s ease;
}
/* feine Lichtkante oben – wie bei .svc-card ("Was basec ausmacht") */
.meet-tile::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
  background:linear-gradient(90deg, transparent, rgba(var(--ink-rgb),.5), transparent);
}
.meet-tile:hover{ border-color:var(--primary); transform:translateY(-4px); }
.meet-tile-body{ margin-top:auto; position:relative; z-index:2; }
.meet-tile-body h3{ font-size:1.5rem; line-height:1.15; margin-bottom:10px; }
.meet-tile-body p{ color:rgba(var(--ink-rgb),.6); font-size:var(--text-s); max-width:44ch; margin-bottom:18px; }
.meet-link{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--primary); font-weight:600; font-size:var(--text-s);
}
.meet-link svg{ width:18px; height:18px; transition:transform .3s ease; }
.meet-tile:hover .meet-link svg{ transform:translateX(5px); }

/* Team-Kachel: überlappende runde Avatare */
.meet-avatars{ display:flex; align-items:center; margin-bottom:6px; }
.meet-avatars img,
.meet-avatars-more{
  width:58px; height:58px; border-radius:50%;
  border:2px solid var(--bg);
  margin-left:-16px;
  flex-shrink:0;
}
.meet-avatars img{ object-fit:cover; }
.meet-avatars img:first-child{ margin-left:0; }
.meet-avatars-more{
  display:flex; align-items:center; justify-content:center;
  background:rgba(var(--ink-rgb),.12);
  font-size:var(--text-s); font-weight:600; color:var(--ink);
}

/* Standort-Kachel: Villa-Foto als Hintergrund, nach unten abgedunkelt */
.meet-tile--standort .meet-tile-media{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  transition:transform .55s ease;
}
.meet-tile--standort:hover .meet-tile-media{ transform:scale(1.05); }
.meet-tile--standort::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(0,1,1,.94) 14%, rgba(0,1,1,.55) 52%, rgba(0,1,1,.2) 100%);
}

/* Kontakt-Panel in Cyan-Akzent */
.meet-contact{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  flex-wrap:wrap;
  padding:34px 40px;
  border-radius:15px;
  border:1px solid var(--hairline);
  background:rgba(var(--ink-rgb),.04);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  overflow:hidden;
}
.meet-contact::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
  background:linear-gradient(90deg, transparent, rgba(var(--ink-rgb),.5), transparent);
}
.meet-contact-text{ position:relative; z-index:2; }
.meet-contact .btn{ position:relative; z-index:2; }
.meet-contact h3{ font-size:1.5rem; line-height:1.15; margin-bottom:6px; }
.meet-contact p{ color:rgba(var(--ink-rgb),.72); font-size:var(--text-s); max-width:62ch; }
.meet-contact .btn{ flex-shrink:0; }

@media (max-width:800px){
  .meet-grid{ grid-template-columns:1fr; }
  .meet-contact{ padding:28px; }
}

/* ==========================================================================
   Unterseiten-Komponenten (NIS2 & vergleichbare Produktseiten)
   ========================================================================== */

/* ---- Generische Layout-Hilfsklassen --------------------------------------- */
.split-2col{
  display:grid;
  grid-template-columns:1fr;
  gap:56px;
  position:relative;
  z-index:1;
}
@media (min-width:960px){ .split-2col{ grid-template-columns:1fr 1fr; align-items:start; gap:80px; } }

/* ---- Buch-Mockup: 3D-Cover mit sichtbaren Seiten ------------------------- */
.book-mockup{
  perspective:1600px;
  max-width:300px;
  margin:0 auto;
}
.book-mockup-cover{
  position:relative;
  transform:rotateY(-13deg);
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
  border-radius:1px 3px 3px 1px;
}
.book-mockup:hover .book-mockup-cover{ transform:rotateY(-8deg); }
.book-mockup-cover img{
  display:block;
  width:100%;
  border-radius:1px 3px 3px 1px;
  position:relative;
  z-index:2;
  box-shadow:26px 36px 64px -24px rgba(0,0,0,.65);
  filter:brightness(1.14) contrast(1.08) saturate(1.05);
}
/* Buchschnitt: sichtbare Papierseiten an der rechten Kante */
.book-mockup-cover::before{
  content:"";
  position:absolute;
  top:1.5%;
  right:-15px;
  bottom:1.5%;
  width:15px;
  background:
    repeating-linear-gradient(to bottom,
      #f1e9d4 0px, #f1e9d4 1px,
      #ddd0ac 1px, #ddd0ac 2px),
    linear-gradient(to bottom, #c9bc98 0%, #f4edd8 14%, #f4edd8 86%, #c9bc98 100%);
  background-blend-mode:multiply;
  transform:rotateY(90deg);
  transform-origin:left center;
  border-radius:0 2px 2px 0;
  box-shadow:inset 0 0 8px rgba(0,0,0,.3);
  z-index:1;
}
/* Buchrücken: deutlicherer Falz zwischen Deckel und Rücken */
.book-mockup-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(118deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(to right,
      rgba(0,0,0,.34) 0%,
      rgba(0,0,0,.16) 2.5%,
      rgba(255,255,255,.12) 3.5%,
      rgba(0,0,0,.06) 5%,
      rgba(0,0,0,0) 10%);
  border-radius:1px 3px 3px 1px;
  z-index:3;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .book-mockup-cover{ transition:none; }
}

/* ---- Page-Intro: kompakter Seitenkopf ohne Hero-Bühne --------------------- */
.page-intro{
  padding-top:140px;
  padding-bottom:8px;
}
.page-intro h1{
  font-size:clamp(2rem,4vw,3.25rem);
  font-weight:600;
  margin:0 0 20px;
}
.page-intro .lede{ max-width:640px; margin:0; }

/* ---- Buch-Karten: Produktkarte je Buch (Bücher-Seite) --------------------- */
.book-list{ display:flex; flex-direction:column; gap:32px; }
.book-card{
  position:relative;
  border-radius:20px;
  border:1px solid var(--hairline);
  background:rgba(var(--ink-rgb),.04);
  padding:48px;
  transition:border-color .35s ease, background-color .35s ease;
}
.book-card:hover{ border-color:var(--hairline-strong); background:rgba(var(--ink-rgb),.06); }
/* ---- Case-Study-/White-Paper-Übersicht: 2-spaltiges Karten-Raster ----------
   Kompakte Karte (Cover oben, Text darunter). Die Bücher-Übersicht behält
   bewusst das breite .book-card/.book-list-Layout. */
.cs-grid{ display:grid; grid-template-columns:1fr; gap:28px; }
@media (min-width:760px){ .cs-grid{ grid-template-columns:repeat(2,1fr); } }
.cs-card{
  display:flex; flex-direction:column;
  border-radius:20px; border:1px solid var(--hairline);
  background:rgba(var(--ink-rgb),.04);
  padding:34px 32px 32px;
  transition:border-color .35s ease, background-color .35s ease, transform .35s ease;
}
.cs-card:hover{ transform:translateY(-3px); }
.cs-card .book-mockup{ max-width:184px; margin:2px auto 26px; }
.cs-card h3{ font-size:clamp(1.35rem,2vw,1.6rem); line-height:1.14; margin:0 0 8px; }
.cs-card .book-subtitle{ margin-bottom:6px; }
.cs-card .book-author{ margin-bottom:14px; }
.cs-card .lede{ font-size:var(--text-s); color:rgba(var(--ink-rgb),.76); margin-bottom:26px; }
.cs-actions{ margin-top:auto; }
.cs-card .form-note{ margin-top:14px; }

/* Farbflächen gescopt – Case Studies = Deep Sea, White Paper = heller neutral */
#case-studies-liste .cs-card{ background:#0a1e2d; border-color:rgba(163,235,240,.16); }
#case-studies-liste .cs-card:hover{ background:#0d2637; border-color:rgba(163,235,240,.4); }
#whitepaper-liste .cs-card{ background:#15181b; border-color:rgba(var(--ink-rgb),.14); }
#whitepaper-liste .cs-card:hover{ background:#1b1f23; border-color:rgba(var(--ink-rgb),.24); }
.book-card .book-mockup{ max-width:240px; }
.book-card h3{ font-size:clamp(1.6rem,2.6vw,2.1rem); margin-bottom:6px; }
.book-card .book-subtitle{ font-size:var(--text-s); color:rgba(var(--ink-rgb),.7); margin-bottom:14px; }
.book-card .book-author{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:var(--text-s);
  letter-spacing:.02em;
  color:var(--accent-light);
  margin-bottom:22px;
}

/* ---- BaseCollege-Uebersicht (/basecollege) -------------------------------
   Die Schulungskarten nutzen .cs-card wie Case Studies und White Paper, nur
   ohne Cover-Abbildung. Eigene Farbfassung, damit die drei Uebersichtsseiten
   auseinanderzuhalten sind: hier ein warmes Anthrazit. */
#basecollege-liste .cs-card{ background:#131a1c; border-color:rgba(var(--ink-rgb),.14); }
#basecollege-liste .cs-card:hover{ background:#182124; border-color:rgba(163,235,240,.32); }
#basecollege-liste .cs-card .eyebrow{ margin-bottom:14px; }
#basecollege-liste .cs-card .book-author{ margin-bottom:16px; }

/* Ansprechpartner: zwei Personenkarten nebeneinander. Das Foto ist rund und
   kleiner als auf der Teamseite – es begleitet den Text, statt ihn anzufuehren.

   Das Muster ist bewusst zweigeteilt und auf andere Themenseiten uebertragbar:
   links die fachliche Verantwortung (--fach, ohne eigene Kontaktdaten, damit
   Anfragen nicht am Vertrieb vorbeilaufen), rechts der tatsaechliche Kontaktweg
   (--kontakt, hervorgehoben, mit Mail und Telefon). */
.kontakt-duo{
  display:grid; grid-template-columns:1fr; gap:28px;
  max-width:900px; margin:0 auto;
  align-items:stretch;
}
@media (min-width:760px){ .kontakt-duo{ grid-template-columns:repeat(2,1fr); } }
.kontakt-person{
  position:relative;
  display:flex; flex-direction:column; align-items:flex-start;
  padding:30px 30px 26px;
  border:1px solid var(--hairline); border-radius:20px;
  background:rgba(var(--ink-rgb),.04);
  transition:border-color .35s ease;
}
.kontakt-person:hover{ border-color:rgba(163,235,240,.32); }
.kontakt-foto{
  width:92px; height:92px; border-radius:50%;
  border:1px solid var(--hairline); margin-bottom:20px;
}
.kontakt-person:hover .kontakt-foto{ filter:grayscale(0) contrast(1); }
.kontakt-person .name{ font-size:1.2rem; font-weight:600; }
.kontakt-person .role{ font-size:var(--text-s); color:var(--primary); margin-top:5px; letter-spacing:.02em; }
.kontakt-person p{
  font-size:var(--text-s); line-height:1.65;
  color:rgba(var(--ink-rgb),.72);
  margin:16px 0 18px;
}
.kontakt-person a{ font-size:var(--text-s); color:var(--primary); }
.kontakt-person a + a{ margin-top:6px; }
/* Kontaktzeilen sitzen am Kartenfuss, damit beide Karten unten abschliessen. */
.kontakt-person a:first-of-type,
.kontakt-weiterleitung{ margin-top:auto; }

/* Fachliche Verantwortung: ruhiger gehalten, kein Link, dafuer der Hinweis,
   ueber wen die Anfrage laeuft. */
.kontakt-person--fach{ background:rgba(var(--ink-rgb),.025); }
.kontakt-weiterleitung{
  display:flex; align-items:baseline; gap:9px;
  font-size:var(--text-s); line-height:1.5;
  color:rgba(var(--ink-rgb),.55);
}
.kontakt-weiterleitung::before{
  content:"→";
  color:var(--primary);
  opacity:.7;
}

/* Der Kontaktweg: leicht hervorgehoben, damit klar ist, wo die Anfrage hingeht. */
.kontakt-person--kontakt{
  border-color:rgba(163,235,240,.28);
  background:rgba(163,235,240,.05);
}
.kontakt-person--kontakt:hover{ border-color:rgba(163,235,240,.5); }
.kontakt-marker{
  position:absolute; top:26px; right:26px;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--primary); opacity:.85;
}

/* ---- BaseCollege: Facts-Karte im Hero ------------------------------------ */
.quickfacts-card{
  position:relative;
  border-radius:15px;
  border:1px solid var(--hairline);
  background:rgba(var(--ink-rgb),.05);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  padding:32px;
  transition:border-color .35s ease, transform .35s ease, background-color .35s ease;
}
.quickfacts-card:hover{ border-color:var(--primary); transform:translateY(-4px); background:rgba(var(--ink-rgb),.07); }
.quickfacts-label{
  display:block;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:var(--text-s);
  color:var(--primary);
  margin-bottom:10px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.quickfacts-card h3{ font-size:1.3rem; line-height:1.3; margin-bottom:24px; }
.quickfacts-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px 16px;
  margin-bottom:28px;
  padding-top:24px;
  border-top:1px solid var(--hairline);
}
.quickfacts-item{ display:flex; align-items:flex-start; gap:10px; }
.quickfacts-item svg{ width:20px;height:20px; flex-shrink:0; color:var(--primary); margin-top:1px; }
.quickfacts-item span{ font-size:var(--text-s); color:rgba(var(--ink-rgb),.85); line-height:1.4; }
.quickfacts-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:600;
  color:var(--primary);
  font-size:var(--text-s);
}
.quickfacts-link svg{ width:14px;height:14px; transition:transform .25s ease; }
.quickfacts-link:hover svg{ transform:translateX(3px); }

/* ---- BaseCollege: Kurs-Kacheln (weitere Schulungen) ----------------------- */
.kurs-kachel{
  display:block;
  border-radius:12px;
  border:1px solid var(--hairline);
  background:rgba(var(--ink-rgb),.04);
  padding:20px 22px;
  transition:border-color .3s ease, background-color .3s ease, transform .3s ease;
}
.kurs-kachel:hover{ border-color:var(--primary); background:rgba(var(--ink-rgb),.07); transform:translateY(-2px); }
.kurs-kachel:hover .kachel-icon{ transform:translateY(-2px); }
.kurs-kachel .kachel-icon{
  width:28px;
  height:28px;
  color:var(--primary);
  margin-bottom:16px;
  display:block;
  transition:transform .3s ease;
}
.kurs-kachel .kat{
  display:block;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:var(--text-s);
  color:rgba(var(--ink-rgb),.5);
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.kurs-kachel h5{ font-size:var(--text-s); line-height:1.35; margin:0; }

.trust-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  position:relative;
  z-index:1;
}
@media (min-width:640px){ .trust-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .trust-grid{ grid-template-columns:repeat(4,1fr); } }

/* ---- Hero-Statistiken (Zähler + Fortschrittsbalken unter dem CTA) ------- */
.hero-stat-row{
  display:flex;
  flex-wrap:wrap;
  gap:40px;
  margin-top:56px;
  padding-top:32px;
  border-top:1px solid var(--hairline);
}
.hero-stat{ min-width:150px; }
.hero-stat .num{
  display:block;
  font-weight:600;
  font-size:clamp(1.8rem,3vw,2.4rem);
  color:var(--primary);
  line-height:1;
  margin-bottom:10px;
}
.hero-stat .stat-bar{ margin-bottom:14px; }
/* Absolute Zahlen statt Prozentwerte — der Balken hat keinen relativen
   Zielwert, er füllt beim Abschluss der Zähl-Animation schlicht auf 100%. */
.hero-stat.is-counted .stat-bar-fill{ width:100%; }
.hero-stat p{ font-size:var(--text-s); color:rgba(var(--ink-rgb),.55); max-width:24ch; }

/* ---- Fahrplan / nummerierte Schritt-Liste -------------------------------- */
.roadmap-list{ position:relative; z-index:1; }
.roadmap-step{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:24px;
  padding:28px 0;
  border-top:1px solid var(--hairline);
}
.roadmap-step:last-child{ border-bottom:1px solid var(--hairline); }
.roadmap-num{
  position:relative;
  z-index:1;
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px;
  border-radius:50%;
  border:1px solid var(--hairline-strong);
  background:var(--bg);
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:15px;
  color:var(--primary);
  transition:border-color .4s ease, box-shadow .4s ease;
}
.roadmap-num.is-active{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(102,255,255,.12), 0 0 18px rgba(102,255,255,.35);
}
.roadmap-step h3{ font-size:1.2rem; margin-bottom:8px; }
.roadmap-step p{ font-size:var(--text-s); color:rgba(var(--ink-rgb),.6); max-width:58ch; }

/* Berg-Hintergrund in Fahrplan-Sektionen: bildschirmbreite, kontinuierlich
   aufsteigende Partikel auf einer Berg-Silhouette ("Stufen erklimmen"),
   am unteren Sektionsrand verankert und nach oben ausblendend. */
.fahrplan-zone{
  position:relative;
  overflow:hidden;
}
.fahrplan-bg{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  aspect-ratio:1584/672;
  z-index:0;
  overflow:hidden;
  opacity:.4;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%);
}
.fahrplan-bg-inner{
  width:100%;
  height:100%;
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 24%, rgba(0,0,0,1) 38%, rgba(0,0,0,0) 92%);
  mask-image:linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 24%, rgba(0,0,0,1) 38%, rgba(0,0,0,0) 92%);
}
.fahrplan-bg organic-particle-field{
  display:block;
  width:100%;
  height:100%;
}
/* Mobil: BASECollege-Kopf als Trenner am ENDE der Section "Schwerpunkte der
   Schulung" (#lehrplan) – weiter unten, Kopf komplett, deckend. Nur < 768px.
   Scope auf #lehrplan, damit andere .fahrplan-bg-Nutzungen unberuehrt bleiben. */
@media (max-width:768px){
  #lehrplan{ padding-bottom:320px; }
  #lehrplan .fahrplan-bg{
    height:300px; opacity:1;
    -webkit-mask-image:none; mask-image:none;
  }
  #lehrplan .fahrplan-bg-inner{
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 28%);
            mask-image:linear-gradient(180deg, transparent 0%, #000 28%);
  }
  #lehrplan .fahrplan-bg organic-particle-field{
    position:absolute; top:auto; bottom:0; left:auto; right:-30%;
    width:200%; height:100%;
  }
}
#fahrplan .container,
#vier-punkte-plan .container,
#beratungsservice .container,
#governance-fahrplan .container{
  position:relative;
  z-index:1;
}

/* Verbindungslinie hinter den Kreisen: top/height werden von main.js exakt auf
   die Kreis-Mittelpunkte gesetzt (Textzeilen pro Schritt sind unterschiedlich
   hoch, daher keine hartcodierten Werte). */
.roadmap-track{
  position:absolute;
  left:23px;
  width:2px;
  background:var(--hairline-strong);
  overflow:visible;
}
.roadmap-track-fill{
  display:block;
  position:absolute;
  top:0; left:0; width:100%;
  height:calc(var(--roadmap-progress, 0) * 100%);
  background:var(--primary);
}
.roadmap-track-glow{
  position:absolute;
  left:50%;
  top:-70px;
  width:10px; height:70px;
  transform:translateX(-50%);
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.9), transparent);
  filter:blur(2px);
  clip-path:inset(0 0 calc(100% - (var(--roadmap-progress, 0) * 100%)) 0);
  animation:roadmapGlowTravel 4.5s linear infinite;
}
@keyframes roadmapGlowTravel{
  0%{ top:-70px; }
  100%{ top:100%; }
}

/* ---- Horizontale Timeline (z.B. Fristen/Meilensteine) -------------------- */
.timeline-h{
  position:relative;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:32px;
  margin-top:16px;
  z-index:1;
}
@media (max-width:700px){
  .timeline-h{ grid-template-columns:1fr; gap:48px; }
  .timeline-h-track{ display:none; }
}
.timeline-h-track{
  position:absolute;
  top:11px;
  height:2px;
  background:var(--hairline-strong);
}
.timeline-h-track-fill{
  display:block;
  position:absolute;
  top:0; left:0; height:100%;
  width:calc(var(--timeline-progress, 0) * 100%);
  background:var(--primary);
}
.timeline-h-track-glow{
  position:absolute;
  top:50%;
  left:-70px;
  width:70px; height:10px;
  transform:translateY(-50%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  filter:blur(2px);
  clip-path:inset(0 calc(100% - (var(--timeline-progress, 0) * 100%)) 0 0);
  animation:timelineGlowTravel 4.5s linear infinite;
}
@keyframes timelineGlowTravel{
  0%{ left:-70px; }
  100%{ left:100%; }
}
.timeline-h-item{ position:relative; padding-top:36px; }
.timeline-h-dot{
  position:absolute;
  top:0; left:0;
  width:22px; height:22px;
  border-radius:50%;
  border:1px solid var(--hairline-strong);
  background:var(--bg);
  transition:border-color .4s ease, box-shadow .4s ease;
}
.timeline-h-dot.is-active{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(102,255,255,.12), 0 0 18px rgba(102,255,255,.35);
}
.timeline-h-date{
  display:block;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:var(--text-s);
  font-weight:600;
  color:var(--primary);
  margin-bottom:10px;
}
.timeline-h-item p{ font-size:var(--text-s); color:rgba(var(--ink-rgb),.6); max-width:38ch; }

/* ---- Metric-Cards (2x2 Kennzahlen-Kacheln) ------------------------------- */
.metric-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin-top:40px;
  position:relative;
  z-index:1;
}
.metric-card{
  border-radius:15px;
  border:1px solid var(--hairline);
  background:rgba(var(--ink-rgb),.04);
  padding:20px;
}
.metric-card svg{ width:22px; height:22px; color:var(--primary); margin-bottom:14px; display:block; }
.metric-card .num{ display:block; font-weight:600; font-size:1.6rem; color:var(--ink); margin-bottom:4px; }
.metric-card p{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:var(--text-s); text-transform:uppercase; letter-spacing:.04em;
  color:rgba(var(--ink-rgb),.5);
}

/* ---- Live-Sicherheitslage: Monitor-Karte --------------------------------- */
.live-section .container{
  display:grid;
  grid-template-columns:1fr;
  gap:56px;
  position:relative;
  z-index:1;
}
@media (min-width:960px){
  .live-section .container{ grid-template-columns:1fr 1fr; align-items:center; gap:64px; }
}

.monitor-card{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid var(--hairline-strong);
  background:rgba(var(--ink-rgb),.05);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 0 60px rgba(var(--ink-rgb),.02), 0 0 80px rgba(102,255,255,.08);
}
.monitor-scanline{
  position:absolute;
  inset-inline:0;
  top:0;
  height:96px;
  background:linear-gradient(180deg, rgba(102,255,255,.14), transparent);
  pointer-events:none;
  animation:monitorScanline 5s linear infinite;
}
@keyframes monitorScanline{
  0%{ transform:translateY(-100%); }
  100%{ transform:translateY(420%); }
}
.monitor-head{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--hairline);
}
.monitor-live{ display:flex; align-items:center; gap:10px; }
.live-dot{ position:relative; display:inline-flex; width:10px; height:10px; flex-shrink:0; }
.live-dot::before{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  background:var(--primary);
  animation:liveDotPulse 1.8s ease-out infinite;
}
.live-dot::after{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  background:var(--primary);
}
@keyframes liveDotPulse{
  0%{ opacity:.7; transform:scale(.85); }
  100%{ opacity:0; transform:scale(2); }
}
.monitor-live span{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:var(--text-s); text-transform:uppercase; letter-spacing:.1em;
  color:rgba(var(--ink-rgb),.55);
}
.monitor-badge{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:11px;
  color:rgba(var(--ink-rgb),.5);
}
.monitor-body{ position:relative; z-index:1; display:flex; flex-direction:column; gap:18px; padding:22px; }
.monitor-score-row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  border-radius:12px;
  border:1px solid var(--hairline);
  background:rgba(var(--bg-rgb),.4);
  padding:20px;
}
.monitor-score-label{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:var(--text-s); text-transform:uppercase; letter-spacing:.1em;
  color:rgba(var(--ink-rgb),.5);
  margin-bottom:8px;
}
.monitor-score-value{
  font-weight:600;
  font-size:clamp(2.4rem,4vw,3rem);
  color:var(--primary);
  line-height:1;
  text-shadow:0 0 24px rgba(102,255,255,.5);
}
.monitor-score-value .unit{ font-size:1.3rem; color:rgba(var(--ink-rgb),.5); font-weight:400; }
.monitor-bars{ display:flex; align-items:flex-end; gap:5px; height:72px; }
.monitor-bars span{
  display:block;
  width:7px;
  border-radius:9999px;
  background:linear-gradient(180deg, var(--primary), rgba(102,255,255,.25));
  min-height:4px;
}
.monitor-stream{
  border-radius:12px;
  border:1px solid var(--hairline);
  background:rgba(var(--bg-rgb),.4);
  padding:18px;
}
.monitor-stream-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.monitor-stream-head .label{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:var(--text-s); text-transform:uppercase; letter-spacing:.1em;
  color:rgba(var(--ink-rgb),.5);
}
.monitor-stream-active{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:var(--text-s);
  color:var(--primary);
}
.monitor-stream ul{ display:flex; flex-direction:column; gap:11px; }
.monitor-stream li{
  display:flex; align-items:baseline; gap:10px;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:var(--text-s);
  color:rgba(var(--ink-rgb),.6);
}
.monitor-stream li .arrow{ color:var(--accent-warm); }
.monitor-stream li.arrow-primary .arrow{ color:var(--primary); }
.monitor-stream li.tick-enter{
  opacity:0;
  transform:translateY(-6px);
  animation:tickerEnter .5s ease forwards;
}
@keyframes tickerEnter{ to{ opacity:1; transform:translateY(0); } }

/* ---- Formular (Readiness-Check) ------------------------------------------ */
.form-check-list{ display:flex; flex-direction:column; gap:10px; margin:24px 0 40px; }
.form-check-list li{
  font-size:var(--text-s);
  color:rgba(var(--ink-rgb),.75);
  display:flex; align-items:baseline; gap:8px;
}
.form-check-list li::before{ content:"✓"; color:var(--primary); font-weight:600; }

.lead-form{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  max-width:520px;
}
@media (min-width:600px){ .lead-form{ grid-template-columns:1fr 1fr; } }
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field.full{ grid-column:1/-1; }
.form-field label{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:var(--text-s); text-transform:uppercase; letter-spacing:.04em;
  color:rgba(var(--ink-rgb),.55);
}
.form-field input{
  font-family:inherit;
  font-size:var(--text-s);
  color:var(--ink);
  background:rgba(var(--ink-rgb),.04);
  border:1px solid var(--hairline-strong);
  border-radius:10px;
  padding:13px 16px;
  transition:border-color .25s ease, background-color .25s ease;
}
.form-field input,
.form-field select,
.form-field textarea{
  font-family:inherit;
  font-size:var(--text-s);
  color:var(--ink);
  background:rgba(var(--ink-rgb),.04);
  border:1px solid var(--hairline-strong);
  border-radius:10px;
  padding:13px 16px;
  transition:border-color .25s ease, background-color .25s ease;
}
.form-field textarea{ resize:vertical; min-height:96px; }
.form-field input::placeholder,
.form-field textarea::placeholder{ color:rgba(var(--ink-rgb),.35); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{ outline:none; border-color:var(--primary); background:rgba(var(--ink-rgb),.07); }
.lead-form .btn{ grid-column:1/-1; }
.form-note{
  font-size:var(--text-formular);
  color:rgba(var(--ink-rgb),.4);
  max-width:520px;
  margin-top:16px;
}

/* ---- Consent-Checkboxen (Terminbuchung u.ä.) ------------------------------ */
.form-consent{
  grid-column:1/-1;
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:4px 0 8px;
}
.form-consent label{
  display:flex; align-items:flex-start; gap:10px;
  font-size:var(--text-s);
  line-height:1.5;
  color:rgba(var(--ink-rgb),.6);
  cursor:pointer;
}
.form-consent input[type="checkbox"]{
  margin-top:3px;
  width:16px; height:16px;
  accent-color:var(--primary);
  flex-shrink:0;
}
.form-consent a{ color:var(--primary); }

/* Hinweis zu einer Einwilligung, die sich aus der Handlung selbst ergibt
   (z.B. Zusendung der angeforderten Unterlagen) – kein Ankreuzfeld. */
.form-consent-note{
  grid-column:1/-1;
  font-size:var(--text-s);
  line-height:1.55;
  color:rgba(var(--ink-rgb),.5);
  border-left:2px solid var(--hairline-strong);
  padding-left:14px;
  margin:-4px 0 4px;
}

/* ---- Honeypot: unsichtbare Spam-Falle -------------------------------------
   Bewusst nicht display:none – manche Bots ignorieren ausgeblendete Felder.
   Für Menschen (inkl. Screenreader) ist das Feld nicht erreichbar. */
.form-honeypot{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

/* ---- Formular-Rückmeldung (Erfolg / Fehler) ------------------------------- */
.form-status{
  grid-column:1/-1;
  font-size:var(--text-s);
  line-height:1.55;
  border-radius:10px;
  padding:14px 16px;
  border:1px solid var(--hairline-strong);
  background:rgba(var(--ink-rgb),.04);
  color:rgba(var(--ink-rgb),.75);
  margin:0;
}
.form-status[hidden]{ display:none; }
.form-status.is-success{
  border-color:rgba(102,255,255,.4);
  background:rgba(102,255,255,.07);
  color:var(--ink);
}
.form-status.is-error{
  border-color:rgba(232,131,111,.45);
  background:rgba(232,131,111,.08);
  color:#f0b8ab;
}
.form-status a{ color:var(--primary); }
.lead-form button[type="submit"]:disabled{
  opacity:.6;
  cursor:progress;
}

/* Nach erfolgreichem Absenden bleibt nur die Rückmeldung stehen. Ein leeres
   Formular darunter sieht aus, als wäre noch etwas zu tun. */
.lead-form.is-sent > *:not(.form-status){ display:none; }
.lead-form.is-sent{ gap:0; }
.lead-form.is-sent .form-status{ padding:20px 22px; font-size:var(--text-s); }

/* ---- Abschluss-CTA innerhalb einer Sektion --------------------------------
   Zentrierter Aufruf unter einem Karten-Grid: ein Satz, ein Button. */
.section-cta{
  display:flex; flex-direction:column; align-items:center;
  gap:22px;
  margin-top:56px;
  text-align:center;
}
.section-cta .lede{ margin:0; max-width:56ch; }

/* ---- Bestätigungsseite (Double-Opt-in-Ziel) ------------------------------- */
.confirm-panel{ max-width:640px; }
.confirm-panel .legal-title{ margin-top:18px; }
.confirm-panel .lede{ margin:0; }
.confirm-hint{
  font-size:var(--text-formular);
  line-height:1.6;
  color:rgba(var(--ink-rgb),.5);
  margin-top:18px;
}
.confirm-hint a{ color:var(--primary); }
.confirm-actions{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:32px;
}
/* Direkter Download nach der Bestätigung – bewusst als eigene Karte, damit er
   nicht mit den nachgeordneten Links verwechselt wird. */
.confirm-download{
  margin-top:30px;
  padding:24px 26px;
  border:1px solid var(--hairline-strong);
  border-radius:12px;
  background:rgba(102,255,255,.04);
}
.confirm-download[hidden]{ display:none; }
.confirm-download-label{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:var(--text-s); letter-spacing:.12em; text-transform:uppercase;
  color:rgba(var(--ink-rgb),.5);
  margin:0 0 8px;
}
.confirm-download-title{
  font-size:19px; font-weight:600; line-height:1.35;
  color:var(--ink);
  margin:0 0 20px;
}

/* ---- Kontakt-Modal (Pop-Up-Formular, global über den Header erreichbar) --- */
body.modal-open{ overflow:hidden; }
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:56px 20px;
  overflow-y:auto;
  background:rgba(var(--bg-rgb),.75);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.modal-overlay.is-open{
  opacity:1;
  visibility:visible;
  transition:opacity .3s ease, visibility 0s linear 0s;
}
.modal-dialog{
  position:relative;
  width:100%;
  max-width:640px;
  margin:auto;
  background:var(--bg);
  border:1px solid var(--hairline-strong);
  border-radius:18px;
  padding:44px 40px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  transform:translateY(24px) scale(.98);
  transition:transform .35s cubic-bezier(.19,1,.22,1);
}
.modal-overlay.is-open .modal-dialog{ transform:translateY(0) scale(1); }
.modal-close{
  position:absolute;
  top:20px; right:20px;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid var(--hairline-strong);
  color:rgba(var(--ink-rgb),.6);
  font-size:var(--text-s);
  transition:border-color .25s ease, color .25s ease;
}
.modal-close:hover{ border-color:var(--primary); color:var(--primary); }
.modal-title{
  font-size:1.75rem;
  font-weight:600;
  color:var(--ink);
  margin-bottom:28px;
  padding-right:40px;
}
@media (max-width:600px){
  .modal-dialog{ padding:36px 24px; }
}

/* ---- Plan-Detail-Karten (z.B. DORA-4-Punkte-Plan im Detail) --------------- */
.plan-detail-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  margin-top:56px;
  position:relative;
  z-index:1;
}
@media (min-width:900px){ .plan-detail-grid{ grid-template-columns:repeat(2,1fr); } }
.plan-detail-card{
  border-radius:15px;
  border:1px solid var(--hairline);
  background:rgba(var(--ink-rgb),.04);
  padding:36px 32px;
}
.plan-detail-card .roadmap-num{ margin-bottom:20px; }
.plan-detail-card h4{ font-size:1.3rem; margin-bottom:4px; }
.plan-detail-card h6{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:var(--text-s); text-transform:uppercase; letter-spacing:.04em;
  color:rgba(var(--ink-rgb),.5);
  margin:24px 0 12px;
}
.plan-detail-card ul{ display:flex; flex-direction:column; gap:10px; }
.plan-detail-card li{
  font-size:var(--text-s);
  color:rgba(var(--ink-rgb),.75);
  display:flex; align-items:baseline; gap:8px;
}
.plan-detail-card li::before{ content:"✓"; color:var(--primary); font-weight:600; }

/* ==========================================================================
   Final CTA — corner brackets
   ========================================================================== */
.final-cta{ text-align:center; }
#kontakt-cta{ padding-bottom:8px; }
.cta-frame{
  position:relative;
  max-width:760px;
  margin:0 auto;
  padding:72px 32px;
}
.cta-frame::before,
.cta-frame::after,
.cta-frame .corner-tr,
.cta-frame .corner-br{
  content:"";
  position:absolute;
  width:28px;height:28px;
  border-color:var(--primary);
  border-style:solid;
  border-width:0;
}
.cta-frame::before{ top:0;left:0; border-top-width:2px; border-left-width:2px; border-top-left-radius:15px; }
.cta-frame::after{ bottom:0;left:0; border-bottom-width:2px; border-left-width:2px; border-bottom-left-radius:15px; }
.cta-frame .corner-tr{ top:0;right:0; border-top-width:2px; border-right-width:2px; border-top-right-radius:15px; }
.cta-frame .corner-br{ bottom:0;right:0; border-bottom-width:2px; border-right-width:2px; border-bottom-right-radius:15px; }
.final-cta h2{ margin-bottom:14px; }
.final-cta p{ margin-bottom:32px; }

/* ==========================================================================
   Wiese — volle Breite, Partikel fliegen nach oben aus dem Gras
   ========================================================================== */
.meadow-section{
  position:relative;
  width:100%;
  aspect-ratio:1584/571;
  overflow:hidden;
}
.meadow-section organic-particle-field{
  display:block;
  position:absolute;
  left:0;bottom:0;
  width:100%;
  aspect-ratio:1584/672;
}
@media (max-width:700px){
  .meadow-section{ aspect-ratio:1584/765; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer.site-footer{
  background:var(--bg);
  padding-top:72px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  padding-bottom:48px;
  border-bottom:1px solid var(--hairline);
}
@media (min-width:700px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .footer-grid{ grid-template-columns:1.2fr repeat(4,1fr); } }

.footer-brand img{ height:52px; margin-bottom:16px; }
.footer-brand p{ font-size:var(--text-s); max-width:32ch; margin-bottom:20px; }
.footer-social{ display:flex; gap:16px; }
.footer-social a{
  width:36px;height:36px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--hairline-strong);
  border-radius:9999px;
  font-size:var(--text-s);font-weight:600;
  transition:border-color .25s ease, color .25s ease;
}
.footer-social a:hover{ border-color:var(--primary); color:var(--primary); }

.footer-col h4{ font-size:var(--text-s); margin-bottom:18px; letter-spacing:.02em; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col li{ font-size:var(--text-s); color:rgba(var(--ink-rgb),.6); }
.footer-col a{ font-size:var(--text-s); color:rgba(var(--ink-rgb),.6); }
.footer-col a:hover{ color:var(--primary); }

.footer-badges{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:20px 16px;
  margin-top:24px;
  max-width:220px;
}
.footer-badges img{
  width:100%;height:auto;
  opacity:.5;
  filter:grayscale(1) brightness(1.4);
  transition:transform .25s ease, opacity .25s ease;
}
.footer-badges img:hover{
  transform:scale(1.6);
  opacity:1;
  position:relative;
  z-index:1;
}

.footer-bottom{
  display:flex;flex-wrap:wrap;gap:16px;
  align-items:center;justify-content:space-between;
  padding:28px 0;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:var(--text-s);
  color:rgba(var(--ink-rgb),.45);
}
.footer-legal{ display:flex; flex-wrap:wrap; gap:20px; }
.footer-legal a, .footer-legal button{ font-family:inherit; font-size:var(--text-s); color:rgba(var(--ink-rgb),.45); }
.footer-legal a:hover, .footer-legal button:hover{ color:var(--primary); }

/* Mobil (einspaltig): Footer mittig ausrichten statt am linken Rand klebend. */
@media (max-width:699px){
  .footer-grid{ text-align:center; }
  .footer-brand{ display:flex; flex-direction:column; align-items:center; }
  .footer-brand p{ margin-left:auto; margin-right:auto; }
  .footer-social{ justify-content:center; }
  .footer-badges{ margin-left:auto; margin-right:auto; justify-items:center; }
  /* Die vier Menuespalten dagegen linksbuendig: zentrierte Linklisten mit
     unterschiedlich langen Eintraegen sind schlecht zu ueberfliegen, weil der
     Blick keine gemeinsame Kante findet. Der Einzug kommt zu den 24px des
     Containers dazu, damit die Liste nicht am Rand klebt. */
  .footer-col{ text-align:left; padding-left:16px; }
  .footer-col ul{ align-items:flex-start; }
  .footer-bottom{ justify-content:center; text-align:center; }
  .footer-legal{ justify-content:center; }
}

/* ==========================================================================
   Scroll-Reveal — Bewegungselemente der Vorlage (Fade + Translate)
   ========================================================================== */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.19,1,.22,1), transform .8s cubic-bezier(.19,1,.22,1);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .marquee-track{ animation:none; }
  .btn{ transition:none; }
  .svc-card{ transition:none; }
  .svc-card::after,
  .quickfacts-card::after,
  .price-card .card-glow-ring,
  .faq-item[open]::after{ animation:none; }
  .reveal{ opacity:1!important; transform:none!important; transition:none!important; }
  .monitor-scanline{ animation:none; opacity:.4; }
  .live-dot::before{ animation:none; opacity:0; }
  .monitor-stream li.tick-enter{ animation:none; opacity:1; transform:none; }
  .roadmap-track-glow{ animation:none; opacity:.5; }
  .roadmap-num{ transition:none; }
  .timeline-h-track-glow{ animation:none; opacity:.5; }
  .timeline-h-dot{ transition:none; }
  .modal-overlay, .modal-dialog{ transition:none; }
}

/* ==========================================================================
   Branchenseiten — Kontext-Chips, Expertise-Beweis & Signature-Module
   (Finance / Energie / Gesundheitswesen / Automobil)
   ========================================================================== */

/* ---- Kontext: „Ihre Welt kennen wir" ---- */
.context-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:56px;
  align-items:start;
}
.context-lead p + p{ margin-top:18px; }
.context-chips{
  border:1px solid var(--hairline);
  border-radius:20px;
  padding:28px;
  background:linear-gradient(180deg,rgba(var(--ink-rgb),.03),transparent);
}
.context-chips h4{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-weight:400;font-size:13px;letter-spacing:.02em;
  color:var(--neutral-light);text-transform:uppercase;margin-bottom:20px;
}
.reg-chips{ display:flex;flex-wrap:wrap;gap:10px; }
.reg-chip{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:13px;letter-spacing:.01em;
  color:var(--accent-light);
  border:1px solid var(--hairline-strong);
  border-radius:9px;padding:8px 13px;
  background:rgba(163,235,240,.05);
}
.reg-chip--warm{
  color:var(--accent-warm);
  border-color:rgba(201,160,99,.4);
  background:rgba(201,160,99,.07);
}

/* ---- Signature-Rahmen (gemeinsam) ---- */
.sig-frame{
  position:relative;
  border:1px solid var(--hairline);
  border-radius:24px;
  padding:44px;
  overflow:hidden;
  background:
    radial-gradient(680px 340px at 12% -10%, rgba(102,255,255,.07), transparent 62%),
    linear-gradient(180deg, rgba(var(--ink-rgb),.03), transparent);
}
.sig-tag{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:13px;color:var(--primary);letter-spacing:.02em;margin-bottom:14px;
}
.sig-tag .dot{
  width:8px;height:8px;border-radius:50%;background:var(--primary);
  box-shadow:0 0 12px var(--primary);
}
.sig-frame > h3{ font-size:clamp(1.5rem,2.6vw,2rem); letter-spacing:-.02em; margin-bottom:12px; }
.sig-note{
  margin-top:26px;font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:var(--text-s);line-height:1.6;color:var(--neutral-light);
}

/* ---- Expertise-Beweis: Metriken + Punkte + Logos ---- */
.metric-row{ display:flex;flex-wrap:wrap;gap:48px;margin-bottom:44px; }
.metric .num{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;color:var(--white);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.metric .num .ph{ color:var(--accent-warm); }
.metric p{ margin-top:12px;max-width:26ch;font-size:var(--text-s); }
.proof-points{ display:grid;gap:14px; }
.proof-points li{ display:flex;gap:12px;align-items:baseline;color:rgba(var(--ink-rgb),.8); }
.proof-points li::before{ content:"✓";color:var(--secondary);font-weight:600; }
.ref-logos{
  display:flex;flex-wrap:wrap;align-items:center;gap:36px;
  margin-top:44px;padding-top:36px;border-top:1px solid var(--hairline);
}
.ref-logos .rl-label{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:var(--text-s);color:var(--neutral-light);letter-spacing:.02em;
}
.ref-logo{ height:34px;width:auto;opacity:.75;filter:grayscale(1) brightness(1.6);transition:opacity .2s ease; }
.ref-logo:hover{ opacity:1; }

/* ---- Case-Teaser ---- */
.case-teaser{
  position:relative; z-index:1;
  border:1px solid var(--hairline);border-radius:24px;padding:44px;
  display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between;
  background:linear-gradient(120deg,rgba(102,255,255,.05),rgba(201,160,99,.03));
}
/* wandernder Glow-Rahmen (wie bei den Service-Karten, radius 24) */
.case-teaser::after{
  content:"";position:absolute;inset:0;border-radius:24px;padding:1.5px;
  background:conic-gradient(from var(--svc-glow-angle),
    transparent 0deg, transparent 250deg,
    rgba(102,255,255,.15) 285deg, rgba(102,255,255,1) 322deg,
    rgba(255,255,255,.95) 330deg, rgba(102,255,255,1) 338deg,
    rgba(102,255,255,.15) 355deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
  filter:drop-shadow(0 0 3px rgba(102,255,255,.85)) drop-shadow(0 0 7px rgba(102,255,255,.4));
  animation:svcCardGlow 7s linear infinite;
}
/* Aufsteigende 0/1-Partikel hinter der Case-Karte (Bild unsichtbar, nur Partikel) */
.case-particles{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.case-particles organic-particle-field{ display:block; width:100%; height:100%; }
.case-teaser h3{ font-size:clamp(1.4rem,2.4vw,1.9rem);max-width:22ch; }
.case-teaser p{ margin-top:10px;max-width:52ch; }

/* ==== FINANCE — DORA „Resilienz-Puls" ==== */
.dora{ position:relative;margin-top:36px; }
.dora-track{
  position:relative;height:2px;border-radius:2px;margin:0 6px 26px;
  background:var(--hairline-strong);overflow:hidden;
}
.dora-glow{
  position:absolute;top:-3px;left:-12%;width:14%;height:8px;border-radius:8px;
  background:linear-gradient(90deg,transparent,var(--primary),transparent);
  filter:blur(1px);
  animation:dora-run 5s linear infinite;
}
@keyframes dora-run{ from{left:-14%;} to{left:100%;} }
.dora-pillars{ display:grid;grid-template-columns:repeat(5,1fr);gap:16px; }
.dora-pillar{
  position:relative;border:1px solid var(--hairline);border-radius:16px;
  padding:22px 18px;background:rgba(var(--ink-rgb),.02);
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.dora-pillar::before{
  content:"";position:absolute;top:-5px;left:22px;width:8px;height:8px;border-radius:50%;
  background:var(--primary);opacity:.25;box-shadow:0 0 10px var(--primary);
  animation:dp-pulse 5s ease-in-out infinite;
}
.dora-pillar:nth-child(1)::before{ animation-delay:0s; }
.dora-pillar:nth-child(2)::before{ animation-delay:1s; }
.dora-pillar:nth-child(3)::before{ animation-delay:2s; }
.dora-pillar:nth-child(4)::before{ animation-delay:3s; }
.dora-pillar:nth-child(5)::before{ animation-delay:4s; }
@keyframes dp-pulse{ 0%,100%{opacity:.2;} 45%,55%{opacity:1;} }
.dora-pillar:hover{ transform:translateY(-4px);border-color:var(--primary);background:rgba(102,255,255,.05); }
.dp-num{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:12px;color:var(--primary);
}
.dora-pillar h4{ font-size:var(--text-s);margin:10px 0 8px;line-height:1.2; }
.dora-pillar p{ font-size:var(--text-s);line-height:1.45; }

/* ==== ENERGIE — Live-Angriffserkennung im Netz ==== */
.gridnet{ position:relative;margin-top:20px; }
.gridnet svg{ width:100%;height:auto;display:block; }
.gn-line{ fill:none;stroke:var(--hairline-strong);stroke-width:1.5; }
.gn-flow{
  fill:none;stroke:var(--primary);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:6 150;filter:drop-shadow(0 0 4px rgba(102,255,255,.7));
  animation:gn-flow 3.4s linear infinite;
}
.gn-flow.d1{ animation-delay:.6s; }
.gn-flow.d2{ animation-delay:1.4s; }
.gn-flow.d3{ animation-delay:2.1s; }
@keyframes gn-flow{ from{stroke-dashoffset:156;} to{stroke-dashoffset:0;} }
.gn-node{ fill:var(--bg);stroke:var(--secondary);stroke-width:2; }
.gn-core{ fill:var(--primary); }
.gn-node--alarm{ animation:gn-alarm 6s ease-in-out infinite; }
.gn-alarm-core{ fill:var(--primary);animation:gn-alarm-core 6s ease-in-out infinite; }
.gn-ring{
  fill:none;stroke:var(--accent-warm);stroke-width:2;opacity:0;transform-origin:center;
  animation:gn-ring 6s ease-in-out infinite;
}
@keyframes gn-alarm{ 0%,60%,100%{stroke:var(--secondary);} 68%,80%{stroke:var(--accent-warm);} }
@keyframes gn-alarm-core{ 0%,60%,100%{fill:var(--primary);} 68%,80%{fill:var(--accent-warm);} }
@keyframes gn-ring{
  0%,62%{opacity:0;r:14;} 70%{opacity:.9;r:16;} 92%{opacity:0;r:30;} 100%{opacity:0;}
}
.gn-label{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:var(--text-s);fill:var(--neutral-light);
}
.gn-caption{
  display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:var(--text-s);color:var(--secondary);
}
.gn-caption .dot{ width:8px;height:8px;border-radius:50%;background:var(--secondary);box-shadow:0 0 10px var(--secondary);animation:dp-pulse 2.4s ease-in-out infinite; }

/* ==== GESUNDHEIT — EKG / Herzschlag ==== */
.ekg{ position:relative;margin-top:20px;border-radius:16px;overflow:hidden; }
.ekg svg{ width:100%;height:auto;display:block; }
.ekg-base{ fill:none;stroke:rgba(var(--ink-rgb),.14);stroke-width:2; }
.ekg-trace{
  fill:none;stroke:var(--accent-light);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(163,235,240,.6));
  stroke-dasharray:1100;stroke-dashoffset:1100;
  animation:ekg-run 5.5s linear infinite;
}
@keyframes ekg-run{ from{stroke-dashoffset:1100;} to{stroke-dashoffset:0;} }
.ekg-flat{ stroke:var(--accent-warm)!important;filter:drop-shadow(0 0 5px rgba(201,160,99,.6)); }
.ekg-marks{ display:flex;flex-wrap:wrap;gap:14px;margin-top:22px; }
.ekg-mark{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:var(--text-s);
  display:inline-flex;align-items:center;gap:8px;color:var(--neutral-light);
}
.ekg-mark .sw{ width:20px;height:2px;border-radius:2px; }
.ekg-mark .sw.warm{ background:var(--accent-warm); }
.ekg-mark .sw.cool{ background:var(--accent-light); }

/* ==== AUTOMOBIL — Lieferketten-Graph + AL2/AL3-Umschalter ==== */
.tisax-viz{ position:relative;margin-top:20px; }
.al-radio{ position:absolute;width:1px;height:1px;opacity:0;pointer-events:none; }
.al-head{ display:inline-flex;border:1px solid var(--hairline-strong);border-radius:12px;padding:5px;gap:5px;margin-bottom:30px; }
.al-tab{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:var(--text-s);
  padding:10px 18px;border-radius:8px;color:rgba(var(--ink-rgb),.6);
  cursor:pointer;transition:background .2s ease,color .2s ease;white-space:nowrap;
}
#al-2:checked ~ .al-head .al-tab[for="al-2"],
#al-3:checked ~ .al-head .al-tab[for="al-3"]{
  background:var(--primary);color:var(--neutral-gray);
}
.supply-flow{ display:flex;align-items:center;gap:0;flex-wrap:wrap;margin-bottom:34px; }
.sf-node{
  flex:1 1 120px;min-width:120px;text-align:center;border:1px solid var(--hairline-strong);
  border-radius:14px;padding:18px 14px;background:rgba(var(--ink-rgb),.02);
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:var(--text-s);color:var(--ink);
}
.sf-node small{ display:block;color:var(--neutral-light);font-size:var(--text-s);margin-top:4px; }
.sf-node--you{ border-color:var(--primary);background:rgba(102,255,255,.06);color:var(--primary); }
.sf-link{ position:relative;flex:0 1 60px;height:2px;background:var(--hairline-strong);min-width:36px; }
.sf-pulse{
  position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;
  background:var(--primary);box-shadow:0 0 10px var(--primary);
  animation:sf-run 2.6s linear infinite;
}
.sf-link:nth-of-type(4) .sf-pulse{ animation-delay:1.3s; }
@keyframes sf-run{ from{left:0;opacity:0;} 15%{opacity:1;} 85%{opacity:1;} to{left:100%;opacity:0;} }
.al-panel{ display:none;animation:al-fade .3s ease; }
#al-2:checked ~ .al-body .al-panel--2{ display:block; }
#al-3:checked ~ .al-body .al-panel--3{ display:block; }
@keyframes al-fade{ from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:none;} }
.al-panel h4{ font-size:var(--text-s);margin-bottom:16px; }
.al-panel h4 span{ color:var(--primary);font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:var(--text-s); }
.al-measures{ display:grid;grid-template-columns:repeat(2,1fr);gap:12px; }
.al-measures li{ display:flex;gap:11px;align-items:baseline;font-size:var(--text-s);color:rgba(var(--ink-rgb),.82); }
.al-measures li::before{ content:"▸";color:var(--primary); }

@media (max-width:900px){
  .context-grid{ grid-template-columns:1fr;gap:32px; }
  .dora-pillars{ grid-template-columns:repeat(2,1fr); }
  .sig-frame{ padding:30px 22px; }
  .al-measures{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .dora-pillars{ grid-template-columns:1fr; }
  .metric-row{ gap:28px; }
}
/* ==== INDUSTRIE — Shopfloor bis Topfloor (geschichtete Verteidigung) ==== */
.ind-stack{ display:grid;gap:0;margin-top:24px;max-width:640px; }
.ind-layer{
  position:relative;border:1px solid var(--hairline-strong);border-radius:12px;
  padding:18px 22px;background:rgba(var(--ink-rgb),.02);overflow:hidden;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.ind-name{ color:var(--ink);font-weight:600; }
.ind-desc{ font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:var(--text-s);color:var(--neutral-light); }
.ind-seg{ display:flex;align-items:center;justify-content:center;height:34px;position:relative; }
.ind-seg span{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:var(--text-s);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-warm);background:var(--bg);padding:0 12px;position:relative;z-index:1;
}
.ind-seg::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:repeating-linear-gradient(90deg,var(--accent-warm) 0 8px,transparent 8px 16px);
  opacity:.35;animation:ind-seg-glow 6s ease-in-out infinite;
}
@keyframes ind-seg-glow{ 0%,58%,100%{opacity:.3;} 66%,80%{opacity:.95;} }
.ind-layer--floor{ border-color:rgba(102,255,255,.35); }
.ind-run{
  position:absolute;top:0;bottom:0;left:-16%;width:14%;
  background:linear-gradient(90deg,transparent,rgba(102,255,255,.22),transparent);
  animation:ind-run 3.5s linear infinite;pointer-events:none;
}
@keyframes ind-run{ from{left:-16%;} to{left:112%;} }
.ind-anom{
  position:absolute;left:32%;top:50%;width:10px;height:10px;border-radius:50%;
  background:var(--accent-warm);box-shadow:0 0 12px var(--accent-warm);transform:translateY(-50%);
  animation:ind-anom 6s ease-in-out infinite;
}
@keyframes ind-anom{ 0%,54%{opacity:0;} 62%,78%{opacity:1;} 86%,100%{opacity:0;} }

/* ==== IT-DIENSTLEISTER — Zertifikats-Stack, der Märkte öffnet ==== */
.cert-viz{ position:relative;margin-top:20px; }
.cert-radio{ position:absolute;width:1px;height:1px;opacity:0;pointer-events:none; }
.cert-head{ display:flex;flex-wrap:wrap;border:1px solid var(--hairline-strong);border-radius:12px;padding:5px;gap:5px;margin-bottom:26px; }
.cert-tab{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:var(--text-s);
  padding:10px 16px;border-radius:8px;color:rgba(var(--ink-rgb),.6);cursor:pointer;
  transition:background .2s ease,color .2s ease;white-space:nowrap;
}
#cert-iso:checked ~ .cert-head .cert-tab[for="cert-iso"],
#cert-c5:checked ~ .cert-head .cert-tab[for="cert-c5"],
#cert-tisax:checked ~ .cert-head .cert-tab[for="cert-tisax"],
#cert-dora:checked ~ .cert-head .cert-tab[for="cert-dora"]{ background:var(--primary);color:var(--neutral-gray); }
.cert-panel{ display:none;animation:al-fade .3s ease; }
#cert-iso:checked ~ .cert-body .cert-panel--iso,
#cert-c5:checked ~ .cert-body .cert-panel--c5,
#cert-tisax:checked ~ .cert-body .cert-panel--tisax,
#cert-dora:checked ~ .cert-body .cert-panel--dora{ display:block; }
.cert-panel h4{ font-size:var(--text-s);margin-bottom:6px; }
.cert-panel > p{ font-size:var(--text-s);color:rgba(var(--ink-rgb),.75);margin-bottom:16px; }
.cert-unlocks{ display:grid;grid-template-columns:repeat(2,1fr);gap:12px; }
.cert-seg{ border:1px solid var(--hairline-strong);border-radius:12px;padding:14px 16px;background:rgba(102,255,255,.04); }
.cert-seg strong{ display:block;color:var(--white);font-size:var(--text-s);margin-bottom:3px; }
.cert-seg span{ font-size:var(--text-s);color:rgba(var(--ink-rgb),.7); }

/* ==== TRANSPORT & LOGISTIK — Lieferkette unter Druck ==== */
.chain-viz{ position:relative;margin-top:20px; }
.chain-radio{ position:absolute;width:1px;height:1px;opacity:0;pointer-events:none; }
.chain-track{ display:flex;align-items:stretch;flex-wrap:wrap;gap:0;margin-bottom:26px; }
.chain-node{
  flex:1 1 96px;min-width:96px;text-align:center;
  border:1px solid var(--hairline-strong);border-radius:12px;padding:14px 10px;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:var(--text-s);line-height:1.35;
  color:rgba(var(--ink-rgb),.6);background:rgba(var(--ink-rgb),.02);
  cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.chain-node small{ display:block;font-size:var(--text-s);opacity:.7;margin-top:3px; }
.chain-link{ flex:0 0 20px;align-self:center;height:2px;background:var(--hairline-strong);position:relative;overflow:hidden;border-radius:2px; }
.chain-link::after{ content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(90deg,transparent,var(--primary),transparent);animation:chain-flow 2.4s linear infinite; }
@keyframes chain-flow{ 0%{transform:translateX(-120%);} 100%{transform:translateX(320%);} }
#chain-1:checked ~ .chain-track .chain-node[for="chain-1"],
#chain-2:checked ~ .chain-track .chain-node[for="chain-2"],
#chain-3:checked ~ .chain-track .chain-node[for="chain-3"],
#chain-4:checked ~ .chain-track .chain-node[for="chain-4"]{ background:var(--accent-warm);color:var(--neutral-gray);border-color:var(--accent-warm); }
.chain-panel{ display:none;animation:al-fade .3s ease; }
#chain-1:checked ~ .chain-body .chain-panel--1,
#chain-2:checked ~ .chain-body .chain-panel--2,
#chain-3:checked ~ .chain-body .chain-panel--3,
#chain-4:checked ~ .chain-body .chain-panel--4{ display:block; }
.chain-panel h4{ font-size:var(--text-s);margin-bottom:6px; }
.chain-panel > p{ font-size:var(--text-s);color:rgba(var(--ink-rgb),.75);margin-bottom:16px; }
.chain-answer{ display:grid;grid-template-columns:repeat(2,1fr);gap:12px; }
.chain-seg{ border:1px solid var(--hairline-strong);border-radius:12px;padding:14px 16px;background:rgba(102,255,255,.04); }
.chain-seg strong{ display:block;color:var(--white);font-size:var(--text-s);margin-bottom:3px; }
.chain-seg span{ font-size:var(--text-s);color:rgba(var(--ink-rgb),.7); }
@media (max-width:640px){ .chain-answer{ grid-template-columns:1fr; } .chain-link{ display:none; } .chain-node{ flex:1 1 44%; } }

/* ==== ÖFFENTLICHE VERWALTUNG — IT-Grundschutz-Baukasten → Schutzschild ==== */
.gs-viz{ position:relative;margin-top:20px;max-width:560px; }
.gs-attack{ position:relative;height:22px;margin-bottom:14px;overflow:hidden; }
.gs-attack .barrier{ position:absolute;left:6%;top:-4px;bottom:-4px;width:2px;background:var(--accent-light);opacity:.5; }
.gs-attack .bolt{
  position:absolute;top:7px;right:0;width:9px;height:9px;border-radius:50%;
  background:var(--accent-warm);box-shadow:0 0 12px var(--accent-warm);
  animation:gs-bolt 5s ease-in-out infinite;
}
@keyframes gs-bolt{ 0%{right:-4%;opacity:0;} 12%{opacity:1;} 46%{right:86%;opacity:1;} 60%{right:78%;opacity:.4;} 100%{right:78%;opacity:0;} }
.gs-stack{ display:grid;gap:9px; }
.gs-layer{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  border:1px solid var(--hairline-strong);border-radius:10px;padding:14px 18px;
  background:rgba(var(--ink-rgb),.02);opacity:.4;animation:gs-build 6s ease-in-out infinite;
}
.gs-layer:nth-child(1){ animation-delay:0s; }
.gs-layer:nth-child(2){ animation-delay:.35s; }
.gs-layer:nth-child(3){ animation-delay:.7s; }
.gs-layer:nth-child(4){ animation-delay:1.05s; }
@keyframes gs-build{ 0%{opacity:.35;border-color:var(--hairline);} 22%,100%{opacity:1;border-color:rgba(163,235,240,.4);} }
.gs-name{ color:var(--ink);font-weight:600; }
.gs-num{ font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:12px;color:var(--accent-light); }
.gs-shield{
  display:inline-flex;align-items:center;gap:10px;margin-top:16px;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:var(--text-s);color:var(--accent-light);
}
.gs-shield .dot{ width:8px;height:8px;border-radius:50%;background:var(--accent-light);box-shadow:0 0 10px var(--accent-light);animation:dp-pulse 2.4s ease-in-out infinite; }

/* ==== BILDUNGSEINRICHTUNGEN — Campus-Netz mit Schutzring ==== */
.campus{ position:relative;margin-top:20px; }
.campus svg{ width:100%;height:auto;display:block; }
.campus-node{ fill:var(--bg);stroke:var(--neutral-light);stroke-width:1.5; }
.campus-core{ fill:var(--accent-light); }
.campus-prot .campus-node{ stroke:var(--secondary); }
.campus-prot .campus-core{ fill:var(--primary); }
.campus-risk{ fill:var(--bg);stroke:var(--accent-warm);stroke-width:2;animation:dp-pulse 3s ease-in-out infinite; }
.campus-riskcore{ fill:var(--accent-warm);animation:dp-pulse 3s ease-in-out infinite; }
.campus-ring{
  fill:none;stroke:var(--primary);stroke-width:2;opacity:.75;stroke-dasharray:6 7;
  animation:campus-ring 9s linear infinite;transform-origin:center;
}
@keyframes campus-ring{ to{ stroke-dashoffset:-260; } }
.campus-label{ font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:var(--text-s);fill:var(--neutral-light); }
.campus-label--prot{ fill:var(--primary); }
.campus-label--risk{ fill:var(--accent-warm); }

@media (max-width:900px){
  .cert-unlocks{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .dora-glow,.dora-pillar::before,.gn-flow,.gn-node--alarm,.gn-alarm-core,.gn-ring,
  .ekg-trace,.sf-pulse,.gn-caption .dot,
  .ind-run,.ind-anom,.ind-seg::before,.gs-bolt,.gs-layer,.gs-shield .dot,
  .campus-risk,.campus-riskcore,.campus-ring{ animation:none; }
  .ekg-trace{ stroke-dashoffset:0; }
  .gs-layer{ opacity:1; }
}

/* ==========================================================================
   Karriere-Seite
   ========================================================================== */
/* Hero-Partikelkopf: deutlich transparenter, oben/unten weich ausgeblendet,
   damit keine harten Kanten sichtbar sind. Position nach rechts erfolgt ueber
   image-anchor-x direkt am Element. */
.page-hero-bg--kopf organic-particle-field{
  opacity:.5;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

/* Icon-Badge fuer Karten & Listen */
.card-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:12px;
  background:rgba(102,255,255,.08);
  border:1px solid rgba(102,255,255,.28);
  color:var(--primary);
  flex:none;
}
.card-icon svg{ width:24px; height:24px; }

/* USP-Kacheln (nutzen .svc-card als Basis) */
.usp-card{ display:flex; flex-direction:column; gap:14px; }
.usp-card h5{ margin:2px 0 0; }
/* Alle vier Titel laufen ueber zwei Zeilen. Die Mindesthoehe haelt die
   Fliesstexte auch dann auf einer Linie, wenn ein Titel spaeter einmal kuerzer
   ausfaellt. Nur dort, wo die vier Karten wirklich nebeneinander stehen;
   schmaler brechen die Titel ohnehin anders. */
@media (min-width:1100px){
  .usp-card h5{ min-height:2.3em; }
}
.usp-card p{ font-size:var(--text-s); color:rgba(var(--ink-rgb),.72); line-height:1.6; }

/* Investment / Entwicklung – horizontale Icon-Liste */
.invest-list{ display:grid; gap:20px; max-width:920px; position:relative; z-index:1; }
.invest-item{
  display:grid; grid-template-columns:48px 1fr; gap:22px; align-items:start;
  padding:26px 28px; border-radius:15px;
  border:1px solid var(--hairline);
  background:rgba(var(--ink-rgb),.04);
  transition:border-color .35s ease, transform .35s ease, background-color .35s ease;
}
.invest-item:hover{ border-color:rgba(102,255,255,.4); transform:translateY(-3px); background:rgba(var(--ink-rgb),.06); }
.invest-item h3{ font-size:1.15rem; margin-bottom:8px; }
.invest-item p{ font-size:var(--text-s); color:rgba(var(--ink-rgb),.7); line-height:1.6; }
@media (max-width:520px){
  .invest-item{ grid-template-columns:1fr; gap:14px; }
}

/* Ansprechpartnerin-Karte */
.contact-person{
  display:flex; align-items:center; gap:22px;
  max-width:640px; margin:44px auto 0;
  padding:24px 28px; border-radius:15px;
  border:1px solid var(--hairline);
  background:rgba(var(--ink-rgb),.04);
}
.contact-person-avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%;
  flex:none;
  font-size:1.25rem; font-weight:600; letter-spacing:.02em;
  color:var(--primary);
  background:rgba(102,255,255,.08);
  border:1px solid rgba(102,255,255,.28);
}
.contact-person-role{
  display:block; font-size:var(--text-s); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--primary); margin-bottom:4px;
}
.contact-person-body h3{ font-size:1.2rem; margin-bottom:8px; }
.contact-person-body p{ font-size:var(--text-s); color:rgba(var(--ink-rgb),.7); line-height:1.6; margin-bottom:14px; }
@media (max-width:560px){
  .contact-person{ flex-direction:column; align-items:flex-start; text-align:left; }
}

/* Bewerbungsformular */
/* Sprungmarken zum Bewerbungsformular. Die Karriereseite ist mit rund 1650
   Woertern lang; wer sich unterwegs entscheidet, soll nicht bis ans Ende
   scrollen muessen. */
.sprung-cta{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  margin-top:56px; text-align:center;
}
.sprung-cta p{
  font-size:1.05rem; line-height:1.6;
  color:rgba(var(--ink-rgb),.75);
  max-width:46ch; margin:0;
}
/* Der Header klebt oben; ohne diesen Abstand landet die Ueberschrift des
   Formulars beim Sprung dahinter. Gilt genauso fuer die Stellenliste, die
   von der Teamseite und aus dem Karriere-Hero angesprungen wird. */
#bewerbung,
#offene-stellen{ scroll-margin-top:112px; }

.karriere-form{ max-width:640px; margin:32px auto 0; }
.karriere-form .form-note{ grid-column:1/-1; margin-top:4px; }
.form-field input[type="file"]{
  padding:12px 14px;
  font-size:var(--text-s);
  color:rgba(var(--ink-rgb),.7);
  cursor:pointer;
}
.form-field input[type="file"]::file-selector-button{
  margin-right:14px; padding:8px 16px;
  border-radius:9999px;
  border:1px solid var(--hairline-strong);
  background:transparent; color:var(--ink);
  font-family:inherit; font-size:var(--text-s); font-weight:600; cursor:pointer;
  transition:border-color .25s ease, color .25s ease;
}
.form-field input[type="file"]::file-selector-button:hover{ border-color:var(--primary); color:var(--primary); }

/* ---- Offene Stellen -------------------------------------------------------
   Zwei Bausteine, die sich Karriere-Uebersicht und Stellenseite teilen:
   .stellen-list als Liste der offenen Positionen, .stelle-meta als Zeile der
   Rahmendaten (Standort, Umfang, Start). Bewusst als breite Zeilen statt als
   Kartenraster: bei einer einzelnen offenen Stelle wirkt ein 2-spaltiges
   Raster halbleer, und die Liste waechst ohne Layoutbruch mit. */
.stellen-list{ display:grid; gap:20px; max-width:920px; margin:0 auto; }
.stellen-card{
  display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center;
  padding:30px 34px; border-radius:18px;
  border:1px solid var(--hairline);
  background:rgba(var(--ink-rgb),.04);
  transition:border-color .35s ease, transform .35s ease, background-color .35s ease;
}
.stellen-card:hover{
  border-color:rgba(102,255,255,.4); transform:translateY(-3px);
  background:rgba(var(--ink-rgb),.06);
}
.stellen-card h3{ font-size:clamp(1.3rem,2.1vw,1.6rem); line-height:1.16; margin:0 0 14px; }
.stellen-card p{
  font-size:var(--text-s); line-height:1.6;
  color:rgba(var(--ink-rgb),.76); max-width:60ch; margin:14px 0 0;
}
.stellen-card-actions{ flex:none; }
@media (max-width:760px){
  .stellen-card{ grid-template-columns:1fr; gap:22px; padding:26px 24px; }
}

.stelle-meta{
  display:flex; flex-wrap:wrap; gap:10px;
  list-style:none; padding:0; margin:0;
}
.stelle-meta li{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px; border-radius:9999px;
  border:1px solid var(--hairline-strong);
  background:rgba(var(--ink-rgb),.03);
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:var(--text-s); letter-spacing:.01em;
  color:rgba(var(--ink-rgb),.82);
}
.stelle-meta svg{ width:17px; height:17px; flex:none; color:var(--secondary); }
/* Im Hero der Stellenseite steht die Meta-Zeile zwischen H1 und Vorspann.
   Der Abstand nach oben kommt schon aus dem margin-bottom der H1. */
.page-hero .stelle-meta{ margin:0 0 30px; }
/* Das (m/w/d) gehoert in den Stellentitel, soll ihn aber nicht dominieren.
   max() haelt es in der kleineren H3 der Stellenkarte ueber der 16,8-px-Grenze
   und laesst es in der grossen H1 der Stellenseite mitwachsen. */
.titel-zusatz{
  font-size:max(var(--text-s), .55em);
  font-weight:400; letter-spacing:0; white-space:nowrap;
}

/* ==========================================================================
   Team-Seite
   ========================================================================== */
/* Gemeinsames Foto-Element (als background-image, damit kein direkter Bild-
   Download/Rechtsklick-Speichern moeglich ist). Monochrom, faerbt bei Hover. */
.team-photo{
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  background-color:rgba(var(--ink-rgb),.06);
  filter:grayscale(1) contrast(1.02);
  transition:filter .45s ease;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
  pointer-events:none;
}

/* Geschaeftsfuehrung: groessere Karte + Text daneben */
.team-lead{
  display:grid;
  grid-template-columns:minmax(230px,280px) 1fr;
  gap:52px;
  align-items:start;
}
.team-lead-card{
  display:flex; flex-direction:column;
}
.team-lead-photo{
  aspect-ratio:4/5;
  border-radius:18px;
  border:1px solid var(--hairline);
}
.team-lead-card .name{ font-size:1.5rem; font-weight:600; margin-top:20px; }
.team-lead-card .role{ font-size:var(--text-s); color:var(--primary); margin-top:6px; letter-spacing:.02em; }
.team-lead-card:hover .team-photo{ filter:grayscale(0) contrast(1); }
.team-lead-copy .headline{ margin-bottom:20px; }
.team-lead-copy p{ font-size:var(--text-s); line-height:1.7; color:rgba(var(--ink-rgb),.75); margin-bottom:16px; max-width:56ch; }
.team-lead-copy p:last-child{ margin-bottom:0; }
@media (max-width:820px){
  .team-lead{ grid-template-columns:1fr; gap:32px; }
  .team-lead-card{ max-width:300px; }
  /* Gestapelt zuerst der Text (Eyebrow + Headline + Einleitung), dann das Foto. */
  .team-lead-copy{ order:-1; }
}

/* Nur der Intro-Text breiter (Section-Head bleibt 640px, Ueberschrift 2-zeilig),
   damit der Bodytext zweizeilig umbricht. */
#team-slider .team-intro{ max-width:none; }
@media (min-width:900px){
  #team-slider .team-intro{ margin-inline:-90px; }
}

/* GF- und Team-Sektion gehoeren zusammen -> Abstand dazwischen verringern */
#geschaeftsfuehrung{ padding-bottom:44px; }
#team-slider{ padding-top:16px; }
@media (min-width:1024px){
  #geschaeftsfuehrung{ padding-bottom:56px; }
  #team-slider{ padding-top:24px; }
}

/* Zwei unendlich rollende Reihen */
.team-slider{
  position:relative;
  overflow:hidden;
  padding:14px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.team-slider + .team-slider{ margin-top:8px; }
.team-track{
  display:flex;
  width:max-content;
  gap:24px;
  animation:marqueeScroll 70s linear infinite;
}
.team-track--reverse{ animation-direction:reverse; }
.team-slider:hover .team-track{ animation-play-state:paused; }

.team-card{
  flex:none;
  width:200px;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--hairline);
  background:rgba(var(--ink-rgb),.04);
  transition:border-color .35s ease, transform .35s ease, background-color .35s ease;
}
.team-card .team-photo{
  aspect-ratio:4/5;
  border-radius:12px;
}

/* Puls durchs Team: Alle paar Sekunden nimmt genau eine Karte kurz Farbe an –
   ein Impuls, der durch die beiden Baender wandert. Bewusst KEINE eigene
   Bewegung, sondern derselbe Zustand wie beim Ueberfahren mit der Maus, nur
   zeitgesteuert: Die Section bringt mit zwei laufenden Baendern und dem
   Sparkle-Hintergrund schon genug Bewegung mit. Gesteuert von main.js.
   Ohne translateY – ein Anheben mitten im Lauf laesst das Band unruhig wirken.
   Weicher als der Hover (.8s statt .45s), damit es atmet statt zu blinken. */
.team-card.is-puls{
  border-color:rgba(102,255,255,.28);
  box-shadow:0 0 22px rgba(102,255,255,.13);
  transition:border-color .8s ease, box-shadow .8s ease, background-color .8s ease;
}
.team-card.is-puls .team-photo{
  filter:grayscale(0) contrast(1);
  transition:filter .8s ease;
}

/* Nach der Puls-Regel, damit die Maus immer den staerkeren Zustand setzt. */
.team-card:hover{ border-color:rgba(102,255,255,.4); transform:translateY(-4px); background:rgba(var(--ink-rgb),.07); box-shadow:none; }
.team-card:hover .team-photo{ filter:grayscale(0) contrast(1); transition:filter .45s ease; }

/* Wer Bewegung reduziert hat, bekommt hoechstens die Farbe – keinen Schein. */
@media (prefers-reduced-motion: reduce){
  .team-card.is-puls{ box-shadow:none; }
}
/* Offene Stelle im Band: An zwei Positionen standen bis zum 27.7. Fotos von
   Consultants, die es nicht gibt. Statt ein Overlay darueberzulegen – der
   erfundene Mensch bliebe darunter – steht dort jetzt eine echte Leerstelle,
   die zur Karriereseite fuehrt. Sie behaelt Groesse und Rhythmus der anderen
   Karten, damit das Band nicht stolpert. */
/* Die Einladung gehoert zum Band darueber – deutlich weniger Abstand als die
   180px, die sonst zwischen zwei Abschnitten stehen. Der groessere Teil des
   Abstands sitzt dabei unter dem Slider, nicht ueber der Einladung; deshalb
   muessen beide zurueck. */
#team-slider{ padding-bottom:32px; }
#team-einladung{ padding-top:32px; }

.team-card--offen{ text-decoration:none; color:inherit; }
.team-card--offen .offen-rahmen{
  aspect-ratio:4/5; border-radius:12px;
  border:1px solid rgba(102,255,255,.45);
  background:
    radial-gradient(circle at 30% 25%, rgba(102,255,255,.16), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(201,160,99,.12), transparent 55%),
    rgba(var(--ink-rgb),.05);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  transition:border-color .35s ease;
}
/* Angedeutete Partikeltextur – dieselbe Bildsprache wie die Tiermotive */
.team-card--offen .offen-rahmen::after{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(102,255,255,.5) 1px, transparent 1.4px),
    radial-gradient(rgba(201,160,99,.35) 1px, transparent 1.4px);
  background-size:22px 22px, 34px 34px;
  background-position:0 0, 11px 17px;
  opacity:.5;
}
.team-card--offen .offen-silhouette{ width:62%; opacity:.9; position:relative; z-index:1; }
.team-card--offen .offen-silhouette circle,
.team-card--offen .offen-silhouette path{ fill:none; stroke:var(--primary); stroke-width:1.6; }
.team-card--offen .name{ color:var(--primary); }
/* Die anderen Karten wechseln beim Ueberfahren von Grau auf Farbe. Diese
   erwacht ebenfalls – nur eben als Versprechen statt als Gesicht. */
.team-card--offen:hover .offen-rahmen{ border-color:var(--primary); }
.team-card--offen:hover .offen-rahmen::after{ opacity:.8; }

.team-card .name{ display:block; font-weight:600; font-size:1.05rem; margin-top:14px; }
.team-card .role{ display:block; font-size:var(--text-s); color:rgba(var(--ink-rgb),.6); margin-top:4px; line-height:1.35; }
@media (max-width:520px){
  .team-card{ width:160px; }
}
@media (prefers-reduced-motion: reduce){
  .team-track{ animation:none; }
}

/* ==========================================================================
   Fehlerseite (404)
   ========================================================================== */

/* Der Berg fuellt den Hero und wird nach allen Seiten weich ausgeblendet, damit
   weder die Kacheln darunter noch die Fensterraender an einer harten Kante
   beginnen. Zwei Ebenen wie beim Fahrplan-Abschnitt: der Rahmen blendet nach
   links und rechts aus, das Partikelfeld nach oben und unten. Beides in eine
   Regel zu legen geht nicht – ein Element kennt nur eine Maske.
   opacity:.5 haelt das Motiv hinter der Ueberschrift lesbar. */
/* Der Rahmen hat immer genau das Seitenverhaeltnis des Bergbildes (1584:672):
   volle Hero-Hoehe, Breite daraus abgeleitet, mittig. Auf schmalen Fenstern
   ragt er links und rechts hinaus und wird vom Hero abgeschnitten, auf sehr
   breiten bleibt seitlich Platz – den blendet die Maske weich aus.
   Warum dieser Umweg: Wie stark das Bild gezoomt werden muss, damit es den
   Hero randlos fuellt, haengt vom Seitenverhaeltnis des Heros ab – und das
   aendert sich mit jeder Fensterbreite. Ein fester Zoomwert passte deshalb
   immer nur fuer eine Fenstergroesse: erst standen bei 769px oben und unten
   harte Bildkanten im Hero, mit einer Mindestbreite dann bei 2560px links und
   rechts. Hat der Rahmen dagegen immer die Form des Bildes, deckt ein einziger
   Zoomwert jede Fenstergroesse ab – nachgemessen von 390 bis 2560 Pixel. */
.page-hero--404{ overflow:hidden; }
.page-hero-bg--berg{
  left:50%;
  right:auto;
  width:auto;
  height:100%;
  aspect-ratio:1584/672;
  transform:translateX(-50%);
  opacity:.5;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.page-hero-bg--berg organic-particle-field{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 18%, #000 72%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 18%, #000 72%, transparent 100%);
}
/* Der Grat des Bergs verlaeuft genau hinter der Unterzeile. Ohne den Schatten
   steht grauer Text auf hellen Bildlinien und ist kaum zu lesen. Das Motiv
   weiter abzudunkeln waere die Alternative gewesen – dann verliert es aber
   seine Wirkung, und die soll die Fehlerseite gerade haben. */
.page-hero--404 .eyebrow,
.page-hero--404 h1,
.page-hero--404 .lede{
  text-shadow:0 2px 16px rgba(0,1,1,.9), 0 1px 3px rgba(0,1,1,.7);
}
.page-hero--404 .lede{ color:#dfeceb; }
/* Die Kacheln gehoeren zum Hero darueber und sind kein eigener Abschnitt. */
#wege-zurueck{ padding-top:24px; }
@media (min-width:900px){ #wege-grid{ grid-template-columns:repeat(4,1fr); } }

/* ==========================================================================
   Standort / Villa Buhl  (Seite: /standort-villa)
   ========================================================================== */

/* Hero mit Wireframe-Villa als Hintergrundbild; links stärker abgedunkelt,
   damit die Villa dort transparenter wirkt und der Text klar lesbar bleibt. */
.page-hero-bg--villa{
  background-image:
    linear-gradient(90deg, var(--bg) 14%, rgba(0,1,1,.92) 40%, rgba(0,1,1,.5) 64%, rgba(0,1,1,0) 88%),
    url('/assets/img/villa.png');
  background-repeat:no-repeat;
  background-position:center right;
  background-size:cover;
}
/* Zweite Digit-/Glitzer-Schicht im Villa-Hero, deckungsgleich über dem BG-Bild */
.villa-digits-over{ position:absolute; inset:0; pointer-events:none; }
.villa-digits-over organic-particle-field{ display:block; width:100%; height:100%; }
/* Text im Villa-Hero etwas weiter nach links rücken */
.page-hero--villa .container{ padding-left:24px; }
@media (min-width:1024px){
  .page-hero--villa .container{ padding-left:24px; }
}
@media (max-width:820px){
  .page-hero-bg--villa{
    background-image:
      linear-gradient(180deg, rgba(0,1,1,.55) 0%, rgba(0,1,1,.82) 100%),
      url('/assets/img/villa.png');
    background-position:65% center;
  }
}

/* Kontakt-Karten */
.villa-contact{
  display:grid;
  gap:24px;
  margin-top:8px;
}
@media (min-width:760px){
  .villa-contact{ grid-template-columns:1fr 1fr; }
}
.villa-card{
  display:flex;
  flex-direction:column;
  padding:36px;
  border:1px solid var(--hairline-strong);
  border-radius:16px;
  background:rgba(var(--ink-rgb),.03);
}
.villa-card-label{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:var(--text-s);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:16px;
}
.villa-address{
  font-style:normal;
  font-size:1.4rem;
  line-height:1.5;
  font-weight:500;
  color:var(--ink);
}
.villa-address strong{ font-weight:600; }
.villa-phone{
  font-size:1.7rem;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ink);
  border-bottom:1px solid transparent;
  transition:color .25s ease, border-color .25s ease;
}
.villa-phone:hover{ color:var(--primary); border-color:rgba(102,255,255,.4); }
.villa-card-note{
  font-size:var(--text-s);
  color:rgba(var(--ink-rgb),.55);
  margin-top:12px;
}
.villa-card-actions{ margin-top:auto; padding-top:24px; }
/* Ansprechpartner (Tim Will) in der Kontakt-Karte */
.villa-person{
  display:flex; align-items:center; gap:18px;
  margin-top:auto; padding-top:24px;
  border-top:1px solid var(--hairline);
}
.villa-person-photo{
  width:76px; height:76px; border-radius:50%;
  background-size:cover; background-position:center top;
  border:1px solid rgba(102,255,255,.3);
  flex:none;
}
.villa-person-info{ display:flex; flex-direction:column; }
.villa-person-role{
  font-size:var(--text-s); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--primary); margin-bottom:4px;
}
.villa-person-info strong{ font-size:1.4rem; font-weight:600; color:var(--ink); }
/* Termin-mit-Tim-Button in der Kontakt-Karte */
.villa-person-cta{ margin-top:20px; align-self:flex-start; }
/* Kontaktformular-Button unter beiden Karten */
.villa-contact-cta{ margin-top:28px; }

/* Dekorativer Villa-Wireframe rechts neben der Überschrift; links per Verlauf
   ausgeblendet, damit der Text lesbar bleibt. Liegt hinter Text und Karten. */
#standort-kontakt{ position:relative; overflow:hidden; }
#standort-kontakt .container{ position:relative; z-index:1; }
.standort-deko{
  position:absolute;
  top:50%;
  right:0;
  transform:translateY(-50%);
  width:min(72%, 1060px);
  z-index:0;
  pointer-events:none;
  opacity:.55;
  /* Weiches Ausfaden an allen Rändern (keine harten Kanten): horizontaler und
     vertikaler Verlauf werden verschnitten; links am stärksten, damit der Text
     darüber gut lesbar bleibt. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 5%, #000 44%, #000 84%, transparent 100%),
    linear-gradient(180deg, transparent 3%, #000 22%, #000 78%, transparent 97%);
          mask-image:
    linear-gradient(90deg, transparent 5%, #000 44%, #000 84%, transparent 100%),
    linear-gradient(180deg, transparent 3%, #000 22%, #000 78%, transparent 97%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
.standort-deko img{ display:block; width:100%; height:auto; }
/* Text und Karten über dem Wireframe */
#standort-kontakt .section-head,
#standort-kontakt .villa-contact{ position:relative; z-index:1; }
/* Glassy-/Frosted-Effekt: wo der Wireframe hinter den Karten liegt,
   scheint er milchig-verschwommen durch. */
#standort-kontakt .villa-card{
  background:rgba(var(--ink-rgb),.045);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
          backdrop-filter:blur(16px) saturate(1.2);
}
@media (max-width:820px){
  .standort-deko{ display:none; }
}

/* Villa-Zeitleiste (breitere Jahres-Spalte als der Roadmap-Kreis) */
.villa-timeline{
  position:relative;
  max-width:820px;
  margin:8px auto 0;
  border-left:1px solid var(--hairline-strong);
}
.villa-tl{
  position:relative;
  display:grid;
  grid-template-columns:96px 1fr;
  gap:28px;
  padding:24px 0 24px 34px;
}
.villa-tl::before{
  content:"";
  position:absolute;
  left:-6px;
  top:30px;
  width:11px; height:11px;
  border-radius:50%;
  background:var(--bg);
  border:2px solid var(--primary);
  box-shadow:0 0 12px rgba(102,255,255,.4);
}
.villa-tl .yr{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:1.05rem;
  color:var(--primary);
  padding-top:2px;
}
.villa-tl h3{ font-size:1.15rem; margin:0 0 6px; }
.villa-tl p{ font-size:var(--text-s); line-height:1.6; color:rgba(var(--ink-rgb),.62); margin:0; max-width:60ch; }
@media (max-width:600px){
  .villa-tl{ grid-template-columns:1fr; gap:6px; }
}

/* Architektur-Wireframes (dekorative Villa-Renderings, ohne Beschriftung) */
.villa-wireframes{
  display:grid;
  gap:16px;
  margin-top:8px;
}
@media (min-width:760px){
  .villa-wireframes{ grid-template-columns:repeat(2,1fr); }
}
.villa-wireframes .wf-thumb{
  display:block;
  padding:0;
  margin:0;
  border:1px solid var(--hairline-strong);
  border-radius:14px;
  background:#000;
  overflow:hidden;
  cursor:zoom-in;
  transition:border-color .3s ease;
}
.villa-wireframes .wf-thumb img{
  display:block;
  width:100%;
  height:auto;
  transition:transform .45s ease;
}
.villa-wireframes .wf-thumb:hover{ border-color:rgba(102,255,255,.4); }
.villa-wireframes .wf-thumb:hover img{ transform:scale(1.06); }
.villa-wireframes .wf-thumb:focus-visible{ outline:2px solid var(--primary); outline-offset:3px; }

/* Lightbox: großes Bild beim Klick auf ein Wireframe */
.wf-lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5vw;
  background:rgba(0,1,1,.9);
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
  cursor:zoom-out;
}
.wf-lightbox.is-open{ opacity:1; visibility:visible; }
.wf-lightbox-img{
  max-width:min(1400px, 96vw);
  max-height:90vh;
  width:auto;
  height:auto;
  border:1px solid rgba(102,255,255,.25);
  border-radius:12px;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
  transform:scale(.96);
  transition:transform .3s ease;
}
.wf-lightbox.is-open .wf-lightbox-img{ transform:scale(1); }
.wf-lightbox-close{
  position:absolute;
  top:24px;
  right:28px;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--hairline-strong);
  border-radius:50%;
  background:rgba(var(--ink-rgb),.06);
  color:var(--ink);
  font-size:18px;
  cursor:pointer;
  transition:border-color .25s ease, color .25s ease;
}
.wf-lightbox-close:hover{ border-color:var(--primary); color:var(--primary); }
@media (prefers-reduced-motion: reduce){
  .villa-wireframes .wf-thumb:hover img{ transform:none; }
  .wf-lightbox-img{ transition:none; }
}

.villa-arch-copy{
  max-width:720px;
  margin:48px auto 0;
}
.villa-arch-copy p{
  font-size:1.05rem;
  line-height:1.7;
  color:rgba(var(--ink-rgb),.78);
  margin-bottom:20px;
}

/* Quellen */
.villa-sources{
  max-width:720px;
  margin:56px auto 0;
  padding-top:24px;
  border-top:1px solid var(--hairline);
}
.villa-sources-label{
  display:block;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:var(--text-s);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(var(--ink-rgb),.5);
  margin-bottom:14px;
}
.villa-sources ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.villa-sources li{
  font-size:var(--text-s);
  line-height:1.55;
  color:rgba(var(--ink-rgb),.55);
}
.villa-sources a{ color:var(--accent-light); border-bottom:1px solid transparent; }
.villa-sources a:hover{ color:var(--primary); border-color:rgba(102,255,255,.4); }

/* ==========================================================================
   Vertrauensanker (Über uns) — Zertifizierungs-/Partner-Logos in Karten
   ========================================================================== */
.trust-badge-card{ display:flex; flex-direction:column; text-align:center; align-items:center; }
.trust-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:176px;
  margin-bottom:24px;
}
.trust-badge img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  /* Graue Siegel -> reinweiß, Transparenz bleibt erhalten (freigestellt, keine Kachel) */
  filter:brightness(0) invert(1);
  transition:transform .3s ease;
}
/* Über-uns: nur hier zwei Spalten (2×2), damit die Siegel deutlich größer und
   sehr gut lesbar sind. Andere Seiten nutzen das geteilte .trust-grid weiter 4-spaltig. */
@media (min-width:720px){
  #vertrauen .trust-grid{
    grid-template-columns:repeat(2,1fr);
    max-width:820px;
    margin-inline:auto;
    column-gap:72px;
    row-gap:56px;
  }
}
/* Optische Angleichung: die Logos haben sehr unterschiedliche Seitenverhältnisse.
   Breite Logos (Allianz, Kodex) bekommen weniger Höhe, kompakte (ISO) mehr, damit
   alle vier ähnlich groß/präsent wirken. Reihenfolge: ISO, Allianz, BITMi, Kodex. */
#vertrauen .trust-badge-card:nth-child(1) .trust-badge img{ max-height:168px; }
#vertrauen .trust-badge-card:nth-child(2) .trust-badge img{ max-height:104px; }
#vertrauen .trust-badge-card:nth-child(3) .trust-badge img{ max-height:140px; }
#vertrauen .trust-badge-card:nth-child(4) .trust-badge img{ max-height:124px; }
/* Hover: Siegel vergrößert sich dezent */
.trust-badge-card:hover .trust-badge img{ transform:scale(1.08); }
.trust-badge-card .tagline{ margin-bottom:0; }

/* Mittig gesetzter, aber linksbündiger Fließtext-Block unter zentrierter
   Überschrift (z.B. Mission/Vision auf /ueber-uns) — hebt die schmale
   .lede-Standardbreite auf, damit der Block die volle Lesebreite nutzt. */
.section-copy{ max-width:760px; margin:0 auto; }
.section-copy .lede{ max-width:none; }

/* ==========================================================================
   Rechtstext-Seiten (AGB, Datenschutzerklärung, Impressum) – kein Hero/CTA
   ========================================================================== */
.legal .container{ max-width:880px; }
.legal-title{ font-size:clamp(2rem,4vw,3rem); font-weight:600; margin-bottom:36px; }
.legal-body{ color:rgba(var(--ink-rgb),.82); line-height:1.75; font-size:var(--text-s); }
.legal-body > p,
.legal-body li{ margin-bottom:1.05em; }
.legal-body strong, .legal-body b{ color:var(--ink); font-weight:600; }
.legal-body h2{ font-size:1.5rem; font-weight:600; color:var(--ink); margin:1.8em 0 .6em; }
.legal-body h3{ font-size:1.2rem; font-weight:600; color:var(--ink); margin:1.5em 0 .5em; }
.legal-body a{ color:var(--primary); text-decoration:underline; text-underline-offset:2px; }
.legal-body a:hover{ opacity:.8; }
.legal-body ul,
.legal-body ol{ margin:0 0 1.2em 1.5em; display:flex; flex-direction:column; gap:.6em; }
.legal-body ol{ list-style:decimal; }
.legal-body ul{ list-style:disc; }
.legal-body ol > li{ padding-left:.3em; }
.legal-body ol > li::marker{ color:var(--primary); font-weight:600; }
.legal-body li{ line-height:1.7; }
.legal-body li > ul,
.legal-body li > ol{ margin-top:.6em; }

/* Hervorgehobener Kasten im Rechtstext. Gebraucht wird er fuer das
   Widerspruchsrecht: Art. 21 Abs. 4 DSGVO verlangt, dass darauf "in
   verstaendlicher Form und getrennt von anderen Informationen" hingewiesen
   wird. Vorlagen loesen das mit Versalien – die sind aber schlecht lesbar und
   werden von Screenreadern teils buchstabiert. Ein eigener Kasten erfuellt die
   Anforderung genauso und bleibt lesbar.
   Uebernimmt die Formensprache von .svc-card (gleicher Radius, gleiche
   Haarlinie), verzichtet aber auf den Hover-Effekt – hier klickt niemand. */
.legal-karte{
  border-radius:15px;
  border:1px solid var(--hairline-strong);
  background:rgba(var(--ink-rgb),.05);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  padding:28px 30px;
  margin:2em 0;
}
.legal-karte > p:last-child{ margin-bottom:0; }
/* Die Ueberschrift des Kastens darf etwas kraeftiger sein als die uebrigen. */
.legal-karte > p:first-child b{ font-size:1.05em; }
@media (max-width:640px){ .legal-karte{ padding:22px 20px; } }

/* ==========================================================================
   Cookie-Consent: Banner (Erstbesuch) + Einstellungs-Dialog
   ========================================================================== */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:190;
  padding:20px 24px;
  background:rgba(var(--bg-rgb),.96);
  border-top:1px solid var(--hairline-strong);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transform:translateY(110%); transition:transform .4s cubic-bezier(.19,1,.22,1);
}
.cookie-banner.is-visible{ transform:translateY(0); }
.cookie-banner-inner{
  max-width:var(--container-w); margin:0 auto;
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
}
.cookie-banner-text{ flex:1 1 380px; font-size:var(--text-s); line-height:1.6; color:rgba(var(--ink-rgb),.8); }
.cookie-banner-text a{ color:var(--primary); text-decoration:underline; text-underline-offset:2px; }
.cookie-banner-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* Dialog nutzt .modal-overlay/.modal-dialog; hier nur der Inhalt */
.cookie-intro{ font-size:var(--text-s); line-height:1.65; color:rgba(var(--ink-rgb),.75); margin-bottom:24px; }
.cookie-cats{ display:flex; flex-direction:column; gap:14px; margin-bottom:28px; }
.cookie-cat{
  padding:16px 18px; border:1px solid var(--hairline); border-radius:12px;
  background:rgba(var(--ink-rgb),.03);
}
.cookie-cat-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cookie-cat-info{ display:flex; flex-direction:column; }
.cookie-cat-name{ font-weight:600; font-size:var(--text-s); color:var(--ink); }
.cookie-cat-desc{ font-size:var(--text-s); color:rgba(var(--ink-rgb),.6); margin-top:3px; }
.cookie-always{ font-size:var(--text-s); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--primary); white-space:nowrap; }
.cookie-cat-detail{
  font-size:var(--text-s); line-height:1.6; color:rgba(var(--ink-rgb),.6);
  margin:12px 0 0; padding-top:12px; border-top:1px solid var(--hairline);
}
.cookie-actions{ display:flex; gap:12px; justify-content:flex-end; flex-wrap:wrap; }

/* Toggle-Switch */
.cookie-switch{ position:relative; display:inline-block; width:46px; height:26px; flex:none; }
.cookie-switch input{ position:absolute; opacity:0; width:0; height:0; }
.cookie-slider{
  position:absolute; inset:0; cursor:pointer; border-radius:26px;
  background:rgba(var(--ink-rgb),.12); border:1px solid var(--hairline-strong);
  transition:background .25s ease, border-color .25s ease;
}
.cookie-slider::before{
  content:""; position:absolute; width:18px; height:18px; left:3px; top:3px;
  border-radius:50%; background:rgba(var(--ink-rgb),.7); transition:transform .25s ease, background .25s ease;
}
.cookie-switch input:checked + .cookie-slider{ background:rgba(102,255,255,.22); border-color:var(--primary); }
.cookie-switch input:checked + .cookie-slider::before{ transform:translateX(20px); background:var(--primary); }
.cookie-switch input:focus-visible + .cookie-slider{ outline:2px solid var(--primary); outline-offset:2px; }

@media (max-width:640px){
  .cookie-banner-actions{ width:100%; }
  .cookie-banner-actions .btn{ flex:1 1 auto; }
  .cookie-actions{ justify-content:stretch; }
  .cookie-actions .btn{ flex:1 1 auto; }
}

/* ==========================================================================
   „Unsere Bildsprache" (Über uns): Natur-Analogien
   ========================================================================== */
#bildsprache-intro .container{ position:relative; z-index:1; }
/* Abstände zwischen den Sektionen deutlich verkleinern (Auftakt → Leitbilder → Übersicht) */
#bildsprache-intro{ padding-bottom:clamp(16px,2.5vw,32px); }
#bildsprache-leitbilder{ padding-top:clamp(24px,3.5vw,48px); padding-bottom:clamp(24px,3.5vw,48px); }
#bildsprache-uebersicht{ padding-top:clamp(28px,4vw,52px); }

/* Fünf Leitbilder: alternierende Bild-Text-Zeilen */
.analogy-row{
  position:relative;
  display:flex;
  align-items:center;
  min-height:clamp(340px,42vw,520px);
  margin-bottom:clamp(40px,5vw,80px);
  overflow:hidden;
}
.analogy-row:last-child{ margin-bottom:0; }
/* Bild großflächig im Hintergrund; hinter dem Text via Maske abgeblendet */
.analogy-media{ position:absolute; inset:0; z-index:0; pointer-events:none; }
/* Maske UND Blend liegen zusammen auf dem Feld (wie Nest-/Villa-Hero) */
.analogy-media organic-particle-field{
  display:block; width:100%; height:100%;
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,.14) 0%, rgba(0,0,0,.42) 38%, #000 66%);
          mask-image:linear-gradient(to right, rgba(0,0,0,.14) 0%, rgba(0,0,0,.42) 38%, #000 66%);
}
.analogy-text{ position:relative; z-index:2; width:min(50%,500px); }
/* Reverse: Text rechts, Bild nach rechts hin abgeblendet */
.analogy-row--reverse{ justify-content:flex-end; }
/* Bild-Box ein großes Stück nach links geschoben (Adler, Myzel); die Zeile
   clippt den linken Überstand, damit kein Horizontal-Scroll entsteht. */
.analogy-row--reverse .analogy-media{ transform:translateX(-15%); }
/* Adler noch deutlich weiter links, damit der Kopf frei von der Schrift bleibt */
.analogy-row--shift-far .analogy-media{ transform:translateX(-27%); }
/* Myzel ein kleines Stückchen weiter als der Standard-Reverse-Versatz */
.analogy-row--fade-left .analogy-media{ transform:translateX(-19%); }
.analogy-row--reverse .analogy-media organic-particle-field{
  -webkit-mask-image:linear-gradient(to left, rgba(0,0,0,.14) 0%, rgba(0,0,0,.42) 38%, #000 66%);
          mask-image:linear-gradient(to left, rgba(0,0,0,.14) 0%, rgba(0,0,0,.42) 38%, #000 66%);
}
/* Zusätzlich linke Kante ausblenden (Myzel): Text rechts + weicher Auslauf links */
.analogy-row--fade-left .analogy-media organic-particle-field{
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.08) 24%, #000 46%, #000 54%, rgba(0,0,0,.42) 66%, rgba(0,0,0,.14) 100%);
          mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.08) 24%, #000 46%, #000 54%, rgba(0,0,0,.42) 66%, rgba(0,0,0,.14) 100%);
}
.analogy-kicker{
  display:inline-block; font-size:var(--text-s); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--primary); margin-bottom:12px;
}
.analogy-text h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:600; line-height:1.1; margin-bottom:18px; }
.analogy-text p{ color:rgba(var(--ink-rgb),.72); line-height:1.75; margin-bottom:1em; max-width:54ch; }
.analogy-text p:last-child{ margin-bottom:0; }
.analogy-text strong{ color:var(--ink); font-weight:600; }
@media (max-width:800px){
  .analogy-row{ min-height:clamp(320px,86vw,440px); margin-bottom:56px; }
  .analogy-text{ width:100%; }
  .analogy-media{ opacity:.4; }
  .analogy-media organic-particle-field,
  .analogy-row--reverse .analogy-media organic-particle-field{ -webkit-mask-image:none; mask-image:none; }
}
/* Bildsprache-Leitbilder mobil: Tier als sichtbares Band OBEN, Text darunter
   (statt blasses Bild hinter dem Text). Nur < 768px, Desktop unangetastet. */
@media (max-width:768px){
  #bildsprache-leitbilder .analogy-row{
    display:flex; flex-direction:column; min-height:0;
    margin-bottom:48px; overflow:hidden;
  }
  #bildsprache-leitbilder .analogy-media{
    position:relative; inset:auto; order:-1;
    width:100%; height:340px; opacity:1;
    transform:none; margin-bottom:20px; overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 74%,transparent 100%);
  }
  #bildsprache-leitbilder .analogy-text{ width:100%; }
  #bildsprache-leitbilder .analogy-media organic-particle-field{
    -webkit-mask-image:none; mask-image:none;
  }
  /* Baum (1. Modul): wie auf der Home als GROSSES, rechts positioniertes Feld
     (rechte Bildhaelfte: Stamm + Wurzeln gross, Krone weht links raus).
     Bottom-Fade fast weg, damit Stamm/Wurzeln voll sichtbar bleiben. */
  /* Baum (1. Modul): Box an die Bildhoehe angepasst – bei 440px blieb ober-
     und unterhalb viel Leerraum, wodurch der Baum klein wirkte und weit vom
     Text abstand. Kein Bottom-Fade, damit Stamm und Wurzeln voll sichtbar sind. */
  #bildsprache-leitbilder .analogy-row:first-child .analogy-media{
    height:265px;
    margin-bottom:10px;
    -webkit-mask-image:none; mask-image:none;
  }
  /* Das Feld fuellt die Box; der Ausschnitt steckt im zugeschnittenen Bild
     (tree-circuit-mobil.png). Vorher war das Feld 300% breit und nach rechts
     geschoben – dadurch lag der Stamm ausserhalb des sichtbaren Bereichs. */
  #bildsprache-leitbilder .analogy-row:first-child .analogy-media organic-particle-field{
    position:absolute; inset:0;
    width:100%; height:100%;
  }
}

/* Übersicht: Motiv-Karten */
.analogy-overview{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media (min-width:960px){ .analogy-overview{ grid-template-columns:repeat(3,1fr); } }
.analogy-card{
  position:relative; padding:24px 24px 26px;
  border:1px solid var(--hairline); border-radius:15px;
  background:rgba(var(--ink-rgb),.03);
  overflow:hidden; transition:border-color .35s ease, transform .35s ease;
}
.analogy-card:hover{ border-color:var(--primary); transform:translateY(-4px); }
.analogy-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--ink-rgb),.5), transparent);
}
.analogy-card-media{ height:150px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.analogy-card-media img{ max-width:100%; max-height:100%; object-fit:contain; }
.analogy-card-tag{
  display:inline-block; font-size:var(--text-s); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--primary); margin-bottom:8px;
}
.analogy-card h3{ font-size:1.2rem; font-weight:600; margin-bottom:10px; line-height:1.2; }
.analogy-card p{ font-size:var(--text-s); color:rgba(var(--ink-rgb),.62); line-height:1.65; }
/* Mobil: einzelne, zu klein wirkende Motive im Karten-Raster heranzoomen.
   overflow:hidden clippt sauber in der 150px-Box (Layout bleibt stabil). */
@media (max-width:768px){
  .analogy-card-media{ overflow:hidden; }
  .analogy-card-media img[src*="nautilus"],
  .analogy-card-media img[src*="biene"],
  .analogy-card-media img[src*="keimling"],
  .analogy-card-media img[src*="spinnennetz"],
  .analogy-card-media img[src*="zugvogel"]{ transform:scale(1.3); }
}