/*
Theme Name: hautimpuls
Theme URI: https://hautimpuls.ch
Author: hautimpuls
Description: Block-Theme fuer hautimpuls.ch, hautimpuls (Katy). Schriften lokal. Externe Dienste nur nach Einwilligung, siehe inc/consent.php, Satin-Verlaeufe als reines CSS.
Version: 2.21.26
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hautimpuls
*/

/* ---------------------------------------------------------------
   1. Farbwerte (aus der Logodatei gemessen) und Grundwerte
   --------------------------------------------------------------- */
:root {
  --hi-tinte: #392821;
  --hi-wein: #5A1C20;
  --hi-wein-2: #74282A;
  --hi-gold: #A87951;
  --hi-gold-hell: #C9A176;
  --hi-gold-spitze: #F1DCB8;
  --hi-gold-tief: #8A5F3C;
  --hi-papier: #FBEEDA;
  --hi-sand: #F4E5CA;
  --hi-champagner: #EFDCBC;
  --hi-dunkel-3: #5A452A;
  --hi-dunkel: #3E2E1E;
  --hi-nacht: #2A1F14;
  --hi-whatsapp: #25D366;
  /* Knopffarbe aus dem Flyer, gemessen an den Rabattfeldern. */
  --hi-knopf: #8A4544;
  --hi-knopf-tief: #70302F;

  --hi-medaillon: radial-gradient(circle at 35% 30%, #FBEFD8 0%, #E9CC9C 38%, #C9A176 72%, #A87951 100%);
  --hi-gold-verlauf: linear-gradient(100deg, #8A5F3C 0%, #C9A176 30%, #F1DCB8 50%, #C9A176 70%, #8A5F3C 100%);

  --hi-font-serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --hi-font-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --hi-font-script: "Allura", "Brush Script MT", cursive;

  --hi-content: 1160px;
  --hi-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --hi-section-y: clamp(4rem, 9vw, 7.5rem);
  --hi-radius: 4px;
  --hi-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------
   2. Basis
   --------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--hi-papier);
  color: var(--hi-tinte);
  font-family: var(--hi-font-sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--hi-wein); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--hi-wein-2); }
strong { font-weight: 500; }
:focus-visible { outline: 2px solid var(--hi-wein); outline-offset: 3px; }
.night :focus-visible { outline-color: var(--hi-gold-spitze); }

h1, h2, h3, h4 {
  font-family: var(--hi-font-serif);
  font-weight: 600;
  color: var(--hi-wein);
  line-height: 1.12;
  margin: 0 0 .6em;
  letter-spacing: .005em;
}
h1 { font-size: clamp(2.4rem, 5vw, 3.75rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 600; }
p { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.2em; }

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px;
  overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal;
}
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--hi-papier); color: var(--hi-wein); padding: .6rem 1rem; }
.skip-link:focus { top: 1rem; }

/* ---------------------------------------------------------------
   3. Satin-Hintergruende (reines CSS, keine Bilddateien)
   --------------------------------------------------------------- */
.silk {
  background-color: var(--hi-papier);
  background-image:
    radial-gradient(120% 80% at 8% 12%, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(90% 70% at 92% 18%, rgba(241, 220, 184, .6) 0%, rgba(241, 220, 184, 0) 60%),
    radial-gradient(70% 60% at 70% 95%, rgba(238, 209, 186, .7) 0%, rgba(238, 209, 186, 0) 60%),
    linear-gradient(115deg, #FDF1E2 0%, #F8E2CD 26%, #FFF8EE 40%, #EED1BA 58%, #F8E2CD 76%, #FDF1E2 100%);
}
.night {
  background-color: var(--hi-dunkel);
  color: var(--hi-papier);
  background-image:
    radial-gradient(85% 60% at 82% 28%, rgba(168, 121, 81, .30) 0%, rgba(168, 121, 81, 0) 62%),
    radial-gradient(60% 50% at 12% 88%, rgba(92, 66, 42, .65) 0%, rgba(92, 51, 41, 0) 60%),
    radial-gradient(40% 35% at 50% 55%, rgba(201, 161, 118, .10) 0%, rgba(201, 161, 118, 0) 70%),
    linear-gradient(180deg, #5A452A 0%, #3E2E1E 52%, #2A1F14 100%);
}
.night p, .night li { color: var(--hi-papier); }
.night a { color: var(--hi-gold-spitze); }
.night a:hover { color: #fff; }
.night h2, .night h3 { color: var(--hi-gold-spitze); }
.sand { background-color: var(--hi-sand); }
.champagner { background-color: var(--hi-champagner); }

/* ---------------------------------------------------------------
   4. Typografische Rollen
   --------------------------------------------------------------- */
.hi-script {
  font-family: var(--hi-font-script);
  font-weight: 400;
  color: var(--hi-wein);
  line-height: 1.05;
  letter-spacing: 0;
}
h1.hi-script { font-size: clamp(3rem, 7vw, 5.4rem); }
h2.hi-script { font-size: clamp(2.6rem, 5.5vw, 4.2rem); }
.hi-script--gold,
.night .hi-script {
  color: var(--hi-gold-hell);
  background: var(--hi-gold-verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-right: .2em; /* Schwungbuchstaben nicht abschneiden */
}
.hi-eyebrow {
  font-family: var(--hi-font-sans);
  font-weight: 400;
  font-size: .8rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--hi-wein);
}
.night .hi-eyebrow { color: var(--hi-gold-spitze); }
.hi-lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 300; max-width: 36em; }
.hi-note { font-size: .9rem; line-height: 1.55; opacity: .92; }
.hi-subtitle {
  font-family: var(--hi-font-serif);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 500;
  color: var(--hi-wein);
  margin-top: -.4rem;
}
.hi-ornament {
  display: block; width: 4.5rem; height: 1px; margin: 1.25rem 0 1.75rem;
  background: var(--hi-gold-verlauf);
}
.has-text-align-center .hi-ornament, .hi-center .hi-ornament { margin-left: auto; margin-right: auto; }
.hi-center { text-align: center; }

/* ---------------------------------------------------------------
   5. Buttons (eine gefuellte Goldflaeche pro Bildschirmhoehe)
   --------------------------------------------------------------- */
.wp-block-buttons { gap: .9rem; }
.wp-block-button__link, .hi-btn a, .hi-btn .wp-block-button__link {
  font-family: var(--hi-font-sans);
  font-weight: 500;
  font-size: .9rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  padding: 1rem 1.7rem;
  border-radius: 8px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform .2s var(--hi-ease), box-shadow .2s var(--hi-ease), background-color .2s var(--hi-ease), color .2s var(--hi-ease);
}
.hi-btn--gold .wp-block-button__link {
  background: var(--hi-knopf);
  color: var(--hi-papier);
  border-color: var(--hi-knopf-tief);
  box-shadow: 0 6px 18px rgba(112, 48, 47, .28);
}
.hi-btn--gold .wp-block-button__link:hover { background: var(--hi-knopf-tief); color: #fff; box-shadow: 0 8px 24px rgba(112, 48, 47, .38); transform: translateY(-1px); }
.hi-btn--outline-wein .wp-block-button__link {
  background: transparent;
  color: var(--hi-knopf);
  border-color: var(--hi-knopf);
}
.hi-btn--outline-wein .wp-block-button__link:hover { background: var(--hi-knopf); color: var(--hi-papier); }
.hi-btn--outline-gold .wp-block-button__link {
  background: transparent;
  color: var(--hi-gold-spitze);
  border-color: var(--hi-gold-hell);
}
.hi-btn--outline-gold .wp-block-button__link:hover { background: rgba(201, 161, 118, .12); color: #fff; }
.hi-btn--whatsapp .wp-block-button__link {
  background: var(--hi-whatsapp);
  color: var(--hi-nacht);
  border-color: var(--hi-whatsapp);
  padding-left: 1.5rem;
}
.hi-btn--whatsapp .wp-block-button__link::before {
  content: "";
  display: inline-block;
  width: 1.1em; height: 1.1em;
  margin-right: .6em;
  vertical-align: -.2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232A1517' d='M12.04 2a9.9 9.9 0 0 0-8.5 15l-1.4 5 5.2-1.4A9.9 9.9 0 1 0 12.04 2Zm0 18.1a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3.1.8.8-3-.2-.3a8.2 8.2 0 1 1 7 4Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.3-.4.8-1.4.1-.2 0-.3 0-.5l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.1.6a2.7 2.7 0 0 0 1.8-1.2c.2-.6.2-1.1.2-1.2l-.5-.3Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.hi-btn--formular .wp-block-button__link {
  background: var(--hi-knopf);
  color: var(--hi-papier);
  border-color: var(--hi-knopf-tief);
  box-shadow: 0 6px 18px rgba(112, 48, 47, .28);
  padding-left: 1.5rem;
}
.hi-btn--formular .wp-block-button__link::before {
  content: "";
  display: inline-block;
  width: 1.1em; height: 1.1em;
  margin-right: .6em;
  vertical-align: -.2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBEEDA' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E") no-repeat center / contain;
}
.hi-btn--formular .wp-block-button__link:hover { background: var(--hi-knopf-tief); color: #fff; box-shadow: 0 8px 24px rgba(112, 48, 47, .38); transform: translateY(-1px); }
.hi-btn--whatsapp .wp-block-button__link:hover { background: #1fbf5a; color: var(--hi-nacht); transform: translateY(-1px); }

/* ---------------------------------------------------------------
   6. Kopf: Wortmarke, Navigation, Button
   --------------------------------------------------------------- */
.hi-header {
  background: var(--hi-papier);
  border-bottom: 1px solid rgba(168, 121, 81, .28);
  position: relative;
  z-index: 20;
}
.hi-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 5rem;
  padding: .75rem 0;
}
.hi-wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: var(--hi-wein);
  line-height: 1;
}
.hi-wordmark:hover { color: var(--hi-wein); }
.hi-wordmark__text {
  font-family: var(--hi-font-serif);
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: .01em;
  line-height: 1;
}
.hi-wordmark__pulse {
  display: block;
  width: 100%;
  height: .7rem;
  margin-top: .15rem;
  color: var(--hi-gold);
  overflow: visible;
}
.night .hi-wordmark__text {
  background: var(--hi-gold-verlauf);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.night .hi-wordmark__pulse { color: var(--hi-gold-hell); }

.hi-header__nav { display: flex; align-items: center; gap: 1.25rem; }
.hi-nav { font-family: var(--hi-font-sans); font-weight: 400; font-size: .92rem; letter-spacing: .06em; color: var(--hi-wein); }
.hi-nav .wp-block-navigation-item__content { color: var(--hi-wein); text-decoration: none; padding: .35rem 0; }
.hi-nav .wp-block-navigation-item__content:hover { color: var(--hi-wein-2); text-decoration: underline; text-underline-offset: .35em; text-decoration-color: var(--hi-gold); }
.hi-nav .wp-block-navigation__container { gap: 1.6rem; }
/* Menuepunkt Home nur auf den Unterseiten */
body.home .hi-nav .hi-nav__home,
body.home .hi-nav .is-menu-open .hi-nav__home { display: none; }
.hi-header__cta { margin: 0; }
.hi-header__cta .wp-block-button__link { padding: .8rem 1.2rem; font-size: .78rem; white-space: nowrap; }

/* Hamburger-Menue in Wein, Button bleibt daneben sichtbar */
.hi-nav .wp-block-navigation__responsive-container-open,
.hi-nav .wp-block-navigation__responsive-container-close { color: var(--hi-wein); }
.hi-nav .wp-block-navigation__responsive-container-open svg,
.hi-nav .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }
.hi-nav .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--hi-papier);
  color: var(--hi-wein);
  padding: 4.5rem var(--hi-gutter) 2rem;
}
.hi-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.4rem; }
.hi-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: var(--hi-font-serif);
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: .01em;
}

/* ---------------------------------------------------------------
   7. Sektionen und Layout
   --------------------------------------------------------------- */
.hi-section { padding-top: var(--hi-section-y); padding-bottom: var(--hi-section-y); }
.hi-section__head { max-width: 42em; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.hi-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) { .hi-grid-2 { grid-template-columns: 1.1fr 1fr; } }

/* Hero */
.hi-hero { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(3rem, 7vw, 6rem); }
.hi-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.hi-hero__logo { margin: 0 auto; width: min(64vw, 280px); }
.hi-hero__logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 28px rgba(81, 15, 44, .12)); }
.hi-hero__text { text-align: center; }
.hi-hero__text .wp-block-buttons { justify-content: center; }
.hi-hero__claim { margin-bottom: .25em; }
.hi-hero__lead { margin: 1.25rem auto 1.75rem; }
.hi-hero__note { margin-top: 1.75rem; max-width: 40em; }
@media (min-width: 900px) {
  .hi-hero__grid { grid-template-columns: 1.15fr .85fr; }
  .hi-hero__logo { order: 2; width: min(34vw, 460px); margin: 0 0 0 auto; }
  .hi-hero__text { order: 1; text-align: left; }
  .hi-hero__text .wp-block-buttons { justify-content: flex-start; }
  .hi-hero__lead { margin-left: 0; }
}

/* Karten mit Ringsymbol */
.hi-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.hi-card {
  position: relative;
  background: rgba(255, 255, 255, .42);
  border: 1px solid rgba(168, 121, 81, .30);
  border-radius: var(--hi-radius);
  padding: 2rem 1.6rem 1.6rem;
}
.hi-card::before {
  content: "";
  display: block;
  width: 3.4rem; height: 3.4rem;
  margin-bottom: 1.1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23A87951' stroke-width='1.6'%3E%3Ccircle cx='32' cy='32' r='29'/%3E%3Ccircle cx='32' cy='32' r='20' opacity='.65'/%3E%3Ccircle cx='32' cy='32' r='11' opacity='.45'/%3E%3Ccircle cx='32' cy='32' r='2.6' fill='%23A87951' stroke='none'/%3E%3C/svg%3E") no-repeat center / contain;
}
.hi-card__title { font-size: 1.45rem; margin-bottom: .45rem; }
.hi-card__text { margin: 0; font-size: 1rem; }

/* Dunkle Sektion: Dein Koerper in Balance */
.hi-body__three {
  font-family: var(--hi-font-sans);
  font-weight: 400;
  font-size: .95rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--hi-gold-spitze);
  margin: 1rem 0 2.25rem;
}
.hi-body__list { display: grid; gap: 1.6rem; }
.hi-body__item {
  position: relative;
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: 1.1rem;
  align-items: start;
}
/* Goldenes Medaillon mit dunklem Flyer-Motiv, hebt sich vom Braun ab */
.hi-body__item::before {
  content: "";
  display: block;
  width: 4.2rem; height: 4.2rem;
  border-radius: 50%;
  border: 1.5px solid #F6E6C8;
  box-shadow: 0 0 22px rgba(232, 196, 140, .55), 0 3px 10px rgba(0, 0, 0, .35), inset 0 1px 2px rgba(255, 255, 255, .6), inset 0 -3px 6px rgba(120, 80, 45, .35);
  background-color: #C9A176;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 66%, 100%;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* Motive aus dem gedruckten Flyer, freigestellt und dunkel umgefaerbt */
.hi-body__item--cellulite::before { background-image: image-set(url("assets/img/icon-cellulite-dunkel.webp") type("image/webp"), url("assets/img/icon-cellulite-dunkel.png") type("image/png")), var(--hi-medaillon); }
.hi-body__item--dehnung::before { background-image: image-set(url("assets/img/icon-dehnung-dunkel.webp") type("image/webp"), url("assets/img/icon-dehnung-dunkel.png") type("image/png")), var(--hi-medaillon); }
.hi-body__item--bauch::before { background-image: image-set(url("assets/img/icon-bauch-dunkel.webp") type("image/webp"), url("assets/img/icon-bauch-dunkel.png") type("image/png")), var(--hi-medaillon); }
.hi-body__item--oberarm::before { background-image: image-set(url("assets/img/icon-oberarm-dunkel.webp") type("image/webp"), url("assets/img/icon-oberarm-dunkel.png") type("image/png")), var(--hi-medaillon); }
.hi-body__item--brust::before { background-image: image-set(url("assets/img/icon-brust-dunkel.webp") type("image/webp"), url("assets/img/icon-brust-dunkel.png") type("image/png")), var(--hi-medaillon); }
.hi-body__item--gesicht::before { background-image: image-set(url("assets/img/icon-gesicht-dunkel.webp") type("image/webp"), url("assets/img/icon-gesicht-dunkel.png") type("image/png")), var(--hi-medaillon); }
.hi-body__item--haare::before { background-image: image-set(url("assets/img/icon-haare-dunkel.webp") type("image/webp"), url("assets/img/icon-haare-dunkel.png") type("image/png")), var(--hi-medaillon); }
.hi-body__item--ruecken8::before { background-image: image-set(url("assets/img/icon-ruecken8-dunkel.webp") type("image/webp"), url("assets/img/icon-ruecken8-dunkel.png") type("image/png")), var(--hi-medaillon); }
.hi-body__item h3 {
  font-family: var(--hi-font-sans);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--hi-gold-spitze);
  margin: .55rem 0 .35rem;
}
.hi-body__item p { margin: 0; font-size: 1rem; }
/* Ganze Zeile (Symbol und Titel) fuehrt auf /behandlungen/ */
.hi-body__link {
  color: inherit;
  text-decoration: none;
  transition: color .3s ease;
}
.hi-body__link::after { content: ""; position: absolute; inset: 0; }
.hi-body__item:hover .hi-body__link,
.hi-body__link:focus-visible { color: #fff; }
.hi-body__item:hover::before,
.hi-body__item:has(.hi-body__link:focus-visible)::before {
  transform: scale(1.08);
  border-color: #fff;
  box-shadow: 0 0 34px rgba(246, 222, 180, .85), 0 4px 12px rgba(0, 0, 0, .4), inset 0 1px 2px rgba(255, 255, 255, .7), inset 0 -3px 6px rgba(120, 80, 45, .3);
}
.hi-body__link:focus-visible { outline: none; }
.hi-body__item:has(.hi-body__link:focus-visible) { outline: 1px solid var(--hi-gold-hell); outline-offset: .4rem; border-radius: 2.6rem; }
@media (prefers-reduced-motion: reduce) {
  .hi-body__item::before, .hi-body__link { transition: none; }
  .hi-body__item:hover::before, .hi-body__item:has(.hi-body__link:focus-visible)::before { transform: none; }
}
.hi-body__visual { text-align: center; }
/* Preislisten-Flyer auf /preise/: in Flyergroesse, nicht seitenbreit */
.hi-flyer { max-width: 600px; margin: 2.5rem 0 0; }
.hi-flyer img { display: block; width: 100%; height: auto; }
.hi-rings { width: min(100%, 520px); height: auto; display: block; margin: 0 auto; overflow: visible; }
.hi-body__closing { margin-top: 1.5rem; text-align: center; font-size: clamp(2.2rem, 4.5vw, 3.4rem); }

.hi-rings__ring { transform-origin: 300px 300px; transform-box: view-box; }
.hi-rings__glow { transform-origin: 300px 300px; transform-box: view-box; }
@keyframes hi-pulse {
  0%   { transform: scale(1);    opacity: .55; }
  50%  { transform: scale(1.045); opacity: 1; }
  100% { transform: scale(1);    opacity: .55; }
}
.hi-rings__ring--1 { animation: hi-pulse 6s var(--hi-ease) infinite; }
.hi-rings__ring--2 { animation: hi-pulse 6s var(--hi-ease) .8s infinite; }
.hi-rings__ring--3 { animation: hi-pulse 6s var(--hi-ease) 1.6s infinite; }
.hi-rings__ring--4 { animation: hi-pulse 6s var(--hi-ease) 2.4s infinite; }
.hi-rings__glow { animation: hi-pulse 6s var(--hi-ease) 1.2s infinite; }
@media (prefers-reduced-motion: reduce) {
  .hi-rings__ring, .hi-rings__glow { animation: none; opacity: .8; }
  html { scroll-behavior: auto; }
  .wp-block-button__link { transition: none; }
}

/* Wertezeile */
.hi-werte {
  padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(168, 121, 81, .28);
  border-bottom: 1px solid rgba(168, 121, 81, .28);
}
.hi-werte__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 0;
}
.hi-werte__item {
  flex: 1 1 12rem;
  margin: 0;
  text-align: center;
  font-family: var(--hi-font-sans);
  font-weight: 400;
  font-size: .82rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--hi-wein);
  padding: 0 1rem;
}
.hi-werte__item + .hi-werte__item { border-left: 1px solid rgba(168, 121, 81, .45); }
@media (max-width: 599px) { .hi-werte__item + .hi-werte__item { border-left: 0; } }
.hi-werte__item::before {
  content: "";
  display: block;
  width: 2.6rem; height: 2.6rem;
  margin: 0 auto .7rem;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.hi-werte__item--natuerlich::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23510F2C' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 36V20'/%3E%3Cpath d='M20 22c-8 0-13-5-14-13 8 0 13 5 14 13Z'/%3E%3Cpath d='M20 26c0-8 5-13 13-14-1 8-6 13-13 14Z'/%3E%3C/svg%3E"); }
.hi-werte__item--individuell::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23510F2C' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 34S6 25 6 15a7 7 0 0 1 14-3 7 7 0 0 1 14 3c0 10-14 19-14 19Z'/%3E%3C/svg%3E"); }
.hi-werte__item--schonend::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23510F2C' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 32c-4-3-6-8-5-14 3 2 5 6 5 14Zm0 0c4-3 6-8 5-14-3 2-5 6-5 14Z'/%3E%3Cpath d='M20 32c-6 0-11-2-14-7 5-2 10-1 14 7Zm0 0c6 0 11-2 14-7-5-2-10-1-14 7Z'/%3E%3Cpath d='M20 32c-2-6-1-12 0-18 1 6 2 12 0 18Z'/%3E%3C/svg%3E"); }

/* Ueber mich */
.hi-portrait {
  aspect-ratio: 4 / 5;
  width: min(100%, 420px);
  margin: 0 auto;
  background: var(--hi-sand);
  border: 1px solid rgba(168, 121, 81, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hi-portrait--bild {
  /* Traegt ein Bild statt der Platzhalterbeschriftung: Sandflaeche und
     Innenausrichtung entfallen, der Goldrahmen bleibt als Zierelement. */
  display: block;
  background: none;
  overflow: hidden;
}
.hi-portrait--bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hi-portrait p {
  margin: 0;
  font-family: var(--hi-font-sans);
  font-size: .78rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--hi-wein);
  padding: 1rem;
}
.hi-box {
  border: 1px solid var(--hi-gold);
  border-left: 3px solid var(--hi-gold);
  background: rgba(253, 241, 226, .7);
  padding: 1.1rem 1.3rem;
  font-size: .95rem;
  margin-top: 1.5rem;
}
.hi-box p { margin: 0; }

/* Erstgespraech */
.hi-cta { text-align: center; }
.hi-cta .hi-lead { margin-left: auto; margin-right: auto; max-width: 32em; }
.hi-cta .wp-block-buttons { justify-content: center; margin-top: 1.75rem; }
.hi-cta__phone { margin-top: 1.25rem; font-size: 1rem; }
.hi-cta__phone a { color: var(--hi-gold-spitze); text-decoration: none; border-bottom: 1px solid var(--hi-gold); }

/* Unterseiten */
.hi-page-head { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
/* hyphens: auto, weil word-break lange Titel sonst mitten im Wort abschneidet
   ("Pulsationsmassag / e?"). Mit Silbentrennung bricht dasselbe Wort an einer
   Fuge und mit Trennstrich. Greift nur, wo ein Wort ohnehin brechen muesste,
   die kurzen Titel der uebrigen Seiten bleiben unveraendert. Braucht lang am
   html-Element, das Theme setzt de-CH. */
.hi-page-head h1 {
  margin-bottom: .2em;
  -webkit-hyphens: auto;
  hyphens: auto;
  /* Mindestens sechs Zeichen nach dem Trennstrich, sonst bricht der Browser
     an der letzten moeglichen Fuge und laesst "ge?" allein auf der Zeile.
     Mit sechs trennt er an der Wortfuge: "Pulsations-massage?". Browser ohne
     Unterstuetzung ignorieren die Zeile und trennen wie bisher. */
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 6;
  hyphenate-limit-chars: 6 4 6;
}
.hi-page { padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: var(--hi-section-y); }
.hi-page > * + * { margin-top: 1.1em; }
.hi-page h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-top: 2.2rem; }
.hi-page h3 { margin-top: 1.6rem; }
.hi-page .hi-lead { margin-bottom: 1.5rem; }
.hi-list { display: grid; gap: 2.25rem; margin-top: 2rem; }
.hi-list__item { border-top: 1px solid rgba(168, 121, 81, .35); padding-top: 1.5rem; }
.hi-list__item h2, .hi-list__item h3 { margin-top: 0; }
.hi-list__meta {
  font-family: var(--hi-font-sans);
  font-size: .8rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--hi-wein);
  margin-bottom: .6rem;
}

/* Preistabelle: Betraege sind Textzellen, Layout haelt ohne Verschiebung */
.hi-preise { width: 100%; }
.hi-preise table { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: 1rem; }
.hi-preise th, .hi-preise td { text-align: left; padding: .9rem .6rem; border: 0; border-bottom: 1px solid rgba(168, 121, 81, .35); vertical-align: top; }
.hi-preise thead th { font-family: var(--hi-font-sans); font-weight: 500; font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: var(--hi-wein); border-bottom-color: var(--hi-gold); }
.hi-preise td:first-child { font-family: var(--hi-font-serif); font-size: 1.25rem; font-weight: 500; color: var(--hi-tinte); }
.hi-preise td:nth-child(2) { width: 22%; white-space: nowrap; }
.hi-preise td:last-child, .hi-preise th:last-child { width: 24%; text-align: right; color: var(--hi-wein); font-weight: 500; white-space: nowrap; }
@media (max-width: 599px) {
  .hi-preise table { font-size: .92rem; }
  .hi-preise td:first-child { font-size: 1.1rem; }
  .hi-preise td:nth-child(2) { width: 24%; }
  .hi-preise td:last-child, .hi-preise th:last-child { width: 28%; }
}

/* Kontakt */
.hi-kontakt { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 720px) { .hi-kontakt { grid-template-columns: 1fr 1fr; } }
.hi-kontakt__block { border-top: 1px solid rgba(168, 121, 81, .35); padding-top: 1.2rem; }
.hi-kontakt__block h2 { font-size: 1.5rem; margin: 0 0 .5rem; }
.hi-kontakt__block p { margin: 0 0 .5rem; }

/* 404 */
.hi-404 { text-align: center; padding-top: var(--hi-section-y); padding-bottom: var(--hi-section-y); }

/* ---------------------------------------------------------------
   8. Fuss
   --------------------------------------------------------------- */
.hi-footer { padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: 2rem; font-size: .95rem; }
.hi-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(201, 161, 118, .3);
}
@media (min-width: 760px) { .hi-footer__grid { grid-template-columns: 1.2fr 1fr .8fr; } }
.hi-footer h2 {
  font-family: var(--hi-font-sans);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--hi-gold-spitze);
  margin: 0 0 .8rem;
}
.hi-footer .hi-wordmark { margin-bottom: 1rem; }
.hi-footer .hi-wordmark__text { font-size: 1.7rem; }
.hi-footer p { margin: 0 0 .5rem; color: var(--hi-papier); }
.hi-footer a { color: var(--hi-gold-spitze); text-decoration: none; border-bottom: 1px solid rgba(201, 161, 118, .5); }
.hi-footer a:hover { color: #fff; border-bottom-color: #fff; }
.hi-footer__links { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin: 0; padding: 0; list-style: none; }
.hi-footer__legal { margin-top: 1.5rem; font-size: .85rem; opacity: .9; }
.hi-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; margin-top: 1.5rem; font-size: .85rem; }
.hi-footer__bottom p { margin: 0; }

/* ---------------------------------------------------------------
   9. Editor-Hilfen: Sektionen bleiben stabil, Text bleibt editierbar
   --------------------------------------------------------------- */
.editor-styles-wrapper .hi-hero__logo img { filter: none; }
.editor-styles-wrapper .night { color: var(--hi-papier); }

/* ---------------------------------------------------------------
   10. Abstimmung mit den Core-Layoutregeln
   --------------------------------------------------------------- */
.wp-block-separator.hi-ornament { border: 0; height: 1px; width: 4.5rem; background: var(--hi-gold-verlauf); opacity: 1; margin: 1.25rem 0 1.75rem; }
.hi-center .wp-block-separator.hi-ornament, .wp-block-separator.hi-ornament.aligncenter { margin-left: auto; margin-right: auto; }
.hi-hero__grid > *, .hi-cards > *, .hi-body__list > *, .hi-grid-2 > *, .hi-kontakt > *, .hi-list > *,
.hi-werte__row > *, .hi-footer__grid > *, .hi-body__item > * { margin-block-start: 0; }
.hi-hero__text > * + *, .hi-body__copy > * + * { margin-block-start: 0; }
.hi-main { padding-left: 0; padding-right: 0; }

/* Schmale Bildschirme: Kopf bleibt in einer Zeile, Wertezeile bleibt dreispaltig */
@media (max-width: 599px) {
  .hi-header__inner { gap: .5rem; min-height: 4.25rem; }
  .hi-wordmark__text { font-size: 1.55rem; }
  .hi-header__nav { gap: .5rem; }
  /* Menuesymbol nie stauchen; die Pulslinie unter der Wortmarke gibt nach */
  .hi-header__nav, .hi-nav { flex: 0 0 auto; }
  .hi-wordmark { flex: 0 1 auto; min-width: 0; }
  .hi-header__cta .wp-block-button__link { padding: .65rem .8rem; font-size: .68rem; letter-spacing: .1em; }
  .hi-werte__row { flex-wrap: nowrap; }
  .hi-werte__item { flex: 1 1 0; font-size: .66rem; letter-spacing: .16em; padding: 0 .3rem; }
  .hi-werte__item + .hi-werte__item { border-left: 1px solid rgba(168, 121, 81, .45); }
  .hi-werte__item::before { width: 2.1rem; height: 2.1rem; }
  .hi-body__three { font-size: .85rem; letter-spacing: .22em; }
  .hi-body__item { grid-template-columns: 3.4rem 1fr; gap: .9rem; }
  .hi-body__item::before { width: 3.4rem; height: 3.4rem; }
}

/* Sehr schmale Bildschirme (iPhone SE, 320 px): Menueknopf darf nicht
   verdraengt werden. Bei 599 px passte alles, bei 320 px hat der Termin-Knopf
   die Navigation auf null Breite gedrueckt. */
@media (max-width: 359px) {
  .hi-header__inner { gap: .35rem; }
  .hi-wordmark__text { font-size: 1.3rem; }
  .hi-header__nav { gap: .35rem; }
  .hi-nav { flex: 0 0 auto; }
  .hi-nav .wp-block-navigation__responsive-container-open svg { width: 26px; height: 26px; }
  .hi-header__cta .wp-block-button__link { padding: .55rem .6rem; font-size: .6rem; letter-spacing: .05em; }
}

/* Unterseiten: Lead linksbuendig, Zeilenlaenge begrenzt */
.hi-page .hi-lead { max-width: none; }
@media (min-width: 900px) { .hi-page .hi-lead { padding-right: 28%; } }

/* Mobilmenue: Papier-Hintergrund, Eintraege in Wein, linksbuendig */
.wp-block-navigation.hi-nav:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--hi-papier);
  color: var(--hi-wein);
}
.wp-block-navigation.hi-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation.hi-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: flex-start;
  justify-content: flex-start;
}
.wp-block-navigation.hi-nav:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation.hi-nav .wp-block-navigation__responsive-container.is-menu-open a {
  color: var(--hi-wein);
}
.wp-block-navigation.hi-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
  content: "";
  display: block;
  width: 2.5rem; height: 1px;
  margin-top: .6rem;
  background: var(--hi-gold-verlauf);
}
.wp-block-navigation.hi-nav .wp-block-navigation__responsive-container-close { color: var(--hi-wein); }

/* ---------------------------------------------------------------
   11. Abgleich mit dem Flyer: Hero-Stapel, Satin-Falten, Ruecken-Motiv, Wertezeile
   --------------------------------------------------------------- */
.silk {
  background-image:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 14%, rgba(255, 255, 255, .55) 19%, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 36%, rgba(255, 250, 240, .5) 41%, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0) 60%, rgba(201, 161, 118, .28) 65%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 82%, rgba(255, 255, 255, .45) 86%, rgba(255, 255, 255, 0) 91%),
    radial-gradient(120% 80% at 8% 12%, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(90% 70% at 92% 18%, rgba(241, 220, 184, .6) 0%, rgba(241, 220, 184, 0) 60%),
    radial-gradient(70% 60% at 70% 95%, rgba(238, 209, 186, .7) 0%, rgba(238, 209, 186, 0) 60%),
    linear-gradient(115deg, #FDF1E2 0%, #F3D9C0 26%, #FFF8EE 40%, #E9CBB0 58%, #F8E2CD 76%, #FDF1E2 100%);
}
.night {
  background-image:
    linear-gradient(118deg, rgba(201, 161, 118, 0) 22%, rgba(201, 161, 118, .22) 30%, rgba(201, 161, 118, 0) 37%, rgba(201, 161, 118, 0) 62%, rgba(201, 161, 118, .16) 68%, rgba(201, 161, 118, 0) 74%),
    radial-gradient(85% 60% at 82% 28%, rgba(168, 121, 81, .30) 0%, rgba(168, 121, 81, 0) 62%),
    radial-gradient(60% 50% at 12% 88%, rgba(92, 66, 42, .65) 0%, rgba(92, 51, 41, 0) 60%),
    linear-gradient(180deg, #5A452A 0%, #3E2E1E 52%, #2A1F14 100%);
}

.hi-hero { text-align: center; }

/* Hero wie der Flyer: goldener Seidengrund mit Lichtstrahlen und Glanz,
   helle Mitte, Bronze zum Rand. Aus dem Flyer als Vorlage erzeugt.
   Der silk-Verlauf bleibt als Rueckfall darunter, falls das Bild fehlt. */
.hi-hero.silk,
.hi-page-head.silk {
  background-color: #EACDAD;
  background-image:
    image-set(url("assets/img/hero-grund-1344.webp") type("image/webp"), url("assets/img/hero-grund-1344.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
}
@media (max-width: 899px) {
  .hi-hero.silk,
  .hi-page-head.silk {
    background-image:
      image-set(url("assets/img/hero-grund-900.webp") type("image/webp"), url("assets/img/hero-grund-900.jpg") type("image/jpeg"));
  }
}
.hi-hero__stack { display: flex; flex-direction: column; align-items: center; }
.hi-hero__stack > * { margin-block-start: 0; }
.hi-hero__brand { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin-bottom: 1.1rem; }
.hi-hero__logo { width: min(62vw, 240px); margin: 0; }
.hi-wordmark--hero { align-items: center; pointer-events: none; }
.hi-wordmark--hero .hi-wordmark__text { font-size: clamp(2.6rem, 8vw, 4rem); letter-spacing: 0; }
.hi-wordmark--hero .hi-wordmark__pulse { height: .9rem; width: 100%; }
.hi-hero__eyebrow { margin-bottom: 1.6rem; }
.hi-hero__claim { margin-bottom: .2em; max-width: 14em; }
.hi-hero__lead { margin: 1rem auto 1.5rem; max-width: 34em; }
.hi-hero__note { margin: 1.6rem auto 0; max-width: 40em; }
@media (min-width: 900px) {
  .hi-hero__logo { width: min(30vw, 340px); }
  .hi-hero__text, .hi-hero__grid { text-align: center; }
}

.hi-body__picture { display: block; width: min(100%, 520px); margin: 0 auto; }
.hi-body__picture img {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 50%, #000 55%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(75% 70% at 50% 50%, #000 55%, rgba(0, 0, 0, 0) 100%);
  filter: saturate(1.05) contrast(1.02);
}

.hi-werte__claim { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0 auto 1.75rem; }
.hi-preise--zeit td:first-child { white-space: nowrap; }
/* Vier Spalten: die Anmerkung darf umbrechen, die Tabelle scrollt im eigenen Rahmen */
.hi-preise--vier { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hi-preise--vier table { min-width: 40rem; table-layout: auto; }
.hi-preise--vier td:nth-child(3), .hi-preise--vier th:nth-child(3) { width: 14%; text-align: right; color: var(--hi-wein); font-weight: 500; white-space: nowrap; }
.hi-preise--vier td:last-child, .hi-preise--vier th:last-child { width: 34%; text-align: left; color: var(--hi-tinte); font-weight: 400; white-space: normal; font-size: .95rem; }
.hi-preise--zeit td:nth-child(2) { width: auto; white-space: normal; font-size: .95rem; color: var(--hi-tinte); }
.hi-preise--zeit td:nth-child(2), .hi-preise--zeit th:nth-child(2) { width: 46%; }

/* Hero: Emblem immer vor der Wortmarke; Tabellen auf schmalen Bildschirmen */
@media (min-width: 900px) { .hi-hero__logo { order: 0; margin: 0; } }
@media (max-width: 599px) {
  .hi-preise table { table-layout: auto; font-size: .9rem; }
  .hi-preise thead th { font-size: .62rem; letter-spacing: .1em; padding: .6rem .35rem; white-space: nowrap; }
  .hi-preise td { padding: .7rem .35rem; }
  .hi-preise td:first-child { font-size: 1rem; line-height: 1.3; }
  .hi-preise td:nth-child(2) { white-space: normal; width: auto; }
  .hi-preise td:last-child, .hi-preise th:last-child { width: auto; }
  .hi-preise--zeit td:first-child { white-space: nowrap; font-size: 1rem; }
  .hi-preise--zeit th:nth-child(2), .hi-preise--zeit td:nth-child(2) { display: none; }
}
.hi-body__picture img {
  -webkit-mask-image: radial-gradient(68% 62% at 50% 50%, #000 38%, rgba(0, 0, 0, 0) 96%);
  mask-image: radial-gradient(68% 62% at 50% 50%, #000 38%, rgba(0, 0, 0, 0) 96%);
}

/* Bild-Platzhalter: leere Flaechen in Sand mit Beschriftung, spaeter durch Bild-Block ersetzen */
.hi-placeholder {
  background: var(--hi-sand);
  border: 1px solid rgba(168, 121, 81, .35);
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; margin: 0;
}
.hi-placeholder p, .hi-portrait p {
  margin: 0; padding: 1rem;
  font-family: var(--hi-font-sans); font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; color: var(--hi-wein);
}
.hi-placeholder--wide { aspect-ratio: 16 / 9; }
.hi-placeholder--photo { aspect-ratio: 3 / 2; }
.hi-placeholder--square { aspect-ratio: 1 / 1; }
.hi-placeholder-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 1.5rem 0; }
.hi-placeholder-grid > * { margin-block-start: 0; }
@media (min-width: 600px) { .hi-placeholder-grid { grid-template-columns: repeat(3, 1fr); } }
.hi-section__intro { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.hi-section__intro > * { margin-block-start: 0; }
.hi-section__intro .hi-section__head { margin-bottom: 0; }
@media (min-width: 900px) { .hi-section__intro { grid-template-columns: 1.2fr 1fr; gap: 4rem; } }

/* ---------------------------------------------------------------
   12. Mobil-Fix Unterseiten, Rosé-Farbkonzept und Blätter aus dem Musterflyer
   --------------------------------------------------------------- */
/* Unterseiten: Hauptcontainer hat kein Padding, die Vollbreite-Gruppen bekommen es selbst */
.hi-main > .alignfull { margin-left: 0; margin-right: 0; padding-left: var(--hi-gutter); padding-right: var(--hi-gutter); }
.hi-main { overflow-x: clip; }

/* Satin hell: Champagner und Gold wie im Flyer. Die frueheren Rose- und
   Mauvetoene sind raus, sie waren die Quelle des Rosastichs. */
.silk {
  background-color: #F2DFC6;
  background-image:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 14%, rgba(255, 255, 255, .55) 19%, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 36%, rgba(255, 250, 240, .5) 41%, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0) 60%, rgba(201, 161, 118, .26) 65%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 82%, rgba(255, 255, 255, .45) 86%, rgba(255, 255, 255, 0) 91%),
    radial-gradient(120% 80% at 8% 12%, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(90% 70% at 92% 18%, rgba(243, 222, 191, .6) 0%, rgba(243, 222, 191, 0) 60%),
    radial-gradient(80% 60% at 20% 80%, rgba(216, 168, 144, .45) 0%, rgba(216, 168, 144, 0) 60%),
    radial-gradient(70% 60% at 75% 95%, rgba(192, 144, 120, .55) 0%, rgba(192, 144, 120, 0) 60%),
    linear-gradient(115deg, #FBEEDA 0%, #EFDCBC 22%, #FBF1E3 38%, #E5BDA1 55%, #D8AE8C 68%, #EFD9BE 84%, #F2DFC6 100%);
}
/* Satin dunkel: Bronze mit Goldwelle, unten Nacht. Farbtest 2026-09-22: Farbton +7 Grad (vorher Rotbraun #634A34/#4C3526/#2E2017) */
.night {
  background-color: #4C3926;
  background-image:
    linear-gradient(118deg, rgba(201, 161, 118, 0) 22%, rgba(201, 161, 118, .24) 30%, rgba(201, 161, 118, 0) 37%, rgba(201, 161, 118, 0) 62%, rgba(201, 161, 118, .16) 68%, rgba(201, 161, 118, 0) 74%),
    radial-gradient(85% 60% at 82% 28%, rgba(168, 121, 81, .32) 0%, rgba(168, 121, 81, 0) 62%),
    radial-gradient(60% 50% at 12% 88%, rgba(92, 66, 42, .65) 0%, rgba(92, 51, 41, 0) 60%),
    radial-gradient(50% 40% at 50% 50%, rgba(201, 161, 118, .12) 0%, rgba(201, 161, 118, 0) 70%),
    linear-gradient(180deg, #634F34 0%, #4C3926 48%, #2E2317 100%);
}

/* Blätter: oben links im Hero, unten links in der Kontaktsektion (gespiegelt) */
.hi-hero, .hi-cta { position: relative; overflow: hidden; }
.hi-hero > *, .hi-cta > * { position: relative; z-index: 1; }
.hi-hero::before, .hi-cta::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: clamp(96px, 17vw, 230px);
  aspect-ratio: 186 / 256;
  background: image-set(url("assets/img/blaetter.webp") type("image/webp"), url("assets/img/blaetter.png") type("image/png")) no-repeat center / contain;
  pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(81, 15, 44, .18));
}
.hi-hero::before { left: -.75rem; top: -.5rem; }
.hi-cta::after { left: -.5rem; bottom: -.75rem; transform: scaleY(-1); opacity: .9; }
/* Unterseiten: dieselben Blaetter im Titelband, rechts und gespiegelt,
   damit sie wie auf der rechten Flyerseite nach innen zeigen. */
.hi-page-head { position: relative; overflow: hidden; }
.hi-page-head > * { position: relative; z-index: 1; }
.hi-page-head::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -.75rem;
  top: -.5rem;
  width: clamp(96px, 15vw, 210px);
  aspect-ratio: 186 / 256;
  background: image-set(url("assets/img/blaetter.webp") type("image/webp"), url("assets/img/blaetter.png") type("image/png")) no-repeat center / contain;
  transform: scaleX(-1);
  pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(90, 28, 32, .18));
}
@media (max-width: 599px) {
  .hi-hero::before { width: 84px; left: -.5rem; top: -.35rem; }
  .hi-cta::after { width: 84px; }
  .hi-page-head::after { width: 84px; right: -.5rem; top: -.35rem; opacity: .85; }
  .hi-page-head h1 { padding-right: 76px; }
}

/* ==========================================================================
   Ausbau 2026-09-09: Methodenseite, Behandlungsseiten, Ratgeber, FAQ.
   Nutzt ausschliesslich die bestehenden Farbvariablen. Keine neuen Farben.
   ========================================================================== */

/* Klarstellung unter einem Angebotsnamen.
   Muss lesbar bleiben. Bewusst nicht grau, nicht kleiner als 0.9rem und nicht
   in einem Aufklappelement: Sie ist die rechtliche Absicherung der vier
   Angebotsnamen, die ein Ergebnis im Namen tragen. */
.hi-milderung {
	font-family: var(--hi-font-sans);
	font-style: normal;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--hi-wein);
	margin: .35rem 0 0;
}

.hi-milderung--block {
	font-style: normal;
	border-left: 2px solid var(--hi-gold);
	padding: .1rem 0 .1rem .9rem;
	margin: 1.5rem 0;
}

.night .hi-milderung,
.night .hi-milderung--block {
	color: var(--hi-gold-spitze);
}

/* Freistehende Antwort direkt unter einer Frage-Ueberschrift.
   Wird von Suchmaschinen und Assistenzsystemen einzeln herausgeloest, muss
   also allein verstaendlich bleiben. Beim Bauen niemals mit dem Folgeabsatz
   zusammenziehen. */
.hi-antwort {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--hi-tinte);
	border-left: 2px solid var(--hi-gold-hell);
	padding-left: 1.1rem;
	margin: .8rem 0 1.6rem;
	max-width: 62ch;
}

.night .hi-antwort {
	color: var(--hi-papier);
	border-left-color: var(--hi-gold);
}

/* Fragen und Antworten */
.hi-faq {
	margin-top: var(--hi-section-y);
}

.hi-faq__item {
	border-top: 1px solid rgba(168, 121, 81, .3);
	padding: 1.5rem 0;
}

.hi-faq__item:last-child {
	border-bottom: 1px solid rgba(168, 121, 81, .3);
}

.hi-faq__q {
	font-family: var(--hi-font-serif);
	font-weight: 600;
	font-size: 1.3rem;
	line-height: 1.3;
	color: var(--hi-wein);
	margin: 0 0 .6rem;
}

.hi-faq__a {
	margin: 0;
	max-width: 68ch;
}

/* Wann nicht gearbeitet wird.
   ACHTUNG: Dieser Abschnitt ist eine Ausschlussliste, kein Anwendungsgebiet.
   Er darf nicht als Karten oder Haekchenliste gestaltet werden, sonst liest
   er sich wie ein Leistungsversprechen und kippt ins rechtliche Gegenteil.
   Der einleitende Satz gehoert zwingend dazu. */
.hi-ausschluss {
	background: var(--hi-sand);
	border-radius: var(--hi-radius);
	padding: clamp(1.4rem, 3vw, 2.2rem);
	margin: 2rem 0;
}

.hi-ausschluss__list {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}

.hi-ausschluss__list li {
	position: relative;
	padding-left: 1.4rem;
	margin-bottom: .6rem;
	line-height: 1.6;
}

.hi-ausschluss__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .65em;
	width: .6rem;
	height: 1px;
	background: var(--hi-gold);
}

/* Vergleichs- und Preistabellen */
.hi-vergleich table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}

.hi-vergleich th,
.hi-vergleich td {
	text-align: left;
	padding: .7rem .8rem;
	border-bottom: 1px solid rgba(168, 121, 81, .28);
	vertical-align: top;
}

.hi-vergleich th {
	font-family: var(--hi-font-sans);
	font-weight: 500;
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hi-wein);
	border-bottom-width: 2px;
}

.hi-vergleich tr:last-child td {
	border-bottom: none;
}

/* Breite Tabellen scrollen in sich selbst, die Seite scrollt nie quer. */
.hi-vergleich {
	overflow-x: auto;
	margin: 1.8rem 0;
	-webkit-overflow-scrolling: touch;
}

.hi-vergleich table {
	min-width: 34rem;
}

/* Schmale Tabellen (zwei, drei kurze Spalten) passen aufs Handy und brauchen
   keinen eigenen Scrollbalken. */
.hi-vergleich--schmal table {
	min-width: 0;
}

/* Brotkrumen */
.hi-brotkrumen {
	font-family: var(--hi-font-sans);
	font-size: .82rem;
	color: var(--hi-gold-tief);
	margin-bottom: 1.2rem;
}

.hi-brotkrumen a {
	color: inherit;
}

/* Datumszeile und Urheberin ueber dem Text eines Ratgeberartikels.
   Inhalt kommt aus hi_prepend_artikeldatum, gepflegt wird er in
   hi_ratgeber_artikel in inc/schema.php. */
.hi-artikelkopf {
	font-family: var(--hi-font-sans);
	font-size: .82rem;
	color: var(--hi-gold-tief);
	margin: -.6rem 0 1.6rem;
}

/* Kurzantwort ganz oben im Artikel, vor dem Einstiegsabsatz.
   Steht dort, weil Suchmaschinen und Assistenzsysteme den Anfang einer Seite
   am ehesten als Antwort herausloesen. Sie muss ohne den Rest des Artikels
   stimmen und gehoert in 40 bis 60 Woertern gesagt. Beim Bauen nie laenger
   werden lassen, sonst ist sie nicht mehr zitierbar. */
.hi-kurz {
	background: var(--hi-champagner);
	border-left: 3px solid var(--hi-gold);
	border-radius: 0 6px 6px 0;
	padding: 1.1rem 1.3rem;
	margin: 0 0 1.8rem;
	max-width: 62ch;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--hi-tinte);
}

.hi-kurz strong {
	font-family: var(--hi-font-sans);
	font-weight: 600;
	font-size: .78rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--hi-gold-tief);
	display: block;
	margin-bottom: .35rem;
}

/* Verweise ans Artikelende. Halten die Ratgeberseiten untereinander
   verbunden, damit keine als einzelne Seite ohne Zusammenhang dasteht. */
.hi-weiter {
	border-top: 1px solid rgba(168, 121, 81, .3);
	margin-top: var(--hi-section-y);
	padding-top: 1.4rem;
}

.hi-weiter h2 {
	font-size: 1.15rem;
	margin: 0 0 .7rem;
}

.hi-weiter ul {
	margin: 0;
	padding-left: 1.1rem;
}

.hi-weiter li {
	margin-bottom: .45rem;
}

/* Platzhalter fuer Angaben, die nur Katy liefern kann.
   Auffaellig gestaltet, damit im Editor nichts uebersehen wird, und in
   gedeckten Marken-Farbtoenen, damit es auf einer versehentlich
   veroeffentlichten Seite nicht wie ein Fehler aussieht. */
.hi-platzhalter {
	background: repeating-linear-gradient(
		135deg,
		var(--hi-champagner) 0 12px,
		var(--hi-sand) 12px 24px
	);
	border: 1px dashed var(--hi-gold);
	border-radius: var(--hi-radius);
	padding: .8rem 1rem;
	font-family: var(--hi-font-sans);
	font-size: .9rem;
	color: var(--hi-wein);
	margin: 1rem 0;
}

/* Ratgeber-Uebersicht */
.hi-artikel {
	border-top: 1px solid rgba(168, 121, 81, .3);
	padding: 1.6rem 0;
}

.hi-artikel__title {
	font-family: var(--hi-font-serif);
	font-weight: 600;
	font-size: clamp(1.3rem, 2.4vw, 1.7rem);
	color: var(--hi-wein);
	margin: 0 0 .5rem;
}

.hi-artikel__text {
	margin: 0 0 .7rem;
	max-width: 68ch;
}

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

/* Der Claim im Hero ist seit dem Ausbau ein Absatz, nicht mehr die H1.
   Die H1 traegt jetzt das Suchwort ("Pulsationsmassage in Winterthur"), der
   Allura-Claim steht darunter. Ohne diese Regel faellt er auf Fliesstextgroesse
   zurueck, weil die bestehenden Groessen nur fuer h1.hi-script und h2.hi-script
   gelten. */
p.hi-script {
	font-size: clamp(2rem, 6vw, 3.2rem);
	line-height: 1.1;
	margin: .2rem 0 .6rem;
}

p.hi-script.hi-hero__claim {
	margin-bottom: .9rem;
}

/* Platzhalter inline, etwa innerhalb eines Listenpunkts im Ablauf.
   Gleiche Signalwirkung wie die Blockvariante, aber ohne Umbruch. */
span.hi-platzhalter {
	display: inline;
	padding: .1rem .4rem;
	margin: 0;
	border-width: 1px;
	font-size: .88em;
}

/* Nummerierte Ablaufprotokolle.
   Der zitierfaehige Kern der Methodenseite: ein Assistenzsystem kann die
   Schritte einzeln herausloesen, deshalb muss jeder Schritt fuer sich
   verstaendlich bleiben. */
.hi-ablauf {
	counter-reset: hi-schritt;
	list-style: none;
	margin: 1.6rem 0;
	padding: 0;
}

.hi-ablauf li {
	counter-increment: hi-schritt;
	position: relative;
	padding-left: 2.6rem;
	margin-bottom: 1.1rem;
	line-height: 1.65;
}

.hi-ablauf li::before {
	content: counter( hi-schritt );
	position: absolute;
	left: 0;
	top: .05em;
	width: 1.8rem;
	height: 1.8rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--hi-font-serif);
	font-weight: 600;
	font-size: .95rem;
	color: var(--hi-wein);
	border: 1px solid var(--hi-gold);
	border-radius: 50%;
}

.night .hi-ablauf li::before {
	color: var(--hi-gold-spitze);
	border-color: var(--hi-gold-hell);
}

/* Einwilligungsbanner.
   Erscheint nur, wenn ein zustimmungspflichtiger Dienst hinterlegt ist, und nur
   bis eine Entscheidung getroffen wurde. Unten angedockt statt als Sperrschicht
   ueber der Seite: Die Besucherin soll lesen koennen, worueber sie entscheidet. */
.hi-consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	padding: var(--hi-gutter);
	background: var(--hi-papier);
	border-top: 2px solid var(--hi-gold);
	box-shadow: 0 -8px 28px rgba(81, 15, 44, .14);
}

.hi-consent__box {
	max-width: var(--hi-content);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .8rem 2rem;
}

.hi-consent__titel {
	font-family: var(--hi-font-serif);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--hi-wein);
	margin: 0;
	flex-basis: 100%;
}

.hi-consent__text {
	margin: 0;
	font-size: .95rem;
	line-height: 1.55;
	max-width: 62ch;
	flex: 1 1 22rem;
}

.hi-consent__buttons {
	display: flex;
	gap: .6rem;
	flex-wrap: wrap;
}

/* Beide Schaltflaechen gleich gross und gleich gut erreichbar. Die Ablehnung
   darf nicht schwerer zu finden sein als die Zustimmung. */
.hi-consent__btn {
	font-family: var(--hi-font-sans);
	font-weight: 500;
	font-size: .82rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .8rem 1.4rem;
	border-radius: var(--hi-radius);
	border: 1px solid var(--hi-wein);
	background: transparent;
	color: var(--hi-wein);
	cursor: pointer;
	transition: background var(--hi-duration-normal, .3s) var(--hi-ease),
	            color var(--hi-duration-normal, .3s) var(--hi-ease);
}

.hi-consent__btn:hover,
.hi-consent__btn:focus-visible {
	background: var(--hi-wein);
	color: var(--hi-papier);
}

.hi-consent__btn--ja {
	background: var(--hi-gold-verlauf);
	border-color: transparent;
	color: var(--hi-tinte);
}

.hi-consent__btn--ja:hover,
.hi-consent__btn--ja:focus-visible {
	background: var(--hi-wein);
	color: var(--hi-papier);
}

@media (max-width: 599px) {
	.hi-consent__buttons { width: 100%; }
	.hi-consent__btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.hi-consent__btn { transition: none; }
}

/* Der Link zu den Cookie-Einstellungen im Fuss erscheint nur, wenn ein
   zustimmungspflichtiger Dienst hinterlegt ist. Ohne Dienst gibt es nichts
   zu widerrufen, der Link waere irrefuehrend. Die Klasse setzt inc/consent.php. */
.hi-consent-link { display: none; }
.hi-hat-einwilligung .hi-consent-link { display: inline; }

/* Fotos im Seitentext.
   Feste Masse im Markup verhindern den Layoutsprung beim Nachladen, deshalb
   traegt das Bild width und height und die CSS-Regel rechnet nur die Anzeige. */
.hi-bild {
	margin: 2.2rem 0;
}

.hi-bild img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--hi-radius);
}

.hi-bild--wide {
	max-width: 800px;
}
.hi-bild--square {
	max-width: 360px;
	margin: 0;
}
.hi-bild--square img { aspect-ratio: 1 / 1; object-fit: cover; }
/* Raster fuer drei quadratische Bilder, gleiche Masse wie hi-placeholder-grid */
.hi-bild-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 1.5rem 0; }
.hi-bild-grid > * { margin-block-start: 0; }
@media (min-width: 600px) { .hi-bild-grid { grid-template-columns: repeat(3, 1fr); } .hi-bild-grid--2, .hi-placeholder-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; } }

/* ---------------------------------------------------------------
   Behandlungen (Fassung 2026-09-22): Zonen, Dauer, Hinweis,
   Bildstrecke, Kombination
   --------------------------------------------------------------- */
.hi-zonen { margin-top: clamp(2rem, 5vw, 3.5rem); }
.hi-zone {
  display: grid;
  gap: 1.25rem 3rem;
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  border-top: 1px solid rgba(168, 121, 81, .35);
}
.hi-zone:last-child { border-bottom: 1px solid rgba(168, 121, 81, .35); }
.hi-zone > *, .hi-zone__kopf > *, .hi-zone__text > * { margin-block-start: 0; }
@media (min-width: 900px) { .hi-zone { grid-template-columns: minmax(16rem, 1fr) 2fr; } }
/* Goldenes Medaillon mit Flyer-Motiv, wie auf der Startseite */
.hi-zone__kopf::before {
  content: "";
  display: block;
  width: 3.6rem; height: 3.6rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  border: 1.5px solid #F6E6C8;
  box-shadow: 0 0 16px rgba(232, 196, 140, .45), 0 3px 8px rgba(62, 42, 30, .18), inset 0 1px 2px rgba(255, 255, 255, .6), inset 0 -3px 6px rgba(120, 80, 45, .3);
  background-color: #C9A176;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 66%, 100%;
}
.hi-zone--gesicht .hi-zone__kopf::before { background-image: image-set(url("assets/img/icon-gesicht-dunkel.webp") type("image/webp"), url("assets/img/icon-gesicht-dunkel.png") type("image/png")), var(--hi-medaillon); }
.hi-zone--ruecken .hi-zone__kopf::before { background-image: image-set(url("assets/img/icon-ruecken8-dunkel.webp") type("image/webp"), url("assets/img/icon-ruecken8-dunkel.png") type("image/png")), var(--hi-medaillon); }
.hi-zone--haare .hi-zone__kopf::before { background-image: image-set(url("assets/img/icon-haare-dunkel.webp") type("image/webp"), url("assets/img/icon-haare-dunkel.png") type("image/png")), var(--hi-medaillon); }
.hi-zone--cellulite .hi-zone__kopf::before { background-image: image-set(url("assets/img/icon-cellulite-dunkel.webp") type("image/webp"), url("assets/img/icon-cellulite-dunkel.png") type("image/png")), var(--hi-medaillon); }
.hi-zone--dehnung .hi-zone__kopf::before { background-image: image-set(url("assets/img/icon-dehnung-dunkel.webp") type("image/webp"), url("assets/img/icon-dehnung-dunkel.png") type("image/png")), var(--hi-medaillon); }
.hi-zone--bauch .hi-zone__kopf::before { background-image: image-set(url("assets/img/icon-bauch-dunkel.webp") type("image/webp"), url("assets/img/icon-bauch-dunkel.png") type("image/png")), var(--hi-medaillon); }
.hi-zone--oberarm .hi-zone__kopf::before { background-image: image-set(url("assets/img/icon-oberarm-dunkel.webp") type("image/webp"), url("assets/img/icon-oberarm-dunkel.png") type("image/png")), var(--hi-medaillon); }
.hi-zone--brust .hi-zone__kopf::before { background-image: image-set(url("assets/img/icon-brust-dunkel.webp") type("image/webp"), url("assets/img/icon-brust-dunkel.png") type("image/png")), var(--hi-medaillon); }
.hi-page .hi-zone h2 { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
/* Sprungziele der acht Punkte auf der Startseite: nicht buendig an den Rand */
.hi-zone[id] { scroll-margin-top: 1rem; }
.hi-dauer {
  display: inline-block;
  margin: .9rem 0 0;
  font-family: var(--hi-font-sans);
  font-weight: 500;
  font-size: .9rem;
  line-height: 1.4;
  color: var(--hi-wein);
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(168, 121, 81, .55);
  border-radius: 999px;
  padding: .45rem 1rem;
}
/* Mehrzeilige Dauer (Cellulite: Vorder- und Rueckseite) als Kasten statt Pille */
.hi-dauer--liste { border-radius: var(--hi-radius); }
/* Einleitung: "Dein Koerper. Deine Behandlung. Deine Zeit." in Schreibschrift */
.hi-page .hi-intro__claim { font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.2; color: var(--hi-wein); margin: .2em 0 .5em; }
.hi-zone__text > * + * { margin-top: 1em; }
.hi-zone__intro { font-size: 1.1rem; }
.hi-hinweis {
  margin-top: 1.4rem;
  border-left: 3px solid var(--hi-wein);
  background: rgba(90, 28, 32, .05);
  border-radius: 0 var(--hi-radius) var(--hi-radius) 0;
  padding: 1rem 1.25rem;
}
.hi-hinweis > * { margin-block-start: 0; }
.hi-page .hi-hinweis h3 {
  margin: 0 0 .35rem;
  font-family: var(--hi-font-sans);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hi-wein);
}
.hi-hinweis p { margin: 0; font-size: .95rem; }

/* Einzelbild zwischen den Zonen und der Haeufigkeit, gleich wie das Bild oben (hi-bild--wide) */
.hi-strecke { max-width: 800px; margin-top: clamp(2.5rem, 6vw, 4rem); }
.hi-strecke__bild { margin: 0; }
.hi-strecke__bild picture { display: block; }
.hi-strecke__bild img { display: block; width: 100%; height: auto; border-radius: var(--hi-radius); }

.hi-page .hi-haeufigkeit { max-width: 46rem; margin-top: clamp(2.5rem, 6vw, 4rem); }
.hi-haeufigkeit > * + * { margin-top: 1em; }
.hi-page .hi-haeufigkeit h2 { margin-top: 0; }

.hi-page .hi-kombi {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  background: var(--hi-champagner);
  border-radius: var(--hi-radius);
  padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 4vw, 3rem);
  text-align: center;
}
.hi-kombi > * { margin-block-start: 0; }
.hi-page .hi-kombi h2 { margin-top: 0; }
.hi-kombi p { max-width: 36em; margin: 1rem auto 0; }
.hi-kombi .hi-kombi__antwort { font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1.2; color: var(--hi-wein); margin-top: .75rem; }

/* ---------------------------------------------------------------
   Kontaktformular (inc/kontaktformular.php), auf /kontakt/
   --------------------------------------------------------------- */
/* Das Layout zentriert direkte Kinder, deshalb begrenzt nicht .hi-kf die Breite, sondern das Formular */
.hi-kf { max-width: none; margin-top: 1rem; }
.hi-kf__form, .hi-kf__meldung { max-width: 46rem; }
.hi-kf__form { display: grid; gap: 1.1rem; }
.hi-kf__form > *, .hi-kf__zeile > * { margin-block-start: 0; }
.hi-kf__zeile { display: grid; gap: 1.1rem; }
@media (min-width: 700px) { .hi-kf__zeile { grid-template-columns: 1fr 1fr; } }
.hi-kf__feld { margin: 0; display: grid; gap: .4rem; min-width: 0; }
.hi-kf label {
  font-family: var(--hi-font-sans);
  font-weight: 500;
  font-size: .9rem;
  color: var(--hi-wein);
}
.hi-kf__frei { font-weight: 400; opacity: .75; }
.hi-kf input[type="text"],
.hi-kf input[type="email"],
.hi-kf input[type="tel"],
.hi-kf textarea {
  box-sizing: border-box;
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--hi-tinte);
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(168, 121, 81, .55);
  border-radius: var(--hi-radius);
  padding: .75rem .9rem;
  transition: border-color .2s var(--hi-ease), background-color .2s var(--hi-ease);
}
.hi-kf textarea { resize: vertical; min-height: 9rem; }
.hi-kf input:focus, .hi-kf textarea:focus {
  outline: 2px solid var(--hi-gold);
  outline-offset: 1px;
  border-color: var(--hi-gold);
  background: #fff;
}
/* Falle fuer Bots, fuer Menschen unsichtbar */
.hi-kf__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hi-kf__hinweis { margin: 0; font-size: .85rem; opacity: .9; }
.hi-kf__senden { margin: 0; }
.hi-kf__knopf {
  cursor: pointer;
  font-family: var(--hi-font-sans);
  font-weight: 500;
  font-size: .9rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  padding: 1rem 1.7rem;
  border-radius: 8px;
  background: var(--hi-knopf);
  color: var(--hi-papier);
  border: 1px solid var(--hi-knopf-tief);
  box-shadow: 0 6px 18px rgba(112, 48, 47, .28);
  transition: transform .2s var(--hi-ease), box-shadow .2s var(--hi-ease), background-color .2s var(--hi-ease);
}
.hi-kf__knopf:hover { background: var(--hi-knopf-tief); color: #fff; box-shadow: 0 8px 24px rgba(112, 48, 47, .38); transform: translateY(-1px); }
.hi-kf__knopf:focus-visible { outline: 2px solid var(--hi-gold); outline-offset: 3px; }
.hi-kf__meldung {
  margin: 0 0 1.25rem;
  padding: 1rem 1.2rem;
  border-radius: 0 var(--hi-radius) var(--hi-radius) 0;
  border-left: 3px solid var(--hi-gold);
  background: rgba(255, 255, 255, .6);
}
.hi-kf__meldung--fehler { border-left-color: var(--hi-wein); background: rgba(90, 28, 32, .06); }

/* Maderotherapie und Brasilianische Lymphdrainage auf /behandlungen/ (2026-10-06): gleiche
   Zeilen wie die acht Bereiche, aber ohne Medaillon, dafuer gibt es kein Flyer-Motiv. */
.hi-zone--ohne-icon .hi-zone__kopf::before { display: none; }
.hi-page .hi-zone h3 { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }

/* Kopfnavigation mit fuenf Punkten seit 2026-10-06 (Maderotherapie, Brasilianische Lymphdrainage):
   Zwischen 980 und 1240 px enger setzen, darunter schon das Handymenue statt erst ab 600 px,
   sonst bricht die Navigation auf zwei Zeilen um. */
@media (min-width: 980px) and (max-width: 1240px) {
  .hi-nav { font-size: .86rem; letter-spacing: .03em; }
  .hi-nav .wp-block-navigation__container { gap: 1.1rem; flex-wrap: nowrap; }
}
@media (min-width: 600px) and (max-width: 979px) {
  .hi-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .hi-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* "Jetzt buchen" im Kopf (Treatwell, Auftrag Andy 2026-10-16): Hauptknopf in Wein mit Kalender.
   Ersetzt den frueheren WhatsApp-Knopf im Kopf: Neben fuenf Menuepunkten passt nur ein Knopf, mit
   zweien brach die Navigation am Desktop auf zwei bis drei Zeilen um. WhatsApp bleibt in allen
   "Termin anfragen"-Bloecken der Seiten. */
.hi-header__cta { gap: .5rem; flex-wrap: nowrap; }
.hi-btn--buchen .wp-block-button__link {
  background: var(--hi-knopf);
  color: var(--hi-papier);
  border-color: var(--hi-knopf-tief);
  box-shadow: 0 6px 18px rgba(112, 48, 47, .28);
  padding-left: 1.5rem;
}
.hi-btn--buchen .wp-block-button__link::before {
  content: "";
  display: inline-block;
  width: 1.1em; height: 1.1em;
  margin-right: .6em;
  vertical-align: -.2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBEEDA' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat center / contain;
}
.hi-btn--buchen .wp-block-button__link:hover { background: var(--hi-knopf-tief); color: #fff; box-shadow: 0 8px 24px rgba(112, 48, 47, .38); transform: translateY(-1px); }
@media (max-width: 599px) {
  .hi-header__cta .hi-btn--buchen .wp-block-button__link { padding-left: .8rem; }
}