/* =============================================================
   25 Jahre Personalwerk — style.css
   Architektur: ITCSS (Inverted Triangle CSS)
     1. Settings    — Design-Tokens (Custom Properties)
     2. Tools       — Keyframes / Animationen
     3. Generic     — Reset & Basis
     4. Elements    — nackte HTML-Elemente
     5. Objects     — Layout-Primitives (container, section)
     6. Components  — Bausteine je Sektion
     7. Utilities   — Helfer & State-Klassen
     8. Media       — responsive Anpassungen
   ============================================================= */

/* =============================================================
   1. SETTINGS
   ============================================================= */
:root {
  /* Marken- & Flächenfarben */
  --c-navy:        #003865;
  --c-navy-deep:   #0a3568;
  --c-ink:         #0e1b2b;
  --c-ink-2:       #10243a;
  --c-ink-3:       #1c2e44;
  --c-red:         #e51746;
  --c-red-bright:  #ff3b66;
  --c-plum:        #8d2351;
  --c-blue:        #1d5da6;
  --c-blue-light:  #3b86e0;
  --c-periwinkle:  #9aa9dd;
  --c-periwinkle-2:#aeb9e0;
  --c-lavender:    #c3cdee;
  --c-slate:       #5b6fb0;

  /* Textfarben */
  --c-text:        #33465c;
  --c-text-2:      #27384d;
  --c-muted:       #5a6b85;
  --c-muted-2:     #3a4a60;

  /* Hintergründe */
  --c-bg-dark:     #06182b;
  --c-footer:      #04101e;
  --c-surface:     #ffffff;
  --c-panel:       #f6f7fb;

  /* Verläufe */
  --grad-brand:    linear-gradient(135deg, #003865, #8d2351 55%, #e51746);
  --grad-panel:    linear-gradient(160deg, #eef1fb 0%, #f6f7fb 60%);

  /* Typografie */
  --font-head: 'Barlow Condensed', sans-serif;
  --font-body: 'Roboto', sans-serif;

  /* Effekte */
  --shadow-card: 0 18px 50px -30px rgba(0,56,101,.4);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
}

/* =============================================================
   2. TOOLS — Keyframes
   ============================================================= */
@keyframes rise      { from { opacity:0; transform:translateY(34px); } to { opacity:1; transform:none; } }
@keyframes bob       { 0%,100% { transform:translateY(0);  opacity:.6; } 50% { transform:translateY(10px); opacity:1; } }
@keyframes breathe   { 0%,100% { transform:scale(1)   rotate(-2deg); } 50% { transform:scale(1.05) rotate(2deg); } }
@keyframes riseA     { 0% { transform:translate(0, 8vh)  scale(1);    } 100% { transform:translate(5vw,-14vh) scale(1.16); } }
@keyframes riseB     { 0% { transform:translate(0,-6vh)  scale(1.05); } 100% { transform:translate(-6vw,12vh) scale(.9);   } }
@keyframes riseC     { 0% { transform:translate(0, 4vh)  scale(.95);  } 100% { transform:translate(4vw,-10vh) scale(1.12); } }
@keyframes riseD     { 0% { transform:translate(0, 0)    scale(1.1);  } 100% { transform:translate(-5vw,-8vh) scale(.95);  } }
@keyframes morphA    { 0% { border-radius:42% 58% 63% 37% / 41% 44% 56% 59%; } 50% { border-radius:64% 36% 41% 59% / 58% 51% 49% 42%; } 100% { border-radius:38% 62% 56% 44% / 49% 38% 62% 51%; } }
@keyframes morphB    { 0% { border-radius:60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius:30% 70% 70% 30% / 50% 62% 38% 60%; } 100% { border-radius:60% 40% 30% 70% / 60% 30% 70% 40%; } }
@keyframes morphC    { 0% { border-radius:50% 50% 33% 67% / 55% 38% 62% 45%; } 50% { border-radius:67% 33% 58% 42% / 38% 63% 37% 62%; } 100% { border-radius:50% 50% 33% 67% / 55% 38% 62% 45%; } }
@keyframes msIn      { 0% { opacity:0; transform:translateY(26px) scale(.985); } 100% { opacity:1; transform:none; } }
@keyframes ptDrive   { 0% { transform:translateX(calc(100vw + 60px)); } 100% { transform:translateX(calc(-100% - 60px)); } }
@keyframes ptWheel   { to { transform:rotate(360deg); } }
@keyframes ptBounce  { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
@keyframes ptConfetti{ 0% { opacity:0; transform:translateY(0) scale(.5) rotate(0); } 15% { opacity:1; } 100% { opacity:0; transform:translateY(-52px) translateX(18px) scale(1) rotate(260deg); } }

/* =============================================================
   3. GENERIC — Reset & Basis
   ============================================================= */
* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  background: var(--c-bg-dark);
  font-family: var(--font-body);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
}

/* =============================================================
   4. ELEMENTS
   ============================================================= */
img { display:block; max-width:100%; }

a { color:inherit; }

/* =============================================================
   5. OBJECTS
   ============================================================= */
/* Bühne / Root-Wrapper */
.page { position:relative; overflow:hidden; width:100%; }

/* Zentrierter Inhaltscontainer (Breiten-Varianten) */
.container          { position:relative; z-index:1; margin-inline:auto; }
.container--wide    { max-width:1240px; }
.container--lg      { max-width:1180px; }
.container--md      { max-width:1080px; }
.container--narrow  { max-width:960px; }

/* Sektions-Grundlagen */
.section          { position:relative; z-index:2; overflow:hidden; }
.section--panel   { background: var(--grad-panel); }
.section--surface { background: var(--c-surface); }

/* SVG-Filter-Host (visuell versteckt) */
.svg-defs { position:absolute; width:0; height:0; pointer-events:none; }

/* Dekorative Marken-Bubbles */
.deco-bubbles { position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.deco-bubble  { position:absolute; border-radius:50%; }

/* Eyebrow-Label */
.eyebrow {
  font-family: var(--font-head); font-weight:600;
  letter-spacing:.3em; text-transform:uppercase;
  color: var(--c-red); font-size: clamp(14px, 1.4vw, 18px);
}
.eyebrow--sm { font-size: clamp(13px, 1.3vw, 16px); }

/* =============================================================
   6. COMPONENTS
   ============================================================= */

/* --- Navigation --------------------------------------------- */
.nav {
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(20px, 5vw, 64px);
  backdrop-filter: blur(16px);
  background: rgba(255,255,255,.72);
  border-bottom:1px solid rgba(0,56,101,.08);
  animation: rise .8s ease both;
}
.nav__brand { display:inline-flex; align-items:center; transition: opacity .3s; }
.nav__brand:hover { opacity:.82; }
.nav__logo  { height:50px; width:auto; }
.nav__links { display:flex; align-items:center; gap:14px; }
.nav__pill {
  font-family: var(--font-head); font-weight:600; font-size:17px;
  letter-spacing:.16em; text-transform:uppercase; color: var(--c-navy);
  text-decoration:none; border:1.5px solid rgba(0,56,101,.25);
  padding:9px 22px; border-radius:40px; transition: all .3s;
}
.nav__pill:hover { background: var(--c-red); color:#fff; border-color: var(--c-red); }

/* --- Hero --------------------------------------------------- */
.hero {
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:150px 24px 90px; overflow:hidden; background: var(--c-surface);
}
.hero__bubble:nth-child(1) { top:16%; left:12%; width:84px; height:84px; background:radial-gradient(circle at 35% 30%, var(--c-blue-light), var(--c-blue)); opacity:.5; animation:riseA 22s ease-in-out infinite alternate; }
.hero__bubble:nth-child(2) { top:24%; right:14%; width:56px; height:56px; background:radial-gradient(circle at 35% 30%, var(--c-red-bright), var(--c-red)); opacity:.5; animation:riseB 26s ease-in-out infinite alternate; }
.hero__bubble:nth-child(3) { bottom:20%; left:18%; width:40px; height:40px; background:radial-gradient(circle at 35% 30%, var(--c-lavender), var(--c-periwinkle)); opacity:.6; animation:riseC 19s ease-in-out infinite alternate; }
.hero__bubble:nth-child(4) { bottom:26%; right:20%; width:70px; height:70px; background:radial-gradient(circle at 35% 30%, var(--c-blue), var(--c-navy-deep)); opacity:.45; animation:riseD 24s ease-in-out infinite alternate; }
.hero__bubble:nth-child(5) { top:38%; left:6%; width:30px; height:30px; background:var(--c-red); opacity:.5; animation:riseB 17s ease-in-out infinite alternate; }
.hero__bubble:nth-child(6) { top:60%; right:8%; width:46px; height:46px; background:var(--c-periwinkle); opacity:.5; animation:riseA 28s ease-in-out infinite alternate; }

.hero__cloud     { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.hero__cloud-img { width:min(150vh, 1340px); max-width:168vw; filter:drop-shadow(0 30px 70px rgba(0,56,101,.18)); }

.hero__content { position:relative; z-index:4; display:flex; flex-direction:column; align-items:center; max-width:1100px; }
.hero__eyebrow {
  font-family: var(--font-head); font-weight:600;
  font-size:clamp(15px, 1.6vw, 22px); letter-spacing:.44em;
  text-transform:uppercase; color: var(--c-navy); animation: rise .9s ease .1s both;
}
.hero__number {
  font-family: var(--font-head); font-weight:800; line-height:.8;
  font-size:clamp(130px, 30vw, 500px); letter-spacing:-.01em; margin:6px 0 0; color:#fff;
  text-shadow:0 10px 50px rgba(0,56,101,.45), 0 2px 6px rgba(0,40,80,.35);
  animation: rise 1s ease .2s both;
}
.hero__title {
  font-family: var(--font-head); font-weight:700;
  font-size:clamp(36px, 7.4vw, 112px); line-height:.9; letter-spacing:.03em;
  text-transform:uppercase; color: var(--c-navy); margin-top:2px; animation: rise 1s ease .32s both;
  /* weiße Outline + weicher Halo — hebt den Schriftzug von den Bubbles ab */
  text-shadow:
    -2px -2px 0 #fff,  2px -2px 0 #fff,
    -2px  2px 0 #fff,  2px  2px 0 #fff,
     0   -2px 0 #fff,  0    2px 0 #fff,
    -2px  0   0 #fff,  2px  0   0 #fff,
     0    6px 26px rgba(255,255,255,.75);
}
.hero__lead {
  font-family: var(--font-body); font-weight:300;
  font-size:clamp(18px, 2vw, 26px); line-height:1.5; color: var(--c-text);
  max-width:640px; margin-top:30px; animation: rise 1s ease .44s both;
}
.hero__scroll {
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-decoration:none; color: var(--c-navy);
  font-family: var(--font-head); letter-spacing:.2em; font-size:13px; text-transform:uppercase;
}
.hero__scroll-label { animation: rise 1s ease .6s both; }
.hero__scroll-arrow { display:inline-block; animation: bob 1.8s ease-in-out infinite; }

/* --- Intro -------------------------------------------------- */
.intro { padding: clamp(90px, 14vh, 180px) clamp(24px, 8vw, 140px); }
.intro__bubbles { position:absolute; right:-14vw; top:-8vh; width:min(60vw, 720px); opacity:.5; animation: breathe 22s ease-in-out infinite; pointer-events:none; }
.intro__inner { max-width:1080px; }
.intro__title {
  font-family: var(--font-head); font-weight:700;
  font-size:clamp(40px, 6.5vw, 104px); line-height:.96;
  color: var(--c-navy); margin:18px 0 0; text-transform:uppercase;
}
.intro__text {
  font-family: var(--font-body); font-weight:300;
  font-size:clamp(20px, 2.6vw, 34px); line-height:1.45;
  color: var(--c-text-2); max-width:880px; margin-top:40px; text-wrap:pretty;
}
.hl        { font-weight:500; }
.hl--navy  { color: var(--c-navy); }
.hl--red   { color: var(--c-red); }

/* --- Meilensteine (Bubble-Story-Explorer) ------------------- */
.milestones { padding: clamp(70px, 11vh, 150px) clamp(20px, 7vw, 120px) clamp(70px, 11vh, 140px); }

.ms-lava { position:absolute; inset:-12%; filter:url(#goo); overflow:hidden; opacity:.08; z-index:0; pointer-events:none; }
.ms-lava__blob { position:absolute; }
.ms-lava__blob:nth-child(1) { top:6%; left:6%; width:20vw; height:20vw; background:radial-gradient(circle at 38% 32%, var(--c-red-bright), var(--c-red)); animation:riseA 30s ease-in-out infinite alternate, morphA 19s ease-in-out infinite; }
.ms-lava__blob:nth-child(2) { bottom:2%; right:8%; width:18vw; height:18vw; background:radial-gradient(circle at 40% 35%, var(--c-blue), var(--c-navy-deep)); animation:riseC 26s ease-in-out infinite alternate, morphB 22s ease-in-out infinite; }
.ms-lava__blob:nth-child(3) { top:44%; left:44%; width:13vw; height:13vw; background:radial-gradient(circle at 40% 30%, var(--c-periwinkle), var(--c-slate)); animation:riseD 23s ease-in-out infinite alternate, morphC 17s ease-in-out infinite; }

.milestones__inner { z-index:2; max-width:1240px; }
.milestones__head  { text-align:center; margin-bottom: clamp(28px, 5vh, 56px); }
.milestones__title {
  font-family: var(--font-head); font-weight:700;
  font-size:clamp(36px, 5.5vw, 86px); line-height:.98;
  color: var(--c-navy); margin-top:12px; text-transform:uppercase;
}

.ms-stage { position:relative; min-height:clamp(380px, 52vh, 520px); display:flex; align-items:center; }
.ms-story { display:none; width:100%; align-items:center; }
.ms-story.is-on { display:flex; animation: msIn .55s var(--ease-out); }
.ms-grid { display:grid; grid-template-columns:minmax(0,auto) 1fr; gap:clamp(24px, 5vw, 80px); align-items:center; width:100%; }
.ms-year {
  font-family: var(--font-head); font-weight:800;
  font-size:clamp(110px, 15vw, 250px); line-height:.8; letter-spacing:-.02em;
  background: var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ms-body { max-width:680px; }
.ms-pw { font-family: var(--font-body); font-weight:400; font-size:clamp(20px, 2.4vw, 32px); line-height:1.38; color: var(--c-ink-2); text-wrap:pretty; margin-bottom:22px; }
.ms-welt { display:inline-block; background:rgba(0,56,101,.05); border-left:3px solid var(--c-periwinkle-2); border-radius:0 10px 10px 0; padding:14px 20px; margin-bottom:22px; max-width:600px; }
.ms-welt__label { font-family: var(--font-head); font-weight:600; letter-spacing:.22em; text-transform:uppercase; font-size:12px; color: var(--c-muted); display:block; margin-bottom:5px; }
.ms-welt__text  { font-family: var(--font-body); font-weight:300; font-size:clamp(15px, 1.6vw, 19px); line-height:1.45; color: var(--c-muted-2); }
.ms-quote { position:relative; margin-top:4px; padding:26px 30px; background: var(--c-panel); border-radius:18px; box-shadow: var(--shadow-card); max-width:640px; }
.ms-quote__mark { position:absolute; top:-14px; left:22px; font-family: var(--font-head); font-weight:800; font-size:60px; line-height:1; color: var(--c-red); opacity:.22; }
.ms-quote__text { font-family: var(--font-body); font-weight:300; font-style:italic; font-size:clamp(16px, 1.7vw, 20px); line-height:1.5; color: var(--c-ink-3); text-wrap:pretty; }
.ms-quote__cite { display:block; margin-top:14px; font-style:normal; font-family: var(--font-head); font-weight:600; letter-spacing:.06em; color: var(--c-red); font-size:15px; }

.ms-controls { display:flex; align-items:center; gap:clamp(12px, 2vw, 22px); margin-top:clamp(30px, 5vh, 56px); }
.ms-bubbles {
  flex:1; min-width:0; overflow:hidden; position:relative; padding:8px 0;
  -webkit-mask:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.ms-bub-track { display:flex; gap:clamp(8px, .9vw, 14px); width:max-content; transition:transform .55s var(--ease-out); }
.ms-bub {
  cursor:pointer; font-family: var(--font-head); font-weight:700;
  letter-spacing:.06em; font-size:clamp(15px, 1.35vw, 19px);
  color: var(--c-navy); background:#fff; border:1.6px solid rgba(0,56,101,.18);
  border-radius:40px; padding:9px 17px; line-height:1;
  transition: transform .35s var(--ease-out), background .35s ease, color .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ms-bub:hover  { transform:translateY(-4px); border-color:rgba(229,23,70,.5); }
.ms-bub.is-on  { transform:translateY(-5px) scale(1.1); color:#fff; border-color:transparent; background: var(--grad-brand); }
.ms-nav {
  cursor:pointer; width:54px; height:54px; border-radius:50%;
  border:1.6px solid rgba(0,56,101,.2); background:#fff; color: var(--c-navy);
  display:flex; align-items:center; justify-content:center; font-size:24px; line-height:1;
  transition: transform .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
}
.ms-nav:hover { transform:scale(1.08); background: var(--c-navy); color:#fff; border-color: var(--c-navy); }

/* --- Zahlen / Stats ----------------------------------------- */
.stats { color: var(--c-ink-2); padding: clamp(80px, 14vh, 170px) clamp(20px, 7vw, 120px); }
.stats__bubbles { position:absolute; right:-12vw; top:-10vh; width:min(58vw, 720px); opacity:.42; z-index:0; pointer-events:none; }
.stats__inner { max-width:1180px; }
.stats__title {
  font-family: var(--font-head); font-weight:700;
  font-size:clamp(34px, 5vw, 76px); text-transform:uppercase; line-height:.96;
  margin-bottom:clamp(46px, 7vh, 90px); color: var(--c-navy);
}
.stats__title-accent { color: var(--c-red); }
.stats__grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:clamp(34px, 5vw, 70px); }
.stats__grid .reveal:nth-child(1) { transition-delay:.05s; }
.stats__grid .reveal:nth-child(2) { transition-delay:.12s; }
.stats__grid .reveal:nth-child(3) { transition-delay:.19s; }
.stats__grid .reveal:nth-child(4) { transition-delay:.26s; }
.stat-num {
  font-family: var(--font-head); font-weight:800;
  font-size:clamp(48px, 5.6vw, 78px); line-height:.85; white-space:nowrap;
  background: var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-label { font-family: var(--font-body); font-weight:300; font-size:clamp(16px, 1.6vw, 20px); color: var(--c-muted); margin-top:14px; }

/* --- Ausblick ----------------------------------------------- */
.outlook { text-align:center; padding: clamp(120px, 20vh, 260px) clamp(24px, 8vw, 140px); color: var(--c-navy); }
.outlook__bubble:nth-child(1) { top:18%; left:14%; width:74px; height:74px; background:radial-gradient(circle at 35% 30%, var(--c-blue-light), var(--c-blue)); opacity:.5; animation:riseA 23s ease-in-out infinite alternate; }
.outlook__bubble:nth-child(2) { top:26%; right:16%; width:52px; height:52px; background:radial-gradient(circle at 35% 30%, var(--c-red-bright), var(--c-red)); opacity:.5; animation:riseB 27s ease-in-out infinite alternate; }
.outlook__bubble:nth-child(3) { bottom:20%; left:20%; width:40px; height:40px; background:radial-gradient(circle at 35% 30%, var(--c-lavender), var(--c-periwinkle)); opacity:.6; animation:riseC 19s ease-in-out infinite alternate; }
.outlook__bubble:nth-child(4) { bottom:24%; right:22%; width:64px; height:64px; background:radial-gradient(circle at 35% 30%, var(--c-blue), var(--c-navy-deep)); opacity:.45; animation:riseD 25s ease-in-out infinite alternate; }
.outlook__art { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.outlook__art-img { width:min(95vh, 860px); max-width:150vw; opacity:.9; filter:drop-shadow(0 30px 70px rgba(0,56,101,.16)); }
.outlook__scrim { position:absolute; inset:0; z-index:3; background:radial-gradient(ellipse 56% 56% at 50% 50%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 40%, rgba(255,255,255,.2) 66%, rgba(255,255,255,0) 82%); }
.outlook__inner { z-index:4; max-width:960px; }
.outlook__title { font-family: var(--font-head); font-weight:800; font-size:clamp(52px, 10vw, 168px); line-height:.88; margin:16px 0 0; text-transform:uppercase; color: var(--c-navy); }
.outlook__text  { font-family: var(--font-body); font-weight:300; font-size:clamp(19px, 2.4vw, 30px); line-height:1.45; color: var(--c-text); margin-top:34px; text-wrap:pretty; }
.btn {
  display:inline-block; margin-top:48px;
  font-family: var(--font-head); font-weight:700;
  font-size:clamp(17px, 1.7vw, 22px); letter-spacing:.12em; text-transform:uppercase;
  color:#fff; background: var(--c-red); padding:18px 46px; border-radius:50px;
  text-decoration:none; box-shadow:0 22px 56px -16px rgba(229,23,70,.7);
  transition: transform .3s, box-shadow .3s;
}
.btn:hover { transform:translateY(-4px); box-shadow:0 30px 70px -16px rgba(229,23,70,.85); }

/* --- Danke -------------------------------------------------- */
.thanks { padding: clamp(90px, 14vh, 170px) clamp(20px, 7vw, 120px); }
.thanks__bubbles { position:absolute; left:-16vw; bottom:-12vh; width:min(58vw, 700px); opacity:.4; animation: breathe 24s ease-in-out infinite; pointer-events:none; transform:scaleX(-1); }
.thanks__inner { max-width:1180px; }
.thanks__head  { text-align:center; margin-bottom:clamp(46px, 7vh, 84px); }
.thanks__title { font-family: var(--font-head); font-weight:800; font-size:clamp(44px, 7vw, 110px); line-height:.9; color: var(--c-navy); margin-top:14px; text-transform:uppercase; }
.thanks__lead  { font-family: var(--font-body); font-weight:300; font-size:clamp(18px, 2vw, 25px); line-height:1.5; color: var(--c-text); max-width:760px; margin:22px auto 0; text-wrap:pretty; }
.thanks__grid  { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:clamp(20px, 3vw, 28px); }
.thanks__grid .reveal:nth-child(1) { transition-delay:.05s; }
.thanks__grid .reveal:nth-child(2) { transition-delay:.12s; }
.thanks__grid .reveal:nth-child(3) { transition-delay:.19s; }
.thanks__grid .reveal:nth-child(4) { transition-delay:.26s; }
.thanks__card {
  background:#fff; border-radius:20px;
  padding:clamp(28px, 3.4vw, 40px) clamp(24px, 2.8vw, 32px);
  box-shadow: var(--shadow-card);
  transition: transform .4s var(--ease-out), box-shadow .4s ease;
}
.thanks__card:hover     { transform:translateY(-5px); }
.thanks__card-title { font-family: var(--font-head); font-weight:700; letter-spacing:.02em; text-transform:uppercase; font-size:clamp(20px, 2.2vw, 26px); color: var(--c-navy); }
.thanks__card-text  { font-family: var(--font-body); font-weight:300; font-size:clamp(15px, 1.5vw, 17px); line-height:1.55; color: var(--c-muted); margin-top:14px; }

/* --- Social ------------------------------------------------- */
.social { text-align:center; margin-top:clamp(56px, 8vh, 90px); }
.social__text { font-family: var(--font-body); font-weight:300; font-size:clamp(16px, 1.6vw, 19px); line-height:1.5; color: var(--c-muted); max-width:520px; margin:10px auto 0; }
.social__list { display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(12px, 1.6vw, 16px); margin-top:clamp(22px, 3vh, 30px); }
.social__icn {
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(48px, 5vw, 58px); height:clamp(48px, 5vw, 58px);
  border-radius:50%; background:#fff; color: var(--c-navy);
  box-shadow:0 14px 32px -18px rgba(0,56,101,.45); text-decoration:none;
  transition: transform .3s, box-shadow .3s, background .3s, color .3s;
}
.social__icn:hover { transform:translateY(-4px); background: var(--c-red); color:#fff; box-shadow:0 20px 40px -16px rgba(229,23,70,.55); }

/* --- Footer ------------------------------------------------- */
.site-footer {
  position:relative; z-index:2; overflow:hidden; background: var(--c-footer);
  padding:clamp(50px, 8vh, 90px) clamp(24px, 8vw, 140px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:30px;
}
.site-footer__logo { height:clamp(90px, 12vw, 140px); width:auto; }
.site-footer__meta { font-family: var(--font-body); font-weight:300; font-size:14px; color:#8a9bbb; line-height:1.7; text-align:right; }
.site-footer__legal { display:flex; gap:22px; justify-content:flex-end; margin-top:14px; }
.site-footer__link {
  font-family: var(--font-head); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; font-size:14px; color:#c4cee6; text-decoration:none; transition: color .3s;
}
.site-footer__link:hover { color: var(--c-red); }

/* --- Partyzug ----------------------------------------------- */
.partytrain {
  position:absolute; left:0; bottom:14px; z-index:6;
  display:flex; align-items:flex-end; gap:7px; pointer-events:none; will-change:transform;
  animation:none; transform:translateX(calc(100vw + 80px));
}
.partytrain.go { animation: ptDrive 32s linear forwards; }

.pt-confetti { position:relative; width:0; height:0; align-self:flex-start; margin-top:-6px; }
.pt-confetti span { position:absolute; }
.pt-confetti span:nth-child(1) { left:6px;  top:0;   width:7px; height:7px; border-radius:2px;  background:var(--c-red);        animation:ptConfetti 1.1s  ease-in-out       infinite; }
.pt-confetti span:nth-child(2) { left:14px; top:0;   width:6px; height:6px; border-radius:50%; background:var(--c-blue);       animation:ptConfetti 1.3s  ease-in-out .2s   infinite; }
.pt-confetti span:nth-child(3) { left:0;    top:2px; width:6px; height:6px; border-radius:2px;  background:var(--c-periwinkle);  animation:ptConfetti 1s    ease-in-out .45s  infinite; }
.pt-confetti span:nth-child(4) { left:20px; top:1px; width:7px; height:7px; border-radius:50%; background:var(--c-red);        animation:ptConfetti 1.25s ease-in-out .65s  infinite; }

.pt-loco { position:relative; animation: ptBounce .5s ease-in-out infinite; }
.pt-loco__body { position:relative; width:74px; height:38px; background:linear-gradient(135deg, var(--c-navy), var(--c-navy-deep)); border-radius:8px 14px 6px 6px; }
.pt-loco__cab  { position:absolute; top:-24px; right:6px; width:32px; height:26px; background: var(--c-navy); border-radius:9px 9px 0 0; overflow:hidden; box-shadow:inset 0 0 0 2px var(--c-navy-deep); }
.pt-loco__driver  { position:absolute; left:50%; top:2px; width:52px; height:52px; transform:translateX(-50%); object-fit:cover; object-position:center 12%; border-radius:0 0 26px 26px; }
.pt-loco__chimney { position:absolute; top:-22px; left:12px; width:9px; height:14px; background: var(--c-red); border-radius:3px 3px 0 0; }
.pt-loco__num  { position:absolute; left:8px; bottom:8px; font-family: var(--font-head); font-weight:800; font-size:15px; color:#ff5379; line-height:1; }
.pt-loco__wheel { position:absolute; bottom:-7px; width:16px; height:16px; border-radius:50%; background:#11243c; border:3px solid var(--c-slate); animation: ptWheel .6s linear infinite; }
.pt-loco__wheel--l { left:9px; }
.pt-loco__wheel--r { right:11px; }

.ptwagon { position:relative; animation: ptBounce .5s ease-in-out infinite; }
.ptwagon:nth-child(2n)   { animation-delay:.1s; }
.ptwagon:nth-child(3n)   { animation-delay:.22s; }
.ptwagon:nth-child(4n)   { animation-delay:.16s; }
.ptwagon:nth-child(3n+1) .ptbody { background:linear-gradient(135deg, #c4163f, var(--c-red)); }
.ptwagon:nth-child(3n+2) .ptbody { background:linear-gradient(135deg, var(--c-slate), var(--c-periwinkle)); }
.ptwagon:nth-child(3n)   .ptbody { background:linear-gradient(135deg, var(--c-navy), var(--c-blue)); }
.ptbody { position:relative; border-radius:7px; display:flex; align-items:center; justify-content:center; }
.ptbody--year { width:58px; height:34px; }
.ptbody--folk { width:56px; height:28px; align-items:flex-end; gap:5px; overflow:visible; }
.ptwagon__year { font-family: var(--font-head); font-weight:800; font-size:17px; color:#fff; letter-spacing:.01em; line-height:1; }
.ptwheel { position:absolute; bottom:-7px; width:15px; height:15px; border-radius:50%; background:#11243c; border:3px solid var(--c-slate); animation: ptWheel .6s linear infinite; }
.ptwheel--l { left:8px; }
.ptwheel--r { right:8px; }
.ptpop { position:absolute; top:-6px; width:7px; height:7px; border-radius:2px; animation: ptConfetti 1.2s ease-in-out infinite; }
.ptwagon .ptpop:nth-child(1) { left:10px; background: var(--c-red);       animation-delay:0s; }
.ptwagon .ptpop:nth-child(2) { left:22px; background: var(--c-blue);      border-radius:50%; animation-delay:.25s; }
.ptwagon .ptpop:nth-child(3) { left:34px; background: var(--c-periwinkle); animation-delay:.5s; }
.ptwagon .ptpop:nth-child(4) { left:44px; background: var(--c-red);       border-radius:50%; animation-delay:.75s; }
.pt-folk { position:relative; display:flex; flex-direction:column; align-items:center; }
.pt-folk__head { width:9px; height:9px; border-radius:50%; }
.pt-folk__body { width:13px; border-radius:6px 6px 0 0; margin-top:-1px; }
.pt-folk--a .pt-folk__head { background:#ffd7b2; }
.pt-folk--a .pt-folk__body { height:14px; background: var(--c-navy); }
.pt-folk--b .pt-folk__head { background:#f3c39a; }
.pt-folk--b .pt-folk__body { height:16px; background: var(--c-red); }
.pt-folk--c .pt-folk__head { background:#ffd7b2; }
.pt-folk--c .pt-folk__body { height:13px; background: var(--c-slate); }

/* =============================================================
   7. UTILITIES / STATE
   ============================================================= */
/* Scroll-Reveal (IntersectionObserver setzt .is-in via JS) */
.reveal        { opacity:0; transform:translateY(40px); transition:opacity .9s ease, transform .9s ease; }
.reveal.is-in  { opacity:1; transform:none; }

/* =============================================================
   8. MEDIA
   ============================================================= */
@media (max-width:860px) {
  .ms-grid  { grid-template-columns:1fr; gap:18px; }
  .ms-year  { font-size:clamp(80px, 22vw, 150px); }
  .ms-stage { min-height:0; }
}

@media (prefers-reduced-motion: reduce) {
  *        { animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  .reveal  { opacity:1; transform:none; }
}