/* ============================================================
   engrida — design system
   Display: Sora · Body: Manrope · Akzente: Orange/Grün/Blau
   ============================================================ */
:root{
  /* ---- helle Original-Palette (Engrida Orginal) ---- */
  --ink:#16263F;         /* headings on light */
  --text:#4A5772;        /* body on light (ink-soft) */
  --muted:#8A91A0;       /* secondary on light (ink-mute) */
  --muted-d:#8A91A0;     /* (kein Dark-Theme mehr -> hell) */
  --paper:#FFFFFF;
  --paper-2:#FFFFFF;     /* weiß (kein Cremeweiß) */
  --line:#E6E8ED;
  --line-soft:#EFF1F4;
  --line-d:#E6E8ED;      /* (kein Dark-Theme mehr -> hell) */

  /* Logo-Farben: exakt & vereinheitlicht */
  --orange:#F08A2A;
  --orange-d:#E07A18;
  --green:#6FB94F;       /* Logo-Grün (korrigiert von #5FB23F) */
  --blue:#2EA8DF;
  /* RGB-Tupel für dezente Tints / Animationen */
  --orange-rgb:240,138,42;
  --green-rgb:111,185,79;
  --blue-rgb:46,168,223;
  /* dunkles Logo-Blau – Footer behält dies bewusst */
  --night:#0A1320;
  --night-2:#0E1B30;
  --night-3:#12233C;

  --maxw:1240px;
  --pad:40px;
  --r:18px;
  --shadow:0 24px 60px -28px rgba(14,27,48,.32), 0 8px 24px -16px rgba(14,27,48,.18);
  --shadow-lg:0 50px 110px -40px rgba(8,16,28,.55);
  --display:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,.7,.18,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{overflow-x:hidden}
body{
  font-family:var(--body);
  background:var(--paper-2);            /* einheitlich dezent beige (kein Weiß-Wechsel) */
  color:var(--text);
  font-size:18px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* dezenter Logo-Farb-Schimmer OBEN, der nach unten weich in den
   normalen Hintergrund übergeht (Startseite: alle drei Logo-Farben) */
body:not(.article){
  background:
    radial-gradient(56% 42% at 22% 0%, rgba(var(--blue-rgb),.08), transparent 72%),
    radial-gradient(62% 46% at 50% 0%, rgba(var(--green-rgb),.06), transparent 74%),
    radial-gradient(56% 42% at 78% 0%, rgba(var(--orange-rgb),.07), transparent 72%),
    var(--paper-2);
  background-repeat:no-repeat;
  background-position:top center;
  background-size:100% 880px,100% 880px,100% 880px,auto;
}
::selection{background:var(--ink);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* ---------- typography helpers ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--body);font-weight:700;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--orange);
}
.kicker .bars{display:inline-flex;flex-direction:column;gap:2.5px}
.kicker .bars i{width:16px;height:2.5px;border-radius:2px;display:block}
.kicker .bars i:nth-child(1){background:var(--orange)}
.kicker .bars i:nth-child(2){background:var(--green)}
.kicker .bars i:nth-child(3){background:var(--blue)}
.kicker.on-dark{color:var(--orange)}
.h-display{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:.98}
.h2{font-family:var(--display);font-weight:700;font-size:clamp(32px,4.4vw,58px);letter-spacing:-.025em;line-height:1.02;color:var(--ink)}
.h2.on-dark{color:var(--ink)}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.6;color:var(--muted)}
em.accent{font-style:normal;color:var(--orange)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--body);font-weight:700;font-size:15px;letter-spacing:.01em;
  padding:15px 26px;border-radius:100px;cursor:pointer;border:1.5px solid transparent;
  transition:transform .3s var(--ease),background .25s,border-color .25s,color .25s,box-shadow .3s;
  white-space:nowrap;
}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 14px 30px -12px rgba(240,138,42,.6)}
.btn-primary:hover{background:var(--orange-d);transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(240,138,42,.7)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#0B1A30;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-2px)}
.btn-ghost-ink{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost-ink:hover{border-color:var(--ink);transform:translateY(-2px)}

/* ---------- reveal animation (pure-CSS, scroll-independent; ALWAYS ends visible) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(24px);animation:engReveal .8s var(--ease) forwards}
.js [data-reveal][data-d="1"]{animation-delay:.10s}
.js [data-reveal][data-d="2"]{animation-delay:.20s}
.js [data-reveal][data-d="3"]{animation-delay:.30s}
.js [data-reveal][data-d="4"]{animation-delay:.40s}
@keyframes engReveal{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{animation:none;opacity:1;transform:none}}
/* hard safety net: if animations never run (old browser / blocked), force visible */
.reveal-all [data-reveal]{opacity:1 !important;transform:none !important;animation:none !important}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:20px var(--pad);
  transition:background .35s var(--ease),box-shadow .35s,padding .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
/* company-colour accent line across the very top of the banner */
.nav::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:1;
  background:linear-gradient(90deg,var(--blue) 0 33.33%,var(--green) 33.33% 66.66%,var(--orange) 66.66% 100%);}
/* brand pinned left, links centred in the banner */
.nav .brand{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);height:30px;display:flex;align-items:center}
.nav .brand img{height:30px;width:auto;transition:opacity .35s}
.nav .brand .lite{position:absolute;inset:0;height:30px}
.nav .links{display:flex;align-items:center;gap:34px}
.nav .links a{font-weight:600;font-size:15px;color:var(--text);transition:color .2s;position:relative}
/* colour dot before each section link: Rechenzentrum=blue, Standort=green, Wärme=orange */
.nav .links a:not(.btn){display:inline-flex;align-items:center;gap:9px;font-weight:700}
.nav .links a:not(.btn)::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue);flex:none;box-shadow:0 0 10px -1px var(--blue)}
.nav .links a:nth-child(1):not(.btn){color:var(--blue)}
.nav .links a:nth-child(2):not(.btn){color:var(--green)}
.nav .links a:nth-child(3):not(.btn){color:var(--orange)}
.nav .links a:nth-child(2):not(.btn)::before{background:var(--green);box-shadow:0 0 10px -1px var(--green)}
.nav .links a:nth-child(3):not(.btn)::before{background:var(--orange);box-shadow:0 0 10px -1px var(--orange)}
.nav .links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav .links a:nth-child(2):not(.btn)::after{background:var(--green)}
.nav .links a:nth-child(3):not(.btn)::after{background:var(--orange)}
.nav .links a:not(.btn):hover{filter:brightness(1.15)}
.nav .links a:not(.btn):hover::after{transform:scaleX(1)}
.nav .links a[aria-current="page"]::after{transform:scaleX(1)}
.nav .links .btn{padding:11px 20px;font-size:14px}
/* ghost button on light banner */
.nav .links .btn-ghost{color:var(--ink);border-color:var(--line)}
.nav .links .btn-ghost:hover{border-color:var(--ink);background:transparent}
.nav .burger{display:none}
/* scrolled state */
.nav.scrolled{background:rgba(255,255,255,.86);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 8px 30px -18px rgba(14,27,48,.28);border-bottom-color:var(--line);padding:14px var(--pad)}
.nav.scrolled .brand .dark{opacity:1}
.nav.scrolled .brand .lite{opacity:0}
/* light banner: dark logo from the start */
.nav .brand .dark{opacity:1;transition:opacity .35s}
.nav .brand .lite{opacity:0}
.nav.scrolled .links a{color:var(--text)}
.nav.scrolled .links a:hover{color:var(--ink)}
.nav.scrolled .links .btn-ghost{color:var(--ink);border-color:var(--line)}
.nav.scrolled .links .btn-ghost:hover{border-color:var(--ink);background:transparent}

/* ============================================================
   LANDING (engrida logo, full-screen intro)
   ============================================================ */
.landing{
  position:relative;height:100svh;min-height:560px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;background:transparent;
}
.landing__logo{width:min(440px,74vw);height:auto;opacity:0;transform:translateY(14px);
  animation:landRise 1.2s var(--ease) .25s forwards}
/* tagline at the optical centre of the whole mark (icon + "engrida"),
   i.e. about halfway between the geometric centre and the wordmark centre */
.landing__tag{--tagx:min(44px,7.4vw);display:inline-block;margin-top:26px;
  font-family:var(--display);font-weight:600;font-size:clamp(14px,1.5vw,17px);
  letter-spacing:.02em;color:var(--muted);opacity:0;transform:translate(var(--tagx),14px);
  animation:tagIn 1.2s var(--ease) .55s forwards}
@keyframes tagIn{to{opacity:1;transform:translate(var(--tagx),0)}}
@keyframes landRise{to{opacity:1;transform:none}}
/* dezenter Presse-Link mit Kasten, zentriert unter dem Hauptlogo */
.landing__press{
  position:absolute;left:50%;top:72%;transform:translate(-50%,-50%);
  display:none;align-items:center;
  padding:9px 18px;border:1px solid var(--ink);border-radius:100px;
  font-family:var(--body);font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  opacity:0;animation:cueFade 1s var(--ease) .9s forwards;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.landing__press:hover{color:#fff;background:var(--ink);border-color:var(--ink)}
/* zweiter Presse-Button oben rechts in der Nav, gleicher Style */
.nav .nav__press{
  position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border:1px solid var(--ink);border-radius:100px;
  font-family:var(--body);font-weight:700;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink);
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.nav .nav__press .ar{font-size:12px;color:inherit;transition:transform .3s var(--ease)}
.nav .nav__press:hover{background:var(--ink);color:#fff}
.nav .nav__press:hover .ar{transform:translateX(3px)}
/* Presse-Dropdown (nur index.html): Desktop = Pille, Mobil = Pfeil-Button mit Aufklapp-Karte */
.nav__press-wrap{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);z-index:30}
.nav__press-wrap .nav__press{position:static;transform:none;right:auto;top:auto}
.nav__press-toggle{display:none}
.nav__press-pop__cap,.nav__press-link{display:none}
@media(max-width:880px){
  .nav .links .btn-ghost{display:none}
  /* mobile: Aufklapp-Lasche entfernt — Presse nur über das mittige Element in der Landing */
  .nav__press-wrap{display:none}
  .nav__press-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:40px;padding:0;border:1px solid var(--line);border-right:none;border-radius:100px 0 0 100px;background:#fff;color:var(--orange);cursor:pointer;box-shadow:-7px 5px 22px -13px rgba(14,27,48,.32);transition:color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)}
  .nav__press-toggle svg{width:16px;height:16px;transition:transform .35s var(--ease)}
  .nav__press-wrap.open .nav__press-toggle{background:var(--ink);color:#fff;border-color:var(--ink)}
  .nav__press-wrap.open .nav__press-toggle svg{transform:rotate(180deg)}
  .nav__press-pop{position:absolute;top:calc(100% + 9px);right:0;min-width:230px;display:flex;flex-direction:column;gap:5px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 48px -16px rgba(14,27,48,.34);padding:7px;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;transition:opacity .22s var(--ease),transform .24s var(--ease),visibility .24s}
  .nav__press-wrap.open .nav__press-pop{opacity:1;visibility:visible;transform:none}
  .nav__press-pop__cap{display:block;margin:5px 10px 1px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .nav__press-wrap .nav__press-pop .nav__press,.nav__press-link{display:flex;width:100%;box-sizing:border-box;justify-content:space-between;align-items:center;margin:0;position:static;transform:none;border:none;border-radius:11px;padding:13px 15px;font-family:var(--body);font-weight:700;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;background:var(--paper);color:var(--ink)}
  .nav__press-wrap .nav__press-pop .nav__press:hover,.nav__press-wrap .nav__press-pop .nav__press:active,.nav__press-link:hover,.nav__press-link:active{background:var(--ink);color:#fff}
  .nav__press-wrap .nav__press-pop .nav__press .ar{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.landing__press{animation:none;opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.landing__press{animation:none;opacity:1;transform:none}.landing__press .dot{animation:none}}
.landing__cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.22em;text-indent:.22em;text-transform:uppercase;color:var(--muted);
  opacity:0;animation:cueFade 1s var(--ease) 1s forwards}
@keyframes cueFade{to{opacity:1}}  /* opacity only — keep translateX(-50%) centring */
.landing__cue .line{width:1px;height:40px;background:linear-gradient(var(--muted),transparent);animation:cue 2s ease-in-out infinite}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;display:flex;align-items:center;
  overflow:hidden;background:transparent;
  min-height:58vh;
  padding:84px 0 48px;
}
.hero .container{position:relative;z-index:2;width:100%}
.hero__kick{margin-bottom:30px}
.hero__kick .dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(111,185,79,.6);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(111,185,79,.55)}70%{box-shadow:0 0 0 12px rgba(111,185,79,0)}100%{box-shadow:0 0 0 0 rgba(111,185,79,0)}}
.hero__h1, .hero h1{
  font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:clamp(46px,8vw,110px);line-height:.96;letter-spacing:-.04em;
  max-width:20ch;
}
.hero__h1 .grad, .hero h1 .grad{
  background:linear-gradient(100deg,var(--orange) 0%,#F08A2A 26%,var(--green) 62%,var(--blue) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero__lead{margin-top:32px;max-width:820px;font-size:clamp(17px,1.5vw,21px);line-height:1.65;color:var(--text)}
.hero__lead strong{color:var(--ink);font-weight:600}
.hero__cta{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}
/* hero stat strip */
.hero__strip{
  margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;
}
.hero__strip .s{background:var(--paper);padding:20px 24px}
.hero__strip .s .v{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.4vw,30px);color:var(--ink);letter-spacing:-.02em;line-height:1}
.hero__strip .s .v small{font-size:.55em;font-weight:600;color:var(--muted-d);margin-left:4px}
.hero__strip .s .l{margin-top:8px;font-size:12.5px;color:var(--muted-d);letter-spacing:.02em}
.hero__strip .s .v .c1{color:var(--orange)}
.scrollcue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.5);font-size:11px;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.scrollcue .line{width:1px;height:38px;background:linear-gradient(rgba(255,255,255,.5),transparent);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ============================================================
   INTRO / STATEMENT
   ============================================================ */
.section{padding:clamp(72px,9vw,140px) 0}
.section.tight{padding:clamp(56px,7vw,100px) 0}
.intro__grid{display:grid;grid-template-columns:1.25fr .9fr;gap:60px;align-items:start}
.intro h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.5vw,46px);line-height:1.08;letter-spacing:-.025em;color:var(--ink)}
.intro h2 em{font-style:normal;color:var(--muted);}
.intro__right p{font-size:17px;line-height:1.66;color:var(--text);margin-bottom:18px}
.intro__right p strong{color:var(--ink);font-weight:600}
.intro__right p:last-child{margin-bottom:0}
@media(max-width:880px){.intro__grid{grid-template-columns:1fr;gap:32px}}

/* ============================================================
   WISSEN CARDS
   ============================================================ */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:48px;flex-wrap:wrap}
.sec-head .lead{max-width:380px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* per-card logo accent (Rechenzentrum=blau, Wärme=orange, Standort=grün) */
.card.c1{--c:var(--blue);--c-rgb:var(--blue-rgb)}
.card.c2{--c:var(--orange);--c-rgb:var(--orange-rgb)}
.card.c3{--c:var(--green);--c-rgb:var(--green-rgb)}
.card{
  position:relative;border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);color:var(--ink);
  box-shadow:0 1px 2px rgba(22,38,63,.04);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .35s;
}
.card:hover{transform:translateY(-6px);
  box-shadow:0 26px 60px -30px rgba(var(--c-rgb),.45),0 10px 26px -18px rgba(22,38,63,.16);
  border-color:rgba(var(--c-rgb),.55)}
/* art zone replaces the photo: subtle accent wash + monoline motif */
.card__art{position:relative;height:158px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  color:var(--c);border-bottom:1px solid var(--line);
  background:radial-gradient(120% 130% at 50% -10%,rgba(var(--c-rgb),.10),transparent 60%),var(--paper);
  transition:background .45s var(--ease)}
.card:hover .card__art{background:radial-gradient(120% 130% at 50% -10%,rgba(var(--c-rgb),.20),transparent 64%),var(--paper)}
.card__art svg{width:92px;height:92px;overflow:visible}
.card__art .ico [class]{transform-box:fill-box;transform-origin:center}
.card__top{position:absolute;top:16px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:center;z-index:2}
.card__num{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.04em;color:var(--c)}
.card__tag{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 11px;border-radius:100px;background:rgba(var(--c-rgb),.12);color:var(--c);border:1px solid rgba(var(--c-rgb),.24)}
.card__body{padding:26px;display:flex;flex-direction:column;flex:1}
.card__body h3{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.12;letter-spacing:-.02em;margin-bottom:12px;color:var(--ink)}
.card__body p{font-size:15px;line-height:1.55;color:var(--text);margin-bottom:20px;flex-grow:1}
.card__meta{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid var(--line-soft);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.card__meta .go{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:transparent;border:1px solid var(--line);color:var(--ink);font-size:17px;transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.card:hover .card__meta .go{background:var(--c);border-color:var(--c);color:#fff;transform:translateX(3px)}

/* ---- monoline motif micro-animations (idle subtle, intensify on hover) ---- */
/* Wärme — flame */
.ico-flame{transform-origin:50% 92%;animation:flame-idle 3s ease-in-out infinite}
.card:hover .ico-flame{animation-duration:1.2s}
.ico-flame .flame-inner{animation:flame-inner 2.2s ease-in-out infinite}
.ico-flame .ember{opacity:0}
.card:hover .ico-flame .ember{animation:ember 1.5s ease-out infinite}
.card:hover .ico-flame .ember.e2{animation-delay:.6s}
@keyframes flame-idle{0%,100%{transform:scaleY(1) rotate(0deg)}50%{transform:scaleY(1.06) rotate(-1deg)}}
@keyframes flame-inner{0%,100%{opacity:.5}50%{opacity:.9}}
@keyframes ember{0%{opacity:0;transform:translateY(0)}20%{opacity:.85}100%{opacity:0;transform:translateY(-20px)}}
/* Rechenzentrum — server */
.ico-server .led{animation:led 2.6s ease-in-out infinite}
.ico-server .led.l2{animation-delay:.5s}
.ico-server .led.l3{animation-delay:1s}
.card:hover .ico-server .led{animation-duration:1s}
.ico-server .pkt{opacity:0}
.card:hover .ico-server .pkt{animation:pkt 1.4s ease-in infinite}
.card:hover .ico-server .pkt.p2{animation-delay:.5s}
.card:hover .ico-server .pkt.p3{animation-delay:.95s}
@keyframes led{0%,100%{opacity:.28}50%{opacity:1}}
@keyframes pkt{0%{opacity:0;transform:translateX(0)}25%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(-30px)}}
/* Standort — location ping */
.ico-map .pin-dot{animation:dotblink 2.4s ease-in-out infinite}
.ico-map .pin-ring{animation:ground 2.8s ease-in-out infinite}
.ico-map .sonar{opacity:0}
.card:hover .ico-map .sonar{animation:sonar 1.9s ease-out infinite}
@keyframes dotblink{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes ground{0%,100%{opacity:.45}50%{opacity:.2}}
@keyframes sonar{0%{opacity:.55;transform:scale(.35)}100%{opacity:0;transform:scale(1.25)}}
@media(prefers-reduced-motion:reduce){.card__art *{animation:none!important}}
@media(max-width:880px){.cards{grid-template-columns:1fr}.card__art{height:150px}}

/* ============================================================
   KENNZAHLEN BAND (dark, counters)
   ============================================================ */
.band{position:relative;background:var(--paper-2);color:var(--ink);overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band__bg{position:absolute;inset:0;z-index:0;opacity:.05}
.band__bg img{width:100%;height:100%;object-fit:cover}
.band .container{position:relative;z-index:2}
.band__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:50px}
.stat .v{font-family:var(--display);font-weight:700;font-size:clamp(40px,5.2vw,72px);line-height:1;letter-spacing:-.04em;color:var(--ink)}
.stat .v .u{font-size:.4em;font-weight:600;color:var(--muted);margin-left:6px;letter-spacing:0}
.stat.s1 .v{color:var(--ink)} .stat.s1 .ac{color:var(--blue)}
.stat .ac{display:inline-block;width:34px;height:4px;border-radius:3px;margin:18px 0 14px}
.stat.s1 .ac{background:var(--blue)} .stat.s2 .ac{background:var(--orange)} .stat.s3 .ac{background:var(--green)} .stat.s4 .ac{background:var(--muted-d)}
.stat .l{font-size:14px;line-height:1.5;color:var(--muted)}
.stat .l b{color:var(--ink);font-weight:600}
@media(max-width:880px){.band__grid{grid-template-columns:1fr 1fr;gap:28px}}

/* ============================================================
   STANDORT
   ============================================================ */
.standort__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.standort__map{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:11/8}
.standort__map img{width:100%;height:100%;object-fit:cover}
.standort__pin{position:absolute;left:80%;top:51%;display:flex;flex-direction:column;align-items:center;gap:7px;transform:translate(-50%,-150%)}
.standort__pin .lab{position:relative;background:rgba(8,15,26,.85);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;padding:7px 13px;border-radius:100px;backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.22);white-space:nowrap;box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
.standort__pin .lab::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;background:rgba(8,15,26,.85);border-right:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22);transform:translateX(-50%) rotate(45deg)}
.standort h2{margin-bottom:22px}
.fact-list{margin-top:8px;border-top:1px solid var(--line)}
.fact-list .f{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.fact-list .f .k{font-weight:700;font-size:14px;color:var(--muted);letter-spacing:.02em}
.fact-list .f .vv{font-size:16px;color:var(--ink)}
.fact-list .f .vv strong{font-weight:700}
@media(max-width:880px){.standort__grid{grid-template-columns:1fr;gap:34px}.fact-list .f{grid-template-columns:120px 1fr}}

/* campus render slot */
.campus{margin-top:0}
.campus__frame{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:var(--paper-2);border:1px solid var(--line)}
.campus__frame img{width:100%;display:block;aspect-ratio:16/7;object-fit:cover}
.campus__tag{position:absolute;top:18px;left:18px;z-index:5;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(8,15,26,.7);border:1px solid rgba(255,255,255,.18);padding:7px 13px;border-radius:100px;backdrop-filter:blur(4px);pointer-events:none}

/* ============================================================
   ABOUT
   ============================================================ */
.about{background:transparent}
.about__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
.about__right p{font-size:17px;line-height:1.7;color:var(--text);margin-bottom:18px}
.about__right p strong{color:var(--ink);font-weight:700}
.about__link{display:inline-flex;align-items:center;gap:9px;margin-top:10px;font-weight:700;color:var(--ink);border-bottom:2px solid var(--orange);padding-bottom:3px;transition:gap .3s var(--ease)}
.about__link:hover{gap:14px}
@media(max-width:880px){.about__grid{grid-template-columns:1fr;gap:30px}}

/* ============================================================
   KONTAKT / DIALOG
   ============================================================ */
.dialog{position:relative;background:var(--paper-2);color:var(--ink);overflow:hidden;border-top:1px solid var(--line)}
.dialog__bg{position:absolute;inset:0;z-index:0;opacity:.05}
.dialog__bg img{width:100%;height:100%;object-fit:cover}
.dialog .container{position:relative;z-index:2}
.dialog__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.dialog h2{margin-bottom:20px}
.dialog__intro{color:var(--text);font-size:18px;line-height:1.6;max-width:460px;margin-bottom:34px}
.dialog__contacts{display:flex;flex-direction:column;gap:2px}
.dc{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--line-d);align-items:flex-start}
.dc:last-child{border-bottom:1px solid var(--line-d)}
.dc .ic{flex-shrink:0;width:42px;height:42px;border-radius:12px;background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:18px}
.dc .t .k{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:3px}
.dc .t .v{color:var(--ink);font-weight:600;font-size:16px}
.dc .t .v span{color:var(--muted);font-weight:400}
/* form */
.form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:32px;box-shadow:var(--shadow)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px;letter-spacing:.02em}
.field input,.field textarea{
  width:100%;background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;color:var(--ink);font-family:var(--body);font-size:15px;transition:border-color .25s,background .25s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--orange);background:var(--paper)}
.field textarea{resize:vertical;min-height:104px}
.form .note{font-size:12.5px;color:var(--muted);margin-top:6px}
.form .btn{width:100%;justify-content:center;margin-top:6px}
@media(max-width:880px){.dialog__grid{grid-template-columns:1fr;gap:40px}.form .row{grid-template-columns:1fr}}

/* ============================================================
   FOOTER
   ============================================================ */
/* footer keeps the dark logo navy (per request) */
.foot{position:relative;z-index:1;background:var(--night-2);color:#fff;padding:64px 0 36px}
.foot::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue) 0 33.33%,var(--green) 33.33% 66.66%,var(--orange) 66.66% 100%);opacity:.9}
.foot__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:42px;border-bottom:1px solid rgba(255,255,255,.10)}
.foot__brand img{height:30px;margin-bottom:20px}
.foot__brand p{color:rgba(233,240,248,.64);font-size:14.5px;line-height:1.6;max-width:300px}
.foot__col h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(233,240,248,.5);margin-bottom:16px;font-weight:700}
.foot__col a,.foot__col p{display:block;color:rgba(233,240,248,.82);font-size:15px;margin-bottom:11px;transition:color .2s}
.foot__col a:hover{color:#fff}
.foot__bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;gap:20px;flex-wrap:wrap}
.foot__bottom .meta{font-size:13px;color:rgba(233,240,248,.5)}
.foot__bottom .tag{font-family:var(--display);font-weight:600;font-size:13px;color:rgba(233,240,248,.5);letter-spacing:.02em}
@media(max-width:880px){.foot__top{grid-template-columns:1fr 1fr;gap:30px}.foot__brand{grid-column:1/-1}}

/* ============================================================
   MOBILE
   ============================================================ */
@media(max-width:880px){
  :root{--pad:20px}
  /* nav: keep navigation usable on phones (links wrap to a second row) */
  .nav{flex-wrap:wrap;row-gap:8px;padding:12px 20px}
  /* mobile: Logo in Zeile 1, Nav-Links in Zeile 2 */
  .nav .brand{position:static;transform:none;flex-basis:100%;order:1}
  .nav .links{display:flex;width:100%;gap:14px 20px;flex-wrap:wrap;align-items:center;justify-content:center;order:3}
  .nav .links a{font-size:14px}
  .nav .links .btn{padding:8px 15px;font-size:13px}
  .nav.scrolled{padding:10px 20px}

  /* full-screen landing on phones too (logo + scroll cue centred, like desktop) */
  .landing__tag{--tagx:0}
  /* mittiges "Pressemitteilungen" nur auf Mobil sichtbar */
  .landing__press{display:inline-flex}
  /* press button sits directly under the logo (line 2), above the 3 nav links */
  .nav .nav__press{position:static;transform:none;margin:4px auto 0;order:2}
  /* reduced spacing after the landing so content is reached quickly */
  .hero{padding:56px 0 28px;min-height:auto}
  .hero__strip{grid-template-columns:1fr 1fr;grid-auto-rows:1fr}
  .hero__strip .s{display:flex;flex-direction:column}
  .hero__strip .s .l{margin-top:auto;padding-top:10px}
  .ahero{padding:96px 0 40px;min-height:auto}

  .foot__top{grid-template-columns:1fr 1fr;gap:30px}
  .foot__brand{grid-column:1/-1}
  .foot__bottom{flex-direction:column;align-items:flex-start;gap:10px}
}
@media(max-width:560px){
  :root{--pad:16px}
  .nav .brand img,.nav .brand .lite{height:26px}
  .hero h1{font-size:clamp(38px,11.5vw,58px)}
  .hero__lead{font-size:16px}
  .hero__cta .btn{flex:1 1 auto;justify-content:center}
  .hero__strip .s{padding:15px 16px}
  .hero__strip .s .v{font-size:22px}
  .ahero h1{font-size:clamp(31px,9.2vw,46px)}
  .ahero .sub{font-size:18px}
  .ahero .meta{flex-wrap:wrap;gap:8px}
  .h2{font-size:clamp(28px,7.6vw,40px)}
  .sec-head{gap:18px}
  .foot__top{grid-template-columns:1fr;gap:26px}
  .foot__brand p{max-width:none}
}