/*
Theme Name: Finke Praxismarketing – Inclusive
Theme URI: https://finke-praxismarketing-1.lead.bummeltech.com/
Author: Finke Praxismarketing
Description: Barrierefreies, WCAG-AAA-orientiertes Custom-Theme (Inclusive Design) mit Hero-Slider, Leistungs-Karten, Partner-Logo-Marquee und 3D-/Tiefen-Effekten. Alle Inhalte im wp-admin pflegbar.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: finke-inclusive
*/

/* =========================================================================
   DESIGN TOKENS  (ui-ux-pro-max: Accessible & Ethical, WCAG AAA)
   Farben werden in functions.php aus dem Customizer als Inline-Style
   überschrieben (Primär/Akzent). Hier stehen die Defaults.
   ========================================================================= */
:root {
  /* Farb-Basis */
  --color-primary: #0F172A;        /* navy */
  --color-on-primary: #FFFFFF;
  --color-secondary: #334155;
  --color-accent: #0369A1;         /* CTA-Hintergrund */
  --color-accent-text: #0C4A6E;    /* Akzent als Text auf hell -> 7:1+ */
  --color-accent-strong: #075985;
  --color-background: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-foreground: #020617;     /* fast schwarz -> max. Kontrast */
  --color-muted: #E8ECF1;
  --color-muted-foreground: #334155;
  --color-border: #CBD5E1;
  --color-border-strong: #94A3B8;
  --color-destructive: #B91C1C;
  --color-success: #15803D;
  --color-ring: #0369A1;

  /* Typografie */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --fs-base: 1.125rem;   /* 18px – große, gut lesbare Basis */
  --lh-base: 1.7;
  --fs-h1: clamp(2.4rem, 5.5vw, 4.2rem);
  --fs-h2: clamp(1.9rem, 3.6vw, 2.9rem);
  --fs-h3: clamp(1.3rem, 2.2vw, 1.7rem);
  --fs-small: 0.95rem;

  /* Layout */
  --wrap: 1180px;
  --wrap-narrow: 820px;
  --gap: clamp(1rem, 2.5vw, 2rem);
  --section-y: clamp(3.5rem, 8vw, 7rem);
  --radius: 18px;
  --radius-sm: 12px;

  /* Tiefe / Schatten */
  --shadow-sm: 0 1px 2px rgba(2, 6, 23, .08);
  --shadow-md: 0 10px 30px -10px rgba(2, 6, 23, .25);
  --shadow-lg: 0 30px 60px -20px rgba(2, 6, 23, .35);
  --shadow-accent: 0 16px 40px -12px rgba(3, 105, 161, .45);

  /* Motion */
  --t-fast: 150ms;
  --t-mid: 250ms;
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* Touch */
  --touch: 44px;
}

/* =========================================================================
   RESET / BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-foreground);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, picture, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; font-weight: 700; color: var(--color-primary); letter-spacing: -.01em; }
h1 { font-size: var(--fs-h1); font-weight: 900; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { max-width: 68ch; }
a { color: var(--color-accent-text); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--color-accent-strong); }
ul, ol { padding-left: 1.3em; }
strong { font-weight: 700; }

/* Fokus: deutlich sichtbarer 3–4px Ring (Inclusive Design Pflicht) */
:focus-visible {
  outline: 4px solid var(--color-ring);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Auswahl */
::selection { background: var(--color-accent); color: #fff; }

/* Skip-Link */
.skip-link {
  position: absolute; left: 8px; top: -100px;
  background: var(--color-primary); color: #fff;
  padding: .9rem 1.4rem; border-radius: 10px; z-index: 1000;
  font-family: var(--font-mono); font-weight: 600;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 8px; color:#fff; }

/* sr-only */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =========================================================================
   LAYOUT HELFER
   ========================================================================= */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }
.section--muted { background: var(--color-muted); }
.section--dark { background: var(--color-primary); color: #E2E8F0; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: #CBD5E1; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono); font-size: .8rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-accent-text);
  padding: .4rem .8rem; border: 2px solid var(--color-accent);
  border-radius: 999px; background: rgba(3,105,161,.06);
}
.section--dark .eyebrow { color: #7DD3FC; border-color: #38BDF8; background: rgba(56,189,248,.1); }
.section-head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section-head p { margin-top: 1rem; font-size: 1.18rem; color: var(--color-muted-foreground); }
.section--dark .section-head p { color: #CBD5E1; }
.lead { font-size: 1.25rem; }

/* =========================================================================
   BUTTONS  (44px Touch-Targets, klare Fokus-/Hover-States)
   ========================================================================= */
.btn {
  --btn-bg: var(--color-accent);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: var(--touch);
  padding: .85rem 1.6rem;
  font-family: var(--font-mono); font-weight: 600; font-size: 1rem; letter-spacing: .01em;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 2px solid transparent; border-radius: 12px;
  cursor: pointer; text-decoration: none;
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), background var(--t-fast) var(--ease);
  box-shadow: var(--shadow-accent);
  will-change: transform;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 22px 48px -12px rgba(3,105,161,.6); color:#fff; }
.btn:active { transform: translateY(-1px); }
.btn .icon { width: 20px; height: 20px; }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--color-primary);
  border-color: var(--color-border-strong); box-shadow: none;
}
.section--dark .btn--ghost { --btn-fg:#fff; border-color: rgba(255,255,255,.45); }
.btn--ghost:hover { --btn-bg: var(--color-primary); --btn-fg:#fff; box-shadow: var(--shadow-md); }
.section--dark .btn--ghost:hover { --btn-bg:#fff; --btn-fg: var(--color-primary); }
.btn--lg { font-size: 1.08rem; padding: 1.05rem 2rem; }
.btn--block { width: 100%; }

/* =========================================================================
   MOTION-PRÄFERENZ
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none !important; }
  .tilt { transform: none !important; }
}