/* =============================================================
   v4.css — nu:version Homepage Relaunch 2026 — Iteration 3
   Design: Editorial-Aesthetik, Cream/Ink-Deep/Apricot, Asymmetrisches Bento
   Schriften: Manrope (400/500/700/800), JetBrains Mono
   Anti-Claude-Code-Look strikt. Light Mode only.
   ============================================================= */

/* ================================================================
   SECTION DIVIDER — grüne Trennlinie zwischen Inhaltsblöcken
   ================================================================ */
.nuv-section-divider {
  height: 4px;
  background: linear-gradient(90deg, var(--nuv-green) 0%, rgba(177,211,54,.12) 100%);
}

/* ================================================================
   TEASER ACCENT — Brand-Grün Hervorhebung
   ================================================================ */
.teaser-accent { color: #B1D336; font-weight: 700; }

/* ================================================================
   FONT DECLARATIONS — self-hosted, DSGVO
   ================================================================ */
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/Manrope-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/Manrope-500.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/Manrope-700.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/Manrope-800.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/JetBrainsMono-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/JetBrainsMono-700.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ================================================================
   DESIGN TOKENS — Iteration 2 Farb-Erweiterung
   ================================================================ */
:root {
  /* Neue Farben Iteration 2 */
  --ink-deep:     #0F1E2C;
  --cream:        #F5EFE3;
  --cream-mid:    #EDE5D6;
  --apricot:      #E89C5F;
  --apricot-dark: #C97A3E;
  --warm-white:   #FAFAF7;

  /* Font-Familien */
  --font-display: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-sans:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Beibehaltene Tokens */
  --nuv-green:      #B1D336;
  --nuv-green-dark: #8CA028;
  --nuv-green-light:#E8F5C0;
  --nuv-navy:       #1E2A3A;
  --nuv-white:      #FFFFFF;
  --nuv-border:     #D4DAE2;
  /* Section padding: 100px Desktop, 56px Mobile */
  --section-py:     6.25rem;
  --section-py-mobile: 3.5rem;
}

/* Globale Basis-Reset für Iteration 2 */
body {
  font-family: var(--font-sans);
  color: var(--nuv-navy);
  background: var(--nuv-white);
  -webkit-font-smoothing: antialiased;
}

/* Global section spacing (Block 10: 80–120px Desktop / 48–72px Mobile) */
section {
  padding-top: var(--section-py);
  padding-bottom: var(--section-py);
}

@media (max-width: 767px) {
  section {
    padding-top: var(--section-py-mobile);
    padding-bottom: var(--section-py-mobile);
  }
}

/* Heading hierarchy: H2 = section title, H3 = sub-title */
h2 {
  font-family: var(--font-display);
  font-weight: 700;
}

h3 {
  font-family: var(--font-display);
  font-weight: 700;
}

/* Body text max-width entfernt — Breite wird durch den Container gesteuert */

/* Images: lazy-load discipline enforced via HTML attributes.
   Prevent layout shift by default block display. */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* prefers-reduced-motion — global */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ================================================================
   HEADER — neue Navigation + grüner Kontakt-CTA
   ================================================================ */
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(30, 42, 58, 0.10);
  box-shadow: 0 1px 12px rgba(15, 30, 44, 0.07);
  transition: box-shadow .25s, background .25s;
}

/* Sticky shadow intensiviert nach Scroll */
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.99);
  box-shadow: 0 4px 28px rgba(15, 30, 44, 0.14);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  height: 80px;
  display: flex;
  align-items: center;
  gap: 3rem;
}

.nav-logo img {
  height: clamp(44px, 5.5vw, 60px);
  width: auto;
}

/* ----------------------------------------------------------------
   PAGE SUBNAV — schlanke Breadcrumb-Leiste unter dem Header
   sticky top:80px, hängt sich direkt unter die Menüleiste
---------------------------------------------------------------- */
.page-subnav {
  position: sticky;
  top: 80px;
  z-index: 99;
  background: var(--ink-deep);
  height: 36px;
  display: flex;
  align-items: center;
}
.page-subnav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--nuv-green) 0%, rgba(177,211,54,.12) 100%);
}
.page-subnav .container {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.page-subnav a,
.page-subnav span {
  font-size: .7rem;
  font-family: var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  transition: color .15s;
}
.page-subnav a:hover       { color: rgba(255,255,255,.85); }
.page-subnav span.crumb-sep{ color: rgba(255,255,255,.22); }
.page-subnav span:last-child{ color: rgba(255,255,255,.75); }

/* ----------------------------------------------------------------
   INNER PAGE HERO — glass-box zentriert (geteilt von allen Inner Pages)
   Modifier-Klasse wird zusätzlich zu .hero-inner-photo gesetzt.
---------------------------------------------------------------- */
.inner-page-hero { align-items: center !important; min-height: 65vh; }
.inner-page-hero--compact { min-height: 45vh; }
.inner-page-hero .hero-inner-photo__overlay {
  background: rgba(15,30,44,.50) !important;
}
.inner-page-hero__wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 2rem clamp(1.25rem, 4vw, 2.5rem);
}

.nav-links {
  display: none;
  gap: 2.5rem;
  margin-left: auto;
  align-items: center;
}

@media (min-width: 900px) {
  .nav-links { display: flex; }
}

.nav-links a {
  font-size: 1rem;
  font-weight: 600;
  color: var(--nuv-navy);
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .75rem .5rem;
  transition: color .18s;
}

.nav-links a:hover { color: var(--nuv-green-dark); }

.nav-cta-green {
  display: none;
  margin-left: 1.5rem;
  padding: .7rem 1.5rem;
  background: var(--nuv-green);
  color: var(--ink-deep) !important;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .18s;
}

.nav-cta-green:hover {
  background: var(--nuv-green-dark);
  opacity: 1 !important;
}

@media (min-width: 900px) { .nav-cta-green { display: inline-block; } }

/* Hamburger */
.hamburger {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: .5rem;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

@media (min-width: 900px) { .hamburger { display: none; } }

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--nuv-navy);
  border-radius: 2px;
  transition: transform .22s, opacity .22s;
}

/* Mobile Nav */
.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--ink-deep);
  padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem) 2rem;
  gap: .25rem;
  border-top: 1px solid rgba(255,255,255,.08);
}

.mobile-nav.is-open {
  display: flex;
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  z-index: 99;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

.mobile-nav a {
  padding: .75rem 0;
  color: rgba(255,255,255,.8);
  font-size: .95rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.mobile-nav .mobile-cta-green {
  margin-top: .75rem;
  padding: .75rem 1.25rem;
  background: var(--nuv-green);
  color: var(--ink-deep);
  border-radius: 8px;
  text-align: center;
  font-weight: 700;
  border: none;
}

/* ================================================================
   HERO — zentrierter Kasten, unteres Drittel Desktop, CTAs außen
   ================================================================ */
.hero-photo {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-bottom: 3rem;
}

.hero-photo__bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: center 35%;
}

.hero-photo__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15,30,44,.15) 0%,
    rgba(15,30,44,.45) 50%,
    rgba(15,30,44,.80) 100%
  );
}

.hero-photo__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem) 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Hero-Glaskasten — 75vw Desktop, zentriert */
.hero-glass {
  background: rgba(15,30,44,.32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  padding: 3.5rem 3.5rem 3rem;
  max-width: 75vw;
  width: 75vw;
  text-align: center;
}

@media (max-width: 768px) {
  .hero-glass {
    max-width: 92vw;
    width: 92vw;
    padding: 1.75rem 1.5rem;
    border-radius: 14px;
    text-align: left;
  }
  .hero-photo__content { padding-bottom: 5rem; }
  .hero-photo { align-items: center; }
}

.hero-glass h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.85rem, 4vw, 3rem);
  color: var(--nuv-white);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin-bottom: 1.25rem;
  text-align: center;
}

/* Hero-Claim + Hero-Sub — identische Typografie, zusammenhängender Absatz-Block */
.hero-claim,
.hero-glass .hero-sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  color: rgba(255,255,255,.82);
  line-height: 1.7;
  letter-spacing: 0;
  font-style: normal;
  text-align: center;
  max-width: none;
}

/* Absatz-Abstand zwischen den beiden Texten */
.hero-claim {
  margin: 0 0 1.25rem 0;
}

.hero-glass .hero-sub {
  margin: 0;
}

@media (max-width: 600px) {
  .hero-claim,
  .hero-glass .hero-sub { font-size: 1.05rem; }
}

/* Hero-Headline Akzent (grüne Schlüsselwörter) */
.hero-h1__accent { color: var(--nuv-green); }

/* Hero-CTAs (Iteration 5) */
.hero-ctas {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 600px) {
  .hero-ctas { flex-direction: column; align-items: stretch; gap: .75rem; }
  .hero-ctas .hero-cta-secondary { text-align: center; }
}

.hero-cta-primary {
  padding: .85rem 2rem;
  font-size: 1rem;
}

.hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: rgba(255,255,255,.82);
  font-size: .95rem;
  font-weight: 600;
  transition: color .18s;
  text-decoration: none;
}

.hero-cta-secondary:hover { color: var(--nuv-white); }
.hero-cta-secondary::after { content: ' →'; font-family: var(--font-mono); }

/* Scroll-Indicator — klickbar, smooth scroll zur nächsten Section */
.hero-scroll-hint {
  position: absolute;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--nuv-green);
  color: var(--ink-deep);
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, transform .2s;
  box-shadow: 0 4px 16px rgba(177,211,54,.35);
}

.hero-scroll-hint:hover {
  background: var(--nuv-green-dark);
  transform: translateX(-50%) translateY(-2px);
}

.hero-scroll-hint__arrow {
  animation: scrollBounce 2.4s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: .9; }
  50%       { transform: translateY(5px); opacity: 1; }
}

/* Video Controls */
.hero-video-controls {
  position: absolute;
  bottom: 2.25rem;
  right: clamp(1.25rem, 4vw, 2.5rem);
  z-index: 3;
  display: flex;
  gap: .5rem;
}

.hero-video-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(15,30,44,.45);
  backdrop-filter: blur(8px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.75);
  transition: background .18s, border-color .18s;
}

.hero-video-btn:hover {
  background: rgba(177,211,54,.35);
  border-color: var(--nuv-green);
  color: var(--nuv-white);
}

.hero-video-btn svg { pointer-events: none; }

/* ================================================================
   TEASER — nu:version Kurzprofil (Dark BG = --ink-deep wie Footer)
   Iteration 5 Redesign: dunkler Hintergrund, nahtloser Übergang zum Footer.
   ================================================================ */
.section-teaser {
  /* Layer 1: Basis-Gradient | Layer 2: Dot-Grid-Pattern (Brand-Grün, 6% Opacity) */
  background:
    radial-gradient(circle, rgba(177,211,54,.06) 1px, transparent 1.5px),
    linear-gradient(160deg, var(--ink-deep) 0%, #152536 100%);
  background-size: 30px 30px, 100% 100%;
  padding: 5.5rem 0 6rem;
  border-bottom: none;
  position: relative;
  overflow: hidden;
}

/* Dezenter animierter Mesh/Blob-Akzent (Brand-Grün, sehr low opacity) */
.section-teaser::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -120px;
  width: 560px;
  height: 560px;
  background: radial-gradient(ellipse at center, rgba(177,211,54,.09) 0%, rgba(177,211,54,.028) 50%, transparent 70%);
  border-radius: 50%;
  animation: teaserBlobDrift 18s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Atmender Lichtschein hinter der Headline */
.section-teaser::after {
  content: '';
  position: absolute;
  top: -60px;
  left: 5%;
  width: 40%;
  height: 320px;
  background: radial-gradient(ellipse at 30% 40%, rgba(177,211,54,.09) 0%, transparent 65%);
  border-radius: 50%;
  animation: teaserGlowBreathe 7s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes teaserBlobDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-50px, 70px) scale(1.14); }
}

@keyframes teaserGlowBreathe {
  0%   { opacity: .6; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.12) translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .section-teaser::before,
  .section-teaser::after { animation: none; }
}

/* ================================================================
   TEASER — Layer 3: Flowing Diagonals SVG
   Inline-SVG-Wrapper: 2 Kurven diagonal über die Section, Brand-Grün,
   sehr dezent (stroke: rgba(177,211,54,.08)), langsamer dashoffset-Loop.
   Kein Pseudo-Element (beide belegt), daher eigener <div>.
   ================================================================ */
.teaser-diagonals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.teaser-diagonals svg {
  width: 100%;
  height: 100%;
  display: block;
}

.teaser-diagonal-path {
  fill: none;
  stroke: rgba(177,211,54,.13);
  stroke-width: 1;
  stroke-dasharray: 800;
  stroke-dashoffset: 0;
  animation: teaserDiagonalFlow 50s linear infinite;
}

.teaser-diagonal-path:nth-child(2) {
  stroke: rgba(177,211,54,.09);
  stroke-dasharray: 600;
  animation-duration: 65s;
  animation-direction: reverse;
}

.teaser-diagonal-path:nth-child(3) {
  stroke: rgba(177,211,54,.07);
  stroke-dasharray: 700;
  animation-duration: 42s;
  animation-delay: -12s;
}

@keyframes teaserDiagonalFlow {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 1600; }
}

@media (prefers-reduced-motion: reduce) {
  .teaser-diagonal-path { animation: none; }
}

/* ================================================================
   TEASER — Layer 5: Subtle Noise Overlay (SVG turbulence, 3% opacity)
   Film-Grain-Anmutung, Premium-Feeling, pure CSS/SVG.
   ================================================================ */
.teaser-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
}

/* ================================================================
   TEASER — Layer 6: Doppelpunkt-Motiv (nu:version Brand-Identity)
   Inline-SVG Colons, Brand-Grün 12%, sanft animiert.
   ================================================================ */
.teaser-colons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Gemeinsame Basis */
.teaser-colon {
  position: absolute;
  opacity: .12;
}

/* Positions + Größen */
.teaser-colon--lg  { width: 56px; height: 112px; }
.teaser-colon--md  { width: 36px; height: 72px; }
.teaser-colon--sm  { width: 22px; height: 44px; }

/* Einzelne Platzierungen */
.teaser-colon--a { top: 8%;  left: 4%;   animation: colonDrift 14s ease-in-out infinite alternate; }
.teaser-colon--b { top: 20%; right: 6%;  animation: colonPulse 9s ease-in-out infinite; }
.teaser-colon--c { bottom: 18%; left: 22%; animation: colonDrift 18s ease-in-out infinite alternate-reverse; }
.teaser-colon--d { top: 55%; left: 8%;   animation: colonPulse 12s ease-in-out infinite 3s; }
.teaser-colon--e { top: 5%;  right: 25%; animation: colonDrift 11s ease-in-out infinite alternate; }

@keyframes colonDrift {
  0%   { transform: translateY(0);    opacity: .10; }
  50%  { transform: translateY(-14px); opacity: .15; }
  100% { transform: translateY(6px);  opacity: .10; }
}

@keyframes colonPulse {
  0%, 100% { opacity: .08; }
  50%       { opacity: .16; }
}

@media (prefers-reduced-motion: reduce) {
  .teaser-colon { animation: none !important; opacity: .10; }
}

.section-teaser .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  position: relative;
  z-index: 1;
}

/* ================================================================
   KARRIERE — grüner Button-Override (Iteration 6)
   ================================================================ */
.karriere-cta-btn {
  padding: .9rem 2.25rem;
  font-size: .97rem;
  letter-spacing: .01em;
}

.teaser-inner {
  text-align: center;
}

.teaser-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  color: #F5EFE3;
  line-height: 1.3;
  margin-bottom: 3rem;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.teaser-headline__accent {
  color: inherit;
  transition: color .8s ease;
}

/* Word-by-word fade-in */
.teaser-headline__word {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}

.teaser-headline__word.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.teaser-headline__word.is-visible .teaser-headline__accent {
  color: #B1D336;
  transition: color .8s ease .2s;
}

@media (prefers-reduced-motion: reduce) {
  .teaser-headline__word {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .teaser-headline__accent {
    color: #B1D336;
    transition: none;
  }
}

/* 2-Spalten-Wrapper: Text links, Foto rechts */
.teaser-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.25rem;
  align-items: stretch;
  margin-bottom: 0;
}

/* Weiße Text-Box */
.teaser-box {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  padding: 2.5rem 2.75rem;
  box-shadow: 0 2px 8px rgba(15,30,44,.06), 0 8px 24px rgba(15,30,44,.05);
  text-align: left;
  display: flex;
  flex-direction: column;
  /* Initial-Zustand für Fade-in */
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}

/* Foto-Wrapper: nimmt exakt die Höhe der Grid-Row an (align-self: stretch + height: 100%) */
/* --parallax-y wird per rAF-Scroll-Listener auf .teaser-photo gesetzt */
.teaser-photo-wrap {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15,30,44,.07), 0 10px 28px rgba(15,30,44,.07);
  height: 100%;
  align-self: stretch;
  /* Dezenter Glow hinter dem Foto auf dunklem Hintergrund */
  filter: drop-shadow(0 0 28px rgba(177,211,54,.08));
}

.teaser-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  /* Default: immer sichtbar (no-JS / prefers-reduced-motion / Fallback) */
  opacity: 1;
  transform: none;
  will-change: opacity, transform;
}

/* Nur wenn JS aktiv: Entry-Animation einschalten */
.js .teaser-photo {
  opacity: 0;
  transform: scale(0.96) translateY(20px);
  transition:
    opacity   0.9s ease-out,
    transform 0.9s ease-out;
}

/* Entry abgeschlossen */
.js .teaser-photo.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Ken-Burns-Loop (langsamer Zoom — gibt Lebendigkeit, wird per JS gesetzt) */
@keyframes teaserKenBurns {
  0%   { transform: scale(1.00) translate(0px, 0px);   }
  100% { transform: scale(1.04) translate(-6px, -4px); }
}

.teaser-photo.is-kenburns {
  animation: teaserKenBurns 20s ease-in-out infinite alternate;
  transform-origin: 55% 30%;
}

/* prefers-reduced-motion: sofort sichtbar, keine Animation */
@media (prefers-reduced-motion: reduce) {
  .js .teaser-photo {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .teaser-photo.is-kenburns {
    animation: none !important;
  }
}

/* Mobile: gestapelt — Text oben, Foto darunter */
@media (max-width: 899px) {
  .teaser-columns {
    grid-template-columns: 1fr;
  }

  .teaser-photo-wrap {
    aspect-ratio: 16 / 9;
  }

  .teaser-photo {
    height: 100%;
  }
}

.teaser-box.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .teaser-box {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.teaser-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(.93rem, 1.4vw, 1.02rem);
  color: #4a5568;
  line-height: 1.75;
  margin: 0 0 1.25rem;
}

.teaser-body:last-child {
  margin-bottom: 0;
}

/* CTA — grüner Button am Box-Ende */
.teaser-cta {
  margin-top: auto;
  padding-top: 1.75rem;
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink-deep);
  letter-spacing: .01em;
  text-decoration: none;
  background: #B1D336;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  border-bottom: none;
  transition: background .18s, transform .15s, box-shadow .15s;
}

.teaser-cta:hover {
  background: #8CA028;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(140,160,40,.35);
}

/* ================================================================
   SEKTION 2 — PAIN (Editorial-Spread, Cream BG)
   Links: großes Foto / Rechts: Zitat-Stack
   ================================================================ */
.section-pain {
  background: var(--cream);
  padding: var(--section-py) 0;
}

.section-pain .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.pain-spread {
  display: grid;
  gap: 4rem;
  align-items: start;
}

@media (min-width: 900px) {
  .pain-spread { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* Foto-Seite */
.pain-photo-col {
  position: relative;
}

.pain-photo-wrap {
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 3/4;
  position: relative;
}

@media (min-width: 900px) {
  .pain-photo-wrap { aspect-ratio: 4/5; }
}

.pain-photo-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

/* Handgezeichnete Quote-Mark SVG (Mila-Stil) */
.pain-quote-accent {
  position: absolute;
  top: -1.5rem;
  right: -1.5rem;
  width: 80px; height: 80px;
  opacity: .75;
  pointer-events: none;
}

@media (max-width: 899px) {
  .pain-quote-accent { top: -1rem; right: -1rem; width: 60px; height: 60px; }
}

/* Text-Seite */
.pain-text-col h2 {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--ink-deep);
  line-height: 1.35;
  margin-bottom: 2.5rem;
  max-width: 480px;
}

.pain-quotes {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.pain-quote-item {
  padding-left: 1.5rem;
  border-left: 2px solid var(--nuv-green);
}

.pain-quote-item p {
  font-size: clamp(.95rem, 1.5vw, 1.05rem);
  color: var(--ink-deep);
  line-height: 1.6;
  font-style: italic;
}

.pain-close {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cream-mid);
  display: flex;
  align-items: center;
  gap: .75rem;
}

.pain-close p {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-deep);
  font-family: var(--font-mono);
}

.pain-close-icon {
  flex-shrink: 0;
  color: var(--nuv-green);
}

/* Pain -- No-Photo Variante (Iteration 5) */
.section-pain--no-photo {
  background: var(--cream);
  border-top: 3px solid var(--cream-mid);
}

.pain-content-block {
  max-width: 760px;
  margin: 0 auto;
}

.pain-content-block h2 {
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  color: var(--ink-deep);
  line-height: 1.35;
  margin-bottom: 2.5rem;
  max-width: 60ch;
}

.pain-close-main {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-deep);
  font-family: var(--font-mono);
  margin-bottom: .65rem;
}

.pain-close-sub {
  font-size: .97rem;
  color: #5A6576;
  line-height: 1.7;
  max-width: 62ch;
}

/* ================================================================
   SEKTION CHALLENGE ↔ LÖSUNG (Iteration 6 — ersetzt Pain-Section)
   ================================================================ */
.section-challenge {
  background: var(--cream);
  padding: var(--section-py) 0;
  border-top: 3px solid var(--cream-mid);
}

.section-challenge .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.challenge-header {
  margin-bottom: 3.5rem;
}

.challenge-header .section-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--nuv-green);
  margin-bottom: .75rem;
}

.challenge-header h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  color: var(--ink-deep);
  line-height: 1.3;
}

.challenge-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.challenge-row {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--cream-mid);
}

.challenge-row:last-child { border-bottom: none; }

@media (max-width: 699px) {
  .challenge-row {
    grid-template-columns: 1fr;
    gap: .5rem;
    padding: 1.5rem 0;
  }
  .challenge-arrow { display: none; }
  .challenge-right { padding-left: 1.25rem; border-left: 3px solid var(--nuv-green); }
}

.challenge-left {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
}

.challenge-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cream-mid);
  border: 1.5px solid rgba(90,101,118,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .85rem;
  color: #8A9399;
  line-height: 1;
  display: inline-flex;
  padding-bottom: 1px;
}

.challenge-left p {
  font-size: clamp(.93rem, 1.4vw, 1rem);
  color: #5A6576;
  line-height: 1.55;
  font-style: italic;
  margin: 0;
}

.challenge-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.challenge-right p {
  font-size: clamp(.97rem, 1.4vw, 1.05rem);
  color: var(--ink-deep);
  line-height: 1.5;
  margin: 0;
}

.challenge-right strong {
  color: var(--ink-deep);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .challenge-rows > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ================================================================
   NEUE SEKTION — SO ARBEITEN WIR MIT IHNEN ZUSAMMEN (Iteration 5)
   ================================================================ */
.section-arbeitsweise {
  background: var(--warm-white);
  padding: 6rem 0 7rem;
  position: relative;
  overflow: hidden;
}

/* nu:version Logo-Motiv — Kreis-Cluster als Hintergrund-Decoration */
.arbeitsweise-logo-bg {
  position: absolute;
  width: 520px;
  height: auto;
  pointer-events: none;
  z-index: 0;
  opacity: .32;
}

.arbeitsweise-logo-bg--br {
  bottom: -80px;
  right: -60px;
}

.arbeitsweise-logo-bg--tl {
  top: -80px;
  left: -60px;
}

.arbeitsweise-logo-mark {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Animations-Keyframes — je Gruppe leicht versetzt */
@keyframes aw-float-a {
  0%, 100% { transform: translate(0, 0) scale(1);      }
  40%       { transform: translate(-6px, -14px) scale(1.015); }
  70%       { transform: translate(5px,  -7px)  scale(0.99);  }
}
@keyframes aw-float-b {
  0%, 100% { transform: translate(0, 0) scale(1);     }
  35%       { transform: translate(7px, -9px)  scale(0.985); }
  68%       { transform: translate(-4px, 8px)  scale(1.01);  }
}
@keyframes aw-float-c {
  0%, 100% { transform: translate(0, 0) scale(1);     }
  45%       { transform: translate(9px,  12px)  scale(1.02); }
  75%       { transform: translate(-5px, -4px)  scale(0.99); }
}

.aw-dot-group--dark-main { animation: aw-float-a 16s ease-in-out infinite; }
.aw-dot-group--dark-sub  { animation: aw-float-b 13s ease-in-out infinite; }
.aw-dot-group--green     { animation: aw-float-c 19s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .aw-dot-group { animation: none !important; }
}

/* Container über dem Wasserzeichen */
.section-arbeitsweise .container {
  position: relative;
  z-index: 1;
}

/* 2-Spalter: Text | Pain Canvas */
.arbeitsweise-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
  margin-bottom: 3rem;
}

@media (max-width: 899px) {
  .arbeitsweise-split {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* Canvas-Spalte — streckt sich auf volle Höhe des Grid-Rows */
.arbeitsweise-canvas-col {
  display: flex;
  flex-direction: column;
}

.arbeitsweise-canvas-col .arbeitsweise-visual {
  flex: 1;
}

@media (max-width: 767px) {
  .section-arbeitsweise { padding: 4rem 0 5rem; }
}

.section-arbeitsweise .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.arbeitsweise-grid {
  display: grid;
  gap: 4rem;
  align-items: start;
}

@media (min-width: 900px) {
  .arbeitsweise-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.arbeitsweise-text .section-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--nuv-green);
  margin-bottom: .75rem;
}

.arbeitsweise-text h2 {
  font-size: clamp(1.55rem, 2.4vw, 2.1rem);
  color: var(--ink-deep);
  line-height: 1.2;
  margin-top: .5rem;
  margin-bottom: 2rem;
}

.arbeitsweise-body {
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
  color: #5A6576;
  line-height: 1.75;
  max-width: 66ch;
  margin-bottom: 1.25rem;
}

.arbeitsweise-cta {
  margin-top: 1.75rem;
}

.arbeitsweise-accent {
  color: var(--nuv-green-dark);
  font-weight: 700;
}

/* Pain Canvas — nu:version stilisiert (Iteration 6) */
.arbeitsweise-visual {
  display: flex;
  justify-content: center;
}

.pain-canvas {
  background: var(--ink-deep);
  border-radius: 16px;
  padding: 1.75rem 1.75rem 1.25rem;
  width: 100%;
  max-width: 560px;
  border: 1px solid rgba(177,211,54,.2);
}

.pain-canvas__title {
  font-family: var(--font-mono);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--nuv-green);
  margin-bottom: 1.25rem;
}

.pain-canvas__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: 1rem;
}

.pain-canvas__field {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(177,211,54,.22);
  border-radius: 10px;
  padding: 1rem .85rem .85rem;
  min-height: 100px;
  flex: 1;
}

.pain-canvas__field--wide {
  grid-column: 1 / -1;
  min-height: auto;
}

.pain-canvas__field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(177,211,54,.75);
  margin-bottom: .65rem;
}

.pain-canvas__postits {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

/* Abstract post-its: no text, just colored cards with line-hints */
.pain-canvas__postit {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  width: 64px;
  height: 52px;
  border-radius: 3px;
  padding: .5rem .5rem .4rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.28);
  transition: transform .18s, box-shadow .18s;
  cursor: default;
}

/* Color variants */
.pain-canvas__postit--green  { background: #B1D336; transform: rotate(-2deg); }
.pain-canvas__postit--yellow { background: #F5D76E; transform: rotate(1.5deg); }
.pain-canvas__postit--rose   { background: #F4A69A; transform: rotate(-1deg); }

/* Nth-child rotation variation for liveliness */
.pain-canvas__postit--green:nth-child(2)  { transform: rotate(2deg); }
.pain-canvas__postit--yellow:nth-child(2) { transform: rotate(-2.5deg); }
.pain-canvas__postit--rose:nth-child(2)   { transform: rotate(2deg); }

/* Hover: lift */
.pain-canvas__postit:hover {
  transform: translateY(-3px) rotate(0deg) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.38);
}

/* Stylised text-lines inside each post-it */
.pain-canvas__postit-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pain-canvas__postit-lines span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: rgba(15,30,44,.28);
}
.pain-canvas__postit-lines span:first-child  { width: 80%; }
.pain-canvas__postit-lines span:nth-child(2) { width: 60%; }
.pain-canvas__postit-lines span:nth-child(3) { width: 70%; }

@media (prefers-reduced-motion: reduce) {
  .pain-canvas__postit { transition: none; }
  .pain-canvas__postit:hover { transform: none !important; }
}


/* Pain Canvas — 2-Spalten-Layout: Problemanalyse | Loesungsansatz */
.pain-canvas__sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: 1rem;
}

.pain-canvas__section {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.pain-canvas__section-label {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  padding-bottom: .3rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: .1rem;
}

.pain-canvas__disclaimer {
  font-size: .7rem;
  color: rgba(255,255,255,.35);
  line-height: 1.5;
  font-style: italic;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: .85rem;
  margin: 0;
}

/* Foto-Zeile unter dem Grid */
.arbeitsweise-photo-row {
  margin-top: 4rem;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(15,30,44,.1);
}

.arbeitsweise-photo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 16/7;
  object-position: center 40%;
}

/* CTA-Block */
.arbeitsweise-cta-block {
  margin-top: 3rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.arbeitsweise-cta-lead {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 600;
  color: var(--ink-deep);
  line-height: 1.4;
  margin: 0;
  max-width: 44ch;
}

@media (max-width: 599px) {
  .arbeitsweise-cta-block { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* ================================================================
   ARBEITSWEISE — Headline-Block (volle Breite, über dem 2-Spalter)
   ================================================================ */
.arbeitsweise-header {
  margin-bottom: 2.5rem;
}

.arbeitsweise-header .section-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--nuv-green);
  margin-bottom: .75rem;
}

.arbeitsweise-header h2 {
  font-size: clamp(1.55rem, 2.4vw, 2.1rem);
  color: var(--ink-deep);
  line-height: 1.2;
  margin: 0;
}

/* 2-Spalter: Text 58% | Foto 42% */
.arbeitsweise-text-photo {
  display: grid;
  grid-template-columns: 58% 42%;
  gap: 3rem;
  align-items: center;
  margin-bottom: 3.5rem;
}

@media (max-width: 899px) {
  .arbeitsweise-text-photo {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Foto-Spalte */
.arbeitsweise-photo-col {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(15,30,44,.12);
}

.arbeitsweise-col-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  display: block;
  aspect-ratio: 4/3;
}

/* Canvas-Wrap — Pain Canvas zentriert unter dem 2-Spalter */
.arbeitsweise-canvas-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
}

/* placeholder-badge bleibt für andere Stellen */
.placeholder-badge {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: #8A9399;
  letter-spacing: .06em;
  padding: .4rem 0;
  border-top: 1px solid var(--nuv-border);
}

/* ================================================================
   SEKTION 3 — LOESUNG (Manifesto-XL, heller Hintergrund)
   Kernbotschaft als Pill, 3 Prinzipien als echte Karten
   ================================================================ */
.section-loesung {
  background: var(--warm-white);
  padding: var(--section-py) 0;
  position: relative;
  overflow: hidden;
}

/* Hintergrund-Dekoration: organische Blob-Formen, langsam animiert */
.section-loesung::before {
  content: '';
  position: absolute;
  top: -160px;
  right: -180px;
  width: 680px;
  height: 680px;
  border-radius: 38% 62% 55% 45% / 42% 38% 62% 58%;
  background: radial-gradient(circle at 45% 45%,
    rgba(177,211,54,.32) 0%,
    rgba(177,211,54,.14) 45%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: loesung-blob-a 22s ease-in-out infinite;
}

.section-loesung::after {
  content: '';
  position: absolute;
  bottom: -140px;
  left: -160px;
  width: 560px;
  height: 560px;
  border-radius: 62% 38% 45% 55% / 58% 62% 38% 42%;
  background: radial-gradient(circle at 55% 55%,
    rgba(177,211,54,.22) 0%,
    rgba(177,211,54,.08) 50%,
    transparent 72%);
  pointer-events: none;
  z-index: 0;
  animation: loesung-blob-b 28s ease-in-out infinite;
}

@keyframes loesung-blob-a {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    border-radius: 38% 62% 55% 45% / 42% 38% 62% 58%;
  }
  33% {
    transform: translate(-40px, 60px) scale(1.08);
    border-radius: 55% 45% 38% 62% / 58% 42% 38% 62%;
  }
  66% {
    transform: translate(30px, -40px) scale(0.94);
    border-radius: 45% 55% 62% 38% / 38% 58% 42% 62%;
  }
}

@keyframes loesung-blob-b {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    border-radius: 62% 38% 45% 55% / 58% 62% 38% 42%;
  }
  40% {
    transform: translate(50px, -50px) scale(1.06);
    border-radius: 45% 55% 62% 38% / 42% 38% 62% 58%;
  }
  70% {
    transform: translate(-30px, 35px) scale(0.92);
    border-radius: 38% 62% 38% 62% / 62% 38% 62% 38%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-loesung::before,
  .section-loesung::after { animation: none; }
}

.section-loesung .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  position: relative;
  z-index: 1;
}

.manifesto-wrap {
  max-width: 100%;
}

.manifesto-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--nuv-green);
  margin-bottom: 2rem;
}

.manifesto-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 6rem);
  color: var(--ink-deep);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin-bottom: 2.5rem;
}

.manifesto-body {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: #4A5568;
  line-height: 1.75;
  margin-bottom: 2.5rem;
}

.manifesto-kernbotschaft {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 800;
  color: var(--nuv-green);
  line-height: 1.45;
  margin: 0;
}

/* Manifesto-Principles — 3-Spalter Prinzipien-Karten */
.manifesto-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3.5rem;
}

@media (max-width: 767px) {
  .manifesto-principles { grid-template-columns: 1fr; gap: 1.5rem; }
}

.manifesto-principle {
  background: var(--ink-deep);
  border: 1px solid rgba(255,255,255,.08);
  border-top: 3px solid var(--nuv-green);
  border-radius: 12px;
  padding: 2rem;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.manifesto-principle:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  border-color: rgba(177,211,54,.35);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .manifesto-principle { transition: none; }
  .manifesto-principle:hover { transform: none; }
}

.manifesto-principle__num {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--nuv-green);
  letter-spacing: .12em;
  margin-bottom: .75rem;
  font-weight: 700;
}

.manifesto-principle h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  margin-bottom: .6rem;
  line-height: 1.3;
}

.manifesto-principle p {
  font-size: .93rem;
  color: rgba(255,255,255,.58);
  line-height: 1.7;
}

/* ================================================================
   SEKTION 4 — LEISTUNGEN (3 Cards, dunkler Hintergrund — Punkt-Raster)
   Bewusst anders als Arbeitsweise (kein Kreis-Motiv)
   ================================================================ */
.section-leistungen {
  background: var(--ink-deep);
  padding: var(--section-py) 0;
  position: relative;
  overflow: hidden;
}

/* Punkt-Raster Overlay — atmet langsam */
.section-leistungen::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(177,211,54,.11) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
  animation: dot-breathe 7s ease-in-out infinite;
}

/* Grüner Radial-Glow — driftet langsam durchs Bild */
.section-leistungen::after {
  content: '';
  position: absolute;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122,184,0,.22) 0%, rgba(122,184,0,.06) 40%, transparent 65%);
  bottom: -300px;
  right: -200px;
  pointer-events: none;
  z-index: 0;
  animation: leistungen-glow-drift 14s ease-in-out infinite;
}

@keyframes dot-breathe {
  0%, 100% { opacity: 1; }
  50%       { opacity: .38; }
}

@keyframes leistungen-glow-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  35%      { transform: translate(-90px, 60px) scale(1.18); }
  70%      { transform: translate(70px, -50px) scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .section-leistungen::before { animation: none; }
  .section-leistungen::after  { animation: none; }
}

.section-leistungen .container {
  position: relative;
  z-index: 1;
}

/* Intro-Satz zwischen Heading und Cards */
.leistungen-intro {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: rgba(255,255,255,.85);
  line-height: 1.7;
  margin-bottom: 3rem;
  margin-top: -1rem;
}

.section-leistungen .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.leistungen-header {
  margin-bottom: 3.5rem;
}

.leistungen-header .section-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--nuv-green);
  margin-bottom: .75rem;
}

.leistungen-header h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  color: var(--ink-deep);
  line-height: 1.2;
}

/* index.html: Leistungen-Sektion hat ink-deep BG → h2 weiß */
.section-leistungen .leistungen-header h2 {
  color: #fff;
}

/* Asymmetrisches Bento-Grid */
.bento-grid-asym {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .bento-grid-asym {
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: auto auto;
  }
}

/* Große Kachel (Beratung) — spans 2 rows */
.bento-tile-large {
  background: var(--ink-deep);
  color: var(--nuv-white);
  border-radius: 16px;
  padding: 2.75rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  overflow: hidden;
}

@media (min-width: 700px) {
  .bento-tile-large { grid-row: span 2; }
}

/* Grüner Akzent-Streifen oben */
.bento-tile-large::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--nuv-green);
}

.bento-tile-large .bento-label {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--nuv-green);
}

.bento-tile-large h3 {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  color: var(--nuv-white);
  line-height: 1.25;
}

.bento-tile-large .bento-bullets {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  flex: 1;
}

.bento-tile-large .bento-bullet {
  font-size: .9rem;
  color: rgba(255,255,255,.75);
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.5;
}

.bento-tile-large .bento-bullet::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--nuv-green);
  font-size: .82rem;
}

.bento-tile-large .bento-agent-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  color: var(--nuv-green);
  background: rgba(177,211,54,.12);
  border: 1px solid rgba(177,211,54,.3);
  border-radius: 100px;
  padding: .3rem .8rem;
  align-self: flex-start;
}

/* Kleine Kacheln */
.bento-tile-sm {
  background: var(--nuv-white);
  border: 1px solid var(--nuv-border);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s;
}

.bento-tile-sm:hover {
  border-color: var(--nuv-green);
  box-shadow: 0 4px 24px rgba(177,211,54,.12);
}

.bento-tile-sm .bento-label {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--nuv-green);
}

.bento-tile-sm h3 {
  font-size: 1.15rem;
  color: var(--ink-deep);
  line-height: 1.3;
}

.bento-tile-sm .bento-bullets {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  flex: 1;
}

.bento-tile-sm .bento-bullet {
  font-size: .86rem;
  color: #5A6576;
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.5;
}

.bento-tile-sm .bento-bullet::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--nuv-green);
  font-size: .8rem;
}

.bento-tile-sm .bento-agent-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  color: var(--nuv-green-dark);
  background: var(--nuv-green-light);
  border: 1px solid rgba(177,211,54,.35);
  border-radius: 100px;
  padding: .28rem .7rem;
  align-self: flex-start;
}

/* Mono-Code-Snippet */
.code-snippet {
  background: var(--ink-deep);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-top: .5rem;
  overflow: hidden;
}

.code-snippet pre {
  font-family: var(--font-mono);
  font-size: .76rem;
  line-height: 1.65;
  color: rgba(255,255,255,.78);
  white-space: pre;
  overflow-x: auto;
}

.code-snippet .code-comment { color: rgba(177,211,54,.7); }
.code-snippet .code-key     { color: #79c0ff; }
.code-snippet .code-str     { color: #a5d6ff; }

.leistungen-cta-row {
  text-align: center;
  margin-top: 2.5rem;
}

/* ================================================================
   LEISTUNGEN — Expand Toggle (Iteration 6)
   ================================================================ */
.leistungen-expand-wrap {
  margin-top: 2.5rem;
  border-top: 1px solid var(--nuv-border);
  padding-top: 2rem;
}

.leistungen-expand-btn {
  background: transparent;
  border: 1.5px solid var(--nuv-green);
  color: var(--nuv-green);
  border-radius: 8px;
  padding: .65rem 1.5rem;
  font-size: .9rem;
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: background .18s, color .18s, transform .18s;
}

.leistungen-expand-btn:hover {
  background: var(--nuv-green);
  color: var(--ink-deep);
}

.leistungen-expand-btn[aria-expanded="true"] {
  background: var(--nuv-green);
  color: var(--ink-deep);
}

/* Smooth expand via max-height transition */
.leistungen-expand-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.leistungen-expand-list.is-open {
  max-height: 800px;
}

@media (prefers-reduced-motion: reduce) {
  .leistungen-expand-list { transition: none; }
}

.leistungen-extra-list {
  list-style: none;
  padding: 1.75rem 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.leistungen-extra-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.leistungen-extra-icon {
  color: var(--nuv-green);
  font-weight: 700;
  font-family: var(--font-mono);
  flex-shrink: 0;
  padding-top: .12rem;
}

.leistungen-extra-list strong {
  display: block;
  font-size: .97rem;
  color: var(--ink-deep);
  font-weight: 700;
  margin-bottom: .2rem;
}

.leistungen-extra-list span {
  font-size: .88rem;
  color: #5A6576;
  line-height: 1.6;
}

/* ================================================================
   LEISTUNGEN — 3 gleichwertige Cards (Iteration 5)
   Titel + 1 Satz + Bild-Placeholder + CTA. Kein Bento, keine Stichpunkte.
   ================================================================ */
.leistungen-cards-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .leistungen-cards-grid { grid-template-columns: repeat(3, 1fr); }
}

.leistung-card {
  background: var(--nuv-white);
  border: 1px solid var(--nuv-border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .22s, box-shadow .22s, transform .22s;
}

.leistung-card:hover {
  border-color: var(--nuv-green);
  box-shadow: 0 6px 28px rgba(177,211,54,.18);
  transform: translateY(-2px);
}

/* Bild-Bereich — Placeholder bis Fotos vorliegen */
.leistung-card__img-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--cream);
}

.leistung-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transition: transform .4s ease;
}

.leistung-card:hover .leistung-card__photo {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .leistung-card__photo { transition: none; }
  .leistung-card:hover .leistung-card__photo { transform: none; }
}

.leistung-card__body {
  padding: 1.75rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .75rem;
}

.leistung-card h3 {
  font-size: 1.2rem;
  color: var(--ink-deep);
  line-height: 1.25;
  font-weight: 700;
}

.leistung-card__text {
  font-size: .97rem;
  color: #5A6576;
  line-height: 1.7;
  max-width: 66ch;
  flex: 1;
}

.leistung-card__cta {
  align-self: flex-start;
  margin-top: .5rem;
}

/* ================================================================
   USE CASES SEKTION — CSS bleibt für mögliche spätere Nutzung,
   HTML-Sektion wurde per Iteration 5 Brief entfernt.
   ================================================================ */
.section-usecases {
  background: var(--cream);
  padding: var(--section-py) 0;
  overflow: hidden;
}

.section-usecases .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.usecases-header {
  margin-bottom: 3rem;
}

.usecases-header .section-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--nuv-green);
  margin-bottom: .75rem;
}

.usecases-header h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  color: var(--ink-deep);
}

/* Horizontaler Scroll-Stream */
.usecases-stream {
  display: grid;
  grid-template-columns: repeat(4, minmax(280px, 1fr));
  gap: 1.75rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 1100px) {
  .usecases-stream { overflow-x: visible; }
}

.usecases-stream::-webkit-scrollbar { height: 4px; }
.usecases-stream::-webkit-scrollbar-track { background: var(--cream-mid); border-radius: 2px; }
.usecases-stream::-webkit-scrollbar-thumb { background: var(--nuv-green); border-radius: 2px; }

.usecase-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: transform .22s;
}

.usecase-card:hover { transform: translateY(-3px); }
.usecase-card:hover .usecase-card__photo-wrap { box-shadow: 0 12px 32px rgba(15,30,44,.18); }

.usecase-card__photo-wrap {
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4/3;
  margin-bottom: 1.25rem;
  transition: box-shadow .22s;
}

.usecase-card__photo-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.usecase-card__question {
  font-size: clamp(.95rem, 1.3vw, 1.05rem);
  font-weight: 700;
  color: var(--ink-deep);
  line-height: 1.4;
  margin-bottom: .75rem;
}

.usecase-card__answer {
  font-size: .9rem;
  color: #5A6576;
  line-height: 1.65;
  flex: 1;
}

.usecase-card__cta {
  margin-top: 1rem;
  font-size: .83rem;
  font-weight: 700;
  color: var(--nuv-green);
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: gap .18s;
}

.usecase-card__cta:hover { gap: .6rem; }

.analyse-hint-block {
  margin-top: 3rem;
  background: var(--ink-deep);
  border-radius: 16px;
  padding: 2rem 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.analyse-hint-block p {
  color: rgba(255,255,255,.78);
  font-size: .97rem;
  max-width: 480px;
}

.analyse-hint-block strong { color: var(--nuv-white); }

/* ================================================================
   SEKTION FRONTIER ORGANIZATION — Iteration 6 Rewrite
   ================================================================ */
.section-frontier {
  background: #070F1A;
  padding: 7rem 0 7rem;
  position: relative;
  overflow: hidden;
}

/* Aurora Layer A — grüner Hauptglow, langsam morphend */
.section-frontier::before {
  content: '';
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(ellipse 65% 45% at 25% 35%, rgba(177,211,54,.22) 0%, transparent 55%),
    radial-gradient(ellipse 45% 60% at 72% 20%, rgba(100,200,160,.09) 0%, transparent 52%),
    radial-gradient(ellipse 55% 40% at 55% 80%, rgba(177,211,54,.12) 0%, transparent 50%);
  animation: frontier-aurora-a 20s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Aurora Layer B — Gegenpol, bläulich-grün, tiefer */
.section-frontier::after {
  content: '';
  position: absolute;
  inset: -35%;
  background:
    radial-gradient(ellipse 50% 40% at 78% 65%, rgba(40,140,130,.11) 0%, transparent 52%),
    radial-gradient(ellipse 40% 55% at 15% 75%, rgba(177,211,54,.09) 0%, transparent 55%);
  animation: frontier-aurora-b 28s ease-in-out infinite reverse;
  pointer-events: none;
  z-index: 0;
}

@keyframes frontier-aurora-a {
  0%, 100% { transform: translate(0,0) rotate(0deg) scale(1); }
  30%       { transform: translate(-4%, 7%) rotate(12deg) scale(1.06); }
  65%       { transform: translate(6%, -4%) rotate(-8deg) scale(0.94); }
}

@keyframes frontier-aurora-b {
  0%, 100% { transform: translate(0,0) rotate(0deg) scale(1); }
  40%       { transform: translate(5%, -6%) rotate(-14deg) scale(1.09); }
  75%       { transform: translate(-3%, 5%) rotate(9deg) scale(0.91); }
}

@media (prefers-reduced-motion: reduce) {
  .section-frontier::before,
  .section-frontier::after { animation: none; }
}

@media (max-width: 767px) {
  .section-frontier { padding: 4.5rem 0 5rem; }
}

.section-frontier .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.frontier-vision {
  margin-bottom: 4rem;
}

.frontier-vision .section-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--nuv-green);
  margin-bottom: .75rem;
}

.frontier-vision h2 {
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  color: var(--nuv-white);
  line-height: 1.15;
  margin-bottom: 1.75rem;
  font-weight: 800;
}

.frontier-body {
  font-size: clamp(.97rem, 1.5vw, 1.1rem);
  color: rgba(255,255,255,.72);
  line-height: 1.75;
  margin-bottom: 1.25rem;
}

/* Begriffserklärung — gleiche Breite und Stil wie die chars-grid-Spalten darunter */
.frontier-terms {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
  align-items: center;
}

@media (min-width: 900px) {
  .frontier-terms { grid-template-columns: 1fr 1fr; }
}

.frontier-intro {
  /* no card — content sits directly on dark aurora bg */
}

/* Diagramm-Spalte */
.frontier-diagram-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.frontier-diagram-svg {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
}

.frontier-diagram-caption {
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(177,211,54,.65);
  text-align: center;
  margin: 0;
}

/* Orbit-Ring Animationen */
.fd-orbit-outer {
  transform-origin: 160px 160px;
  animation: fd-orbit-spin-slow 60s linear infinite;
}

.fd-orbit-inner {
  transform-origin: 160px 160px;
  animation: fd-orbit-spin-slow 35s linear infinite reverse;
}

.fd-center-glow {
  transform-origin: 160px 160px;
  animation: fd-glow-pulse 3.5s ease-in-out infinite;
}

@keyframes fd-orbit-spin-slow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: 800; }
}

@keyframes fd-glow-pulse {
  0%, 100% { opacity: .6; transform: scale(1); }
  50%       { opacity: 1;  transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .fd-orbit-outer, .fd-orbit-inner, .fd-center-glow { animation: none; }
}

.frontier-term-heading {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 700;
  color: var(--ink-deep);
  line-height: 1.25;
  margin-bottom: 1rem;
}

.frontier-term-heading--main {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  font-weight: 800;
  color: var(--nuv-white);
  line-height: 1.1;
  margin-bottom: 1.25rem;
  letter-spacing: -.02em;
}

/* frontier-intro inherits .frontier-body for text color (rgba white on dark bg) */

/* 2-Spalter: Was eine Frontier Org ausmacht | Unsere Haltung */
/* 5 Kernmerkmale */
.frontier-merkmale {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
  margin-bottom: 2rem;
}

@media (min-width: 900px) {
  .frontier-merkmale { grid-template-columns: repeat(3, 1fr); }
  .frontier-merkmal-card:last-child { grid-column: 2; }
}

@media (max-width: 599px) {
  .frontier-merkmale { grid-template-columns: 1fr; }
}

.frontier-merkmal-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 1.5rem;
  border-top: 3px solid var(--nuv-green);
}

.frontier-merkmal-num {
  display: block;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--nuv-green);
  margin-bottom: .6rem;
}

.frontier-merkmal-card h3 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--nuv-white);
  margin-bottom: .5rem;
  line-height: 1.3;
}

.frontier-merkmal-card p {
  font-size: .88rem;
  color: rgba(255,255,255,.6);
  line-height: 1.65;
  margin: 0;
}

/* 4 Arbeitsmodelle */
.frontier-arbeitsmodelle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

@media (min-width: 900px) {
  .frontier-arbeitsmodelle { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 499px) {
  .frontier-arbeitsmodelle { grid-template-columns: 1fr; }
}

.frontier-modell-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}

.frontier-modell-card--active {
  background: rgba(177,211,54,.08);
  border-color: rgba(177,211,54,.3);
}

.frontier-modell-stufe {
  display: block;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nuv-green);
  margin-bottom: .5rem;
}

.frontier-modell-card h4 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--nuv-white);
  margin-bottom: .4rem;
  line-height: 1.3;
}

.frontier-modell-card p {
  font-size: .82rem;
  color: rgba(255,255,255,.55);
  line-height: 1.6;
  margin: 0;
}

.frontier-modell-card--active h4 { color: var(--nuv-white); }
.frontier-modell-card--active p  { color: rgba(255,255,255,.72); }

/* Stat-Zitat in Haltungs-Karte */
.frontier-stat-quote {
  border-left: 3px solid var(--nuv-green);
  padding: .75rem 1rem;
  margin: 1rem 0;
  background: rgba(177,211,54,.08);
  border-radius: 0 8px 8px 0;
  font-size: clamp(.95rem, 1.3vw, 1.1rem);
  font-weight: 700;
  color: var(--nuv-white);
  line-height: 1.45;
}

.frontier-stat-quote cite {
  display: block;
  font-size: .72rem;
  font-weight: 400;
  font-style: normal;
  color: rgba(255,255,255,.5);
  margin-top: .4rem;
  font-family: var(--font-mono);
  letter-spacing: .05em;
}

/* Treiber + Haltung Grid */
.frontier-chars-grid {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
}

@media (min-width: 760px) {
  .frontier-chars-grid { grid-template-columns: 1fr 1fr; }
}

.frontier-chars-col h3 {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: var(--nuv-white);
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.25;
}

.frontier-chars-col--bullets {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 2rem;
}

.frontier-chars-col--haltung {
  background: rgba(177,211,54,.06);
  border: 1px solid rgba(177,211,54,.18);
  border-radius: 14px;
  padding: 2rem;
}

.frontier-chars-col--haltung p {
  font-size: clamp(.95rem, 1.3vw, 1.05rem);
  color: rgba(255,255,255,.72);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.frontier-chars-col--haltung p:last-child { margin-bottom: 0; }

.frontier-chars-col--treiber {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 2rem;
}

.frontier-treiber-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1rem;
}

.frontier-treiber-item {
  border-left: 2px solid var(--nuv-green);
  padding-left: 1rem;
}

.frontier-treiber-label {
  display: block;
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--nuv-green);
  margin-bottom: .4rem;
}

.frontier-treiber-item p {
  font-size: .9rem;
  color: rgba(255,255,255,.65);
  line-height: 1.65;
  margin: 0;
}

.frontier-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.frontier-bullets li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .95rem;
  color: rgba(255,255,255,.85);
  line-height: 1.55;
}

.frontier-bullet-icon {
  flex-shrink: 0;
  margin-top: .1rem;
}

.frontier-facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.frontier-facts li {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.frontier-facts li:last-child { border-bottom: none; padding-bottom: 0; }

.frontier-fact-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: var(--nuv-green);
  line-height: 1.1;
}

.frontier-fact-label {
  font-size: .85rem;
  color: rgba(255,255,255,.55);
  line-height: 1.5;
}

.frontier-automate-lead {
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  color: rgba(255,255,255,.7);
  line-height: 1.65;
  margin-top: .75rem;
}

/* ================================================================
   FRONTIER — "Wir automatisieren" Block (volle Breite, 3 Inhalts-Blöcke)
   ================================================================ */
.frontier-automate-section {
  margin-bottom: 4rem;
  padding: 2.5rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(177,211,54,.18);
  border-radius: 16px;
}

.frontier-automate-headline {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  color: var(--nuv-white);
  font-weight: 700;
  margin-bottom: .75rem;
  line-height: 1.2;
}

.frontier-automate-lead-main {
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  color: rgba(255,255,255,.65);
  line-height: 1.65;
  margin-bottom: 2.5rem;
  max-width: 72ch;
}

.frontier-automate-blocks {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .frontier-automate-blocks { grid-template-columns: repeat(3, 1fr); }
}

.frontier-automate-block {
  padding: 1.5rem;
  background: rgba(177,211,54,.05);
  border: 1px solid rgba(177,211,54,.15);
  border-radius: 12px;
}

.frontier-automate-block__label {
  display: block;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--nuv-green);
  margin-bottom: .85rem;
}

.frontier-automate-block p {
  font-size: .93rem;
  color: rgba(255,255,255,.68);
  line-height: 1.7;
  margin: 0;
  max-width: none;
}

/* 4-Spalter Foto-Reihe */
@media (min-width: 640px) {
  .frontier-photo-row { grid-template-columns: repeat(4, 1fr); }
}

/* Foto-Reihe */
.frontier-photo-row {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .frontier-photo-row { grid-template-columns: repeat(3, 1fr); }
}

.frontier-photo {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 12px;
  display: block;
  filter: brightness(.9);
  transition: filter .25s, transform .25s;
}

.frontier-photo:hover {
  filter: brightness(1);
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .frontier-photo { transition: none; }
  .frontier-photo:hover { transform: none; }
}

/* ================================================================
   SEKTION 5 — USE CASES (Horizontaler Foto-Scroll-Stream, Cream BG)
   4 Karten horizontal, Foto + Text, kein Card-Border
   ================================================================ */
.section-usecases {
  background: var(--cream);
  padding: var(--section-py) 0;
  overflow: hidden;
}

.section-usecases .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.usecases-header {
  margin-bottom: 3rem;
}

.usecases-header .section-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--nuv-green);
  margin-bottom: .75rem;
}

.usecases-header h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  color: var(--ink-deep);
}

/* Horizontaler Scroll-Stream */
.usecases-stream {
  display: grid;
  grid-template-columns: repeat(4, minmax(280px, 1fr));
  gap: 1.75rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  /* Snap-Scrolling Mobile */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 1100px) {
  .usecases-stream { overflow-x: visible; }
}

/* Scrollbar ausblenden aber funktional halten */
.usecases-stream::-webkit-scrollbar { height: 4px; }
.usecases-stream::-webkit-scrollbar-track { background: var(--cream-mid); border-radius: 2px; }
.usecases-stream::-webkit-scrollbar-thumb { background: var(--nuv-green); border-radius: 2px; }

/* Use-Case-Karte — Editorial ohne Border */
.usecase-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: transform .22s;
}

.usecase-card:hover { transform: translateY(-3px); }
.usecase-card:hover .usecase-card__photo-wrap { box-shadow: 0 12px 32px rgba(15,30,44,.18); }

.usecase-card__photo-wrap {
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4/3;
  margin-bottom: 1.25rem;
  transition: box-shadow .22s;
}

.usecase-card__photo-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.usecase-card__question {
  font-size: clamp(.95rem, 1.3vw, 1.05rem);
  font-weight: 700;
  color: var(--ink-deep);
  line-height: 1.4;
  margin-bottom: .75rem;
}

.usecase-card__answer {
  font-size: .9rem;
  color: #5A6576;
  line-height: 1.65;
  flex: 1;
}

.usecase-card__cta {
  margin-top: 1rem;
  font-size: .83rem;
  font-weight: 700;
  color: var(--nuv-green);
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: gap .18s;
}

.usecase-card__cta:hover { gap: .6rem; }

/* Analyse-Hinweis */
.analyse-hint-block {
  margin-top: 3rem;
  background: var(--ink-deep);
  border-radius: 16px;
  padding: 2rem 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.analyse-hint-block p {
  color: rgba(255,255,255,.78);
  font-size: .97rem;
  max-width: 480px;
}

.analyse-hint-block strong { color: var(--nuv-white); }

/* ================================================================
   SEKTION DIFFERENZIERUNG — auskommentiert, Section entfernt per Iteration 6
   .section-diff, .diff-header, .diff-underline-*, .diff-list-xl,
   .diff-xl-item, .diff-xl-num, .diff-xl-text, .diff-kernsatz
   ================================================================ */

/* ================================================================
   SEKTION IMPULSE — auskommentiert, Section entfernt per Iteration 6
   .section-impulse, .impulse-header, .impulse-index*, .impulse-all-cta,
   .newsletter-inline*, .btn-nl, .newsletter-doi-note
   ================================================================ */

/* ================================================================
   SEKTION AUTOMATE — Wir automatisieren, was wir können
   3 Cards mit Foto oben + Text unten, 3-Spalter auf Desktop
   ================================================================ */
.section-automate {
  background: var(--ink-deep);
  padding: var(--section-py) 0;
  position: relative;
  overflow: hidden;
}

/* Sanft treibende grüne Blobs — auf dunklem Hintergrund */
.section-automate::before {
  content: '';
  position: absolute;
  width: 650px; height: 650px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(177,211,54,.14) 0%, transparent 65%);
  top: -200px; left: -150px;
  pointer-events: none;
  z-index: 0;
  animation: automate-blob-a 16s ease-in-out infinite;
}

.section-automate::after {
  content: '';
  position: absolute;
  width: 550px; height: 550px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(177,211,54,.10) 0%, transparent 65%);
  bottom: -180px; right: -100px;
  pointer-events: none;
  z-index: 0;
  animation: automate-blob-b 20s ease-in-out infinite;
}

@keyframes automate-blob-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(60px, 80px) scale(1.12); }
  75%      { transform: translate(-40px, 30px) scale(0.92); }
}

@keyframes automate-blob-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  35%      { transform: translate(-70px, -50px) scale(1.08); }
  68%      { transform: translate(50px, 40px) scale(0.95); }
}

@media (prefers-reduced-motion: reduce) {
  .section-automate::before,
  .section-automate::after { animation: none; }
}

.section-automate .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  position: relative;
  z-index: 1;
}

.automate-header {
  margin-bottom: 3.5rem;
}

.automate-header .section-eyebrow {
  color: var(--nuv-green);
}

.automate-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  color: var(--nuv-white);
  line-height: 1.15;
  margin-bottom: 1rem;
}

.automate-lead {
  font-size: clamp(.97rem, 1.4vw, 1.1rem);
  color: rgba(255,255,255,.72);
  line-height: 1.7;
}

.automate-blocks-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .automate-blocks-grid { grid-template-columns: repeat(3, 1fr); }
}

.automate-block-card {
  background: var(--nuv-white);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.automate-block-card:hover {
  border-color: var(--nuv-green);
  box-shadow: 0 6px 32px rgba(0,0,0,.3);
}

.automate-block-card__img-wrap {
  width: 100%;
  aspect-ratio: 3/2;
  overflow: hidden;
}

.automate-block-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform .4s ease;
}

.automate-block-card:hover .automate-block-card__photo {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .automate-block-card__photo { transition: none; }
  .automate-block-card:hover .automate-block-card__photo { transform: none; }
}

.automate-block-card__body {
  padding: 1.75rem;
}

.automate-block-card__label {
  display: block;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--nuv-green);
  margin-bottom: .85rem;
}

.automate-block-card__body p {
  font-size: .95rem;
  color: #5A6576;
  line-height: 1.7;
  margin: 0;
}

/* ================================================================
   SEKTION 9 — MITMACHEN (Foto-Streifen Dark-Overlay + Apricot CTA)
   Full-bleed Foto, dunkles Overlay, Apricot-CTA, 2 Stellenkarten darunter
   ================================================================ */
.section-kontakt {
  position: relative;
  overflow: hidden;
  background: var(--ink-deep);
  margin: 0;
  padding: 0;
  display: block;
}

.kontakt-photo-strip {
  position: relative;
  min-height: 55vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media (max-width: 599px) { .kontakt-photo-strip { min-height: 45vh; } }

.kontakt-photo-strip__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.kontakt-photo-strip__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15,30,44,.68);
}

.kontakt-strip-content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  padding: 4rem clamp(2rem, 6vw, 5rem);
}

.kontakt-strip-content .section-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--nuv-white);
  opacity: .65;
  margin-bottom: 1rem;
}

.kontakt-strip-content h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--nuv-white);
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.kontakt-strip-content p {
  color: rgba(255,255,255,.75);
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
  line-height: 1.7;
  margin-bottom: 2rem;
}

/* Apricot CTA — einziger Einsatz dieser Farbe auf der gesamten Seite */
.btn-apricot {
  display: inline-block;
  padding: .9rem 2.25rem;
  background: var(--apricot);
  color: var(--nuv-white);
  border-radius: 10px;
  font-weight: 700;
  font-size: .97rem;
  letter-spacing: .01em;
  transition: background .18s, transform .18s;
  animation: apricotPulse 3s ease-in-out infinite;
}

.btn-apricot:hover {
  background: var(--apricot-dark);
  transform: translateY(-1px);
  animation: none;
}

@keyframes apricotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,156,95,.4); }
  50%       { box-shadow: 0 0 0 8px rgba(232,156,95,.0); }
}

/* Stellen-Karten unter dem Foto-Streifen */
.mitmachen-jobs-wrap {
  background: var(--nuv-white);
  padding: 3.5rem 0;
}

.mitmachen-jobs-wrap .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.mitmachen-jobs-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .mitmachen-jobs-grid { grid-template-columns: 1fr 1fr; }
}

.mitmachen-job-card {
  background: var(--nuv-white);
  border: 1px solid var(--nuv-border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .22s, box-shadow .22s;
}

.mitmachen-job-card:hover {
  border-color: var(--nuv-green);
  box-shadow: 0 4px 24px rgba(177,211,54,.12);
}

.mitmachen-job-card__photo {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.mitmachen-job-card__body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.mitmachen-job-card__badge {
  display: inline-block;
  padding: .25rem .7rem;
  border-radius: 100px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(177,211,54,.12);
  color: var(--nuv-green);
  border: 1px solid rgba(177,211,54,.3);
  align-self: flex-start;
  font-family: var(--font-mono);
}

.mitmachen-job-card h3 {
  font-size: 1.1rem;
  color: var(--ink-deep);
  line-height: 1.3;
}

.mitmachen-job-card__meta {
  font-size: .78rem;
  color: #8A9399;
  font-family: var(--font-mono);
}

.mitmachen-job-card__cta {
  margin-top: auto;
  padding-top: .75rem;
}

.mitmachen-more-cta {
  text-align: center;
  margin-top: 2rem;
}

/* ================================================================
   FOOTER (bleibt, kleine Anpassungen für Ink-Deep Konsistenz)
   ================================================================ */
.site-footer {
  background: var(--ink-deep);
  border-top: 2px solid var(--nuv-green);
  color: rgba(255,255,255,.85);
  padding: 2.5rem 0 2rem;
}

.site-footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.footer-grid-new {
  display: grid;
  gap: 2.5rem;
  margin-bottom: 3rem;
}

@media (min-width: 640px) {
  .footer-grid-new { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

@media (max-width: 639px) {
  .footer-grid-new { grid-template-columns: 1fr 1fr; }
}

.footer-brand {
  grid-column: 1 / -1;
}

@media (min-width: 640px) {
  .footer-brand { grid-column: 1; }
}

.footer-brand-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--nuv-white);
  text-decoration: none;
  letter-spacing: -.01em;
  margin-bottom: 1.25rem;
  transition: color .18s;
}

.footer-brand-name:hover { color: var(--nuv-green); }

.footer-address {
  font-size: .88rem;
  color: rgba(255,255,255,.8);
  line-height: 1.7;
  font-style: normal;
}

.footer-address a {
  color: var(--nuv-green);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .18s;
}

.footer-address a:hover { color: #B1D336; }

.site-footer h4 {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--nuv-green);
  font-family: var(--font-mono);
  margin-bottom: 1rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.footer-links a {
  font-size: .88rem;
  color: rgba(255,255,255,.9);
  transition: color .18s;
}

.footer-links a:hover { color: var(--nuv-green); }

.footer-linkedin {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  transition: color .18s;
}
.footer-linkedin:hover { color: var(--nuv-green); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1.5rem;
  font-size: .82rem;
  color: rgba(255,255,255,.55);
}

/* ================================================================
   BUTTONS (allgemein)
   ================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem 1.6rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: .9rem;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--nuv-green);
  color: var(--ink-deep);
}

.btn-primary:hover {
  background: var(--nuv-green-dark);
  color: var(--ink-deep);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--ink-deep);
  color: var(--ink-deep);
}

.btn-outline:hover {
  background: var(--ink-deep);
  color: var(--nuv-white);
}

.btn-ghost-green {
  background: transparent;
  border: 1.5px solid var(--nuv-green);
  color: var(--nuv-green);
  border-radius: 8px;
  padding: .6rem 1.4rem;
  font-size: .88rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: background .18s, color .18s;
}

.btn-ghost-green:hover {
  background: var(--nuv-green);
  color: var(--ink-deep);
}

/* ================================================================
   CONTAINER-HELPER
   ================================================================ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

/* ================================================================
   FOCUS (WCAG 2.2 AA)
   ================================================================ */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--nuv-green);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ================================================================
   DETAIL-SEITEN — visuelle Sprache konsistent
   ================================================================ */
.hero-inner-photo {
  position: relative;
  min-height: 54vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-inner-photo__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero-inner-photo__overlay {
  position: absolute;
  inset: 0;
  /* Transparent at top so photo breathes — dark ramp only at the bottom where text sits */
  background: linear-gradient(
    to bottom,
    rgba(15,30,44,0)    0%,
    rgba(15,30,44,.08) 45%,
    rgba(15,30,44,.72) 75%,
    rgba(15,30,44,.90) 100%
  );
}

.hero-inner-photo__content {
  position: relative;
  z-index: 2;
  padding-bottom: 4rem;
  padding-top: 8rem;
  color: var(--nuv-white);
  max-width: 1200px;
  margin: 0 auto;
  padding-left: clamp(1.25rem, 4vw, 2.5rem);
  padding-right: clamp(1.25rem, 4vw, 2.5rem);
}

.hero-inner-photo__content h1 {
  font-size: clamp(2rem, 3.8vw, 3rem);
  color: var(--nuv-white);
  margin-bottom: .85rem;
}

.hero-inner-photo__content p {
  color: rgba(255,255,255,.82);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 700;
  font-family: var(--font-display);
  max-width: none;
  line-height: 1.65;
}

/* Breadcrumb: aktuelle Seite grün (überschreibt inline styles) */
.hero-inner-photo .breadcrumb span:last-child,
.hero-inner-photo .breadcrumb #breadcrumb-title {
  color: var(--nuv-green) !important;
}

/* ================================================================
   LEISTUNGEN — Tiefenseite Blöcke
   ================================================================ */
.leistungen-nav-pill {
  display: inline-block;
  padding: .35rem .85rem;
  border-radius: 100px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--nuv-navy);
  background: #fff;
  border: 1px solid var(--nuv-border);
  text-decoration: none;
  transition: background .18s, color .18s, border-color .18s;
}

.leistungen-nav-pill:hover {
  background: #B1D336;
  border-color: #B1D336;
  color: #0F1E2C;
}

.leistungen-block {
  border-top: 1px solid var(--nuv-border);
}

.leistungen-block--alt {
  background: var(--nuv-surface, #F8F9FB);
}

.leistungen-block__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.leistungen-block__header {
  max-width: 760px;
  margin-bottom: 3rem;
}

.leistungen-block__header h2 {
  margin: .5rem 0 1rem;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--ink-deep);
}

.leistungen-block__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}

@media (max-width: 860px) {
  .leistungen-block__body {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.leistungen-block__text p {
  line-height: 1.7;
  color: #3A4553;
}

.leistungen-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.leistungen-list li {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  line-height: 1.55;
  color: #3A4553;
  font-size: .97rem;
}

.leistungen-list li::before {
  content: '';
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #B1D336;
  margin-top: .45rem;
}

.leistungen-block__visual {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.leistungen-block__visual--photo img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
  max-height: 340px;
  box-shadow: 0 4px 24px rgba(15,30,44,.12);
}

.leistungen-block__visual-caption {
  font-size: .82rem;
  color: var(--nuv-gray-600, #6B7280);
  font-family: var(--font-mono);
  line-height: 1.5;
  margin: 0;
}

.leistungen-block__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--nuv-border);
}

/* Team-Karten für Agenten */
.leistungen-team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
}

.agent-card {
  display: flex;
  align-items: center;
  gap: .85rem;
  background: #fff;
  border: 1px solid var(--nuv-border);
  border-radius: 10px;
  padding: .75rem 1rem;
  box-shadow: 0 1px 6px rgba(15,30,44,.06);
}

.agent-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 800;
  flex-shrink: 0;
  font-family: var(--font-display);
}

.agent-card__info {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.agent-card__info strong {
  font-size: .92rem;
  color: var(--ink-deep);
  line-height: 1.3;
}

.agent-card__info span {
  font-size: .75rem;
  color: var(--nuv-gray-600, #6B7280);
  font-family: var(--font-mono);
  line-height: 1.3;
}

/* sr-only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* Detailseiten Body */
.detail-body {
  background: var(--warm-white);
  padding: var(--section-py) 0;
}

.detail-body .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.detail-content-grid {
  display: grid;
  gap: 3rem;
  align-items: start;
}

@media (min-width: 900px) {
  .detail-content-grid { grid-template-columns: 2fr 1fr; }
}

.detail-main h2 {
  font-size: 1.4rem;
  color: var(--ink-deep);
  margin-bottom: 1rem;
  margin-top: 2.5rem;
}

.detail-main h2:first-child { margin-top: 0; }

.detail-main p {
  color: #5A6576;
  line-height: 1.75;
  margin-bottom: 1rem;
}

.detail-main ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.5rem;
}

.detail-main ul li {
  font-size: .95rem;
  color: #5A6576;
  padding-left: 1.3rem;
  position: relative;
  line-height: 1.55;
}

.detail-main ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--nuv-green);
  font-size: .85rem;
}

.agent-highlight {
  background: var(--ink-deep);
  color: var(--nuv-white);
  border-radius: 14px;
  padding: 2rem;
  margin: 2rem 0;
  border-left: 4px solid var(--nuv-green);
}

.agent-highlight h3 {
  color: var(--nuv-green);
  font-size: .95rem;
  font-family: var(--font-mono);
  margin-bottom: .75rem;
}

.agent-highlight p {
  color: rgba(255,255,255,.78);
  font-size: .92rem;
  line-height: 1.65;
}

.detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 5rem;
}

.sidebar-box {
  background: var(--nuv-white);
  border: 1px solid var(--nuv-border);
  border-radius: 14px;
  padding: 1.75rem;
}

.sidebar-box h4 { font-size: 1rem; color: var(--ink-deep); margin-bottom: 1rem; }
.sidebar-box p  { font-size: .88rem; color: #5A6576; line-height: 1.6; margin-bottom: 1rem; }

.sidebar-box--navy {
  background: var(--ink-deep);
  border-color: var(--ink-deep);
}
.sidebar-box--navy h4 { color: var(--nuv-white); }
.sidebar-box--navy p  { color: rgba(255,255,255,.7); }

.bottom-hint-block {
  background: var(--warm-white);
  border-top: 1px solid var(--nuv-border);
  border-bottom: 1px solid var(--nuv-border);
  padding: 2.5rem 0;
}

.bottom-hint-block__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.bottom-hint-block p {
  font-size: .97rem;
  color: #5A6576;
  max-width: 500px;
}

/* AI-Potenzialanalyse Seite */
.analyse-hero-section {
  background: var(--ink-deep);
  padding: 6rem 0 5rem;
}

.analyse-hero-section .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.analyse-hero-section h1 { color: var(--nuv-white); }
.analyse-hero-section p  { color: rgba(255,255,255,.72); }

.analyse-outcome-grid {
  display: grid;
  gap: 1.25rem;
  margin: 2.5rem 0;
}

@media (min-width: 768px) {
  .analyse-outcome-grid { grid-template-columns: repeat(3, 1fr); }
}

.analyse-outcome-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 1.75rem;
}

.analyse-outcome-card .num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--nuv-green);
  font-family: var(--font-mono);
  line-height: 1;
  margin-bottom: .5rem;
}

.analyse-outcome-card p {
  font-size: .9rem;
  color: rgba(255,255,255,.72);
  line-height: 1.6;
}

/* Karriere-Stellen */
.stellenanzeige-content { max-width: 780px; }

.stellenanzeige-content h2 {
  font-size: 1.3rem;
  margin-top: 2.5rem;
  margin-bottom: .75rem;
  color: var(--ink-deep);
}

.stellenanzeige-content h2:first-child { margin-top: 0; }

.stellenanzeige-content p,
.stellenanzeige-content li {
  font-size: .95rem;
  color: #5A6576;
  line-height: 1.7;
}

.stellenanzeige-content ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: .5rem 0 1.5rem;
}

.stellenanzeige-content ul li {
  padding-left: 1.3rem;
  position: relative;
}

.stellenanzeige-content ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--nuv-green);
  font-size: .85rem;
}

.stellen-cta-box {
  background: var(--nuv-green);
  color: var(--nuv-white);
  border-radius: 14px;
  padding: 2rem 2.25rem;
  margin-top: 2.5rem;
}

.stellen-cta-box h3 { color: var(--nuv-white); font-size: 1.2rem; margin-bottom: .5rem; }
.stellen-cta-box p  { color: rgba(255,255,255,.85); font-size: .9rem; margin-bottom: 1.25rem; }

.nice-tag {
  display: inline-block;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.7);
  border-radius: 100px;
  padding: .2rem .7rem;
  font-size: .78rem;
  font-weight: 600;
  font-family: var(--font-mono);
}

/* Kontakt-Seite */
.kontakt-grid {
  display: grid;
  gap: 3rem;
}

@media (min-width: 900px) {
  .kontakt-grid { grid-template-columns: 5fr 3fr; }
}

/* Impulse-Listenseite */
.impulse-listing {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .impulse-listing { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .impulse-listing { grid-template-columns: repeat(3, 1fr); }
}

.impulse-listing-card {
  background: var(--nuv-white);
  border: 1px solid var(--nuv-border);
  border-radius: 14px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: box-shadow .22s, transform .22s;
}

.impulse-listing-card:hover {
  box-shadow: 0 8px 28px rgba(15,30,44,.1);
  transform: translateY(-2px);
}

.impulse-listing-card__tag {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nuv-green);
  font-family: var(--font-mono);
}

.impulse-listing-card h3 {
  font-size: 1.05rem;
  color: var(--ink-deep);
  line-height: 1.35;
}

.impulse-listing-card p {
  font-size: .9rem;
  color: #5A6576;
  flex: 1;
  line-height: 1.6;
}

/* ================================================================
   MOBILE 360px FINE-TUNING
   ================================================================ */
@media (max-width: 360px) {
  .hero-glass { padding: 1.5rem 1.25rem; }
  .pain-photo-wrap { aspect-ratio: 4/3; }
  .kontakt-photo-strip { min-height: 38vh; }
  .newsletter-strip { padding: 1.75rem 1.5rem; }
  .analyse-hint-block { padding: 1.5rem; }
}

/* ================================================================
   SECTION-LABEL allgemein (Abwärtskompatibilität)
   ================================================================ */
.section-label {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--nuv-green);
  margin-bottom: .75rem;
}

/* ================================================================
   UEBER-UNS — Manifesto Intro + Eckdaten
   ================================================================ */
.wir-manifesto {
  background: var(--warm-white);
}

.wir-manifesto__lead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--ink-deep);
  line-height: 1.45;
  margin-bottom: 1.75rem;
}

.wir-manifesto__body {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(.95rem, 1.5vw, 1.08rem);
  color: #5A6576;
  line-height: 1.8;
}

.wir-eckdaten {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wir-eckdaten li {
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
  color: var(--nuv-navy);
  line-height: 1.6;
  padding: .9rem 0;
  border-bottom: 1px solid var(--cream-mid);
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
}

.wir-eckdaten li:last-child {
  border-bottom: none;
}

.wir-eckdaten li strong {
  font-weight: 700;
  color: var(--nuv-green-dark);
  min-width: 3.5rem;
  flex-shrink: 0;
}

/* ================================================================
   SCROLL-REVEAL — Topline-Pattern (data-reveal / data-stagger)
   Initial state: unsichtbar. JS setzt .is-visible sobald das Element
   in den Viewport scrollt. prefers-reduced-motion: sofort sichtbar.
   ================================================================ */

[data-reveal] {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.215, 0.61, 0.355, 1),
              transform 0.9s cubic-bezier(0.215, 0.61, 0.355, 1);
  will-change: opacity, transform;
}

[data-reveal="up"]    { transform: translateY(28px); }
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(0.96); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger-Kinder: gleiche Transition, verzögert per JS (inline style) */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1),
              transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  will-change: opacity, transform;
}

[data-stagger] > *.is-visible {
  opacity: 1;
  transform: none;
}

/* prefers-reduced-motion: alle Reveal-Elemente sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ================================================================
   HERO-BINARY DIVIDER — scrollender Binary-Stream zwischen Hero + Teaser
   Dunkler Hintergrund (#0F1E2C), Brand-Grün #B1D336 Zeichen.
   Endlos-Loop per translateX(-50%), Track ist 200% breit.
   prefers-reduced-motion: keine Animation, statische Zeile.
   ================================================================ */
.hero-binary-divider {
  display: block;
  width: 100%;
  height: 36px;
  background: #0F1E2C;
  overflow: hidden;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.hero-binary-track {
  display: inline-block;
  white-space: nowrap;
  /* Track 200% breit: zweimal der Inhalt, damit der Loop nahtlos ist */
  width: 200%;
  height: 36px;
  line-height: 36px;
  font-family: 'JetBrains Mono', 'Courier New', Consolas, monospace;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .18em;
  color: #B1D336;
  /* Leichtes Opacity-Flimmern über CSS-Animation auf dem Track */
  animation: binary-scroll 22s linear infinite;
}

@keyframes binary-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-binary-track {
    animation: none;
    width: 100%;
    overflow: hidden;
    text-overflow: clip;
  }
}

/* ================================================================
   FILE INPUT — Bewerbungsformular
   ================================================================ */
.nuv-form input[type="file"] {
  width: 100%;
  padding: .5rem .75rem;
  background: var(--nuv-white);
  border: 1px solid var(--nuv-border);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  color: var(--nuv-gray-700);
  cursor: pointer;
}
.nuv-form input[type="file"]:focus {
  outline: 2px solid var(--nuv-green);
  outline-offset: 2px;
}
.nuv-form input[type="file"]:invalid {
  border-color: #c0392b;
}
.form-hint {
  font-size: .82rem;
  color: var(--nuv-gray-500);
  margin-top: .4rem;
  line-height: 1.5;
}

/* ================================================================
   IMPULSE-SYSTEM — Tag-Filter, Artikel-Grid, Karten
   ================================================================ */
.impulse-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  padding-bottom: 2rem;
}

.impulse-filter-pill {
  display: inline-block;
  padding: .38rem .9rem;
  border-radius: 100px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--nuv-navy);
  background: #fff;
  border: 1.5px solid var(--nuv-border);
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
  font-family: var(--font-sans);
}

.impulse-filter-pill:hover,
.impulse-filter-pill--active {
  background: #B1D336;
  border-color: #B1D336;
  color: #0F1E2C;
}

.impulse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}

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

.impulse-card {
  background: #fff;
  border: 1px solid var(--nuv-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(15,30,44,.06);
  transition: box-shadow .2s, transform .2s;
}

.impulse-card:hover {
  box-shadow: 0 6px 28px rgba(15,30,44,.12);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .impulse-card:hover { transform: none; }
}

.impulse-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.impulse-card__image {
  aspect-ratio: 16/9;
  overflow: hidden;
}

.impulse-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.impulse-card:hover .impulse-card__image img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .impulse-card:hover .impulse-card__image img { transform: none; }
}

.impulse-card__body {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.5rem;
  flex: 1;
}

.impulse-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.impulse-card__tag {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 700;
  font-family: var(--font-mono);
  background: #E8F5C0;
  color: #3A5010;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* tag colour variants (rendered by impulse-render.js / impulse-artikel.js) */
.impulse-card__tag--green  { background: #E8F5C0; color: #3A5010; }
.impulse-card__tag--blue   { background: #D6E9F8; color: #1A3A5C; }
.impulse-card__tag--sand   { background: #F0E8D6; color: #5A4020; }
.impulse-card__tag--dark   { background: #D8DCE0; color: #1A2535; }

.impulse-card__tag--link {
  text-decoration: none;
  cursor: pointer;
  transition: background .15s;
}

.impulse-card__tag--link:hover {
  background: #B1D336;
  color: #0F1E2C;
}

.impulse-card__title {
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--ink-deep);
  margin: 0;
  font-weight: 700;
}

.impulse-card__excerpt {
  font-size: .92rem;
  color: #5A6576;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.impulse-card__meta {
  display: flex;
  justify-content: space-between;
  font-size: .77rem;
  color: var(--nuv-gray-600, #6B7280);
  font-family: var(--font-mono);
  padding-top: .75rem;
  border-top: 1px solid var(--nuv-border);
  margin-top: auto;
}

.impulse-empty {
  text-align: center;
  padding: 4rem 0;
  color: var(--nuv-gray-600, #6B7280);
}

/* ================================================================
   ARTIKEL-DETAIL — Hero, Layout, Sidebar
   ================================================================ */
.artikel-back-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--nuv-navy);
  text-decoration: none;
  padding: .45rem .9rem;
  border-radius: 8px;
  border: 1px solid var(--nuv-border);
  transition: background .16s, border-color .16s;
  margin-bottom: 1.5rem;
}

.artikel-back-link:hover {
  background: var(--nuv-surface);
  border-color: #B1D336;
}

.artikel-hero {
  position: relative;
  min-height: 48vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.artikel-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.artikel-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(170deg, rgba(15,30,44,.1) 0%, rgba(15,30,44,.88) 100%);
}

.artikel-hero__content {
  position: relative;
  z-index: 2;
  padding-top: 7rem;
  padding-bottom: 3.5rem;
  color: #fff;
}

.artikel-hero__content h1 {
  font-size: clamp(1.5rem, 3.5vw, 2.6rem);
  color: #fff;
  max-width: 780px;
  line-height: 1.25;
  margin-top: .75rem;
}

.artikel-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 4rem;
  align-items: start;
  padding-top: 3rem;
  padding-bottom: 2rem;
}

@media (max-width: 960px) {
  .artikel-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .artikel-sidebar {
    order: -1;
  }
}

.artikel-meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .82rem;
  color: var(--nuv-gray-600, #6B7280);
  font-family: var(--font-mono);
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--nuv-border);
}

.artikel-body h2 {
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  color: var(--ink-deep);
  margin: 2.5rem 0 1rem;
  line-height: 1.3;
}

.artikel-body p {
  line-height: 1.75;
  color: #3A4553;
  margin-bottom: 1.1rem;
  font-size: 1rem;
  max-width: 68ch;
}

.artikel-body strong {
  color: var(--ink-deep);
  font-weight: 700;
}

.artikel-diagram {
  margin: 3rem 0;
  padding: 2rem;
  background: var(--nuv-surface);
  border: 1px solid var(--nuv-border);
  border-radius: 14px;
  overflow-x: auto;
}

.artikel-diagram h3 {
  font-size: 1rem;
  color: var(--nuv-gray-600);
  font-family: var(--font-mono);
  margin: 0 0 1.5rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.artikel-tags-footer {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 2.5rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--nuv-border);
}

.artikel-frage-block {
  background: var(--nuv-surface);
  border: 1px solid var(--nuv-border);
  border-radius: 14px;
  padding: 1.75rem 2rem;
  margin-top: 1.5rem;
}

.artikel-frage-block h4 {
  font-size: 1.05rem;
  color: var(--ink-deep);
  margin: 0 0 .5rem;
}

.artikel-frage-block p {
  font-size: .9rem;
  color: #5A6576;
  margin: 0 0 1.25rem;
  max-width: 50ch;
}

/* Sidebar */
.artikel-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  position: sticky;
  top: 100px;
}

.autor-block {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--nuv-border);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(15,30,44,.06);
}

.autor-block__photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.autor-block__info {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.autor-block__info strong {
  font-size: .97rem;
  color: var(--ink-deep);
}

.autor-block__info span {
  font-size: .8rem;
  color: #5A6576;
  line-height: 1.4;
}

.autor-block__mail {
  font-size: .8rem;
  color: #B1D336;
  text-decoration: none;
  font-weight: 600;
  margin-top: .2rem;
}

.autor-block__mail:hover { text-decoration: underline; }

.sidebar-newsletter {
  padding: 1.5rem;
  background: var(--ink-deep);
  border-radius: 14px;
  color: #fff;
}

.sidebar-newsletter h4 {
  color: #fff;
  font-size: 1rem;
  margin: 0 0 .5rem;
}

.sidebar-newsletter p {
  font-size: .85rem;
  color: rgba(255,255,255,.72);
  margin: 0 0 1.25rem;
  line-height: 1.55;
}

.sidebar-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.sidebar-newsletter-form input {
  padding: .6rem .9rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: .9rem;
  font-family: var(--font-sans);
}

.sidebar-newsletter-form input::placeholder { color: rgba(255,255,255,.45); }

/* ================================================================
   NEWSLETTER-BAND — Impulse-Seite (dark section, 2-column)
   ================================================================ */
.nuv-newsletter {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 740px) {
  .nuv-newsletter { grid-template-columns: 1fr 1.3fr; }
}

.nuv-newsletter__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--nuv-green);
  margin-bottom: .75rem;
}

.nuv-newsletter__heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  color: #fff;
  line-height: 1.2;
  margin-bottom: .75rem;
}

.nuv-newsletter__desc {
  font-size: .95rem;
  color: rgba(255,255,255,.65);
  line-height: 1.65;
}

.nuv-newsletter__form {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.nuv-newsletter__form input[type="email"],
.nuv-newsletter__form input[type="text"] {
  padding: .75rem 1rem;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  color: #fff;
  font-size: .97rem;
  font-family: var(--font-sans);
  width: 100%;
  box-sizing: border-box;
  transition: border-color .18s;
}

.nuv-newsletter__form input:focus {
  outline: none;
  border-color: var(--nuv-green);
  box-shadow: 0 0 0 3px rgba(177,211,54,.18);
}

.nuv-newsletter__form input::placeholder { color: rgba(255,255,255,.38); }

.nuv-newsletter__legal {
  font-size: .78rem;
  color: rgba(255,255,255,.4);
  line-height: 1.55;
}

.nuv-newsletter__legal a { color: rgba(255,255,255,.55); }

/* ================================================================
   PRINT
   ================================================================ */
@media print {
  .site-header, video, .hero-photo__bg, .hero-video-controls,
  .hero-scroll-hint { display: none; }
  .hero-photo { min-height: auto; padding: 2rem 0; background: white; }
  .hero-glass { background: none !important; border: none !important; }
  .hero-glass * { color: #000 !important; }
}


/* ================================================================
   LP -- Leistungsseiten Komponenten-Bibliothek
   Shared classes for all inner service pages.
   Add here once, reuse across all pages.
   ================================================================ */

/* Sections */
.lp-section { padding: var(--section-py, 5rem) 0; position: relative; }
.lp-section .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
.lp-section--light { background: var(--warm-white); position: relative; overflow: hidden; }
.lp-section--cream { background: var(--cream);     position: relative; overflow: hidden; }
.lp-section--dark  { background: var(--ink-deep);  position: relative; overflow: hidden; }
.lp-section--light .container,
.lp-section--cream .container,
.lp-section--dark  .container { position: relative; z-index: 1; }

/* Eyebrow / Section-Label */
.lp-eyebrow,
.section-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--nuv-green);
  margin-bottom: .75rem;
}

/* Headlines */
.lp-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.55rem, 2.8vw, 2.3rem);
  line-height: 1.15;
  margin-bottom: 1.5rem;
}
.lp-h2--light { color: var(--ink-deep); }
.lp-h2--dark  { color: var(--nuv-white); }

/* Body Text */
.lp-body {
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
  line-height: 1.8;
  margin-bottom: 1.25rem;
  max-width: 66ch;
}
.lp-body--light { color: #5A6576; }
.lp-body--dark  { color: rgba(255,255,255,.75); }
.lp-body--dark strong { color: var(--nuv-green); }

/* 2-col Grid: main + sidebar */
.lp-grid { display: grid; gap: 3.5rem; align-items: start; }
@media (min-width: 860px) { .lp-grid { grid-template-columns: 2fr 1fr; } }

.lp-sidebar { display: flex; flex-direction: column; gap: 2rem; }

/* Photo */
.lp-photo { border-radius: 14px; overflow: hidden; box-shadow: 0 4px 20px rgba(15,30,44,.12); }
.lp-photo img { display: block; width: 100%; height: auto; }

/* Checklist (with icon element) */
.lp-checklist {
  list-style: none; padding: 0; margin: 1.5rem 0 0;
  display: flex; flex-direction: column; gap: .85rem;
}
.lp-checklist li { display: flex; align-items: flex-start; gap: .75rem; font-size: .97rem; line-height: 1.55; }
.lp-checklist--light li { color: #4A5568; }
.lp-checklist--dark  li { color: rgba(255,255,255,.82); }
.lp-checklist__icon  { flex-shrink: 0; margin-top: .1rem; }

/* Checklist (with CSS checkmark) */
.lp-checklist--light,
.lp-checklist--dark {
  list-style: none; padding: 0; margin: 1.5rem 0 0;
  display: flex; flex-direction: column; gap: .65rem;
}
.lp-checklist--light li,
.lp-checklist--dark li {
  display: flex; align-items: flex-start; gap: .65rem;
  font-size: .97rem; line-height: 1.5;
}
.lp-checklist--light li::before,
.lp-checklist--dark li::before {
  content: '';
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  background: var(--nuv-green)
    url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 9l3 3 5-5' stroke='%230F1E2C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center/14px no-repeat;
  margin-top: 2px;
}
.lp-checklist--light li { color: #3A4552; }
.lp-checklist--dark  li { color: rgba(255,255,255,.82); }

/* Steps */
.lp-steps { display: flex; flex-direction: column; gap: 2rem; margin-top: 2rem; }
.lp-step  { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1.25rem; align-items: flex-start; }
.lp-step__num {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--nuv-green); color: var(--ink-deep);
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.lp-step__title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink-deep); margin-bottom: .4rem; }
.lp-step__body .lp-step__title { color: var(--nuv-white); }
.lp-step__desc  { font-size: .95rem; color: #5A6576; line-height: 1.65; margin: 0; }

/* Feature Grid */
.lp-feature-grid { display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 640px) { .lp-feature-grid { grid-template-columns: repeat(2, 1fr); } }
.lp-feature-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(177,211,54,.15);
  border-radius: 12px; padding: 1.5rem;
  transition: background .2s, border-color .2s;
}
.lp-feature-card:hover { background: rgba(177,211,54,.08); border-color: rgba(177,211,54,.3); }
.lp-feature-card__title { font-weight: 700; font-size: .95rem; color: var(--nuv-green); margin-bottom: .5rem; }
.lp-feature-card__desc,
.lp-feature-card p { font-size: .9rem; color: rgba(255,255,255,.65); line-height: 1.65; margin: 0; }

/* Tech Grid */
.lp-tech-grid { display: grid; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 520px) { .lp-tech-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .lp-tech-grid { grid-template-columns: repeat(3, 1fr); } }
.lp-tech-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(177,211,54,.14);
  border-radius: 12px; padding: 1.5rem 1.4rem;
  transition: background .2s, border-color .2s;
}
.lp-tech-card:hover { background: rgba(177,211,54,.07); border-color: rgba(177,211,54,.35); }
.lp-tech-card__label {
  font-family: var(--font-mono); font-size: .65rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--nuv-green); display: block; margin-bottom: .5rem;
}
.lp-tech-card__title { font-family: var(--font-display); font-weight: 700; font-size: .97rem; color: var(--nuv-white); margin-bottom: .5rem; }
.lp-tech-card__desc  { font-size: .86rem; color: rgba(255,255,255,.58); line-height: 1.6; margin: 0; }

/* Project Cards */
.lp-project-grid { display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 600px) { .lp-project-grid { grid-template-columns: repeat(2, 1fr); } }
.lp-project-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: 1.75rem 1.5rem;
  transition: background .2s, border-color .2s, transform .2s;
}
.lp-project-card:hover { background: rgba(177,211,54,.08); border-color: rgba(177,211,54,.3); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .lp-project-card { transition: none; } .lp-project-card:hover { transform: none; } }
.lp-project-card__customer {
  font-family: var(--font-mono); font-size: .65rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--nuv-green); display: block; margin-bottom: .5rem;
}
.lp-project-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--nuv-white); line-height: 1.3; margin-bottom: .65rem; }
.lp-project-card__desc  { font-size: .86rem; color: rgba(255,255,255,.62); line-height: 1.6; margin: 0; }

/* Product Box */
.lp-product-box {
  background: var(--ink-deep);
  border: 1px solid rgba(177,211,54,.25);
  border-radius: 16px; padding: 2.5rem; margin-top: 2.5rem;
}
.lp-product-box__label {
  display: inline-block; font-family: var(--font-mono);
  font-size: .62rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--nuv-green); border: 1px solid rgba(177,211,54,.35);
  border-radius: 4px; padding: .2rem .55rem; margin-bottom: 1rem;
}
.lp-product-box h3,
.lp-product-box__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  color: var(--nuv-white); line-height: 1.2; margin-bottom: .75rem;
}
.lp-product-box p           { color: rgba(255,255,255,.72); font-size: .97rem; line-height: 1.75; margin-bottom: 1rem; }
.lp-product-box__price      { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--nuv-green); line-height: 1; margin-bottom: .35rem; }
.lp-product-box__price-note { font-size: .82rem; color: rgba(255,255,255,.5); font-family: var(--font-mono); letter-spacing: .04em; margin-bottom: 1.5rem; }

/* CTA-Band (photo background variant used on Leistungsseiten) */
.lp-cta-band { position: relative; overflow: hidden; background: var(--ink-deep); padding: 5rem 0; text-align: center; border-top: 1px solid rgba(177,211,54,.15); }
.lp-cta-band__bg  { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.lp-cta-band__overlay { position: absolute; inset: 0; background: rgba(15,30,44,.72); }
.lp-cta-band .container { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.lp-cta-band .btn-group, .lp-cta-band .lp-btn-group { justify-content: center; }
.lp-cta-band h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.55rem, 2.8vw, 2.4rem); color: var(--nuv-white); margin-bottom: 1rem; }
.lp-cta-band p  { color: rgba(255,255,255,.65); max-width: 560px; margin: 0 auto 2.5rem; font-size: 1rem; line-height: 1.7; }

/* Agent Pills */
.lp-agent-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.lp-agent-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(177,211,54,.1); border: 1px solid rgba(177,211,54,.25);
  border-radius: 100px; padding: .3rem .85rem;
  font-size: .82rem; color: rgba(255,255,255,.82);
}
.lp-agent-pill strong { color: var(--nuv-green); font-weight: 700; }

/* Button Group */
.lp-btn-group,
.btn-group { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* Hero H1 -- all inner pages (overrides the lighter default in v4.css) */
.hero-inner-photo__content h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.4rem);
  color: var(--nuv-white);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: .85rem;
}