:root {
  /* Primary = Hypnocura-Dunkelgrün (aus dem Logo) */
  --bulma-primary-h: 156deg;
  --bulma-primary-s: 80%;
  --bulma-primary-l: 16%;
  --bulma-primary-invert-l: 97%;

  /* Überschriftenfarbe: im Hellmodus identisch mit dem dunklen Marken-Grün, im Dunkelmodus
     (siehe unten) deutlich heller/entsättigter, sonst nur ~1.7:1 Kontrast auf dunklem Grund
     statt der geforderten mind. 3:1 (grosse Schrift) bzw. 4.5:1. */
  --heading-h: 156deg;
  --heading-s: 80%;
  --heading-l: 16%;

  /* Link = Gold-Akzent (aus dem Logo, #c9a227) */
  --bulma-link-h: 45.6deg;
  --bulma-link-s: 67.5%;
  --bulma-link-l: 47.1%;

  /* Warmer Farbton (Hue/Sättigung) für Flächen, gilt in Hell- und Dunkelmodus */
  --bulma-scheme-h: 42deg;
  --bulma-scheme-s: 14%;

  /* Fliesstext: sehr dunkles Grau-Grün statt kühlem Grau (bewusst unauffälliger als die Überschriftenfarbe) */
  --bulma-text-h: 165deg;
  --bulma-text-s: 31%;

  --bulma-family-primary: Inter, ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --bulma-navbar-height: 4rem;
  --bulma-title-weight: var(--bulma-weight-medium);
  --bulma-subtitle-weight: var(--bulma-weight-normal);
  --bulma-body-line-height: 1.7;
}

/* Kompaktere Section-Abstände, damit Start- und Kontaktseite ohne Scrollen passen.
   Muss direkt auf .section stehen, nicht auf :root: Bulma setzt --bulma-section-padding(-desktop)
   selbst direkt auf .section, eine geerbte :root-Deklaration wird von einer solchen direkten
   Deklaration am gleichen Element immer überschrieben, unabhängig von Spezifität/Reihenfolge. */
.section { --bulma-section-padding: 1.5rem 1.5rem; --bulma-section-padding-desktop: 2rem 3rem; }

/* Fusszeile: gleich hoch wie die (fixe) Kopfzeile, statt Bulmas grosszügigem Default-Padding
   (3rem 1.5rem 6rem). Gleiches Prinzip wie oben bei .section – direkt auf .footer setzen. */
/* display:flex/align-items:center liegen als Bulma-Utility-Klassen (is-flex, is-align-items-center)
   direkt am Element in footer.php – hier nur, was keine Utility abdeckt (Padding-Var, Mindesthöhe). */
.footer {
  --bulma-footer-padding: 0 1.5rem;
  min-height: var(--bulma-navbar-height);
}

/* Helligkeit der Flächen nur im Hellmodus überschreiben (warmes Elfenbein statt kühlem Grau).
   Bulma bringt für den Dunkelmodus bereits eigene, passend abgedunkelte Werte mit – würden wir
   --bulma-scheme-main-l hier bedingungslos setzen, würde das Bulmas @media(prefers-color-scheme:dark)
   überschreiben und der Dunkelmodus bliebe hell (genau das war der gemeldete Bug). */
@media (prefers-color-scheme: light) {
  :root {
    --bulma-scheme-main-l: 97%;
    --bulma-scheme-main-bis-l: 95%;
    --bulma-scheme-main-ter-l: 93%;

    /* Gold-Akzent auf hellen Flächen abdunkeln (gleicher Farbton/Sättigung wie im Logo,
       nur die Helligkeit sinkt), sonst reicht der Kontrast von Links/"cura" nicht für WCAG AA
       (Original-Helligkeit 47.1% ergab nur ~2.3:1 statt der geforderten 4.5:1). Im Dunkelmodus
       bleibt der Wert aus :root (47.1%) unverändert, dort ist der Kontrast bereits > 7:1. */
    --bulma-link-l: 30%;

    /* Bulma verwendet für einfache <a>-Links (color: var(--bulma-link-text)) eine eigene
       Helligkeits-Variable statt --bulma-link-l – ohne diese Anpassung bleibt sie beim
       Bulma-Standard von 58% (~1.8:1 Kontrast, viel zu blass). Gleicher Wert wie oben,
       damit einfache Links und .has-text-link (z. B. die Mail-Adresse) gleich aussehen. */
    --bulma-link-on-scheme-l: 30%;
  }
}

/* Dunkelmodus: Überschriften stark aufhellen und entsättigen (gleicher Grün-Farbton wie im Logo,
   aber als gedämpftes Salbeigrün statt kräftigem Dunkelgrün), sonst nur ~1.7:1 Kontrast auf dem
   fast schwarzen Hintergrund statt der geforderten mind. 3:1 (grosse Schrift). */
@media (prefers-color-scheme: dark) {
  :root {
    --heading-s: 35%;
    --heading-l: 72%;

    /* .button.is-primary ("Kontakt aufnehmen", "Nachricht senden"): Originalwert 16% ergab nur
       ~1.7:1 gegen den fast schwarzen Seitenhintergrund (WCAG 1.4.11 verlangt mind. 3:1 für
       UI-Komponenten-Ränder) – die Fläche des Buttons war kaum vom Hintergrund zu unterscheiden.
       28% ist der Sweet Spot: >3:1 zum Hintergrund UND noch >4.5:1 für den weissen Button-Text. */
    --bulma-primary-l: 28%;
  }
}

html { scroll-behavior: smooth; scroll-padding-top: var(--bulma-navbar-height); }

/* Footer an den unteren Bildschirmrand pinnen, statt darüber schweben zu lassen,
   wenn der Inhalt kürzer als der Viewport ist (klassisches Sticky-Footer-Muster).
   main wird zusätzlich selbst zum Column-Flex-Container: justify-content:flex-start richtet
   seinen Inhalt oben unter der Navbar aus (statt vertikal zu zentrieren), damit alle Seiten
   inkl. Startseite konsistent auf gleicher Höhe beginnen statt der Länge ihres Inhalts
   entsprechend unterschiedlich zu "schweben". */
body.has-navbar-fixed-top { display: flex; flex-direction: column; min-height: 100vh; }
body.has-navbar-fixed-top > main { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: flex-start; }
body.has-navbar-fixed-top > .footer { flex: 0 0 auto; }

/* Bulma liefert für Titel bewusst keine font-family aus (Sass-Default: false) */
.title, .subtitle { font-family: Georgia, "Times New Roman", serif; }

/* Überschriften im kräftigen Hypnocura-Grün, sichtbar abgesetzt vom gedämpfteren Fliesstext */
.title {
  --bulma-title-color: hsl(var(--heading-h), var(--heading-s), var(--heading-l));
  --bulma-title-strong-color: hsl(var(--heading-h), var(--heading-s), var(--heading-l));
}

.navbar { box-shadow: 0 8px 30px hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), .06); }

/* generisches Utility, das Bulma nicht anbietet */
.tracked { letter-spacing: .14em; }

/* Bulma liefert .help.is-danger, aber keine rote Umrandung fürs Feld selbst */
.input.is-danger, .textarea.is-danger { border-color: var(--bulma-danger); }
.input.is-danger:focus, .textarea.is-danger:focus {
  border-color: var(--bulma-danger);
  box-shadow: 0 0 0 0.125em hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l), 0.25);
}

/* Logo soll mit der Fensterbreite mitwachsen statt eine feste Pixelgrösse zu haben */
.brand-mark { width: clamp(260px, 24vw, 460px); height: auto; }

/* Logo in der Navbar: auf Unterseiten das volle Logo (Icon + Schriftzug), auf der Startseite nur
   das quadratische Icon-Mark ohne Schriftzug – der steht dort ja schon gross im Hero, so bleibt
   die Navbar trotzdem nicht leer, ohne "hypnocura.ch" zu verdoppeln.
   Bulma deckelt Bilder in .navbar-item serienmässig auf 1.75rem Höhe (--bulma-navbar-item-img-max-height),
   das liess unser Logo trotz height:3.5rem winzig wirken – Variable hier auf Navbar-Höhe minus Padding erhöhen.
   3.5rem ist bewusst knapp unter der --bulma-navbar-height (4rem) gewählt, damit die Navbar
   dank align-items:center weiterhin auf ihrer Mindesthöhe bleibt statt durch das Logo zu wachsen. */
.navbar-item.navbar-logo-item { --bulma-navbar-item-img-max-height: 3.5rem; padding-top: 0; padding-bottom: 0; }
.navbar-logo { height: 3.5rem; width: auto; }
.navbar-icon { height: 2.25rem; width: auto; }

/* dekoratives Ranken-Wasserzeichen auf allen Seiten (quadratisches Icon, komplett sichtbar, kein Ausschnitt) */
.bg-flourish {
  position: fixed;
  width: 220px;
  max-width: 20vw;
  height: auto;
  opacity: .06;
  filter: grayscale(1) brightness(.6);
  pointer-events: none;
}
.bg-flourish-top { top: 6%; right: 3%; }
.bg-flourish-bottom { bottom: 9rem; left: 3%; transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Fusszeilentext: zwischen Bulmas is-size-7 (0.75rem, zu klein) und is-size-6 (1rem, zu dominant) */
.footer-text { font-size: 0.875rem; }

/* Impressum/Datenschutz: kompakterer Abstand unter dem Seitentitel,
   Unterkapitel in Fliesstextgrösse statt eigener Titelgrösse, nur fett */
/* Bulma setzt auf h1 innerhalb .content automatisch margin-top:1em, sobald ein Element davor steht
   (hier das Kicker-Label Hypnose/Rechtliches) – dadurch war der Abstand Label→Titel auf diesen
   Seiten unbeabsichtigt grösser als auf der Kontaktseite (deren Header ausserhalb von .content liegt). */
.column.is-12.content > h1.title { margin-top: 0; margin-bottom: 1rem; }
.column.is-12.content > h2.title {
  font-size: 1em;
  font-weight: var(--bulma-weight-bold);
  margin-top: 1.5em;
  margin-bottom: .35em;
}
.column.is-12.content > h2.title + p { margin-top: 0; }

/* Honeypot-Feld: für Bots sichtbar/ausfüllbar, für Menschen unsichtbar (kein display:none, sonst ignorieren Screenreader es nicht zuverlässig) */
.field-honeypot { position: absolute; left: -9999px; }

/* Zitat serifig/kursiv wie die Titel, mit goldenem Rand statt Anführungszeichen; Autor als eigene
   Zeile in Fliesstextgrösse, kein "cite"-Kursiv-Default. Gleiche Grösse (--bulma-size-4) wie
   .hypnose-lead weiter unten – beides "hervorgehobene Aussage", nur die Zitat-Markierung
   (Rand + Autorenzeile) bleibt dem echten Zitat vorbehalten. Die feste 1.5rem-Grösse liess das
   Zitat auf schmalen Viewports zu dominant neben dem (dort kleineren) Logo wirken; die Verkleinerung
   auf Mobile lösen deshalb Bulmas eigene is-size-N-mobile-Utilities im Markup (statt eigenem
   Media-Query hier). */
.hypnose-quote {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: var(--bulma-size-4);
  border-left: 3px solid var(--bulma-link);
  padding-left: 1em;
  margin: 1.5em 0;
}
.hypnose-quote cite {
  display: block;
  margin-top: .5em;
  font-style: normal;
  font-size: .75em;
  color: var(--bulma-text);
}
.hypnose-quote cite::before { content: "— "; }

/* Startseite: gleiches Zitat-Layout wie auf der Hypnose-Seite (.hypnose-quote), hier zusätzlich
   als Block zentriert statt linksbündig in der Textspalte zu stehen – der Textrand des Zitats
   selbst bleibt (border-left), nur die Box wandert per max-width/margin:auto in die Mitte. */
.hypnose-quote-hero {
  margin: 0;
}
/* cite ist relativ zur Zitatgrösse (em) skaliert – bei der grossen Hero-Variante sonst
   unproportional gross, deshalb hier fest auf normale Fliesstextgrösse zurücksetzen */
.hypnose-quote-hero cite { font-size: 1rem; }

/* Seit die Startseite oben statt vertikal zentriert ausgerichtet ist, wirkt Bulmas
   Standard-Hero-Body-Padding (3rem oben) unter der Navbar unnötig weit – etwas enger. */
.hero .hero-body { padding-top: 1.75rem; }

/* Startseite: ein Container für Logo, Zitat, Frage, Name und CTAs, damit alles dieselbe
   Spaltenbreite teilt statt (wie zuvor nur beim Zitat) einzeln unterschiedlich breit zu wirken. */
.hero-content { max-width: 30rem; margin: 0 auto; }

/* Vertikaler Rhythmus: ein einziger Abstand zwischen allen Blöcken (statt bisher fünf
   unabhängig wirkender Werte in Bulma-Helpern und Custom-CSS gemischt), mit genau einer
   bewussten Ausnahme für das enge Name/Berufsbezeichnung-Paar. */
.hero-content > * + * { margin-top: 2.5rem; }
.hero-content h1.title + p.subtitle { margin-top: .5rem; }

/* Hypnose-Seite: rhetorische Frage optisch als Fliesstext-Einleitung statt als Bullet-Liste,
   damit sie sich klar von der faktischen Indikationsliste darunter abhebt */
.hypnose-lead {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: var(--bulma-size-4);
}

/* Indikationsliste: ab Tablet-Breite zweispaltig, damit die 7 Punkte als Gruppe statt als lange
   Einzelkette wirken; li bleibt am Stück (kein Umbruch mitten im Punkt zwischen den Spalten) */
@media screen and (min-width: 769px) {
  .hypnose-indications {
    column-count: 2;
    column-gap: 2.5rem;
  }
  .hypnose-indications li { break-inside: avoid; }
}

/* Abdunkelung hinter dem aufgeklappten mobilen Menü: verdeckt nebenbei auch, dass der
   Seiteninhalt sonst an den abgerundeten Ecken der Menü-Karte durchschimmert. z-index unter
   --bulma-navbar-z (30), damit Navbar und Menü selbst darüber bleiben. */
.navbar-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), 4%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.navbar-menu-backdrop.is-active { opacity: .45; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .navbar-menu-backdrop { transition: none; } }