/* ─── SELF-HOSTED FONT (Inter) ───
   Served locally so no request ever goes to Google (DSGVO: no visitor IP sent to a
   US third party). Inter v20 is a variable font — one file covers all weights, so a
   single weight range (100–900) per subset is enough. unicode-range is kept so the
   browser only fetches the latin-ext file when such characters actually appear.
   font-display:swap avoids invisible text while the font loads. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ─── RESET & VARS ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --accent:#4F46E5; --accent-hover:#4338CA; --accent-light:#EEF2FF; --accent-mid:#C7D2FE;
  --text-primary:#111827; --text-secondary:#4B5563; --text-muted:#9CA3AF;
  --bg:#FFFFFF; --bg-subtle:#F9FAFB; --bg-card:#FFFFFF;
  --border:#E5E7EB; --border-faint:rgba(0,0,0,0.06); --border-light:#F3F4F6;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px;
  --shadow-xs:0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:0 1px 4px rgba(0,0,0,0.05),0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:0 4px 14px rgba(0,0,0,0.06),0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:0 8px 28px rgba(0,0,0,0.07),0 2px 8px rgba(0,0,0,0.04);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font); background:var(--bg); color:var(--text-primary); line-height:1.6; overflow-x:hidden; }
svg { display:block; }

/* ─── NAV ─── */
.nav { position:sticky; top:0; z-index:200; background:rgba(255,255,255,0.9); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--border-light); }
.nav-inner { max-width:1120px; margin:0 auto; padding:0 24px; height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.nav-logo { display:flex; align-items:center; gap:9px; font-size:19px; font-weight:700; color:var(--text-primary); letter-spacing:-0.4px; text-decoration:none; flex-shrink:0; }
.nav-logo img { width:30px; height:30px; object-fit:contain; }
.nav-links { display:flex; align-items:center; gap:28px; list-style:none; }
.nav-links a { font-size:14px; font-weight:500; color:var(--text-secondary); text-decoration:none; transition:color 0.15s; }
.nav-links a:hover { color:var(--text-primary); }
.nav-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; font-family:var(--font); font-size:14px; font-weight:600; border-radius:var(--radius-md); border:none; cursor:pointer; text-decoration:none; transition:all 0.15s ease; white-space:nowrap; line-height:1; }
.btn-primary { background:var(--accent); color:#fff; padding:10px 18px; }
.btn-primary:hover { background:var(--accent-hover); transform:translateY(-1px); box-shadow:0 4px 14px rgba(79,70,229,0.25); }
.btn-ghost { background:transparent; color:var(--text-secondary); padding:10px 14px; }
.btn-ghost:hover { background:var(--bg-subtle); color:var(--text-primary); }
.btn-lg { font-size:15px; padding:13px 26px; border-radius:var(--radius-md); }
.btn-outline { background:transparent; color:var(--accent); padding:13px 26px; font-size:15px; border:1.5px solid var(--accent-mid); }
.btn-outline:hover { background:var(--accent-light); transform:translateY(-1px); }
.nav-mobile-btn { display:none; background:none; border:none; cursor:pointer; padding:6px; color:var(--text-primary); border-radius:var(--radius-sm); }

/* ─── LANG SWITCHER ─── */
.lang-switcher { position:relative; }
.lang-btn { display:flex; align-items:center; gap:6px; font-family:var(--font); font-size:13px; font-weight:500; color:var(--text-secondary); background:none; border:1px solid var(--border); border-radius:var(--radius-md); padding:7px 11px; cursor:pointer; transition:all 0.15s; white-space:nowrap; line-height:1; }
.lang-btn:hover { background:var(--bg-subtle); color:var(--text-primary); }
.lang-btn .chev { transition:transform 0.15s; flex-shrink:0; }
.lang-switcher.open .lang-btn { background:var(--bg-subtle); color:var(--text-primary); }
.lang-switcher.open .lang-btn .chev { transform:rotate(180deg); }
.lang-code { font-size:12.5px; font-weight:600; }
.lang-menu { display:none; position:absolute; top:calc(100% + 8px); right:0; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); min-width:162px; padding:5px; z-index:300; flex-direction:column; }
.lang-switcher.open .lang-menu { display:flex; }
.lang-option { display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; border-radius:8px; border:none; background:none; font-family:var(--font); font-size:13.5px; font-weight:500; color:var(--text-secondary); cursor:pointer; text-align:left; transition:background 0.1s,color 0.1s; }
.lang-option:hover { background:var(--bg-subtle); color:var(--text-primary); }
.lang-option.active { color:var(--accent); background:var(--accent-light); font-weight:600; }

/* ─── MOBILE NAV ─── */
.mobile-nav { display:none; position:fixed; top:64px; left:0; right:0; background:var(--bg); border-bottom:1px solid var(--border); padding:8px 20px 20px; z-index:199; flex-direction:column; gap:2px; }
.mobile-nav.open { display:flex; }
.mobile-nav a { font-size:15px; font-weight:500; color:var(--text-secondary); text-decoration:none; padding:12px 4px; border-bottom:1px solid var(--border-light); }
.mobile-nav .btn-primary { border-bottom:none; border-radius:var(--radius-md); text-align:center; margin-top:10px; padding:13px; }
.mobile-lang-section { padding:14px 4px 4px; border-top:1px solid var(--border-light); margin-top:8px; }
.mobile-lang-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-muted); margin-bottom:10px; display:block; }
.mobile-lang-grid { display:flex; flex-wrap:wrap; gap:6px; }
.mobile-lang-btn { display:flex; align-items:center; gap:5px; font-family:var(--font); font-size:12.5px; font-weight:500; color:var(--text-secondary); background:var(--bg-subtle); border:1px solid var(--border); border-radius:8px; padding:6px 10px; cursor:pointer; transition:all 0.1s; line-height:1; }
.mobile-lang-btn.active { color:var(--accent); background:var(--accent-light); border-color:var(--accent-mid); }

/* ─── SHARED ─── */
.container { max-width:1120px; margin:0 auto; padding:0 24px; }
h1,h2,h3 { line-height:1.2; }
h2 { font-size:clamp(24px,3.2vw,38px); font-weight:700; letter-spacing:-0.4px; color:var(--text-primary); }
.label-chip { display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; color:var(--accent); background:var(--accent-light); padding:4px 12px; border-radius:999px; margin-bottom:16px; border:1px solid var(--accent-mid); }
.section-h { font-size:clamp(26px,3.6vw,40px); font-weight:700; letter-spacing:-0.5px; line-height:1.2; color:var(--text-primary); }
.section-sub { font-size:17px; color:var(--text-secondary); line-height:1.65; margin-top:12px; }

/* ─── HERO ─── */
.hero { padding:88px 0 72px; position:relative; overflow:hidden; }
.hero-glow { position:absolute; top:-200px; left:50%; transform:translateX(-50%); width:900px; height:600px; background:radial-gradient(ellipse at 50% 35%,rgba(99,102,241,0.09) 0%,transparent 65%); pointer-events:none; z-index:0; }
.hero-content { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; max-width:680px; margin:0 auto; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:var(--accent-light); color:var(--accent); font-size:13px; font-weight:500; padding:5px 14px; border-radius:999px; border:1px solid var(--accent-mid); margin-bottom:28px; }
.hero-badge-dot { width:6px; height:6px; background:var(--accent); border-radius:50%; flex-shrink:0; }
.hero-h1 { font-size:clamp(36px,5.5vw,60px); font-weight:800; letter-spacing:-1.5px; line-height:1.08; color:var(--text-primary); margin-bottom:20px; }
.hero-h1 em { font-style:normal; color:var(--accent); }
.hero-p { font-size:clamp(16px,1.8vw,18px); color:var(--text-secondary); line-height:1.7; max-width:500px; margin-bottom:40px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.hero-mockup-wrap { position:relative; z-index:1; margin-top:64px; max-width:900px; margin-left:auto; margin-right:auto; }
.hero-mockup-frame { background:var(--bg-subtle); border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg),0 24px 56px rgba(0,0,0,0.05); }
.mockup-titlebar { display:flex; align-items:center; gap:6px; padding:12px 18px; border-bottom:1px solid var(--border-light); background:var(--bg-subtle); }
.titlebar-dot { width:10px; height:10px; border-radius:50%; background:var(--border); flex-shrink:0; }
.hero-mockup-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:20px; }
.mc { background:var(--bg-card); border:1px solid var(--border-faint); border-radius:var(--radius-lg); padding:16px 18px; box-shadow:var(--shadow-xs); display:flex; flex-direction:column; }
.mc-top { display:flex; align-items:center; gap:11px; padding-bottom:12px; border-bottom:1px solid var(--border-light); margin-bottom:11px; }
.mc-avatar { width:44px; height:44px; border-radius:12px; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; letter-spacing:0.04em; }
.mc-info { min-width:0; flex:1; }
.mc-name { font-size:13px; font-weight:700; color:var(--text-primary); line-height:1.3; margin-bottom:2px; }
.mc-company { font-size:11px; color:var(--text-muted); }
.mc-meta { display:flex; align-items:center; gap:4px; font-size:11.5px; color:var(--text-secondary); margin-bottom:10px; }
.mc-meta svg { width:11px; height:11px; color:var(--text-muted); flex-shrink:0; }
.mc-meta .mc-sep { margin:0 3px; color:var(--border); }
.mc-chevron { color:var(--border); flex-shrink:0; margin-left:auto; }
.mc-tags { display:flex; gap:6px; flex-wrap:wrap; }
.mc-tag-green { font-size:10.5px; font-weight:600; color:#059669; background:#D1FAE5; padding:3px 9px; border-radius:999px; }
.mc-tag-indigo { font-size:10.5px; font-weight:600; color:var(--accent); background:var(--accent-light); padding:3px 9px; border-radius:999px; }
.mc-tag-amber { font-size:10.5px; font-weight:600; color:#D97706; background:#FEF3C7; padding:3px 9px; border-radius:999px; }

/* ─── ABOUT ─── */
.about { padding:96px 0; background:var(--bg-subtle); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:36px; }
.stat-card { background:var(--bg-card); border:1px solid var(--border-faint); border-radius:var(--radius-lg); padding:22px 24px; box-shadow:var(--shadow-xs); }
.stat-val { font-size:28px; font-weight:800; color:var(--accent); letter-spacing:-1px; line-height:1; margin-bottom:5px; }
.stat-lbl { font-size:13px; color:var(--text-secondary); }
.feed-preview { display:flex; flex-direction:column; gap:10px; }
.fc { background:var(--bg-card); border:1px solid var(--border-faint); border-radius:var(--radius-lg); padding:14px 18px; box-shadow:var(--shadow-xs); display:flex; align-items:center; gap:14px; transition:transform 0.18s,box-shadow 0.18s; }
.fc:hover { transform:translateX(3px); box-shadow:var(--shadow-sm); }
.fc-icon { width:40px; height:40px; border-radius:var(--radius-md); background:var(--accent-light); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--accent); }
.fc-icon svg { width:19px; height:19px; }
.fc-body { flex:1; min-width:0; }
.fc-title { font-size:13.5px; font-weight:600; color:var(--text-primary); margin-bottom:2px; }
.fc-meta { font-size:12px; color:var(--text-muted); }
.fc-badge { font-size:11px; font-weight:600; color:var(--accent); background:var(--accent-light); padding:3px 9px; border-radius:6px; white-space:nowrap; flex-shrink:0; }

/* ─── AUDIENCE ─── */
.audience { padding:96px 0; }
.audience-head { text-align:center; margin-bottom:52px; }
.audience-cards { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.aud-card { border:1px solid var(--border); border-radius:var(--radius-xl); padding:40px 44px; background:var(--bg-card); box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
.aud-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2.5px; background:linear-gradient(90deg,var(--accent) 0%,#818CF8 100%); }
.aud-icon { width:48px; height:48px; background:var(--accent-light); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; margin-bottom:20px; color:var(--accent); }
.aud-icon svg { width:22px; height:22px; }
.aud-title { font-size:21px; font-weight:700; color:var(--text-primary); margin-bottom:10px; letter-spacing:-0.3px; }
.aud-sub { font-size:15px; color:var(--text-secondary); line-height:1.65; margin-bottom:28px; }
.check-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
.check-list li { display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--text-secondary); line-height:1.5; }
.cl-dot { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; min-width:18px; background:var(--accent); border-radius:50%; margin-top:1px; flex-shrink:0; }
.cl-dot svg { width:10px; height:10px; color:white; }

/* ─── FEATURES ─── */
.features { padding:96px 0; background:var(--bg-subtle); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.features-head { text-align:center; margin-bottom:52px; }
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feat-card { background:var(--bg-card); border:1px solid var(--border-faint); border-radius:var(--radius-lg); padding:32px 28px; box-shadow:var(--shadow-xs); transition:transform 0.15s,box-shadow 0.15s; }
.feat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.feat-icon { width:42px; height:42px; background:var(--accent-light); border-radius:11px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--accent); }
.feat-icon svg { width:20px; height:20px; }
.feat-title { font-size:15px; font-weight:600; color:var(--text-primary); margin-bottom:8px; letter-spacing:-0.1px; }
.feat-desc { font-size:13.5px; color:var(--text-secondary); line-height:1.65; }

/* ─── DIFFERENT ─── */
.different { padding:96px 0; }
.diff-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.diff-points { display:flex; flex-direction:column; gap:22px; margin-top:32px; }
.diff-row { display:flex; gap:16px; align-items:flex-start; }
.diff-row-icon { width:38px; height:38px; min-width:38px; background:var(--accent-light); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--accent); }
.diff-row-icon svg { width:18px; height:18px; }
.diff-row-title { font-size:14.5px; font-weight:600; color:var(--text-primary); margin-bottom:3px; }
.diff-row-desc { font-size:13.5px; color:var(--text-secondary); line-height:1.6; }
.comp-table { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-md); }
.comp-head { display:grid; grid-template-columns:1.3fr 1fr 1fr; background:var(--bg-subtle); border-bottom:1px solid var(--border); }
.comp-hcell { padding:14px 20px; font-size:11.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.comp-hcell.hi { color:var(--accent); background:var(--accent-light); }
.comp-row { display:grid; grid-template-columns:1.3fr 1fr 1fr; border-bottom:1px solid var(--border-light); }
.comp-row:last-child { border-bottom:none; }
.comp-cell { padding:14px 20px; font-size:13px; color:var(--text-secondary); display:flex; align-items:center; gap:8px; }
.comp-cell.hi { background:rgba(238,242,255,0.5); }
.comp-cell strong { font-weight:500; }
.cico { width:16px; height:16px; flex-shrink:0; }
.cico-ok { color:#059669; }
.cico-no { color:#DC2626; }

/* ─── LAUNCH ─── */
.launch { padding:96px 0; background:var(--bg-subtle); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.launch-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.launch-badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:5px 13px; border-radius:999px; }
.launch-badge.open { background:#D1FAE5; color:#059669; }
.launch-badge.soon { background:var(--bg-card); color:var(--text-muted); border:1px solid var(--border); }
.launch-badge svg { width:12px; height:12px; }

/* ─── LAUNCH INFO BOX ─── */
.launch-info-box { background:var(--accent-light); border:1px solid var(--accent-mid); border-radius:var(--radius-md); padding:16px 18px; margin-top:24px; }
.launch-info-title { font-size:13px; font-weight:700; color:var(--accent); margin-bottom:5px; letter-spacing:0.01em; }
.launch-info-desc { font-size:13px; color:var(--text-secondary); line-height:1.6; }
.lib-icon { width:28px; height:28px; min-width:28px; background:var(--accent); border-radius:8px; display:flex; align-items:center; justify-content:center; color:white; margin-top:1px; }
.lib-icon svg { width:13px; height:13px; }
.lib-title { font-size:12.5px; font-weight:700; color:var(--accent); margin-bottom:3px; letter-spacing:0.01em; }
.lib-desc { font-size:12px; color:var(--text-secondary); line-height:1.55; }

/* ─── PROCESS STEPS (new) ─── */
.process { padding:96px 0; background:var(--bg); border-top:1px solid var(--border); }
.process-head { text-align:center; margin-bottom:56px; }
.process-head h2 { font-size:clamp(26px,3.6vw,40px); font-weight:700; letter-spacing:-0.5px; line-height:1.2; color:var(--text-primary); margin-bottom:12px; }
.process-head p { font-size:16px; color:var(--text-secondary); line-height:1.65; max-width:560px; margin:0 auto; }
.process-steps { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:860px; margin:0 auto; }
.process-step { background:var(--bg-card); border:1px solid var(--border-faint); border-radius:var(--radius-lg); padding:30px 26px; box-shadow:var(--shadow-xs); }
.process-step-num { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; background:var(--accent); color:#fff; border-radius:50%; font-size:14px; font-weight:700; margin-bottom:16px; }
.process-step-title { font-size:15px; font-weight:600; color:var(--text-primary); margin-bottom:8px; letter-spacing:-0.1px; }
.process-step-desc { font-size:13.5px; color:var(--text-secondary); line-height:1.65; }
/* Subtle fine-print disclaimer under the steps — deliberately low-key so it
   reads as a footnote, not a highlighted callout. No fixed height / clamp, so
   the full text (incl. the longer translations) always wraps and stays visible
   on every breakpoint. */
.process-note { max-width:600px; margin:32px auto 0; padding:0 16px; }
.process-note-text { font-size:12.5px; color:var(--text-secondary); line-height:1.65; text-align:center; margin:0; overflow-wrap:break-word; }

/* ─── CTA ─── */
.cta-sec { padding:96px 0; background:var(--bg); border-top:1px solid var(--border); }
.cta-inner { text-align:center; max-width:560px; margin:0 auto; }
.cta-h { font-size:clamp(26px,4vw,42px); font-weight:800; letter-spacing:-0.8px; line-height:1.15; color:var(--text-primary); margin-bottom:14px; }
.cta-p { font-size:17px; color:var(--text-secondary); line-height:1.65; margin-bottom:36px; }
.cta-form { display:flex; gap:8px; max-width:420px; margin:0 auto 12px; }
/* Honeypot: kept in the DOM and off-screen (not display:none, which naive bots skip)
   so a bot fills it while real users never see it. A filled value = bot → dropped. */
.hp-field { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.cta-input { flex:1; font-family:var(--font); font-size:15px; padding:13px 16px; border:1.5px solid var(--border); border-radius:var(--radius-md); background:var(--bg); color:var(--text-primary); outline:none; transition:border-color 0.15s,box-shadow 0.15s; }
.cta-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,70,229,0.1); }
.cta-input::placeholder { color:var(--text-muted); }
.cta-note { font-size:13px; color:var(--text-muted); margin-bottom:32px; }
.cta-divider { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.cta-divider::before,.cta-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.cta-divider span { font-size:12px; color:var(--text-muted); white-space:nowrap; }
.cta-company-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font); font-size:14px; font-weight:500; color:var(--text-secondary); background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-md); padding:11px 22px; text-decoration:none; cursor:pointer; transition:all 0.15s; }
.cta-company-btn:hover { border-color:var(--accent-mid); color:var(--accent); background:var(--accent-light); }

/* ─── FOOTER ─── */
footer { background:var(--bg); border-top:1px solid var(--border); padding:52px 0 28px; }
.footer-top { display:flex; align-items:flex-start; justify-content:space-between; gap:48px; }
.footer-brand { max-width:210px; }
.footer-logo { font-size:18px; font-weight:700; color:var(--text-primary); text-decoration:none; display:flex; align-items:center; gap:8px; margin-bottom:10px; letter-spacing:-0.3px; }
.footer-logo img { width:24px; height:24px; object-fit:contain; }
.footer-tagline { font-size:13px; color:var(--text-muted); line-height:1.65; }
.footer-cols { display:flex; gap:56px; }
.footer-col-h { font-size:12.5px; font-weight:600; color:var(--text-primary); margin-bottom:14px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.footer-col a { font-size:13px; color:var(--text-muted); text-decoration:none; transition:color 0.15s; }
.footer-col a:hover { color:var(--text-secondary); }
.footer-bottom { margin-top:40px; padding-top:22px; border-top:1px solid var(--border-light); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-copy { font-size:13px; color:var(--text-muted); }
.footer-legal { display:flex; gap:18px; }
.footer-legal a { font-size:13px; color:var(--text-muted); text-decoration:none; transition:color 0.15s; }
.footer-legal a:hover { color:var(--text-secondary); }

/* ─── HOME PAGE (new) ─── */
.home-page { min-height:100vh; display:flex; flex-direction:column; }
.home-hero { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:80px 24px 72px; text-align:center; position:relative; overflow:hidden; }
.home-glow { position:absolute; top:50%; left:50%; transform:translate(-50%,-60%); width:900px; height:600px; background:radial-gradient(ellipse at 50% 35%,rgba(99,102,241,0.08) 0%,transparent 65%); pointer-events:none; }
.home-badge { display:inline-flex; align-items:center; gap:8px; background:var(--accent-light); color:var(--accent); font-size:12.5px; font-weight:600; padding:5px 14px; border-radius:999px; border:1px solid var(--accent-mid); margin-bottom:32px; letter-spacing:0.02em; }
.home-claim { font-size:clamp(34px,5.5vw,58px); font-weight:800; letter-spacing:-1.5px; line-height:1.08; color:var(--text-primary); margin-bottom:48px; }
.home-claim em { font-style:normal; color:var(--accent); }
.choice-cards { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:780px; width:100%; position:relative; z-index:1; }
.choice-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-xl); padding:30px 32px; text-align:left; transition:transform 0.18s,box-shadow 0.18s,border-color 0.18s; text-decoration:none; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.choice-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--accent) 0%,#818CF8 100%); }
.choice-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--accent-mid); }
.choice-card-icon { width:48px; height:48px; background:var(--accent-light); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; margin-bottom:20px; color:var(--accent); flex-shrink:0; }
.choice-card-icon svg { width:22px; height:22px; }
.choice-card-title { font-size:21px; font-weight:700; color:var(--text-primary); margin-bottom:10px; letter-spacing:-0.3px; }
.choice-card-sub { font-size:14.5px; color:var(--text-secondary); line-height:1.65; flex:1; margin-bottom:20px; }
.choice-card-cta { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--accent); }
.choice-card-cta svg { width:14px; height:14px; transition:transform 0.15s; }
.choice-card:hover .choice-card-cta svg { transform:translateX(3px); }
.home-nav { background:rgba(255,255,255,0.9); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--border-light); position:sticky; top:0; z-index:200; }
.home-nav-inner { max-width:1120px; margin:0 auto; padding:0 24px; height:64px; display:flex; align-items:center; justify-content:space-between; }
.home-footer { border-top:1px solid var(--border); padding:24px; text-align:center; }
.home-footer-copy { font-size:13px; color:var(--text-muted); }

/* ─── NAV EXTRAS ─── */
.nav-logo-mark { width:28px; height:28px; background:var(--accent); border-radius:8px; flex-shrink:0; }
.nav-logo-text { font-weight:700; font-size:18px; letter-spacing:-0.3px; }
.nav-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-cta-link,
.nav-links a.nav-cta-link { display:inline-flex; align-items:center; font-size:14px; font-weight:700; color:#fff !important; background:var(--accent); padding:9px 20px; border-radius:var(--radius-md); text-decoration:none; transition:all 0.15s; white-space:nowrap; letter-spacing:-0.1px; }
.nav-cta-link:hover,
.nav-links a.nav-cta-link:hover { background:var(--accent-hover); transform:translateY(-1px); box-shadow:0 4px 14px rgba(79,70,229,0.3); color:#fff !important; }
.nav-toggle { display:none; flex-direction:column; gap:4.5px; background:none; border:none; cursor:pointer; padding:5px; border-radius:6px; }
.nav-toggle span { display:block; width:20px; height:2px; background:var(--text-primary); border-radius:2px; transition:all 0.2s; }
.mobile-lang-row { display:flex; flex-wrap:wrap; gap:6px; padding:14px 4px 4px; border-top:1px solid var(--border-light); margin-top:8px; }

/* ─── HERO LAYOUT (bewerber / unternehmen) ─── */
.hero-bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero-content { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; max-width:680px; margin:0 auto; }
.hero-content h1 { font-size:clamp(36px,5.5vw,60px); font-weight:800; letter-spacing:-1.5px; line-height:1.08; color:var(--text-primary); margin-bottom:20px; }
.hero-content h1 em { font-style:normal; color:var(--accent); }
.hero-content p { font-size:clamp(16px,1.8vw,18px); color:var(--text-secondary); line-height:1.7; max-width:500px; margin-bottom:40px; }
.hero-actions a.btn-primary { display:inline-flex; align-items:center; justify-content:center; font-family:var(--font); font-size:15px; font-weight:600; color:#fff; background:var(--accent); padding:13px 26px; border-radius:var(--radius-md); text-decoration:none; transition:all 0.15s; }
.hero-actions a.btn-primary:hover { background:var(--accent-hover); transform:translateY(-1px); box-shadow:0 4px 14px rgba(79,70,229,0.25); }
.hero-actions a.btn-ghost { display:inline-flex; align-items:center; justify-content:center; font-family:var(--font); font-size:15px; font-weight:500; color:var(--text-secondary); background:transparent; padding:13px 18px; border-radius:var(--radius-md); text-decoration:none; transition:all 0.15s; }
.hero-actions a.btn-ghost:hover { background:var(--bg-subtle); color:var(--text-primary); }

/* ─── PHONE FRAME ─── */
.phone-frame { width:270px; background:var(--bg-card); border:1px solid var(--border); border-radius:32px; box-shadow:var(--shadow-lg),0 20px 48px rgba(0,0,0,0.07); overflow:hidden; padding:20px 16px; }
.phone-screen { display:flex; flex-direction:column; gap:10px; }
.feed-header { display:flex; align-items:center; gap:8px; padding-bottom:10px; border-bottom:1px solid var(--border-light); margin-bottom:2px; font-size:14px; font-weight:700; color:var(--text-primary); }
.feed-logo-sm { width:22px; height:22px; border-radius:6px; flex-shrink:0; object-fit:contain; }
.job-card-sm { background:var(--bg-subtle); border:1px solid var(--border-faint); border-radius:14px; padding:12px 14px; }
.job-card-sm.featured { background:var(--bg-card); border-color:var(--accent-mid); box-shadow:0 0 0 1px var(--accent-mid); }
.job-card-sm-top { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.company-avatar { width:34px; height:34px; border-radius:10px; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; letter-spacing:0.02em; }
.ca-orange { background:#F97316; }
.ca-blue { background:#3B82F6; }
.ca-green { background:#10B981; }
.ca-purple { background:#8B5CF6; }
.job-card-sm-title { font-size:12.5px; font-weight:600; color:var(--text-primary); line-height:1.3; }
.job-card-sm-meta { font-size:10.5px; color:var(--text-muted); margin-top:1px; }
.job-badge { display:inline-flex; align-items:center; font-size:10px; font-weight:700; padding:3px 8px; border-radius:6px; margin-left:auto; flex-shrink:0; white-space:nowrap; }
.job-badge.new { background:#D1FAE5; color:#059669; }
.job-badge.dist { background:var(--accent-light); color:var(--accent); }
.job-tags { display:flex; flex-wrap:wrap; gap:5px; }
.job-tag { font-size:10.5px; font-weight:500; color:var(--text-secondary); background:var(--bg); border:1px solid var(--border); padding:2px 8px; border-radius:6px; white-space:nowrap; }
.job-tag.wage { color:var(--accent); background:var(--accent-light); border-color:var(--accent-mid); font-weight:600; }

/* ─── ABOUT EXTRAS ─── */
.about-inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about-text { display:flex; flex-direction:column; }
.about-text h2 { font-size:clamp(26px,3.2vw,38px); font-weight:700; letter-spacing:-0.5px; line-height:1.2; color:var(--text-primary); margin-bottom:14px; }
.about-text p { font-size:15px; color:var(--text-secondary); line-height:1.65; }
.about-stat { background:var(--bg-card); border:1px solid var(--border-faint); border-radius:var(--radius-lg); padding:20px 22px; box-shadow:var(--shadow-xs); }
.about-stat-value { font-size:26px; font-weight:800; color:var(--accent); letter-spacing:-1px; line-height:1; margin-bottom:4px; }
.about-stat-label { font-size:12.5px; color:var(--text-secondary); }
.about-visual { display:flex; justify-content:center; }
.feed-preview { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-xl); padding:20px; box-shadow:var(--shadow-md); width:100%; max-width:360px; }
.feed-preview-header { display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.feed-preview-logo { width:24px; height:24px; border-radius:7px; flex-shrink:0; object-fit:contain; }
.feed-preview-card { font-size:14px; font-weight:600; color:var(--text-primary); }
.feed-preview-card-meta { font-size:12px; color:var(--text-muted); margin-top:2px; }
.audience-card-standalone { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-xl); padding:36px 40px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; max-width:480px; width:100%; }
.audience-card-standalone::before { content:''; position:absolute; top:0; left:0; right:0; height:2.5px; background:linear-gradient(90deg,var(--accent) 0%,#818CF8 100%); }
.aud-list { list-style:none; display:flex; flex-direction:column; gap:9px; }
.aud-list li { display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--text-secondary); line-height:1.5; }
.aud-list li::before { content:'✓'; color:var(--accent); font-weight:700; font-size:13px; flex-shrink:0; margin-top:1px; }

/* ─── SECTION HEAD ─── */
.section-head { text-align:center; margin-bottom:56px; }
.section-head h2 { font-size:clamp(26px,3.6vw,40px); font-weight:700; letter-spacing:-0.5px; line-height:1.2; color:var(--text-primary); margin-bottom:12px; }
.section-head p { font-size:16px; color:var(--text-secondary); line-height:1.65; max-width:560px; margin:0 auto; }
.chip { display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; color:var(--accent); background:var(--accent-light); padding:4px 12px; border-radius:999px; margin-bottom:16px; border:1px solid var(--accent-mid); }

/* ─── FEATURE CARDS (new names) ─── */
.feature-card { background:var(--bg-card); border:1px solid var(--border-faint); border-radius:var(--radius-lg); padding:32px 28px; box-shadow:var(--shadow-xs); transition:transform 0.15s,box-shadow 0.15s; }
.feature-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.feature-icon { width:42px; height:42px; background:var(--accent-light); border-radius:11px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--accent); }
.feature-icon svg { width:20px; height:20px; }
.feature-card h3 { font-size:15px; font-weight:600; color:var(--text-primary); margin-bottom:8px; }
.feature-card p { font-size:13.5px; color:var(--text-secondary); line-height:1.65; }

/* ─── DIFF CARDS (new names) ─── */
.diff-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:48px; }
.diff-card { background:var(--bg-card); border:1px solid var(--border-faint); border-radius:var(--radius-lg); padding:28px 26px; box-shadow:var(--shadow-xs); }
.diff-icon { width:38px; height:38px; background:var(--accent-light); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--accent); margin-bottom:14px; }
.diff-icon svg { width:18px; height:18px; }
.diff-card h3 { font-size:15px; font-weight:600; color:var(--text-primary); margin-bottom:7px; }
.diff-card p { font-size:13.5px; color:var(--text-secondary); line-height:1.65; }
.comp-table-wrap { overflow-x:auto; }
.comp-table { width:100%; border-collapse:collapse; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-sm); }
.comp-table thead th { padding:14px 20px; font-size:11.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); background:var(--bg-subtle); text-align:left; border-bottom:1px solid var(--border); }
.comp-table thead th.highlight { color:var(--accent); background:var(--accent-light); }
.comp-table tbody tr { border-bottom:1px solid var(--border-light); }
.comp-table tbody tr:last-child { border-bottom:none; }
.comp-table tbody td { padding:14px 20px; font-size:13px; color:var(--text-secondary); }
.comp-table tbody td.highlight { background:rgba(238,242,255,0.5); }
.tbl-no { color:#DC2626; font-weight:500; }
.tbl-yes { color:#059669; font-weight:600; }

/* ─── LAUNCH EXTRAS ─── */
.launch-step-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.launch-step-badge { display:inline-flex; align-items:center; font-size:12px; font-weight:600; padding:5px 13px; border-radius:999px; background:var(--bg-card); color:var(--text-muted); border:1px solid var(--border); }
.launch-step-badge.active { background:#D1FAE5; color:#059669; border-color:#A7F3D0; }
.launch-step-num { width:40px; height:40px; min-width:40px; background:var(--accent); color:#fff; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; flex-shrink:0; }
.launch-steps { display:flex; flex-direction:column; gap:0; max-width:760px; margin:0 auto; }
.launch-step { background:var(--bg-card); border:1px solid var(--border-faint); border-radius:var(--radius-xl); padding:32px 36px; position:relative; }
.launch-step:not(:last-child) { margin-bottom:16px; }
.launch-step.active { border-color:var(--accent-mid); box-shadow:0 0 0 1px var(--accent-mid); }
.launch-step h3 { font-size:17px; font-weight:700; color:var(--text-primary); margin-bottom:8px; }
.launch-step p { font-size:14px; color:var(--text-secondary); line-height:1.65; }

/* ─── CTA (new class names) ─── */
.cta { padding:96px 0; background:var(--bg); border-top:1px solid var(--border); }
.cta .cta-inner { text-align:center; max-width:560px; margin:0 auto; }
.cta .cta-inner h2 { font-size:clamp(26px,4vw,42px); font-weight:800; letter-spacing:-0.8px; line-height:1.15; color:var(--text-primary); margin-bottom:14px; }
.cta .cta-inner h2 em { font-style:normal; color:var(--accent); }
.cta .cta-inner p { font-size:17px; color:var(--text-secondary); line-height:1.65; margin-bottom:36px; }
.cta .cta-form { display:flex; gap:8px; max-width:420px; margin:0 auto 16px; }
.cta .cta-form input[type="email"] { flex:1; font-family:var(--font); font-size:15px; padding:13px 16px; border:1.5px solid var(--border); border-radius:var(--radius-md); background:var(--bg); color:var(--text-primary); outline:none; transition:border-color 0.15s; }
.cta .cta-form input[type="email"]:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,70,229,0.1); }
.cta .cta-form input[type="email"]::placeholder { color:var(--text-muted); }
.cta .cta-form button[type="submit"] { font-family:var(--font); font-size:15px; font-weight:600; color:#fff; background:var(--accent); padding:13px 22px; border-radius:var(--radius-md); border:none; cursor:pointer; white-space:nowrap; transition:all 0.15s; }
.cta .cta-form button[type="submit"]:hover { background:var(--accent-hover); transform:translateY(-1px); }
.cta .cta-note { font-size:13px; color:var(--text-muted); }
.cta .cta-form input.input-error { border-color:#EF4444; box-shadow:0 0 0 3px rgba(239,68,68,0.12); }
.cta-error { font-size:13px; color:#EF4444; margin-top:8px; display:none; font-weight:500; }
.chip-light { background:var(--accent-light); border-color:var(--accent-mid); }

/* ─── FOOTER (new class names) ─── */
.footer { background:var(--bg); border-top:1px solid var(--border); padding:52px 0 28px; }
.footer .footer-top { display:flex; align-items:flex-start; justify-content:space-between; gap:48px; }
.footer .footer-brand { max-width:220px; }
.footer .footer-brand p { font-size:13px; color:var(--text-muted); line-height:1.65; margin-top:10px; }
.footer .footer-cols { display:flex; gap:48px; }
.footer .footer-col { display:flex; flex-direction:column; gap:9px; }
.footer-col-head { font-size:12.5px; font-weight:600; color:var(--text-primary); margin-bottom:5px; }
.footer .footer-col a { font-size:13px; color:var(--text-muted); text-decoration:none; transition:color 0.15s; }
.footer .footer-col a:hover { color:var(--text-secondary); }
.footer .footer-bottom { margin-top:40px; padding-top:22px; border-top:1px solid var(--border-light); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer .footer-bottom span { font-size:13px; color:var(--text-muted); }
.footer .footer-legal { display:flex; gap:18px; }
.footer .footer-legal a { font-size:13px; color:var(--text-muted); text-decoration:none; transition:color 0.15s; }
.footer .footer-legal a:hover { color:var(--text-secondary); }

/* ─── HOME PAGE EXTRAS ─── */
.home-eyebrow { font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:16px; }

/* ─── APP DASHBOARD MOCKUP ─── */
.dash-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
.dash-label { font-size:9px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:2px; }
.dash-company { font-size:16px; font-weight:800; color:var(--text-primary); letter-spacing:-0.3px; }
.dash-create-btn { display:inline-flex; align-items:center; gap:4px; font-family:var(--font); font-size:11px; font-weight:700; color:#fff; background:var(--accent); border:none; border-radius:20px; padding:7px 12px; cursor:default; white-space:nowrap; }
.dash-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.dash-stat { background:var(--bg-subtle); border:1px solid var(--border-faint); border-radius:12px; padding:10px 8px; text-align:center; }
.dash-stat-val { font-size:18px; font-weight:800; color:var(--text-primary); line-height:1; margin-bottom:3px; }
.dash-stat-lbl { font-size:9px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.dash-section-label { font-size:9.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); margin:4px 0 8px; display:flex; align-items:center; gap:5px; }
.dash-section-label span { color:var(--accent); background:var(--accent-light); border-radius:20px; padding:1px 7px; font-size:10px; }
.dash-job-card { background:var(--bg-card); border:1px solid var(--border-faint); border-radius:12px; padding:11px 13px; margin-bottom:7px; border-left:3px solid var(--accent); }
.dash-job-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; }
.dash-job-title { font-size:13px; font-weight:700; color:var(--text-primary); }
.dash-job-status { font-size:10px; font-weight:600; color:#059669; }
.dash-job-meta { font-size:10.5px; color:var(--text-muted); display:flex; justify-content:space-between; align-items:center; }
.dash-job-link { font-size:10.5px; font-weight:600; color:var(--accent); background:var(--accent-light); padding:2px 8px; border-radius:6px; }

/* ─── RESPONSIVE ─── */
@media (max-width:900px) {
  .nav-links { display:none; }
  .nav-actions .btn-ghost { display:none; }
  .nav-actions .lang-switcher { display:none; }
  .nav-mobile-btn { display:flex; }
  .nav-toggle { display:flex; }
  .hero { padding:60px 0 52px; }
  .hero .container { grid-template-columns:1fr; gap:0; }
  .hero-content { align-items:center; text-align:center; }
  .hero-content .hero-actions { justify-content:center; }
  .hero-visual { display:none; }
  .hero-mockup-grid { grid-template-columns:1fr; gap:10px; }
  .about-grid,.diff-grid,.launch-grid,.about-inner { grid-template-columns:1fr; gap:48px; }
  .audience-cards { grid-template-columns:1fr; }
  .features-grid { grid-template-columns:1fr 1fr; }
  .diff-cards { grid-template-columns:1fr 1fr; }
  .footer-top { flex-direction:column; gap:28px; }
  .footer-cols { gap:32px; flex-wrap:wrap; }
  .footer .footer-top { flex-direction:column; gap:28px; }
  .footer .footer-cols { gap:32px; flex-wrap:wrap; }
}
@media (max-width:640px) {
  .container { padding:0 18px; }
  .hero-actions { flex-direction:column; align-items:stretch; width:100%; max-width:300px; }
  .btn-lg,.btn-outline { text-align:center; justify-content:center; }
  .features-grid { grid-template-columns:1fr; }
  .aud-card { padding:28px 24px; }
  .about-stats { grid-template-columns:1fr 1fr; }
  .cta-form { flex-direction:column; }
  .cta .cta-form { flex-direction:column; }
  .footer-cols { flex-direction:column; gap:22px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:10px; }
  .footer .footer-cols { flex-direction:column; gap:22px; }
  .footer .footer-bottom { flex-direction:column; align-items:flex-start; gap:10px; }
  .comp-table { overflow-x:auto; }
  .choice-cards { grid-template-columns:1fr; gap:14px; }
  .choice-card { padding:28px 24px; }
  .process-steps { grid-template-columns:1fr; }
  .diff-cards { grid-template-columns:1fr; }
  .home-claim { font-size:30px; letter-spacing:-0.8px; }
  .audience-card-standalone { padding:28px 24px; }
}

/* ── Legal / prose pages (Impressum, Datenschutz, Nutzungsbedingungen) ── */
/* Language switcher is shown here too: these pages are now fully localized
   (only the concrete company data stays as static placeholders). */
/* Kurze Rechtsseiten (Kontakt) liessen unter der Fusszeile Weissraum stehen:
   die Fusszeile sass dort, wo der Text endete, nicht am unteren Rand. Gleiche
   Bauform wie .home-page — bei langen Seiten aendert es nichts. */
.legal-page { min-height:100vh; display:flex; flex-direction:column; }
.legal-page .legal { flex:1; }

.legal { padding:48px 0 0; }
.legal .container { max-width:720px; }
.legal-back { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--text-secondary); text-decoration:none; padding:8px 15px 8px 12px; border:1px solid var(--border); border-radius:999px; background:var(--bg); transition:background 0.15s,color 0.15s,transform 0.15s; margin-bottom:40px; }
.legal-back:hover { background:var(--bg-subtle); color:var(--text-primary); transform:translateX(-2px); }
.legal-back svg { transition:transform 0.15s; }
.legal-back:hover svg { transform:translateX(-2px); }
.legal h1 { font-size:32px; font-weight:800; letter-spacing:-0.5px; color:var(--text-primary); margin-bottom:8px; }
.legal-updated { font-size:13px; color:var(--text-muted); padding-bottom:28px; margin-bottom:8px; border-bottom:1px solid var(--border-light); }
.legal h2 { font-size:17px; font-weight:700; letter-spacing:-0.1px; color:var(--text-primary); margin:42px 0 12px; }
.legal p { font-size:15px; line-height:1.8; color:var(--text-secondary); margin-bottom:14px; }
.legal address { font-style:normal; font-size:15px; line-height:1.95; color:var(--text-secondary); margin-bottom:14px; }
.legal ul { list-style:disc; margin:8px 0 18px 22px; }
.legal li { font-size:15px; line-height:1.75; color:var(--text-secondary); margin-bottom:7px; }
.legal a { color:var(--accent); text-decoration:none; }
.legal a:hover { text-decoration:underline; }
.legal-lead { font-size:16px; line-height:1.7; color:var(--text-secondary); margin-bottom:34px; }
.ueber-tagline { font-size:18px; font-weight:600; line-height:1.55; letter-spacing:-0.2px; color:var(--text-primary); margin-bottom:30px; }
/* ── Kontaktseite ─────────────────────────────────────────────────────────────
   Nur die Adressen, jede als eigene Karte. Die ganze Karte ist der Link: ein
   Klick oeffnet das Mailprogramm mit uns als Empfaenger. Alles aus den
   bestehenden Variablen, keine neuen Farben. */
.kontakt-cards { display:grid; gap:12px; margin-top:26px; }
.kontakt-block {
  display:flex; align-items:center; gap:16px;
  padding:18px 20px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  text-decoration:none; transition:border-color 0.15s,box-shadow 0.15s,transform 0.15s;
}
.kontakt-block:hover { border-color:var(--accent-mid); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.kontakt-block-body { display:flex; flex-direction:column; min-width:0; }
.kontakt-label { font-size:15px; font-weight:700; color:var(--text-primary); margin-bottom:3px; }
.kontakt-mail { font-size:14.5px; color:var(--accent); text-decoration:none; word-break:break-word; }
.kontakt-block:hover .kontakt-mail { text-decoration:underline; }
/* Briefsymbol rechts — gezeichnet, kein Emoji, damit es auf jedem Geraet
   gleich aussieht. Bewegt sich bewusst nicht: ein Brief, kein Pfeil. */
.kontakt-mail-icon { margin-left:auto; flex:none; color:var(--text-muted); transition:color 0.15s; }
.legal .kontakt-note { font-size:14.5px; line-height:1.7; color:var(--text-secondary); margin-top:20px; }  /* .legal p ist spezifischer als eine einzelne Klasse (0,1,1 gegen 0,1,0) und hat die     Groesse sonst ueberstimmt - gemessen, nicht vermutet. */
.kontakt-block:hover .kontakt-mail-icon { color:var(--accent); }

/* Konto loeschen auf der Kontaktseite (28.09.2026, L1 fuer Google Play).
   Die UEBERSCHRIFT bleibt sichtbar, die Erklaerung liegt hinter dem Info-Zeichen —
   dieselbe Bedienung wie components/InfoHint.tsx in der App: Klick auf, Klick zu.

   🔴 Sie KLAPPT AUF, sie schwebt nicht. Zuerst schwebte sie nach rechts; gemessen
   ueber alle sieben Sprachen deckte die franzoesische Fassung (die laengste) einen
   Fusszeilen-Link zu, und wie viel Platz darunter ist, haengt an der Fensterhoehe —
   freihalten laesst sich das nicht. Aufklappen kann nichts verdecken: Unter der
   Zeile steht nur der Fuss, und der rueckt nach.

   🔴 KEIN Oeffnen beim Ueberfahren. Nach dem Klick steht der Zeiger noch auf dem
   Symbol; eine Hover-Regel haelt die Blase dann offen, und der zweite Klick
   schliesst sie NICHT mehr. Genau diese Falle steht in InfoHint.tsx beschrieben
   (Fund 20.09.2026) — hier am 28.09.2026 nachgemessen und deshalb weggelassen. */
.kontakt-loeschen { margin-top:26px; }
.kontakt-loeschen-zeile { display:flex; align-items:center; gap:4px; }
.kontakt-loeschen-titel { font-size:15px; font-weight:700; color:var(--text-primary); }
.info-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:0; background:none; color:var(--text-muted); cursor:pointer; border-radius:999px; transition:color 0.15s; }
.info-btn:hover { color:var(--accent); }
.info-blase { display:none; margin-top:10px; max-width:520px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); padding:12px 14px; font-size:13.5px; line-height:1.7; color:var(--text-secondary); }
.info-wrap.open .info-blase { display:block; }

@media (max-width:600px) {
  .kontakt-block { padding:16px; gap:13px; }
}

.legal-footer { border-top:1px solid var(--border-light); background:var(--bg-subtle); margin-top:72px; }
.legal-footer .container { display:flex; align-items:center; gap:14px 24px; flex-wrap:wrap; padding-top:26px; padding-bottom:26px; }
.legal-footer-links { display:flex; gap:20px; flex-wrap:wrap; }
.legal-footer-links a { font-size:14px; color:var(--text-secondary); text-decoration:none; transition:color 0.15s; }
.legal-footer-links a:hover { color:var(--text-primary); }
.legal-footer-copy { font-size:13px; color:var(--text-muted); margin-left:auto; }
@media (max-width:600px) {
  .legal-footer-copy { margin-left:0; }
}

/* ── First-visit language picker (injected by shared.js) ── */
body.lang-modal-open { overflow:hidden; }
.lang-modal-backdrop { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(17,24,39,0.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); animation:lmFade 0.25s ease both; }
.lang-modal { width:100%; max-width:400px; max-height:calc(100vh - 40px); overflow-y:auto; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:34px 30px 30px; text-align:center; outline:none; animation:lmPop 0.28s cubic-bezier(0.16,0.84,0.44,1) both; }
.lang-modal-brand { display:inline-flex; align-items:center; gap:9px; font-size:18px; font-weight:700; letter-spacing:-0.3px; color:var(--text-primary); margin-bottom:20px; }
.lang-modal-brand img { width:28px; height:28px; object-fit:contain; }
.lang-modal-title { font-size:22px; font-weight:800; letter-spacing:-0.4px; color:var(--text-primary); margin-bottom:8px; }
.lang-modal-sub { font-size:14px; line-height:1.6; color:var(--text-secondary); margin-bottom:24px; }
.lang-modal-grid { display:flex; flex-direction:column; gap:8px; }
.lang-modal-option { display:flex; align-items:center; justify-content:center; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg); font-family:var(--font); font-size:14.5px; font-weight:600; color:var(--text-primary); cursor:pointer; text-align:center; transition:background 0.15s,color 0.15s,border-color 0.15s,transform 0.15s; }
.lang-modal-option:hover { background:var(--accent-light); color:var(--accent); border-color:var(--accent-mid); transform:translateY(-1px); }
@keyframes lmFade { from { opacity:0; } to { opacity:1; } }
@keyframes lmPop { from { opacity:0; transform:translateY(10px) scale(0.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (max-width:420px) {
  .lang-modal { padding:28px 22px 24px; }
}

/* ── 404 page ── */
.notfound-text { font-size:16px; color:var(--text-secondary); line-height:1.6; max-width:440px; margin:0 auto 28px; position:relative; z-index:1; }
.notfound-home { display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:#fff; background:var(--accent); padding:12px 24px; border-radius:var(--radius-md); text-decoration:none; position:relative; z-index:1; transition:background 0.15s,transform 0.15s; }
.notfound-home:hover { background:var(--accent-hover); transform:translateY(-1px); }

/* ═══════════════════════════════════════════════════════════════════════════
   06.10.2026 — „Die ruhige Fläche" (Owner-Entscheidung: Variante B)
   ---------------------------------------------------------------------------
   ⚖️ Owner: „mir persönlich schaut es zu sehr nach ki aus … eher im apple stil
   … es soll eif nur bissl angepasst werden." ⇒ Farben und Text bleiben, geändert
   ist die Anordnung: links gesetzt statt mittig, Haarlinien statt Schatten,
   feines Punktraster statt Farbverlauf.

   🔴 ALLES HIER IST AUF .hero-split / .why-split GESCHRAUBT, nicht auf .hero
   oder .section-head. Diese Klassen teilen sich mehrere Seiten; eine Änderung
   an ihnen hätte Seiten mitgezogen, die noch nicht dran sind.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero, zweispaltig: Text links, die echten Jobkarten rechts ───────────── */
.hero-split { padding:28px 0 64px; }
.hero-split .hero-bg { display:none; }
.hero-split .container { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:48px; align-items:center; background:var(--bg-subtle); border:1px solid var(--border-faint); border-radius:28px; padding:56px 48px; position:relative; overflow:hidden; }
/* Punktraster statt Verlaufsschimmer — eine Regel, kein Bild, keine neue Farbe */
.hero-split .container::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:0.6; background-image:radial-gradient(rgba(79,70,229,0.22) 1px, transparent 1px); background-size:22px 22px; -webkit-mask-image:radial-gradient(ellipse 65% 70% at 78% 40%, #000 0%, transparent 70%); mask-image:radial-gradient(ellipse 65% 70% at 78% 40%, #000 0%, transparent 70%); }
.hero-split .hero-content { position:relative; z-index:1; align-items:flex-start; text-align:left; max-width:none; margin:0; }
.hero-split .hero-content h1 { font-size:clamp(30px,3.5vw,44px); font-weight:700; letter-spacing:-1.7px; line-height:1.06; margin-bottom:16px; }
.hero-split .hero-content p { font-size:16px; line-height:1.6; max-width:430px; margin-bottom:28px; }
.hero-split .hero-actions { justify-content:flex-start; }
/* Die Jobkarten waren Deko in einem Fensterrahmen — jetzt zeigen sie, was die App tut */
.hero-split .hero-mockup-wrap { position:relative; z-index:1; margin:0; max-width:none; }
.hero-split .hero-mockup-frame { background:none; border:none; border-radius:0; box-shadow:none; overflow:visible; }
.hero-split .mockup-titlebar { display:none; }
.hero-split .hero-mockup-grid { grid-template-columns:1fr; gap:10px; padding:0; }
.hero-split .mc { background:var(--bg-card); border:1px solid var(--border); box-shadow:none; }

/* ── Der zusammengeführte Abschnitt: sechs Zeilen statt zehn Karten ───────── */
.why-split .section-head { text-align:left; display:block; margin-bottom:30px; }
/* Die Einleitung ist weg (sie sagte dasselbe wie der Absatz im Abschnitt darueber), deshalb traegt die Ueberschrift allein — einspaltig statt halbleer. */
.why-split .section-head h2 { max-width:620px; }
.why-split .section-head h2 { margin-bottom:0; letter-spacing:-1.2px; }
.why-split .section-head p { margin:0; max-width:none; }
/* Der Chip wird zur Augenbraue — damit sich der Chip-Rhythmus nicht fünfmal wiederholt */
.why-split .chip { background:none; border:none; padding:0; color:var(--text-muted); letter-spacing:0.14em; margin-bottom:-18px; }
.why-rows { border-top:1px solid var(--border); }
.why-row { display:grid; grid-template-columns:minmax(0,250px) minmax(0,1fr); gap:32px; padding:22px 0; border-bottom:1px solid var(--border); align-items:start; }
.why-row h3 { font-size:15.5px; font-weight:650; letter-spacing:-0.2px; color:var(--text-primary); margin:0; }
.why-row p { font-size:14.5px; color:var(--text-secondary); line-height:1.62; margin:0; max-width:640px; }
.why-split .comp-table-wrap { margin-top:40px; }
.why-split .comp-table { box-shadow:none; }

@media (max-width:900px) {
  .hero-split .container { grid-template-columns:1fr; gap:32px; padding:36px 24px; border-radius:22px; }
  .hero-split .hero-content h1 { font-size:31px; letter-spacing:-1.1px; }
  .why-split .chip { margin-bottom:0; }
  .why-row { grid-template-columns:1fr; gap:6px; padding:18px 0; }
}

/* ── Der „Was ist Teenvia?"-Abschnitt ohne zweite Ansicht (06.10.2026) ──────
   Die Jobkarten-Ansicht rechts zeigte dasselbe wie der Hero — sie benutzte sogar
   dieselben Schlüssel (c1_tag1, c3_tag1). Nach dem Entfernen stand der Text in der
   linken Hälfte und rechts war nichts. Also eine Spalte, Zahlen nebeneinander. */

/* ── Hero und „Was ist Teenvia?" sind EIN Block (06.10.2026) ────────────────
   ⚖️ Owner: „mach einfach beide zu einem … logisch bitte. die bsp jobs und das
   von unten aber dabei lassen & halt gescheid platzieren."
   Reihenfolge: für wen → Versprechen → was es IST → was es tut → Beispieljobs →
   Belege → Weg weiter. Die Zahlen liegen als eigene Zeile unter beiden Spalten. */
.hero-ident { font-size:17.5px; font-weight:600; letter-spacing:-0.3px; line-height:1.4; color:var(--text-primary); margin:0 0 12px; }
.hero-split .hero-content .hero-ident { max-width:440px; }
.hero-split .hero-stats { grid-column:1 / -1; position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:44px; padding-top:30px; border-top:1px solid var(--border); }
.hero-split .about-stat { background:var(--bg-card); border:1px solid var(--border); box-shadow:none; }
@media (max-width:860px) {
  .hero-split .hero-stats { grid-template-columns:1fr 1fr; margin-top:30px; padding-top:24px; }
  .hero-ident { font-size:16px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   06.10.2026 (2) — der Rest der Seite
   ---------------------------------------------------------------------------
   ⚖️ Owner, erste Ansage: „der rest is nd überarbeitet … können nd die hälfte
   ändern und die hälfte alt lassen."
   ⚖️ Owner, Korrektur danach: „mir hat die variation schon gefallen, vor allem
   bei so funktioniert es. bei so funktioniert es mach es zurück, bei sei dabei
   auch. nd komplett zurück, NUR vom layout her … also wo die sachen stehen."

   ⇒ .ton auf Launch, Prozess und Abschluss: die Anordnung bleibt, wie sie
   war (Kopf mittig, Schritte im Zweierraster, Formular unter dem Text). Nur der
   Tonfall ist der neue — Augenbraue statt Pille, Haarlinie statt Schattenkarte,
   01 statt Kreisplakette. Links gesetzt bleibt allein .why-split.
   (Eine Zwischenstufe .lean setzte auch den Launch-Kopf nach links; vom Owner
   am selben Tag verworfen, deshalb ist sie raus.)

   🔴 Beide hängen an einer Klasse. Die Startseite benutzt .process und .cta
   ebenfalls und soll sich NICHT mitverändern.

   🔴 EINE Sprache für alles war zu viel: wenn jeder Abschnitt gleich gebaut
   ist, verliert die Seite ihren Rhythmus. Gemessen am 06.10.2026, vom Owner
   verworfen — nicht erneut zusammenziehen.
   ════════════════════════════════════════════════════════════════════════════ */

/* Der graue Strich über den vier Kacheln fällt weg, der Abstand bleibt. */
.hero-split .hero-stats { margin-top:40px; padding-top:0; border-top:none; }

/* Gleicher Abstand unter der Überschrift wie im Launch-Abschnitt. */
.why-split .section-head > p { margin:12px 0 0; max-width:720px; }

/* ── Launch unter .ton: gestapelt wie vorher, nur der Ton ist neu ────── */
/* Der zweite Absatz des Kopfes hatte sein style-Attribut verloren — der Abstand
   kommt jetzt von hier, der Text bleibt wortgleich. */
.ton .section-head > p + p { margin-top:12px; font-size:15px; }
/* Die Karte bleibt, Kreisplakette und Leuchtrand gehen. Die aktive Phase
   erkennt man weiter am Rand in Akzentfarbe und am grünen Abzeichen. */
.ton .launch-step { box-shadow:none; border-color:var(--border); }
.ton .launch-step.active { border-color:var(--accent-mid); box-shadow:none; }
.ton .launch-step-num { width:auto; height:auto; min-width:0; background:none; color:var(--accent); border-radius:0; font-size:12px; font-weight:600; letter-spacing:0.12em; font-variant-numeric:tabular-nums; }
.ton .launch-step-num::before { content:'0'; }
.ton .launch-step-badge { font-size:11px; padding:3px 10px; }
.ton .launch-step h3 { font-size:16px; font-weight:650; letter-spacing:-0.2px; }
.ton .launch-step p { font-size:14.5px; line-height:1.62; }

/* ── .ton — Prozess und Abschluss: alles steht, wo es stand ──────────── */
.ton .chip { background:none; border:none; padding:0; color:var(--text-muted); letter-spacing:0.14em; margin-bottom:10px; }

.ton .process-head { margin-bottom:46px; }
.ton .process-head h2 { letter-spacing:-1.2px; }
.ton .process-head p { font-size:16px; }
/* Aus den Schattenkarten werden Felder unter einer Haarlinie. Platz und
   Reihenfolge bleiben das Zweierraster von vorher. */
.ton .process-steps { gap:0 44px; }
.ton .process-step { background:none; border:none; border-top:1px solid var(--border); border-radius:0; box-shadow:none; padding:18px 0 22px; }
.ton .process-step-num { display:block; width:auto; height:auto; min-width:0; background:none; color:var(--text-muted); border-radius:0; font-size:12px; font-weight:600; letter-spacing:0.12em; margin:0 0 5px; font-variant-numeric:tabular-nums; }
/* Führende Null aus der Regel, damit im HTML keine Zahl angefasst wird. */
.ton .process-step-num::before { content:'0'; }
.ton .process-step-title { font-size:15.5px; font-weight:650; letter-spacing:-0.2px; margin-bottom:6px; }
.ton .process-step-desc { font-size:14.5px; line-height:1.62; }
.ton .process-note { margin-top:34px; }

/* .cta-side hält Formular, Fehlertext und Hinweis zusammen — shared.js sucht den
   Fehlertext über form.parentElement, er bleibt dort Geschwister des Formulars. */
.ton.cta .cta-inner { max-width:600px; }
.ton.cta .cta-inner h2 { font-weight:700; letter-spacing:-1.2px; }
.ton.cta .cta-side { max-width:420px; margin:0 auto; }
.ton.cta .cta-form { max-width:none; margin:0 0 12px; }
.ton.cta .cta-error { margin:0 0 10px; }
.ton.cta .cta-note { margin:0; }

/* ════════════════════════════════════════════════════════════════════════════
   06.10.2026 (3) — die Fläche wird die Seite, die Schrift bekommt Farbe
   ---------------------------------------------------------------------------
   ⚖️ Owner: „tu mal von der ersten spalte / abteil, die is ja so grau schattiert
   … pack das mal auf die gesamte page. also dass es nicht nur in dem viereck ist
   sondern komplett überall."
   ⚖️ Owner: „jetzt sind wir teilweise schwarz-weiß, bring unseren farbaspekt in
   d schrift zb wieder rein … bei beiden seiten."

   🔴 Hängt an body.flaeche, NICHT an body. Startseite und Rechtstexte behalten
   ihr Weiß — die Startseite hat ihren eigenen Schimmer (.home-glow), der auf
   grauem Grund kippt.

   🔴 Die weißen Flecken bleiben weiß: Jobkarten, Kacheln, Eingabefeld. Genau
   davon lebt der Aufbau jetzt — vorher lagen sie weiß auf weiß im grauen Kasten.
   ════════════════════════════════════════════════════════════════════════════ */

body.flaeche { background:var(--bg-subtle); }
/* Die Leiste klebt oben und war weiß durchscheinend — jetzt in derselben Fläche. */
body.flaeche .nav { background:rgba(249,250,251,0.88); }
/* Der Kasten um den Hero fällt weg; sein Grau ist jetzt die Seite. Das Innenmaß
   geht auf die 24px des .container zurück, damit der Hero mit allem darunter
   auf einer Kante steht. */
body.flaeche .hero-split .container { background:none; border:none; border-radius:0; padding:44px 24px 0; }
body.flaeche .hero-split { padding:12px 0 56px; }
/* Die Abschnitte bringen kein eigenes Weiß mehr mit; ihre Haarlinien bleiben. */
body.flaeche .different,
body.flaeche .launch,
body.flaeche .process,
body.flaeche .cta,
body.flaeche .footer { background:transparent; }
/* Eingabefeld und Geisterknopf brauchen den Gegenton, sonst verschwinden sie. */
body.flaeche .cta .cta-form input[type="email"] { background:var(--bg-card); }
body.flaeche .hero-actions a.btn-ghost:hover { background:var(--bg-card); }

@media (max-width:900px) {
  body.flaeche .hero-split .container { padding:28px 24px 0; }
}

/* ── Farbe zurück in die Schrift ─────────────────────────────── */
/* Keine neue Farbe: das vorhandene --accent an den Stellen, die ohnehin
   Signalschrift sind — die Augenbrauen über jeder Überschrift und die
   Schrittzahlen. Fließtext und Überschriften bleiben schwarz, sonst wird es
   wieder bunt statt akzentuiert. */
.why-split .chip,
.ton .chip { color:var(--accent); }
.ton .process-step-num { color:var(--accent); }
/* ════════════════════════════════════════════════════════════════════════════
   06.10.2026 (4) — Farben getauscht, Hero-Hinweis im selben Ton
   ---------------------------------------------------------------------------
   ⚖️ Owner: „du hast die kleine überschrift in unserer farbe gemacht, die große
   in schwarz. bitte umgekehrt." ⇒ Die Augenbraue geht zurück ins Grau, die
   Überschrift trägt das Indigo.
   ⚖️ Owner zum Hero: „das für jugendliche zwischen 15 und 17, das mach nd so
   rauspoppend sondern wie die anderen kleinen überschriften … farbe bleibt."
   ⇒ Pille weg, Punkt weg, Versalien wie bei den Augenbrauen — das Indigo
   bleibt, weil es dort als Einziges Farbe in der kleinen Schrift trägt.

   🔴 Die H1 im Hero bleibt zweifarbig (schwarz + <em> in Akzent). Owner:
   „dort lass es so wie es ist."
   ════════════════════════════════════════════════════════════════════════════ */

.why-split .chip,
.ton .chip { color:var(--text-muted); }
.why-split .section-head h2,
.ton .section-head h2,
.ton .process-head h2,
.ton.cta .cta-inner h2 { color:var(--accent); }

.hero-split .hero-badge { display:block; background:none; border:none; border-radius:0; padding:0; margin-bottom:14px; font-size:11.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); }
.hero-split .hero-badge-dot { display:none; }

/* Die Länder stehen in der Fußzeile, mit den Kürzeln — die sind in allen
   sieben Sprachen gleich, übersetzt wird nur das Wort davor.
   🔴 Welche Länder: talentry/lib/i18n.ts (SUPPORTED_COUNTRIES) und
   talentry-api/config/location.php sind die Quelle, nicht diese Seite. */
.footer-laender { font-size:12.5px; color:var(--text-muted); line-height:1.65; margin-top:8px; }
/* Die Markenspalte war auf 220px gesetzt; die Kürzelreihe brach dort nach dem
   vorletzten Eintrag um und ließ NL allein stehen. */
.footer .footer-brand { max-width:300px; }
/* ════════════════════════════════════════════════════════════════════════════
   06.10.2026 (5) — die Regel für die drei Schriftfarben
   ---------------------------------------------------------------------------
   ⚖️ Owner: „wir haben eig drei Aspekte von der Schrift. grau, schwarz, unsere
   farbe. wir wollen 1: das grau weg. … abwechselnd, wenn wir pro Sinn bzw. halt
   Teil 1-2 Stellen haben. wenn wir aber 1-2-3 Stellen haben dann grau dazu."

   ⇒ DIE REGEL, nach der hier alles gesetzt ist:
        Block mit ZWEI Ebenen  → Akzent, Schwarz.
        Block mit DREI Ebenen  → Schwarz, Akzent, Grau (Grau nur ganz unten).
      Die großen Überschriften bleiben in jedem Fall im Akzent.

   So fällt es auf den Seiten aus:
        Hero-Kachel   : 15–17 (Akzent)   · Beschriftung (schwarz)
        Warum-Zeile   : Titel (Akzent)   · Text (schwarz)
        Prozessschritt: 01 (schwarz) · Titel (Akzent) · Text (GRAU — dritte Ebene)
        Launch-Phase  : genauso wie der Prozessschritt
        Abschluss     : Satz (schwarz) · Spam-Hinweis und Länder (GRAU)

   🔴 Das Grau im Prozess-, Launch- und Abschlusstext ist KEIN Rest, es ist die
   dritte Ebene. Owner ausdrücklich: „der text darunter DA BLEIBT DAS GRAU".
   ════════════════════════════════════════════════════════════════════════════ */

/* Augenbrauen: schwarz. Nur die im Hero bleibt im Akzent (Owner: „farbe bleibt"). */
.why-split .chip,
.ton .chip { color:var(--text-primary); }

/* ── Hero ── */
.hero-split .hero-content > p { color:var(--text-primary); }
.hero-split .hero-actions a.btn-ghost { color:var(--text-primary); }
.hero-split .about-stat-label { color:var(--text-primary); }

/* ── Warum Teenvia: zwei Ebenen, also kein Grau ── */
.why-split .section-head > p { color:var(--text-primary); }
.why-row h3 { color:var(--accent); }
.why-row p { color:var(--text-primary); }

/* ── Prozess und Launch: drei Ebenen ── */
.ton .process-head > p,
.ton .section-head > p { color:var(--text-primary); }
.ton .process-step-num { color:var(--text-primary); }
.ton .process-step-title { color:var(--accent); }
.ton .process-step-desc { color:var(--text-secondary); }
.ton .launch-step-num { color:var(--text-primary); }
.ton .launch-step h3 { color:var(--accent); }
.ton .launch-step p { color:var(--text-secondary); }
/* ⑳ Der Gratis-Zeitraum der Unternehmensphase — die dritte Ebene dieses Blocks.
   Schriftregel: der Schritt-Titel steht im Akzent, der Text in Grau ⇒ die Zusage
   steht in SCHWARZ (`--text-primary`, Stufe 600). So hebt sie sich von beidem ab,
   ohne eine vierte Farbe einzufuehren. */
.launch-step p.launch-step-free { font-size:14.5px; font-weight:600; color:var(--text-primary); line-height:1.62; margin-top:10px; }

/* ── Abschluss ── */
/* :not([class]) trifft nur den Satz über dem Formular — die Länderzeile ist
   ebenfalls ein direktes Kind und soll grau bleiben. */
.ton.cta .cta-inner > p:not([class]) { color:var(--text-primary); }
/* ════════════════════════════════════════════════════════════════════════════
   06.10.2026 (6) — welches Schwarz gemeint ist
   ---------------------------------------------------------------------------
   ⚖️ Owner: „tu einfach das grau weg, pack das schwarze hin. du nimmst eif nur
   das falsche schwarz, kommt mir vor. das schwarz von ‚Eine Jobplattform, die
   wirklich für dich gebaut wurde.'"

   ⇒ Das gemeinte Schwarz ist .hero-ident: --text-primary bei Stufe 600.
   Reine Farbe ohne Stufe war zu dünn, deshalb steht die Stufe hier überall dabei.

   ⚖️ Owner, Ausnahme: „unter ‚Eine Jobplattform …' da soll das grau bleiben,
   weil da ist es sonst schwarz unter schwarz."
   🔴 Die Hero-Einleitung bleibt deshalb grau. Sie steht direkt unter der
   Identitätszeile; zwei schwarze Absätze übereinander hätten keine Ordnung mehr.
   ════════════════════════════════════════════════════════════════════════════ */

/* Ausnahme zuerst: die Einleitung unter der Identitätszeile bleibt grau. */
.hero-split .hero-content > p { color:var(--text-secondary); font-weight:400; }
.hero-split .hero-content > .hero-ident { color:var(--text-primary); font-weight:600; }

/* Alles, was „schwarz" heißt, bekommt dieselbe Stufe wie die Identitätszeile. */
.hero-split .hero-actions a.btn-ghost,
.hero-split .about-stat-label,
.why-split .section-head > p,
.why-row p,
.ton .process-head > p,
.ton .section-head > p,
.ton.cta .cta-inner > p:not([class]) { color:var(--text-primary); font-weight:600; }

/* Der Urhebervermerk steht jetzt in der Markenspalte; die untere Leiste gab es
   nur auf diesen beiden Seiten und ist samt ihrer zwei Links entfallen — beide
   stehen in der Spalte „Rechtliches“ darüber schon. */
.footer .footer-brand .footer-copy { margin-top:10px; }


/* ⚖️ Owner: die Abzeichen sagen jetzt, WANN es losgeht — „Bald“ und
   „7 Tage nach Unternehmensphase“. Der zweite Text ist länger als eine Pille
   verträgt, deshalb darf er umbrechen statt die Kopfzeile zu sprengen.
   🔴 Auf Französisch ist er am längsten — dort gemessen, nicht nur auf Deutsch. */
.ton .launch-step-header { flex-wrap:wrap; gap:8px 12px; }
.ton .launch-step-badge { white-space:normal; text-align:right; line-height:1.35; max-width:60%; }