/* ==========================================================================
   Kunst- und Kreativtherapie Karolin Breitgraf

   Alle Werte sind aus der Vorlage gemessen:
     main.min.css@ver=6.4.10.css      (Theme "mindcare")
     mindcare-core.min.css@ver=6.4.10.css
     Customizer-Block <style id="mindcare-style-inline-css"> im <head>
   Der Customizer steht NACH der Theme-CSS und ueberschreibt sie.

   Aufbau: ein Abschnitt je Baustein, die zugehoerigen Media-Queries
   stehen direkt darunter. Kein Selektor kommt zweimal vor.
   ========================================================================== */

:root {
  /* Farben */
  --akzent:        #964c76;   /* Customizer, ersetzt Theme-Standard #d58f76 */
  --ueberschrift:  #56215b;   /* wp-custom-css, h1-h6 als Elementselektor */
  --titel-theme:   #200960;   /* Theme-Grundton .qodef-h1-.qodef-h6.
                                 Die Regel im wp-custom-css trifft nur die
                                 Elemente h1-h6, nicht die gleichnamigen
                                 Klassen - deshalb bleibt dieser Ton dort
                                 stehen, wo das Markup <p class="qodef-h4">
                                 statt einer Ueberschrift benutzt. */
  --hover:         #124241;   /* a:hover, Fussbereich unten */
  --text:          #999999;   /* body */
  --flaeche:       #f6f3ee;   /* Sektionsflaechen */
  --grund:         #ffffff;

  /* Weitere Toene der Vorlage */
  --zier:          #ebd8d1;   /* Zierpunkte Navigation, Akkordeonlinien */
  --wasserzeichen: #ece7dd;   /* Wasserzeichen auf beigem Grund */
  --linie:         #f5ebe8;   /* Trennlinien */
  --text-dunkel:   #2d343e;   /* Fliesstext in Sektionen */
  --nav:           #444444;   /* Navigation */
  --theme-grundton:#d58f76;   /* Theme-Standard, bleibt an den Stellen
                                 stehen, die das wp-custom-css nicht
                                 anfasst: Fussknopf, Preistafel-Zeitraum */

  /* Schrift */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- Schriften, selbst gehostet ------------------------------------------
   Cormorant Garamond und Open Sans stehen unter der SIL Open Font License.
   Kein externer Abruf -> kein Einwilligungsdialog noetig.

   Gemessen: im Layout werden genau zwei Schnitte gebraucht,
   Cormorant Garamond 600 und Open Sans 400. Open Sans 300 kommt in der
   Vorlage nur an einer Stelle vor (Akkordeon-Zeichen) - siehe dort.        */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-600.woff2") format("woff2");
  font-weight: 600;
  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+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("../fonts/cormorant-garamond-600-ext.woff2") format("woff2");
  font-weight: 600;
  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: "Open Sans";
  src: url("../fonts/open-sans-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+0304, U+0308, U+0329, 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: "Open Sans";
  src: url("../fonts/open-sans-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;
}

/* --- Grundlagen ---------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 26px;
  font-weight: 400;
  color: var(--text);
  background-color: var(--grund);
  /* Belegt in main.min.css: body{...overflow-x:hidden...}. Traegt die
     ganze Reihenkonstruktion des Themes: .qodef-grid-item hat padding
     0 15px, jede .vc_row-fluid margin 0 -15px, und wo eine vc_custom-
     Regel das Spaltenpolster auf 0 setzt, ragt die Reihe noch weiter
     hinaus. Auf den Detailseiten laufen die Reihen ueber die volle
     Fensterbreite - ohne diese Zeile entsteht dort eine Querlaufleiste
     und der Inhalt verschiebt sich.                                     */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ueberschrift);
  margin: 25px 0;
  overflow-wrap: break-word;
}
h1 { font-size: 50px; line-height: 1.040; }
h2 { font-size: 42px; line-height: 1.024; }
h3 { font-size: 30px; line-height: 1.067; }
h4 { font-size: 22px; line-height: 1.136; }
h5 { font-size: 19px; line-height: 1.158; }

/* h6 faellt im Theme bewusst aus der Reihe: serifenlos, 400.
   Wird fuer die Namen unter den Kundenstimmen benutzt. */
h6 {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ueberschrift);
  margin: 25px 0;
}

@media (max-width: 1024px) { h1 { font-size: 40px; } h2 { font-size: 34px; } }
@media (max-width: 768px)  { h1 { font-size: 34px; } h2 { font-size: 30px; } h3 { font-size: 26px; } }
@media (max-width: 480px)  { h1 { font-size: 30px; } }

/* Gemessen im Customizer: a = #964c76, a:hover = #124241.
   Achtung: fuer .knopf--text gilt das NICHT, siehe dort. */
a { color: var(--akzent); text-decoration: none; }
a:hover, a:focus-visible { color: var(--hover); text-decoration: underline; }

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

/* Inhaltsbereich, entspricht #qodef-page-inner der Vorlage */
main { display: block; padding: 110px 0 100px; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--akzent); color: var(--grund); padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* --- Raster --------------------------------------------------------------
   Das Theme arbeitet mit festen Breiten, nicht mit fluiden Containern.
   Stufen absteigend, damit bei kleinen Schirmen die letzte Regel gewinnt.  */

.raster {
  width: 1100px;
  max-width: 100%;
  margin-inline: auto;
}
@media (min-width: 1440px) { .raster { width: 1300px; } }
@media (max-width: 1200px) { .raster { width: 960px; } }
@media (max-width: 1024px) { .raster { width: 768px; } }
@media (max-width: 768px)  { .raster { width: 600px; } }
@media (max-width: 680px)  { .raster { width: 420px; } }
@media (max-width: 480px)  { .raster { width: 300px; } }

.zweispalter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}
.zweispalter--getauscht .bildspalte { order: 2; }

/* Reihe mit Flaeche ueber beide Spalten (Karolin-Block).
   In der Vorlage traegt die vc_row den Grund #f6f3ee, nicht der
   Abschnitt - die Flaeche endet also am Raster, nicht am Fensterrand. */
.zweispalter--flaeche { background: var(--flaeche); align-items: center; }

/* Reihengeometrie der Vorlage. vc_row-fluid ist durch margin 0 -15px
   30px breiter als das Raster; die Spalten darin sind Bootstrap-2-
   Fluid-Spalten: 48.93617% breit, 2.12766% Rinne, erstes Kind ohne
   Aussenabstand. Gegenprobe bei 1300er Raster: Reihe 1330, Spalten
   650.9 + Rinne 28.3 + 650.9. Gemessen an der beigen Flaeche der
   Erstgespraechsseite: 288 bis 937, also 650 breit, linke Kante
   15px links der Rasterkante.

   WICHTIG: Diese Klasse gehoert auf ein KIND von .raster, nicht auf
   .raster selbst. .raster hat width: 1300px und zentriert sich ueber
   margin-inline: auto - ein negativer Aussenabstand am selben Element
   hebt die Zentrierung auf und macht es wegen der festen Breite auch
   nicht breiter. Dieselbe Konstruktion wie bei .ebook-band.

   Bewusst als Modifier, nicht in .zweispalter - die Startseite ist
   abgenommen und wuerde sich sonst mitverschieben.                        */
.zweispalter--reihe { margin: 0 -15px; gap: 2.12766%; }

@media (max-width: 768px) { .zweispalter--reihe { margin: 0; gap: 0; } }

.dreispalter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.vierspalter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }

@media (max-width: 1024px) {
  .dreispalter { grid-template-columns: 1fr 1fr; }
  .vierspalter { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .zweispalter { grid-template-columns: 1fr; }
  .zweispalter--getauscht .bildspalte { order: 0; }
}
@media (max-width: 480px) {
  .dreispalter, .vierspalter { grid-template-columns: 1fr; }
}

/* --- Kopf ----------------------------------------------------------------
   Zweiteilig wie in der Vorlage: statischer Kopf (110px, im Inhaltsraster)
   und ein getrenntes, fest positioniertes Band (90px, volle Breite), das
   nach 800px Scrollweg einfaehrt (qodefStickyHeaderScrollAmount: 800).     */

.kopf {
  position: relative;
  height: 110px;
  background: var(--grund);
  z-index: 90;
}

.kopf__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 27px;
}

.kopf__logo { display: flex; align-items: center; height: 100%; }
.kopf__logo img { display: block; width: auto; max-height: 100%; }

/* Klebendes Band */
.kopf-fix {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 90px;
  padding: 0 40px;
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
  transform: translateY(-100%);
  transition: transform .5s ease;
  z-index: 100;
}
.kopf-fix--sichtbar { transform: translateY(0); }

.kopf-fix__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 1100px;
  max-width: 100%;
  margin-inline: auto;
}
@media (min-width: 1440px) { .kopf-fix__inner { width: 1300px; } }
@media (max-width: 1200px) { .kopf-fix__inner { width: 960px; } }
.kopf-fix .kopf__logo img { max-height: 60px; }

/* Navigation: 13px, #444, Versalien, Sperrung .26em, padding 0 23px.
   Trennpunkt 6px Kreis #ebd8d1 bei right: -25px, beim letzten aus.        */
.kopf__nav { height: 100%; }
.kopf__nav ul {
  display: flex;
  align-items: stretch;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.kopf__nav li { position: relative; padding: 0 23px; }
.kopf__nav li:last-child { padding-right: 0; }

.kopf__nav a {
  display: flex;
  align-items: center;
  height: 100%;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: var(--nav);
}
.kopf__nav a span { position: relative; display: inline-block; }
.kopf__nav li:not(:last-child) a span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -25px;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 100%;
  background-color: var(--zier);
}
.kopf__nav a:hover,
.kopf__nav a[aria-current="page"] { color: var(--akzent); text-decoration: none; }

.menu-knopf { display: none; }

/* Kleine Schirme: mobile Kopfhoehe 70px (mobileHeaderHeight der Vorlage),
   kein zweites Band. Das Menue wird ueber die Klasse .menue-offen an <html>
   geschaltet, die kopf.js setzt.                                          */
@media (max-width: 1024px) {
  .kopf { height: 70px; }
  .kopf__inner { padding: 0 20px; }
  .kopf-fix { display: none; }

  .menu-knopf {
    display: block;
    width: 32px;
    cursor: pointer;
    padding: 6px 0;
  }
  .menu-knopf span {
    display: block;
    height: 2px;
    margin: 6px 0;
    background: var(--ueberschrift);
  }

  .kopf__nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: auto;
    background: var(--grund);
    border-top: 1px solid var(--linie);
    display: none;
  }
  .menue-offen .kopf__nav { display: block; }

  .kopf__nav ul { flex-direction: column; height: auto; }
  .kopf__nav li { padding: 0 20px; border-bottom: 1px solid var(--linie); }
  .kopf__nav li:last-child { padding-right: 20px; }
  .kopf__nav a { display: block; height: auto; padding: 14px 0; }
  .kopf__nav li:not(:last-child) a span::after { display: none; }
}

/* --- Flaechen und Baender ------------------------------------------------
   Abschnitte: 100px oben, 110px unten.                                     */

.band { padding: 100px 0 110px; }
.band--flaeche { background: var(--flaeche); }
.band--voll { padding: 0; }
.band--voll .raster { width: 100%; }
.band--split { padding: 0 0 90px; }

/* Abschnitt ohne eigene Abstaende - die Luft kommt aus den Spalten. */
.band--randlos { padding: 0; }

/* Nur der Grundabschnitt wird kleiner. band--voll und band--randlos
   holen ihre Abstaende aus den Reihen und muessen bei 0 bleiben - die
   Regel steht spaeter im Stylesheet und wuerde sie sonst schlagen. */
@media (max-width: 768px) {
  .band:not(.band--voll):not(.band--randlos) { padding: 60px 0; }
}

/* --- Sektionstitel -------------------------------------------------------
   Wasserzeichen (Cormorant 125px, absolut, top 0; zentrierte Varianten
   top -31px; auf beigem Grund #ece7dd), Tagline (Open Sans 12px, Versalien,
   Sperrung .3em), Titel, Text (margin 18px 0 0, Zeilenhoehe 28px).
   Alle Sektionstitel sind in der Vorlage h1 (50px), auch wo im Markup aus
   semantischen Gruenden h2 steht.                                          */

.sektion-titel { position: relative; }
.sektion-titel--mittig { text-align: center; }

.sektion-titel__wasserzeichen {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  font-family: var(--serif);
  font-size: 125px;
  font-weight: 600;
  line-height: 1;
  color: var(--flaeche);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.sektion-titel--mittig .sektion-titel__wasserzeichen { top: -31px; }
.sektion-titel__wasserzeichen--dunkel { color: var(--wasserzeichen); }

.sektion-titel__tagline {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 28px;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--hover);
}

/* Die Theme-Regel gibt der Tagline #d58f76, der Customizer ersetzt das
   durch den Akzentton. Das Markup der Vorlage setzt darueber hinaus bei
   den meisten Taglines style="color: #124241" - deshalb ist #124241 hier
   der Grundwert. Vier Taglines tragen keinen Inline-Stil und bleiben im
   Akzentton, darunter der Contact-Block der Erstgespraechsseite.
   Pixelmessung dort: (143,74,117), antialiastes #964c76.                  */
.sektion-titel__tagline--akzent { color: var(--akzent); }

.sektion-titel__titel {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ueberschrift);
  font-size: 50px;
  line-height: 1.040;
}

/* Die Vorlage setzt die Textfarbe je Block einzeln als Inline-Stil:
   mal #2d343e, mal geerbtes Grau. Deshalb hier ein Modifier. */
.sektion-titel__text {
  position: relative;
  z-index: 1;
  margin: 18px 0 0;
  line-height: 28px;
}
.sektion-titel__text--dunkel { color: var(--text-dunkel); }

@media (max-width: 1024px) {
  .sektion-titel__wasserzeichen { font-size: 90px; }
  .sektion-titel__titel { font-size: 40px; }
}
@media (max-width: 768px) { .sektion-titel__titel { font-size: 34px; } }
@media (max-width: 480px) {
  .sektion-titel__wasserzeichen { display: none; }
  .sektion-titel__titel { font-size: 30px; }
}

/* --- Hero ----------------------------------------------------------------
   Nachbau des Slider-Revolution-Slides. Bezugsraster 1300x615.
   Ebenen an der Mitte der Buehne ausgerichtet, Werte aus data-xy (xo/yo)
   und data-dim (w/h) der Vorlage.                                          */

.hero { padding: 0 0 40px; }

.hero__buehne {
  position: relative;
  aspect-ratio: 1300 / 615;
  background: var(--flaeche);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero__bilder { position: absolute; inset: 0; }

.hero__bild {
  position: absolute;
  left: 50%;
  top: 50%;
  height: auto;
  max-width: none;
}
/* beige-neu: 2000x2000, xo 88, yo -167, z-index 9 */
.hero__bild--beige {
  width: 153.85%;
  transform: translate(calc(-50% + 6.77%), calc(-50% - 27.15%));
  z-index: 1;
}
/* Beere-rund: 1005x1005, xo 654, yo -313, z-index 10 */
.hero__bild--beere {
  width: 77.31%;
  transform: translate(calc(-50% + 50.31%), calc(-50% - 50.89%));
  z-index: 2;
}
/* Punkte-Lila: 926x926, xo 452, yo 13, z-index 11 */
.hero__bild--punkte {
  width: 71.23%;
  transform: translate(calc(-50% + 34.77%), calc(-50% + 2.11%));
  z-index: 3;
}

.hero__text {
  position: relative;
  z-index: 5;
  width: 64%;              /* Textbreite 832px von 1300px */
  padding-left: 6.5%;
}

.hero__tagline {
  margin: 0;
  font-family: var(--sans);
  font-size: 10px;
  line-height: 28px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--hover);
}

.hero__titel {
  margin: 0;
  font-family: var(--serif);
  font-size: 85px;
  line-height: 85px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ueberschrift);
}

.hero__absatz {
  max-width: 632px;
  font-size: 18px;
  line-height: 35px;
  color: var(--text-dunkel);
}

/* Staffelung wie in data-text/data-dim: Titel 85/72/60/50px, Text 18/18/18/13px */
@media (max-width: 1200px) {
  .hero__titel  { font-size: 72px; line-height: 80px; }
  .hero__absatz { max-width: 632px; }
}
@media (max-width: 1024px) {
  .hero__titel  { font-size: 60px; line-height: 80px; }
  .hero__absatz { max-width: 494px; }
  .hero__text   { width: 70%; }
}
@media (max-width: 768px) {
  .hero { padding: 70px 0; }
  .hero__buehne { aspect-ratio: auto; display: block; padding: 60px 0 320px; }
  .hero__text   { width: 100%; padding: 0 24px; text-align: center; }
  .hero__titel  { font-size: 50px; line-height: 50px; letter-spacing: -2px; }
  .hero__absatz { font-size: 13px; line-height: 26px; max-width: 245px; margin-inline: auto; }
  .hero__bild--beige  { width: 72%;  transform: translate(-50%, 40%); }
  .hero__bild--beere  { width: 46%;  transform: translate(-20%, 20%); }
  .hero__bild--punkte { width: 43%;  transform: translate(-80%, 60%); }
}

/* --- Bild-/Textspalten ---------------------------------------------------
   Entspricht vc_col-lg-6 der Vorlage. Textspalte auf #f6f3ee,
   Innenabstand 19.6% 23% 19.5% 22.5%.                                      */

.bildspalte { position: relative; min-height: 520px; overflow: hidden; }
.bildspalte picture,
.bildspalte img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ueber-bild img { margin-inline: auto; }

.textspalte {
  background: var(--flaeche);
  padding: 19.6% 23% 19.5% 22.5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 768px) {
  .bildspalte { min-height: 300px; }
  .textspalte { padding: 40px 24px; }
}

/* --- Knoepfe -------------------------------------------------------------
   Gemessen .qodef-button.qodef-html--link:
     Open Sans 13px, line-height 2em, Sperrung .26em, Versalien,
     padding 14px 34px 14px 37px, border-radius 5px
   .qodef-size--small (in der Vorlage genau einmal, am Hero-Button):
     12px, padding 13px 30px 13px 33px
   .qodef-size--standard hat keine eigene Regel, das sind die Basiswerte.
   Hover aus data-hover-* im Markup: Grund #124241, Text weiss.             */

.knopf {
  display: inline-block;
  vertical-align: middle;
  margin: 6px 0 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 2em;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 34px 14px 37px;
  border: 1px solid var(--akzent);
  border-radius: 5px;
  background-color: var(--akzent);
  color: var(--grund);
  cursor: pointer;
  transition: background-color .25s ease-out, border-color .25s ease-out, color .25s ease-out;
}
.knopf:hover, .knopf:focus-visible {
  background-color: var(--hover);
  border-color: var(--hover);
  color: var(--grund);
  text-decoration: none;
}

/* Kleine Variante - in der Vorlage nur am Hero-Button der Startseite. */
.knopf--klein {
  font-size: 12px;
  padding: 13px 30px 13px 33px;
}

/* Umrandete Variante */
.knopf--rand {
  background-color: transparent;
  color: var(--akzent);
}
.knopf--rand:hover, .knopf--rand:focus-visible {
  background-color: var(--akzent);
  border-color: var(--akzent);
  color: var(--grund);
}

/* Textlink-Variante (.qodef-layout--textual).
   Wichtig: die Regel .qodef-button.qodef-layout--textual { color:#964c76 }
   hat zwei Klassen und schlaegt a:hover { color:#124241 } aus dem
   Customizer. Der Textlink wechselt im Hover also NICHT die Farbe -
   in der Vorlage bewegt sich nur der Unterstrich.
   Der Strich sitzt bottom 3px, 1px hoch, currentColor - deshalb ein
   Pseudo-Element statt border-bottom: bei line-height 2em saesse ein
   Rahmen am Kastenboden und damit deutlich zu tief.                        */
.knopf--text {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 2em;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--akzent);
}
.knopf--text::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
}
.knopf--text:hover, .knopf--text:focus-visible {
  color: var(--akzent);
  text-decoration: none;
}

/* --- Leistungskarten (image-with-text, Layout text-below) ---------------- */

.karte { text-align: center; }
.karte img {
  display: block;
  margin: 0 auto;
  width: 150px;
  height: 150px;
  box-shadow: 2px 2px 21px 0 rgba(0, 0, 0, .07);
  transform: translateY(0);
  transition: all .35s ease-out;
}
.karte img:hover {
  transform: translateY(-3px);
  box-shadow: 10px 2px 21px 0 rgba(0, 0, 0, .19);
}
.karte h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.067;
  margin: 31px 0 0;
}
.karte p { margin: 15px 0 0; }

.karte__link {
  display: inline-block;
  font-size: 12px;
  line-height: 28px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--akzent);
  border-bottom: 1px solid currentColor;
}
.karte__link:hover { color: var(--hover); text-decoration: none; }

.leistungskarten { margin-top: 50px; }

/* --- Preistafel ----------------------------------------------------------
   Gemessen .qodef-pricing-table:
     .qodef-m-inner        padding 154px 60px 69px auf #f6f3ee
                           (<=480px: 154px 25px 69px)
     .qodef-m-image        absolut, top 0, padding 0 55px, translateY(-50%)
     .qodef-m-image img    margin 0 auto, border-radius 100%
     .qodef-m-title        margin 0 0 8px
     .qodef-m-price        margin-top -3px
     .qodef-m-price-period margin 23px 0 0, 12px, Sperrung .26em, #964c76
     .qodef-m-content      margin 7px 0 0, Zeilenhoehe 28px
     .qodef-m-button       margin 17px 0 0                                  */

/* Die Preistafel-Reihe. vc_custom_1596494296993 setzt das Polster der
   aeusseren Spalte auf 0, die innere vc_inner-Reihe bringt noch einmal
   margin 0 -15px mit - die Reihe ist damit 1360 breit, also Raster + 60.
   Darin je 50% (bzw. 33.3% bei drei Tafeln) ohne Rinne; die 15px
   Einrueckung traegt jede Tafel selbst.
   Gegenprobe bei Raster 1300: Reihe 272.5 bis 1632.5, Spalten a 680,
   Tafeln also 287.5-937.5 und 967.5-1617.5.
   GEMESSEN im Screenshot: 288-937 und 968-1617.
   Der obere Abstand kommt aus dem 187px-Polster von .preise-kopf. Die
   125px Zeilenabstand greifen erst beim Umbruch und tragen dann den
   Bilduebersteand der naechsten Zeile.                                    */
.preistafeln { display: grid; gap: 125px 0; margin: 0 -30px; }
.preistafeln--2 { grid-template-columns: repeat(2, 1fr); }
.preistafeln--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1024px) { .preistafeln--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px)  { .preistafeln--2, .preistafeln--3 { grid-template-columns: 1fr; } }

.preistafel { position: relative; padding-inline: 15px; text-align: center; }

.preistafel__inner {
  padding: 154px 60px 69px;
  background-color: var(--flaeche);
}
@media (max-width: 480px) { .preistafel__inner { padding: 154px 25px 69px; } }

.preistafel__bild {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  padding: 0 55px;
  transform: translateY(-50%);
}
.preistafel__bild img {
  display: block;
  margin: 0 auto;
  border-radius: 100%;
}

/* In der Vorlage ein <p> mit der Klasse qodef-h4, kein h4. Groesse und
   Zeilenhoehe kommen daher von .qodef-h4 (22px / 1.136), die Farbe von
   .qodef-pricing-table .qodef-m-title p { color: #200960 } - die
   h1-h6-Regel des wp-custom-css greift bei einem <p> nicht.            */
.preistafel h3 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.136;
  color: var(--titel-theme);
}

.preistafel__preis {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: -3px 0 0;
  font-family: var(--serif);
  font-size: 50px;
  line-height: 1;
  font-weight: 600;
  /* Klasse qodef-h1, nicht das Element h1 - also Theme-Grundton. */
  color: var(--titel-theme);
}
.preistafel__waehrung { font-size: 30px; vertical-align: super; margin-right: 4px; }

.preistafel__zeitraum {
  margin: 23px 0 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .26em;
  /* .qodef-m-price-period traegt #d58f76. Das wp-custom-css setzt nur
     h1-h6 und a um, diese Regel bleibt also auf dem Theme-Grundton -
     eine der wenigen Stellen, an denen #d58f76 sichtbar bleibt. */
  color: var(--theme-grundton);
}

.preistafel__text { margin: 7px 0 0; line-height: 28px; }

.preistafel .knopf,
.preistafel .knopf--text { margin: 17px 0 0; }

/* --- Akkordeon -----------------------------------------------------------
   Gemessen: Titelzeile margin 12px 0 0, padding 14px 0 3px,
   Trennlinie oben 1px #ebd8d1, beim ersten Eintrag keine.
   Zeichen 19x19px, Open Sans 36px, Schriftstaerke 300.

   Hinweis: Open Sans 300 ist derzeit nicht gehostet, nur 400. Solange das
   so bleibt, stellt der Browser das Zeichen zu fett dar.                   */

.akkordeon { position: relative; width: 100%; }
.akkordeon details { border: 0; }

.akkordeon summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 0;
  padding: 14px 0 3px;
  border-top: 1px solid var(--zier);
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.136;
  font-weight: 600;
  color: var(--ueberschrift);
  cursor: pointer;
  list-style: none;
}
.akkordeon details:first-child summary { margin-top: 0; border-top: none; }
.akkordeon summary::-webkit-details-marker { display: none; }

.akkordeon summary::after {
  content: "+";
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  font-family: var(--sans);
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
  text-align: center;
  color: var(--akzent);
}
.akkordeon details[open] summary::after { content: "\2212"; }

.akkordeon details > *:not(summary) { margin: 0 0 20px; line-height: 28px; }
.akkordeon details > *:not(summary):first-of-type { margin-top: 14px; }

/* --- Kundenstimmen --------------------------------------------------------
   In der Vorlage ein Swiper-Karussell. Belegt aus data-options:
     slidesPerView 1, spaceBetween 15, loop true, autoplay true, speed 18000
   Belegt aus mindcare-core.min.css (.qodef-testimonials-list):
     .swiper-wrapper   align-items: center
     .swiper-slide     opacity 0, aktive Folie 1, transition .25s ease-out
     .qodef-e-content  padding 0 4% 40px
     .qodef-e-mark     display block, margin 0 0 27px
     .qodef-e-text     Cormorant 600, 30px, line-height 34px, #200960
     .qodef-e-author   margin 23px 0 0, Open Sans 12px, .26em, Versalien, #d58f76
     Punkte            bottom 0, inaktiv #d58f76, aktiv #964c76 (wp-custom-css)
   Gegenprobe der 4%: Folie 925.6 breit -> Text 851.6 bei 526.7 bis 1378.6.
   GEMESSEN im Screenshot: 523 bis 1381. Die daneben stehende 17%-Fassung
   greift also nicht.
   Der Nachbau kommt ohne Bibliothek aus: eine Spur gleich breiter Folien,
   verschoben ueber translateX. Ohne JavaScript steht die erste Stimme,
   Pfeile und Punkte bleiben ausgeblendet.                                 */

.stimmen { position: relative; }
.stimmen__fenster { overflow: hidden; }

.stimmen__spur {
  display: flex;
  align-items: center;
  gap: 15px;                /* spaceBetween */
  will-change: transform;
}

.stimme {
  flex: 0 0 100%;
  margin: 0;
  padding: 0 4% 40px;
  text-align: center;
}
/* Die Ein- und Ausblendung greift erst, wenn das Skript laeuft. */
.stimmen--aktiv .stimme { opacity: 0; transition: opacity .25s ease-out; }
.stimmen--aktiv .stimme--sichtbar { opacity: 1; }

/* Das Zitatzeichen traegt im Markup der Vorlage fill="#231E5D". */
.stimme__zeichen { display: block; margin: 0 auto 27px; color: #231e5d; }

.stimme blockquote { margin: 0; }
.stimme blockquote p {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 30px;
  line-height: 34px;
  color: var(--titel-theme);
}
.stimme figcaption {
  margin: 23px 0 0;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--theme-grundton);
}

/* Pfeile: 26x48, Linienstaerke 2, Farbe #D48F76. */
.stimmen__pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--theme-grundton);
  cursor: pointer;
}
.stimmen__pfeil svg { display: block; width: 26px; height: 48px; }
.stimmen__pfeil--zurueck { left: 0; }
.stimmen__pfeil--vor { right: 0; }

/* Punkte sitzen am unteren Rand der Spur (bottom: 0). Die 40px
   Innenabstand der Folie halten den Text davon frei. */
.stimmen__punkte {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: none;
  justify-content: center;
  gap: 14px;
}
.stimmen__punkt {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--theme-grundton);
  cursor: pointer;
}
.stimmen__punkt[aria-current="true"] { background: var(--akzent); }

.stimmen--aktiv .stimmen__pfeil { display: block; }
.stimmen--aktiv .stimmen__punkte { display: flex; }

@media (prefers-reduced-motion: reduce) {
  .stimmen__spur { transition: none !important; }
}

@media (max-width: 768px) {
  .stimme { padding: 0 0 40px; }
  .stimme blockquote p { font-size: 24px; line-height: 30px; }
  .stimmen--aktiv .stimmen__pfeil { display: none; }
}

/* --- Formular ------------------------------------------------------------- */

/* Buchungsbereich. Die Vorlage stellt ihn in eine eigene innere Reihe mit
   padding: 0 25.5% (vc_custom_1577276106966). Bezugsgroesse ist dort die
   Reihe, also Raster + 30px: bei 1300 sind das 1330 - 2x339.15 = 651.7px,
   Kanten 626.7 und 1278.4.
   Hier loest das Prozent aber gegen .raster auf (1300), nicht gegen die
   1330 breite Reihe - deshalb die Umrechnung: 25.5% von (W+30) ist
   25.5% von W plus 7.65px. Ohne den Zuschlag waeren es 667px.
   Unterhalb 1024px ist der Wert der Vorlage nicht belegbar - dort waere
   das Calendly-Fenster mit min-width 320px ohnehin uebergelaufen.         */
.buchung { margin: 0 -15px; padding-inline: calc(25.5% + 7.65px); }

@media (max-width: 1024px) { .buchung { margin: 0; padding-inline: 0; } }

.formular__datenschutz { font-size: 14px; }

.feld { margin-bottom: 22px; }
.feld label { display: block; margin-bottom: 6px; color: var(--ueberschrift); font-size: 15px; }
.feld input, .feld textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ueberschrift);
  padding: 12px 14px;
  border: 1px solid var(--akzent);
  background: transparent;
}
.feld textarea { min-height: 160px; resize: vertical; }
.feld--falle { position: absolute; left: -9999px; }
.feld__fehler { color: #a03434; font-size: 14px; margin-top: 4px; }

.hinweis { padding: 16px 20px; margin-bottom: 24px; border-left: 4px solid var(--akzent); }
.hinweis--ok     { background: #f0f6f0; border-left-color: #2f7a3f; }
.hinweis--fehler { background: #fbf0f0; border-left-color: #a03434; }

/* --- Fussbereich ---------------------------------------------------------
   Gemessen: oben padding 62px 0 40px auf #964c76,
   unten 16px 0 auf #124241 mit font-weight 600.                            */

.fuss { margin-top: 0; }

.fuss__oben { background: var(--akzent); color: var(--grund); padding: 62px 0 62px; }
.fuss__oben a { color: var(--grund); }
.fuss__oben a:hover { color: var(--flaeche); }
/* Spaltentitel: h3 (30px Cormorant), weiss. */
.fuss__oben h3 { color: var(--grund); font-size: 30px; margin: 0 0 34px; }

/* Der Knopf im Fussbereich ist die einzige Stelle der Seite, an der der
   Theme-Grundton stehen bleibt: er traegt keinen Customizer-Inline-Stil. */
.knopf--fuss {
  background-color: #d58f76;
  border-color: #d58f76;
  color: var(--grund);
}
.knopf--fuss:hover, .knopf--fuss:focus-visible {
  background-color: #bb725e;
  border-color: #bb725e;
  color: var(--grund);
}

/* Vier gleiche Spalten (qodef-col-num--4), ab 1024px zwei, ab 680px eine. */
.fuss__raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.fuss__spalte { min-width: 0; }
.fuss__spalte--marke img { margin: 0; }

/* Claim und Kontakttext: Open Sans 14px mit Sperrung, nicht Serif. */
.fuss__claim {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--grund);
  margin-top: 20px;
}
.fuss__text {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--grund);
}

/* Die Vorlage setzt die Verweise als Absaetze mit Leerzeile dazwischen.
   Hier als Liste mit demselben Zwischenraum nachgebildet. */
.fuss__liste { list-style: none; margin: 0; padding: 0; }
.fuss__liste li { margin-bottom: 46px; }
.fuss__liste li:last-child { margin-bottom: 0; }

@media (max-width: 1024px) { .fuss__raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px)  { .fuss__raster { grid-template-columns: 1fr; } }

/* --- Nach oben -----------------------------------------------------------
   Gemessen #qodef-back-to-top: fest 40x40 bei right/bottom 25px,
   z-index 10000, Grund und Rahmen #964c76 aus dem Customizer,
   Hover #bb725e, Zeichen 20px weiss und beim Ueberfahren 2px hoeher.
   Ein- und Ausblenden ueber Deckkraft, aus .qodef--on / .qodef--off.    */

.nach-oben {
  position: fixed;
  right: 25px;
  bottom: 25px;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grund);
  background-color: var(--akzent);
  border: 1px solid var(--akzent);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  z-index: 10000;
  transition: opacity .15s ease, visibility 0s .15s,
              background-color .3s ease-out, border-color .3s ease-out;
}
.nach-oben--sichtbar {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease,
              background-color .3s ease-out, border-color .3s ease-out;
}
.nach-oben:hover, .nach-oben:focus-visible {
  background-color: #bb725e;
  border-color: #bb725e;
}
.nach-oben svg {
  display: block;
  width: 20px;
  height: 20px;
  transform: translateY(0);
  transition: transform .3s ease-out;
}
.nach-oben:hover svg { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .nach-oben, .nach-oben svg { transition: none; }
}

/* --- Bausteine der Inhaltsseiten ----------------------------------------- */

.mittig { text-align: center; }

/* Gegenstueck zu vc_empty_space der Vorlage. Die Vorlage traegt die Hoehe
   als Inline-Stil; wegen der CSP werden hier zwei feste Stufen benutzt:
   32px im Erstgespraechs-Block, 50px vor dem Buchungsbereich.             */
.leerraum { height: 32px; }
.leerraum--klein { height: 8px; }
.leerraum--gross { height: 50px; }

/* Der Knopf sitzt in der Vorlage ohne Absatz in der Spalte. Im Nachbau
   braucht er eine Zeile, damit er in der Flex-Spalte nicht auf volle
   Breite gezogen wird - diese Zeile darf aber keinen eigenen Abstand
   mitbringen, der kommt aus .leerraum.                                    */
.knopf-zeile { margin: 0; }

/* .knopf traegt projektweit margin: 6px 0 0 - ein noch nicht freigegebener
   Rest, die Vorlage hat dort margin: 0. Damit die gemessenen 32px aus
   vc_empty_space hier exakt stehen, wird der Rest in dieser Zeile
   aufgehoben. Faellt weg, sobald der 6px-Punkt entschieden ist.           */
.knopf-zeile .knopf { margin-top: 0; }

/* Seitliche Einrueckung der zentrierten Bloecke. Die Vorlage setzt sie an
   der Spalte, sie gilt dort also fuer Tagline, Titel und Text zugleich.
   Nur ein Teil der Bloecke hat sie - der Rest laeuft ueber die volle
   Rasterbreite. Eine allgemeine Breitenbegrenzung gibt es nicht. */
.sektion-titel--schmal,
.schmal { padding-inline: 22%; }

@media (max-width: 768px) {
  .sektion-titel--schmal,
  .schmal { padding-inline: 0; }
}

/* Karolin-Block: Innenabstand der Textspalte, gemessen an der vc_column. */
.ueber-text { min-width: 0; padding: 19.6% 21% 19.5% 20.5%; }
.ueber-bild { display: flex; align-items: center; justify-content: center; }

@media (max-width: 768px) { .ueber-text { padding: 40px 24px; } }

/* E-Book-Hinweis: im Original eine grosse Serifen-Ueberschrift,
   kein schmales Band. */
.ebook-band {
  /* Die Reihe der Vorlage ist durch die negativen Aussenabstaende von
     vc_row-fluid 30px breiter als das Raster: bei 1300px Raster also
     1330px. Die 22% Innenabstand beziehen sich darauf und lassen 745px
     fuer den Text. Ohne die -15px waeren es nur 728px - dann bricht die
     Zeile um. Gegengeprueft am Hero-Kasten: 4% von 1330 ergibt 1224px,
     genau die gemessene Breite. */
  margin: 0 -15px;
  padding: 100px 22% 26px;
  font-family: var(--serif);
  font-size: 50px;
  font-weight: 600;
  line-height: 1.04;
  text-align: center;
}
.ebook-band a { color: var(--ueberschrift); }
.ebook-band a:hover { color: var(--akzent); }

@media (max-width: 1024px) { .ebook-band { font-size: 40px; } }
@media (max-width: 480px)  { .ebook-band { font-size: 30px; margin: 0; padding: 60px 20px 26px; } }

/* Die drei Wegkarten sind derselbe Baustein wie die Leistungskarten,
   ihr Titel ist in der Vorlage aber h1-gross (50px), nicht h3. */
.weg { margin: 50px 0 40px; }
.weg__schritt { text-align: center; }
.weg__schritt img {
  margin: 0 auto;
  box-shadow: 2px 2px 21px 0 rgba(0, 0, 0, .07);
  transform: translateY(0);
  transition: all .35s ease-out;
}
.weg__schritt img:hover {
  transform: translateY(-3px);
  box-shadow: 10px 2px 21px 0 rgba(0, 0, 0, .19);
}
.weg__schritt h3 {
  font-size: 50px;
  line-height: 1.040;
  margin: 31px 0 0;
}
.weg__schritt p { margin: 15px 0 0; }

@media (max-width: 1024px) { .weg__schritt h3 { font-size: 40px; } }
@media (max-width: 768px)  { .weg__schritt h3 { font-size: 34px; } }

/* --- Leistungs-Detailseiten -----------------------------------------------
   GEMESSEN am Screenshot-Paar (Fenster 1905, Raster 1300):
     Trennlinie ueber der ersten Akkordeonfrage   998 bis 1367, Breite 370
     beige Preistafeln                            288-937 und 968-1617
   Beide Werte gehen nur auf, wenn ALLE Reihen dieser Seite 1330 breit sind
   (Raster + 30), nicht fensterbreit. Die frueher hier angenommene
   Vollbreite war falsch - .qodef-content-grid ist auf diesen Seiten
   redundant, die Begrenzung kommt aus js_composer.min.css, die im Abzug
   fehlt. Belegt ist sie durch die Messung.

   Rechenweg #details: Reihe 1330 bei 287.5 bis 1617.5; Spaltenpolster 13%
   von 1330 = 172.9 -> Inhalt 984.2 bei 460.4 bis 1444.6; innere Reihe
   margin 0 -15px -> 1014.2 bei 445.4 bis 1459.6; zwei 50%-Spalten
   a 507.1; rechte Spalte Polster 9% links und 18% rechts
   -> Akkordeon 998.1 bis 1368.3. Deckt sich mit der Messung.           */

/* Reihe: padding 0 13% (vc_custom_1577346661261). Das Prozent loest gegen
   .raster (1300) auf, gemeint sind aber 13% der Reihe (1330) - daher der
   Zuschlag von 0.3px je Prozentpunkt. */
.detail-reihe { margin: 0 -15px; padding-inline: calc(13% + 3.9px); }

/* Die innere Reihe. Kein Rinnen-Prozent: die beiden Spalten sind je 50%
   und tragen ihre Abstaende selbst (die vc_custom-Regeln ersetzen das
   uebliche 15px-Spaltenpolster vollstaendig). */
.detail-spalten { margin: 0 -15px; }

/* Linke Spalte: 102px 15% 110px 18% (vc_custom_1596217964254) */
.detail-text { padding: 102px 15% 110px 18%; }

/* Tagline dort mit 3px Abstand nach unten, Text mit 21px nach oben statt
   der sonstigen 18px - beides als Inline-Stil im Markup belegt. */
.detail-text .sektion-titel__tagline { margin-bottom: 3px; }
.detail-text .sektion-titel__text { margin-top: 21px; }

/* Zwischen Text und Knopf steht ein vc_empty_space von 37px. */
.detail-text .knopf-zeile { margin-top: 37px; }

/* Rechte Spalte mit dem Akkordeon: 87px 18% 0 9% (vc_custom_1577346488048) */
.detail-fragen { padding: 87px 18% 0 9%; }

/* Preisblock: 71px oben, 187px unten (vc_custom_1575374795823), ohne
   Hintergrund. Die 187px tragen den Bilduebersteand der Preistafeln. */
.preise-kopf { padding: 71px 0 187px; }

/* Feedback-Reihe: 156px 15.2% 107px (vc_custom_1578671622656).
   15.2% von 1330 = 202.2 -> Inhalt 925.6 bei 489.7 bis 1417.8.
   Gegenprobe: die breiteste Textzeile der Vorlage liegt bei 523-1381.  */
.feedback-reihe { margin: 0 -15px; padding: 156px calc(15.2% + 4.56px) 107px; }

/* Das Wort "Feedback" ist kein Titel, sondern ein Zierwort mit
   line-height: 1px - es nimmt kaum Hoehe ein, der Stimmenblock rueckt
   deshalb mit -49px darueber (vc_custom_1577709402639).
   Unter 768px ausgeblendet (vc_hidden-xs).                             */
.zierwort {
  margin: 0;
  font-family: var(--serif);
  font-size: 120px;
  font-weight: 600;
  line-height: 1px;
  letter-spacing: -.015em;
  color: var(--wasserzeichen);
  text-align: center;
  user-select: none;
}

@media (max-width: 768px) {
  .detail-reihe   { margin: 0; padding-inline: 0; }
  .detail-spalten { margin: 0; }
  .detail-text    { padding: 60px 0 0; }
  .detail-fragen  { padding: 40px 0 0; }
  .preise-kopf    { padding: 60px 0 140px; }
  .preistafeln    { margin: 0; }
  .preistafel     { padding-inline: 0; }
  .feedback-reihe { margin: 0; padding: 60px 0; }
  .zierwort       { display: none; }
}


/* --- Leistungsübersicht ---------------------------------------------------
   Titelblock. Die Vorlage verteilt die Werte auf zwei Ebenen:
     Reihe   vc_custom_1596875575965: margin-top -120px, padding-bottom 26px
     Spalte  vc_custom_1574424886184: padding-top 100px, seitlich 22%
   darunter ein vc_empty_space von 65px. Die 65 und die 26 liegen direkt
   uebereinander, deshalb hier als padding-bottom 91px zusammengefasst.
   Die 22% beziehen sich in der Vorlage auf die Reihe (Raster + 30px),
   hier loesen sie gegen .raster auf - daher der Zuschlag von 6.6px,
   dieselbe Umrechnung wie bei .buchung.                                    */
.uebersicht-kopf {
  margin: -120px -15px 0;
  padding: 100px calc(22% + 6.6px) 91px;
}

/* Die fuenf Leistungsreihen benutzen denselben Baustein wie der
   Erstgespraechs-Block: Textspalte links auf #f6f3ee, Bildspalte rechts.
   Auf jede Reihe folgt in der Vorlage eine eigene Reihe mit
   vc_empty_space 65px - auch auf die letzte.                              */
.uebersicht-reihe { margin-bottom: 65px; }

@media (max-width: 768px) {
  .uebersicht-kopf { margin-inline: 0; padding-inline: 0; }
  .uebersicht-reihe { margin-bottom: 40px; }
}
