/* =========================================================================
   fokusnuss.de — site overrides on top of _shared/css/base.css.
   Same multi-page primitives as TCW (most are reused unchanged), with a
   Fokusnuss-purple accent and a slightly more energetic hero.
   ========================================================================= */

:root {
  /* Fokusnuss violet — distinct from K8Box/TCW palette,
     close enough to spectrum.k8box.io to feel related. */
  --accent: #7c3aed;
  --accent-soft: #9b5cff;
  --accent-glow: rgba(124, 58, 237, 0.18);
  --accent-tint: rgba(124, 58, 237, 0.07);
  --accent-paper: #f6f2ff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent-glow: rgba(155, 92, 255, 0.24);
    --accent-tint: rgba(255, 255, 255, 0.04);
    --accent-paper: #14101e;
  }
}

/* ----- brand logo (header) --------------------------------------------- */

/* The Fokusnuss logo SVG is single-colour and uses `fill="currentColor"`,
   so the brand link's `color` drives the rendered glyph colour. We give
   it the accent so the brand reads in violet across the site, and let
   the same currentColor flip through dark mode automatically.

   Keeping the wordmark + nut emblem as one combined SVG (instead of
   separating them) preserves the original brand integrity. */

.brand--logo {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0;
  border-bottom: none;
  color: var(--accent);
  animation: brand-fade 280ms ease both;
}

.brand--logo img,
.brand--logo svg {
  height: 100%;
  width: auto;
  display: block;
  transition: filter 220ms ease, transform 220ms ease;
}

.brand--logo:hover img,
.brand--logo:hover svg {
  filter: drop-shadow(0 2px 8px var(--accent-glow));
  transform: translateY(-1px);
}

@keyframes brand-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .brand--logo,
  .brand--logo:hover img {
    animation: none;
    transform: none;
  }
}

@media (max-width: 720px) {
  .brand--logo { height: 28px; }
}

@media print {
  .brand--logo img {
    filter: grayscale(1) contrast(1.1);
  }
}

/* ----- main spacing ----------------------------------------------------- */

main {
  padding-bottom: 80px;
}

.page-intro {
  padding: 64px 0 32px;
}

.page-intro h1 {
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  font-weight: 800;
}

.page-intro .lede {
  font-size: 19px;
  color: var(--text-soft);
  max-width: 60ch;
  margin: 0;
}

/* `.page-section` vertical padding now lives in `_shared/css/base.css`
   (80px at desktop, 48px on mobile <720px). We keep only the per-section
   top border so /trainings/ and friends still read like a stack of
   distinct sections. */
.page-section {
  border-top: 1px solid var(--border);
}
.page-section:first-of-type {
  border-top: none;
}
.page-section h2 {
  font-size: 28px;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  font-weight: 700;
}
.page-section h3 {
  font-size: 18px;
  margin: 24px 0 8px;
  font-weight: 600;
}

.page-section--paper {
  background: var(--accent-paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  margin: 32px 0;
}

/* ----- hero (energetic) ------------------------------------------------ */

.hero--home {
  padding: 96px 0 56px;
}

.hero--home .eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.hero--home h1 {
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0 0 22px;
  font-weight: 800;
}

.hero--home h1 .accent {
  color: var(--accent);
  position: relative;
  white-space: nowrap;
}

.hero--home .lede {
  font-size: 19px;
  color: var(--text-soft);
  max-width: 56ch;
  margin: 0 0 24px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.cta-primary,
.cta-secondary {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  border-bottom: none;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.cta-primary {
  background: var(--accent);
  color: white;
}

.cta-secondary {
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: var(--bg-elevated);
}

.cta-primary:hover,
.cta-secondary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ----- training topic grid --------------------------------------------- */

.training-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.training-card {
  padding: 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.training-card h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.training-card .meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.training-card p {
  font-size: 14px;
  color: var(--text-soft);
  margin: 0;
}

.training-card ul {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--text-soft);
}

/* ----- contact form (same as TCW) ---------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 32px 0;
}
@media (max-width: 720px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-form { display: grid; gap: 14px; }
.contact-form label { font-size: 13px; font-weight: 600; color: var(--text-soft); }
.contact-form input,
.contact-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form button {
  align-self: start;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 10px 20px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.contact-side h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.contact-side p { font-size: 14px; color: var(--text-soft); }

/* ----- legal-text typography (same as TCW) ----------------------------- */

.legal-text { max-width: 70ch; }
.legal-text h2 { font-size: 22px; margin-top: 32px; }
.legal-text h3 { font-size: 16px; margin-top: 20px; font-weight: 600; }
.legal-text p,
.legal-text li {
  font-size: 15px;
  color: var(--text-soft);
  line-height: 1.65;
}
.legal-text dl { margin: 12px 0; }
.legal-text dt { font-weight: 600; color: var(--text); }
.legal-text dd { margin: 0 0 8px 0; color: var(--text-soft); }

/* ----- footer (same as TCW) -------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 80px;
  padding: 48px 0 32px;
  background: var(--bg-muted);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.footer-col h4 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.footer-col ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid; gap: 8px;
}
.footer-col a {
  font-size: 14px;
  color: var(--text-soft);
  border-bottom: none;
}
.footer-col a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.footer-brand { font-weight: 700; font-size: 16px; margin: 0 0 8px; }
.footer-tagline {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  max-width: 30ch;
}
.footer-trust {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-soft);
}

.footer-trust__certs {
  flex: 1;
  min-width: 0;
}

.footer-trust__exali {
  display: inline-flex;
  flex-shrink: 0;
  /* Pin Exali to the right whether or not the .footer-trust__certs
     sibling is present — see thechameleonway.com/styles/site.css. */
  margin-left: auto;
}

.footer-trust__exali img {
  width: 64px;
  height: 64px;
  display: block;
}

/* ----- Exali trust card (larger variant on /ueber) --------------------- */

.exali-trust-card {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
}

.exali-trust-card__seal {
  flex-shrink: 0;
}

.exali-trust-card__seal img {
  width: 96px;
  height: 96px;
  display: block;
}

.exali-trust-card__copy h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.exali-trust-card__copy p {
  margin: 0;
  font-size: 14px;
  color: var(--text-soft);
}

@media (max-width: 480px) {
  .exali-trust-card {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}

.footer-trust + .footer-meta {
  border-top: none;
  padding-top: 8px;
}

.footer-legal-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
  padding: 20px 0 12px;
  border-top: 1px solid var(--border);
}
.footer-legal-badges img {
  display: block;
  height: 64px;
  width: auto;
}
.footer-legal-badges + .footer-meta {
  border-top: none;
  padding-top: 8px;
}

.legal-page-intro {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.legal-page-intro__copy {
  flex: 1 1 360px;
  min-width: 0;
}
.legal-page-intro__badge {
  flex: 0 0 auto;
}
.legal-page-intro__badge img {
  display: block;
  height: 220px;
  width: auto;
}
@media (max-width: 720px) {
  .legal-page-intro__badge img {
    height: 180px;
  }
}

.footer-meta {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.footer-sep { color: var(--border-strong); }

/* ----- 404 (same as TCW) ----------------------------------------------- */

.error-404 {
  padding: 120px 0;
  text-align: center;
}
.error-404 .glyph {
  font-family: var(--font-mono);
  font-size: 96px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0 0 16px;
}
.error-404 h1 { font-size: 28px; margin: 0 0 12px; }
.error-404 p {
  color: var(--text-soft);
  max-width: 50ch;
  margin: 0 auto 24px;
}

/* ----- "Sascha on stage" — Lanxess-Arena callout ----------------------- */

.stage-callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  align-items: center;
}

.stage-callout .arena-glyph {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-tint);
  border: 1px solid var(--accent-glow);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
}

.stage-callout p {
  margin: 0;
  font-size: 14px;
  color: var(--text-soft);
}

.stage-callout strong { color: var(--text); }

/* ----- credential cards (Scrum + iSAQB on /ueber/) ---------------------- */

.cred-card {
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
}

.cred-card__lead {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--text-soft);
}

.cred-card__lead:last-child {
  margin-bottom: 0;
}

.cred-card__lead strong {
  color: var(--text);
  font-weight: 600;
}

.cred-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.cred-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--text-soft);
}

.cred-list__badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: var(--accent-tint);
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid var(--accent-glow);
  text-transform: uppercase;
  flex-shrink: 0;
  min-width: 56px;
  text-align: center;
}