/* ============================================================
   Kosmetikstudio Martina Achleitner
   Eigenes Stylesheet. Keine fremde Bibliothek, keine externe
   Ressource. Alle Farben, Groessen und Schriften sind aus dem
   Elementor-Stil der Originalseite ausgelesen, nicht erfunden.
   ============================================================ */

/* ---------- 1. Schriften ---------- */

@font-face {
  font-family: 'Lato';
  src: url('schriften/Lato-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  src: url('schriften/Lato-400-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  src: url('schriften/Lato-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  src: url('schriften/Lato-700-ext.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  src: url('schriften/Lato-900.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  src: url('schriften/Lato-900-ext.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cormorant Garamond, ersetzt die urspruengliche Schreibschrift bei den
   Folien-Titeln und den Vorzeilen. Eine einzige Datei deckt die Staerken
   300 bis 700 ab, verwendet werden 300 (Folien-Titel) und 600 (Vorzeilen). */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('schriften/CormorantGaramond-var.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('schriften/CormorantGaramond-var-ext.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Karla, seit 24.08.2026 auf Kalles Wunsch die Schrift des Fliesstextes.
   Eine einzige Datei deckt die Staerken 200 bis 800 ab. Verwendet wird 400,
   fuer <strong> zieht der Browser 700 aus derselben Datei. */
@font-face {
  font-family: 'Karla';
  src: url('schriften/Karla-var.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  src: url('schriften/Karla-var-ext.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Grundwerte, exakt aus der Originalseite ---------- */

:root {
  /* Farben, ausgelesen aus dem Elementor-Stil der alten Seite */
  --violett: #916fbc;          /* Kopfleiste, Vorzeilen, Schaltflaechen */
  --pink: #d35ebe;             /* Zeichen in der Infozeile, Hover */
  /* Original war #29293A, ein kaltes Fast-Schwarz mit 14,3:1 gegen Weiss.
     Am 24.08.2026 auf Kalles Wunsch weicher: warmes Grauviolett aus der
     Familie des Marken-Violetts, 9,3:1 und damit weiterhin AAA. */
  --dunkel: #4a4458;           /* Ueberschriften und Fliesstext */
  --schieber-grund: #29293a;   /* nur der Grund hinter den Hero-Bildern */
  /* Nebentexte. Vorher #6F6F7A und #8A8A95, beide unter AA (4,5:1).
     Am 24.08.2026 auf Kalles Wunsch angehoben: 6,5:1 auf Weiss,
     5,9:1 auf dem Fusszeilengrund. */
  --gedaempft: #5f5c69;        /* Preisstand, Fusszeile, Streichpreis */
  --grau: #54595f;             /* Hover im Untermenue */
  --weiss: #ffffff;
  --linie: #e6e2ec;

  --breite: 1200px;            /* Elementor-Container der Originalseite */
  --radius: 25px;              /* Schaltflaechen der Originalseite */
  --schatten: 0 2px 12px rgba(41, 41, 58, 0.08);
  --schatten-hoch: 0 12px 32px rgba(41, 41, 58, 0.14);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 8rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Original: Lato 20px, Staerke 300, Zeilenhoehe 1.5em, Laufweite 0.3px.
     Am 24.08.2026 auf Kalles Wunsch Karla 17px Staerke 400. */
  font-family: 'Karla', 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5em;
  letter-spacing: 0.3px;
  color: var(--dunkel);
  background: var(--weiss);
  overflow-x: hidden;
}

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

a { color: var(--violett); text-decoration: none; transition: color 0.3s; }
a:hover, a:focus-visible { color: var(--pink); }

/* Original: Lato 32px, Staerke 400, Zeilenhoehe 1em, Laufweite 0.7px */
h1, h2, h3, h4 {
  margin: 0 0 1rem;
  font-family: 'Lato', Arial, sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1em;
  letter-spacing: 0.7px;
  color: var(--dunkel);
}
/* Kein capitalize auf h1. Die Ueberschriften sind ohnehin richtig
   geschrieben, und auf der Kontaktseite ist die Ueberschrift ein ganzer
   Satz: aus "Für weitere Fragen stehen wir Ihnen sehr gerne zur Seite"
   wurde sonst "Für Weitere Fragen Stehen Wir ...". */
h1 { text-transform: none; }
h3 { font-size: 24px; }
h4 { font-size: 22px; }
@media (max-width: 48rem) {
  h1, h2 { font-size: 24px; }
  h3 { font-size: 21px; }
  h4 { font-size: 20px; }
}

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

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

.zum-inhalt {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--violett); color: var(--weiss);
  padding: 0.75rem 1.25rem; border-radius: 0 0 6px 0; font-size: 16px;
}
.zum-inhalt:focus { left: 0; color: var(--weiss); }

.huelle { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }
.huelle-schmal { width: min(100% - 2.5rem, 900px); margin-inline: auto; }

.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Kopfbereich ---------- */

/* Infozeile: weisser Grund, dunkler Text, pinke Zeichen.
   Original: padding 30px 0, Lato 16px, Laufweite 0.23px, Abstand 60px */
.infozeile { background: var(--weiss); padding: 30px 0; }
.infozeile .huelle {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.5rem 60px;
}
.infozeile span {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 16px; font-weight: 400; line-height: 1.44em;
  letter-spacing: 0.23px; color: var(--dunkel);
}
.infozeile a { color: var(--dunkel); }
.infozeile a:hover { color: var(--violett); }
.infozeile svg { width: 19px; height: 19px; flex: none; color: var(--pink); }

/* Kopfleiste: violett, Original padding 30px 0 */
.seitenkopf {
  position: sticky; top: 0; z-index: 99;
  background: var(--violett);
  padding: 14px 0;
  /* Weicher Schatten nach unten, damit die Leiste nicht mit einer
     harten Kante auf dem Inhalt aufsitzt. Zwei gestaffelte Schatten:
     der enge zeichnet die Kante, der weite traegt sie aus. */
  box-shadow: 0 2px 5px rgba(41, 41, 58, 0.12),
              0 10px 26px rgba(41, 41, 58, 0.14);
}
.seitenkopf .huelle {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}

/* Logo nach HOEHE bemessen, nicht nach Breite. So bleibt die Kopfleiste
   berechenbar niedrig, egal wie breit die Datei ist. flex:none an beiden
   Stellen, sonst quetscht der Flexbereich das Bild.
   Die Datei ist auf die Schrift zugeschnitten (243x72). Vorher war sie
   249x128 mit 56px leerer Flaeche unten, dadurch sass das Wort 28px ueber
   der Kastenmitte und wirkte gegenueber dem Menue nach oben verschoben. */
.seitenlogo { flex: none; display: block; }
.seitenlogo img { height: 48px; width: auto; flex: none; }
@media (max-width: 60rem) { .seitenlogo img { height: 40px; } }
@media (max-width: 30rem) { .seitenlogo img { height: 34px; } }

/* Menue: Lato 18px, Staerke 400, Laufweite 1px, weiss.
   Original: seitliche Polsterung 24px, Abstand 4px */
.hauptmenue { display: flex; align-items: center; gap: 4px; }
/* Nur die oberste Ebene. Ohne den Kindselektor faerbt diese Regel auch
   die Verweise im Untermenue weiss und wird dort nur zufaellig durch die
   spaeter stehende Regel .untermenue a wieder ueberschrieben. */
.hauptmenue > a, .menue-gruppe > button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 24px;
  /* Original: Lato. Vorher "inherit", was seit der Karla-Umstellung
     Karla ergeben wuerde. Deshalb ausdruecklich Lato. */
  font-family: 'Lato', Arial, sans-serif; font-size: 18px; font-weight: 400;
  letter-spacing: 1px; line-height: 1.4;
  color: var(--weiss); background: none; border: 0; cursor: pointer;
  transition: color 0.3s, background-color 0.3s;
}
.hauptmenue > a:hover, .hauptmenue > a:focus-visible,
.menue-gruppe > button:hover, .menue-gruppe > button[aria-expanded="true"] {
  color: var(--weiss); background: rgba(255, 255, 255, 0.14);
}
/* Original: aktiver Punkt bleibt schlicht weiss, ohne Auszeichnung.
   WICHTIG: nur direkte Kinder. Ohne den Kindselektor faerbt die Regel
   auch die Verweise im weissen Untermenue weiss und der aktive Punkt
   verschwindet dort. Genau das ist am 24.08.2026 passiert. */
.hauptmenue > a[aria-current="page"] { color: var(--weiss); }
.menue-gruppe > button svg { width: 12px; height: 12px; transition: transform 0.3s; }
.menue-gruppe > button[aria-expanded="true"] svg { transform: rotate(180deg); }

.menue-gruppe { position: relative; }
.untermenue {
  position: absolute; top: calc(100% + 20px); left: 0; min-width: 15rem;
  padding: 0.5rem 0;
  background: var(--weiss);
  border: 1px solid var(--violett);
  box-shadow: var(--schatten-hoch);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
}
.menue-gruppe > button[aria-expanded="true"] + .untermenue {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.untermenue a {
  display: block; width: 100%; padding: 10px 24px;
  color: var(--dunkel); letter-spacing: 0.3px; font-size: 17px;
}
.untermenue a:hover, .untermenue a:focus-visible { color: var(--grau); background: #f6f3f9; }
/* Aktiver Punkt im Untermenue: violett und halbfett, nicht weiss */
.untermenue a[aria-current="page"] { color: var(--violett); font-weight: 400; background: #f6f3f9; }

.menueschalter {
  display: none; flex: none; width: 2.75rem; height: 2.75rem;
  padding: 0; background: none; border: 0; cursor: pointer;
}
.menueschalter span {
  display: block; width: 1.5rem; height: 2px; margin: 6px auto;
  background: var(--weiss); border-radius: 2px;
  transition: transform 0.25s, opacity 0.2s;
}
.menueschalter[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menueschalter[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menueschalter[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- 4. Mobiles Menue ---------- */

@media (max-width: 64rem) {
  .menueschalter { display: block; }
  .infozeile .huelle { gap: 0.35rem 1.75rem; }
  .infozeile span { font-size: 15px; }
  .infozeile { padding: 14px 0; }

  .hauptmenue {
    position: fixed; inset: 0 0 0 auto; width: min(20rem, 84vw);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 5.5rem 1rem 2rem;
    background: var(--violett);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
    transform: translateX(100%); transition: transform 0.28s;
    overflow-y: auto;
  }
  .hauptmenue[data-offen="ja"] { transform: translateX(0); }
  .hauptmenue > a, .menue-gruppe > button { width: 100%; padding: 12px 16px; }
  .menue-gruppe { width: 100%; }
  .menue-gruppe > button { justify-content: space-between; }

  .untermenue {
    position: static; min-width: 0; padding: 0 0 0.5rem 1rem;
    background: none; border: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none; display: none;
  }
  .menue-gruppe > button[aria-expanded="true"] + .untermenue { display: block; }
  .untermenue a { color: rgba(255, 255, 255, 0.88); font-size: 16px; padding: 10px 16px; }
  .untermenue a:hover, .untermenue a:focus-visible { color: var(--weiss); background: rgba(255,255,255,.14); }
  .untermenue a[aria-current="page"] { color: var(--weiss); background: rgba(255,255,255,.14); }

  .menue-schleier {
    position: fixed; inset: 0; background: rgba(41, 41, 58, 0.55);
    opacity: 0; visibility: hidden; transition: opacity 0.28s, visibility 0.28s; z-index: 98;
  }
  .menue-schleier[data-offen="ja"] { opacity: 1; visibility: visible; }
  body[data-menue="offen"] { overflow: hidden; }
}

/* ---------- 5. Schieber im Kopfbereich ---------- */

/* Der Grund ist nur sichtbar, solange die Hero-Bilder laden. Er bleibt auf
   dem alten dunklen Wert, die weichere Textfarbe gilt nur fuer Text. */
.schieber { position: relative; overflow: hidden; background: var(--schieber-grund); }
.schieber-spur { display: flex; }
.folie {
  position: relative; flex: 0 0 100%;
  /* Die Folienbilder sind 1920 breit und 650 bis 800 hoch, also rund
     34vw. Bleibt die Hoehe fest, wird der Ausschnitt auf breiten
     Schirmen immer schmaler und das Bild wirkt zu klein. Deshalb
     waechst die Hoehe mit der Breite mit, nach oben begrenzt, damit
     der Kopfbereich nicht den ganzen Bildschirm einnimmt. */
  min-height: clamp(640px, 34vw, 880px);
  display: flex; align-items: center;
  background: center / cover no-repeat;
  opacity: 0; transition: opacity 0.8s ease;
}
.folie:not(:first-child) { margin-left: -100%; }
.folie[data-aktiv="ja"] { opacity: 1; z-index: 1; }

/* Original: Ueberlagerung #414040 mit nur 20 Prozent Deckkraft */
.folie::after { content: ''; position: absolute; inset: 0; background: #414040; opacity: 0.2; }
.folie .huelle { position: relative; z-index: 2; padding: 3rem 0 6rem; }

/* Im Original eine Schreibschrift, 102px Staerke 900. Auf Kalles Wunsch
   Cormorant Garamond, am 24.08.2026 auf 72px Staerke 300 gesetzt.
   Der negative Anschnitt oben faellt weg, er war fuer die langen
   Oberlaengen der Schreibschrift gedacht. */
.folie-titel {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Lato', serif;
  font-size: 72px; font-weight: 300; line-height: 1.44em;
  letter-spacing: 0.5px; color: var(--weiss); text-transform: none;
}
/* Original: Lato 32px, Staerke 300, weiss, Laufweite 0.7px */
.folie-untertitel {
  margin: 0;
  font-size: 32px; font-weight: 400; line-height: 1.44em;
  letter-spacing: 0.7px; color: var(--weiss);
}
@media (max-width: 64rem) {
  .folie { min-height: 460px; }
  .folie-titel { font-size: 54px; margin: 0; }
  .folie-untertitel { font-size: 28px; }
}
@media (max-width: 30rem) {
  .folie { min-height: 380px; }
  .folie-titel { font-size: 38px; }
  .folie-untertitel { font-size: 20px; }
}

/* Punkte, Original 10x10 */
.schieber-punkte {
  position: absolute; left: 0; right: 0; bottom: 58px; z-index: 3;
  display: flex; justify-content: flex-start; gap: 15px;
  width: min(100% - 2.5rem, var(--breite)); margin-inline: auto;
}
.schieber-punkte button {
  width: 10px; height: 10px; padding: 0;
  background: rgba(255, 255, 255, 0.53);
  border: 1px solid rgba(255, 255, 255, 0.49);
  border-radius: 50%; cursor: pointer; transition: background-color 0.3s, box-shadow 0.3s;
}
.schieber-punkte button[aria-current="true"] {
  background: var(--weiss); border-color: var(--weiss);
  box-shadow: 0 0 0 3px var(--weiss);
}

/* ---------- 6. Bausteine ---------- */

/* Original-Schaltflaeche: Lato 18px, Staerke 600, capitalize,
   Polsterung 18px 51px, Radius 25px, violett, Hover pink */
.schaltflaeche {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 42px;
  padding: 18px 51px;
  font-family: 'Lato', Arial, sans-serif; font-size: 18px; font-weight: 600;
  text-transform: capitalize; line-height: 1em; letter-spacing: 0;
  color: var(--weiss); background: var(--violett);
  border: 0; border-radius: var(--radius); cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
.schaltflaeche:hover, .schaltflaeche:focus-visible { color: var(--weiss); background: var(--pink); }
.schaltflaeche-eng { margin-top: 0; padding: 14px 36px; }
.schaltflaeche-hell { background: transparent; border: 2px solid var(--weiss); }
.schaltflaeche-hell:hover { background: var(--weiss); color: var(--violett); }

/* Vorzeile: im Original eine Schreibschrift 32px/700, auf Kalles Wunsch
   ebenfalls Cormorant Garamond. Groesse und Farbe bleiben. */
.vorzeile {
  display: block; margin-bottom: 0.5rem;
  font-family: 'Cormorant Garamond', 'Lato', serif;
  font-size: 32px; font-weight: 600; line-height: 1em;
  letter-spacing: 0; color: var(--violett); text-transform: capitalize;
}
/* Im Original traegt genau die Vorzeile "Für unsere Kunden"
   text-transform:none, alle uebrigen capitalize. Ohne diese Ausnahme
   steht dort "Für Unsere Kunden". */
.vorzeile-normal { text-transform: none; }

.abschnitt { padding: 80px 0; }
/* Zwei Abschnitte hintereinander ergaben 160px Luft. Der vordere gibt ab. */
.abschnitt:has(+ .abschnitt-flaeche) { padding-bottom: 32px; }
.abschnitt-flaeche { padding: 56px 0; background: #f6f3f9; }
/* Seitentitel und der folgende Inhalt sind ein Block. Ohne diese beiden
   Regeln stehen 160px Luft zwischen Ueberschrift und erstem Eintrag. */
/* Kopfbild der Unterseiten. Es gab dafuer bisher gar keine Regel, das Bild
   hing allein an der allgemeinen Vorgabe img { max-width: 100% }. Die
   begrenzt nach oben, streckt aber nicht: ab einem Fenster, das breiter ist
   als das Bild (2000px, bei Haarentfernung sogar nur 1920px), blieb das Bild
   stehen und rechts blieb ein weisser Rand. Mit width: 100% waechst es mit. */
.banner img { width: 100%; height: auto; }

.seitentitel { padding: 56px 0 0; }
/* Einstiegsabsatz unter der H1 der Leistungsseiten. Fasst Angebot, Preisspanne
   und Kontakt in zwei bis drei Saetzen zusammen. Suchmaschinen und KI-Systeme
   entnehmen ihre Antworten ueberwiegend aus dem Anfang einer Seite. */
.einstieg { max-width: 46rem; margin: 1.25rem auto 0; }

/* Standdatum der Preise, steht am Ende des Inhalts ueber dem Kontaktbereich. */
.preisstand {
  margin: 3rem auto 0; text-align: center;
  font-size: 16px; color: var(--gedaempft);
}
.seitentitel + .abschnitt { padding-top: 1.5rem; }
/* Der erste Abschnittskopf braucht keine eigene Polsterung nach oben,
   die Ueberschrift steht ja direkt darueber. Die erste Leistungskarte
   behaelt ihre 2rem: sie stand am 24.08.2026 zu dicht am Einstiegstext. */
.seitentitel + .abschnitt .abschnittskopf:first-child { padding-top: 0; }
.abschnitt-mitte { text-align: center; }
.abschnitt-bild { background: center / cover no-repeat; }
.abschnittskopf { margin-bottom: 3rem; }
/* Nur in zentrierten Abschnitten mittig. Sonst stand der Absatz 82px
   rechts von seiner eigenen Ueberschrift. */
.abschnittskopf p { max-width: 46rem; }
.abschnitt-mitte .abschnittskopf p { margin-inline: auto; }

.raster { display: grid; gap: 1.75rem; }
.raster-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.raster-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.raster-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.karte {
  display: flex; flex-direction: column; text-align: center;
  padding: 2rem 1.75rem;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px;
  box-shadow: var(--schatten);
  transition: transform 0.3s, box-shadow 0.3s;
}
.karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); }
.karte h3 { margin-bottom: 0.75rem; }
.karte p { font-size: 17px; }
.karte-dauer {
  display: block; margin-bottom: 0.75rem;
  font-size: 15px; letter-spacing: 1px; text-transform: uppercase; color: var(--violett);
}
.karte-preis {
  margin-top: auto; padding-top: 1.25rem;
  font-size: 28px; font-weight: 400; color: var(--violett); line-height: 1.2;
}
.karte-preis .statt {
  display: block; font-size: 16px; font-weight: 400;
  color: var(--gedaempft); text-decoration: line-through;
}

/* Preisliste. Die Bezeichnung heisst bewusst .posten und NICHT .leistung:
   .leistung ist weiter unten der Behandlungs-Artikel der Leistungsseiten.
   Bei gleichem Namen erbte die Zeile dessen Polsterung und Rand, das gab
   drei Linien uebereinander und eine 95px hohe Zeile. */
.preisliste { list-style: none; margin: 1rem 0 0; padding: 0; }
.preisliste li {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.45rem 0;
  font-size: 18px;
}
.preisliste .posten { flex: 0 1 auto; }
/* Eine einzige Fuehrungslinie, gepunktet, zwischen Text und Preis */
.preisliste .punkte {
  flex: 1 1 auto; min-width: 1.5rem;
  height: 0.55em;
  border-bottom: 1px dotted #cfc8d9;
}
.preisliste .preis { flex: none; font-weight: 400; color: var(--violett); white-space: nowrap; }

/* ---------- 7. Startseite ---------- */

/* Abschnitt "Die Vorteile" liegt auf einem Foto, das nur links weiss ist.
   Deshalb steht der Inhalt wie im Original in der linken Haelfte, die vier
   Punkte als 2x2. Original-Polsterung: 96px oben, 93px unten. */
.abschnitt-vorteile { padding: 96px 0 93px; }
.abschnitt-vorteile .inhalt { max-width: 600px; text-align: left; }
.abschnitt-vorteile .abschnittskopf { margin-bottom: 2.5rem; }
.abschnitt-vorteile .raster { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; }

@media (max-width: 64rem) {
  /* Auf schmalen Bildschirmen rutscht der Bildinhalt unter den Text,
     deshalb ein heller Schleier, sonst wird nichts mehr lesbar. */
  .abschnitt-vorteile { position: relative; padding: 60px 0; }
  .abschnitt-vorteile::before {
    content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.86);
  }
  .abschnitt-vorteile .huelle { position: relative; z-index: 1; }
  .abschnitt-vorteile .inhalt { max-width: none; }
}
@media (max-width: 34rem) {
  .abschnitt-vorteile .raster { grid-template-columns: 1fr; }
}

.vorteil { text-align: center; }
.vorteil .zeichen {
  display: grid; place-items: center; width: 64px; height: 64px;
  margin: 0 auto 1.25rem; border-radius: 50%;
  background: rgba(145, 111, 188, 0.12); color: var(--violett);
}
.vorteil .zeichen svg { width: 30px; height: 30px; }
.vorteil p { font-size: 17px; }

/* Impressionen: Mosaik mit unterschiedlich grossen Kacheln.
   4 Spalten, 4 Reihen, sechs Bilder ohne Luecken:
     Reihe 1 und 2: gross | schmal | schmal
     Reihe 3 und 4: schmal | schmal | gross           */
.galerie {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 170px;
  gap: 12px;
}
.galerie-kachel {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  padding: 0;
  border: 0;
  background: #ece7f2;
  cursor: zoom-in;
  opacity: 0;
  transform: scale(0.94) translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.22,.9,.32,1);
}
.galerie-kachel[data-sichtbar="ja"] { opacity: 1; transform: none; }

/* Vier Spalten, fuenf Reihen, lueckenlos:
     1 gross und hoch | 2 breit | 3 und 4 klein | 5 und 6 breit */
.galerie-kachel:nth-child(1) { grid-column: span 2; grid-row: span 3; }
.galerie-kachel:nth-child(2) { grid-column: span 2; grid-row: span 2; }
.galerie-kachel:nth-child(3) { grid-column: span 1; grid-row: span 1; }
.galerie-kachel:nth-child(4) { grid-column: span 1; grid-row: span 1; }
.galerie-kachel:nth-child(5) { grid-column: span 2; grid-row: span 2; }
.galerie-kachel:nth-child(6) { grid-column: span 2; grid-row: span 2; }

.galerie-kachel img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(.22,.9,.32,1), filter 0.5s;
}
.galerie-kachel::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(145,111,188,0) 40%, rgba(145,111,188,.55) 100%);
  opacity: 0;
  transition: opacity 0.45s;
}
.galerie-kachel .lupe {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  z-index: 2;
  opacity: 0; transform: scale(0.7);
  transition: opacity 0.35s, transform 0.45s cubic-bezier(.22,.9,.32,1);
}
.galerie-kachel .lupe span {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--violett);
  box-shadow: 0 6px 22px rgba(41,41,58,.28);
}
.galerie-kachel .lupe svg { width: 24px; height: 24px; }

.galerie-kachel:hover img,
.galerie-kachel:focus-visible img { transform: scale(1.08); filter: saturate(1.08); }
.galerie-kachel:hover::after,
.galerie-kachel:focus-visible::after { opacity: 1; }
.galerie-kachel:hover .lupe,
.galerie-kachel:focus-visible .lupe { opacity: 1; transform: scale(1); }

@media (max-width: 64rem) {
  .galerie { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
  .galerie-kachel:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .galerie-kachel:nth-child(2) { grid-column: span 1; grid-row: span 2; }
  .galerie-kachel:nth-child(3) { grid-column: span 1; grid-row: span 2; }
  .galerie-kachel:nth-child(4) { grid-column: span 1; grid-row: span 1; }
  .galerie-kachel:nth-child(5) { grid-column: span 1; grid-row: span 1; }
  .galerie-kachel:nth-child(6) { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 34rem) {
  .galerie { grid-template-columns: 1fr; grid-auto-rows: 210px; }
  .galerie-kachel:nth-child(n) { grid-column: span 1; grid-row: span 1; }
}

/* Leuchtkasten zum Vergroessern. Eigener Aufbau, keine Bibliothek. */
.leuchtkasten {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 3rem 1.25rem;
  background: rgba(25, 25, 36, 0.94);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.leuchtkasten[data-offen="ja"] { opacity: 1; visibility: visible; }
.leuchtkasten img {
  max-width: min(100%, 1200px);
  max-height: calc(100vh - 9rem);
  width: auto; height: auto;
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  transform: scale(0.94);
  transition: transform 0.35s cubic-bezier(.22,.9,.32,1), opacity 0.25s;
}
.leuchtkasten[data-offen="ja"] img { transform: scale(1); }
.leuchtkasten .zaehler {
  position: absolute; bottom: 1.5rem; left: 0; right: 0;
  text-align: center; color: rgba(255,255,255,.72); font-size: 15px;
}
.leuchtkasten button {
  position: absolute;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  color: var(--weiss); background: rgba(255,255,255,.12);
  border: 0; border-radius: 50%; cursor: pointer;
  transition: background-color 0.25s;
}
.leuchtkasten button:hover { background: var(--violett); }
.leuchtkasten button svg { width: 22px; height: 22px; }
.leuchtkasten .zu { top: 1.25rem; right: 1.25rem; }
.leuchtkasten .zurueck { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.leuchtkasten .weiter { right: 1.25rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 40rem) {
  .leuchtkasten { padding: 4.5rem 0.75rem; }
  .leuchtkasten .zurueck { left: 0.5rem; }
  .leuchtkasten .weiter { right: 0.5rem; }
  .leuchtkasten button { width: 44px; height: 44px; }
}
body[data-leuchtkasten="offen"] { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .galerie-kachel { opacity: 1; transform: none; }
}

.ueber-mich { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 60rem) { .ueber-mich { grid-template-columns: 1fr 1fr; } }
.ueber-mich img { border-radius: 6px; }
.ausbildung { display: grid; gap: 1.5rem 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.ausbildung h4 { margin-bottom: 0.5rem; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; color: var(--violett); }
.ausbildung ul { margin: 0; padding-left: 1.125rem; font-size: 18px; }
.ausbildung li { margin-bottom: 0.25rem; }

.stimme { display: flex; flex-direction: column; text-align: center; padding: 2rem 1.75rem; }
.stimme .sterne { margin-bottom: 1rem; color: var(--violett); font-size: 23px; letter-spacing: 4px; }
.stimme blockquote { margin: 0 0 1.25rem; font-size: 18px; }
/* Original: Lato 17px, Staerke 300, Farbe #29293A */
.stimme figcaption { margin-top: auto; font-size: 17px; font-weight: 400; color: var(--dunkel); }

/* ---------- 8. Leistungsseiten ---------- */

.buehne { position: relative; display: flex; align-items: center; min-height: 320px; padding: 4rem 0; background: var(--violett) center / cover no-repeat; }
.buehne::after { content: ''; position: absolute; inset: 0; background: #414040; opacity: 0.35; }
.buehne .huelle { position: relative; z-index: 1; text-align: center; }
.buehne h1 { color: var(--weiss); }
.buehne .vorzeile { color: var(--weiss); }

.leistung { padding: 2rem 0; border-bottom: 1px solid var(--linie); }
.leistung:last-child { border-bottom: 0; }
.leistung-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.leistung-kopf h3 { margin: 0; }
.leistung-kopf .preis { font-size: 24px; font-weight: 400; color: var(--violett); white-space: nowrap; }
.leistung .dauer { display: inline-block; margin-bottom: 0.75rem; padding: 3px 14px; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; color: var(--violett); background: rgba(145,111,188,.1); border-radius: 20px; }
.leistung ul { margin: 1rem 0 0; padding-left: 1.25rem; font-size: 18px; }
.leistung li { margin-bottom: 0.35rem; }

.hinweis { margin: 2rem 0; padding: 1.25rem 1.5rem; background: rgba(211, 94, 190, 0.07); border-left: 3px solid var(--pink); font-size: 18px; }
.hinweis p { margin: 0; }

/* ---------- 9. Formular ---------- */

.formular { display: grid; gap: 1.25rem; text-align: left; }
.feldpaar { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.formular label { display: block; margin-bottom: 0.4rem; font-size: 16px; font-weight: 400; color: var(--dunkel); }
.formular input[type="text"], .formular input[type="email"], .formular input[type="tel"],
.formular textarea, .formular select {
  width: 100%; padding: 14px 16px; font: inherit; font-size: 17px;
  color: var(--dunkel); background: var(--weiss);
  border: 1px solid var(--linie); border-radius: 6px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.formular textarea { min-height: 10rem; resize: vertical; }
.formular input:focus, .formular textarea:focus, .formular select:focus {
  outline: none; border-color: var(--violett); box-shadow: 0 0 0 3px rgba(145,111,188,.18);
}
.formular input[aria-invalid="true"], .formular textarea[aria-invalid="true"] { border-color: #c0392b; }

.zustimmung { display: flex; align-items: flex-start; gap: 12px; }
.zustimmung input { flex: none; width: 20px; height: 20px; margin-top: 5px; accent-color: var(--violett); }
.zustimmung label { margin: 0; font-size: 16px; line-height: 1.6; }
.pflichtstern { color: var(--pink); }

/* Honigtopf gegen automatisch ausfuellende Programme. Nie sichtbar. */
.honigtopf { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.formular-meldung { padding: 1rem 1.25rem; border-radius: 6px; font-size: 17px; }
.formular-meldung[data-art="erfolg"] { background: rgba(97,206,112,.13); border-left: 3px solid #47a854; color: #2c6b36; }
.formular-meldung[data-art="fehler"] { background: rgba(192,57,43,.09); border-left: 3px solid #c0392b; color: #92291d; }
.formular-meldung[hidden] { display: none; }

.kontaktdaten { display: grid; gap: 1.5rem; text-align: left; }
.kontaktdaten .zeile { display: flex; align-items: flex-start; gap: 14px; }
.kontaktdaten .zeichen { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: rgba(145,111,188,.12); color: var(--violett); }
.kontaktdaten .zeichen svg { width: 21px; height: 21px; }
.kontaktdaten p { margin: 0; font-size: 18px; }
.kontaktdaten strong { display: block; font-weight: 400; color: var(--dunkel); }

/* ---------- 10. Kontaktbereich und Fusszeile ---------- */

/* Kontaktbereich, Original: Zeichen #D35EBE, Text Lato 16px,
   Zeilenhoehe 1.64em, Laufweite 0.3px, Titel #29293A */
/* Zwei Spalten wie im Original: die Angaben links, die Karte rechts
   daneben. Erst unter 60rem stehen sie untereinander, dann liegt die
   Karte wieder unter den Angaben. */
.kontaktraster {
  display: grid; gap: 3rem;
  align-items: center;
}
/* Rasterfelder duerfen nicht ueber ihr Feld hinauswachsen. Ein Feld
   mit aspect-ratio wird sonst wie ein Bild behandelt und leitet seine
   Breite aus der Mindesthoehe ab: die Karte waere auf dem Handy rund
   600px breit. width: 100% bindet sie an die Spalte, das
   Seitenverhaeltnis bestimmt dann nur noch die Hoehe. */
.kontaktraster > * { min-width: 0; }
.kontaktraster > .kartenkasten { width: 100%; }
@media (min-width: 60.0625rem) {
  .kontaktraster { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

/* In der schmalen Spalte stehen die drei Angaben untereinander.
   Steht der Bereich einspaltig, duerfen sie wieder nebeneinander. */
.kontaktkacheln {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin-top: 3rem;
}
@media (min-width: 60.0625rem) {
  .kontaktkacheln { grid-template-columns: 1fr; gap: 2rem; }
}
.kachel { text-align: center; }
.kachel .zeichen {
  display: grid; place-items: center; width: 64px; height: 64px;
  margin: 0 auto 1.25rem; border-radius: 50%;
  background: var(--pink); color: var(--weiss);
}
.kachel .zeichen svg { width: 28px; height: 28px; }
.kachel p {
  margin: 0; font-size: 16px; font-weight: 400;
  line-height: 1.64em; letter-spacing: 0.3px; color: var(--dunkel);
}
.kachel strong { display: block; font-weight: 400; color: var(--dunkel); }
.kachel a { color: var(--dunkel); }
.kachel a:hover { color: var(--pink); }

/* Fussbereich. Grund #F3F3F9 wie im Original, Aufbau vierspaltig.
   Auf hellem Grund braucht das weisse Logo eine violette Fassung. */
.seitenfuss {
  padding: 60px 0 22px;
  background: #f3f3f9;
  color: var(--dunkel);
  font-size: 17px;
}
.seitenfuss h3 {
  margin-bottom: 1rem;
  font-size: 15px; font-weight: 400;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--violett);
}
.seitenfuss a { color: var(--dunkel); }
.seitenfuss a:hover, .seitenfuss a:focus-visible { color: var(--pink); }
.fussraster {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.fussraster ul { list-style: none; margin: 0; padding: 0; }
.fussraster li { margin-bottom: 0.5rem; }
.fusslogo img { height: 52px; width: auto; margin-bottom: 1.25rem; }
.fusslogo p { font-size: 16px; color: #4a4a55; }

.fusszeile {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid #e2e0ea;
}
.fusszeile p {
  margin: 0;
  font-size: 16px; font-weight: 400; line-height: 1.75em; color: var(--gedaempft);
}
.fusszeile nav { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 16px; }
.fusszeile a { color: var(--gedaempft); }
.fusszeile a:hover, .fusszeile a:focus-visible { color: var(--pink); }

/* Karte. Laedt erst auf Klick, vorher geht keine einzige Anfrage
   an Google. So bleibt die Zusage in der Datenschutzerklaerung wahr. */
.kartenkasten {
  position: relative;
  margin-top: 3rem;
  aspect-ratio: 16 / 7;
  min-height: 260px;
  /* Steht die Karte neben den Angaben, ist das breite Format falsch.
     Dann traegt das Raster den Abstand und die Karte wird hochkanter. */
  overflow: hidden;
  border-radius: 6px;
  background:
    repeating-linear-gradient(45deg, #efeaf5 0 14px, #e8e1f0 14px 28px);
}
@media (min-width: 60.0625rem) {
  .kontaktraster > .kartenkasten { margin-top: 0; aspect-ratio: 5 / 4; }
}
.kartenkasten iframe { width: 100%; height: 100%; border: 0; display: block; }
.karten-platzhalter {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 1rem;
  padding: 2rem 1.5rem;
  text-align: center;
}
.karten-platzhalter .zeichen {
  display: grid; place-items: center; width: 64px; height: 64px;
  border-radius: 50%; background: var(--pink); color: var(--weiss);
}
.karten-platzhalter .zeichen svg { width: 28px; height: 28px; }
.karten-platzhalter p { margin: 0; font-size: 17px; max-width: 30rem; }
.karten-platzhalter .klein { font-size: 15px; color: #4a4a55; }
.karten-platzhalter .schaltflaeche { margin-top: 0.5rem; }
.karten-knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.karten-knoepfe .schaltflaeche { margin-top: 0; padding: 14px 32px; }
.schaltflaeche-rand {
  color: var(--violett); background: transparent; border: 2px solid var(--violett);
}
.schaltflaeche-rand:hover, .schaltflaeche-rand:focus-visible {
  color: var(--weiss); background: var(--violett);
}

/* ---------- 11. Rechtstexte ---------- */

.rechtstext { padding: 60px 0; text-align: left; font-size: 18px; }
.rechtstext h2 { margin-top: 2.5rem; }
.rechtstext h2:first-of-type { margin-top: 0; }
.rechtstext h3 { margin-top: 1.75rem; font-size: 21px; }
.rechtstext ul, .rechtstext ol { padding-left: 1.375rem; }
.rechtstext li { margin-bottom: 0.4rem; }
.rechtstext dt { font-weight: 400; color: var(--violett); }
.rechtstext dd { margin: 0 0 0.9rem; }
.datenkasten { margin: 1.5rem 0; padding: 1.25rem 1.5rem; background: #f6f3f9; border-radius: 6px; }
.datenkasten p { margin-bottom: 0.35rem; }

/* ---------- 12. Einblenden beim Scrollen ---------- */

.einblenden { opacity: 0; transform: translateY(20px); transition: opacity 0.6s, transform 0.6s; }
.einblenden[data-sichtbar="ja"] { opacity: 1; transform: none; }

/* Seitlich einfliegend: die Kontaktdaten kommen von links herein,
   die Karte von rechts. Laengerer Weg und weicheres Ausrollen als
   beim Einblenden von unten, sonst wirkt die Bewegung abgehackt.
   Den Zeitversatz je Element setzt das Skript aus data-verzug. */
.einblenden-links  { transform: translateX(-60px); }
.einblenden-rechts { transform: translateX(60px); }
.einblenden-links, .einblenden-rechts {
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(.22,.9,.32,1);
}

/* Der Weg nach links und rechts darf die Seite nicht breiter machen.
   body hat zwar overflow-x: hidden, der Abschnitt schneidet aber
   zuverlaessiger ab. */
.kontaktbereich { overflow-x: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .einblenden, .einblenden-links, .einblenden-rechts { opacity: 1; transform: none; }
}