/* ==========================
   NUMAS — Premium Editorial Theme
   Mint Green + Gold Accents
========================== */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap");

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

:root{
  --bg: #fbfbf7;
  --fg: #0f172a;
  --muted: rgba(15,23,42,.68);
  --line: rgba(15,23,42,.12);
  --soft: rgba(15,23,42,.05);

  --primary: #6ee7b7;
  --primary-deep: #10b981;
  --gold: #d4af37;
  --gold-soft: rgba(212,175,55,.22);

  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --container: 1180px;
  --shadow: 0 18px 55px rgba(15,23,42,.10);
}

html {
  scroll-behavior: smooth;
}


body{
  margin:0;
  overflow-x: clip;
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--fg);
  line-height:1.6;
  background:
    radial-gradient(1200px 700px at 10% 8%, rgba(110,231,183,.22), transparent 58%),
    radial-gradient(1100px 700px at 85% 18%, rgba(212,175,55,.14), transparent 58%),
    radial-gradient(900px 600px at 50% 110%, rgba(15,23,42,.08), transparent 50%),
    linear-gradient(180deg, #ffffff, var(--bg));
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

.header, main, .footer{
  position:relative;
  z-index:1;
}

img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  width:min(var(--container), calc(100% - 2rem));
  margin-inline:auto;
}

/* accessibility */
.skip-link{
  position:absolute;
  left:1rem;
  top:1rem;
  transform:translateY(-160%);
  background:var(--fg);
  color:#fff;
  padding:.7rem 1rem;
  border-radius:.9rem;
  z-index:999;
}
.skip-link:focus{ transform:translateY(0); }

.sr-only{
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

:focus-visible{
  outline:3px solid rgba(16,185,129,.35);
  outline-offset:3px;
  border-radius:12px;
}

/* header */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(251,251,247,.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}

.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.95rem 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-weight:950;
  letter-spacing:-.03em;
  font-family:"Space Grotesk", "Inter", sans-serif;
}

.brand__mark{
  width:14px;
  height:14px;
  border-radius:6px;
  background:linear-gradient(135deg, var(--primary-deep), var(--primary));
  box-shadow:0 0 0 4px rgba(110,231,183,.22);
}

.nav{
  display:flex;
  align-items:center;
  gap:.35rem;
}

.nav a{
  padding:.55rem .75rem;
  border-radius:.9rem;
  color:rgba(15,23,42,.82);
}

.nav a:hover{
  text-decoration:none;
  background:var(--soft);
}

.nav a[aria-current="page"]{
  background:rgba(110,231,183,.22);
  border:1px solid rgba(16,185,129,.22);
}

.nav__cta{
  margin-left:.25rem;
  background:linear-gradient(135deg, rgba(16,185,129,.95), rgba(110,231,183,.95));
  color:#062217;
  font-weight:950;
  border:1px solid rgba(16,185,129,.18);
}
.nav__cta:hover{
  filter:brightness(1.03);
  text-decoration:none;
}

.nav-toggle{
  display:none;
  border:1px solid var(--line);
  background:rgba(255,255,255,.8);
  color:var(--fg);
  border-radius:1rem;
  padding:.55rem .65rem;
}

.burger{
  width:22px;
  height:14px;
  display:inline-block;
  background:
    linear-gradient(var(--fg) 0 0) 0 0/100% 2px,
    linear-gradient(var(--fg) 0 0) 0 50%/100% 2px,
    linear-gradient(var(--fg) 0 0) 0 100%/100% 2px;
  background-repeat:no-repeat;
}

@media (max-width: 920px){
  .nav-toggle{ display:inline-flex; align-items:center; }
  .nav{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:.25rem;
    padding:1rem;
    background:rgba(251,251,247,.92);
    border-bottom:1px solid var(--line);
  }
  .nav.is-open{ display:flex; }
  .nav a{ width:100%; }
}

/* generic */
.section{
  position: relative;
  padding:clamp(4rem, 6vw, 7rem) 0;
}

/* mehr Farbverteilung über die ganze Seite */
.section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.9;
}

.section:nth-of-type(odd)::before{
  background:
    radial-gradient(700px 260px at 12% 20%, rgba(110,231,183,.10), transparent 60%),
    radial-gradient(520px 220px at 90% 78%, rgba(212,175,55,.08), transparent 60%);
}

.section:nth-of-type(even)::before{
  background:
    radial-gradient(680px 260px at 88% 18%, rgba(110,231,183,.08), transparent 60%),
    radial-gradient(460px 180px at 10% 82%, rgba(212,175,55,.07), transparent 60%);
}

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

.eyebrow,
.kicker{
  margin:0 0 .8rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
  font-weight:800;
  color:rgba(15,23,42,.56);
}

.section-head{
  display:grid;
  gap:.35rem;
  margin-bottom:2rem;
}

.section-title{
  margin:0;
  font-family:"Space Grotesk", "Inter", sans-serif;
  font-size:clamp(2rem, 3.6vw, 3.2rem);
  line-height:1.05;
  letter-spacing:-.04em;
}

.display{
  margin:0;
  font-family:"Space Grotesk", "Inter", sans-serif;
  font-size:clamp(2.7rem, 6vw, 5.6rem);
  line-height:.96;
  letter-spacing:-.06em;
  max-width: 12ch;
  overflow-wrap: anywhere;
  position: relative;
  z-index: 3;
}

.accent{
  color:var(--primary-deep);
}

.lead{
  margin:0;
  color:rgba(15,23,42,.74);
  font-size:1.05rem;
  max-width:64ch;
}

.lead--hero{
  margin-top:1.25rem;
}

/* buttons */
.actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1.4rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.95rem 1.18rem;
  border-radius:var(--radius-pill);
  border:1px solid rgba(15,23,42,.16);
  background:rgba(255,255,255,.75);
  color:rgba(15,23,42,.92);
  font-weight:900;
  letter-spacing:-.01em;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover{
  text-decoration:none;
  transform:translateY(-1px);
  box-shadow:0 10px 25px rgba(15,23,42,.10);
}

.btn--primary{
  background:linear-gradient(135deg, rgba(16,185,129,.95), rgba(110,231,183,.95));
  color:#062217;
  border:1px solid rgba(16,185,129,.18);
}
.btn--primary:hover{
  filter:brightness(1.03);
}

/* hero editorial */
.hero--editorial{
  padding:clamp(3.5rem, 7vw, 7rem) 0 4rem;
}

.hero__editorial{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 520px);
  gap:clamp(1.5rem, 4vw, 4rem);
  align-items:end;
}

.hero__content{
  padding-top:1rem;
  position: relative;
  z-index: 3;
}

.hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:1.3rem;
}

.badge{
  border:1px solid rgba(15,23,42,.14);
  background:rgba(255,255,255,.66);
  padding:.45rem .7rem;
  border-radius:var(--radius-pill);
  color:rgba(15,23,42,.72);
  font-weight:850;
}

.hero__scene{
  position:relative;
  min-height:620px;
  z-index: 1;
}

.scene{
  border:1px solid rgba(15,23,42,.12);
  border-radius:32px;
  box-shadow:var(--shadow);
}

.scene--main{
  position:absolute;
  inset:0 0 0 0;
  background:
    linear-gradient(135deg, rgba(16,185,129,.12), transparent 40%),
    radial-gradient(circle at 20% 20%, rgba(110,231,183,.38), transparent 35%),
    radial-gradient(circle at 78% 26%, rgba(212,175,55,.18), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.72));
  overflow:hidden;
}

.scene--main::before{
  content:"";
  position:absolute;
  inset:10% 12%;
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,.01)),
    repeating-linear-gradient(
      90deg,
      rgba(15,23,42,.03) 0,
      rgba(15,23,42,.03) 1px,
      transparent 1px,
      transparent 58px
    );
  border:1px solid rgba(15,23,42,.08);
}

.scene--main::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:-40px;
  bottom:-40px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(16,185,129,.26), transparent 65%);
  filter:blur(6px);
}

.floating-card{
  position:absolute;
  z-index:2;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);
  border:1px solid rgba(15,23,42,.1);
  border-radius:20px;
  box-shadow:0 12px 30px rgba(15,23,42,.08);
}

.floating-card--top{
  top:22px;
  right:-10px;
  width:min(290px, 80%);
  padding:1rem 1rem 1.05rem;
}

.floating-card--bottom{
  left:-10px;
  bottom:24px;
  width:min(230px, 70%);
  padding:.95rem 1rem;
}

.floating-card__label{
  margin:0 0 .35rem;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(15,23,42,.5);
}

.floating-card__title{
  margin:0 0 .35rem;
  font-family:"Space Grotesk", "Inter", sans-serif;
  font-size:1.15rem;
  font-weight:700;
  line-height:1.1;
}

.floating-card__text{
  margin:0;
  color:rgba(15,23,42,.74);
  font-size:.95rem;
}

.mini-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.3rem;
  font-weight:700;
  color:rgba(15,23,42,.76);
}

/* statement */
.statement__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:2rem;
  align-items:start;
}

.statement__text{
  display:grid;
  gap:1rem;
  color:rgba(15,23,42,.76);
}

.statement__text p{
  margin:0;
  font-size:1.02rem;
}

/* feature rows */
.feature-list{
  display:grid;
  gap:1.25rem;
}

.feature-row{
  display:grid;
  grid-template-columns: minmax(280px, 430px) minmax(0, 1fr);
  gap:1.5rem;
  align-items:center;
  padding:1rem 0;
}

.feature-row--reverse{
  grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
}

.feature-row--reverse .feature-row__visual{
  order:2;
}

.feature-row--reverse .feature-row__content{
  order:1;
}

.feature-row__visual{
  min-height:320px;
  border-radius:28px;
  border:1px solid rgba(15,23,42,.12);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.65));
}

.feature-row__visual::before,
.feature-row__visual::after{
  content:"";
  position:absolute;
  border-radius:28px;
}

.feature-row__visual--one{
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(0,200,150,.15) 0px,
      rgba(0,200,150,.15) 1px,
      transparent 1px,
      transparent 20px
    ),
    #1a1a2e;
}
.feature-row__visual--one::before{
  inset:14% 14%;
  border:1px solid rgba(15,23,42,.1);
  background:
    linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,.01)),
    repeating-linear-gradient(
      0deg,
      rgba(15,23,42,.04) 0,
      rgba(15,23,42,.04) 1px,
      transparent 1px,
      transparent 44px
    );
}
.feature-row__visual--one::after{
  width:180px;
  height:180px;
  right:-30px;
  bottom:-20px;
  background:radial-gradient(circle, rgba(212,175,55,.25), transparent 65%);
}

.feature-row__visual--two{
  background:
    radial-gradient(circle at center, rgba(255,255,255,.10) 1.5px, transparent 1.5px),
    #2d2d2d;
}
.feature-row__visual--two::before{
  inset:16% 12%;
  border-radius:22px;
  border:1px solid rgba(15,23,42,.08);
  background:
    linear-gradient(180deg, rgba(110,231,183,.18), transparent 60%),
    linear-gradient(90deg, rgba(15,23,42,.04), transparent 50%);
}
.feature-row__visual--two::after{
  width:120px;
  height:120px;
  left:22px;
  bottom:22px;
  background:linear-gradient(135deg, rgba(16,185,129,.28), rgba(110,231,183,.08));
  border:1px solid rgba(16,185,129,.18);
}

.feature-row__visual--three{
  background:#1a1208;
}
.feature-row__visual--four{
  background:linear-gradient(135deg,#0f172a 0%,#10b981 100%);
}
.feature-row__visual--three::before{
  inset:12%;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.08);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(15,23,42,.03) 0,
      rgba(15,23,42,.03) 1px,
      transparent 1px,
      transparent 36px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(15,23,42,.03) 0,
      rgba(15,23,42,.03) 1px,
      transparent 1px,
      transparent 36px
    );
}
.feature-row__visual--three::after{
  width:160px;
  height:160px;
  right:18px;
  top:18px;
  background:radial-gradient(circle, rgba(16,185,129,.16), transparent 60%);
}

.feature-row__content{
  display:grid;
  gap:.8rem;
}

.feature-row__number{
  margin:0;
  font-family:"Space Grotesk", "Inter", sans-serif;
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--primary-deep);
}

.feature-row__content h3{
  margin:0;
  font-family:"Space Grotesk", "Inter", sans-serif;
  font-size:clamp(1.4rem, 2vw, 2rem);
  line-height:1.08;
  letter-spacing:-.03em;
}

.feature-row__content p{
  margin:0;
  color:rgba(15,23,42,.76);
  max-width:58ch;
}

/* chips */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}

.chip{
  border:1px solid rgba(16,185,129,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(110,231,183,.12));
  padding:.35rem .55rem;
  border-radius:var(--radius-pill);
  font-weight:800;
  color:rgba(15,23,42,.72);
  font-size:.9rem;
}

/* founder */
.founder{
  display:grid;
  grid-template-columns: 1fr minmax(300px, 420px);
  gap:2rem;
  align-items:center;
}

.founder__text{
  display:grid;
  gap:1rem;
}

.founder__text p{
  margin:0;
  color:rgba(15,23,42,.76);
}

.founder__facts{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:.85rem;
  margin-top:.4rem;
}

.fact-box{
  border:1px solid rgba(15,23,42,.12);
  background:
    radial-gradient(circle at 85% 15%, rgba(110,231,183,.10), transparent 40%),
    rgba(255,255,255,.64);
  border-radius:20px;
  padding:1rem;
  box-shadow:0 10px 25px rgba(15,23,42,.06);
}

.fact-box__label{
  display:block;
  margin-bottom:.4rem;
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:800;
  color:rgba(15,23,42,.5);
}

.portrait-card{
  position:relative;
  border:1px solid rgba(15,23,42,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.68));
  border-radius:32px;
  padding:1rem;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.portrait-card__image{
  min-height:500px;
  border-radius:24px;
  background:
    radial-gradient(circle at 30% 20%, rgba(110,231,183,.28), transparent 28%),
    radial-gradient(circle at 80% 24%, rgba(212,175,55,.18), transparent 24%),
    linear-gradient(180deg, rgba(15,23,42,.04), rgba(15,23,42,.02)),
    repeating-linear-gradient(
      90deg,
      rgba(15,23,42,.03) 0,
      rgba(15,23,42,.03) 1px,
      transparent 1px,
      transparent 52px
    );
  border:1px solid rgba(15,23,42,.08);
  position:relative;
}

.portrait-card__image::after{
  content:"";
  position:absolute;
  inset:12% 18% 10% 18%;
  border-radius:24px 24px 30px 30px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.55), transparent 22%),
    linear-gradient(180deg, rgba(16,185,129,.12), rgba(255,255,255,.2) 50%, rgba(15,23,42,.04));
  border:1px solid rgba(15,23,42,.08);
  opacity:.95;
}

.portrait-card__note{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin-top:.8rem;
  color:rgba(15,23,42,.7);
  font-weight:700;
  font-size:.95rem;
}

/* principles */
.principles{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:1rem;
}

.principle-card{
  border:1px solid rgba(15,23,42,.12);
  background:
    radial-gradient(circle at 88% 12%, rgba(110,231,183,.10), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.62));
  border-radius:24px;
  padding:1.15rem;
  box-shadow:0 10px 25px rgba(15,23,42,.06);
  position: relative;
}

.principle-card::after{
  content:"";
  position:absolute;
  left:1.15rem;
  top:0;
  width:64px;
  height:3px;
  background:linear-gradient(90deg, var(--primary-deep), rgba(110,231,183,.1));
  border-radius:999px;
}

.principle-card__number{
  display:block;
  margin-bottom:.65rem;
  color:var(--primary-deep);
  font-weight:800;
  letter-spacing:.1em;
}

.principle-card h3{
  margin:0 0 .55rem;
  font-family:"Space Grotesk", "Inter", sans-serif;
  font-size:1.2rem;
  line-height:1.08;
}

.principle-card p{
  margin:0;
  color:rgba(15,23,42,.74);
}

/* cta */
.cta-box{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:2rem;
  align-items:center;
  padding:1.6rem 1.4rem 1.6rem 0;
  border-top:1px solid var(--line);
  position: relative;
}

.cta-box::before{
  content:"";
  position:absolute;
  inset:-12% -2% -12% -2%;
  background:
    radial-gradient(520px 180px at 12% 50%, rgba(110,231,183,.12), transparent 60%),
    radial-gradient(360px 140px at 88% 50%, rgba(212,175,55,.08), transparent 60%);
  pointer-events:none;
  z-index:-1;
}

/* footer */
.footer{
  border-top:1px solid var(--line);
  padding:1.8rem 0;
  background:
    radial-gradient(480px 160px at 15% 40%, rgba(110,231,183,.08), transparent 60%),
    rgba(255,255,255,.55);
}

.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
}

.footer__inner p{
  margin:0;
  color:rgba(15,23,42,.70);
  font-weight:850;
}

.footer__nav{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem .6rem;
}

.footer__nav a{
  padding:.35rem .6rem;
  border-radius:.9rem;
  color:rgba(15,23,42,.72);
}

.footer__nav a:hover{
  text-decoration:none;
  background:rgba(15,23,42,.05);
}

/* reveal — neutralisiert, GSAP uebernimmt alle Animationen */
.reveal, .reveal.reveal--in {
  opacity: 1;
  transform: none;
}

/* transitions */
@supports (view-transition-name: none) {
  main { view-transition-name: main; }
}

::view-transition-old(main),
::view-transition-new(main) {
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(.2,.8,.2,1);
}

::view-transition-old(main) {
  animation-name: wm-old;
  transform-origin: 50% 30%;
}

::view-transition-new(main) {
  animation-name: wm-new;
  transform-origin: 50% 30%;
}

::view-transition-group(main) {
  animation: wm-group 520ms cubic-bezier(.2,.8,.2,1);
}

@keyframes wm-old {
  from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  to   { opacity: 0; transform: translateY(-14px) scale(.985); filter: blur(3px); }
}

@keyframes wm-new {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.99);
    filter: blur(6px);
    clip-path: inset(14% 0 0 0 round 18px);
  }
  60%{
    opacity: 1;
    filter: blur(1px);
    clip-path: inset(0 0 0 0 round 18px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    clip-path: inset(0 0 0 0 round 18px);
  }
}

@keyframes wm-group {
  0%   { filter: saturate(1) contrast(1); }
  50%  { filter: saturate(1.05) contrast(1.02); }
  100% { filter: saturate(1) contrast(1); }
}

/* responsive */
@media (max-width: 1100px){
  .hero__editorial,
  .statement__grid,
  .founder{
    grid-template-columns:1fr;
  }

  .hero__scene{
    min-height:520px;
  }

  .cta-box{
    grid-template-columns:1fr;
    padding-right:0;
  }

  .principles{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .display{
    max-width: none;
  }
}

@media (max-width: 900px){
  .feature-row,
  .feature-row--reverse{
    grid-template-columns:1fr;
  }

  .feature-row--reverse .feature-row__visual,
  .feature-row--reverse .feature-row__content{
    order:initial;
  }

  .founder__facts{
    grid-template-columns:1fr;
  }
}

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

  .display{
    max-width:none;
    font-size: clamp(2.35rem, 11vw, 4.4rem);
  }

  .hero__scene{
    min-height:430px;
  }

  .floating-card--top,
  .floating-card--bottom{
    width:auto;
    right:16px;
    left:16px;
  }

  .floating-card--bottom{
    bottom:16px;
  }

  .floating-card--top{
    top:16px;
  }

  .portrait-card__image{
    min-height:360px;
  }

  .portrait-card__note{
    flex-direction:column;
    gap:.35rem;
  }
}

@media (prefers-reduced-motion: reduce){
  html { scroll-behavior:auto; }
  .btn, .reveal { transition:none; }
  .reveal{ opacity:1; transform:none; }
  ::view-transition-old(main),
  ::view-transition-new(main),
  ::view-transition-group(main){
    animation:none !important;
  }
}

/* ==========================
   GLOBAL COLOR DEPTH BOOST
========================== */

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;

  background:
    radial-gradient(900px 400px at 20% 120%, rgba(110,231,183,.18), transparent 60%),
    radial-gradient(800px 300px at 80% 140%, rgba(212,175,55,.12), transparent 60%);

  opacity:.7;
}

.footer{
  background:
    radial-gradient(600px 200px at 20% 40%, rgba(110,231,183,.12), transparent 60%),
    radial-gradient(500px 160px at 80% 60%, rgba(212,175,55,.10), transparent 60%),
    rgba(255,255,255,.55);
}

.cta-box::before{
  background:
    radial-gradient(600px 220px at 20% 50%, rgba(110,231,183,.20), transparent 60%),
    radial-gradient(400px 180px at 80% 50%, rgba(212,175,55,.14), transparent 60%);
}

/* ==========================
   NUMAS — Image Integration
========================== */

.hero__scene,
.feature-row__visual,
.portrait-card__image,
.contact-form-card{
  isolation:isolate;
}

.scene--main{
  background-color:#f3f2ec;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.scene--main::before{
  inset:8% 10%;
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04)),
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}

.scene--main::after{
  inset:0;
  width:auto;
  height:auto;
  right:auto;
  bottom:auto;
  border-radius:32px;
  background:
    linear-gradient(135deg, rgba(7,10,15,.44), rgba(7,10,15,.18) 38%, rgba(7,10,15,.04) 72%),
    radial-gradient(circle at 78% 18%, rgba(212,175,55,.16), transparent 28%),
    radial-gradient(circle at 18% 84%, rgba(110,231,183,.12), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 30%);
  filter:none;
}

.floating-card{
  background:rgba(255,255,255,.84);
  border:1px solid rgba(255,255,255,.38);
  box-shadow:
    0 18px 38px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.45);
}

.feature-row__visual{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:0 24px 60px rgba(15,23,42,.12);
}

.feature-row__visual::before{
  inset:0;
  border-radius:28px;
  border:none;
  background:
    linear-gradient(135deg, rgba(7,10,15,.24), rgba(7,10,15,.08) 36%, rgba(255,255,255,.04) 72%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 24%);
}

.feature-row__visual::after{
  width:200px;
  height:200px;
  right:-40px;
  bottom:-35px;
  background:radial-gradient(circle, rgba(212,175,55,.22), transparent 66%);
  filter:blur(2px);
}

.portrait-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70));
}

.portrait-card__image{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  min-height:500px;
}

.portrait-card__image::after{
  inset:0;
  border-radius:24px;
  background:
    linear-gradient(135deg, rgba(8,12,18,.16), rgba(8,12,18,.02) 44%, rgba(255,255,255,.06) 78%),
    radial-gradient(circle at 78% 16%, rgba(212,175,55,.14), transparent 26%);
  border:none;
}

.contact-form-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.12);
  border-radius:32px;
  padding:1.2rem;
  box-shadow:var(--shadow);
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.74)),
    url("../img/numas-contact-premium.webp") center/cover no-repeat;
}

.contact-form-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(7,10,15,.08), rgba(7,10,15,0) 40%),
    radial-gradient(circle at 88% 10%, rgba(212,175,55,.14), transparent 25%),
    radial-gradient(circle at 10% 90%, rgba(110,231,183,.12), transparent 26%);
  pointer-events:none;
}

.contact-form-card > *{
  position:relative;
  z-index:1;
}

.form{
  display:grid;
  gap:.95rem;
}

.field{
  display:grid;
  gap:.42rem;
}

.field label{
  font-size:.92rem;
  font-weight:800;
  color:rgba(15,23,42,.78);
}

.field input,
.field select,
.field textarea{
  width:100%;
  border:1px solid rgba(15,23,42,.14);
  border-radius:16px;
  background:rgba(255,255,255,.86);
  color:var(--fg);
  font:inherit;
  padding:.92rem 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

.field input::placeholder,
.field textarea::placeholder{
  color:rgba(15,23,42,.42);
}

.field textarea{
  resize:vertical;
  min-height:136px;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:rgba(16,185,129,.34);
  box-shadow:
    0 0 0 4px rgba(110,231,183,.16),
    inset 0 1px 0 rgba(255,255,255,.66);
}

/* Page-specific hero imagery */
.page-home .scene--main{
  background-image:url("../img/numas-home-hero.webp");
  background-position:center;
}

.page-services .scene--main{
  background-image:url("../img/numas-services-grid.webp");
  background-position:center;
}

.page-projekte .scene--main{
  background-image:url("../img/numas-projects-concept.webp");
  background-position:center;
}

.page-ablauf .scene--main{
  background-image:url("../img/numas-process-flow.webp");
  background-position:center;
}

.page-kontakt .scene--main{
  background-image:url("../img/numas-contact-premium.webp");
  background-position:center;
}

/* Homepage visuals */
.page-home .feature-row__visual--one{
  background-image:url("../img/numas-projects-concept.webp");
  background-position:center 34%;
}

.page-home .feature-row__visual--two{
  background-image:url("../img/numas-home-hero.webp");
  background-position:center 42%;
}

.page-home .feature-row__visual--three{
  background-image:url("../img/numas-contact-premium.webp");
  background-position:center 52%;
}

.page-home .portrait-card__image{
  background-image:url("../img/numas-home-hero.webp");
  background-position:center;
}

/* Services visuals */
.page-services .feature-row__visual--one,
.page-services .feature-row__visual--two,
.page-services .feature-row__visual--three{
  background-image:none;
}

/* Projects visuals */
.page-projekte .feature-row__visual--one,
.page-projekte .feature-row__visual--two,
.page-projekte .feature-row__visual--three{
  background-image:none;
  padding:0;
  overflow:hidden;
  min-height:unset;
  aspect-ratio:16/9;
  width:100%;
}

/* Ablauf visuals */
.page-ablauf .feature-row__visual--one{
  background-image:url("../img/numas-contact-premium.webp");
  background-position:center 76%;
}

.page-ablauf .feature-row__visual--two{
  background-image:url("../img/numas-projects-concept.webp");
  background-position:center 72%;
}

.page-ablauf .feature-row__visual--three{
  background-image:url("../img/numas-home-hero.webp");
  background-position:center 42%;
}

/* Contact page refinements */
.page-kontakt .founder{
  align-items:start;
}

.page-kontakt .founder__text{
  padding-top:.35rem;
}

.page-kontakt .contact-form-card{
  min-height:100%;
}

@media (max-width: 1100px){
  .scene--main::before{
    inset:10% 10%;
  }
}

@media (max-width: 700px){
  .feature-row__visual{
    min-height:280px;
  }

  .contact-form-card{
    padding:1rem;
  }

  .field input,
  .field select,
  .field textarea{
    padding:.88rem .95rem;
  }
}

/* ==========================
   NUMAS FINAL FIX
========================== */

.scene--main::before,
.scene--main::after,
.feature-row__visual::before,
.feature-row__visual::after,
.portrait-card__image::after{
  content:none !important;
  display:none !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
}

.scene--main,
.feature-row__visual,
.portrait-card__image{
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-color:#f3f2ec;
}

.scene--main{
  overflow:hidden;
}

.feature-row__visual{
  overflow:hidden;
  box-shadow:0 22px 55px rgba(15,23,42,.13);
}

.page-home .scene--main{ background-position:center center !important; }
.page-services .scene--main{ background-position:center center !important; }
.page-projekte .scene--main{ background-position:center center !important; }
.page-ablauf .scene--main{ background-position:center center !important; }
.page-kontakt .scene--main{ background-position:center center !important; }

/* =====================================================
   NUMAS — DESKTOP NAV RESTORE + STABLE MOBILE DROPDOWN
===================================================== */
.header{
  position:sticky !important;
  top:0 !important;
  z-index:10000 !important;
}

.header__inner{
  position:relative !important;
}

.nav{
  display:flex !important;
  align-items:center !important;
  gap:.35rem !important;
  position:static !important;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  transform:none !important;
  right:auto !important;
  left:auto !important;
  top:auto !important;
  bottom:auto !important;
  z-index:auto !important;
}

.nav-toggle{
  display:none !important;
  position:relative !important;
  top:auto !important;
  right:auto !important;
  left:auto !important;
  bottom:auto !important;
  z-index:10002 !important;
  pointer-events:auto !important;
}

.hero__scene,
.scene,
.scene--main,
.floating-card,
.feature-row__visual{
  pointer-events:none !important;
}

@media (max-width: 920px){
  .nav-toggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
  }

  .nav{
    display:none !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:100% !important;
    width:100% !important;
    height:auto !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:.25rem !important;
    padding:1rem !important;
    background:rgba(251,251,247,.97) !important;
    border-bottom:1px solid var(--line) !important;
    box-shadow:0 18px 35px rgba(15,23,42,.10) !important;
    z-index:10001 !important;
  }

  .nav.is-open,
  .nav.nav--open{
    display:flex !important;
  }

  .nav a{
    width:100% !important;
  }
}

@media (min-width: 921px){
  .nav{
    display:flex !important;
  }

  .nav-toggle{
    display:none !important;
  }
}


/* =========================
   NUMAS — Final Contact + Legal Polish
========================= */

.footer__nav a[href="impressum.html"],
.footer__nav a[href="datenschutz.html"]{
  opacity:.78;
}

.desktop-sticky-contact{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:80;
  display:none;
}

.desktop-sticky-contact a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:.9rem 1.15rem;
  border-radius:999px;
  color:#062217;
  font-weight:950;
  letter-spacing:-.01em;
  text-decoration:none;
  border:1px solid rgba(16,185,129,.24);
  background:linear-gradient(135deg, rgba(16,185,129,.98), rgba(110,231,183,.96));
  box-shadow:0 18px 45px rgba(15,23,42,.16);
  transition:transform .18s ease, box-shadow .18s ease;
}

.desktop-sticky-contact a:hover{
  transform:translateY(-1px);
  text-decoration:none;
  box-shadow:0 22px 55px rgba(15,23,42,.20);
}

.mobile-sticky-contact{
  position:fixed;
  left:10px;
  right:10px;
  bottom:10px;
  z-index:90;
  display:none;
  grid-template-columns:repeat(3, 1fr);
  gap:.45rem;
  padding:.45rem;
  border:1px solid rgba(15,23,42,.12);
  border-radius:22px;
  background:rgba(251,251,247,.92);
  backdrop-filter:blur(16px);
  box-shadow:0 18px 45px rgba(15,23,42,.16);
}

/* ==========================
   NUMAS — Services CSS Visuals
========================== */

.page-services .feature-row__visual--one{
  background-color:#1a1a2e !important;
  background-image:repeating-linear-gradient(
    -45deg,
    rgba(0,200,150,.15) 0px,
    rgba(0,200,150,.15) 1px,
    transparent 1px,
    transparent 20px
  ) !important;
  background-size:auto !important;
  background-repeat:repeat !important;
  background-position:0 0 !important;
}

.page-services .feature-row__visual--one::before{
  content:"" !important;
  display:block !important;
  position:absolute;
  inset:auto;
  width:160px;
  height:100px;
  left:50%;
  top:50%;
  transform:translate(-50%,calc(-50% - 16px));
  border-radius:6px;
  border:2px solid #00c896 !important;
  background:rgba(0,200,150,.06) !important;
  box-shadow:none !important;
  filter:none !important;
}

.page-services .feature-row__visual--one::after{
  content:"" !important;
  display:block !important;
  position:absolute;
  width:180px !important;
  height:12px !important;
  left:50%;
  top:50%;
  transform:translate(-50%,calc(-50% + 62px));
  border-radius:4px;
  background:rgba(0,200,150,.28) !important;
  right:auto !important;
  bottom:auto !important;
  filter:none !important;
  box-shadow:none !important;
}

.page-services .feature-row__visual--two{
  background-color:#2d2d2d !important;
  background-image:radial-gradient(
    circle at center,
    rgba(255,255,255,.10) 1.5px,
    transparent 1.5px
  ) !important;
  background-size:18px 18px !important;
  background-repeat:repeat !important;
  background-position:0 0 !important;
}

.page-services .feature-row__visual--two::before{
  content:"" !important;
  display:block !important;
  position:absolute;
  inset:auto;
  width:120px;
  height:150px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:3px;
  background:rgba(255,255,255,.90) !important;
  border:none !important;
  box-shadow:
    12px 12px 0 0 rgba(255,255,255,.58),
    24px 24px 0 0 rgba(255,255,255,.32) !important;
  filter:none !important;
}

.page-services .feature-row__visual--two::after{
  content:"" !important;
  display:block !important;
  position:absolute;
  width:80px !important;
  height:4px !important;
  left:50%;
  top:50%;
  transform:translate(-50%,calc(-50% - 35px));
  border-radius:2px;
  background:rgba(45,45,45,.22) !important;
  right:auto !important;
  bottom:auto !important;
  filter:none !important;
  box-shadow:
    0 14px 0 0 rgba(45,45,45,.18),
    0 28px 0 0 rgba(45,45,45,.14),
    0 42px 0 0 rgba(45,45,45,.10) !important;
}

.page-services .feature-row__visual--three{
  background-color:#1a1208 !important;
  background-image:none !important;
  background-size:auto !important;
}

.page-services .feature-row__visual--three::before{
  content:"" !important;
  display:block !important;
  position:absolute;
  inset:auto;
  width:64px;
  height:46px;
  border-radius:4px;
  left:50%;
  top:50%;
  transform:translate(-108px,-52px);
  background:rgba(200,169,110,.80) !important;
  border:none !important;
  box-shadow:
    76px 0 0 0 rgba(200,169,110,.55),
    152px 0 0 0 rgba(200,169,110,.70),
    0 58px 0 0 rgba(200,169,110,.60),
    76px 58px 0 0 rgba(200,169,110,.45),
    152px 58px 0 0 rgba(200,169,110,.75) !important;
  filter:none !important;
}

.page-services .feature-row__visual--three::after{
  content:"" !important;
  display:block !important;
  position:absolute;
  width:240px !important;
  height:240px !important;
  border-radius:50%;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(
    circle,
    rgba(200,169,110,.15),
    transparent 65%
  ) !important;
  right:auto !important;
  bottom:auto !important;
  filter:blur(28px) !important;
  box-shadow:none !important;
}

.mobile-sticky-contact a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  border-radius:16px;
  color:rgba(15,23,42,.86);
  background:rgba(255,255,255,.78);
  border:1px solid rgba(15,23,42,.10);
  font-weight:900;
  font-size:.92rem;
  text-decoration:none;
}

.mobile-sticky-contact a:first-child{
  color:#062217;
  background:linear-gradient(135deg, rgba(16,185,129,.96), rgba(110,231,183,.94));
  border-color:rgba(16,185,129,.24);
}

.legal-page .hero--editorial{
  padding-bottom:2.5rem;
}

.legal-content{
  max-width:900px;
  margin-inline:auto;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.72);
  border-radius:28px;
  padding:clamp(1.25rem, 3vw, 2.25rem);
  box-shadow:0 18px 55px rgba(15,23,42,.08);
}

.legal-content h2{
  margin:2rem 0 .75rem;
  font-family:"Space Grotesk", "Inter", sans-serif;
  letter-spacing:-.03em;
  line-height:1.1;
}

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

.legal-content p,
.legal-content li{ color:rgba(15,23,42,.74); }

.legal-content a{
  color:var(--primary-deep);
  font-weight:800;
}

@media (min-width: 921px){
  .desktop-sticky-contact{ display:block; }
}

@media (max-width: 920px){
  body{ padding-bottom:78px; }
  .mobile-sticky-contact{ display:grid; }
}

/* ==========================
   FAQ — Accordion
========================== */

.page-faq .scene--main{
  background-image:url("../img/numas-process-flow.webp");
}

.faq-list{
  display:grid;
  gap:.75rem;
  max-width:900px;
  margin-inline:auto;
}

.faq-item{
  border:1px solid rgba(15,23,42,.12);
  background:
    radial-gradient(circle at 88% 12%, rgba(110,231,183,.08), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.68));
  border-radius:20px;
  box-shadow:0 6px 20px rgba(15,23,42,.06);
  overflow:hidden;
  transition:box-shadow .2s ease, border-color .2s ease;
}

.faq-item[open]{
  box-shadow:0 14px 36px rgba(15,23,42,.10);
  border-color:rgba(16,185,129,.26);
}

.faq-question{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.25rem 1.4rem;
  cursor:pointer;
  list-style:none;
  font-family:"Space Grotesk","Inter",sans-serif;
  font-size:1.08rem;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--fg);
  user-select:none;
}

.faq-question::-webkit-details-marker{ display:none; }

.faq-question::after{
  content:"";
  flex-shrink:0;
  width:28px;
  height:28px;
  border-radius:50%;
  background:
    linear-gradient(135deg, rgba(16,185,129,.14), rgba(110,231,183,.12)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2310b981' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  border:1px solid rgba(16,185,129,.22);
  transition:transform .22s ease;
}

.faq-item[open] .faq-question::after{
  transform:rotate(180deg);
}

.faq-answer{
  padding:0 1.4rem 1.3rem;
}

.faq-answer p{
  margin:0;
  padding-top:1rem;
  border-top:1px solid rgba(15,23,42,.08);
  color:rgba(15,23,42,.76);
  font-size:1rem;
  line-height:1.68;
  max-width:72ch;
}

/* ==========================
   Cookie Banner
========================== */

#cookie-banner{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  z-index:300;
  width:min(700px, calc(100% - 2rem));
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
  flex-wrap:wrap;
  padding:1rem 1.25rem;
  border:1px solid rgba(15,23,42,.12);
  border-radius:22px;
  background:rgba(251,251,247,.96);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 20px 50px rgba(15,23,42,.18);
}

#cookie-banner p{
  margin:0;
  flex:1;
  min-width:200px;
  color:rgba(15,23,42,.78);
  font-size:.94rem;
  line-height:1.55;
}

.cookie-actions{
  display:flex;
  gap:.55rem;
  flex-shrink:0;
}

@media (max-width:920px){
  #cookie-banner{
    bottom:92px;
    flex-direction:column;
    align-items:stretch;
  }

  .cookie-actions{
    width:100%;
  }

  .cookie-actions .btn{
    flex:1;
    justify-content:center;
  }
}

/* ==========================
   Stats Section
========================== */

.stats-section {
  background: linear-gradient(135deg, rgba(16,185,129,.06), rgba(212,175,55,.06));
  border-top: 1px solid rgba(15,23,42,.08);
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
  padding: 1rem 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.5rem 1rem;
  border-radius: var(--radius);
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(15,23,42,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}

.stat-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.stat-number {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--primary-deep);
  line-height: 1;
}

.stat-label {
  font-size: .88rem;
  color: var(--muted);
  font-weight: 600;
  max-width: 14ch;
  line-height: 1.4;
}

/* ==========================
   GSAP Animation Classes
========================== */

.line-wrap { overflow: hidden; }
.line { display: block; }

.header--scrolled {
  background: rgba(251,251,247,.93) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 28px rgba(15,23,42,.09) !important;
}

.marquee-section {
  overflow: hidden;
  padding: 1.4rem 0;
  border-top: 1px solid rgba(15,23,42,.08);
  border-bottom: 1px solid rgba(15,23,42,.08);
  background: rgba(16,185,129,.04);
}

.marquee-track {
  display: flex;
  gap: 1.8rem;
  white-space: nowrap;
  will-change: transform;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(15,23,42,.42);
}

.marquee-dot { color: var(--primary-deep); }

/* =============================================
   SHARED HOVER: Principle Cards
============================================= */
.principle-card {
  transition: transform .3s cubic-bezier(.22,.68,0,1.2),
              box-shadow .3s ease,
              border-color .25s ease;
  cursor: default;
}
.principle-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 18px 44px rgba(15,23,42,.12);
  border-color: rgba(16,185,129,.35);
}
.principle-card__number {
  transition: color .25s ease;
}
.principle-card:hover .principle-card__number {
  color: var(--primary);
}

/* =============================================
   SHARED HOVER: Chips und Badges
============================================= */
.chip {
  transition: background .2s ease, color .2s ease, transform .2s ease;
  cursor: default;
}
.chip:hover {
  background: rgba(16,185,129,.22);
  color: var(--primary-deep);
  transform: translateY(-2px);
}
.badge {
  transition: background .22s ease, color .22s ease,
              box-shadow .22s ease, transform .22s ease;
  cursor: default;
}
.badge:hover {
  background: rgba(16,185,129,.15);
  color: var(--primary-deep);
  transform: translateY(-2px);
}

/* =============================================
   SHARED: Header Glaseffekt beim Scrollen
============================================= */
.header {
  transition: background .3s ease, box-shadow .3s ease,
              backdrop-filter .3s ease;
}
.header--scrolled {
  background: rgba(251,251,247,.93) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 28px rgba(15,23,42,.09) !important;
}

/* =============================================
   Marquee
============================================= */
.marquee-section {
  overflow: hidden;
  padding: 1.2rem 0;
  border-top: 1px solid rgba(15,23,42,.08);
  border-bottom: 1px solid rgba(15,23,42,.08);
  background: rgba(16,185,129,.04);
}
.marquee-wrapper {
  overflow: hidden;
  width: 100%;
}
.marquee-track {
  display: flex;
  gap: 1.4rem;
  white-space: nowrap;
  will-change: transform;
  width: max-content;
}
.mw {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: .88rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mw--green { color: var(--primary); }
.mw--dark  { color: var(--fg); }
.mw-dot {
  color: rgba(15,23,42,.25);
  font-weight: 400;
}

/* =============================================
   Line-Wrap fuer Hero Headlines
============================================= */
.line-wrap { overflow: hidden; }
.line { display: block; }

/* =============================================
   FOOTER NEU
============================================= */
.footer--neu {
  background: var(--fg);
  border-top: none;
  padding: clamp(3rem, 6vw, 5rem) 0 0;
}

.footer-neu__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2.5rem, 4vw, 4rem);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.footer-neu__brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-neu__logo {
  color: #fff !important;
  font-size: 1.1rem;
}

.footer-neu__logo .brand__mark {
  background: var(--primary);
}

.footer-neu__tagline {
  margin: 0;
  color: rgba(255,255,255,.52);
  font-size: .9rem;
  line-height: 1.65;
  max-width: 30ch;
}

.footer-neu__instagram {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
  transition: color .2s ease;
  width: fit-content;
}

.footer-neu__instagram:hover {
  color: var(--primary);
}

.footer-neu__col-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin: 0 0 1rem;
}

.footer-neu__col nav {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.footer-neu__col nav a {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: .9rem;
  transition: color .2s ease;
}

.footer-neu__col nav a:hover {
  color: var(--primary);
}

.footer-neu__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  padding: 1.4rem 0;
}

.footer-neu__bottom p {
  margin: 0;
  color: rgba(255,255,255,.35);
  font-size: .82rem;
}

.footer-neu__bottom nav {
  display: flex;
  gap: 1.2rem;
}

.footer-neu__bottom nav a {
  color: rgba(255,255,255,.35);
  text-decoration: none;
  font-size: .82rem;
  transition: color .2s ease;
}

.footer-neu__bottom nav a:hover {
  color: rgba(255,255,255,.75);
}

@media (max-width: 768px) {
  .footer-neu__grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-neu__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .footer-neu__grid {
    grid-template-columns: 1fr;
  }
  .footer-neu__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}