/* ---- colors ---- */
:root {
  /* ── Brand primitives (sampled from assets/logo-full.jpg) ───────────────── */
  --brand-teal: #104861;
  --brand-teal-light: #17618a;
  --brand-teal-dark: #0a2431;
  --brand-orange: #ea7133;
  --brand-orange-light: #f59255;
  --brand-orange-dark: #b8541c;
  --brand-paper: #fffefa;

  /* ── Action / accent ───────────────────────────────────────────────────────
     One action color, exactly as the chassis demands: Consulting Teal.
     Orange is the MARK color — accent, never a second "click me" signal. */
  --color-primary: var(--brand-teal);
  --color-primary-focus: var(--brand-teal-light);
  --color-primary-on-dark: var(--brand-orange-light);
  --color-on-primary: #ffffff;
  --color-accent: var(--brand-orange);
  --color-accent-ink: var(--brand-orange-dark);

  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --color-canvas: #ffffff;
  --color-canvas-parchment: #f4f6f7;
  --color-surface-pearl: #fafbfc;
  --color-surface-tile-1: #104861;
  --color-surface-tile-2: #13506b;
  --color-surface-tile-3: #0d3f56;
  --color-surface-void: #0a2431;
  --color-surface-nav: #0a2431;
  --color-surface-chip-translucent: #d2d7da;

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --color-ink: #1d1d1f;
  --color-body: #1d1d1f;
  --color-body-on-dark: #ffffff;
  --color-body-muted-on-dark: #c7d5dd;
  --color-ink-muted-80: #333333;
  --color-ink-muted-48: #7a7a7a;

  /* ── Hairlines ────────────────────────────────────────────────────────── */
  --color-divider-soft: #f0f2f3;
  --color-hairline: #e0e4e6;
  --color-hairline-alpha: rgba(0, 0, 0, 0.08);

  /* ── Semantic status (advisory reporting only — see readme) ────────────── */
  --color-status-positive: #1c7a54;
  --color-status-caution: var(--brand-orange-dark);
  --color-status-critical: #b3261e;
}

/* ---- spacing ---- */
:root {
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 17px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 80px;

  --container-text: 980px;
  --container-wide: 1440px;
  --gutter-grid: 22px;

  --nav-height: 44px;
  --subnav-height: 52px;
  --sticky-bar-height: 64px;
  --touch-min: 44px;
}

/* ---- shapes ---- */
:root {
  --radius-none: 0px;
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 18px;
  --radius-pill: 9999px;
  --radius-full: 50%;

  --border-hairline: 1px solid var(--color-hairline);
  --border-hairline-alpha: 1px solid var(--color-hairline-alpha);
  --border-ring-soft: 3px solid var(--color-divider-soft);
}

/* ---- site.css ---- */
/* Dr. J Consulting — nur Zustände (Hover/Fokus) und Breakpoints.
   Das Grundaussehen steht als Inline-Stil direkt an den Elementen. */

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 112px; }
h1, h2, h3 { hyphens: none; overflow-wrap: break-word; font-optical-sizing: auto; }
main p { max-width: 68ch; }
main [style*="text-align: center"] p { margin-left: auto; margin-right: auto; }

/* Einblenden beim Scrollen: nur Deckkraft + 8px, 600ms */
[data-reveal="wait"] { opacity: 0; transform: translateY(12px); }
[data-reveal="in"] { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(0.22, 1, 0.36, 1), transform .7s cubic-bezier(0.22, 1, 0.36, 1); }
@media print { [data-reveal] { opacity: 1 !important; transform: none !important; } }

:focus-visible { outline: 2px solid #E97132; outline-offset: 2px; }
[data-header] :focus-visible { outline-color: #FFFFFF; }

/* Textlinks im Fließtext: Unterstrich ist Pflicht */
[data-link] { color: #104861; text-decoration: underline; text-underline-offset: 2px; transition: color .45s cubic-bezier(0.22, 1, 0.36, 1); }
[data-link]:hover { color: #E97132; }

/* Buttons */
[data-btn] { transition: background-color .45s cubic-bezier(0.22, 1, 0.36, 1), color .45s cubic-bezier(0.22, 1, 0.36, 1), border-color .45s cubic-bezier(0.22, 1, 0.36, 1); }
[data-btn] [data-arrow] { display: inline-block; transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1); }
[data-btn]:hover [data-arrow] { transform: translateX(4px); }
[data-btn="primary"]:hover { background-color: #CE5D1F; border-color: #CE5D1F !important; }
[data-btn="primary"]:active { background-color: #B85219; }
[data-btn="secondary"]:hover { background-color: #104861; color: #FFFFFF; }
[data-btn="secondary"]:active { background-color: #0B3448; }
[data-btn="secondary-light"]:hover { background-color: #FFFFFF; color: #104861; }

/* Navigation */
[data-navlink] { transition: border-color .45s cubic-bezier(0.22, 1, 0.36, 1), color .45s cubic-bezier(0.22, 1, 0.36, 1); }
[data-navlink]:hover:not([data-active="true"]) { border-bottom-color: rgba(255,255,255,.55); }
[data-header] { border-bottom: 1px solid rgba(255,255,255,.12); }
[data-langlink]:hover { text-decoration: underline; }

/* Formularfelder */
[data-field]:hover { border-color: #104861; }
[data-field]:focus { border-color: #104861; outline: 2px solid #E97132; outline-offset: 1px; }

@media (max-width: 1100px) {
  [data-cols="4"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-navlist] { display: none !important; }
  [data-utilitylist] { display: none !important; }
  [data-navdivider] { display: none !important; }
  [data-burger] { display: inline-flex !important; }
}
@media (max-width: 900px) {
  [data-cols] { grid-template-columns: 1fr !important; }
  [data-hero-grid] { grid-template-columns: 1fr !important; gap: 48px !important; }
  [data-two-col] { grid-template-columns: 1fr !important; }
}
@media (max-width: 734px) {
  [data-section] { padding-top: 64px !important; padding-bottom: 64px !important; }
  [data-container] { padding-left: 20px !important; padding-right: 20px !important; }
  [data-footer-grid] { grid-template-columns: 1fr !important; justify-items: center !important; text-align: center; gap: 24px !important; }
  [data-footer-logo] { order: 1; }
  [data-footer-imprint] { order: 2; }
  [data-footer-lang] { order: 3; justify-self: center !important; }
}
@media (max-width: 1000px) {
  [data-h1] { font-size: 40px !important; line-height: 1.12 !important; letter-spacing: -.6px !important; }
}
@media (max-width: 640px) {
  [data-h1] { font-size: 32px !important; }
  [data-h2] { font-size: 26px !important; }
  [data-lead] { font-size: 20px !important; }
  [data-wordmark] { font-size: 16px !important; letter-spacing: .04em !important; }
}
@media (max-width: 600px) {
  [data-btnrow] { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  [data-btn] { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-btn]:hover [data-arrow] { transform: none; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}