/* ==========================================================================
   base.css — Gemeinsame Basis für ALLE Sites.
   Wird nicht pro Site verändert. Das Aussehen entsteht ausschließlich dadurch,
   dass die Site in ihrer theme.css die Variablen unten überschreibt und
   eigene Regeln ergänzt.

   WICHTIG für Claude Code: Der Variablensatz in :root ist ein VERTRAG.
   Nur diese Namen verwenden — nur so kann das Admin-Panel später Farben,
   Schriften und Abstände pro Site anbieten, ohne CSS zu parsen.
   Zusätzliche site-eigene Variablen sind erlaubt, müssen aber mit --x-
   beginnen (z.B. --x-verlauf-hero).
   ========================================================================== */

:root {
  /* --- Farben --------------------------------------------------------- */
  --c-primaer:      #003B5D;   /* Hauptfarbe: Headlines, Flächen           */
  --c-primaer-hell: #17567c;
  --c-akzent:       #D69B61;   /* Buttons, Hervorhebungen                  */
  --c-akzent-hell:  #e5b98a;
  --c-text:         #23282d;   /* Fließtext                                */
  --c-text-leise:   #6b7280;   /* Sekundärtext, Hinweise                   */
  --c-bg:           #ffffff;   /* Seitenhintergrund                        */
  --c-bg-alt:       #f6f7f9;   /* abgesetzte Sections                      */
  --c-linie:        #e3e6ea;   /* Rahmen, Trenner                          */
  --c-invers:       #ffffff;   /* Text auf dunklem Grund                   */

  /* --- Typografie ----------------------------------------------------- */
  --font-head:  "Poppins", system-ui, -apple-system, sans-serif;
  --font-body:  "Poppins", system-ui, -apple-system, sans-serif;
  --fs-basis:   1.0625rem;     /* 17px                                     */
  --fs-klein:   0.9rem;
  --fs-h1:      clamp(2.1rem, 5vw, 3.4rem);
  --fs-h2:      clamp(1.6rem, 3.4vw, 2.4rem);
  --fs-h3:      clamp(1.2rem, 2.2vw, 1.5rem);
  --lh-text:    1.7;
  --lh-head:    1.2;
  --gewicht-head: 600;

  /* --- Maße und Rhythmus ---------------------------------------------- */
  --space:      1rem;          /* Grundeinheit für Abstände                */
  --sec-abstand: clamp(3rem, 8vw, 7rem);
  --maxwidth:   1180px;        /* Inhaltsbreite                            */
  --maxwidth-text: 68ch;       /* Lesebreite für Fließtext                 */
  --radius:     10px;
  --radius-gross: 20px;
  --schatten:   0 4px 24px rgba(0, 0, 0, .07);

  /* --- Bewegung ------------------------------------------------------- */
  --dauer:      .35s;
  --easing:     cubic-bezier(.2, .7, .3, 1);
}

/* --- Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-basis);
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
}
img, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: var(--gewicht-head);
  line-height: var(--lh-head);
  color: var(--c-primaer);
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { margin: 0 0 1.1em; text-wrap: pretty; }

/* --- Layout ----------------------------------------------------------- */
.sec { padding: var(--sec-abstand) var(--space); }
.sec-alt { background: var(--c-bg-alt); }
.sec-inner { max-width: var(--maxwidth); margin-inline: auto; }
.sec-text { max-width: var(--maxwidth-text); }
.sec-titel { margin-bottom: 1em; }

/* --- Button ----------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: .85em 1.9em;
  background: var(--c-akzent);
  color: var(--c-invers);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  transition: transform var(--dauer) var(--easing), background var(--dauer) var(--easing);
}
.btn:hover { background: var(--c-akzent-hell); transform: translateY(-2px); }
.btn-sekundaer { background: transparent; color: var(--c-primaer); border: 1.5px solid var(--c-primaer); }

/* --- Geteilte Bausteine: nur Struktur, Optik kommt aus theme.css ------- */
.kontakt-grid { display: grid; gap: calc(var(--space) * 2); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kontakt-label { font-weight: 600; color: var(--c-primaer); }
.kontakt-link { text-decoration: none; border-bottom: 1px solid var(--c-akzent); }

.zeiten-tabelle, .preis-tabelle { width: 100%; border-collapse: collapse; max-width: var(--maxwidth-text); }
.zeiten-zeile, .preis-zeile { border-bottom: 1px solid var(--c-linie); }
.zeiten-tag, .preis-label { text-align: left; font-weight: 500; padding: .8em 0; color: var(--c-text); }
.zeiten-zeit, .preis-wert { text-align: right; padding: .8em 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.preis-wert { font-weight: 600; color: var(--c-primaer); }
.ist-geschlossen .zeiten-zeit { color: var(--c-text-leise); }
.preis-hinweis, .zeiten-hinweis { font-size: var(--fs-klein); color: var(--c-text-leise); margin-top: 1.2em; }

.faq-eintrag { border-bottom: 1px solid var(--c-linie); }
.faq-frage {
  cursor: pointer; padding: 1.1em 2em 1.1em 0; font-weight: 600;
  color: var(--c-primaer); list-style: none; position: relative;
}
.faq-frage::-webkit-details-marker { display: none; }
.faq-frage::after {
  content: "+"; position: absolute; right: 0; top: 50%; translate: 0 -50%;
  font-size: 1.4em; color: var(--c-akzent); transition: rotate var(--dauer) var(--easing);
}
.faq-eintrag[open] .faq-frage::after { rotate: 45deg; }
.faq-antwort { padding-bottom: 1.3em; max-width: var(--maxwidth-text); }

.termin-rahmen { border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); }
.termin-iframe { width: 100%; border: 0; min-height: 600px; }

.footer { background: var(--c-primaer); color: var(--c-invers); padding: calc(var(--space) * 3) var(--space); }
.footer h2, .footer .footer-name { color: var(--c-invers); }
.footer-inner { display: grid; gap: calc(var(--space) * 2); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.footer-link { color: var(--c-invers); text-decoration: none; opacity: .85; }
.footer-link:hover { opacity: 1; text-decoration: underline; }
.footer-recht { display: flex; gap: 1.4em; align-items: flex-start; flex-wrap: wrap; }

.autorenbox { border-top: 1px solid var(--c-linie); padding: calc(var(--space) * 2) var(--space); font-size: var(--fs-klein); color: var(--c-text-leise); }
.autor-name { font-weight: 600; color: var(--c-primaer); margin-bottom: .2em; }
.autor-fach { margin-bottom: .6em; }
.autor-vita { max-width: var(--maxwidth-text); }

/* --- Bild-Platzhalter (solange kein echtes Bild hinterlegt ist) --------
   Kein grauer Kasten, sondern ein Arbeitsauftrag: geforderte Pixelgröße,
   Seitenverhältnis und konkrete Motivvorschläge. Wer das Bild liefert, weiß
   damit ohne Rückfrage, was gebraucht wird. Über aspect-ratio nimmt der
   Platzhalter außerdem genau den Platz ein, den das spätere Bild einnimmt —
   das Layout verschiebt sich beim Einsetzen nicht mehr. */
.bild-platzhalter {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .7em; min-height: 180px; padding: 1.6em 1.4em; overflow: auto;
  background: repeating-linear-gradient(45deg, var(--c-bg-alt), var(--c-bg-alt) 12px, transparent 12px, transparent 24px);
  border: 1.5px dashed var(--c-linie); border-radius: var(--radius);
  color: var(--c-text-leise); font-size: var(--fs-klein); text-align: center;
}
/* Alle Innenregeln unter .bild-platzhalter kapseln: base.css wird vor
   theme.css geladen: gleich spezifische Regeln der Site würden sonst gewinnen
   und der Platzhalter sähe auf jeder Website anders aus. */
.bild-platzhalter > * { margin: 0; }

/* Die Maßangabe ist die wichtigste Zeile — sie wird zuerst gelesen. */
.bild-platzhalter .platzhalter-mass {
  font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .02em;
  color: var(--c-primaer); background: var(--c-bg);
  border: 1px solid var(--c-linie); border-radius: 999px;
  padding: .2em .8em; font-size: .82em; line-height: 1.5;
}
.bild-platzhalter .platzhalter-text { max-width: 42ch; line-height: 1.5; }
.bild-platzhalter .platzhalter-titel {
  font-size: .72em; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: var(--c-primaer);
}
.bild-platzhalter .platzhalter-motive {
  list-style: none; margin: 0; padding: 0;
  max-width: 44ch; text-align: left; display: grid; gap: .25em;
}
.bild-platzhalter .platzhalter-motive li {
  padding-left: 1em; position: relative; line-height: 1.4;
  margin: 0; list-style: none;
}
.bild-platzhalter .platzhalter-motive li::before {
  content: "–"; position: absolute; left: 0; color: var(--c-akzent);
}
/* In flachen Rahmen bleibt nur Platz für das Wesentliche. */
@media (max-height: 420px) {
  .bild-platzhalter .platzhalter-motive,
  .bild-platzhalter .platzhalter-titel { display: none; }
}

/* --- Animationen: dezent, respektieren Nutzereinstellung --------------
   Die Einblendung hängt an der Klasse .js, die das Skript am Seitenende auf
   <html> setzt. Läuft kein JavaScript — abgeschaltet, blockiert, oder ein
   Crawler, der nicht ausführt —, greift .reveal gar nicht erst und der Inhalt
   ist sichtbar. Ohne diese Bedingung startete jede Seite mit opacity:0 und
   blieb in genau diesem Fall vollständig leer. */
.js .reveal { opacity: 0; translate: 0 24px; transition: opacity .7s var(--easing), translate .7s var(--easing); }
.js .reveal.sichtbar { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; translate: 0 0; }
}

/* --- Fokus: Barrierefreiheit, nie entfernen --------------------------- */
:focus-visible { outline: 3px solid var(--c-akzent); outline-offset: 3px; }

/* --- Logo ------------------------------------------------------------- */
/* Wort-Bild-Logo im Footer. Breite begrenzt, Höhe automatisch — das
   Seitenverhältnis steckt über width/height im <img> und verhindert
   Layoutsprünge beim Laden. */
.footer-logo { margin: 0 0 .9rem; }
.footer-logo-bild { width: min(230px, 70%); height: auto; }

/* --- Verwandte Themen -------------------------------------------------- */
/* Querverweise auf die anderen Websites. Nur Struktur — das Aussehen kommt
   aus der theme.css der jeweiligen Site. */
.verwandt-lead { color: var(--c-text-leise); margin-bottom: 1.4em; }
.verwandt-liste { list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.verwandt-link {
  display: block; height: 100%; padding: 1.1em 1.2em; text-decoration: none;
  border: 1px solid var(--c-linie); border-radius: var(--radius);
  transition: border-color var(--dauer) var(--easing), transform var(--dauer) var(--easing);
}
.verwandt-link:hover { border-color: var(--c-akzent); transform: translateY(-3px); }
.verwandt-titel { display: block; font-weight: 600; color: var(--c-primaer); margin-bottom: .3em; }
.verwandt-text { display: block; font-size: var(--fs-klein); color: var(--c-text-leise); }

/* --- KI-Kennzeichnung --------------------------------------------------
   Art. 50 Abs. 4 KI-VO (EU) 2024/1689 verlangt, künstlich erzeugte Bilder
   offenzulegen. „Klar und deutlich" heißt: dort, wo das Bild wahrgenommen
   wird — deshalb direkt darunter und nicht in einer Fußnote. Zugleich so
   zurückhaltend, dass es die Gestaltung nicht stört. */
.bild-figur { margin: 0; display: block; position: relative; }
.bild-figur > img,
.bild-figur > picture { display: block; width: 100%; height: auto; }
.bild-ki {
  display: block; margin-top: .45em;
  font-size: .72rem; line-height: 1.4; letter-spacing: .01em;
  color: var(--c-text-leise);
}
/* Liegt das Bild in einem randlosen Rahmen (Hero, Portrait), sitzt die
   Beschriftung als dezente Auflage in der Ecke statt darunter — sonst
   sprengte sie das Seitenverhältnis des Rahmens. */
.hero__figure .bild-ki,
.doctor__portrait .bild-ki,
.figure-frame .bild-ki {
  position: absolute; right: .5rem; bottom: .5rem; margin: 0;
  background: rgba(255, 255, 255, .82); color: var(--c-text);
  padding: .2em .6em; border-radius: 999px;
  backdrop-filter: blur(3px); font-size: .68rem;
}

/* --- Bildnachweis im Impressum -----------------------------------------
   Entsteht automatisch aus den im Admin-Bereich hinterlegten Bildquellen.
   Eine Aufzählung ohne Punkte: Es ist eine Zuordnung, keine Liste von
   Argumenten. Die Bildbezeichnung steht vorn und trägt das Gewicht. */
.bildnachweis { list-style: none; margin: 0 0 1em; padding: 0; }
.bildnachweis li { margin-bottom: .35em; }
.bildnachweis__bild { color: var(--c-text); font-weight: 600; }
.bildnachweis-alle { margin: 0 0 1em; }