/* ============================================================
   TEL TSI · Blue x DOSSIER HYBRID production theme — MARKETING override
   EU blue (#004494) primary + gold (#ffd617) accent on dark
   surfaces, blue-tinted paper, soft-rounded corners; Arial. Drop-in for the public site
   (index.html, for-*.html). The marketing pages carry their CSS
   in a <style> block, so append ONE line just before </head>:

     <link rel="stylesheet" href="/src/dossier-marketing.css">

   Loaded last, so these rules + the imported brand-tokens win over
   any legacy page-level :root.
   ============================================================ */

/* 1 — Palette now lives in the single source of truth: src/brand-tokens.css.
   @import must precede all other rules, so it stays at the top of this file.
   dossier-marketing.css loads last on the page, so these canonical tokens win
   over any legacy page-level :root. Change colours in brand-tokens.css. */
@import url('/src/brand-tokens.css');

/* 2 — Serif display face (Arial replaces Archivo) */
h1, h2, h3, h4, h5, h6 {
  font-family: Arial, Georgia, 'Times New Roman', serif !important;
  letter-spacing: -0.01em !important;
}

/* 3 — Cream text on oxblood fills (light-surface buttons/badges) */
.btn-primary, .step-num, .plan-badge, .plan-cta-primary { color: #ffffff !important; }
.btn-primary:hover, .plan-cta-primary:hover { background: var(--amber-d) !important; }

/* 4 — Blue × DOSSIER Hybrid: EU-blue dark bands, gold accent text. */
.deadline-banner { background: linear-gradient(90deg, var(--navy-d), var(--navy), var(--navy-d)); }
.deadline-banner strong { color: var(--brass); }

.hero { background: var(--grad-hero); color: #ffffff; }
.hero::before { background: radial-gradient(ellipse 60% 50% at 50% 120%, rgba(255,214,23,.14), transparent); }
.hero h1 { color: #ffffff; }
.hero-eyebrow { background: color-mix(in srgb, var(--brass) 16%, transparent); border-color: color-mix(in srgb, var(--brass) 42%, transparent); color: var(--brass); }
.hero h1 em { color: var(--brass); }
.hero-sub { color: var(--cream-d); }
.hero-proof { color: #a9c2de; }
.hero-proof span { color: var(--brass); }

/* Secondary hero CTA: translucent outline on the dark band */
.hero-ctas .btn-ghost {
  border: 1px solid rgba(255,255,255,.25);
  color: #eaf2fc;
  background: rgba(255,255,255,.06);
}
.hero-ctas .btn-ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }

.trust { color: #bbbbbb; }
.trust-item-label { color: #999999; }
.trust-item-value { color: #ffffff; }

.cta-section p { color: #bbbbbb; }
.cta-note { color: #888888; }
/* Contact link sits on the dark CTA band — oxblood loses legibility there,
   so it picks up the brass accent reserved for dark surfaces. */
.cta-section .btn-link { color: var(--brass-l); }
.cta-section .btn-link:hover { color: #bbbbbb; }

footer { color: #999999; }
.footer-inner { border-bottom-color: #111111; }
.footer-brand p, .footer-reg { color: #888888; }
.footer-brand span { color: #ffffff !important; }
.footer-col h4 { color: #bbbbbb; }
.footer-col ul a { color: #999999; }
.footer-col ul a:hover { color: #ffffff; }
.footer-bottom { color: #888888; }

/* 5 — Brand mark + feature icons pick up the accent colours */
.nav-brand svg path { stroke: #111111; }
.nav-brand svg path:nth-of-type(2) { stroke: #888888; }
.nav-brand svg circle { fill: #111111; }
.footer-brand svg path { stroke: #bbbbbb; }
.footer-brand svg circle { fill: #bbbbbb; }
.feature-icon svg { stroke: #888888 !important; }

/* 6 — Section eyebrows stay oxblood on the light sections (inherited via --amber) */

/* KAN-344 — classes replacing inline style="" attributes on the public
   marketing pages (identity-preserving; tokens per brand-tokens.css). */
.faq-list{max-width:720px;margin:0 auto;text-align:left}
.faq-row{border-top:1px solid var(--line);padding:20px 0}
.faq-row-both{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0}
.faq-q{font-size:1rem;font-weight:600;color:var(--navy);margin-bottom:8px}
.faq-q-fg{font-size:1rem;font-weight:600;color:var(--fg);margin-bottom:8px}
.faq-a{color:var(--muted);line-height:1.7}
.t-muted{color:var(--muted)}
.bg-panel{background:var(--panel)}
.mt-10{margin-top:10px}
.row-icon{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.link-amber{color:var(--amber);text-decoration:underline}
.btn-link{background:none;border:none;padding:0;color:var(--amber);cursor:pointer;font-size:inherit;text-decoration:underline}
.chip-cream{font-size:14px;font-weight:700;color:var(--cream)}
.price-lg{font-size:28px;padding-top:8px}
.note-a{font-size:13px;color:var(--muted);margin-top:28px}
.note-b{font-size:12px;color:var(--muted);margin-top:24px;max-width:720px;margin-left:auto;margin-right:auto}
.note-c{font-size:12px;color:var(--muted);margin-top:16px}
.clickable{cursor:pointer}
.pb-0{padding-bottom:0}
.ovf-x{overflow-x:auto}

/* KAN-448 — guide links in the nav, on every public page (and /de). Kept here
   (shared, render-blocking) so the menu is present site-wide. */
.nav-menu{display:flex;align-items:center;gap:8px}
.nav-menu a{font-family:Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg2);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:8px 14px;transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
.nav-menu a:hover{background:var(--amber);border-color:var(--amber);color:#ffffff}
.nav-menu a.active,.nav-menu a[aria-current="page"]{background:var(--amber);border-color:var(--amber);color:#ffffff}
@media (max-width:1040px){.nav-menu{gap:6px}.nav-menu a{font-size:10px;letter-spacing:.04em;padding:7px 11px}}
@media (max-width:768px){
  .nav{flex-wrap:wrap;height:auto;row-gap:6px;padding:8px 20px}
  .nav-brand{order:1}.nav-links{order:2}
  .nav-menu{order:3;width:100%;gap:8px;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .nav-menu a{font-size:11px;letter-spacing:.06em}
}

/* KAN-448 — DEPARTURES board component (home hero + per-role board sections),
   redesigned per design-brief wireframe 6a "The Ledger": ink on paper, hard
   1–2px rules, zero border-radius, no tiles, no glow — the next-departing row
   inverts to solid ink and carries the only live seconds. Status is glyph /
   weight / inversion, never hue. */
.board{--bd-ink:#eaf2fc;--bd-paper:#082a55;--bd-rule:rgba(233,242,252,.14);--bd-mid:#b9d4f0;--bd-faint:#7fa3cc;--bd-ghost:#5f80ab;
  position:relative;background:linear-gradient(165deg,#062a5c,#0d3a7a 52%,#1655a8);color:var(--bd-ink);border:1px solid #041e42;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.45);font-family:Arial,Helvetica,sans-serif}
.board-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:2px solid var(--brass)}
.board-title{font-family:Arial,monospace;font-size:14px;font-weight:700;letter-spacing:.32em;color:var(--brass)}
.board-status{display:flex;justify-content:space-between;align-items:center;padding:7px 18px;border-bottom:1px solid var(--bd-ink);font-family:Arial,monospace;font-size:9px;letter-spacing:.14em;color:var(--bd-mid)}
.board-status .live-dot{margin-right:7px;display:inline-block;vertical-align:middle}
.board-obcount b{color:var(--brass);font-weight:700}
.live-dot{width:8px;height:8px;border-radius:0;background:#bbbbbb;animation:tsiLive 1.6s ease-in-out infinite}
.board .live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:tsiLive 1.6s ease-in-out infinite}
/* stream tabs (DEPARTURES / ARRIVALS) + role lens (VIEW AS) — active inverts to ink */
.board-ctrl{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:9px 18px;border-bottom:1px solid var(--bd-ink)}
.board-ctrl:empty{display:none}
.board-tab,.board-lens{font-family:Arial,monospace;font-weight:700;letter-spacing:.12em;background:transparent;border:1px solid #999;border-radius:0;color:var(--bd-mid);cursor:pointer}
.board-tab{font-size:10px;padding:4px 10px}
.board-lens{font-size:9px;padding:3px 8px;border-color:#bbb}
.board-tab.is-on,.board-lens.is-on{background:var(--bd-ink);border-color:var(--bd-ink);color:var(--bd-paper)}
.board-lens-label{margin-left:auto;font-family:Arial,monospace;font-size:8.5px;font-weight:700;letter-spacing:.12em;color:var(--bd-faint)}
.board-cols{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:14px;padding:6px 18px;border-bottom:1px solid var(--bd-ink);font-family:Arial,monospace;font-size:8px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bd-faint)}
.board-cols span:last-child{text-align:right}
.board-rows{position:relative;min-height:250px} /* reserve 5 rows — avoid CLS before JS populates */
.board-row{display:grid;grid-template-columns:110px minmax(0,1fr) auto;align-items:center;gap:14px;padding:11px 18px;border-bottom:1px solid var(--bd-rule)}
.board-cell-date{font-family:Arial,monospace;font-size:12px;color:var(--bd-mid);white-space:nowrap}
.board-row-label{font-size:13.5px;font-weight:700;line-height:1.3;padding-right:16px}
/* countdowns are gold on every upcoming row (Blue × DOSSIER board) */
.board-cell-count{font-family:Arial,monospace;font-size:28px;font-weight:700;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--brass);line-height:1}
.board-cell-count small{font-size:12px;color:var(--brass);opacity:.8;letter-spacing:.06em}
.board-cell-count.is-live{font-size:34px}
.board-cell-count.is-live small{color:var(--brass);opacity:.8}
.board-cell-status{font-family:Arial,monospace;font-size:10px;font-weight:700;letter-spacing:.1em;text-align:right;white-space:nowrap;color:var(--green)}
/* passed obligations carry a green rail + grey out, but stay legible — IN FORCE, never gone */
.board-row.is-past{border-left:3px solid var(--green)}
.board-row.is-past .board-row-label,.board-row.is-past .board-cell-date{color:var(--bd-ghost)}
/* the next departure keeps a subtle emphasis + gold rail (no inversion) */
.board-row.is-next{background:rgba(255,255,255,.05);border-left:3px solid var(--brass)}
.board-row.is-next .board-row-label{font-size:14px}
.board-legend{display:flex;gap:16px;flex-wrap:wrap;padding:8px 18px;border-top:2px solid var(--brass);font-family:Arial,monospace;font-size:8.5px;font-weight:700;letter-spacing:.14em;color:var(--bd-mid)}
.board-legend span:first-child{color:var(--brass)}
@keyframes tsiLive{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(17,17,17,.5)}50%{opacity:.5;box-shadow:0 0 0 5px rgba(17,17,17,0)}}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none !important}}
/* Per-role board section (dark band, board centred) */
.board-section{background:var(--grad-hero);padding:60px 40px}
.board-section .board-section-inner{max-width:900px;margin:0 auto}
.board-section .board-section-head{text-align:center;margin-bottom:28px}
.board-section .board-section-eyebrow{font-family:Arial,monospace;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-l);margin-bottom:10px}
.board-section h2{font-family:Arial,serif;font-size:clamp(22px,3vw,30px);font-weight:800;color:var(--cream);letter-spacing:-.01em;margin:0}
.board-section .board-section-sub{font-size:14px;color:var(--cream-d);margin-top:10px;max-width:640px;margin-left:auto;margin-right:auto}
.board-section .board-section-cta{text-align:center;margin-top:24px}
.board-section .board-section-link{display:inline-block;color:var(--brass-l);font-weight:700;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.board-section .board-section-link:hover{color:var(--cream)}
@media (max-width:768px){.board-section{padding:44px 16px}.board-head,.board-status,.board-ctrl,.board-cols,.board-row,.board-legend{padding-left:14px;padding-right:14px}}
@media (max-width:560px){
  .board-cols{grid-template-columns:1fr;gap:0}
  .board-cols span:nth-child(2),.board-cols span:last-child{display:none}
  .board-row{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"date count" "label label";row-gap:8px;gap:10px}
  .board-cell-date{grid-area:date}
  .board-row-label{grid-area:label;font-size:13px;padding-right:0}
  .board-cell-count,.board-cell-status{grid-area:count;justify-self:end}
  .board-lens-label{margin-left:0;width:100%}
}