/* ═══════════════════════════════════════════════════════════════════════════
   tom.adebahr.de — Designschicht 2026-11 („frischer, moderner")

   Wird auf JEDER Seite direkt nach dem seiteneigenen <style> geladen und
   überschreibt es gezielt. Nur Gestaltung — kein Text, kein Inhalt.
   Farben unverändert aus der bestehenden Seite (Onyx, Lemon Lime, Coral,
   Olive, Peach). Kopfleiste: sticky, aber deckend — kein Blur, keine Transparenz.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --accent:  #C3EB22;
  --coral:   #F25F5C;
  --olive:   #71816D;
  --peach:   #FFE5D9;
  --bg:      #10100F;
  --bg-deep: #0B0B0A;
  --surface: #181817;
  --surface2:#202020;
  --border:  rgba(113,129,109,.28);
  --text:    #FFFFFF;
  --muted:   #A3AE9F;   /* vorher #71816D — 4,3:1 reichte nicht für WCAG AA */
  --body:    #C9D0C6;
  --ink:     #10100F;
  --mono:    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --r-lg:    28px;
  --r-md:    22px;
}

body { font-size: 17px; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ─── KOPFLEISTE: sticky, deckend, volle Breite ─────────────────────────── */
body > nav {
  position: sticky !important;
  top: var(--wec-bar, 0px) !important;
  left: auto !important; right: auto !important;
  transform: none !important;
  width: 100% !important; max-width: none !important;
  z-index: 100;
  background: var(--bg) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--border);
}
body > nav.scrolled { top: var(--wec-bar, 0px) !important; }
body > nav .nav-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 14px 32px;
  background: var(--bg) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
.nav-links a { font-size: .9rem; color: #D6DCD3; white-space: nowrap; }
@media (max-width: 1180px) and (min-width: 961px) {
  .nav-links a { font-size: .82rem; padding: 8px 9px; }
  body > nav .nav-inner { padding-left: 24px; padding-right: 24px; }
}
.nav-links a:hover { color: var(--accent); background: transparent; }
.lang-switch { background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.lang-btn { border-radius: 999px; border: 0; font-family: var(--mono); letter-spacing: .04em; color: var(--muted); }
.lang-btn.active { background: var(--accent); color: var(--ink); border: 0; }
.nav-cta, .mobile-cta {
  background: var(--accent) !important; color: var(--ink) !important;
  font-weight: 700; font-size: .9rem; padding: 11px 22px;
}
.nav-cta::before, .mobile-cta::before { background: rgba(16,16,15,.55); }
.nav-cta:hover, .mobile-cta:hover { box-shadow: 0 6px 24px rgba(195,235,34,.35); }
.nav-back { color: #D6DCD3; }

/* Inhalte lagen unter der fixen Leiste und brauchten Polster — jetzt im Fluss */
#hero { min-height: 0; padding: 72px 0 80px; }
.lp-hero { padding: 72px 0 56px; }
.hub-hero { padding: 72px 0 40px; }
main:has(> .page-badge) { padding-top: 64px; }

/* ─── RASTER ──────────────────────────────────────────────────────────── */
.container-wide, #hero .container, section > .container { max-width: 1280px; padding-left: 32px; padding-right: 32px; }
.lp-section .container, .lp-hero .container { max-width: 820px; }

/* ─── EYEBROWS: Mono, Lime, ohne Rahmen ───────────────────────────────── */
.badge, .section-tag, .hero-badge, .page-badge,
.lp-definition-label, .lp-related-title, .cv-section-title,
.imprint-section-title, .article-card-tag {
  font-family: var(--mono) !important;
  font-size: .8rem !important; font-weight: 500 !important;
  letter-spacing: .1em !important; text-transform: uppercase;
  color: var(--accent) !important;
  border: 0 !important; background: transparent !important;
  padding: 0 !important; border-radius: 0 !important;
}
.badge::before { background: var(--accent); box-shadow: none; }

/* ─── TYPOGRAFIE ──────────────────────────────────────────────────────── */
.hero-headline { font-size: clamp(2.75rem, 6vw, 5.25rem); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; }
.section-title, .story-headline, .contact-headline {
  font-size: clamp(2.1rem, 4vw, 3.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em;
}
.lp-h1, .hub-h1, main:has(> .page-badge) h1 {
  font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; line-height: 1.04; letter-spacing: -.035em;
}
.lp-h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -.025em; }
.hero-desc { font-size: 1.15rem; color: var(--body); max-width: 620px; }
.lp-lead, .hub-lead { font-size: 1.2rem; color: var(--body); }
.lp-text, .story-text, .about-text, .section-subtitle, .service-desc,
.lp-pillar-desc, .lp-step-desc, .stack-desc { color: var(--body); }
.lp-text { font-size: 1.02rem; }

/* Abschnittsköpfe linksbündig statt zentriert */
.section-header { text-align: left; margin-bottom: 48px; }
.section-subtitle { margin-left: 0; margin-right: 0; font-size: 1.05rem; }

/* ─── SCHALTFLÄCHEN ───────────────────────────────────────────────────── */
.btn { background: transparent; }
.btn-primary { background: var(--accent); color: var(--ink); font-weight: 700; padding: 15px 30px; font-size: .95rem; }
.btn-primary:hover { box-shadow: 0 10px 28px rgba(195,235,34,.35); }
.btn-outline, .btn-secondary { border-color: rgba(255,255,255,.3); padding: 15px 30px; font-size: .95rem; font-weight: 600; }
.btn-outline:hover, .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* ─── HERO ────────────────────────────────────────────────────────────── */
.hero-inner { grid-template-columns: 1.25fr 1fr; gap: 64px; }
.hero-meta-item, .hero-connect { color: var(--muted); }
.hero-photo-wrap { max-width: 440px; }
.hero-photo-bg { display: none; }
.hero-photo { border-radius: 32px; border: 1px solid var(--border); background: var(--surface); }
.hero-photo img { filter: none; }
.floating-tag {
  background: var(--surface); border: 1px solid rgba(195,235,34,.45);
  border-radius: 16px; padding: 10px 16px; font-size: .85rem;
  backdrop-filter: none; box-shadow: 0 16px 40px rgba(0,0,0,.4);
}
.floating-tag::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; }
.tag-1 { background: var(--peach); color: var(--ink); border-color: transparent; }
.tag-1::before { background: var(--ink); }
.stat-chip { background: var(--surface); border-radius: 18px; padding: 12px 16px; box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.stat-chip .num { color: var(--accent); }
.stat-chip .lbl { color: var(--muted); }
.social-icon { border-radius: 50%; }

/* Themenband */
.marquee-wrap { background: var(--bg-deep); padding: 20px 0; }
.marquee-item { color: #D6DCD3; text-transform: none; letter-spacing: 0; font-weight: 600; }
.marquee-dot { color: var(--accent); }

/* ─── ABSCHNITTE ──────────────────────────────────────────────────────── */
section { padding: 112px 0; }

/* Leistungen als Bento: groß in Lime, unten Peach */
.services-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  border: 0; border-radius: 0; overflow: visible; counter-reset: svc;
}
.service-card, .inspire-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 32px;
  transition: transform .2s ease, border-color .2s ease;
}
.service-card:hover { background: var(--surface); transform: translateY(-3px); border-color: rgba(195,235,34,.55); }
.service-card-top { display: none; }
.service-card::before {
  counter-increment: svc; content: '0' counter(svc);
  display: block; margin-bottom: 18px;
  font-family: var(--mono); font-size: .85rem; color: var(--accent);
}
.service-name { font-size: 1.45rem; font-weight: 700; letter-spacing: -.01em; }
.service-desc { font-size: 1rem; }
.service-link { color: var(--accent); font-size: .92rem; }
.services-grid > .service-card:first-child {
  grid-column: span 2; background: var(--accent); color: var(--ink); border-color: transparent; padding: 40px;
}
.services-grid > .service-card:first-child::before,
.services-grid > .service-card:first-child .service-desc,
.services-grid > .service-card:first-child .service-link { color: var(--ink); }
.services-grid > .service-card:first-child .service-name { font-size: 2.25rem; font-weight: 800; letter-spacing: -.02em; }
.services-grid > .service-card:first-child .service-desc { font-size: 1.12rem; max-width: 560px; }
.inspire-card { grid-column: 1 / -1; background: var(--peach); color: var(--ink); border-color: transparent; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 24px; }
.inspire-card > div { flex: 1 1 420px; }
.inspire-title { font-size: 1.8rem; letter-spacing: -.02em; }
.inspire-sub { color: #3A3A37; font-size: 1.02rem; margin-bottom: 0; }
.inspire-card .btn-primary { background: var(--ink); color: #FFFFFF; margin-top: 0 !important; }

/* Zeitreise in Peach */
#story { background: var(--peach); color: var(--ink); border-top: 0 !important; }
#story .section-tag, #story .milestone-year { color: #4A5646 !important; }
#story .section-title .accent-text, #story .story-headline .accent-text { color: var(--ink); text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 4px; text-underline-offset: 6px; }
#story .story-text, #story .section-subtitle, #story .milestone-sub, #story .decade-label { color: #3A3A37; }
#story .milestone-dot { background: var(--ink); box-shadow: none; }
#story .milestone-vert { background: rgba(16,16,15,.2); }
#story .decade-card { background: #FFFFFF; border-color: transparent; border-radius: var(--r-md); }
#story .decade-card:last-child { background: var(--ink); color: #FFFFFF; }
#story .decade-card:last-child .decade-num { color: var(--accent); }
#story .decade-card:last-child .decade-label { color: var(--muted); }
#story .decade-card:last-child .decade-tag { background: var(--surface2); color: #D6DCD3; }
#story .decade-num { color: var(--ink); font-size: 2.6rem; font-weight: 800; }
#story .decade-tag { background: var(--peach); border-color: transparent; color: var(--ink); }

/* Karten allgemein: größere Rundung, Lime beim Überfahren */
.stack-card, .decade-card, .about-card, .interest-item, .lifestyle-brand, .edu-item,
.lp-pillar, .lp-related-card, .lp-author, .article-card, .imprint-card, .contact-channel, .contact-location {
  border-radius: var(--r-md);
}
.stack-card:hover, .lp-pillar:hover, .lp-related-card:hover, .article-card:hover, .lifestyle-brand:hover {
  border-color: rgba(195,235,34,.55); background: var(--surface);
}
.stack-card { text-align: left; padding: 28px 26px; }
.stack-icon { justify-content: flex-start; }
.stack-badge { font-family: var(--mono); }

/* Kennzahlen */
.stats-banner { gap: 16px; border: 0; border-radius: 0; overflow: visible; }
.stats-item { border: 1px solid var(--border); border-radius: var(--r-md); text-align: left; }
.stats-num { color: var(--accent); font-weight: 800; }
.stats-label { color: var(--muted); }

/* Lebenslauf */
.cv-dot { box-shadow: none; }
.cv-period { font-family: var(--mono); font-size: .72rem; }
.lifestyle-topic { background: rgba(195,235,34,.08); border-color: rgba(195,235,34,.25); color: var(--accent); }
.lang-dot-on { background: var(--accent); }

/* Kontakt — ohne Formular, Mail und LinkedIn */
.contact-inner { max-width: 1280px; }
.contact-headline { font-size: clamp(2.6rem, 6vw, 4.75rem); line-height: 1; }
.contact-desc { color: var(--body); font-size: 1.1rem; max-width: 640px; }
.contact-channels { gap: 20px; }
.contact-channel { padding: 32px; }
.contact-channel:hover { border-color: var(--accent); background: var(--surface); }
.contact-channel-icon { background: var(--accent); color: var(--ink); }
.contact-channel:nth-child(2) .contact-channel-icon { background: var(--peach); }
.contact-channel-label { font-family: var(--mono); color: var(--muted); }
.contact-channel-value { font-size: 1.2rem; }
.contact-location-icon { background: rgba(195,235,34,.12); }

/* ─── UNTERSEITEN ─────────────────────────────────────────────────────── */
.lp-breadcrumb, .hub-breadcrumb { font-family: var(--mono); font-size: .78rem; color: var(--muted); }
.lp-definition {
  border: 1px solid rgba(195,235,34,.35) !important; border-radius: var(--r-md);
  background: var(--surface); padding: 32px 36px;
}
.lp-definition p { color: var(--body); }
.lp-pillar-icon { display: none; }
.lp-pillars { counter-reset: pil; }
.lp-pillar::before { counter-increment: pil; content: '0' counter(pil); display: block; margin-bottom: 14px; font-family: var(--mono); font-size: .8rem; color: var(--accent); }
.lp-pillar-title { font-size: 1.1rem; }
.lp-step-num { border-radius: 50%; background: var(--accent); color: var(--ink); border: 0; font-family: var(--mono); }
.lp-cta-banner { background: var(--peach); color: var(--ink); border: 0; border-radius: var(--r-lg); padding: 56px 48px; }
.lp-cta-banner p { color: #3A3A37; }
.lp-cta-banner .btn-primary { background: var(--ink); color: #FFFFFF; }
.lp-cta-banner .btn-secondary, .lp-cta-banner .btn-outline { color: var(--ink); border-color: var(--ink); }
.lp-cta-banner .btn-secondary:hover, .lp-cta-banner .btn-outline:hover { background: var(--ink); color: #FFFFFF; }
.lp-related-card-arrow { color: var(--accent); }
.article-card { overflow: hidden; }

/* ─── FUSS ────────────────────────────────────────────────────────────── */
footer { background: var(--bg-deep); padding: 48px 0; }
footer .footer-inner { max-width: 1280px; }
.footer-copy, .footer-links a { color: var(--muted); font-size: .85rem; }
.footer-links a:hover { color: var(--accent); }
.powered-by { background: var(--bg-deep); }
.powered-by-inner { max-width: 1280px; padding: 0 32px; }
.powered-by a { color: var(--muted); }

/* ─── MOBIL ───────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  body > nav .nav-inner { padding: 12px 16px; }
  .nav-links.open { top: calc(68px + var(--wec-bar, 0px)); background: var(--bg); align-items: stretch; }
  .nav-links.open > a { padding: 15px 4px; border-radius: 0; }
  .hero-inner { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .services-grid > .service-card:first-child, .inspire-card { grid-column: auto; }
  /* Hinweise am Porträt innerhalb des Bildes halten */
  .tag-1, .tag-2 { left: 12px; }
  .tag-3 { right: 12px; }
  .hero-stats { right: 12px; }
  .container-wide, #hero .container, section > .container { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 768px) {
  section { padding: 72px 0; }
  #hero { padding: 32px 0 56px; }
  .lp-hero, .hub-hero { padding: 40px 0 40px; }
  main:has(> .page-badge) { padding-top: 40px; }
  /* Masterprompt §4.4: Kacheln mobil als Swipe; die angeschnittene nächste Karte zeigt, dass es weitergeht */
  .services-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .services-grid::-webkit-scrollbar { display: none; }
  .services-grid > .service-card, .services-grid > .inspire-card { flex: 0 0 84%; scroll-snap-align: start; }
  .services-grid > .service-card:first-child { padding: 28px; }
  .services-grid > .service-card:first-child .service-name { font-size: 1.75rem; }
  .lp-cta-banner { padding: 40px 24px; }
  .contact-channels { grid-template-columns: 1fr; }
}