/*
Theme Name: Praxisklinik Lumira
Theme URI: https://demo6.lead.bummeltech.com/
Author: Praxisklinik Lumira
Description: Clinical Serenity — Editorial Minimalism. Individuelles Premium-Theme für Praxisklinik Lumira, München.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: demo6-custom
*/

/* ==========================================================================
   Design Tokens — Clinical Serenity / Editorial Minimalism
   ========================================================================== */
:root{
  /* warm off-white base, deep graphite ink, muted rosé + sage accents (oklch) */
  --bg: oklch(97% 0.012 80);
  --bg-alt: oklch(94% 0.016 75);
  --bg-deep: oklch(90% 0.018 75);
  --ink: oklch(24% 0.015 260);
  --ink-soft: oklch(42% 0.012 260);
  --ink-faint: oklch(58% 0.01 260);

  --accent: oklch(52% 0.09 20);        /* gedecktes Rosé — Links, Icons, Linien */
  --accent-dark: oklch(42% 0.10 20);   /* CTA-Flächen, kräftiger Text-Einsatz */
  --accent-soft: oklch(90% 0.025 20);  /* zarte Flächen/Badges */

  --sage: oklch(46% 0.05 150);         /* Salbei — sekundäre CTAs, Häkchen */
  --sage-dark: oklch(38% 0.055 150);
  --sage-soft: oklch(91% 0.02 150);

  --line: oklch(88% 0.01 80);
  --line-strong: oklch(80% 0.012 80);
  --white: oklch(100% 0 0);

  --radius: 2px;
  --radius-lg: 4px;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --dur-fast: 220ms;
  --dur-med: 420ms;
  --dur-slow: 720ms;

  --font-display: 'Newsreader', 'Iowan Old Style', 'Georgia', serif;
  --font-body: 'Work Sans', -apple-system, 'Segoe UI', sans-serif;

  --container: 1280px;
  --gap: clamp(1rem, 3vw, 2.5rem);
}

/* ==========================================================================
   Reset / Base
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video{ max-width: 100%; height: auto; display: block; }
svg{ max-width: 100%; height: auto; }
.icon{ width: 1.4em; height: 1.4em; flex: 0 0 auto; vertical-align: middle; max-width: 32px; max-height: 32px; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; }
input, textarea, select{ font-family: inherit; font-size: 1rem; }

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 0.6em;
}
h1{ font-size: clamp(2.4rem, 3.2vw + 1.6rem, 4.6rem); font-weight: 500; }
h2{ font-size: clamp(1.9rem, 1.6vw + 1.4rem, 3rem); }
h3{ font-size: clamp(1.3rem, 0.6vw + 1.1rem, 1.7rem); }
h4{ font-size: clamp(1.05rem, 0.3vw + 1rem, 1.25rem); }
p{ margin: 0 0 1.1em; text-wrap: pretty; max-width: 62ch; }
p.lede{ font-size: clamp(1.1rem, 0.4vw + 1rem, 1.35rem); color: var(--ink-soft); font-family: var(--font-display); font-style: italic; font-weight: 400; }

.container{ width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.eyebrow{ display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-body); font-size: .8rem; letter-spacing: .06em; color: var(--accent-dark); font-weight: 600; margin-bottom: .9em; }
.eyebrow::before{ content:""; width: 22px; height: 1px; background: var(--accent-dark); display:inline-block; }

.btn{
  display: inline-flex; align-items: center; gap: .6em;
  padding: .95em 1.7em;
  border-radius: var(--radius);
  font-size: .95rem; font-weight: 600; letter-spacing: .01em;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  min-height: 44px;
}
.btn--primary{ background: var(--accent-dark); color: var(--white); }
.btn--primary:hover{ background: var(--ink); transform: translateY(-2px); box-shadow: 0 10px 24px -12px oklch(24% 0.015 260 / 0.4); }
.btn--primary:active{ transform: translateY(0) scale(.98); }
.btn--ghost{ background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover{ border-color: var(--ink); background: var(--bg-alt); transform: translateY(-2px); }
.btn--ghost:active{ transform: translateY(0) scale(.98); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--accent-dark); outline-offset: 3px; border-radius: 2px;
}

/* Reveal system — transform only, content stays opacity:1 always (no blank state for JS-less/headless renders/crawlers) */
.reveal{ transform: translateY(18px); transition: transform var(--dur-slow) var(--ease-out); will-change: transform; }
.reveal.is-visible{ transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ transform: none; transition: none; } }

.skip-link{ position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--white); padding: .8em 1.2em; z-index: 200; }
.skip-link:focus{ left: 1rem; top: 1rem; }