:root{
  --ink:#0A142E; --ink2:#111E44; --ink3:#1A2B5E;
  --sunrise:#FF5A2D; --sunrise-2:#FF7A4D; --gold:#F5B93C; --jade:#17A673; --jade-2:#3BC493;
  --miko-violet:#807BC4; --miko-grad:linear-gradient(100deg,var(--miko-violet) 0%,#D36D71 50%,#F5853E 100%);
  --cloud:#F4F6FB; --paper:#FFFFFF; --text-dark:#141D38; --text-mut:#5A6785;
  --text-light:#EDF1FB; --text-light-mut:#9AA7C7;
  --line-dark:rgba(255,255,255,.09); --line-light:#E3E8F4;
  /* iHub-Markenfarben — AUSSCHLIESSLICH für die iHub-Subdomain (body.ihub, ihub.html).
     Dort gilt die iHub-CI (Türkis/Weiß) statt unserer Navy/Orange-Palette; siehe DESIGN.md §1. */
  --ihub-teal:#41DAD8; --ihub-teal-2:#5FE6D9; --ihub-ink:#0A1F2E; --ihub-ink2:#061520;
  --radius:18px; --maxw:1160px;
  /* spacing tokens — use these for new sections/cards, don't invent new values */
  --section-pad:50px;   /* vertical padding of every section */
  --head-mb:56px;       /* gap between .section-head and section content */
  --grid-gap:18px;      /* standard gap in card grids (grid-3/grid-4/rail/faq) */
  --wrap-pad:24px;      /* horizontal page padding inside .wrap */
  --font-body:'Space Grotesk',system-ui,sans-serif;
  --font-mono:'Space Grotesk',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--ink);color:var(--text-light);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--wrap-pad)}
.mono{font-family:var(--font-mono)}
.eyebrow{font-family:var(--font-mono);font-size:16px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.eyebrow.orange{color:var(--sunrise-2)}
.eyebrow.jade{color:var(--jade-2)}
h1,h2,h3{font-weight:800;line-height:1.12;letter-spacing:-.02em}
.accent{color:var(--sunrise)}
.accent-jade{color:var(--jade-2)}
.nowrap{white-space:nowrap}

/* ---------- NAV ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(10,20,46,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-dark)}
.nav-inner{display:flex;align-items:center;gap:28px;height:80px}
.logo{display:flex;align-items:center;gap:9px;white-space:nowrap;flex-shrink:0}
.logo img{height:32px;width:auto;display:block}
.nav-links{display:flex;gap:22px;font-size:17px;font-weight:500;color:var(--text-light-mut);margin-left:8px}
/* Labels nie mitten im Wort umbrechen - die VI-Beschriftungen sind laenger
   als die englischen und staffelten sich sonst mehrzeilig in die Kopfzeile. */
.nav-links a{white-space:nowrap}
.nav-links a:hover{color:#fff}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.lang-toggle{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:13px}
.lang-toggle button{display:flex;align-items:center;gap:6px;background:none;border:0;color:var(--text-light-mut);padding:4px;cursor:pointer;font-family:inherit;font-size:inherit;opacity:.45;transition:opacity .15s}
.lang-toggle button svg{border-radius:2px;display:block}
.lang-toggle button:hover{opacity:.75}
.lang-toggle button.active{color:#fff;font-weight:600;opacity:1}
.btn{display:inline-block;white-space:nowrap;padding:12px 22px;border-radius:12px;font-weight:600;font-size:15px;transition:transform .15s ease,box-shadow .15s ease;cursor:pointer;border:0;font-family:inherit}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--miko-grad);color:#fff;box-shadow:0 8px 24px rgba(255,90,45,.35)}
.btn-primary:hover{box-shadow:0 12px 30px rgba(255,90,45,.45)}
/* background:transparent so .btn-ghost also works on a <button> (UA default is grey). */
.btn-ghost{border:1px solid var(--line-dark);color:var(--text-light);background:transparent}
.btn-ghost:hover{border-color:rgba(255,255,255,.3)}
.btn-sm{padding:10px 18px;font-size:15px}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:32px;height:32px;background:none;border:0;cursor:pointer;padding:4px;flex-shrink:0}
.nav-toggle span{display:block;width:100%;height:2px;background:var(--text-light);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-cta-mobile{display:none}
/* Eigener Breakpoint nur fuer die Nav (DESIGN.md §2): Logo, die sechs
   VI-Labels, Sprachumschalter und CTA fuellen die Inhaltsbreite komplett aus
   und brauchen rund 1195px Viewport. Darunter staffelte sich der Nav-Text
   mehrzeilig in die Kopfzeile und das Logo wurde zusammengequetscht, statt
   aufs Hamburger-Menue umzuschalten. */
@media(max-width:1200px){
  .nav-toggle{display:flex}
  .nav-right .btn-primary.btn-sm:not(.nav-cta-mobile){display:none}
  .nav-links{display:none;position:absolute;top:80px;left:0;right:0;flex-direction:column;gap:0;margin-left:0;background:var(--ink2);border-bottom:1px solid var(--line-dark);padding:8px 24px 20px;box-shadow:0 20px 40px rgba(0,0,0,.35)}
  .nav-links.open{display:flex}
  .nav-links a:not(.btn){padding:12px 0;border-bottom:1px solid var(--line-dark)}
  .nav-cta-mobile{display:block;margin-top:14px;text-align:center}
}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;padding:88px 0 72px;background:var(--ink)}
.hero .wrap{position:relative;z-index:1}
.hero-glow{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(180deg, var(--ink) 0%, var(--ink) 52%, var(--ink3) 72%, #2E2420 87%, #4A2A14 96%, #522E14 100%);
  background-size:100% 145%;background-position:center top;
  animation:heroGlow 21s ease-in-out infinite}
/* 2s Ruhe -> 7s Sonnenaufgang -> 2s Höhepunkt halten -> 10s langsam zurück */
@keyframes heroGlow{
  0%,9.5%{background-position:center top}
  42.9%,52.4%{background-position:center bottom}
  100%{background-position:center top}}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(36px,5vw,57px);margin:18px 0 20px;font-weight:900}
.hero p.lead{font-size:18px;color:var(--text-light-mut);max-width:34em;margin-bottom:30px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:38px}
@media(max-width:560px){.hero-ctas{display:none}}
@media(max-width:640px){.hero{padding:32px 0 48px}.hide-mobile{display:none}.hero h1{font-size:30px}.hero-grid{gap:26px}}
.hero-stats{display:flex;gap:0;border:1px solid var(--line-dark);border-radius:var(--radius);overflow:hidden;max-width:560px;margin:0 0 30px}
.hstat{flex:1;padding:16px 18px;border-right:1px solid var(--line-dark)}
.hstat:last-child{border-right:0}
.hstat b{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em}
.hstat span{font-size:12.5px;color:var(--text-light-mut)}
.hstat:nth-child(1) b{color:var(--sunrise-2)}
.hstat:nth-child(2) b{color:var(--gold)}
.hstat:nth-child(3) b{color:var(--jade-2)}

/* Miko chat card */
.miko-card{background:linear-gradient(160deg,var(--ink2),var(--ink3));border:1px solid var(--line-dark);border-radius:22px;padding:22px;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.miko-card.miko-video{padding:0;overflow:hidden}
.video-embed{aspect-ratio:16/9 !important;position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line-dark);width:100%;height:auto;background:var(--ink2)}
.video-embed iframe{width:100% !important;height:100% !important;border:0;display:block;background:var(--ink2)}
.video-label{position:absolute;top:16px;left:16px;z-index:10;background:rgba(255,90,45,.9);color:#fff;padding:6px 14px;border-radius:8px;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.05em}
.miko-avatar{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--sunrise),var(--gold));display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;font-size:15px}
.bubble{border-radius:14px;padding:13px 15px;font-size:14.5px;line-height:1.55;margin-bottom:10px;max-width:92%}
.bubble.miko{background:rgba(255,255,255,.06);border:1px solid var(--line-dark)}
.bubble.user{background:var(--sunrise);color:#fff;margin-left:auto;max-width:70%}
#chat-body{min-height:250px;display:flex;flex-direction:column}
.bubble{animation:pop .32s ease both}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.qr-row{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 10px;animation:pop .32s ease both}
.qr-btn{background:none;border:1px solid rgba(255,90,45,.5);color:var(--sunrise-2);border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:500;cursor:pointer;font-family:var(--font-body);transition:background .15s,transform .15s}
.qr-btn:hover{background:rgba(255,90,45,.14);transform:translateY(-1px)}
.chat-cta{margin-top:6px;animation:pop .32s ease both}
.replay{background:none;border:0;color:var(--text-light-mut);font-family:var(--font-mono);font-size:11px;cursor:pointer;margin-top:10px;padding:4px 0}
.replay:hover{color:#fff}
.miko-typing{display:flex;gap:5px;padding:12px 15px}
.miko-typing i{width:6px;height:6px;border-radius:50%;background:var(--text-light-mut);animation:blink 1.2s infinite}
.miko-typing i:nth-child(2){animation-delay:.2s}.miko-typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr}.miko-card{max-width:480px}}

/* ---------- PRESS ---------- */
.press{border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);padding:26px 0;background:rgba(255,255,255,.02)}
.press-inner{display:flex;align-items:center;gap:34px;flex-wrap:wrap;justify-content:center}
.press-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-light-mut)}
.press-item{font-weight:700;font-size:24px;letter-spacing:.01em;display:flex;align-items:baseline;gap:8px;transition:filter .15s;
  background:linear-gradient(180deg,#ffffff 0%,#f4f6fb 35%,#c7cfe2 55%,#eef1f9 70%,#a9b3cc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.press-item small{font-family:var(--font-mono);font-weight:400;font-size:10.5px;color:var(--text-light-mut);background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:var(--text-light-mut)}
a.press-item:hover{filter:brightness(1.15)}
.press-bloomberg{font-family:'Libre Franklin',sans-serif;font-weight:800;letter-spacing:-.01em}
.press-vtv-today{font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;font-style:italic;letter-spacing:0}
.press-cafef{font-family:'Nunito',sans-serif;font-weight:900;letter-spacing:0}
.press-vtv4{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
@media(max-width:640px){.press-item{font-size:17px}.press-inner{row-gap:20px}}

/* ---------- LIGHT SECTIONS ---------- */
.light{background:var(--cloud);color:var(--text-dark)}
.section{padding:var(--section-pad) 0}
.section-head{max-width:640px;margin-bottom:var(--head-mb)}
.section-head.partners-head{max-width:800px}
.section-head.partners-head h2{white-space:nowrap}
@media(max-width:680px){.section-head.partners-head h2{white-space:normal}}
.section-head h2{font-size:clamp(28px,3.6vw,42px);margin:14px 0 14px}
@media(max-width:640px){.section-head h2{font-size:26px}}
.section-head.miko-head h2{white-space:nowrap}
@media(max-width:680px){.section-head.miko-head h2{white-space:normal}}
.section-head p{color:var(--text-mut);font-size:17px}
.light .section-head p{color:var(--text-mut)}
.dark .section-head p{color:var(--text-light-mut)}

/* ---------- JOURNEY RAIL (signature) ---------- */
.journey{position:relative}
.rail{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--grid-gap);margin-top:10px}
.rail::before{content:"";position:absolute;top:27px;left:4%;right:4%;height:4px;border-radius:4px;
  background:linear-gradient(90deg,#C7CFE2 0%,var(--sunrise) 18%,var(--sunrise) 55%,var(--jade) 78%,var(--jade) 100%);
  transform-origin:left;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.4,0,.2,1)}
.journey.in .rail::before{transform:scaleX(1)}
.rail::after{content:"";position:absolute;top:27px;left:4%;right:4%;height:4px;border-radius:4px;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.95) 8%,transparent 18%);
  background-size:220% 100%;background-position:-120% 0;
  filter:blur(1.5px);opacity:0;pointer-events:none;transition:opacity .5s ease .9s}
.journey.in .rail::after{opacity:1;animation:railPulse 2.6s linear 1.2s infinite}
@keyframes railPulse{0%{background-position:220% 0}100%{background-position:-120% 0}}
.stop{position:relative;padding-top:58px}
.stop .node{position:absolute;top:16px;left:50%;transform:translate(-50%,0);width:26px;height:26px;border-radius:50%;
  background:var(--paper);border:5px solid #C7CFE2;transition:border-color .3s, transform .2s;z-index:2}
.stop[data-phase="miko"] .node{border-color:var(--sunrise)}
.stop[data-phase="vb"] .node{border-color:var(--jade)}
.stop-card{background:linear-gradient(165deg,var(--ink2),var(--ink3));border:1px solid var(--line-dark);border-radius:var(--radius);padding:20px 18px;height:100%;
  display:flex;flex-direction:column;transition:transform .2s ease,border-color .2s ease}
.stop-card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.2)}
.stop-num{font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;color:var(--text-light-mut);display:block;margin-bottom:8px}
.stop[data-phase="miko"] .stop-num{color:var(--sunrise-2)}
.stop[data-phase="vb"] .stop-num{color:var(--jade-2)}
.stop h3{font-size:19px;margin-bottom:8px;font-weight:800;color:#fff;min-height:44px}
.stop p{font-size:16px;color:var(--text-light-mut);line-height:1.55;flex:1;margin:0}
.stop .money{display:inline-block;align-self:flex-start;margin-top:10px;font-family:var(--font-mono);font-size:14px;font-weight:600;background:rgba(59,196,147,.14);color:var(--jade-2);padding:4px 9px;border-radius:8px}
.stop .money.orange{background:rgba(255,90,45,.14);color:var(--sunrise-2)}
.phase-legend{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap}
.phase-legend div{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text-mut)}
.phase-legend i{width:22px;height:5px;border-radius:4px;display:inline-block}
.phase-legend .l1 i{background:var(--sunrise)}
.phase-legend .l2 i{background:var(--jade)}
@media(max-width:920px){
  .rail{grid-template-columns:1fr;gap:14px}
  .rail::before{top:0;bottom:0;left:16px;right:auto;width:4px;height:auto;transform:scaleY(0);transform-origin:top;
    background:linear-gradient(180deg,#C7CFE2 0%,var(--sunrise) 18%,var(--sunrise) 55%,var(--jade) 78%,var(--jade) 100%)}
  .journey.in .rail::before{transform:scaleY(1)}
  .rail::after{top:0;bottom:0;left:16px;right:auto;width:4px;height:auto;
    background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.95) 8%,transparent 18%);
    background-size:100% 220%;background-position:0 -120%}
  .journey.in .rail::after{animation:railPulseV 2.6s linear 1.2s infinite}
  @keyframes railPulseV{0%{background-position:0 220%}100%{background-position:0 -120%}}
  .stop{padding-top:0;padding-left:48px}
  .stop .node{left:16px;top:22px;transform:translate(-42%,0)}
}

/* ---------- MIKO FEATURES ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap)}
.feat{background:linear-gradient(165deg,var(--ink2),var(--ink3));border:1px solid var(--line-dark);border-radius:var(--radius);padding:28px 20px;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.feat:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.feat h3{font-size:19px;margin-bottom:12px;color:#fff;margin-top:0}
.feat p{font-size:16px;color:var(--text-light-mut);margin:0}
@media(max-width:920px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid-4{grid-template-columns:1fr}}

/* ---------- MIKO TASKS CHART ---------- */
/* The 33-tasks chart images are self-contained exports: title, axis labels
   and the dark card surface are all baked into the PNG (VI and EN alike).
   The PNG's navy is lighter than the section, so we treat it as one
   deliberate, elevated banner (like the FPTU banner) — rounded corners plus
   a soft drop shadow lift it off the section instead of reading as a seam. */
.miko-chart{margin-bottom:18px;border-radius:24px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.chart-scroll{overflow:hidden}
/* Always scale the chart to the available width — no horizontal scroll on any
   screen. On phones the inline chart is small on purpose; tapping it opens the
   zoom lightbox (turn the phone sideways to view it larger). */
.chart-area-img{display:block;width:100%;height:auto}
.chart-area-img[hidden]{display:none}
@media(hover:none) and (pointer:coarse){
  .chart-area-img{cursor:zoom-in}
}

/* ---------- CHART LIGHTBOX (mobile zoom) ---------- */
.chart-lightbox{position:fixed;inset:0;background:rgba(5,10,25,.94);z-index:200;display:none;align-items:center;justify-content:center;padding:16px}
.chart-lightbox.open{display:flex}
.chart-lightbox-inner{width:100%;max-width:1360px}
.chart-lightbox img{width:100%;height:auto;border-radius:10px}
.chart-lightbox-close,.video-lightbox-close{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:20px;line-height:1;cursor:pointer}

/* ---------- VIDEO LIGHTBOX (ihub demo) ---------- */
/* Same overlay language as the chart lightbox, sized for a 16/9 embed. */
.video-lightbox{position:fixed;inset:0;background:rgba(5,10,25,.94);z-index:200;display:none;align-items:center;justify-content:center;padding:16px}
.video-lightbox.open{display:flex}
.video-lightbox-inner{width:100%;max-width:900px}

/* ---------- DARK TEAMS SECTION ---------- */
.dark{background:var(--ink)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--grid-gap)}

/* ---------- HERO STORY (Tutora) ---------- */
.story-compare{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:center;margin-top:40px}
.story-card{background:linear-gradient(165deg,var(--ink2),var(--ink3));border:1px solid var(--line-dark);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:14px}
.story-label{display:inline-block;align-self:flex-start;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--text-light-mut);text-transform:uppercase}
.story-label.jade{color:var(--jade-2)}
.story-media{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid var(--line-dark)}
.story-media img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.story-media-placeholder{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.03);color:var(--text-light-mut);font-size:13px;text-align:center;padding:20px}
.story-card p{font-size:14.5px;color:var(--text-light-mut);line-height:1.5;margin:0}
.story-arrow{color:var(--sunrise-2);font-size:28px;font-weight:700}
.story-highlights{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.story-highlights span{background:rgba(23,166,115,.88);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#fff;font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:999px;white-space:nowrap}
@media(max-width:760px){
  .story-compare{grid-template-columns:1fr;gap:20px}
  .story-arrow{display:none}
  .story-highlights span{font-size:11.5px;padding:6px 11px}
}
@media(max-width:920px){.grid-3,.grid-2{grid-template-columns:1fr}}

/* ---------- PRICING ---------- */
.pricing-grid{margin-top:10px;align-items:stretch}
.price-card{position:relative;background:linear-gradient(165deg,var(--ink2),var(--ink3));border:1px solid var(--line-dark);border-radius:var(--radius);padding:32px 26px;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.price-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.price-card.featured{border-color:rgba(255,90,45,.45);box-shadow:0 20px 50px rgba(255,90,45,.16)}
.price-badge{position:absolute;top:-13px;right:26px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;font-weight:600;background:var(--miko-grad);color:#fff;padding:6px 12px;border-radius:999px}
.price-head h3{font-size:22px;color:#fff;margin:0 0 6px}
.price-tagline{font-size:14px;color:var(--text-light-mut);margin:0;min-height:38px}
.price-amount{display:flex;flex-direction:column;gap:6px;margin:18px 0 22px}
.price-old{display:block;font-family:var(--font-mono);font-size:16px;color:var(--text-light-mut);text-decoration:line-through;opacity:.7}
.price-old.placeholder{visibility:hidden}
.price-now{display:flex;align-items:baseline;flex-wrap:nowrap;gap:8px}
.price-new{font-family:var(--font-mono);font-size:34px;font-weight:700;color:#fff;white-space:nowrap}
.price-new small{font-size:19px;font-weight:500}
.price-unit{font-size:13.5px;color:var(--text-light-mut);white-space:nowrap}
.price-features{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:12px;flex:1}
.price-features li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.5;color:var(--text-light-mut)}
.price-features li::before{content:"✓";position:absolute;left:0;top:0;color:var(--jade-2);font-weight:700}
.price-cta{width:100%;text-align:center;justify-content:center}
@media(max-width:920px){.price-tagline{min-height:0}}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap);align-items:start;margin-top:10px}
.faq-item{background:linear-gradient(165deg,var(--ink2),var(--ink3));border:1px solid var(--line-dark);border-radius:var(--radius);transition:border-color .2s}
.faq-item:hover{border-color:rgba(255,255,255,.2)}
.faq-item[open]{border-color:rgba(255,90,45,.35)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;cursor:pointer;list-style:none;font-size:18px;font-weight:700;color:#fff;line-height:1.4}
.faq-q::-webkit-details-marker{display:none}
.faq-toggle{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:rgba(255,90,45,.12);border:1px solid rgba(255,90,45,.3);position:relative;transition:background .2s}
.faq-item:hover .faq-toggle{background:rgba(255,90,45,.2)}
.faq-toggle::before,.faq-toggle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--sunrise-2);border-radius:2px}
.faq-toggle::before{width:12px;height:2px}
.faq-toggle::after{width:2px;height:12px;transition:transform .2s ease,opacity .2s ease}
.faq-item[open] .faq-toggle::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-a{padding:0 24px 22px;color:var(--text-light-mut);font-size:15.5px;line-height:1.65}
.faq-a p{margin:0}
@media(max-width:760px){.faq-grid{grid-template-columns:1fr}.faq-q{font-size:16.5px;padding:18px 20px}.faq-a{padding:0 20px 18px}}

/* ---------- FPTU PARTNERSHIP BANNER ---------- */
.fptu-section{padding:56px 0;background:var(--ink)}
.fptu-banner{background:linear-gradient(105deg,var(--sunrise) 0%,var(--sunrise-2) 45%,var(--gold) 100%);border-radius:24px;padding:40px 52px 44px}
.fptu-logos{display:flex;justify-content:center;align-items:center;gap:44px;margin-bottom:30px}
.fptu-logo-fpt{height:56px;width:auto}
.fptu-logo-dl{height:32px;width:auto}
.fptu-body{display:grid;grid-template-columns:1fr 396px;gap:48px;align-items:center}
.fptu-text h2{color:#fff;font-size:clamp(24px,2.6vw,30px);font-weight:800;margin:0 0 16px;line-height:1.2}
.fptu-text p{color:rgba(255,255,255,.92);font-size:16.5px;line-height:1.55;margin:0;max-width:30em}
.fptu-photo img{width:100%;border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.28);display:block}
@media(max-width:820px){
  .fptu-banner{padding:32px 28px 36px}
  .fptu-body{grid-template-columns:1fr;gap:28px}
  .fptu-logos{gap:30px;margin-bottom:24px}
  .fptu-logo-fpt{height:46px}
  .fptu-logo-dl{height:27px}
  .fptu-photo{max-width:440px;margin:0 auto}
}

/* ---------- FOUNDERS ---------- */
.person{background:linear-gradient(165deg,var(--ink2),var(--ink3));border:1px solid var(--line-dark);border-radius:var(--radius);padding:0 0 26px;transition:transform .2s,border-color .2s;overflow:hidden}
.person:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.2)}
.person-photo{position:relative;aspect-ratio:7/6;overflow:hidden}
.person-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.person-photo.pa1 img{transform:scale(1.04);transform-origin:50% 0%}
.person-photo.pa2 img,.person-photo.pa3 img{object-position:center 30%}
.person-photo.pa1{background:linear-gradient(135deg,#C2410C,#7C2D12)}
.person-photo.pa2{background:linear-gradient(135deg,#1E3A8A,#172554)}
.person-photo.pa3{background:linear-gradient(135deg,#065F46,#064E3B)}
.person-info{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(10,20,46,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 14px}
.person-info b{display:block;font-size:16px;color:#fff;line-height:1.25}
.person-info span{font-size:13.5px;color:var(--sunrise-2)}
.in-chip{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;font-family:var(--font-mono)}
.person ul{list-style:none;padding:20px 24px 0}
.person li{position:relative;padding-left:18px;font-size:16px;color:var(--text-light);line-height:1.55;margin-bottom:9px}
.person li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;background:var(--gold)}

/* ---------- MEDIA / VIDEO ---------- */
.media-grid{display:grid;grid-template-columns:.9fr 1.1fr;grid-template-areas:"text video" "links video";column-gap:52px;row-gap:26px;align-items:center}
.media-text{grid-area:text}
.video-embed{grid-area:video}
.media-links{grid-area:links;align-self:start}
.video-frame{position:relative;display:block;aspect-ratio:16/9;border-radius:20px;overflow:hidden;border:1px solid var(--line-dark);
  background:linear-gradient(150deg,#16265C 0%,#0C1738 55%,#131F4A 100%);box-shadow:0 30px 70px rgba(0,0,0,.45);transition:transform .2s}
.video-frame:hover{transform:translateY(-4px)}
.video-frame::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 260px at 75% 20%, rgba(255,90,45,.18), transparent 65%)}
.vf-label{position:absolute;top:18px;left:20px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:#fff;
  background:rgba(226,36,36,.9);padding:5px 10px;border-radius:7px;font-weight:600}
.vf-title{position:absolute;left:20px;right:20px;bottom:18px;font-weight:700;font-size:15.5px;line-height:1.45;color:var(--text-light)}
.vf-title small{display:block;font-family:var(--font-mono);font-weight:400;font-size:11px;color:var(--text-light-mut);margin-top:6px}
.play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;
  background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s;box-shadow:0 12px 34px rgba(0,0,0,.4)}
.video-frame:hover .play-btn{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 16px 44px rgba(255,90,45,.35)}
.play-btn i{width:0;height:0;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--ink);margin-left:5px}
.media-h2{font-size:clamp(28px,3.6vw,42px);margin:14px 0}
.media-text blockquote{font-size:19px;font-weight:600;line-height:1.55;color:var(--text-light);border-left:3px solid var(--sunrise);padding-left:18px;margin:22px 0}
.media-text p{color:var(--text-light-mut);font-size:15.5px}
.media-links{display:flex;gap:10px;flex-wrap:wrap}
.media-links a{font-family:var(--font-mono);font-size:12px;border:1px solid var(--line-dark);border-radius:999px;padding:8px 14px;color:var(--text-light-mut);transition:border-color .2s,color .2s}
.media-links a:hover{border-color:rgba(255,255,255,.35);color:#fff}
@media(max-width:920px){.media-grid{grid-template-columns:1fr;grid-template-areas:"text" "video" "links"}}

/* ---------- HERO LOCKUP (ihub.html) ---------- */
/* Gemeinsame Wordmark iHUB × HUB NETWORK × Dream Lab über der Hero-Headline —
   ein weißes PNG mit Transparenz, skaliert über die Höhe. */
.hero-lockup{margin-bottom:28px}
.hero-lockup img{height:52px;width:auto;max-width:100%;display:block}
@media(max-width:640px){
  .hero-lockup{margin-bottom:22px}
  .hero-lockup img{height:36px}
}

/* ---------- IHUB SUBDOMAIN (body.ihub, ihub.html only) ----------
   Bewusste, abgestimmte Abweichung vom Standard (DESIGN.md §1/§3): die Seite
   läuft unter der iHub-Marke, deshalb Türkis/Weiß statt Navy/Orange und
   zentrierte Sektionsköpfe statt linksbündig. Alles hier ist auf `body.ihub`
   gescoped und wirkt sich auf keine andere Seite aus. Der Orange-Gradient der
   CTA-Buttons bleibt — den führt die iHub-Seite selbst auch so. */
body.ihub,body.ihub .dark{background:var(--ihub-ink)}
body.ihub .hero,body.ihub #cta{background:var(--ihub-ink);
  background-image:linear-gradient(rgba(65,218,216,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(65,218,216,.06) 1px,transparent 1px);
  background-size:80px 80px}
body.ihub .hero{text-align:center}
/* Ohne Nav braucht die Seite den VI/EN-Umschalter im Hero (rechts oben). */
body.ihub .ihub-langbar{display:flex;justify-content:flex-end;margin-bottom:26px}
body.ihub .hero-lockup{display:flex;justify-content:center}
body.ihub .hero p.lead{margin-left:auto;margin-right:auto}
body.ihub .hero-ctas,body.ihub .cta-buttons{justify-content:center}
/* Auf der Hauptseite ersetzt der Nav-CTA die Hero-Buttons auf Handys (Zeile ~83);
   hier gibt es keine Nav, also müssen sie sichtbar bleiben. */
@media(max-width:560px){body.ihub .hero-ctas{display:flex}}
body.ihub .accent{color:var(--ihub-teal)}
/* Sektionsköpfe und Karten zentriert wie auf der iHub-Seite */
body.ihub .section-head{margin-left:auto;margin-right:auto;text-align:center}
body.ihub #cta{text-align:center}
body.ihub .feat{text-align:center}
/* Türkis ersetzt Orange/Jade als Akzent */
body.ihub .eyebrow.orange,body.ihub .eyebrow.jade{color:var(--ihub-teal)}
body.ihub .stop-num{color:var(--ihub-teal-2)}
/* Die helle Sektion wird zur abgesetzten dunklen Sektion (kein Weiß-Bruch) */
body.ihub .light{background:var(--ihub-ink2);color:var(--text-light)}
body.ihub .light .section-head p{color:var(--text-light-mut)}
/* Karten flach und türkis gerahmt statt Navy-Gradient */
body.ihub .feat{background:rgba(255,255,255,.04);border-color:rgba(65,218,216,.25)}
body.ihub .feat:hover{border-color:rgba(65,218,216,.5)}
/* Der Orange/Blau-Glow des Standard-Heros passt nicht zur iHub-CI */
body.ihub .hero-glow{display:none}
/* Schlanker Footer: gemeinsames Lockup + Verweise auf beide Häuser */
body.ihub .ihub-foot{background:var(--ihub-ink2);border-top:1px solid rgba(65,218,216,.18);padding:var(--section-pad) 0;text-align:center}
body.ihub .ihub-foot img{height:64px;width:auto;margin:0 auto 22px}
body.ihub .ihub-foot p{font-size:15px;color:var(--text-light-mut)}
body.ihub .ihub-foot a{color:var(--ihub-teal-2);text-decoration:underline}
@media(max-width:640px){body.ihub .ihub-foot img{height:44px}}
body.ihub .btn-ghost{border-color:rgba(65,218,216,.35)}
body.ihub .btn-ghost:hover{border-color:var(--ihub-teal)}

/* ---------- PARTNERS ---------- */
.partners{padding:var(--section-pad) 0;border-top:1px solid var(--line-dark)}
.partner-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:32px 56px;margin-top:40px}
.partner-logos img{width:auto;object-fit:contain;opacity:.8;transition:opacity .2s}
.partner-logos img:hover{opacity:1}
/* per-logo heights normalise the differing built-in padding/glow */
.pl-dissc{height:120px}
.pl-fptu{height:60px}
.pl-ihub{height:88px;transform:translateY(-9px)}
.pl-nvidia{height:60px}
.pl-vipc{height:104px}
@media(max-width:600px){
  .partner-logos{gap:24px 40px}
  .pl-dissc,.pl-vipc{height:84px}
  .pl-ihub{height:72px;transform:translateY(-7px)}
  .pl-fptu,.pl-nvidia{height:48px}
  .pl-vipc{margin-top:-24px}
}

/* ---------- FINAL CTA ---------- */
.final{padding:var(--section-pad) 0;background:var(--ink);text-align:center}
.final-photos{display:flex;justify-content:center;align-items:flex-start;gap:22px;margin:6px auto 34px;max-width:940px}
.final-photos img{width:32%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;border:1px solid var(--line-dark);box-shadow:0 18px 40px rgba(0,0,0,.45)}
@media(max-width:640px){
  .final-photos{gap:12px;margin-bottom:26px}
  .final-photos img{border-radius:10px}
}
.final h2{font-size:clamp(28px,3.6vw,42px);max-width:18em;margin:14px auto 16px}
.final p{color:var(--text-light-mut);max-width:36em;margin:0 auto 32px;font-size:17px}
.final .note{font-family:var(--font-mono);font-size:12px;color:var(--text-light-mut);margin-top:18px}
@media(max-width:640px){.final p{font-size:13.5px}}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line-dark);padding:52px 0 40px;background:#081026;font-size:13.5px;color:var(--text-light-mut)}
.foot-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.foot-tagline{max-width:32em;margin-bottom:36px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr auto;gap:40px;align-items:start;margin-bottom:28px}
.social-links{display:flex;gap:10px;justify-content:flex-end;align-items:flex-start}
.social-links a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:var(--text-light-mut);transition:background .15s,color .15s;margin-bottom:0}
.social-links a:hover{background:rgba(255,255,255,.12);color:#fff}
.social-links svg{width:18px;height:18px;display:block;margin:auto}
.foot-grid h4{color:var(--text-light);font-size:13px;margin-bottom:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-family:var(--font-mono)}
.foot-grid a{display:block;margin-bottom:8px}
.foot-grid a:hover{color:#fff}
.foot-legal{font-size:12.5px;line-height:1.7}
.foot-legal b{color:var(--text-light)}
.bct-badge-link{display:block;margin-bottom:0;justify-self:end}
.bct-badge{width:225px;height:auto;display:block}
.copyright{margin-top:28px;padding-top:20px;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px}
@media(max-width:920px){.foot-grid{grid-template-columns:1fr}.bct-badge-link{justify-self:start}.bct-badge{width:120px}}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .rail::before{transform:none !important;transition:none}
  .rail::after{animation:none;opacity:0}
  .miko-typing i,.hero-glow{animation:none}
  html{scroll-behavior:auto}
}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ---------- LEGAL PAGES ---------- */
.legal-hero{padding:150px 0 36px}
.legal-hero .wrap{max-width:760px}
.legal-hero .eyebrow{margin-bottom:10px;display:block}
.legal-hero h1{font-size:clamp(26px,3.6vw,38px);font-weight:900;margin-bottom:10px}
.legal-hero .meta{color:var(--text-light-mut);font-size:14px}
.legal{padding:8px 0 100px}
.legal .wrap{max-width:760px}
.legal h2{font-size:clamp(28px,3.6vw,42px);font-weight:800;color:#fff;margin:34px 0 12px}
.legal h2:first-child{margin-top:0}
.legal p{font-size:15px;line-height:1.7;color:var(--text-light-mut);margin-bottom:14px}
.legal ul{margin:6px 0 16px 20px}
.legal li{font-size:15px;line-height:1.7;color:var(--text-light-mut);margin-bottom:7px}
.legal a{color:var(--sunrise-2);text-decoration:underline;text-underline-offset:2px}
.legal strong{color:#fff;font-weight:700}
.legal .lang-block[hidden]{display:none}

/* ---------- EVENTS PAGE ---------- */
.event-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:28px;row-gap:28px}
/* Karte spannt 6 Subgrid-Reihen (Bild + 5 Textreihen); Subgrid richtet jede Reihe
   über alle Karten einer Zeile auf gleiche Höhe aus (Tag/Titel/Datum/Text/Link fluchten). */
.event-card{background:linear-gradient(165deg,var(--ink2),var(--ink3));border:1px solid var(--line-dark);border-radius:var(--radius);overflow:hidden;transition:transform .2s,border-color .2s;display:grid;grid-template-rows:subgrid;grid-row:span 6;gap:0}
.event-card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.2)}
.event-image{height:200px;background-size:cover;background-position:center}
.event-content{padding:28px;display:grid;grid-template-rows:subgrid;grid-row:span 5;gap:0}
.event-tag{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--sunrise-2);text-transform:uppercase;display:inline-block;margin-bottom:12px}
.event-card h3{font-size:19px;font-weight:800;margin-bottom:10px;color:#fff}
.event-meta{font-family:var(--font-mono);font-size:12px;color:var(--text-light-mut);margin-bottom:12px}
.event-card p{font-size:15px;color:var(--text-light-mut);line-height:1.55;margin-bottom:16px}
.event-links{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.event-link{font-size:15px;color:var(--sunrise-2);text-decoration:none;font-weight:600;transition:color .15s}
.event-link:hover{color:var(--sunrise)}
.cta-buttons{display:flex;gap:16px;margin-top:24px;flex-wrap:wrap}
.event-filters{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:var(--head-mb);padding-bottom:32px;border-bottom:1px solid var(--line-dark)}
.filter-pill{font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--text-light);background:transparent;border:1px solid var(--line-dark);border-radius:999px;padding:10px 22px;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.filter-pill:hover{border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.filter-pill.active{background:var(--miko-grad);border-color:transparent;color:#fff;box-shadow:0 8px 24px rgba(255,90,45,.35)}
.event-card.is-hidden{display:none}
@media(max-width:920px){.event-grid{grid-template-columns:1fr;gap:20px}}

/* ---------- INSIGHTS PAGE ---------- */
.insight-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:28px;row-gap:28px;margin-top:var(--head-mb)}
/* Weiße Karte: Cover + 3 Content-Reihen (Eyebrow/Titel/Text) auf gleiche Höhe (Subgrid). */
.insight-card{background:var(--paper);border:1px solid var(--line-light);border-radius:var(--radius);overflow:hidden;transition:transform .2s,box-shadow .2s;display:grid;grid-template-rows:subgrid;grid-row:span 4;gap:0}
.insight-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(10,20,46,.35)}
.insight-cover{height:280px;background:var(--ink2);background-size:cover;background-position:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-light-mut)}
.insight-cover svg{width:34px;height:34px;opacity:.55}
.insight-cover span{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em}
.insight-content{padding:28px;display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:0}
.insight-eyebrow{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.insight-tag{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--sunrise);text-transform:uppercase}
.insight-date{font-family:var(--font-mono);font-size:12px;color:var(--text-mut)}
.insight-card h3{font-size:19px;font-weight:800;color:var(--text-dark);margin-bottom:10px}
.insight-card p{font-size:15px;color:var(--text-mut);line-height:1.55}
a.insight-card{text-decoration:none;color:inherit}
.insight-read{display:block;margin-top:14px;font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--sunrise)}
@media(max-width:920px){.insight-grid{grid-template-columns:1fr;gap:20px}.insight-cover{height:220px}}

/* ---------- ARTICLE (Insights detail, light) ---------- */
.article{background:var(--paper);color:var(--text-dark);padding:56px 0 72px}
.article-wrap{max-width:760px;margin:0 auto;padding:0 var(--wrap-pad)}
.article-back{display:inline-block;font-family:var(--font-mono);font-size:14px;color:var(--text-mut);text-decoration:none;margin-bottom:32px;transition:color .15s}
.article-back:hover{color:var(--sunrise)}
.article-eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mut);margin-bottom:20px}
.article-eyebrow .cat{color:var(--sunrise)}
.article-title{font-size:clamp(30px,4.6vw,44px);font-weight:800;line-height:1.14;letter-spacing:-.01em;margin-bottom:32px}
.article-author{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.article-author .avatar{width:52px;height:52px;border-radius:50%;flex-shrink:0;background:var(--cloud) center/cover no-repeat;border:1px solid var(--line-light)}
.article-author .who b{display:block;font-size:16px;color:var(--text-dark);line-height:1.3}
.article-author .who span{font-size:13.5px;color:var(--text-mut)}
.article-author .share{margin-left:auto;display:flex;gap:10px}
.article-author .share a,.article-author .share button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-light);background:transparent;display:flex;align-items:center;justify-content:center;color:var(--text-mut);cursor:pointer;transition:border-color .15s,color .15s}
.article-author .share a:hover,.article-author .share button:hover{border-color:var(--sunrise);color:var(--sunrise)}
.article-author .share svg{width:16px;height:16px}
.article-divider{border:0;border-top:1px solid var(--line-light);margin:0 0 36px}
.article-cover{border-radius:var(--radius);overflow:hidden;margin:0 0 40px;aspect-ratio:16/9;background:var(--ink2) center/cover no-repeat}
.article-body{font-size:18px;line-height:1.72;color:var(--text-dark)}
.article-body p{margin:0 0 24px}
.article-body h2{font-size:clamp(24px,3vw,30px);font-weight:800;line-height:1.2;margin:48px 0 20px}
.article-body h3{font-size:20px;font-weight:800;margin:36px 0 16px}
.article-body ul{margin:0 0 24px;padding-left:22px}
.article-body li{margin-bottom:10px}
.article-body blockquote{border-left:3px solid var(--sunrise);padding-left:22px;margin:0 0 32px;font-style:italic;color:var(--text-mut)}
.article-body strong{font-weight:700;color:var(--text-dark)}
.article-body p a,.article-body li a{color:var(--jade);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.article-body p a:hover,.article-body li a:hover{color:var(--jade-2)}
.article-conclusion{font-size:20px;font-weight:700;line-height:1.5;margin:0 0 40px}
.article-figure{margin:32px 0}
.article-figure .ph{border:1px dashed var(--line-light);background:var(--cloud);border-radius:var(--radius);aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--text-mut);text-align:center;padding:20px}
.article-figure .ph svg{width:30px;height:30px;opacity:.5}
.article-figure .ph span{font-family:var(--font-mono);font-size:13px}
.article-figure img{width:100%;border-radius:var(--radius);display:block}
.article-figure figcaption{font-size:13px;line-height:1.5;color:var(--text-mut);margin-top:12px}
.article-sharebar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:var(--font-mono);font-size:13px;color:var(--text-mut);border-top:1px solid var(--line-light);padding-top:28px;margin-bottom:40px}
.article-sharebar a,.article-sharebar button{border:1px solid var(--line-light);background:transparent;border-radius:999px;padding:8px 18px;color:var(--text-dark);text-decoration:none;font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;transition:border-color .15s,color .15s}
.article-sharebar a:hover,.article-sharebar button:hover{border-color:var(--sunrise);color:var(--sunrise)}
.author-card{display:flex;gap:20px;align-items:flex-start;background:var(--cloud);border:1px solid var(--line-light);border-radius:var(--radius);padding:26px}
.author-card .avatar{width:64px;height:64px;border-radius:50%;flex-shrink:0;background:var(--paper) center/cover no-repeat;border:1px solid var(--line-light)}
.author-card .bio b{font-size:17px;color:var(--text-dark)}
.author-card .bio p{font-size:14.5px;line-height:1.6;color:var(--text-mut);margin:6px 0 0}
.author-card .follow{margin-left:auto;flex-shrink:0;background:var(--miko-grad);color:#fff;border:0;border-radius:999px;padding:10px 22px;font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;text-decoration:none}
@media(max-width:640px){
  .article-author .share{margin:12px 0 0;width:100%}
  .author-card{flex-wrap:wrap}
  .author-card .follow{margin-left:0}
}

/* ---------- VBP RECRUITING PAGE (body.vbp, vbp.html only) ----------
   Unlistete Stellenausschreibung: eine reine Lesestrecke ohne Bilder, die
   auf Desktop wie Mobil groesser gesetzt ist als die Marketing-Seiten.
   Alle Werte stammen aus der freigegebenen Groessenmenge (DESIGN.md §3) und
   sind auf `body.vbp` gescoped — keine andere Seite ist betroffen. */
body.vbp .hero p.lead{font-size:20px}
/* Der Aufhaenger-Satz soll auf Desktop in einer Zeile stehen; die 34em aus
   .hero p.lead brechen ihn sonst kurz vor dem Ende um. Unter 920px greift
   wieder die normale Breite, dort ist ein Umbruch unvermeidbar. */
body.vbp .hero p.lead.lead-hook{max-width:44em}
@media(max-width:920px){body.vbp .hero p.lead.lead-hook{max-width:34em}}
body.vbp .event-meta{font-size:16px}
body.vbp .hstat b{font-size:28px}
body.vbp .hstat span{font-size:14px}
body.vbp .section-head p{font-size:19px}
body.vbp .section-head.wide-head{max-width:960px}
/* "How it starts": Einstiegskarte, beschrifteter Abzweig, drei Ausgaenge.
   Der Abzweig ist reines CSS (Stiel + gerundeter Buegel + Mittelstiel aus
   Rahmenlinien), damit dafuer kein zusaetzliches Markup noetig ist. Die
   Buegelbreite ist der Abstand der aeusseren Kartenmitten: bei drei Spalten
   2 * (Spaltenbreite + Gap) = 2 * (100% + Gap) / 3. */
body.vbp .stop-card h3{font-size:21px;font-weight:800;color:#fff;margin:0 0 12px}
body.vbp .flow-split{position:relative;display:flex;justify-content:center;padding:26px 0 24px}
body.vbp .flow-split::before{content:"";position:absolute;top:0;left:calc(50% - .5px);width:1px;height:26px;
  background:var(--sunrise);opacity:.55}
body.vbp .flow-split::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:calc((200% + 2 * var(--grid-gap)) / 3);height:24px;
  border:1px solid var(--sunrise);border-bottom:0;border-radius:12px 12px 0 0;opacity:.55}
body.vbp .flow-label{position:relative;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-light-mut);background:var(--ink2);border:1px solid var(--line-dark);border-radius:999px;padding:7px 14px}
/* Mittelstiel: fuehrt vom Chip gerade nach unten in die mittlere Karte */
body.vbp .flow-label::after{content:"";position:absolute;top:100%;left:calc(50% - .5px);width:1px;height:24px;
  background:var(--sunrise);opacity:.55}
body.vbp .branches{margin-top:0}
body.vbp .branches .story-label{margin-bottom:12px}
/* Akzentkante links: jede der drei Karten hat eine eigene Farbe - orange =
   weitermachen wie bisher, gold = full-time, jade = eine Firma uebernehmen.
   Alle drei gleich zu behandeln ist Absicht: haette eine keine Kante, laese
   sich das Muster als Fortschritt statt als Auswahl. Der :hover von .feat
   setzt die komplette border-color, deshalb hier die linke Kante nochmal
   festhalten. */
body.vbp .branches .feat{border-left-width:2px}
body.vbp .branch-stay,body.vbp .branch-stay:hover{border-left-color:var(--sunrise)}
body.vbp .branch-stay .story-label{color:var(--sunrise-2)}
body.vbp .branch-full,body.vbp .branch-full:hover{border-left-color:var(--gold)}
body.vbp .branch-full .story-label{color:var(--gold)}
body.vbp .branch-seat,body.vbp .branch-seat:hover{border-left-color:var(--jade-2)}
body.vbp .branch-seat .story-label{color:var(--jade-2)}
body.vbp .feat h3{font-size:21px}
body.vbp .feat p{font-size:18px}
body.vbp .stop-card p{font-size:18px}
body.vbp .price-features li{font-size:17px;padding-left:28px}
/* Steht nichts mehr unter der Liste, kommt der Abstand nach unten vom
   Karten-Padding - sonst haengt die Karte unten durch. */
body.vbp .price-features:last-child{margin-bottom:0}
body.vbp .final p{font-size:19px}
body.vbp .final .note{font-size:14px}
/* Foto-Streifen steht unter dem Karten-Grid und spannt die volle
   Inhaltsbreite, damit er buendig mit den Karten darueber liegt (auf der
   Startseite ist er bewusst schmaler und zentriert). */
body.vbp .final-photos{max-width:none;gap:var(--grid-gap);margin:var(--grid-gap) 0 0}
body.vbp .final-photos img{width:calc((100% - 2 * var(--grid-gap)) / 3)}
/* Partner-Hinweis (nur /vbp): Logos links, Satz rechts. Die Trennlinie ist ein
   border-left am Absatz statt eines eigenen Elements - so ist sie automatisch
   genau so hoch wie der Text. Die .stop-card darunter ist flex-column, deshalb
   muss die Richtung hier ausdruecklich zurueckgedreht werden. */
/* Haelfte/Haelfte: beide Seiten flex:1 1 0, damit sie sich den Platz exakt
   gleich teilen. gap bleibt 0, sonst laege die Trennlinie nicht genau in der
   Mitte - die Luft links und rechts von ihr kommt aus dem padding der beiden
   Seiten. */
body.vbp .partner-note{flex-direction:row;align-items:center;gap:0;padding:22px 26px}
body.vbp .partner-note-logos{display:flex;align-items:center;gap:26px;
  flex:1 1 0;justify-content:space-evenly;padding-right:32px}
/* Bildtext in den Dateien ("INCEPTION PROGRAM", "FPT UNIVERSITY") bleibt bei
   dieser Hoehe lesbar; kleiner wird er zu Kruemeln. */
/* Klein und zurueckgenommen, aus zwei Gruenden: die Namen stehen im Satz
   daneben schon ausgeschrieben, und beide Dateien tragen ihren Namen selbst
   als Bildtext ("INCEPTION PROGRAM", "FPT UNIVERSITY") - gross gesetzt liest
   die Karte sich doppelt. Deckkraft niedriger als im Partner-Band der
   Startseite (.8), wo die Logos die Hauptsache sind; hier ist es der Satz. */
body.vbp .partner-note-logos img{height:38px;width:auto;object-fit:contain;opacity:.65}
body.vbp .partner-note p{margin:0;flex:1 1 0;padding-left:32px;border-left:1px solid var(--line-dark)}
body.vbp .partner-note strong{color:var(--text-light);font-weight:600}
/* ---- Bewerbungsformular (nur /vbp) ----
   Erstes Formular der Site: es gibt keine Eingabe-Bausteine zum Wiederverwenden,
   deshalb stehen sie hier. Alle Farben sind Tokens bzw. Tints davon; die Karte
   nutzt denselben Gradient und Radius wie .feat/.stop-card. */
body.vbp .appform{max-width:840px;margin:0 auto;text-align:left;
  background:linear-gradient(165deg,var(--ink2),var(--ink3));border:1px solid var(--line-dark);
  border-radius:var(--radius);padding:32px;display:flex;flex-direction:column;gap:24px}
/* Ohne das bliebe das Formular nach dem Absenden stehen: das display:flex oben
   ist staerker als die Browser-Regel fuer [hidden]. */
body.vbp .appform[hidden]{display:none}
body.vbp .appform-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap)}
body.vbp .appform-field{display:flex;flex-direction:column;gap:9px}
body.vbp .appform-label{font-size:14px;font-weight:500;color:var(--text-light)}
body.vbp .appform-labelrow{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
body.vbp .appform-count{font-family:var(--font-mono);font-size:12px;color:var(--text-light-mut)}
body.vbp .appform-count.is-full{color:var(--sunrise-2)}
/* Fuellung ist --ink mit Alpha: die Felder sollen tiefer liegen als die Karte */
body.vbp .appform input,body.vbp .appform textarea{width:100%;background:rgba(10,20,46,.55);
  border:1px solid var(--line-dark);border-radius:12px;padding:14px 16px;
  font-family:var(--font-body);font-size:16px;color:var(--text-light);transition:border-color .18s}
body.vbp .appform textarea{line-height:1.6;resize:vertical}
body.vbp .appform input::placeholder,body.vbp .appform textarea::placeholder{color:var(--text-light-mut);opacity:.7}
body.vbp .appform input:focus,body.vbp .appform textarea:focus{outline:none;border-color:var(--sunrise)}
/* Die Ja/Nein-Pillen sind echte Radios: Auswahl und Tastaturbedienung
   kommen vom Browser, sichtbar ist nur das Label. */
/* Trennlinie als Hintergrund statt border-top: eine echte Rahmenlinie wuerde
   von der <legend> unterbrochen. */
body.vbp .appform-onsite{border:0;margin:0;padding:18px 0 0;
  background:linear-gradient(var(--line-dark),var(--line-dark)) top left/100% 1px no-repeat}
/* float loest die <legend> aus ihrer Sonderpositionierung: ohne das sitzt sie
   auf der Oberkante des Rahmenkastens und ignoriert das padding-top. */
body.vbp .appform-onsite legend{float:left;width:100%;padding:0;font-size:16px;font-weight:500;color:var(--text-light);margin-bottom:12px}
body.vbp .appform-choice{clear:both;display:flex;gap:12px}
body.vbp .appform-choice input{position:absolute;opacity:0;width:1px;height:1px}
body.vbp .appform-choice label{min-width:110px;text-align:center;cursor:pointer;
  border:1px solid var(--line-dark);border-radius:999px;padding:12px 32px;
  font-size:16px;font-weight:600;color:var(--text-light-mut);transition:border-color .18s,background .18s,color .18s}
body.vbp .appform-choice label:hover{border-color:rgba(255,255,255,.3)}
body.vbp .appform-choice input:focus-visible+label{border-color:var(--gold)}
body.vbp #onsite-yes:checked+label{border-color:var(--jade-2);background:rgba(59,196,147,.14);color:#fff}
/* "No" bleibt neutral: Orange ist auf der Site die CTA-/Akzentfarbe und wuerde
   die Absage hervorheben, Jade ist mit "Yes" belegt. */
body.vbp #onsite-no:checked+label{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.08);color:#fff}
body.vbp .appform-submit{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:8px}
/* CTA eine Stufe groesser, wie der uebrige Text dieser Seite - Stil bleibt .btn-primary */
body.vbp .appform-submit .btn{font-size:17px;padding:16px 32px}
body.vbp .appform-fallback{display:flex;flex-direction:column;gap:12px;padding-top:18px;
  background:linear-gradient(var(--line-dark),var(--line-dark)) top left/100% 1px no-repeat}
body.vbp .appform-fallback[hidden]{display:none}
body.vbp .appform-fallback p{margin:0;font-size:15px;line-height:1.6;color:var(--text-light-mut)}
body.vbp .appform-fallback a{color:var(--sunrise-2)}
body.vbp .appform-copy{font-family:var(--font-mono);font-size:14px}
body.vbp .appform-fallback .btn{align-self:flex-start}
body.vbp .appform-hint{margin:0;font-size:13px;text-align:center;color:var(--sunrise-2);min-height:1.4em}
body.vbp .appform-hint.is-ok{color:var(--jade-2)}
/* Honeypot: muss im DOM stehen und darf nur fuer Menschen unerreichbar sein -
   display:none durchschauen viele Bots und lassen das Feld dann leer. */
body.vbp .appform-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Erfolgszustand: tritt an die Stelle des Formulars, gleiche Karte wie .appform,
   damit die Seite an der Stelle nicht springt. */
body.vbp .appform-done{max-width:840px;margin:0 auto;text-align:left;
  background:linear-gradient(165deg,var(--ink2),var(--ink3));border:1px solid var(--line-dark);
  border-radius:var(--radius);padding:32px;outline:none}
body.vbp .appform-done[hidden]{display:none}
body.vbp .appform-done h3{margin:0 0 10px;color:var(--jade-2)}
body.vbp .appform-done p{margin:0;color:var(--text-light-mut)}
@media(max-width:920px){
  /* .grid-3 ist hier einspaltig - aus dem Buegel wird eine gerade Linie,
     der Mittelstiel wuerde sie nur doppelt zeichnen */
  body.vbp .flow-split::after{width:1px;height:24px;border:0;border-radius:0;background:var(--sunrise)}
  body.vbp .flow-label::after{display:none}
  /* Untereinander liest sich der Abzweig sonst als Abfolge ("erst das, dann
     das"). Das "or" zwischen den Karten macht sichtbar, dass genau einer der
     drei Wege gewaehlt wird. Der Zeilenabstand waechst dafuer auf 34px. */
  body.vbp .branches{row-gap:34px}
  body.vbp .branches .feat{position:relative}
  body.vbp .branches .feat+.feat::before{content:"or";position:absolute;left:50%;top:-27px;transform:translateX(-50%);
    font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-light-mut)}
}
@media(max-width:640px){
  body.vbp .hero p.lead{font-size:18px}
  body.vbp .section-head p{font-size:17px}
  body.vbp .feat p,body.vbp .stop-card p{font-size:17px}
  body.vbp .final p{font-size:17px}
  /* nebeneinander waeren die Fotos hier nur ~100px breit - Gesichter
     nicht mehr erkennbar, also untereinander in voller Breite */
  body.vbp .final-photos{flex-direction:column}
  body.vbp .final-photos img{width:100%}
  /* Logos bleiben auch hier links neben dem Satz, nur stehen sie
     uebereinander statt nebeneinander - nebeneinander blieben dem Satz auf
     einem 390px-Telefon keine 150px. So braucht die Logo-Spalte rund 80px,
     der Rest gehoert dem Text. */
  /* Hier NICHT halbe/halbe: auf 390px blieben dem Satz sonst ~150px. Die
     Logo-Spalte nimmt nur ihre natuerliche Breite (rund 60px), der Rest
     gehoert dem Text. */
  body.vbp .partner-note{padding:20px}
  body.vbp .partner-note-logos{flex:0 0 auto;flex-direction:column;
    align-items:flex-start;justify-content:center;gap:14px;padding-right:18px}
  body.vbp .partner-note-logos img{height:22px}
  body.vbp .partner-note p{padding-left:18px}
  body.vbp .appform,body.vbp .appform-done{padding:22px}
  body.vbp .appform-grid{grid-template-columns:1fr}
  body.vbp .appform-choice label{min-width:0;flex:1;padding:12px 16px}
}