/* ============================================================
   Zahnarztpraxis de Graft – Design Tokens (V5)
   Ein Ort für alle Farben, Schriften, Radien, Abstände.
   CI: Teal #a2c2c4 · Charcoal #414e50 · Noto Sans
   Interaktives Teal #36696b erfüllt WCAG AA auf Weiß (Kontrast 6,3:1)
   ============================================================ */

:root {
  /* --- CI-Farben --- */
  --zdg-teal:        #a2c2c4;  /* CI-Teal, dekorativ (Flächen, Akzente) */
  --zdg-teal-int:    #36696b;  /* interaktiv: Links, Buttons (AA auf Weiß) */
  --zdg-teal-hover:  #2a5052;  /* Hover/Active */
  --zdg-teal-soft:   #eef4f4;  /* sehr helle Teal-Fläche */
  --zdg-teal-softer: #f6fafa;  /* Section-Hintergrund */
  --zdg-charcoal:    #414e50;  /* Footer, dunkle Flächen, H1/H2 */
  --zdg-ink:         #3a4547;  /* Überschriften-Text */
  --zdg-body:        #5c6566;  /* Fließtext (AA auf Weiß: 5,9:1) */
  --zdg-white:       #ffffff;
  --zdg-line:        #dde7e7;  /* Trennlinien, Card-Border */

  /* --- Typografie --- */
  --zdg-font: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --zdg-fs-body:  1.0625rem;   /* 17px */
  --zdg-lh-body:  1.7;
  --zdg-ls-head:  0.04em;      /* Headline letter-spacing (CI: uppercase + gesperrt) */

  /* --- Form --- */
  --zdg-radius-btn:  25px;     /* CI-Vorgabe Buttons */
  --zdg-radius-card: 14px;
  --zdg-radius-img:  10px;
  --zdg-shadow-card: 0 6px 24px rgba(65, 78, 80, 0.10);
  --zdg-shadow-card-hover: 0 12px 32px rgba(65, 78, 80, 0.16);

  /* --- Abstände --- */
  --zdg-section-pad: clamp(3rem, 7vw, 5.5rem);
  --zdg-gap: clamp(1.25rem, 3vw, 2rem);

  /* --- Mapping auf Kadence-Palette (Customizer-kompatibel) --- */
  --global-palette1: var(--zdg-teal-int);
  --global-palette2: var(--zdg-teal-hover);
  --global-palette3: var(--zdg-charcoal);
  --global-palette4: var(--zdg-ink);
  --global-palette5: var(--zdg-body);
  --global-palette6: var(--zdg-teal);
  --global-palette7: var(--zdg-teal-soft);
  --global-palette8: var(--zdg-teal-softer);
  --global-palette9: var(--zdg-white);
}

/* --- Basis-Typografie --- */
body.degraft-relaunch,
body.degraft-relaunch .entry-content {
  font-family: var(--zdg-font);
  font-size: var(--zdg-fs-body);
  line-height: var(--zdg-lh-body);
  color: var(--zdg-body);
}

body.degraft-relaunch h1,
body.degraft-relaunch h2,
body.degraft-relaunch h3,
body.degraft-relaunch h4 {
  font-family: var(--zdg-font);
  color: var(--zdg-ink);
  line-height: 1.25;
}

/* CI: H1/H2 versal + leicht gesperrt */
body.degraft-relaunch h1,
body.degraft-relaunch h2 {
  text-transform: uppercase;
  letter-spacing: var(--zdg-ls-head);
  font-weight: 700;
}
body.degraft-relaunch h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
body.degraft-relaunch h2 { font-size: clamp(1.35rem, 3vw, 1.85rem); }
body.degraft-relaunch h3 { font-size: clamp(1.15rem, 2.2vw, 1.35rem); font-weight: 600; }

/* CI: Tagline kursiv */
body.degraft-relaunch .zdg-tagline {
  font-style: italic;
  letter-spacing: 0.02em;
}

/* --- Links (AA) --- */
body.degraft-relaunch .entry-content a:not(.wp-block-button__link):not(.wp-element-button) {
  color: var(--zdg-teal-int);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color 0.2s ease;
}
body.degraft-relaunch .entry-content a:not(.wp-block-button__link):not(.wp-element-button):hover {
  color: var(--zdg-teal-hover);
}

/* --- Fokus-Stile (Barrierefreiheit, sichtbar & konsistent) --- */
body.degraft-relaunch a:focus-visible,
body.degraft-relaunch button:focus-visible,
body.degraft-relaunch input:focus-visible,
body.degraft-relaunch textarea:focus-visible,
body.degraft-relaunch select:focus-visible,
body.degraft-relaunch summary:focus-visible {
  outline: 3px solid var(--zdg-teal-int);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Auswahl --- */
body.degraft-relaunch ::selection {
  background: var(--zdg-teal);
  color: var(--zdg-charcoal);
}