/* ==========================================================================
   NJS Sicherheitsdienst & Servicetätigkeiten UG — Stylesheet
   Farbwelt: Schwarz / Anthrazit / Grau + Mint-Akzent (aus dem Logo)
   Karten sind durchscheinend und farbneutral; das Wabenraster bleibt sichtbar.
   ========================================================================== */

:root {
  /* --- Dunkelmodus (Standard) --------------------------------------- */

  /* Flächen — von dunkel nach hell gestaffelt */
  --c-black:      #07090B;
  --c-base:       #0B0E11;   /* Seitenhintergrund */
  --c-band:       #0F1317;   /* abgesetzte Sektionsbänder */
  /* Karten sind durchscheinend und bewusst FARBNEUTRAL: reines Weiss mit
     kleiner Deckung, kein Mintanteil. Dadurch bleibt das Wabenraster
     darunter sichtbar, ohne dass die Flaeche einen Stich bekommt. */
  --c-card:       rgba(255, 255, 255, .045);
  --c-card-hover: rgba(255, 255, 255, .085);
  /* Deckende Variante fuer alles, was ueber dem Inhalt schwebt */
  --c-card-fest:  #161B21;
  --c-line:       #262E36;   /* Trennlinien innerhalb von Flaechen */
  --c-line-soft:  #1B2127;

  /* Aussenkante der Kacheln — dezent tuerkis statt neutralgrau.
     Bewusst als Alpha-Wert: so bleibt der Ton auf jeder Flaeche stimmig,
     ob Karte, Band oder Schwarz. */
  --c-rand:       rgba(22, 217, 198, .22);
  --c-rand-hover: rgba(22, 217, 198, .45);

  /* Akzent. Zwei Rollen, die im Hellmodus auseinanderlaufen:
     --c-mint ist die FLAECHE (Schaltflaechen, Marker) und bleibt in beiden
     Modi derselbe Ton. --c-akzent ist die SCHRIFTFARBE und muss auf hellem
     Grund deutlich dunkler werden, sonst ist sie nicht mehr lesbar. */
  --c-mint:       #16D9C6;
  --c-akzent:     #16D9C6;
  --c-mint-hell:  #2BE7D5;   /* Flaeche beim Ueberfahren */
  --c-mint-deep:  #0AA595;
  --c-mint-dark:  #073B36;   /* Traegerflaeche hinter Symbolen */
  --c-auf-mint:   #06231F;   /* Schrift auf Mintflaechen */

  /* Text */
  --c-text:       #E8EEF3;
  --c-text-2:     #AEBAC5;
  --c-muted:      #7E8B97;

  /* Formular */
  --c-feld:       var(--c-black);
  --c-feld-fokus: #0A0D10;
  --c-ok-text:      #B4F5EC;
  --c-fehl-flaeche: #351A1A;
  --c-fehl-rand:    #7A3A3A;
  --c-fehl-text:    #F3C7C7;

  /* Wabenraster und Silhouette */
  --waben: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='90'%20height='52'%20viewBox='0%200%2090%2052'><path%20d='M30,0%2015,26%20-15,26%20-30,0%20-15,-26%2015,-26ZM30,52%2015,78%20-15,78%20-30,52%20-15,26%2015,26ZM120,0%20105,26%2075,26%2060,0%2075,-26%20105,-26ZM120,52%20105,78%2075,78%2060,52%2075,26%20105,26ZM75,26%2060,52%2030,52%2015,26%2030,0%2060,0ZM75,-26%2060,0%2030,0%2015,-26%2030,-52%2060,-52ZM75,78%2060,104%2030,104%2015,78%2030,52%2060,52Z'%20fill='none'%20stroke='%2316D9C6'%20stroke-opacity='.075'%20stroke-width='1'/></svg>");
  --skyline-deckung: .32;
  --mosaik-farbe: #16D9C6;
  --feld-pfeil: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%208'><path%20fill='%2316D9C6'%20d='M1.4%200%206%204.6%2010.6%200%2012%201.4%206%207.4%200%201.4z'/></svg>");

  /* Einheitliche Hoehe fuer alles Drueckbare: Schaltflaechen, Menuetaste,
     Themenumschalter, Nach-oben-Knopf. */
  --knopf-hoehe: 48px;

  /* Weichzeichnung des Untergrunds hinter den durchscheinenden Flaechen.
     Bewusst klein: Bei der Wabenkachel von 90 px verschmiert schon ab etwa
     10 px das ganze Muster zu einer glatten Flaeche, und die Karten wirken
     wie dunkle Loecher statt wie Glas. Bei 5 px bleiben die Sechsecke
     erkennbar, wirken aber sichtbar weicher als daneben. Die Ailis-App
     arbeitet mit 2 px; 3 px passt hier zur groesseren Wabenkachel. */
  --glas: 3px;
  /* Lichtkant innen an der Oberkante — daraus entsteht der Glaseindruck */
  --glanz: inset 0 1px 1px rgba(255, 255, 255, .10);

  --radius:    14px;
  --radius-sm: 10px;
  --wrap:      1180px;
  --gutter:    clamp(20px, 5vw, 40px);

  --shadow:    0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.42);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 28px 60px rgba(0,0,0,.55);
  --schatten-kopf: 0 8px 30px rgba(0,0,0,.55);

  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: dark;
}

/* ==========================================================================
   Hellmodus — Vorder- und Hintergrund getauscht.

   Der Seitengrund uebernimmt die alte Schriftfarbe, die Schrift den alten
   Seitengrund. Das Mint wandert von der Linie auf die Flaeche: Die Waben
   liegen jetzt dunkel auf mintgetoenten Flaechen statt mint auf Schwarz.

   Eine Rolle laesst sich nicht spiegeln — Mint als Schriftfarbe. Auf Weiss
   kaeme #16D9C6 auf 1,7:1 und waere unlesbar; dafuer gibt es --c-akzent.
   Das Logo selbst bleibt unveraendert und bekommt eine dunkle Traegerflaeche,
   weil seine silbernen Buchstaben sonst auf Hell verschwinden.
   ========================================================================== */

[data-theme="hell"] {
  /* Flächen — mintgetoent, von hell nach dunkler gestaffelt */
  --c-black:      #FFFFFF;
  --c-base:       #F1F7F6;
  --c-band:       #E4F1EF;
  --c-card:       rgba(255, 255, 255, .62);
  --c-card-hover: rgba(255, 255, 255, .86);
  --c-card-fest:  #FFFFFF;
  --c-line:       #CBD8D6;
  --c-line-soft:  #DCE8E6;

  --c-rand:       rgba(6, 120, 108, .26);
  --c-rand-hover: rgba(6, 120, 108, .55);

  --c-mint:       #16D9C6;   /* Flaeche bleibt der Markenton */
  --c-akzent:     #06786C;   /* Schrift: abgedunkelt fuer Lesbarkeit */
  --c-mint-hell:  #10BFAE;
  --c-mint-deep:  #06786C;
  --c-mint-dark:  #D2F3EF;   /* helle Traegerflaeche hinter Symbolen */
  --c-auf-mint:   #04211C;

  /* Getauscht: Text traegt jetzt den alten Seitengrund */
  --c-text:       #0B0E11;
  --c-text-2:     #3C4850;
  --c-muted:      #5F6D77;

  --c-feld:       #FFFFFF;
  --c-feld-fokus: #FFFFFF;
  --c-ok-text:      #044F46;
  --c-fehl-flaeche: #FDECEC;
  --c-fehl-rand:    #DFA3A3;
  --c-fehl-text:    #8A1F1F;

  /* Waben jetzt dunkel auf heller Flaeche statt mint auf dunkler */
  --waben: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='90'%20height='52'%20viewBox='0%200%2090%2052'><path%20d='M30,0%2015,26%20-15,26%20-30,0%20-15,-26%2015,-26ZM30,52%2015,78%20-15,78%20-30,52%20-15,26%2015,26ZM120,0%20105,26%2075,26%2060,0%2075,-26%20105,-26ZM120,52%20105,78%2075,78%2060,52%2075,26%20105,26ZM75,26%2060,52%2030,52%2015,26%2030,0%2060,0ZM75,-26%2060,0%2030,0%2015,-26%2030,-52%2060,-52ZM75,78%2060,104%2030,104%2015,78%2030,52%2060,52Z'%20fill='none'%20stroke='%230B0E11'%20stroke-opacity='.07'%20stroke-width='1'/></svg>");
  --skyline-deckung: .40;
  --mosaik-farbe: #0B0E11;
  --feld-pfeil: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%208'><path%20fill='%2306786C'%20d='M1.4%200%206%204.6%2010.6%200%2012%201.4%206%207.4%200%201.4z'/></svg>");

  /* Auf hellem Grund deckt die Karte mit 62 % schon viel ab — zusaetzliche
     Weichzeichnung verschluckt den Rest vom Muster und der Glaseindruck geht
     verloren. Deshalb hier weniger Blur als im Dunkelmodus. */
  --glas:      1.5px;
  --glanz:     inset 0 1px 1px rgba(255, 255, 255, .55);
  --shadow:    0 1px 2px rgba(11, 40, 37, .06), 0 12px 32px rgba(11, 40, 37, .09);
  --shadow-lg: 0 2px 4px rgba(11, 40, 37, .07), 0 28px 60px rgba(11, 40, 37, .13);
  --schatten-kopf: 0 8px 30px rgba(11, 40, 37, .12);

  color-scheme: light;
}

/* --------------------------------------------------------------- Reset -- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-base);
  color: var(--c-text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* <picture> erzeugt keine eigene Box, damit die Regeln fuer img (Hoehe,
   Ausrichtung im Flex-Layout) unveraendert greifen. */
picture { display: contents; }
a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -.022em;
  font-weight: 700;
}

p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--c-mint);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--c-mint); color: var(--c-auf-mint); }

/* ------------------------------------------------------------- Layout -- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(72px, 10vw, 128px); }
.section--band { background: var(--c-band); border-block: 1px solid var(--c-line-soft); }
.section--black { background: var(--c-black); border-block: 1px solid var(--c-line-soft); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--c-mint);
  color: var(--c-auf-mint);
  padding: 12px 20px;
  font-weight: 700;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------- Typo-Bausteine -- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-akzent);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--c-mint);
  flex: none;
}

.section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head h2 { font-size: clamp(30px, 4.4vw, 46px); }
.section-head p {
  margin-top: 18px;
  color: var(--c-text-2);
  font-size: clamp(16.5px, 1.7vw, 19px);
}

.lead { color: var(--c-text-2); font-size: clamp(17px, 1.9vw, 20px); }

/* Abstaende ueber Nachbarschaftsselektoren statt style-Attributen im Markup —
   so bleibt die Content-Security-Policy ohne 'unsafe-inline' auskommen. */
h2 + .lead { margin-top: 18px; }
.lead + .btn-row { margin-top: 30px; }
.area__list + p { margin-top: 18px; color: var(--c-muted); font-size: 15px; }
.btn--block { width: 100%; }
.footer__bottom--nackt { border-top: 0; padding-top: 0; }

/* -------------------------------------------------------------- Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* Feste Hoehe statt senkrechtem Polster — nur so sind alle Schaltflaechen
     gleich hoch, unabhaengig von Schriftgrad und Zeilenzahl. */
  height: var(--knopf-hoehe);
  padding: 0 26px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              transform .2s var(--ease), color .2s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary {
  background: var(--c-mint);
  color: var(--c-auf-mint);
  box-shadow: 0 8px 24px rgba(22, 217, 198, .18);
}
.btn--primary:hover { background: var(--c-mint-hell); transform: translateY(-2px); }

.btn--ghost {
  background: var(--c-card);
  color: var(--c-text);
  border-color: var(--c-rand);
}
.btn--ghost:hover { background: var(--c-card-hover); border-color: var(--c-rand-hover); transform: translateY(-2px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* --------------------------------------------------------------- Header */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-black);
  border-bottom: 1px solid var(--c-line-soft);
  transition: box-shadow .25s var(--ease);
}
.header.is-stuck { box-shadow: var(--schatten-kopf); }

.header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 76px;
}

.brand {
  display: flex;
  align-items: center;
  /* Der dunkle Hof liegt absolut und zaehlt nicht zur Breite — ohne Zuschlag
     ruecken Kasten und Schriftzug im Hellmodus auf 2 px zusammen. */
  gap: 12px;
  text-decoration: none;
  margin-right: auto;
  flex: none;
}
/* Zwei Logofassungen — je Modus eine, gezeichnet fuer ihren Untergrund.
   Dadurch entfaellt die dunkle Traegerflaeche samt Hof und Auslauf, die
   vorher noetig war: Die silbernen Buchstaben der alten Fassung waren auf
   hellem Grund nicht mehr zu sehen.

   Angesprochen wird ueber die Klasse .logo, nicht ueber den Elementtyp —
   in der Einzeldatei-Vorschau wird aus dem <picture> ein <img>, und die
   Umschaltung soll dort genauso greifen.

   inline-flex schrumpft exakt auf das Bild und erzeugt keinen
   Grundlinienabstand, der die Huelle sonst hoeher macht als das Logo. */
.brand .logo,
.footer__brand .logo {
  display: inline-flex;
  line-height: 0;
}

/* Im Hero traegt die HUELLE das Breitenmass, nicht das Bild. Andersherum
   bezoege sich das Prozentmass des Bildes auf eine Huelle, deren Breite
   ihrerseits vom Bild abhinge — sie fiel dadurch auf die Naturbreite zurueck. */
.hero__visual .logo { display: block; width: min(100%, 400px); }
.hero__visual .logo img { width: 100%; height: auto; }

/* Umschaltung: die dunkle Fassung ist der Standard */
.brand .logo--hell,
.footer__brand .logo--hell,
.hero__visual .logo--hell { display: none; }

[data-theme="hell"] .brand .logo--dunkel,
[data-theme="hell"] .footer__brand .logo--dunkel,
[data-theme="hell"] .hero__visual .logo--dunkel { display: none; }

[data-theme="hell"] .brand .logo--hell,
[data-theme="hell"] .footer__brand .logo--hell { display: inline-flex; }
[data-theme="hell"] .hero__visual .logo--hell { display: block; }

.brand img { height: 36px; width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-weight: 800; font-size: 17px; letter-spacing: .01em; }
.brand__sub {
  font-size: 10.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--c-akzent);
  font-weight: 700;
}

.nav { display: flex; align-items: center; gap: 4px; }
/* In der Kopfzeile nie umbrechen — die Schaltflaechen werden lieber breiter
   als zweizeilig. Gilt bewusst nur hier: die Buttons im Inhalt duerfen auf
   schmalen Bildschirmen umbrechen, sonst laufen sie aus der Spalte. */
.header .nav a,
.header .btn { white-space: nowrap; }
/* :not(.btn) — sonst ueberschreibt die hoehere Spezifitaet von .nav a
   die Button-Farben und der CTA im Menue wird unlesbar. */
.nav a:not(.btn) {
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--c-text-2);
  text-decoration: none;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav a:not(.btn):hover { color: var(--c-text); background: var(--c-card); }

.header__cta { display: flex; align-items: center; gap: 12px; flex: none; }
.header__cta .btn { padding: 0 20px; font-size: 15px; }

/* Umschalter Hell/Dunkel — gleiche Anmutung wie die Menuetaste */
.theme-toggle {
  display: inline-flex;
  width: var(--knopf-hoehe);
  height: var(--knopf-hoehe);
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--c-card);
  border: 1px solid var(--c-rand);
  border-radius: var(--radius-sm);
  color: var(--c-text-2);
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease),
              background .18s var(--ease);
}
.theme-toggle:hover { color: var(--c-akzent); border-color: var(--c-rand-hover); }
.theme-toggle svg { width: 21px; height: 21px; }
/* Sonne im Dunkelmodus (fuehrt ins Helle), Mond im Hellmodus */
.theme-toggle .icon-mond { display: none; }
[data-theme="hell"] .theme-toggle .icon-mond { display: block; }
[data-theme="hell"] .theme-toggle .icon-sonne { display: none; }

.nav-toggle {
  display: none;
  width: var(--knopf-hoehe);
  height: var(--knopf-hoehe);
  align-items: center;
  justify-content: center;
  background: var(--c-card);
  border: 1px solid var(--c-rand);
  border-radius: var(--radius-sm);
  color: var(--c-text);
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }

/* ----------------------------------------------------------------- Hero */

.hero {
  position: relative;
  background: var(--c-black);
  border-bottom: 1px solid var(--c-line-soft);
  overflow: hidden;
}

/* Wortmosaik im Hero — Stil uebernommen aus der 34a-KIC-App:
   lueckenlos, jede Zeile fuellt die Breite exakt aus, die Schriftgroesse folgt
   aus der Belegung (ein langes Wort allein wird gross, vier kurze werden klein).
   Drei Stile bei sehr kleiner Deckkraft: Kontur, Flaeche, leicht.

   Unterschied zur Vorlage: Die Textbreiten stehen dort als gemessene Tabelle im
   Generator und gelten nur fuer eine Schrift. Hier werden sie zur Laufzeit per
   Canvas measureText ermittelt, damit die Zeilen auch bei abweichender
   Systemschrift exakt aufgehen.

   Die Begriffe verschwinden nicht, sie werden nur heller und wieder dunkler —
   vollstaendiges Ausblenden wuerde Loecher in ein Mosaik reissen, das gerade
   von seiner Lueckenlosigkeit lebt.

   Reine Dekoration: per Skript erzeugt und aria-hidden, damit die Aufzaehlung
   loser Substantive nicht als Seiteninhalt indexiert wird. */
.wortmosaik {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.wortmosaik svg { display: block; width: 100%; height: 100%; }
/* Animiert wird die ZEILE, nicht das einzelne Wort. Nur so bleibt der Satz
   lueckenlos: Wuerden Woerter einzeln verschwinden, riss jedes davon ein Loch
   in seine Zeile. Im unsichtbaren Abschnitt holt sich die Zeile neue Begriffe
   und setzt sie neu. */
.wortmosaik g[data-zeile] {
  opacity: 0;
  animation: mosaik-auftauchen var(--d) ease-in-out var(--v) infinite;
}

@keyframes mosaik-auftauchen {
  0%        { opacity: 0; }
  12%, 52%  { opacity: 1; }
  68%, 100% { opacity: 0; }
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  padding-block: clamp(72px, 11vw, 136px);
}

.hero h1 {
  font-size: clamp(38px, 6.4vw, 70px);
  letter-spacing: -.032em;
}
/* Schlagwort in Ueberschriften farbig absetzen */
.accent { color: var(--c-akzent); }
/* Im Hero steht der Akzent bewusst auf eigener Zeile */
.hero h1 .accent { display: block; }
.hero__sub {
  margin-top: 26px;
  max-width: 58ch;
  color: var(--c-text-2);
  font-size: clamp(17px, 1.9vw, 20px);
}
.hero .btn-row { margin-top: 38px; }

.hero__visual { display: flex; justify-content: center; }
/* Breite steht an der Huelle (siehe oben), hier nur noch der Schlagschatten */
.hero__visual img {
  height: auto;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,.7));
}

/* Vertrauensleiste unter dem Hero */
.trustbar {
  position: relative;
  border-top: 1px solid var(--c-line-soft);
  background: var(--c-base);
}
.trustbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.trustbar li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 26px;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text-2);
  border-left: 1px solid var(--c-line-soft);
}
.trustbar li:first-child { border-left: 0; }
.trustbar svg { width: 21px; height: 21px; color: var(--c-akzent); flex: none; }

/* ---------------------------------------------------------------- Karten */

.card {
  background: var(--c-card);            /* durchscheinend, farbneutral */
  border: 1px solid var(--c-rand);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow);
  transition: background .22s var(--ease), border-color .22s var(--ease),
              transform .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover {
  background: var(--c-card-hover);
  border-color: var(--c-rand-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--c-mint-dark);
  border: 1px solid rgba(22, 217, 198, .28);
  color: var(--c-akzent);
  margin-bottom: 22px;
}
.card__icon svg { width: 26px; height: 26px; }

.card h3 { font-size: 21px; margin-bottom: 12px; }
.card p { color: var(--c-text-2); font-size: 16px; }

.card__list {
  list-style: none;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--c-line-soft);
  display: grid;
  gap: 9px;
}
.card__list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: var(--c-muted);
}
.card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--c-mint);
}

.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* --------------------------------------------------------- Warum / USP */

.usp { text-align: left; }
.usp__num {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--c-akzent);
  margin-bottom: 16px;
}

/* Chefsache-Block */
.owner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
  background: var(--c-card);
  border: 1px solid var(--c-rand);
  border-left: 3px solid var(--c-mint);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 44px);
  margin-top: 24px;
  box-shadow: var(--shadow);
}
.owner__badge {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-mint-dark);
  border: 1px solid rgba(22, 217, 198, .3);
  color: var(--c-akzent);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .02em;
  flex: none;
}
.owner h3 { font-size: 23px; margin-bottom: 12px; }
.owner p { color: var(--c-text-2); }
.owner__role {
  display: block;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-akzent);
}

/* -------------------------------------------------------------- Ablauf */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; }
.step { position: relative; }
.step__no {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--c-mint);
  color: var(--c-auf-mint);
  font-weight: 800;
  font-size: 19px;
  margin-bottom: 20px;
}

/* ------------------------------------------------------- Einsatzgebiet */

.area { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 60px); align-items: start; }
.area__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.area__list li {
  background: var(--c-card);
  border: 1px solid var(--c-rand);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text-2);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.area__list li:hover { border-color: var(--c-mint-deep); color: var(--c-text); }

/* -------------------------------------------------------------- Skyline */
/* Stilisierte Dortmunder Silhouette am Fuss des Einsatzgebiets. Sitzt
   buendig auf der Sektionskante — die Linie darunter wirkt als Boden. */

.section--skyline { padding-bottom: 0; }

.skyline {
  margin-top: clamp(44px, 6vw, 80px);
  color: var(--c-akzent);
  opacity: var(--skyline-deckung);
  pointer-events: none;
}
.skyline svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 700px) {
  /* Auf schmalen Schirmen wird die Silhouette sonst zur Strichlinie */
  .skyline { opacity: calc(var(--skyline-deckung) * .8); }
  .skyline svg { width: 150%; margin-left: -25%; }
}

/* ----------------------------------------------------------------- FAQ */

.faq { display: grid; gap: 12px; max-width: 900px; }
.faq details {
  background: var(--c-card);
  border: 1px solid var(--c-rand);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s var(--ease);
}
.faq details[open] { border-color: var(--c-mint-deep); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  cursor: pointer;
  font-size: 17.5px;
  font-weight: 700;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  border-right: 2.5px solid var(--c-akzent);
  border-bottom: 2.5px solid var(--c-akzent);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq summary:hover { background: var(--c-card-hover); }
.faq__body { padding: 0 26px 24px; color: var(--c-text-2); font-size: 16.5px; }

/* ------------------------------------------------------------- Kontakt */

.contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 56px); align-items: start; }

.contact__direct { display: grid; gap: 14px; margin-top: 32px; }
.contact__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--c-card);
  border: 1px solid var(--c-rand);
  border-radius: var(--radius);
  padding: 20px 22px;
  text-decoration: none;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
a.contact__item:hover { background: var(--c-card-hover); border-color: var(--c-mint-deep); }
.contact__item svg { width: 22px; height: 22px; color: var(--c-akzent); flex: none; margin-top: 3px; }
.contact__label {
  display: block;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 700;
  margin-bottom: 3px;
}
.contact__value { font-weight: 700; font-size: 17px; }
.contact__value span { display: block; font-weight: 500; font-size: 15.5px; color: var(--c-text-2); }

/* Formular */
.form {
  background: var(--c-card);
  border: 1px solid var(--c-rand);
  border-radius: var(--radius);
  padding: clamp(26px, 4vw, 38px);
  box-shadow: var(--shadow);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: block; margin-bottom: 18px; }
.field > span {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--c-text-2);
}
.field .req { color: var(--c-akzent); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--c-feld);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  color: var(--c-text);
  font: inherit;
  font-size: 16px;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field select {
  appearance: none;
  background-image: var(--feld-pfeil);
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px;
  padding-right: 40px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-mint);
  background: var(--c-feld-fokus);
}
.field input::placeholder, .field textarea::placeholder { color: var(--c-muted); }

.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--c-text-2);
  margin-bottom: 22px;
}
.consent input {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--c-mint);
}
.consent a { color: var(--c-akzent); }

/* Honeypot – für Menschen unsichtbar */
.hp {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.form__note { margin-top: 16px; font-size: 13.5px; color: var(--c-muted); }
.form__status { margin-top: 18px; padding: 15px 18px; border-radius: var(--radius-sm); font-size: 15.5px; display: none; }
.form__status.is-ok  { display: block; background: var(--c-mint-dark); border: 1px solid var(--c-mint-deep); color: var(--c-ok-text); }
.form__status.is-err { display: block; background: var(--c-fehl-flaeche); border: 1px solid var(--c-fehl-rand); color: var(--c-fehl-text); }

/* ------------------------------------------------------------- Karte -- */
/* Zwei-Klick-Loesung: Solange keine Einwilligung vorliegt, steht hier eine
   rein oertliche Vorschau. Erst danach wird der Rahmen von Google geladen. */

.karte {
  margin-top: clamp(30px, 4vw, 48px);
  border: 1px solid var(--c-rand);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-card);
}

.karte__platzhalter {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 14px;
  padding: clamp(30px, 6vw, 52px) 26px;
  min-height: 260px;
  overflow: hidden;
  background-color: var(--c-black);
}

/* Dasselbe Wortmosaik wie im Hero, nur feiner. Die Regel .karte__platzhalter > *
   weiter unten setzt sonst auch die Huelle auf position: relative — sie wuerde
   dann als Gitterzeile mitzaehlen und den Kasten aufblaehen. */
.karte__platzhalter > .wortmosaik { position: absolute; z-index: 0; }
.karte__platzhalter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 260px at 50% 44%, rgba(22,217,198,.10), transparent 70%);
  pointer-events: none;
}
.karte__nadel { width: 40px; height: 40px; color: var(--c-akzent); position: relative; }
.karte__platzhalter > * { position: relative; z-index: 1; }
.karte__platzhalter h3 { font-size: 19px; }
.karte__platzhalter p { color: var(--c-text-2); font-size: 15.5px; max-width: 46ch; }
.karte__hinweis { color: var(--c-muted); font-size: 13.5px; max-width: 52ch; }
.karte__hinweis a { color: var(--c-akzent); }

.karte__rahmen { position: relative; aspect-ratio: 16 / 10; }
.karte__rahmen iframe { width: 100%; height: 100%; border: 0; display: block; }

.karte__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-top: 1px solid var(--c-line);
  font-size: 14px;
  color: var(--c-muted);
}
.karte__fuss a { color: var(--c-akzent); }
.karte__fuss button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--c-akzent);
  text-decoration: underline;
  cursor: pointer;
}

/* --------------------------------------------------- Nach oben ------- */
/* Freischwebend statt in der Kopfzeile: dort ist die Breite bis 1180 px
   bereits ausgereizt, ein weiteres Element wuerde den Umbruch zurueckbringen.
   Erscheint erst, wenn wirklich gescrollt wurde. */

.nach-oben {
  position: fixed;
  right: clamp(16px, 3vw, 30px);
  bottom: clamp(16px, 3vw, 30px);
  z-index: 90;
  width: var(--knopf-hoehe);
  height: var(--knopf-hoehe);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--c-mint);
  color: var(--c-auf-mint);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(22,217,198,.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s var(--ease), transform .25s var(--ease),
              visibility .25s var(--ease), background .2s var(--ease);
}
.nach-oben.is-sichtbar { opacity: 1; visibility: visible; transform: none; }
.nach-oben:hover { background: var(--c-mint-hell); }
.nach-oben svg { width: 22px; height: 22px; }

/* Solange der Einwilligungsbanner offen ist, tritt der Knopf zurueck */
.nach-oben.is-verdeckt { opacity: 0; visibility: hidden; }

/* ---------------------------------------------------- Einwilligung ---- */

.consent-banner {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: clamp(12px, 3vw, 24px);
  transform: translateX(-50%);
  width: min(100% - 24px, 720px);
  background: var(--c-card-fest);
  border: 1px solid var(--c-rand);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0,0,0,.7);
  padding: clamp(22px, 3.4vw, 28px);
}
.consent-banner[hidden] { display: none; }
.consent-banner h2 { font-size: 19px; margin-bottom: 10px; }
.consent-banner p { color: var(--c-text-2); font-size: 15px; }
.consent-banner p + p { margin-top: 10px; }
.consent-banner a { color: var(--c-akzent); }

.consent-banner__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
/* Beide Schaltflaechen bewusst gleich gewichtet — Ablehnen darf nicht
   schwerer zu finden sein als Zustimmen. */
.consent-banner__aktionen .btn { flex: 1 1 200px; }
.consent-banner__rechtliches { margin-top: 16px; font-size: 13.5px; color: var(--c-muted); }

/* ------------------------------------------------------------------ CTA */

.cta-band {
  background: var(--c-card);
  border: 1px solid var(--c-rand);
  border-radius: var(--radius);
  padding: clamp(34px, 5vw, 56px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  box-shadow: var(--shadow-lg);
}
.cta-band h2 { font-size: clamp(24px, 3.2vw, 34px); }
.cta-band p { margin-top: 12px; color: var(--c-text-2); }

/* --------------------------------------------------------------- Footer */

.footer { background: var(--c-black); border-top: 1px solid var(--c-line-soft); padding-block: 60px 32px; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
/* Abstand an der Huelle, nicht am Bild — sonst zaehlt er zur Huellenhoehe und
   der dunkle Hof reicht 18 px zu weit nach unten. */
.footer__brand img { height: 56px; width: auto; }
.footer__brand picture { margin-bottom: 18px; }
.footer__brand p { color: var(--c-muted); font-size: 15px; max-width: 40ch; }
.footer h4 {
  font-size: 12.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-akzent);
  margin-bottom: 18px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer a { color: var(--c-text-2); text-decoration: none; font-size: 15.5px; }
.footer a:hover { color: var(--c-akzent); }
.footer__bottom {
  border-top: 1px solid var(--c-line-soft);
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  justify-content: space-between;
  font-size: 14px;
  color: var(--c-muted);
}
.footer__legal { display: flex; gap: 22px; flex-wrap: wrap; }

/* -------------------------------------------------------- Rechtsseiten */

.legal { padding-block: clamp(48px, 7vw, 90px); }
.legal__doc { max-width: 800px; }
.legal__doc h1 { font-size: clamp(30px, 4.4vw, 42px); margin-bottom: 12px; }
.legal__doc h2 { font-size: 22px; margin-top: 44px; margin-bottom: 14px; }
.legal__doc h3 { font-size: 18px; margin-top: 28px; margin-bottom: 10px; }
.legal__doc p, .legal__doc li { color: var(--c-text-2); font-size: 16.5px; }
.legal__doc p { margin-top: 14px; }
.legal__doc ul { margin-top: 14px; padding-left: 22px; display: grid; gap: 8px; }
.legal__doc a { color: var(--c-akzent); }
.legal__updated { color: var(--c-muted); font-size: 14.5px; }
.legal__box {
  background: var(--c-card);
  border: 1px solid var(--c-rand);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin-top: 24px;
}
.legal__box p:first-child { margin-top: 0; }

/* --------------------------------------------------------- Glaseffekt -- */
/* Alle durchscheinenden Flaechen zeichnen ihren Untergrund weich. Bewusst
   NICHT dabei: Einwilligungsbanner und Klappmenue — die sind deckend, weil
   sie ueber dem Inhalt schweben, und Formularfelder, in die man tippt. */

.card,
.owner,
.area__list li,
.faq details,
.contact__item,
.form,
.karte,
.cta-band,
.legal__box,
.btn--ghost {
  /* Vorbild ist die Glasflaeche der Ailis-App: kleine Weichzeichnung, heller
     Rand und ein Lichtkant innen an der Oberkante. KEINE Entsaettigung — ein
     rechnerisch neutrales Grau wirkt neben mintfarbener Umgebung warm bis
     braeunlich. Der Glaseindruck kommt vom Lichtkant, nicht vom Entfaerben. */
  backdrop-filter: blur(var(--glas));
  -webkit-backdrop-filter: blur(var(--glas));
  box-shadow: var(--glanz), var(--shadow);
}

/* ------------------------------------------------------- Scroll-Reveal */
/* Sichtbar ist der Normalzustand. Ausgeblendet wird nur, wenn das Skript
   die Klasse .js-reveal gesetzt hat und die Animation auch bedienen kann.
   Ohne JavaScript bleibt die Seite dadurch vollstaendig lesbar. */

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }


/* ------------------------------------------------------------- Waben --- */
/* Dezentes Sechseckraster auf den dunklen Flaechen. Nahtlos kachelbar: die
   Sechsecke an den Kachelraendern sind doppelt gezeichnet, dadurch schliesst
   das Muster ohne sichtbare Naht an. Als Data-URI eingebettet — keine
   zusaetzliche Datei, kein weiterer Ladevorgang.
   Bewusst NICHT im Hero: dort liegt bereits das Wortmosaik. */

body,
.section--band,
.section--black,
.footer {
  background-image: var(--waben);
  background-size: 90px 52px;
  background-position: center top;
}

/* ------------------------------------------------------------ Responsiv */

@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; text-align: left; }
  .hero__visual { order: -1; justify-content: flex-start; }
  .hero__visual .logo { width: min(74%, 300px); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .trustbar ul { grid-template-columns: repeat(2, 1fr); }
  .trustbar li:nth-child(3) { border-left: 0; }
  .trustbar li:nth-child(n+3) { border-top: 1px solid var(--c-line-soft); }
  .contact { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

/* Kopfzeile klappt frueher ein als der Inhalt umbricht: Logo, sechs Links und
   die Rufnummer brauchen nebeneinander rund 1110 px. Der Schwellwert liegt
   bewusst darueber — auf Systemen mit anderer Grundschrift (macOS, Android)
   fallen die Beschriftungen breiter aus. Darunter Klappmenue. */
@media (max-width: 1180px) {
  html { scroll-padding-top: 76px; }

  .nav-toggle { display: inline-flex; }
  .header__inner { min-height: 68px; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--c-black);
    border-bottom: 1px solid var(--c-line);
    padding: 14px var(--gutter) 22px;
    box-shadow: 0 20px 40px rgba(0,0,0,.6);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) { padding: 14px 12px; font-size: 17px; }
}

@media (max-width: 860px) {
  .grid--3, .grid--4, .grid--2, .steps, .area, .form__row { grid-template-columns: 1fr; }
  .area__list { grid-template-columns: 1fr 1fr; }
  .owner { grid-template-columns: 1fr; text-align: left; }
  .cta-band { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  /* Erst hier wird es neben Logo und Menuetaste zu eng fuer die Rufnummer */
  .header__cta .btn--primary { display: none; }
  .trustbar ul { grid-template-columns: 1fr; }
  .trustbar li { border-left: 0; border-top: 1px solid var(--c-line-soft); }
  .trustbar li:first-child { border-top: 0; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .card { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .js-reveal .reveal { opacity: 1; transform: none; }
}

@media print {
  .header, .nav-toggle, .form, .cta-band { display: none !important; }
  body { background: #fff; color: #000; }
}