/* ==========================================================================
   pinakari.ch — Stylesheet

   Farben, Schriften, Spaltenbreiten und Abschnittshöhen sind am Original
   ausgemessen (Browserbreite 1280, Seitenbreite 1265). Die Zahlen in den
   Kommentaren sind die gemessenen Werte.
   Keine Wix-Abhängigkeit; alles hier ist frei editierbar.
   ========================================================================== */

:root {
  /* --- Farben (aus der Wix-Palette) --- */
  --akzent:        #406C89;   /* Signaturblau, Wix color_18 — Anführungszeichen */
  --akzent-dunkel: #2B485B;
  --lavendel:      #E6E6FA;   /* Wix color_21 — Flächenknöpfe */
  --text:          #000000;
  --text-leise:    #757575;   /* Wix color_14 — Überschrift «Kontakt» */
  --linie:         #C7C7C7;
  --rand-dunkel:   #2E2E32;   /* Rand des festen Buchungsknopfes */
  --seite:         #FFFFFF;

  /* --- Schriften --- */
  --font-titel: raleway, 'ersatz-titel', "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text:  "avenir-lt-w01_35-light1475496", "Avenir Next", Avenir,
                'ersatz-text', "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* --- Spalten (an zwei Fensterbreiten ausgemessen: Seite 1265 und 1585) ---

     Das Original ist fluid. Der Inhaltscontainer hält links und rechts 80 px
     und wächst mit; der übrige Freiraum verteilt sich in festen Verhältnissen.
     Daraus ergibt sich der leichte Linksversatz der zweispaltigen Abschnitte —
     er ist kein Zufall, sondern folgt dem Raster 1fr : 3fr : 2fr. */
  --aussenrand:   80px;   /* Rand des Inhaltscontainers */
  --spalte-breit: 980px;  /* Fliesstext, seitenmittig */
  --titel-sp:     316px;  /* Titelspalte links */
  --text-sp:      594px;  /* Textspalte rechts */

  --rand: 24px;
  --kopf-hoehe: 156px;    /* gemessene Kopfhöhe */
  --sprung-luft: 24px;    /* Luft zwischen Kopfunterkante und Überschrift */
  --titel-vorlauf: 44px;  /* Innenabstand der Abschnitte, oben wie unten.
                             Zwei Abschnitte ergeben also 88px Zwischenraum;
                             das Original liegt zwischen 46 und 117. */
  --vorlauf-erster: 96px; /* der Abschnitt direkt unter dem Titelbild */
  /* Der Kopf sitzt buendig oben und laeuft von Rand zu Rand; es gibt
     keine Luft mehr um ihn herum. Der Wert bleibt als Groesse stehen,
     weil vier Formeln ihn mitrechnen (Sprungabstand, Verlaufshoehe,
     Klappmenue). Auf 0 gesetzt stimmen sie alle weiter. */
  --kopf-abstand: 0px;

  /* Hinweis zur Farbe des Aquarellauftrags: Sie steht NICHT hier, sondern
     dreimal als rgb(64,196,220) in den SVG-Angaben im Block .nav__schimmer.
     Eingebettete SVG können keine CSS-Variablen lesen. Wer die Farbe
     ändert, muss alle drei Stellen anfassen. */

  /* Die Farbe der obersten sichtbaren Bildzeile des Titelbilds, dort
     gemessen. Nicht die erste Zeile der Datei (#90A3A6): Das Bild wird mit
     object-fit auf die Anzeigehöhe beschnitten, oben fallen rund 30
     Quellzeilen weg. Sichtbar beginnt es bei #99AAAD.
     Der Verlauf hinter dem Kopfbereich endet genau in diesem Ton, damit
     die Fläche ohne Kante ins Bild übergeht. */
  --hero-kante: 153, 170, 173;     /* #99AAAD */
  --hero-uebergang: 48px;          /* Strecke, auf der das Bild oben einblendet */
  --hero-auslauf:   96px;          /* Strecke, auf der es unten ausläuft */
}

/* --- Grundlagen ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Der Kopf bleibt beim Scrollen stehen, also muss der Sprungabstand seine
   Höhe berücksichtigen. */
html {
  scroll-behavior: smooth;
  /* Wohin ein Sprungziel rutscht. Der Kopf endet bei --kopf-hoehe;
     darunter soll die Überschrift stehen, nicht die obere
     Kante des Abschnitts. Weil die Abschnitte oben --titel-vorlauf leer
     lassen, muss dieser Vorlauf hier wieder abgezogen werden — sonst
     addiert er sich zum Abstand und die Überschrift rutscht zu weit nach
     unten. Genau das war vorher der Fall: rund 90px Leerraum.

     Am Handy stimmt die Rechnung von selbst, weil --kopf-hoehe dort
     kleiner gesetzt ist. */
  scroll-padding-top: calc(var(--kopf-hoehe) + var(--kopf-abstand)
                           + var(--sprung-luft) - var(--titel-vorlauf));
}

/* Zwei Abschnitte haben oben nicht die üblichen --titel-vorlauf, deshalb
   säßen ihre Überschriften sonst zu tief beziehungsweise unter dem Kopf.
   scroll-margin-top wird zur Sprungformel dazugerechnet und gleicht die
   Abweichung genau aus. */
#willkommen { scroll-margin-top: calc(var(--titel-vorlauf) - var(--vorlauf-erster)); }
#begleitung { scroll-margin-top: var(--titel-vorlauf); }   /* hat gar keinen Vorlauf */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  /* Der Streifen über dem Titelbild. Er beginnt weiss, nimmt nach unten
     Farbe auf und endet satt in der Farbe der obersten Bildzeile — genau
     auf der Höhe, wo das Bild anfängt. Dadurch gibt es dort keine Kante,
     und der schwebende Kopfbereich sitzt nicht auf einem weissen Balken.
     Die Höhe folgt dem Kopf, gilt also auch im Klappmenü-Format.
     (--kopf-abstand steht seit dem durchgehenden Kopf auf 0.) */
  background:
    linear-gradient(180deg,
      rgba(var(--hero-kante), 0)   0%,
      rgba(var(--hero-kante), .16) 30%,
      rgba(var(--hero-kante), .52) 58%,
      rgba(var(--hero-kante), 1)   78%,
      rgba(var(--hero-kante), 1)   100%)
      /* Dieselbe Breite und Mitte wie das Titelbild darunter. Bliebe der
         Verlauf ueber die volle Seitenbreite, endete er neben dem Bild in
         einer harten Kante gegen Weiss. */
      no-repeat top center / min(100%, 1960px) calc(var(--kopf-hoehe) + var(--kopf-abstand) + var(--hero-uebergang)),
    var(--seite);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.75;          /* 18 × 1.75 = 31.5 px Zeilenabstand */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--akzent); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-titel);
  font-weight: 400;
  margin: 0;
  color: var(--text);
}

/* Im Original haben Absätze keinen Abstand zueinander; Luft entsteht durch
   bewusst leere Zeilen. Genau so wird es hier nachgebildet. */
p { margin: 0; }

/* Hülle um Fliesstext, den die Redaktion im Kirby-Panel bearbeitet. Sie
   trägt bewusst keine eigene Gestaltung — die Absätze darin sollen sich
   genau wie handgeschriebene verhalten. Die Klasse existiert, damit die
   Herkunft im Markup erkennbar bleibt und man später gezielt eingreifen
   kann, ohne jeden Abschnitt einzeln zu suchen. */
.feldtext > :last-child { margin-bottom: 0; }
.leerzeile { height: 1.75em; }

.sr-only {
  position: absolute; 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: -9999px; top: 0; z-index: 200;
  background: var(--akzent); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 8px; top: 8px; }

/* --- Seitenraster --------------------------------------------------------- */

/* Breite Textspalte: Angebot, Persönlich, Termine & Kosten — seitenmittig.
   Gemessen x=143 bei Seite 1265 und x=303 bei 1585, beides zentriert. */
.spalte-breit { width: min(100% - 2 * var(--rand), var(--spalte-breit)); margin-inline: auto; }

/* Zwei Spalten: Titel links, Text rechts, gleiche Starthöhe.
   Freiraum im Verhältnis 1 : 3 : 2 auf Rand links, Zwischenraum, Rand rechts.
   Nachgerechnet: Seite 1265 → Titel x=106, Text x=526.
                  Seite 1585 → Titel x=159, Text x=740. */
.zweispalt {
  /* Oben gedeckelt und mittig. Die freien Anteile 1fr : 3fr : 2fr verteilen
     jeden Zuwachs weiter, deshalb wuchs die Luecke zwischen Titelspalte und
     Fliesstext von 184 Pixel bei 1440 auf 1184 bei 3440. Der Deckel ist die
     Inhaltsbreite am oberen Messpunkt: 1585 minus zweimal 80. */
  width: min(100% - 2 * var(--aussenrand), 1425px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr var(--titel-sp) 3fr var(--text-sp) 2fr;
  align-items: start;
}
.zweispalt__titel {
  grid-column: 2;
  font-size: 38px; line-height: 1.35;
  color: var(--akzent);   /* im Original stehen alle fünf Titel in #406C89 */
  /* Der Titelkasten sitzt im Original durchgängig 6 px vor der Rasterspalte;
     die feste Breite hält den Zeilenumbruch identisch. */
  margin-left: -6px; width: var(--titel-sp);
}
.zweispalt__text { grid-column: 4; font-size: 18px; }
/* «Mein Angebot» und «Unser Termin» laufen im Original auf 32.4 px
   Zeilenabstand (1.8), die übrigen drei Abschnitte auf 31.5 px (1.75). */
.zweispalt__text--weit { line-height: 1.8; }

/* Unterhalb der Rasterbreite (910 px Inhalt + 160 px Rand) gestapelt */
@media (max-width: 1100px) {
  .zweispalt {
    margin-inline: auto;
    width: min(100% - 2 * var(--rand), var(--spalte-breit));
    /* minmax(0, 1fr) und nicht 1fr: Die Kurzform bedeutet
       minmax(auto, 1fr), und das auto zwingt die Spur auf die Breite ihres
       breitesten Inhalts. Der Titel traegt feste 316 Pixel, die Spur wuchs
       also mit und schob die Seite hinaus. Mit null als Untergrenze folgt
       die Spur dem Behaelter. */
    grid-template-columns: minmax(0, 1fr); row-gap: 20px;
  }
  /* max-width und nicht width: Die festen 316 Pixel halten den gemessenen
     Zeilenumbruch und bleiben stehen, wo sie hineinpassen. Nur darunter,
     also bis 364 Pixel Fensterbreite, weicht der Kasten zurueck. Vorher
     ragte er dort hinaus und machte die Seite waagrecht scrollbar: bei 320
     gemessene 340 Pixel Dokumentbreite. */
  .zweispalt__titel { grid-column: 1; margin-left: 0; font-size: 32px;
                      max-width: 100%; }
  .zweispalt__text  { grid-column: 1; }
}

/* Abschnittshöhen und -abstände (gemessen) */
/* An --titel-vorlauf gekoppelt: Derselbe Wert steuert die Sprungformel
   weiter oben. Stünde die Zahl hier noch einmal fest, würden die beiden
   beim nächsten Ändern auseinanderlaufen und die Überschriften nach
   einem Klick auf den falschen Platz rutschen. */
.abschnitt { padding: var(--titel-vorlauf) 0; }
/* Der Abschnitt direkt unter dem Titelbild bekommt zusätzliche Luft, damit
   der Text nicht am auslaufenden Bildrand klebt. */
.hero + .abschnitt { padding-top: var(--vorlauf-erster); }

/* --- Kopfbereich (gemessen: Höhe 156, Logo 107×110 bei x=125,y=20) -------- */
/* Durchgehender, deckender Kopfbereich.
   Er läuft von Rand zu Rand, sitzt bündig oben an und bleibt beim Scrollen
   stehen. Vorher schwebte er als gerundete Insel mit Abstand ringsum und
   liess den Hintergrund durchscheinen; beides ist bewusst aufgegeben.
   Ein durchgehender Balken trennt Kopf und Inhalt klarer, und deckendes
   Weiss hält die Menüschrift über jedem Bildinhalt lesbar.

   Die Masse des Inhalts sind davon unberührt. Logo und Menü stehen weiter
   an ihrem gemessenen Platz, weil die Begrenzung auf 1460 Pixel von .kopf
   nach .kopf__innen gewandert ist. */
.kopf {
  position: sticky; top: 0; z-index: 100;
  width: 100%;
  margin: 0;
  border-radius: 0;
  /* Deckend, ohne jeden Durchblick. */
  background: var(--seite);
  /* Kein backdrop-filter. Er hätte jetzt gar nichts mehr zu zeichnen,
     weil nichts mehr durchscheint. Schon bei 92 Prozent Deckung war er
     unsichtbar (nachgemessen: mittlere Abweichung 0.097 von 255, grösste 2)
     und trotzdem der teuerste einzelne Posten beim Scrollen, weil der
     Hintergrund des Kopfes sich bei jedem gescrollten Bildpunkt ändert.
     Wer ihn zurückholt, holt sich das Ruckeln mit. */
  /* Eine feine Linie als Abschluss, darunter ein flacher Schatten. Der
     frühere Innenrand aus hellem Weiss ist weg; er zeichnete die Kante
     einer schwebenden Fläche nach, die es nicht mehr gibt. */
  box-shadow:
    0 1px 0 rgba(0, 0, 0, .06),
    0 12px 28px -20px rgba(0, 0, 0, .22);
  transition: box-shadow .3s ease;
}
/* Der Kopf ist im Original asymmetrisch und fluid: Logo bei x=125 (Seite 1265)
   bzw. 194 (Seite 1585), letzter Menüpunkt endet 88 bzw. 175 vor dem Rand.
   Beide Ränder wachsen linear mit der Fensterbreite — genau das bilden die
   beiden calc-Ausdrücke ab. max() verhindert negative Werte auf schmalen
   Fenstern. */
.kopf__innen {
  /* Bezugsrahmen für den Aquarellauftrag: Er muss sowohl den Schriftzug
     als auch die Menüpunkte erreichen können. */
  position: relative;
  /* Stand vorher bei .kopf. Seit der Balken durchgeht, hält diese Zeile
     Logo und Menü an ihrem gemessenen Platz. */
  width: min(100%, 1460px); margin-inline: auto;
  display: flex; align-items: center; gap: 22px;
  min-height: var(--kopf-hoehe);
  /* Nach oben gedeckelt. Die beiden Formeln stammen aus zwei Messpunkten
     bei 1265 und 1585 und rechnen darueber hinaus einfach weiter — bei 3440
     ergaben sie 594 und 680 Pixel Innenabstand, waehrend die Kopfbreite bei
     1460 stehenbleibt. Das Menue ragte dadurch 116 Pixel aus dem Kopf.
     Die Deckel sind die Werte, die bei 1585 erreicht werden; bis dahin
     aendert sich nichts. */
  padding-left:  clamp(var(--rand), calc(21.56vw - 148px), 194px);
  padding-right: clamp(var(--rand), calc(27.20vw - 256px), 175px);
}
/* Gemessen: Logo 107×110 bei x=125, Textblock 25 px daneben. Wortmarke und
   Claim sind auf dieselbe Achse zentriert (Mitte x=369), nicht linksbündig.
   Der Claim ist mit 225 px die breitere der beiden Zeilen und bestimmt damit
   die Blockbreite; die Wortmarke (144 px) zentriert sich darin. */
.marke {
  display: flex; align-items: center; gap: 25px; text-decoration: none; color: inherit;
  position: relative; z-index: 1;   /* über dem Auftrag */
}
/* Die Masse stehen jetzt bei .marke__zeichen, siehe unten. */
.marke__text { text-align: center; }
/* nowrap ist wichtig: «Begegnen Berühren Begleiten» muss auf einer Zeile
   nebeneinander stehen. Ohne die Regel bricht «Begleiten» um, sobald der
   Markenblock schmaler als der Text wird. */
.marke__name  {
  font-family: var(--font-titel); font-size: 30px; line-height: 40.5px;
  letter-spacing: 4.5px;   /* die «Sperrung» der Wortmarke im Original */
  display: block; white-space: nowrap;
}
.marke__claim {
  font-family: var(--font-titel); font-size: 16px; line-height: 31px;
  display: block; white-space: nowrap;
}

.nav { margin-left: auto; }
.nav ul {
  display: flex; gap: 28px; list-style: none; margin: 0; padding: 0;
  position: relative; z-index: 1;   /* über dem Schimmer */
}
.nav a {
  text-decoration: none; color: var(--text);
  font-family: var(--font-text); font-size: 16px;
  padding: 6px 0; white-space: nowrap;
  transition: color .3s ease;
}
.nav a:hover, .nav a:focus-visible { color: var(--akzent); }
/* Der aktive Eintrag bleibt schwarz wie die übrigen — die Markierung
   übernimmt allein der Aquarellauftrag dahinter. */

/* Der Schimmer unter dem aktiven Menüpunkt.
   Ein weicher türkiser Schein, der beim Scrollen automatisch zu dem Punkt
   gleitet, dessen Abschnitt gerade sichtbar ist. Position und Breite setzt
   site.js; hier steht nur, wie er aussieht und wie er sich bewegt. */
/* Der Aquarellauftrag besteht aus zwei Elementen:

   Aussen  .nav__schimmer        trägt die Reise von einem Menüpunkt zum
                                 nächsten, ausschliesslich über transform.
   Innen   .nav__schimmer__farbe trägt Farbe, Struktur und den Wirbel.

   Diese Trennung ist der Grund, warum die Bewegung flüssig läuft. Vorher
   wurden left, top, width und height überblendet — das sind Layout-Werte,
   der Browser rechnet bei jedem Einzelbild die Seite neu durch, und das
   ruckelt sichtbar. transform dagegen übernimmt die Grafikkarte. Ausserdem
   könnten Reise und Wirbel nicht dieselbe Eigenschaft gleichzeitig
   verwenden — deshalb die zwei Ebenen. */

.nav__schimmer {
  position: absolute; top: 0; left: 0;
  /* Bezugsgrösse. Das Skript bildet sie per scale auf das jeweilige Ziel ab. */
  width: 200px; height: 120px;
  transform-origin: 0 0;
  transform: translate(0, 0) scale(0, 0);
  pointer-events: none;
  opacity: 0;
  will-change: transform;

  /* Dauer setzt site.js aus Strecke und Tempo. Die Zeitkurve ist fast
     gleichförmig: langer gerader Mittelteil, nur Start und Ziel gerundet. */
  transition:
    transform .8s cubic-bezier(.42, .04, .34, .98),
    opacity   .5s ease;
}

.nav__schimmer[data-sichtbar="true"] { opacity: 1; }

.nav__schimmer__farbe {
  position: absolute; inset: 0;
  transform: rotate(-.7deg);
  transform-origin: 50% 50%;

  /* Kein Weichzeichner. 0.3px lagen an der Wahrnehmungsgrenze, kosteten
     aber einen eigenen Zeichendurchgang über dem maskierten Bereich — und
     der wiederholt sich bei jedem Einzelbild, solange sich darin etwas
     bewegt.
     Nachgemessen bei eingefrorener Animation: mittlere Abweichung 0.051 von
     255, grösste 11, ein Tausendstel der Bildpunkte betroffen. */

  /* Die Maske macht die Form: Sie lässt alles zum Rand hin über eine lange
     Strecke verschwinden. Ohne sie hätten die Lagen harte Kanten. Sie sitzt
     hier oben und schneidet alle Lagen gemeinsam zu. */
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 0%,
                                      rgba(0,0,0,.72) 18%,
                                      rgba(0,0,0,.38) 40%,
                                      rgba(0,0,0,.16) 62%,
                                      rgba(0,0,0,.05) 82%, transparent 100%);
          mask-image: radial-gradient(50% 50% at 50% 50%, #000 0%,
                                      rgba(0,0,0,.72) 18%,
                                      rgba(0,0,0,.38) 40%,
                                      rgba(0,0,0,.16) 62%,
                                      rgba(0,0,0,.05) 82%, transparent 100%);
}

/* --- Die Strömung --------------------------------------------------------

   Vier Lagen drehen gegenläufig übereinander und pulsieren dabei. Wo sie
   sich kreuzen, verdichtet sich die Farbe und löst sich wieder auf. Das ist
   der Eindruck von Wasser: Struktur, die entsteht und vergeht.

   Entscheidend ist, WIE bewegt wird. Eine frühere Fassung verzerrte die
   Lagen mit einem laufenden SVG-Filter und verschob ihre Hintergrundposition.
   Beides zwingt den Browser, jedes Einzelbild neu zu zeichnen und zu filtern,
   auf dem Prozessor — die Bewegung stockte sichtbar.

   Hier steckt die Verzerrung fest in den Bildern. Sie wird beim Laden einmal
   gerechnet und danach wie ein Foto behandelt. Bewegt wird ausschliesslich
   per transform, und das übernimmt die Grafikkarte. Pro Einzelbild fällt
   dadurch keine einzige Neuberechnung an.

   Die Lagen sind deutlich grösser als der Kasten: Eine gedrehte Fläche muss
   ihn in jeder Stellung noch überdecken, sonst blitzen die Ecken durch. Bei
   200 x 120 braucht die kürzere Seite mindestens 234px — inset: -60% liefert
   440 x 264.

   Die Laufzeiten 47, 59, 71 und 83 Sekunden sind Primzahlen. Das Gesamtbild
   wiederholt sich deshalb erst nach Monaten. */
.nav__schimmer__lage {
  position: absolute; inset: -60%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* Kein will-change: Die Angabe hielte die vier Ebenen dauerhaft als eigene
     Zeichenflächen im Speicher. Eine laufende Animation befördert das Element
     ohnehin — die Angabe brächte hier nichts und kostete Speicher. */
}

.nav__schimmer__lage--fein  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='300'%3E%3Cfilter id='a' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' seed='5' result='k'/%3E%3CfeColorMatrix in='k' values='0 0 0 0 .251 0 0 0 0 .769 0 0 0 0 .863 1.75 0 0 0 -.63' result='f'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='12' result='w'/%3E%3CfeDisplacementMap in='f' in2='w' scale='26' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect width='440' height='300' filter='url(%23a)'/%3E%3C/svg%3E");  animation: stroemen-a 47s linear infinite; }
.nav__schimmer__lage--wolke { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='300'%3E%3Cfilter id='a' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.055 .10' numOctaves='4' seed='19' result='k'/%3E%3CfeColorMatrix in='k' values='0 0 0 0 .251 0 0 0 0 .769 0 0 0 0 .863 1.45 0 0 0 -.56' result='f'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009' numOctaves='3' seed='26' result='w'/%3E%3CfeDisplacementMap in='f' in2='w' scale='34' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect width='440' height='300' filter='url(%23a)'/%3E%3C/svg%3E"); animation: stroemen-b 59s linear infinite; }
.nav__schimmer__lage--strom { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='300'%3E%3Cfilter id='a' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018 .075' numOctaves='4' seed='31' result='k'/%3E%3CfeColorMatrix in='k' values='0 0 0 0 .251 0 0 0 0 .769 0 0 0 0 .863 1.30 0 0 0 -.52' result='f'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='3' seed='38' result='w'/%3E%3CfeDisplacementMap in='f' in2='w' scale='30' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect width='440' height='300' filter='url(%23a)'/%3E%3C/svg%3E"); animation: stroemen-c 71s linear infinite; }
.nav__schimmer__lage--kern  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='300'%3E%3Cfilter id='b' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.021' numOctaves='4' seed='3' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='74' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='19'/%3E%3C/filter%3E%3Cellipse cx='220' cy='150' rx='150' ry='84' fill='rgb(64,196,220)' opacity='.20' filter='url(%23b)'/%3E%3C/svg%3E");  animation: stroemen-d 83s ease-in-out infinite; }

/* Volle Umdrehungen: Anfang und Ende sind identisch, die Schleife also
   nahtlos. Das Pulsieren dazwischen sorgt dafür, dass sich die Lagen nicht
   bloss starr mitdrehen, sondern gegeneinander atmen. */
@keyframes stroemen-a {
  0%   { transform: rotate(0deg)   scale(1, 1); }
  50%  { transform: rotate(180deg) scale(1.14, .92); }
  100% { transform: rotate(360deg) scale(1, 1); }
}
@keyframes stroemen-b {
  0%   { transform: rotate(0deg)    scale(1.06, 1); }
  50%  { transform: rotate(-180deg) scale(.9, 1.12); }
  100% { transform: rotate(-360deg) scale(1.06, 1); }
}
@keyframes stroemen-c {
  0%   { transform: rotate(0deg)   scale(1, 1.08) ; }
  50%  { transform: rotate(180deg) scale(1.18, .94); }
  100% { transform: rotate(360deg) scale(1, 1.08); }
}
@keyframes stroemen-d {
  0%, 100% { transform: rotate(0deg)    scale(1, 1);     opacity: .88; }
  50%      { transform: rotate(-14deg)  scale(1.1, .94); opacity: 1; }
}

@keyframes wirbel {
  /* Strudel: zusammenziehen, im engsten Punkt drehen, herausfliessen.

     Drei Verlaeufe greifen ineinander.

     Groesse    Sinuspuls, an den Enden voll, in der Mitte auf 30 Prozent.
     Drehung    S-Kurve ueber 360 Grad, im engsten Punkt zehnmal so schnell
                wie am Rand. Das ist Drehimpulserhaltung und der Grund,
                warum eine gleichmaessige Drehung nach Karussell aussieht.
     Rundung    die Breite schrumpft staerker als die Hoehe.

     Die Rundung ist der Punkt, der lange gefehlt hat. Der Kasten ist
     200 x 120, die Flaeche also eine breite Ellipse im Verhaeltnis 1,67.
     Zog sie sich unter Beibehaltung dieses Verhaeltnisses zusammen, drehte
     sich weiterhin etwas Laengliches — und das wirkt kantig, wie ein
     kippender Stab. Mit dem Faktor 120/200 = 0,6 auf die Breite wird die
     Flaeche im engsten Punkt kreisrund: 200 x 0,18 = 36 gegen
     120 x 0,30 = 36. Eine Kreisscheibe hat keine Kante, die kippen kann.

     Zum Ziel hin geht die Rundung von selbst zurueck, weil sie am selben
     Puls haengt wie die Groesse. Das Ueberschwappen bei 94 Prozent ist mit
     1,03 bewusst zurueckhaltend — es soll fliessen, nicht federn. */
  0%    { transform: rotate(   -0.7deg) scale(1.000, 1.000); }
  12.5% { transform: rotate(    5.1deg) scale(0.845, 0.897); }
  25%   { transform: rotate(   36.6deg) scale(0.520, 0.650); }
  37.5% { transform: rotate(   98.4deg) scale(0.265, 0.403); }
  50%   { transform: rotate(  179.3deg) scale(0.180, 0.300); }
  62.5% { transform: rotate(  260.2deg) scale(0.265, 0.403); }
  75%   { transform: rotate(  322.0deg) scale(0.520, 0.650); }
  87.5% { transform: rotate(  353.5deg) scale(0.845, 0.897); }
  94%   { transform: rotate(  358.6deg) scale(1.016, 1.030); }
  100%  { transform: rotate(  359.3deg) scale(1.000, 1.000); }
}


.nav__schimmer[data-fliesst="true"] .nav__schimmer__farbe {
  animation: wirbel .8s linear;
}

@media (prefers-reduced-motion: reduce) {
  .nav__schimmer { transition: opacity .35s ease; }
  .nav__schimmer__lage { animation: none; }
}

.menue-schalter {
  display: none; margin-left: auto;
  background: none; border: 0; padding: 10px; cursor: pointer; color: var(--text);
}
.menue-schalter svg { display: block; }

@media (max-width: 1100px) {
  :root { --kopf-hoehe: 104px; }
  /* Die Breite des Zeichens steht am Dateiende. Hier stand sie ein zweites
     Mal und wurde von dort ueberstimmt, ohne je zu wirken. */
  .marke__name { font-size: 26px; }
  .marke__claim { font-size: 16px; }
  .menue-schalter { display: block; }
  /* Im Klappmenü stehen die Punkte untereinander; ein waagrecht gleitender
     Schimmer ergäbe dort keinen Sinn. */
  .nav__schimmer { display: none; }
  .nav a[aria-current="true"] { color: var(--akzent); }

  .nav {
    position: fixed;
    inset: calc(var(--kopf-hoehe) + 2 * var(--kopf-abstand)) 0 auto 0;
    background: #fff; border-bottom: 1px solid var(--linie);
    transform: translateY(-120%);
    /* Sichtbarkeit kennt keine Zwischenstufen — mit einer Dauer springt sie
       erst am Ende um, das Menü führe also unsichtbar herunter. Deshalb beim
       Schliessen verzögert ausblenden und beim Öffnen sofort einblenden. */
    transition: transform .25s ease, visibility 0s linear .25s;
    max-height: calc(100dvh - var(--kopf-hoehe)); overflow-y: auto;
    /* Nur wegschieben genügt nicht: Die Links blieben sonst mit der
       Tabulatortaste erreichbar, obwohl das Menü geschlossen aussieht. */
    visibility: hidden;
  }
  .nav[data-offen="true"] {
    transform: translateY(0); visibility: visible;
    transition: transform .25s ease, visibility 0s linear 0s;
  }
  .nav ul { flex-direction: column; gap: 0; padding: 8px 0; }
  .nav a { display: block; padding: 14px var(--rand); border-bottom: 0; }
}

/* --- Hero (gemessen: 1265 × 373, randlos) --------------------------------- */
/* Das Titelbild setzt oben nicht hart an, sondern blendet über
   --hero-uebergang ein. Darunter liegt der Verlauf, der auf dieser Strecke
   bereits satt in der Farbe der obersten Bildzeile steht; dadurch gibt es
   an der Kante zum Kopfbereich keine Stufe. */
/* picture ist von Haus aus inline; ohne block wirkt das Zentrieren des
   Bildes darin nicht. */
.hero picture { display: block; }

.hero img {
  /* Das ganze Bild, nie beschnitten und nie vergroessert.

     Vorher fuellte es die Seite bis an den Rand. Weil die Vorlage 1960 x 638
     misst, also 3.07 zu 1, und der Kasten auf breiten Bildschirmen viel
     flacher wird, schnitt object-fit oben und unten weg: bei 2560 fehlten
     382 Pixel, die obere Schnittkante lag genau auf der Bergspitze. Zugleich
     wurde die Vorlage auf das 1,3-Fache aufgeblasen, bei 3440 auf das
     1,75-Fache — das kostet Schaerfe.

     Jetzt bestimmt das Bild selbst die Hoehe. Bis 1960 Fensterbreite fuellt
     es die Seite, darueber bleibt es auf seiner echten Breite stehen und
     wird mittig gestellt. Der Berg ist damit auf jedem Bildschirm ganz zu
     sehen, und vergroessert wird nie. */
  display: block;
  width: min(100%, 1960px);
  height: auto;
  margin-inline: auto;

  -webkit-mask-image: linear-gradient(180deg,
      transparent 0,
      #000 var(--hero-uebergang),
      #000 calc(100% - var(--hero-auslauf)),
      transparent 100%);
          mask-image: linear-gradient(180deg,
      transparent 0,
      #000 var(--hero-uebergang),
      #000 calc(100% - var(--hero-auslauf)),
      transparent 100%);
}
/* Mobil ist das Bild nur rund 200 px hoch. Mit den Desktopwerten (48 px ein,
   96 px aus) lägen 72 % davon im Verlauf und es bliebe kaum Bild übrig —
   deshalb hier proportional kleinere Strecken. */
@media (max-width: 900px) {
  :root {
    --hero-uebergang: 20px;
    --hero-auslauf: 40px;
  }
  /* Deckel so gewählt, dass er an der 900er-Grenze an die Formel darüber
     anschliesst — sonst springt die Höhe genau dort. */
  /* Am Handy weiterhin zuschneiden: Das ganze Bild waere bei 375 Pixern
     Breite nur 122 hoch, also ein Faden. Hier ist ein hoeherer Ausschnitt
     besser als das vollstaendige Bild. */
  .hero img { width: 100%; height: clamp(200px, 35vw, 318px); object-fit: cover; }
}

/* --- Aufzählungen im Fliesstext -------------------------------------------
   Am Original gemessen: Fliesstext beginnt bei x=143, der Text der
   Listenpunkte bei x=175 — also 32 px eingerückt, der Punkt selbst sitzt
   dazwischen. Marker ist ein gefüllter Kreis (disc). */
.liste-punkte {
  list-style: disc outside;
  margin: 0; padding-left: 32px;
}
.liste-punkte li { margin: 0; }

/* Der Sitzungsblock im Angebot ist im Original 16 px statt 18 px */
.klein { font-size: 16px; line-height: 1.5; }

/* Nummerierte Sitzungsliste */
/* Gemessen: x=143 wie der Fliesstext, also KEIN Einzug; 16 px auf 24 px. */
.sitzungen { list-style: none; padding: 0; margin: 0; counter-reset: sitzung; }
.sitzungen li { counter-increment: sitzung; }
.sitzungen li::before { content: counter(sitzung) ". "; }

/* --- Schaltflächen -------------------------------------------------------- */
/* Flächenknopf im Text: gemessen 251 × 63, Lavendel, eckig, schwarze Schrift */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 251px; min-height: 63px; padding: 0 28px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-text); font-size: 15px; line-height: 1;
  font-weight: 700; color: #2F2F2F; background: var(--lavendel);
  border: 1px solid var(--lavendel); border-radius: 0;
  transition: background .2s ease, border-color .2s ease;
}
.knopf:hover, .knopf:focus-visible { background: #d7d7f2; border-color: #d7d7f2; }

/* Fester Knopf unten rechts: weisse Pille, dünner dunkler Rand, mit Icon */
.knopf-fix {
  position: fixed; right: 50px; bottom: 50px; z-index: 90;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; width: 152px; height: 75px; min-width: 0; min-height: 0; padding: 0;
  background: #fff; color: var(--text);
  border: 1px solid var(--rand-dunkel); border-radius: 200px;
  font-size: 16px; text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
}
.knopf-fix:hover, .knopf-fix:focus-visible { background: #fff; border-color: #000; }
.knopf-fix svg { display: block; }
@media (max-width: 700px) {
  .knopf-fix { right: 14px; bottom: 14px; width: 128px; height: 62px; font-size: 14px; }
}

/* --- Empfehlungen: drei Spalten (gemessen x=57 / 477 / 912) --------------- */
.stimmen__titel {
  font-family: var(--font-titel); font-size: 22px;
  line-height: 31.02px; text-align: center;
  /* Gemessen: beginnt 52 px unter dem Abschnittsanfang, nicht 68. */
  margin: -16px 0 42px;
  color: var(--akzent); font-weight: 700;
}

/* Blaue Hervorhebung einzelner Wörter und Zeilen, wie im Original */
/* Alle blauen Hervorhebungen sind im Original fett (Schriftgewicht 700). */
.blau { color: var(--akzent); font-weight: 700; }

/* Schwarze Fettung, z.B. «begegne / berühre / begleite» im Abschnitt Persönlich */
.fett { font-weight: 700; }
/* Drei Spalten, ebenfalls fluid. Gemessen bei Seite 1265: x=57 / 477 / 912,
   bei Seite 1585: x=110 / 637 / 1178. Spaltenbreiten 310 / 310 / 280 —
   die dritte ist im Original tatsächlich schmaler, das wird so übernommen.
   Freiraum im Verhältnis 1 : 2 : 2 : 1. */
.stimmen {
  display: grid;
  grid-template-columns: 1fr 310px 2fr 310px 2fr 280px 1fr;
  /* Aus demselben Grund gedeckelt wie der Zweispalter: Die freien Anteile
     wuerden die drei Spalten sonst auf breiten Bildschirmen auseinander
     ziehen. */
  width: min(100%, 1585px);
  margin-inline: auto;
}
/* Die Feinversätze sind an beiden Messbreiten identisch und daher fest.
   Ergebnis: x = 57 / 477 / 912 bei Seite 1265 und 110 / 637 / 1178 bei 1585. */
.stimme:nth-of-type(1) { grid-column: 2; margin-left:  -4px; width: 310px; }
.stimme:nth-of-type(2) { grid-column: 4; margin-left: -16px; width: 310px; }
.stimme:nth-of-type(3) { grid-column: 6; margin-left: -12px; width: 280px; }
/* margin:0 ist nötig — Browser geben <figure> von Haus aus 40 px Seitenrand,
   was die Spalte sonst von 310 auf 230 px zusammenschnürt. */
.stimme {
  margin: 0;
  /* Untereinander, und das Zitat nimmt den übrigen Platz ein. Dadurch stehen
     die Namen aller Spalten auf gleicher Höhe, unabhängig davon, wie lang
     das einzelne Zitat ist und wie viele Teile gerade sichtbar sind. */
  display: flex; flex-direction: column;
}
.stimme > blockquote { flex: 1 1 auto; }
.stimme blockquote {
  margin: 0; font-size: 18px; line-height: 1.75;
  text-align: justify; hyphens: auto;
}
.stimme figcaption { display: block; }
.stimme__name {
  font-size: 22px; line-height: 38.5px; text-align: center; margin-top: 28px;
  font-style: italic;                    /* Namen sind im Original kursiv */
  color: var(--akzent);                  /* und stehen in #406C89 */
}

/* Anführungszeichen: gemessen 34 × 27, Farbe #406C89, über und unter dem Zitat */
.stimme__zeichen {
  width: 34px; height: 27px; color: var(--akzent);
  fill: currentColor; margin-inline: auto;   /* über der Spalte zentriert */
}
.stimme__zeichen--oben  { margin-bottom: 30px; }
.stimme__zeichen--unten { margin-top: 30px; }

@media (max-width: 1100px) {
  .stimmen {
    grid-template-columns: 1fr; row-gap: 56px;
    width: min(100% - 2 * var(--rand), var(--spalte-breit)); margin-inline: auto;
  }
  .stimme:nth-of-type(1), .stimme:nth-of-type(2), .stimme:nth-of-type(3) {
    grid-column: 1; margin-left: 0; width: auto;
  }
  .stimme blockquote { text-align: left; }
}

/* --- Bild-Slideshow (gemessen: randlos, 1265 × 388) ----------------------- */
.slideshow { position: relative; overflow: hidden; background: #eee; }
.slideshow__spur { display: flex; transition: transform .6s ease; }
.slideshow__spur > figure { margin: 0; min-width: 100%; }
.slideshow img { width: 100%; height: 388px; object-fit: cover; }
@media (max-width: 900px) { .slideshow img { height: clamp(220px, 32vw, 388px); } }

.slideshow__pfeil {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255, 255, 255, .85); border: 0; cursor: pointer;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; color: var(--akzent);
  transition: background .2s ease;
}
.slideshow__pfeil:hover, .slideshow__pfeil:focus-visible { background: #fff; }
.slideshow__pfeil--zurueck { left: 14px; }
.slideshow__pfeil--vor { right: 14px; }

.slideshow__punkte {
  position: absolute; left: 0; right: 0; bottom: 14px;
  display: flex; justify-content: center; gap: 9px;
}
/* Sichtbar bleiben die 9 px des Originals; die Trefferfläche ist über ein
   unsichtbares ::before auf 24 px vergrössert — 9 px sind mit dem Finger
   nicht zuverlässig zu treffen. */
.slideshow__punkte button {
  position: relative;
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid #fff; background: transparent;
}
.slideshow__punkte button::before {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
}
.slideshow__punkte button[aria-current="true"] { background: #fff; }
.slideshow__zaehler {
  position: absolute; right: 16px; bottom: 12px;
  color: #fff; font-size: 13px; text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

/* --- Zitat über Bild (gemessen: 473 hoch, Text 421 breit, 37px, schwarz) --
   Der Text sitzt am linken Rand eines mittigen Containers von 1171 px.
   Nachgerechnet: Seite 1265 → x=47, Seite 1585 → x=207. */
.zitat-bild {
  position: relative; height: 473px;
  display: flex; align-items: center;
  background: center / cover no-repeat;
}
.zitat-bild__innen { width: min(100% - 2 * var(--rand), 1171px); margin-inline: auto; }
.zitat-bild blockquote {
  margin: 0; max-width: 421px;
  /* Im Original ausdrücklich Cormorant Garamond Light in #406C89 —
     nicht die Titelschrift Raleway. */
  font-family: "cormorantgaramond-light", "Cormorant Garamond", Garamond, Georgia, serif;
  font-size: 37px; line-height: 1.2;
  color: var(--akzent);
}
@media (max-width: 900px) {
  .zitat-bild { height: auto; min-height: 340px; padding: 48px 0; }
  .zitat-bild blockquote { font-size: clamp(24px, 5vw, 37px); }
}

/* --- Grosse Abschnittstitel ----------------------------------------------
   Im Original stehen «Angebot», «Persönlich» und «Termine & Kosten» optisch
   mittig (gemessen x=452 / 531 / 429 bei Seitenmitte 632). */
.titel-gross { font-size: 50px; line-height: 1.34; text-align: center; }
.zwischentitel {
  font-size: 22px; line-height: 1.41;
  font-family: var(--font-titel); text-align: center;
}
/* Die Gutschein-Zeile ist kein Titel: Fliesstextschrift, 22 px, mittig. */
.betont-mitte { font-family: var(--font-text); font-size: 22px; text-align: center; }
@media (max-width: 900px) { .titel-gross { font-size: 36px; } }

/* --- Gutschein ------------------------------------------------------------ */
.gutschein { display: flex; justify-content: center; }
.gutschein img { width: 303px; height: 363px; object-fit: contain; }

/* --- Kontakt (gemessen: Container 923 bei x=169, Titel 56px grau,
       Adresse x=226, Formular x=638 mit Breite 458) --------------------- */
.kontakt { width: min(100% - 2 * var(--rand), 923px); margin-inline: auto; }
.kontakt__titel { font-size: 56px; line-height: 1.2; color: var(--text-leise); }
.kontakt__raster {
  display: grid; grid-template-columns: 1fr 458px; column-gap: 8px;
  align-items: start;
}
.kontakt__adresse { font-size: 16px; padding-left: 57px; }  /* x=226 − 169 */
@media (max-width: 900px) {
  .kontakt__raster { grid-template-columns: 1fr; row-gap: 40px; }
  .kontakt__adresse { padding-left: 0; }
  .kontakt__titel { font-size: 38px; }
}

/* --- Kontaktformular (Felder gemessen 37 px hoch, dünner Rahmen) ---------- */
.formular { display: grid; gap: 20px; }
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
@media (max-width: 640px) { .feld-reihe { grid-template-columns: 1fr; } }

.feld label { display: block; font-size: 14px; margin-bottom: 5px; color: var(--text-leise); }
.feld input, .feld textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--text);
  padding: 3px 3px 3px 10px; background: #fff;
  border: 1px solid var(--text);   /* im Original schwarz, nicht grau */
  border-radius: 0;
}
.feld input { height: 37px; }
.feld textarea { height: 86px; min-height: 86px; resize: vertical; }
.feld input:focus, .feld textarea:focus {
  outline: none; border-color: var(--akzent); box-shadow: 0 0 0 2px rgba(64, 108, 137, .15);
}

.formular__hinweis { font-size: 15px; padding: 10px 12px; }
.formular__hinweis[data-art="ok"]     { background: #E8F2E8; color: #245A24; }
.formular__hinweis[data-art="fehler"] { background: #FBE9E9; color: #8A2020; }
/* Der Senden-Knopf ist im Original KEIN Lavendel-Flächenknopf, sondern
   117 × 36 in Akzentblau mit weisser 14-px-Schrift, normal geschnitten. */
.knopf-senden {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 117px; height: 36px; padding: 0 16px;
  cursor: pointer; font-family: var(--font-text); font-size: 14px;
  font-weight: 400; line-height: 1;
  color: #fff; background: var(--akzent);
  border: 1px solid var(--akzent); border-radius: 0;
  transition: background .2s ease, border-color .2s ease;
}
.knopf-senden:hover, .knopf-senden:focus-visible {
  background: var(--akzent-dunkel); border-color: var(--akzent-dunkel);
}

/* Adressblock mit Symbolen: Nadel, Telefon, Briefumschlag in #406C89 */
.adresszeile { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.adresszeile svg { color: var(--akzent); fill: currentColor; margin-top: .25em; }

.hp-feld { position: absolute; left: -9999px; }  /* Spam-Falle, nicht entfernen */

/* --- Fusszeile ------------------------------------------------------------ */
/* Gemessen: 14 px, schwarz, seitenmittig — nicht grau und nicht linksbündig. */
.fuss { padding: 40px 0 56px; font-size: 14px; color: var(--text); text-align: center; }

/* --- Buchungs-Overlay (Kalender) ------------------------------------------ */
.overlay[hidden] { display: none; }
.overlay {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(21, 36, 46, .55);
  display: grid; place-items: center; padding: 20px;
}

.overlay__box {
  background: #fff; border-radius: 3px;
  /* Breiter als ein üblicher Dialog: Das Buchungsfenster stellt seine
     Angebote in einem Raster dar und braucht Platz, sonst werden die
     Karten schmal. Die Buchung ist der wichtigste Weg der Seite. */
  width: min(100%, 1180px);
  height: min(92dvh, 940px);
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35); overflow: hidden;
  /* Nur eine Verschiebung, keine Deckkraft: Bliebe die Animation je stehen,
     wäre das Fenster höchstens leicht versetzt — aber niemals unsichtbar. */
  animation: box-auf .22s ease-out;
}
@keyframes box-auf {
  from { transform: translateY(12px); }
  to   { transform: translateY(0); }
}

.overlay__kopf {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 10px 12px 18px; border-bottom: 1px solid var(--linie);
}
.overlay__titel { font-family: var(--font-titel); font-size: 20px; margin-right: auto; }

.overlay__extern,
.overlay__zu {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: none; border: 0; cursor: pointer;
  color: var(--text-leise); text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.overlay__extern:hover, .overlay__extern:focus-visible,
.overlay__zu:hover, .overlay__zu:focus-visible { background: #EEF2F5; color: var(--akzent); }
.overlay__zu { font-size: 26px; line-height: 1; }

/* Bühne: iframe, Ladezustand und Fehlerfall liegen übereinander.

   Bewusst ohne Ein-/Ausblenden: Der Kalender ist immer voll sichtbar, die
   Panels darüber werden schlicht per display an- und abgeschaltet. Damit kann
   keine hängende Animation je den Kalender verdecken — das ist der wichtigste
   Weg der Seite und muss auch dann funktionieren, wenn sonst etwas klemmt. */
.overlay__buehne { position: relative; flex: 1; min-height: 0; background: #fff; }
.overlay__buehne iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

.overlay__laden,
.overlay__fehler {
  position: absolute; inset: 0; z-index: 1;
  display: grid; align-content: center; justify-items: center;
  gap: 4px; padding: 32px; text-align: center; background: #fff;
}
.overlay__laden p { color: var(--text-leise); font-size: 15px; margin: 0; }
.overlay__fehler p { margin: 0 0 .8em; max-width: 460px; }
.overlay__laden[hidden], .overlay__fehler[hidden] { display: none; }
.leise { color: var(--text-leise); }

.spinner {
  width: 32px; height: 32px; margin-bottom: 14px; border-radius: 50%;
  border: 2px solid #B1C8D8; border-top-color: var(--akzent);
  animation: dreh .8s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  /* !important ist hier nötig: Die globale Regel weiter oben setzt alle
     Animationen auf .01ms. Ohne Vorrang würde sich der Spinner rund
     100 000-mal pro Sekunde drehen — also flackern statt sich zu beruhigen.
     Genau das soll die Einstellung ja verhindern. */
  .spinner { animation-duration: 2s !important; }
  .overlay__box { animation: none; }
}

@media (max-width: 700px), (max-height: 620px) {
  .overlay { padding: 0; }
  .overlay__box { width: 100%; height: 100dvh; max-height: none; border-radius: 0; }
}

/* --- Eigenständige Buchungsseite (termin.html) ---------------------------- */
.buchungsseite { display: flex; flex-direction: column; min-height: 100dvh; }
.buchungsseite .overlay__buehne { flex: 1; }
.buchungsseite .zurueck {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--text); font-size: 15px;
}
.buchungsseite .zurueck:hover { color: var(--akzent); }

/* --- Ausklappbare Sitzungsliste ------------------------------------------
   Entspricht der Wix-Komponente «CollapsibleText»: Die zehn Sitzungen sind
   zunächst eingeklappt und werden über einen Schalter sichtbar. */
/* max-height statt Grid: Der Bereich enthält mehrere Kindelemente, und
   grid-template-rows:0fr hätte nur die erste Zeile eingeklappt. */
.ausklapp__inhalt {
  overflow: hidden; max-height: 0;
  transition: max-height .35s ease;
}
.ausklapp[data-offen="true"]  .ausklapp__inhalt { max-height: 1400px; }
/* Geschlossen ausdruecklich benennen: gleiche Spezifitaet wie die offene
   Regel, damit die Reihenfolge im Stylesheet nichts entscheiden muss. */
.ausklapp[data-offen="false"] .ausklapp__inhalt { max-height: 0; }

/* Ohne JavaScript bleibt die Liste sichtbar — der Inhalt darf nie verloren
   gehen, nur weil ein Skript nicht lädt. */
.ausklapp:not([data-offen]) .ausklapp__inhalt { max-height: none; }

/* Kein Einzug: Im Original stehen die Sitzungen bündig zum Fliesstext (x=143). */
.ausklapp, .ausklapp__inhalt, .sitzungen { padding-left: 0; margin-left: 0; }
.sitzungen li { margin-left: 0; }
.ausklapp__schalter { display: none; }
.ausklapp[data-offen] .ausklapp__schalter {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 4px 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-text); font-size: 16px;
  font-weight: 700; color: var(--akzent);
}
.ausklapp__schalter:hover span, .ausklapp__schalter:focus-visible span { text-decoration: underline; }
.ausklapp__schalter svg { transition: transform .3s ease; }
.ausklapp[data-offen="true"] .ausklapp__schalter svg { transform: rotate(180deg); }

/* --- Trennlinie und Karte am Ende des Kontaktbereichs --------------------
   Gemessen: beide spannen die Seitenbreite minus 80 px Aussenrand, die
   Linie ist 1 px in #757575 (Wix color_47), die Karte 347 px hoch. */
.trennlinie {
  border: 0; height: 0;
  border-top: 1px solid var(--text-leise);
  margin: 0 var(--aussenrand);
}
.karte {
  margin: 0 var(--aussenrand);
  height: 347px;
}
.karte iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 1100px) {
  .trennlinie, .karte { margin-inline: var(--rand); }
  .karte { height: clamp(240px, 42vw, 347px); }
}


/* ==========================================================================
   Handy-Nachträge

   Diese Regeln stehen bewusst ganz am Ende. Die Datei enthält mehrere
   @media-Blöcke für dieselben Breiten; wer weiter oben einfügt, wird von
   einem späteren Block still überschrieben. Genau das ist beim ersten
   Versuch passiert — die Regeln waren geladen, aber wirkungslos.
   ========================================================================== */

/* --- Kopf auf schmalen Geräten --------------------------------------------
   Markenblock und Menüknopf passen unter etwa 460px nicht mehr nebeneinander.
   Gemessen bei 375px: verfügbar 299px, gebraucht 364px — der Knopf wurde aus
   dem Kopf gedrängt und machte das Dokument 424px breit. Auch bei 412px, der
   Breite eines gängigen Geräts, fehlten noch 28px.

   Umbrechen scheidet aus: «Begegnen Berühren Begleiten» soll auf einer Zeile
   stehen. Also wächst die Marke mit dem Fenster mit. Die oberen clamp-Grenzen
   sind die bisherigen Masse, ab 460px aufwärts ändert sich deshalb nichts. */
@media (max-width: 460px) {
  .kopf__innen { padding-inline: 14px; }

  .marke { gap: clamp(10px, 3.4vw, 25px); }
  /* Hier stand einmal eine Regel auf .marke img, die Breite und
     Seitenverhaeltnis setzte. Sie stammt aus der Zeit des einzelnen
     Kopfbildes und traf spaeter alle drei Ebenen des Zeichens zugleich:
     Jede bekam 68:70 aufgezwungen, obwohl die Scheibe 360:367 misst und
     die Spirale 1,447:1. Die Spirale wurde dadurch in die Hoehe gezogen.

     Bei der Breite blieb es folgenlos, weil .marke__zeichen .ze-scheibe
     mit zwei Klassen staerker ist als .marke img mit Klasse plus Typ.
     Beim Seitenverhaeltnis gab es keine Gegenregel.

     Groesse und Verhaeltnis stehen bei .marke__zeichen am Dateiende. */
  .marke__name  { font-size: clamp(18px, 5.6vw, 26px); }
  .marke__claim { font-size: clamp(11px, 3.5vw, 16px); line-height: 1.9; }

  .menue-schalter { padding: 8px; }
}

/* --- Name unter der Empfehlung --------------------------------------------
   Der Name ist ein inline-Element, an dem text-align wirkungslos bleibt: Er
   ist nur so breit wie sein Text und klebte deshalb am linken Spaltenrand
   statt unter der Mitte des Zitats zu stehen. Als Block nimmt er die volle
   Spaltenbreite ein, und erst dann greift die Zentrierung — so wie im
   Original. Gilt für alle Breiten, denn der Fehler steckt nicht in der
   Handy-Ansicht, sondern in der Regel selbst. */
.stimme__name { display: block; }

@media (max-width: 900px) {
  /* Am Original gemessen: 16px statt der 22px der breiten Ansicht. */
  .stimme__name { font-size: 16px; line-height: 1.6; margin-top: 18px; }

  /* Das Original setzt die Empfehlungen am Handy im Blocksatz. */
  .stimme p, .stimme blockquote { text-align: justify; }

  /* Das Zitatbild war mit 340px viel zu flach — der Schriftzug wurde
     zusammengedrängt und das breite Bild dahinter stark hineingezoomt.
     Das Original hält am Handy 320 x 464, also 1 : 1,45. */
  .zitat-bild { min-height: min(145vw, 560px); }
}

/* --- Zehn Sitzungen: Luft zwischen den Punkten ----------------------------
   Am Original gemessen: Der Ausklappbereich ist dort ein einziger Absatz mit
   16px Schrift und 24px Zeilenhöhe, und die Sitzungen sind durch Leerzeilen
   voneinander getrennt. Meine Fassung zeichnet sie als Liste aus — inhaltlich
   richtiger, aber Listenpunkte haben von Haus aus keinen Abstand, und so
   klebten die zehn Einträge lückenlos aneinander.

   Die 24px entsprechen genau einer Leerzeile des Originals. Schriftgrösse
   und Zeilenhöhe stimmten bereits überein und bleiben unangetastet. */
.ausklapp li + li { margin-top: 24px; }

/* --- Anführungszeichen bei den Empfehlungen entfallen ----------------------
   Die beiden SVG-Zeichen über und unter jedem Zitat sind auf Wunsch entfernt.
   Sie werden hier ausgeblendet statt aus der Auszeichnung gelöscht, weil
   dieselbe Regel damit für die statische Seite und für Kirby gilt — dessen
   Vorlage wird von einer zweiten Sitzung gepflegt. */
.stimme__zeichen { display: none; }

/* --- Zitatbild am Handy ---------------------------------------------------
   Im Original steht der Schriftzug oben über dem hellen Vorhang und die
   Person ist ganz zu sehen. Bei mir lag der Text mittig auf dem Gesicht und
   war dort kaum zu entziffern.

   Zwei Ursachen: Der Text war senkrecht zentriert, und Kirby schnitt aus dem
   hochformatigen Bild (1960 x 2939) einen 940 hohen Querstreifen — darin ist
   nur noch der Kopf enthalten, und «cover» zoomt ihn im hohen Rahmen weiter
   auf. Der Zuschnitt ist in der Vorlage behoben, hier folgt die Ausrichtung. */
@media (max-width: 900px) {
  .zitat-bild { align-items: flex-start; }
  .zitat-bild blockquote { font-size: clamp(24px, 7vw, 37px); }
}

/* --- Sprung auf den Seitenanfang ------------------------------------------
   Das Titelbild ist der Anfang der Seite, ein Klick auf den Schriftzug soll
   also ganz nach oben führen. Es beginnt aber nicht bei 0: Der schwebende
   Kopf steht im Textfluss darüber, der Hauptbereich startet deshalb bei
   --kopf-hoehe + --kopf-abstand.

   Solange scroll-padding-top grösser war als dieser Wert, kam rechnerisch
   eine negative Zielposition heraus und der Browser klemmte sie auf 0 — es
   sah richtig aus. Seit der Titelvorlauf abgezogen wird, bleiben genau 44px
   übrig, und die Seite blieb ein Stück heruntergescrollt stehen.

   Ein Versatz grösser als die Fensterhöhe erzwingt das Klemmen auf 0 wieder,
   unabhängig von allen anderen Massen. */
#start { scroll-margin-top: 100vh; }


/* --- Das belebte Zeichen im Kopf -------------------------------------------
   Drei Ebenen aus der Originaldatei, getrennt allein ueber die Deckkraft.
   Ihre Lage entspricht genau dem Ausschnitt, mit dem sie aus der Vorlage
   (360 x 367) herausgeloest wurden.

   Die Breiten stehen mit .marke__zeichen davor, weil eine blosse Klasse
   sonst von Regeln mit Klasse plus Typ ueberstimmt wird — dann liegen alle
   drei Ebenen auf voller Breite uebereinander statt an ihrem Platz. */
.marke__zeichen {
  position: relative; display: block; flex: none;
  width: 107px; aspect-ratio: 360 / 367;
}
.marke__zeichen img { position: absolute; display: block; }
.marke__zeichen .ze-scheibe  { left: 0;       top: 0;       width: 100%;    }
.marke__zeichen .ze-lavendel { left: 1.667%;  top: 3.270%;  width: 98.056%; }
.marke__zeichen .ze-spirale  { left: 9.444%;  top: 25.886%; width: 82.778%; }

/* Das Zeichen steht vom ersten Bild an vollstaendig da.

   Vorher baute es sich beim Laden auf: Die Scheibe wuchs aus dem Nichts,
   die Lavendelebene tauchte nach einer halben Sekunde auf, und die Spirale
   wurde ueber eine Kreismaske von aussen nach innen aufgezogen, zusammen
   knapp zwei Sekunden, in denen im Kopf kein fertiges Zeichen zu sehen war.
   Wer die Seite oeffnete, sah zuerst eine Luecke.

   Geblieben ist das Atmen. Es beginnt bei voller Groesse, veraendert sie um
   zweieinhalb Prozent und macht das Zeichen lebendig, ohne dass je etwas
   fehlt. Wer den Aufbau zurueckholen will, braucht drei animation-Zeilen
   auf .ze-scheibe, .ze-lavendel und .ze-spirale samt Keyframes; die alte
   Fassung liegt in style.css.vor-kopfumbau. */
.marke__zeichen { animation: ze-atmen 8s ease-in-out .6s infinite; }

@keyframes ze-atmen {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}
.marke__zeichen, .marke__zeichen img { transform-origin: 53% 47%; }

@media (prefers-reduced-motion: reduce) {
  .marke__zeichen, .marke__zeichen img { animation: none; opacity: 1; transform: none; }
}

/* --- Grösse des Zeichens auf schmalen Geräten -----------------------------
   Diese beiden Regeln MUESSEN am Dateiende stehen. Die Grundregel für
   .marke__zeichen steht weiter oben unbedingt und ohne Abfrage — sie schlägt
   jede Media-Abfrage, die vor ihr steht, weil bei gleicher Spezifität die
   spätere Regel gewinnt.

   Genau daran ist es einmal gescheitert: Das Zeichen blieb am Handy 107px
   breit, der Markenblock wurde zu breit, und der Menüknopf ragte 30 Pixel
   aus der Seite. Der wirkungslose Vorgänger weiter oben ist entfernt; er
   trug nach der Vergrösserung einen falschen Wert und hätte den nächsten
   auf die falsche Fährte geführt. */
@media (max-width: 1100px) {
  /* 68 mal 1,15. Die 107 Pixel der Rechnerfassung sind am Original
     gemessen und bleiben, wie sie sind. */
  .marke__zeichen { width: 78px; }
}
@media (max-width: 460px) {
  /* Alle drei Werte um denselben Faktor: 46 -> 53, 13.5vw -> 15.5vw,
     68 -> 78. Der Kopf ist hier 104 Pixel hoch, oben und unten bleiben
     also 13 Pixel Luft. */
  .marke__zeichen { width: clamp(53px, 15.5vw, 78px); }
}

/* --- Ruhe beim Scrollen ---------------------------------------------------
   Während gescrollt wird, stehen die vier Ebenen des Aquarellauftrags still.

   Der Grund: Auf ihrem Elternteil liegt eine Maske. Ein maskierter Bereich
   mit bewegten Kindern lässt sich nicht einfach an die Grafikkarte
   durchreichen — der Browser rastert das Ergebnis fortlaufend neu. Beim
   Scrollen konkurriert das mit der eigentlichen Aufgabe.

   Niemand betrachtet das Wasser, während er scrollt. Sobald es still steht,
   läuft es weiter, als wäre nichts gewesen: animation-play-state hält die
   Animation an, es beginnt nicht von vorn. */
[data-scrollt="true"] .nav__schimmer__lage,
[data-scrollt="true"] .marke__zeichen {
  animation-play-state: paused;
}