/* ==========================================================================
   Birgit Rudolph-Schuster – Heilpraktikerin für Psychotherapie (HPG)
   Gestaltung „ruhig & edel“ · keine externen Ressourcen · mobile first
   ========================================================================== */

/* ---------- Schriften (lokal, SIL Open Font License) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-500-italic.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-variable.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pinyon Script";
  src: url("../fonts/pinyon-script.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Farben & Maße ---------- */
:root {
  /* Akzentfarben (CMYK umgerechnet) – nur sparsam eingesetzt */
  --violett: #A329CC;   /* C20 M80 Y0 K20  */
  --flieder: #6666FF;   /* C60 M60 Y0 K0   */
  --blau: #0000FF;      /* C100 M100 Y0 K0 – nur Fokusrahmen */

  --tinte: #2B2430;     /* Überschriften */
  --text: #3E3544;      /* Fließtext */
  --leise: #675D6E;     /* Nebentexte */
  --linie: #DED7E4;     /* Haarlinien */
  --papier: #FFFFFF;
  --nebel: #F7F5F9;     /* ruhige Wechselfläche */
  --tafel: #ECE7F0;     /* Fläche hinter den Fotos */

  --max: 74rem;
  --text-max: 38rem;
  --header-h: 5rem;

  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --schreib: "Pinyon Script", "Segoe Script", "Snell Roundhand", cursive;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
  background: var(--papier);
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--tinte);
  line-height: 1.1;
  letter-spacing: -.005em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 1.9rem + 4.2vw, 5rem); line-height: 1.02; }
h2 { font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3.25rem); }
h3 { font-size: clamp(1.45rem, 1.3rem + .8vw, 1.85rem); font-weight: 600; }

p { margin: 0 0 1.15em; }

a {
  color: var(--tinte);
  text-decoration-line: underline;
  text-decoration-color: var(--violett);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
a:hover { color: var(--violett); }

:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .7rem 1.1rem; background: var(--tinte); color: #fff; text-decoration: none;
}
.skip-link:focus { top: 1rem; color: #fff; }

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 48em) { .container { padding-inline: 2.5rem; } }

.icon { width: 1.15rem; height: 1.15rem; flex: none; }

/* ---------- Kopfbereich ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--linie);
}
.header-inner {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0 1rem;
  min-height: var(--header-h);
}

.brand {
  display: flex; align-items: center; gap: .75rem;
  text-decoration: none; color: inherit;
  flex: 1 1 0; min-width: 0;
  padding-block: .55rem;
}
.brand picture { flex: none; }
.brand img { width: 3.6rem; }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.brand-name {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem);
  color: var(--tinte);
}
.brand-sub { font-size: clamp(.78rem, .74rem + .2vw, .88rem); color: var(--leise); letter-spacing: .01em; }

.header-contact { list-style: none; margin: 0; padding: 0; display: flex; }
.header-contact a {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2.75rem; padding-inline: .5rem;
  font-size: .95rem; color: var(--text);
  text-decoration: none; white-space: nowrap;
}
.header-contact a:hover { color: var(--violett); }
.header-contact .icon { color: var(--violett); }
.header-contact .label-mail { display: none; }

/* Menü (reines CSS) */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.75rem; padding-inline: .5rem;
  cursor: pointer; font-size: .95rem; color: var(--tinte);
}
.nav-toggle:focus-visible + .nav-burger { outline: 2px solid var(--blau); outline-offset: 2px; }
.nav-burger .zu { display: none; }
.nav-toggle:checked + .nav-burger .auf { display: none; }
.nav-toggle:checked + .nav-burger .zu { display: block; }

.main-nav { flex-basis: 100%; display: none; }
.nav-toggle:checked ~ .main-nav { display: block; }
.main-nav ul { list-style: none; margin: 0; padding: 0 0 .75rem; }
.main-nav li + li { border-top: 1px solid var(--linie); }
.main-nav a {
  display: block; padding: .8rem 0;
  font-family: var(--serif); font-size: 1.4rem; font-weight: 500;
  color: var(--tinte); text-decoration: none;
}
.main-nav a:hover { color: var(--violett); }

/* Handy: Zeile 1 Logo + Name, Zeile 2 Telefon · E-Mail · Menü */
@media (max-width: 47.99em) {
  .brand { flex-basis: 100%; border-bottom: 1px solid var(--linie); }
  .header-contact { flex: 1; gap: .25rem; }
  .header-contact a { padding-inline: 0 .75rem; font-size: .9rem; }
}
@media (min-width: 48em) {
  .header-contact { margin-left: auto; }
  .header-contact .label-kurz { display: none; }
  .header-contact .label-mail { display: inline; }
}
@media (min-width: 64em) {
  :root { --header-h: 5.75rem; }
  .brand { flex: 0 1 auto; }
  .brand img { width: 4.4rem; }
  .header-inner { flex-wrap: nowrap; gap: 2rem; }
  .nav-burger { display: none; }
  .main-nav { display: block; flex-basis: auto; margin-left: auto; }
  .main-nav ul { display: flex; gap: 1.75rem; padding: 0; }
  .main-nav li + li { border-top: 0; }
  .main-nav a {
    padding: .4rem 0; font-family: var(--sans); font-size: 1rem; font-weight: 500;
    border-bottom: 1px solid transparent;
  }
  .main-nav a:hover { color: var(--tinte); border-bottom-color: var(--violett); }
  .header-contact { margin-left: 0; flex-direction: column; border-left: 1px solid var(--linie); padding-left: 1.5rem; }
  .header-contact a { min-height: 1.9rem; font-size: .9rem; padding-inline: 0; }
}
@media (min-width: 64em) and (max-width: 74.99em) {
  .header-contact .label-mail { display: none; }
  .header-contact .label-kurz { display: inline; }
}

/* ---------- Sektionen ---------- */
section { scroll-margin-top: calc(var(--header-h) + 1rem); }
.section { padding-block: clamp(4rem, 2.5rem + 6vw, 8rem); overflow-x: clip; }
.section--nebel { background: var(--nebel); }

.lead {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.4rem, 1.2rem + .9vw, 1.8rem);
  line-height: 1.4; color: var(--tinte);
}
.prosa { max-width: var(--text-max); }

.split { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 6rem); }
@media (min-width: 56em) {
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; }
  .split--bild-links { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .split--oben { align-items: start; }
}

/* Foto auf ruhiger Tafel – freigestellte Motive stehen auf der Unterkante */
.tafel {
  margin: 0;
  background: var(--tafel);
  padding: clamp(1.5rem, 1rem + 3vw, 3rem) clamp(1rem, .5rem + 2vw, 2.5rem) 0;
}
.tafel img { width: 100%; }
.tafel--portrait { padding-right: 0; }
.tafel--rein { padding-bottom: clamp(1.5rem, 1rem + 3vw, 3rem); }
.tafel figcaption {
  font-size: .85rem; color: var(--leise);
  background: var(--papier); padding: .75rem 0 0;
  margin-inline: calc(-1 * clamp(1rem, .5rem + 2vw, 2.5rem));
}

/* Linie aus dem Logo: ein feiner Bogen mit zwei Perlen */
.bogen { width: 100%; max-width: 30rem; height: auto; margin: 0 0 2rem; }
.bogen--mitte { margin-inline: auto; max-width: 16rem; margin-bottom: 1.5rem; }

/* ---------- Start ---------- */
.hero { padding-top: clamp(3rem, 2rem + 5vw, 7rem); }
.hero h1 { margin-bottom: .35em; }
.eckdaten {
  margin: 2rem 0 0; padding: 1.25rem 0 0;
  border-top: 1px solid var(--linie);
  display: grid; gap: .25rem 2.5rem;
  font-size: .95rem; color: var(--leise);
}
.eckdaten dt { font-family: var(--serif); font-size: 1.6rem; line-height: 1; color: var(--tinte); }
.eckdaten dd { margin: 0 0 .75rem; }
@media (min-width: 30em) {
  .eckdaten { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: auto auto; }
}

.leiser-link { font-weight: 500; }

.ueber-mich { margin-top: clamp(4rem, 3rem + 4vw, 7rem); }
@media (min-width: 56em) {
  .ueber-mich { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr); gap: 4rem; }
  .ueber-mich .spalten { columns: 2; column-gap: 3rem; }
  .ueber-mich .spalten p { break-inside: avoid; }
}

/* ---------- Therapie: Fragen ---------- */
.fragen-block { margin-top: clamp(4rem, 3rem + 4vw, 7rem); }
.fragen-block h3 { font-weight: 500; margin-bottom: 1.5rem; }
.fragen {
  list-style: none; margin: 0; padding: 0;
  display: grid; column-gap: 4rem;
  border-bottom: 1px solid var(--linie);
}
@media (min-width: 48em) { .fragen { grid-template-columns: 1fr 1fr; } }
.fragen li {
  border-top: 1px solid var(--linie);
  padding: 1.1rem 0 1.2rem;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem);
  line-height: 1.3; color: var(--tinte);
}

.hinweis {
  max-width: var(--text-max);
  font-size: .88rem; line-height: 1.6; color: var(--leise);
  margin-top: 2.5rem;
}

/* ---------- Angebot: Preisliste ---------- */
.preisliste { margin: 2.5rem 0 0; padding: 0; max-width: 40rem; border-top: 1px solid var(--tinte); }
.preisliste div {
  display: flex; align-items: baseline; gap: .75rem;
  padding: 1rem 0; border-bottom: 1px solid var(--linie);
}
.preisliste dt { font-weight: 500; color: var(--tinte); }
.preisliste dt small { display: block; font-size: .88rem; font-weight: 400; color: var(--leise); }
.preisliste div::after { content: none; }
.preisliste .fuell { flex: 1; border-bottom: 1px dotted #B9AFC0; transform: translateY(-.35em); min-width: 1rem; }
.preisliste dd {
  margin: 0; font-family: var(--serif); font-weight: 600;
  font-size: 1.6rem; line-height: 1; color: var(--tinte); white-space: nowrap;
}

.ablauf { margin-top: clamp(4rem, 3rem + 4vw, 7rem); }

/* ---------- Kontakt ---------- */
.einladung {
  position: relative;
  isolation: isolate;
  padding: clamp(3rem, 2rem + 6vw, 7rem) 1.25rem;
  background: var(--tafel);
}
/* Gemälde gedämpft: weniger Sättigung, heller Schleier */
.einladung::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: url("../img/therapie-hintergrundbild-480.jpg");
  background-image: image-set(url("../img/therapie-hintergrundbild-480.webp") type("image/webp"), url("../img/therapie-hintergrundbild-480.jpg") type("image/jpeg"));
  background-size: cover; background-position: center;
  filter: saturate(.6);
  opacity: .55;
}
@media (min-width: 30em) {
  .einladung::before {
    background-image: url("../img/therapie-hintergrundbild-800.jpg");
    background-image: image-set(url("../img/therapie-hintergrundbild-800.webp") type("image/webp"), url("../img/therapie-hintergrundbild-800.jpg") type("image/jpeg"));
  }
}
.einladung-inhalt {
  max-width: 42rem; margin-inline: auto;
  background: rgba(255, 255, 255, .94);
  padding: clamp(2rem, 1.25rem + 4vw, 4rem) clamp(1.25rem, 1rem + 4vw, 4.5rem);
  text-align: center;
}
.einladung-inhalt h2 { margin-bottom: .5em; }

.gruss { margin: 2.25rem 0 0; }
.gruss .ihre { display: block; font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--leise); }
.unterschrift {
  display: block;
  font-family: var(--schreib); font-weight: 400;
  font-size: clamp(2rem, 1.5rem + 2.8vw, 3.6rem);
  line-height: 1.25; color: var(--violett);
  margin-top: .1rem;
}

.kontaktdaten {
  display: grid; gap: 2.5rem;
  padding-top: clamp(3rem, 2rem + 4vw, 5rem);
}
@media (min-width: 48em) { .kontaktdaten { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.kontaktdaten > div { border-top: 1px solid var(--tinte); padding-top: 1.5rem; }
.kontaktdaten h3 { margin-bottom: 1rem; }
.kontakt-liste { list-style: none; margin: 0 0 1rem; padding: 0; }
.kontakt-liste a {
  display: inline-flex; align-items: center; gap: .65rem;
  min-height: 2.75rem; font-size: 1.1rem; text-decoration: none;
}
.kontakt-liste a:hover { text-decoration: underline; text-decoration-color: var(--violett); }
.kontakt-liste .icon { color: var(--violett); }
address { font-style: normal; }
.praxis { display: flex; gap: 1.5rem; align-items: flex-start; }
.praxis img { width: 5.5rem; flex: none; margin-top: .35rem; }
@media (max-width: 22em) { .praxis { flex-direction: column; } }
.klein { font-size: .9rem; color: var(--leise); }
.mit-icon { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; }
.mit-icon .icon { color: var(--violett); }

/* ---------- Unterseiten ---------- */
.textseite { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.textseite .container { max-width: 50rem; }
.textseite h1 { font-size: clamp(2.5rem, 2rem + 2.5vw, 3.75rem); }
.textseite h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); margin-top: 2.5rem; font-weight: 600; }
.textseite ul { padding-left: 1.2rem; }
.textseite li { margin-bottom: .35rem; }
.stand { font-size: .9rem; color: var(--leise); margin-top: 3rem; }

/* ---------- Fehlerseite (404) ---------- */
.fehlerseite { padding-top: clamp(3.5rem, 2.5rem + 5vw, 7rem); }
.fehlercode {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(3.75rem, 2.75rem + 5vw, 7rem);
  line-height: 1;
  color: var(--tinte);
  margin: 0 0 .25em;
}
.fehlerseite .bogen { max-width: 22rem; margin-bottom: 2rem; }
.fehler-links {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--linie);
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 2.25rem;
}
.fehler-links a { font-weight: 500; }

/* ---------- Fußbereich ---------- */
.site-footer {
  background: var(--nebel);
  border-top: 1px solid var(--linie);
  padding-block: 3.5rem 2rem;
  font-size: .95rem; color: var(--text);
}
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 48em) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-titel { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; color: var(--tinte); margin-bottom: .4rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer .kontakt-liste a { font-size: .95rem; min-height: 2.25rem; }
.site-footer li a { display: inline-flex; min-height: 2.25rem; align-items: center; }
.footer-unten {
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--linie);
  font-size: .85rem; color: var(--leise);
}

/* ---------- Druck ---------- */
@media print {
  .site-header { position: static; }
  .main-nav, .nav-burger, .skip-link, .bogen { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .section, .textseite { padding-block: 1rem; }
  .section--nebel, .einladung, .site-footer, .tafel { background: none !important; }
  .einladung-inhalt { background: none; padding: 0; text-align: left; }
  img { max-width: 50% !important; }
  h1, h2, h3 { break-after: avoid; }
}

/* Reihenfolge im Kopf */
@media (max-width: 23.99em) { .menu-text { display: none; } .header-contact a { padding-right: .6rem; } }
.section-ende { height: clamp(4rem, 2.5rem + 6vw, 8rem); }
@media (max-width: 63.99em) {
  .header-contact { order: 1; }
  .nav-burger { order: 2; }
  .main-nav { order: 3; }
}