/* =========================================================================
   NEUROPRAXIS SCHWERIN – STYLESHEET
   =========================================================================
   Aufbau dieser Datei (zum schnellen Zurechtfinden):
     1. DESIGN-TOKENS ....... Farben, Schriftgrößen, Abstände (zentral ändern!)
     2. GRUNDLAGEN .......... Reset & Basis-Elemente
     3. LAYOUT-HILFEN ....... Container, Abschnitte, Raster
     4. HEADER & NAVIGATION . Kopfbereich mit Logo und Menü
     5. HERO ................ Großer Einstiegsbereich je Seite
     6. INHALTE ............. Karten, Listen, Kontaktblock, Sprechzeiten
     7. FOOTER .............. Fußbereich
     8. ANIMATIONEN ......... Dezentes Einblenden beim Scrollen
     9. RESPONSIV ........... Anpassungen für Tablet & Handy

   FARBEN ÄNDERN?  -> Abschnitt 1, Block ":root".
   INHALTE ÄNDERN? -> in den HTML-Dateien (index.html, behandlung.html usw.),
                      NICHT hier. Diese Datei steuert nur das Aussehen.
   ========================================================================= */


/* =========================================================================
   1. DESIGN-TOKENS  – hier zentrale Werte anpassen
   ========================================================================= */
:root {
  /* --- FARBEN (Blau/Weiß-Welt, abgeleitet aus dem Praxislogo) ---------- */
  --blau-tief:      #16324f;  /* Dunkles Marineblau – Überschriften, Footer */
  --blau:           #1f5f8b;  /* Hauptblau – Buttons, Akzente, Links        */
  --blau-hell:      #3b82ac;  /* Helles Blau – Verläufe, Hover              */
  --blau-luft:      #eaf2f8;  /* Sehr helles Blau – Flächen, Karten-Hintergrund */
  --blau-luft-2:    #f4f9fc;  /* Noch heller – abwechselnde Abschnitte      */

  --weiss:          #ffffff;
  --grau-text:      #33414d;  /* Fließtext                                  */
  --grau-sanft:     #5d6b76;  /* Sekundärtext, Bildunterschriften           */
  --grau-linie:     #d9e3ea;  /* Trennlinien, Rahmen                        */

  /* Semantische Zuordnung (bitte diese Namen im CSS verwenden) */
  --color-bg:            var(--weiss);
  --color-surface:       var(--blau-luft-2);
  --color-surface-blau:  var(--blau-luft);
  --color-primary:       var(--blau);
  --color-primary-dark:  var(--blau-tief);
  --color-heading:       var(--blau-tief);
  --color-text:          var(--grau-text);
  --color-text-muted:    var(--grau-sanft);
  --color-border:        var(--grau-linie);

  /* --- SCHRIFTEN ------------------------------------------------------- */
  --font-display: 'Fraunces', Georgia, serif;      /* Überschriften        */
  --font-body:    'Instrument Sans', system-ui, -apple-system, sans-serif; /* Fließtext */

  /* --- SCHRIFTGRÖSSEN (flüssig skalierend) ---------------------------- */
  --text-xs:   clamp(0.75rem, 0.7rem + 0.2vw, 0.85rem);
  --text-sm:   clamp(0.875rem, 0.82rem + 0.25vw, 0.95rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --text-lg:   clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --text-xl:   clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);
  --text-2xl:  clamp(2.1rem, 1.6rem + 2.2vw, 3.2rem);

  /* --- ABSTÄNDE ------------------------------------------------------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;

  /* --- RUNDUNGEN & SCHATTEN ------------------------------------------- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 8px rgba(22, 50, 79, 0.06);
  --shadow:    0 10px 30px rgba(22, 50, 79, 0.10);
  --shadow-lg: 0 24px 60px rgba(22, 50, 79, 0.14);

  /* --- LAYOUT --------------------------------------------------------- */
  --breite-inhalt: 1120px;   /* maximale Inhaltsbreite */
  --uebergang: 220ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================================
   2. GRUNDLAGEN
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 100px; /* Platz für den fixierten Header bei Anker-Links */
}

body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
}

img, svg, picture { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-heading);
  line-height: 1.15;
  font-weight: 500;
  text-wrap: balance;
}

p { max-width: 68ch; }

a { color: var(--color-primary); text-decoration: none; transition: color var(--uebergang); }
a:hover { color: var(--blau-hell); }

:focus-visible { outline: 3px solid var(--blau-hell); outline-offset: 3px; border-radius: 4px; }

::selection { background: rgba(31, 95, 139, 0.18); }


/* =========================================================================
   3. LAYOUT-HILFEN
   ========================================================================= */
.container {
  width: 100%;
  max-width: var(--breite-inhalt);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* Standard-Abschnitt mit großzügigem Innenabstand */
.section {
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
}
.section--tight { padding-block: clamp(var(--space-12), 5vw, var(--space-16)); }

/* Abschnitt mit hellblauem Hintergrund (zum Abwechseln) */
.section--soft { background: var(--color-surface); }
.section--blau { background: var(--color-surface-blau); }

/* Kleine Rubrik-Überschrift über einer Sektion */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.section-title { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.lead { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 60ch; }

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full, 999px);
  border-radius: 999px;
  transition: transform var(--uebergang), box-shadow var(--uebergang), background var(--uebergang);
}
.btn--primary { background: var(--color-primary); color: var(--weiss); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--blau-tief); color: var(--weiss); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--ghost { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn--ghost:hover { background: var(--color-primary); color: var(--weiss); transform: translateY(-2px); }


/* =========================================================================
   4. HEADER & NAVIGATION
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--uebergang);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 78px;
}

/* Logo im Header */
.brand { display: flex; align-items: center; gap: var(--space-3); }
.brand img { height: 46px; width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-heading);
}
.brand__sub { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Menü */
.nav__menu { display: flex; align-items: center; gap: var(--space-2); list-style: none; }
.nav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary-dark);
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  transition: background var(--uebergang), color var(--uebergang);
}
.nav__link:hover { background: var(--color-surface-blau); color: var(--color-primary); }
.nav__link.is-active { background: var(--color-primary); color: var(--weiss); }

.nav__cta { margin-left: var(--space-2); }

/* Hamburger-Schalter (nur mobil sichtbar) */
.nav__toggle {
  display: none;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--color-surface-blau);
  color: var(--color-primary-dark);
  align-items: center; justify-content: center;
}
.nav__toggle svg { width: 24px; height: 24px; }


/* =========================================================================
   5. HERO – Einstiegsbereich je Seite
   ========================================================================= */
.hero {
  position: relative;
  padding-block: clamp(var(--space-16), 9vw, var(--space-24));
  background:
    radial-gradient(120% 120% at 85% -10%, rgba(59, 130, 172, 0.18), transparent 55%),
    linear-gradient(160deg, var(--blau-luft) 0%, var(--weiss) 60%);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
}
.hero__title { font-size: var(--text-2xl); margin-bottom: var(--space-5); }
.hero__title .accent { color: var(--color-primary); }
.hero__text { font-size: var(--text-lg); color: var(--color-text-muted); margin-bottom: var(--space-8); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Bild im Hero */
.hero__media { position: relative; }
.hero__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
/* dekorativer blauer Rahmen hinter dem Bild */
.hero__media::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--blau-hell), var(--blau-tief));
  z-index: -1;
  opacity: 0.5;
}

/* Kompakter Hero für Unterseiten (ohne großes Bild) */
.pagehead {
  padding-block: clamp(var(--space-12), 7vw, var(--space-20));
  background:
    radial-gradient(100% 140% at 90% -20%, rgba(59, 130, 172, 0.16), transparent 55%),
    linear-gradient(160deg, var(--blau-luft) 0%, var(--weiss) 70%);
  border-bottom: 1px solid var(--color-border);
}
.pagehead__title { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.pagehead__text { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 56ch; }


/* =========================================================================
   6. INHALTE – Karten, Listen, Kontakt, Sprechzeiten
   ========================================================================= */

/* Allgemeines Raster für gleich breite Spalten */
.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
/* Asymmetrisches 2-Spalten-Layout (Text + Nebenspalte) */
.grid--aside { grid-template-columns: 1.4fr 1fr; gap: clamp(var(--space-8), 4vw, var(--space-16)); align-items: start; }

/* Karte */
.card {
  background: var(--weiss);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  transition: transform var(--uebergang), box-shadow var(--uebergang);
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card__title { font-size: var(--text-lg); margin-bottom: var(--space-3); }

/* Icon-Kreis in Karten */
.icon-badge {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: var(--color-surface-blau);
  color: var(--color-primary);
  margin-bottom: var(--space-5);
}
.icon-badge svg { width: 26px; height: 26px; }

/* Prosa-Block (Willkommenstext etc.) */
.prose p { margin-bottom: var(--space-4); }
.prose p:last-child { margin-bottom: 0; }

/* Aufzählung mit Häkchen */
.checklist { list-style: none; display: grid; gap: var(--space-3); }
.checklist li { position: relative; padding-left: var(--space-8); }
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: 0.35em;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* Schlichte Punktliste für Behandlungsschwerpunkte */
.taglist { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; }
.taglist li {
  background: var(--color-surface-blau);
  color: var(--color-primary-dark);
  font-weight: 500;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-5);
  border-radius: 999px;
  border: 1px solid var(--color-border);
}

/* Diagnostik-Liste mit Titel + Beschreibung */
.deflist { list-style: none; display: grid; gap: var(--space-5); }
.deflist li { padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
.deflist li:last-child { border-bottom: none; padding-bottom: 0; }
.deflist dt, .deflist .term {
  display: block;
  font-weight: 600;
  color: var(--color-heading);
  font-family: var(--font-body);
  margin-bottom: var(--space-1);
}
.deflist dd, .deflist .desc { color: var(--color-text-muted); }

/* Kontakt-Infozeilen */
.contact-list { list-style: none; display: grid; gap: var(--space-4); }
.contact-list li { display: flex; gap: var(--space-4); align-items: flex-start; }
.contact-list .ci {
  flex: none;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface-blau);
  color: var(--color-primary);
  border-radius: 12px;
}
.contact-list .ci svg { width: 20px; height: 20px; }
.contact-list .cl { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); }
.contact-list .cv { font-weight: 500; color: var(--color-heading); }
.contact-list .cv a { color: var(--color-heading); }
.contact-list .cv a:hover { color: var(--color-primary); }

/* Sprechzeiten-Box */
.hours {
  background: linear-gradient(165deg, var(--blau-tief), var(--blau));
  color: var(--weiss);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow);
}
.hours h3 { color: var(--weiss); font-size: var(--text-lg); margin-bottom: var(--space-5); }
.hours__table { width: 100%; border-collapse: collapse; }
.hours__table th, .hours__table td { text-align: left; padding: var(--space-2) 0; font-size: var(--text-sm); }
.hours__table th { font-weight: 500; color: rgba(255,255,255,0.85); }
.hours__table td { text-align: right; font-weight: 600; }
.hours__table tr + tr { border-top: 1px solid rgba(255,255,255,0.15); }
.hours__note { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,0.2); font-size: var(--text-sm); color: rgba(255,255,255,0.9); }
.hours__note strong { color: var(--weiss); }

/* Bild mit Bildunterschrift */
.figure img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; object-fit: cover; }
.figure figcaption { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }

/* Team-Mitglied */
.member { display: grid; grid-template-columns: auto 1fr; gap: var(--space-6); align-items: start; }
.member__avatar {
  width: 92px; height: 92px;
  flex: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--weiss);
  background: linear-gradient(160deg, var(--blau-hell), var(--blau-tief));
  box-shadow: var(--shadow-sm);
}
.member__name { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.member__role { font-size: var(--text-sm); color: var(--color-primary); font-weight: 600; margin-bottom: var(--space-4); }

/* Zeitleiste (Lebenslauf) */
.timeline { list-style: none; display: grid; gap: var(--space-3); border-left: 2px solid var(--color-border); padding-left: var(--space-6); margin-top: var(--space-2); }
.timeline li { position: relative; }
.timeline li::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-6) - 6px); top: 0.55em;
  width: 10px; height: 10px; border-radius: 999px; background: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-surface-blau);
}
.timeline .year { font-weight: 600; color: var(--color-heading); }
.subhead { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); font-weight: 600; margin: var(--space-6) 0 var(--space-2); }

/* Impressum / Datenschutz – längerer Textblock */
.legal h2 { font-size: var(--text-xl); margin-top: var(--space-10); margin-bottom: var(--space-4); }
.legal h3 { font-size: var(--text-lg); margin-top: var(--space-6); margin-bottom: var(--space-2); }
.legal h2:first-child { margin-top: 0; }
.legal p { margin-bottom: var(--space-4); }
.legal strong { color: var(--color-heading); }
.legal .muted { color: var(--color-text-muted); font-size: var(--text-sm); }


/* =========================================================================
   7. FOOTER
   ========================================================================= */
.site-footer {
  background: var(--color-primary-dark);
  color: rgba(255, 255, 255, 0.82);
  padding-block: var(--space-16) var(--space-8);
}
.site-footer a { color: rgba(255, 255, 255, 0.82); }
.site-footer a:hover { color: var(--weiss); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-10); margin-bottom: var(--space-12); }
.footer__brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.footer__brand img { height: 44px; filter: brightness(0) invert(1); }
.footer__brand .brand__name { color: var(--weiss); }
.footer__brand .brand__sub { color: rgba(255,255,255,0.65); }
.footer h4 { color: var(--weiss); font-family: var(--font-body); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-4); }
.footer__links { list-style: none; display: grid; gap: var(--space-2); }
.footer__links a { font-size: var(--text-sm); }
.footer__contact { font-size: var(--text-sm); display: grid; gap: var(--space-2); }
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: var(--space-6);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3);
  font-size: var(--text-xs); color: rgba(255, 255, 255, 0.6);
}


/* =========================================================================
   8. ANIMATIONEN – dezentes Einblenden beim Scrollen
   ========================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }
/* leichte Staffelung, wenn mehrere Elemente nebeneinander liegen */
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }

/* Nutzer, die reduzierte Bewegung wünschen: alles sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}


/* =========================================================================
   9. RESPONSIV – Tablet & Handy
   ========================================================================= */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; max-width: 520px; }
  .hero__media::before { inset: 12px -12px -12px 12px; }
  .grid--aside { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  /* Mobiles Menü: Navigation wird über einen Schalter ein-/ausgeklappt */
  .nav__toggle { display: flex; }
  .nav__menu {
    position: absolute;
    top: 78px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    background: var(--weiss);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow);
    padding: var(--space-4);
    display: none;
  }
  .nav__menu.is-open { display: flex; }
  .nav__link { padding: var(--space-3) var(--space-4); }
  .nav__cta { margin-left: 0; margin-top: var(--space-2); }
  .brand__sub { display: none; }
}

@media (max-width: 560px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .card { padding: var(--space-6); }
  .member { grid-template-columns: 1fr; }
  .member__avatar { margin-bottom: var(--space-2); }
}