/* ==========================================================================
   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) -------- */
.bild-platzhalter {
  display: grid; place-items: center; min-height: 260px; padding: 2em;
  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;
}

/* --- Animationen: dezent, respektieren Nutzereinstellung -------------- */
.reveal { opacity: 0; translate: 0 24px; transition: opacity .7s var(--easing), translate .7s var(--easing); }
.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; }
  .reveal { opacity: 1; translate: 0 0; }
}

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