@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-display:swap;
  src:url("/media/kafritsas-fonts/open-sans-latin-wght-normal.woff2") format("woff2");}
@font-face{font-family:"Raleway";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/media/kafritsas-fonts/raleway-latin-wght-normal.woff2") format("woff2");}

/* =========================================
   FEATURE BOXEN – Grundgestaltung
   ========================================= */

/* Titel */
.sppb-addon-feature .sppb-feature-box-title {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    padding-bottom: 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid #d5d5d5;
}

/* Beschreibungstext */
.sppb-addon-feature .sppb-addon-text {
    font-size: 18px;
    line-height: 1.65;
    text-align: center;
}

/* Icons */
.sppb-addon-feature .sppb-icon {
    color: #999999;
}

/* Abstand zwischen Icon und Titel */
.sppb-addon-feature .sppb-icon {
    margin-bottom: 20px;
}

/* =========================================
   ORIGINAL FEATURE BOX – TITELLINIE
   ========================================= */

.sppb-addon-feature h3.sppb-feature-box-title::after {
    clear: both;
    display: block;
    float: left;
    content: "";
    position: relative;
    height: 2px;
    width: 70%;
    margin: 10px 30% 0 0;
    border-radius: 2px;
    padding: 0;
    background: #b5b5b5;
}

/* Doppelte Linie entfernen */
.sppb-addon-feature .sppb-feature-box-title {
    border-bottom: none !important;
}

/* Startseite – rechter Einleitungstext */
#sppb-addon-1680966827186 .sppb-addon-content p {
    font-size: 18px;
    line-height: 1.65;
    font-weight: 400;
}

#sppb-sp-slider-1658950653512 .sp-dots {
    bottom: 30px !important;
}

/* Newsletter-Beschreibung */
#sppb-addon-1685533346905 .sppb-addon.sppb-addon-text-block .sppb-addon-content {
    font-family: "Open Sans", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    color: #252525;
}

/* Akkordeon – Überschrift */
.sppb-addon-accordion .sppb-panel-title {
    font-size: 16px;
    font-weight: 400;
}

/* Akkordeon – Inhalt */
.sppb-addon-accordion .sppb-panel-collapse .sppb-addon-text-block .sppb-addon-content {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
}

/* Ab hier regiert die neue Flex-Port CSS */
/* =========================================================
   FLEX → HELIX ULTIMATE: Übernahme des Erscheinungsbilds
   kafritsas.es (alt: Flex/Helix 3)  →  studio.kafritsas.es (neu)
   Stand: 2026-11-01

   Einbau: am ENDE der vorhandenen custom.css anhängen
   (templates/shaper_helixultimate/css/custom.css)
   oder in Helix Ultimate unter "Custom Code > Custom CSS" einfügen.
   Header-Stile und Feature-Boxen aus deiner bisherigen Datei
   bleiben unberührt.
   ========================================================= */


/* =========================================================
   1. GRUNDTYPOGRAFIE (gemessen auf der alten Seite)
   ---------------------------------------------------------
   WICHTIG: Der Body steht auf der neuen Seite auf 36px.
   Besser an der Quelle beheben: Helix Ultimate > Template-
   Optionen > Styles > Typografie > "Body" > Schriftgröße 14.
   Diese Regeln gelten als Absicherung und schaden danach nicht.
   ========================================================= */

body.helix-ultimate {
  font-size: 14px;
  line-height: 25px;
  color: #222;
}

/* Alte Seite: alle Überschriften mit Zeilenhöhe 1.3 */
body.helix-ultimate :is(h1, h2, h3, h4, h5, h6) {
  line-height: 1.3;
}

/* Alte Seite: h1 dünn (200), h3 normal (400);
   neu standardmäßig 300 bzw. 500 */
body.helix-ultimate h1 { font-weight: 200; }
body.helix-ultimate h3 { font-weight: 400; }


/* =========================================================
   2. FLEX-HILFSKLASSEN
   ---------------------------------------------------------
   Diese Klassen hängen in den Pagebuilder-Addons (z. B.
   "major_color-lighten-10" am Hero-Titel) und haben im neuen
   Template kein CSS. Werte stammen aus preset8.css / template.css.
   Das Flex-Grau 153,153,153 (#999999) steckt in --flex-major.
   ========================================================= */

:root {
  --flex-major: 153, 153, 153;
}

/* Hintergründe in Flex-Grau */
.major_color_bckg-100 { background-color: #999999; }
.major_color_bckg-90  { background-color: rgba(var(--flex-major), 0.9); }
.major_color_bckg-80  { background-color: rgba(var(--flex-major), 0.8); }
.major_color_bckg-70  { background-color: rgba(var(--flex-major), 0.7); }
.major_color_bckg-60  { background-color: rgba(var(--flex-major), 0.6); }
.major_color_bckg-50  { background-color: rgba(var(--flex-major), 0.5); }
.major_color_bckg-40  { background-color: rgba(var(--flex-major), 0.4); }
.major_color_bckg-30  { background-color: rgba(var(--flex-major), 0.3); }
.major_color_bckg-20  { background-color: rgba(var(--flex-major), 0.2); }
.major_color_bckg-10  { background-color: rgba(var(--flex-major), 0.1); }

/* Schwarze Hintergründe */
.black_bckg-90 { background-color: rgba(0, 0, 0, 0.9); }
.black_bckg-80 { background-color: rgba(0, 0, 0, 0.8); }
.black_bckg-70 { background-color: rgba(0, 0, 0, 0.7); }
.black_bckg-60 { background-color: rgba(0, 0, 0, 0.6); }
.black_bckg-50 { background-color: rgba(0, 0, 0, 0.5); }
.black_bckg-40 { background-color: rgba(0, 0, 0, 0.4); }
.black_bckg-30 { background-color: rgba(0, 0, 0, 0.3); }
.black_bckg-20 { background-color: rgba(0, 0, 0, 0.2); }
.black_bckg-10 { background-color: rgba(0, 0, 0, 0.1); }

/* Weiße Hintergründe */
.white_bckg-90 { background-color: rgba(255, 255, 255, 0.9); }
.white_bckg-80 { background-color: rgba(255, 255, 255, 0.8); }
.white_bckg-70 { background-color: rgba(255, 255, 255, 0.7); }
.white_bckg-60 { background-color: rgba(255, 255, 255, 0.6); }
.white_bckg-50 { background-color: rgba(255, 255, 255, 0.5); }
.white_bckg-40 { background-color: rgba(255, 255, 255, 0.4); }
.white_bckg-30 { background-color: rgba(255, 255, 255, 0.3); }
.white_bckg-20 { background-color: rgba(255, 255, 255, 0.2); }
.white_bckg-10 { background-color: rgba(255, 255, 255, 0.1); }

/* Innenschatten */
.black-inset-shadow-50 { box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.5); }
.black-inset-shadow-40 { box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.4); }
.black-inset-shadow-30 { box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.3); }
.black-inset-shadow-20 { box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.2); }
.black-inset-shadow-10 { box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.1); }
.white-inset-shadow-50 { box-shadow: inset 0 0 150px rgba(255, 255, 255, 0.5); }
.white-inset-shadow-40 { box-shadow: inset 0 0 150px rgba(255, 255, 255, 0.4); }
.white-inset-shadow-30 { box-shadow: inset 0 0 150px rgba(255, 255, 255, 0.3); }
.white-inset-shadow-20 { box-shadow: inset 0 0 150px rgba(255, 255, 255, 0.2); }
.white-inset-shadow-10 { box-shadow: inset 0 0 150px rgba(255, 255, 255, 0.1); }

/* Textfarben */
.major_color            { color: #999999 !important; }
.white_color            { color: #fff; }
.text_color             { color: #000; }
.major_color-lighten-10 { color: #b3b3b3; }
.major_color-lighten-20 { color: #cccccc; }
.major_color-lighten-30 { color: #e6e6e6; }

/* Weiche graue Schatten */
.gray-shadow-50 { box-shadow: 0 0 50px rgba(85, 85, 85, 0.5); }
.gray-shadow-40 { box-shadow: 0 0 40px rgba(128, 128, 128, 0.4); }
.gray-shadow-30 { box-shadow: 0 0 30px rgba(128, 128, 128, 0.3); }
.gray-shadow-20 { box-shadow: 0 0 20px rgba(128, 128, 128, 0.3); }
.gray-shadow-10 { box-shadow: 0 0 10px rgba(128, 128, 128, 0.3); }

/* Sonstige Flex-Helfer */
.transparent   { background: transparent; }
.border-radius { border-radius: 5px; }
.shadow        { box-shadow: -25px 0 30px -15px rgba(0, 0, 0, 0.15), 25px 0 30px -15px rgba(0, 0, 0, 0.15); }
.text-shadow   { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); }
.padding30     { padding: 0 30px; }

.centered {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.centered > div,
.centered > a {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   3. STARTSEITE: EINZELABWEICHUNGEN
   ---------------------------------------------------------
   Die Addon-IDs sind auf beiden Seiten identisch.
   Gemessen: Abstand unter der Überschrift alt 20px, neu 8px.
   ========================================================= */

#sppb-addon-1680970273032 :is(h1, h2, h3, h4, h5, h6),  /* Newsletteranmeldung */
#sppb-addon-1681053948110 :is(h1, h2, h3, h4, h5, h6),  /* Der Weg zum Studio  */
#sppb-addon-1681203235531 :is(h1, h2, h3, h4, h5, h6),  /* Terminbuchungen     */
#sppb-addon-1681053948116 :is(h1, h2, h3, h4, h5, h6) { /* Kontaktformular     */
  margin-bottom: 20px;
}

/* Kontaktformular-Überschrift war auf der alten Seite zentriert */
#sppb-addon-1681053948116 :is(h1, h2, h3, h4, h5, h6) {
  text-align: center;
}


/* =========================================================
   4. FLEX-ÜBERSCHRIFT MIT UNTERSTRICH (Pagebuilder-Titel, h3)
   ---------------------------------------------------------
   Alte Seite: feine Linie unter dem Titel plus 2px-Balken
   (70 % der Breite) in #b3b3b3. Farbe #1a1a1a.
   Addon-eigene Farben/Abstände (z. B. goldene Titel im
   Studio-Bereich) haben höhere Spezifität und bleiben erhalten.
   ========================================================= */

.sppb-addon h3.sppb-addon-title {
  color: #1a1a1a;
  margin: 20px 0;
  width: auto;
  padding-right: 30px;
  box-shadow: inset 0 -1px 0 #ddd;
  display: inline-table;
  line-height: 1.3;
}

.sppb-addon h3.sppb-addon-title::after {
  clear: both;
  display: block;
  float: left;
  content: "";
  position: relative;
  height: 2px;
  width: 70%;
  margin: 10px 30% 0 0;
  border-radius: 2px;
  padding: 0;
  background: #b3b3b3;
}


/* =========================================================
   5. GROSSE BUTTONS (sppb-btn-lg), z. B. "Wie?"
   ---------------------------------------------------------
   Alt: 125 % der Basisgröße (17,5px), Zeilenhöhe 1,7
   Neu: 20px. Nur der Einzelfall, damit andere Buttons
   unberührt bleiben.
   ========================================================= */

#sppb-addon-1681203235504 a.sppb-btn-lg {
  font-size: 17.5px;
  line-height: 1.7;
}


/* =========================================================
   6. LINKFARBE (Gold)
   ---------------------------------------------------------
   Bewusst mit niedriger Spezifität, damit Menü, Buttons,
   Tabs und Footer ihre eigenen Farben behalten.
   Hover-Gold nach Geschmack anpassen.
   ========================================================= */

:root {
  --flex-link: #d9ba84;
  --flex-link-hover: #bfa06a;
}

a {
  color: var(--flex-link);
}

a:hover {
  color: var(--flex-link-hover);
}


/* =========================================================
   7. TAB-REITER (SP Pagebuilder)
   ---------------------------------------------------------
   Gemessen auf der alten Seite:
   inaktiv: Text #999999, Hintergrund #f7f7f7, Rand #eee, unten #ddd
   aktiv:   Text #333333, transparent, oben 2px #b3b3b3, unten weiß
   Schrift normal (400), Reiter zentriert.
   Neu war: Text blau (#0345bf) und fett (700).
   ========================================================= */

body.helix-ultimate .sppb-nav-tabs {
  border-bottom: 0;
  justify-content: center;
  text-align: center;
}

body.helix-ultimate .sppb-nav-tabs > li > a {
  font-size: inherit;
  font-weight: 400;
  color: #999999;
  background: #f7f7f7;
  border: 1px solid #eee;
  border-bottom: 1px solid #ddd;
  border-radius: 4px 4px 0 0;
  margin: 0 2px;
}

body.helix-ultimate .sppb-nav-tabs > li > a:hover,
body.helix-ultimate .sppb-nav-tabs > li > a:focus {
  color: #666666;
}

body.helix-ultimate .sppb-nav-tabs > li.active > a,
body.helix-ultimate .sppb-nav-tabs > li.active > a:hover,
body.helix-ultimate .sppb-nav-tabs > li.active > a:focus {
  color: #333333;
  background: transparent;
  border-color: #ddd;
  border-top: 2px solid #b3b3b3;
  border-bottom: 1px solid #fff;
}


/* =========================================================
   8. FORTSCHRITTSBALKEN (SP Pagebuilder, "Progress Bar")
   ---------------------------------------------------------
   Alt: dünne Linie (2px), Balken #999999.
   Neu war: 24px hoch, Balken blau (#3071ff).
   ========================================================= */

.sppb-progress {
  height: 2px;
  padding: 0;
  margin: 0;
  background-color: #e9ecef;
  box-shadow: none;
  border-radius: 0;
}

.sppb-progress .sppb-progress-bar,
.sppb-progress .sppb-progress-bar-default {
  height: 2px;
  background-color: #999999;
  box-shadow: none;
}

/* Linie "Der Weg zum Studio": Hintergrund etwas dunkler */
#sppb-addon-1681053948097 .sppb-progress {
  background-color: #cccccc;
}

/* Goldene Linie (3px) – wird wirksam, sobald dieses Addon importiert ist */
#sppb-addon-1680972188095 .sppb-progress,
#sppb-addon-1680972188095 .sppb-progress .sppb-progress-bar {
  height: 3px;
}
#sppb-addon-1680972188095 .sppb-progress .sppb-progress-bar {
  background-color: #d9ba84;
}


/* =========================================================
   9. FOOTER
   ---------------------------------------------------------
   Alt: Hintergrund #363839, Text #b0b0b0, zentriert,
        20px Innenabstand, Links #d6d6d6.
   Neu: Hintergrund #171717, Footer leer.
   Der Text selbst kommt aus den Template-Optionen
   (siehe Hinweis in der Antwort), hier nur das Aussehen.
   ========================================================= */

#sp-footer {
  background: #363839;
  color: #b0b0b0;
  text-align: center;
  padding: 20px 0;
  font-size: 14.4px;
  line-height: 25px;
}

#sp-footer a {
  color: #d6d6d6;
}

#sp-footer a:hover {
  color: #ffffff;
}


/* =========================================================
   10. TABS ÜBER DIE GANZE SPALTENBREITE VERTEILEN
   ---------------------------------------------------------
   Gilt für Tab-Addons mit der Flex-Klasse ".sppb-addon-tab.flex".
   Jeder Reiter bekommt gleich viel Platz, der Text bleibt zentriert.
   ========================================================= */

.sppb-addon-tab.flex .sppb-nav-tabs {
  width: 100%;
}

.sppb-addon-tab.flex .sppb-nav-tabs > li {
  flex: 1 1 0;
  min-width: 0;
}

.sppb-addon-tab.flex .sppb-nav-tabs > li > a {
  text-align: center;
}


/* =========================================================
   11. TOP BAR: ANMELDE-ICON GRÖSSER
   ---------------------------------------------------------
   Vorher 14px, jetzt 22px (wie auf der alten Seite).
   Zum Verändern nur font-size anpassen.
   ========================================================= */

#sp-top-bar a.topbar-login > i {
  font-size: 22px;
  line-height: 1;
  vertical-align: middle;
  margin-right: 6px;
}


/* =========================================================
   12. ANIMIERTE ZAHLEN (SP Pagebuilder)
   ---------------------------------------------------------
   a) Zahl "40" über den Tabs: Das neue Pagebuilder-CSS schiebt sie
      per Transform um 40px nach rechts/unten (sie saß zu tief),
      und der alte Rahmen fehlte. Alt: 1px #e3e3e3, Radius 7px,
      Innenabstand 18px 8px, keine Verschiebung.
   b) Die vier Zahlen im Bereich "Willkommen zu Ihrer ... Reise"
      (Erfahrung, Länder, Klienten, Trainer): oben/unten 18px
      Innenabstand und 8px Abstand unter dem Titel wie früher.
   ========================================================= */

/* !important nötig: Das Seiten-CSS des Pagebuilders steht später im
   Dokument und hat dieselbe Spezifität. */
#sppb-addon-1481572510 .sppb-addon-content {
  transform: none !important;
}

/* Alte Seite: Spalte der Zahl hat 10px Abstand oben, dadurch sitzt
   der Rahmen mittig neben der Überschrift "…COACH SEIT … JAHREN". */
#column-id-1481572509 {
  padding-top: 10px;
}

#sppb-addon-1481572510 .sppb-animated-number {
  border: 1px solid #e3e3e3;
  border-radius: 7px;
  padding: 18px 8px;
}

.sppb-addon-animated-number.animated-number-position-top .sppb-animated-number {
  padding: 18px 8px;
}

.sppb-addon-animated-number .sppb-animated-number-title {
  margin: 0 0 8px;
  line-height: 1.3;
}


/* =========================================================
   13. FEATURE-BOX-TITEL ("Als Sänger/in" usw.): KEINE DOPPELTE LINIE
   ---------------------------------------------------------
   Neu hatte der Titel 12px Innenabstand unten, dadurch rutschte die
   feine Linie unter den Balken (zwei getrennte Linien). Alt: kein
   Innenabstand, der Balken liegt direkt auf der feinen Linie.
   Alt außerdem: 27px Schrift (neu 24px), Titel mittig (display: table
   mit automatischen Seitenrändern), 20px Abstand oben und unten.
   ========================================================= */

.sppb-addon h3.sppb-addon-title.sppb-feature-box-title {
  display: table;
  margin: 20px auto;
  padding-bottom: 0;
  font-size: 27px;
}


/* =========================================================
   14. AUFZÄHLUNG "MEINE ZIELE" (ul.site-list)
   ---------------------------------------------------------
   Die Liste ist verschachtelt: äußere Liste > li.bullets > innere
   Liste "site-list". Alt hatte die innere Liste keinen Einzug, so
   lag das Zeichen der äußeren Liste exakt unter dem der inneren
   (wirkte wie ein Aufzählungszeichen). Neu: 32px Einzug, daher zwei
   Zeichen. Jetzt: kein Einzug, äußeres Zeichen ausgeblendet.
   ========================================================= */

ul.site-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.site-list li {
  margin-bottom: 10px;
  color: #000;
}

ul.site-list li i {
  font-size: 14px;
  margin-right: 10px;
  color: #adadad;
}

li.bullets {
  list-style-type: none;
}


/* =========================================================
   15. KONTAKTFORMULAR (dunkle Sektion)
   ---------------------------------------------------------
   Alt: Addon im Stil "dark" – transparente Felder mit hellem Rand,
   helle Schrift, heller Outline-Button. Neu: weiße Felder, dunkler
   Text auf dunklem Grund (Einverständnis-Text unleserlich),
   Standard-Grau-Button, Häkchen am Rand.
   Gilt nur für dieses Formular (Addon-ID 1681053948116).
   Fokus-Farbe: Gold (#d9ba84).
   ========================================================= */

#sppb-addon-1681053948116 .sppb-form-group {
  margin: 0 0 10px;
  padding: 0;
}

#sppb-addon-1681053948116 .sppb-form-control {
  color: #f0f0f0;
  background: transparent;
  border: 1px solid rgba(200, 200, 200, 0.8);
  border-radius: 4px;
  line-height: 1.9;
  padding: 8px 12px;
  box-shadow: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

#sppb-addon-1681053948116 input.sppb-form-control {
  height: 38px;
}

#sppb-addon-1681053948116 textarea.sppb-form-control {
  height: auto;
}

#sppb-addon-1681053948116 .sppb-form-control::placeholder {
  color: rgba(255, 255, 255, 0.65);
  opacity: 1;
}

#sppb-addon-1681053948116 .sppb-form-control:focus {
  background: transparent;
  color: #fff;
  border-color: #d9ba84;
  box-shadow: 0 0 5px rgba(217, 186, 132, 0.35);
  outline: 0;
}

/* Einverständnis: Häkchen links, Text daneben, hell auf dunkel */
#sppb-addon-1681053948116 .sppb-form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-left: 0;
  margin: 6px 0 14px;
  text-align: left;
}

#sppb-addon-1681053948116 .sppb-form-check-input {
  position: static;
  float: none;
  flex: 0 0 auto;
  margin: 5px 0 0;
  accent-color: #d9ba84;
}

#sppb-addon-1681053948116 .sppb-form-check-label {
  display: block;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  line-height: 1.7;
  text-align: left;
}

#sppb-addon-1681053948116 .sppb-form-check-label a:hover {
  color: #ecd9b0;
}

/* Absende-Button: heller Outline-Button (Flex "btn-light") */
#sppb-addon-1681053948116 .sppb-form-button {
  text-align: center;
}

#sppb-addon-1681053948116 .sppb-btn.sppb-btn-light {
  color: #f5f5f5;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.77);
  padding: 8px 28px;
  font-size: 14px;
  line-height: 1.9;
}

#sppb-addon-1681053948116 .sppb-btn.sppb-btn-light:hover,
#sppb-addon-1681053948116 .sppb-btn.sppb-btn-light:focus {
  color: #fff;
  border-color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
}


/* =========================================================
   16. "JAHREN" NÄHER AN DIE "40"
   ---------------------------------------------------------
   Die Zeile ist im neuen Template breiter (1320px statt 1170px).
   "JAHREN" war am rechten Spaltenrand ausgerichtet, dadurch wuchs
   der Abstand zur Zahl von 39px auf 76px. Jetzt linksbündig: ca. 35px.
   Nur dort, wo die drei Elemente nebeneinander stehen.
   ========================================================= */

@media (min-width: 768px) {
  #sppb-addon-f622aeb2-c923-4f77-8190-6a18ca9edc11 .sppb-addon-text-block {
    text-align: left !important;
  }
}


/* =========================================================
   17. PAGEBUILDER-BUTTONS WIE IN FLEX
   ---------------------------------------------------------
   Alt (Flex): Innenabstand 8px 28px, Schrift 100 % der Basisgröße,
   Zeilenhöhe 1,4, je nach Größe (xs, sm, lg) eigene Abstände.
   Neu: 8px 12px, feste 16px, Zeilenhöhe 1,25 (Buttons wirkten
   kleiner und schmaler).
   Button-Farbe "secondary": alt #747B82 (neu bläulich-grau).
   Addon-spezifische Einstellungen (IDs) haben Vorrang und bleiben.
   ========================================================= */

body.helix-ultimate .sppb-btn {
  padding: 8px 28px;
  margin-right: 3px;
  font-size: 100%;
  line-height: 1.4;
}

body.helix-ultimate .sppb-btn.sppb-btn-xs {
  padding: 5px 16px;
  font-size: 80%;
  line-height: 1.1;
}

body.helix-ultimate .sppb-btn.sppb-btn-sm {
  padding: 6px 22px;
  font-size: 87%;
}

body.helix-ultimate .sppb-btn.sppb-btn-lg {
  padding: 9px 30px;
  font-size: 125%;
  line-height: 1.7;
}

body.helix-ultimate .sppb-btn.sppb-btn-secondary {
  background-color: #747b82;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

body.helix-ultimate .sppb-btn.sppb-btn-secondary:hover {
  background-color: #646a70;
}

/* Körpermusik: Icon am Button "Blick ins Buch" ging beim Import
   verloren (alt: pe-7s-study). Per CSS wiederhergestellt. */
#btn-4586c07b-6534-45b5-84d9-0e28348a55ee::before {
  content: "\e60f";
  font-family: "Pe-icon-7-stroke";
  font-size: 21.33px;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  margin: -4px 10px -4px -3px;
}


/* =========================================================
   18. ATEMTYP-RECHNER (Seite "Atemtyp Rechner")
   ---------------------------------------------------------
   Das CSS stand auf der alten Seite als <style>-Block im Seitenkopf
   (Custom Code) und wurde nicht mit übernommen. Hier bereinigt und
   zusammengefasst (die alte Version enthielt mehrere doppelte
   Regeln, die Wirkung ist identisch). Die Feld-Regeln gelten nur
   noch innerhalb der Rechner-Karte.
   Hinweis: Der Rechner braucht außerdem das Skript
   /media/atemtyp/atemtyp-ui.js und das veröffentlichte Joomla-Modul
   "atemtyp" (siehe Antwort).
   ========================================================= */

.atemtyp-card {
  max-width: 720px;
  margin: 40px auto;
  padding: 32px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  font-family: system-ui, -apple-system, sans-serif;
}

.atemtyp-card h3 {
  font-size: 22px;
  margin-bottom: 24px;
  text-align: center;
}

.atemtyp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px;
}

.atemtyp-card .field label {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  opacity: 0.7;
}

.atemtyp-card .atemtyp-grid .field input,
.atemtyp-card .atemtyp-grid .field select {
  width: 100%;
  height: 44px;
  line-height: 44px;
  padding: 0 14px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid #dcdcdc;
  font-size: 14px;
  transition: all 0.2s ease;
}

.atemtyp-card .atemtyp-grid .field input:focus,
.atemtyp-card .atemtyp-grid .field select:focus {
  border-color: #c00000;
  outline: none;
  box-shadow: 0 0 0 3px rgba(200, 0, 0, 0.1);
}

.atemtyp-button {
  margin-top: 30px;
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #c00000, #ff4d4d);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.atemtyp-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(200, 0, 0, 0.3);
}

.atemtyp-button:active {
  transform: translateY(0);
}

/* Ergebnis */
.atemtyp-result-card {
  margin-top: 35px;
  padding: 22px;
  border-radius: 14px;
  background: #f7f7f7;
}

.atemtyp-type {
  font-size: 26px;
  font-weight: 700;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 15px;
  display: inline-block;
}

.atemtyp-values {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.atemtyp-values div {
  margin: 6px 0;
  font-size: 16px;
}

.atemtyp-value strong {
  font-size: 18px;
}

.atemtyp-solar   { color: #c00000; }
.atemtyp-lunar   { color: #0055cc; }
.atemtyp-neutral { color: #666666; }

.atemtyp-solar .atemtyp-type {
  background: rgba(200, 0, 0, 0.08);
  color: #c00000;
}

.atemtyp-lunar .atemtyp-type {
  background: rgba(0, 85, 200, 0.08);
  color: #0055cc;
}

.atemtyp-neutral .atemtyp-type {
  background: rgba(100, 100, 100, 0.08);
  color: #444444;
}

.atemtyp-trend-title {
  margin: 25px 0 10px;
  font-weight: 600;
}

/* Legende */
.atemtyp-legend {
  margin-top: 15px;
  font-size: 14px;
  display: flex;
  gap: 20px;
}

.atemtyp-legend span::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.atemtyp-legend .sun::before   { background: #c0392b; }
.atemtyp-legend .moon::before  { background: #2e5cb8; }
.atemtyp-legend .today::before { background: #888888; }

/* Diagramm, Zähler, Hinweise */
.atemtyp-chart-wrapper {
  width: 100%;
  max-width: 100%;
}

#atemtyp-chart {
  width: 100% !important;
  display: block;
}

.atemtyp-chart-wrapper canvas {
  width: 100%;
  height: 450px;
  display: block;
}

.atemtyp-counter {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #ddd;
  font-size: 14px;
  color: #555;
  text-align: center;
}

.atemtyp-counter strong {
  font-size: 18px;
  color: #222;
}

.atemtyp-privacy {
  font-size: 12px;
  color: #777;
  margin-top: 10px;
  text-align: center;
}

.atemtyp-powered {
  margin-top: 15px;
  font-size: 12px;
  color: #999;
  text-align: center;
}


/* =========================================================
   19. BUTTON-STILE "DEFAULT" UND ICONS IN BUTTONS
   ---------------------------------------------------------
   a) "sppb-btn-default" (z. B. "Nachricht absenden",
      "Anfrage absenden"): alt halbtransparent weiß mit grauem Rand
      und grauem Text; neu Standard-Grau (#eff1f4, fast schwarzer Text).
   b) Absende-Buttons in Kontaktformularen: alt 7px Abstand oben und
      unten, Zeilenhöhe 1,9 (Button 45px hoch statt 38px).
   c) Icons in Buttons (Pe-icon-7-stroke) gingen beim Import verloren.
      Für die bekannten Buttons per CSS wiederhergestellt:
      pe-7s-study (Leseprobe, Zur Bestellung), pe-7s-wallet
      (Buch bestellen), pe-7s-diamond (alle Buttons mit mailto-Link,
      z. B. "Anfrage absenden").
   ========================================================= */

body.helix-ultimate .sppb-btn.sppb-btn-default {
  background-color: rgba(255, 255, 255, 0.85);
  border-color: #666666;
  color: #666666;
}

body.helix-ultimate .sppb-btn.sppb-btn-default:hover,
body.helix-ultimate .sppb-btn.sppb-btn-default:focus {
  background-color: #ffffff;
  border-color: #999999;
  color: #999999;
}

.sppb-addon-ajax-contact .sppb-ajaxt-contact-form .sppb-btn {
  margin: 7px 0;
  line-height: 1.9;
}

#btn-59e75fd8-8749-473a-9df5-f7783df34608::before,
#btn-77afe8c1-f658-44ea-97ed-96a5204c56d9::before,
#btn-cd729218-8151-4fb7-b194-d8ca508d925d::before,
#btn-5d5bcf7f-ff0c-4a92-aee0-245b8bc43f71::before,
a.sppb-btn[href^="mailto:"]::before {
  font-family: "Pe-icon-7-stroke";
  font-size: 21.33px;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  margin: -4px 8px -4px -3px;
}

#btn-59e75fd8-8749-473a-9df5-f7783df34608::before,
#btn-cd729218-8151-4fb7-b194-d8ca508d925d::before,
#btn-5d5bcf7f-ff0c-4a92-aee0-245b8bc43f71::before {
  content: "\e60f";
}

#btn-77afe8c1-f658-44ea-97ed-96a5204c56d9::before {
  content: "\e600";
}

a.sppb-btn[href^="mailto:"]::before {
  content: "\e6af";
  font-size: 18px;
}
body.com_users #sp-main-body,
body.com_eventbooking #sp-main-body {
  padding-top: 40px !important;
}

/* Top-Bar und Kopf – gilt für alle Seiten */
#sp-top-bar {
  padding: 10px 0 !important;
}
#sp-top-bar .sp-module p {
  margin-bottom: 0 !important;
}
#sp-top-bar .topbar-login {
  padding-top: 0 !important;
  position: relative;
  top: -4px;
}

@media (min-width: 992px) {
  #sp-header {
    height: 60px !important;
  }
  #sp-header .container,
  #sp-header .container-inner,
  #sp-header .row {
    height: 60px !important;
  }
  #sp-header #sp-logo,
  #sp-header .logo {
    height: 60px !important;
  }
  #sp-header .logo {
    display: flex;
    align-items: center;
  }
  body.subpage-header #sp-header .sp-megamenu-parent > li > a,
  body.home-transparent-header #sp-header .sp-megamenu-parent > li > a {
    line-height: 56px !important;
  }

  /* Startseite: Kopf liegt wie auf den Unterseiten direkt unter der Top-Bar */
  body.home-transparent-header #sp-header {
    top: auto !important;
  }
  body.home-transparent-header #sp-header .container,
  body.home-transparent-header #sp-header .container-inner {
    transform: none !important;
  }
}

/* ===== Anmeldeformular ===== */
body.com_users #sp-main-body {
  background: #f6f4ef;
  padding: 56px 0 80px !important;
}
.com-users-login .row { margin: 0; }
.com-users-login .col-lg-4 {
  flex: 0 0 auto;
  width: 100%;
  max-width: 460px;
  background: #fff;
  border: 1px solid #e7e2d6;
  border-top: 3px solid #d9ba84;
  border-radius: 10px;
  padding: 36px 40px 24px;
  box-shadow: 0 12px 32px rgba(40, 30, 10, .08);
}
.com-users-login__form { background: none; border: 0; padding: 0; margin: 0; }
.com-users-login__form fieldset {
  display: flex; flex-direction: column;
  border: 0; padding: 0; margin: 0;
}
.com-users-login__form label {
  font-size: 14px; font-weight: 600; color: #333; margin-bottom: 6px;
}
.com-users-login__form .star { color: #a8863f; }

.com-users-login .form-control {
  height: 48px; padding: 0 14px; font-size: 16px; color: #222;
  background: #fff; border: 1px solid #d6d0c2; border-radius: 8px;
  box-shadow: none;
}
.com-users-login .form-control:focus {
  border-color: #d9ba84;
  box-shadow: 0 0 0 3px rgba(217, 186, 132, .35);
  outline: 0;
}
.com-users-login .input-group .form-control {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.com-users-login .input-group .btn.input-password-toggle {
  background: #f4f1ea; border: 1px solid #d6d0c2; border-left: 0;
  color: #555; border-radius: 0 8px 8px 0; padding: 0 14px;
}
.com-users-login .input-group .btn.input-password-toggle:hover { background: #ebe5d6; }
.com-users-login .form-check-input { accent-color: #a8863f; }
.com-users-login .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(217, 186, 132, .35); border-color: #d9ba84;
}

/* "Anmelden" zuerst, "Passkey" darunter */
.com-users-login__form .com-users-login__submit { order: 1; }
.com-users-login__form .com-users-login__submit:has(.plg_system_webauthn_login_button) { order: 2; }
.com-users-login__form .com-users-login__submit .btn {
  height: 50px; border-radius: 8px; font-weight: 600; font-size: 16px;
  letter-spacing: .02em; display: flex; align-items: center;
  justify-content: center; gap: 10px;
  transition: background .2s, color .2s, border-color .2s;
}
.com-users-login__form .btn-primary {
  background: #030303; border: 1px solid #030303; color: #d9ba84;
}
.com-users-login__form .btn-primary:hover,
.com-users-login__form .btn-primary:focus {
  background: #d9ba84; border-color: #d9ba84; color: #030303;
}
.com-users-login__form .plg_system_webauthn_login_button {
  background: #fff; color: #444; border: 1px solid #cfc9bb; font-weight: 500;
}
.com-users-login__form .plg_system_webauthn_login_button svg {
  fill: currentColor; height: 20px; width: auto;
}
.com-users-login__form .plg_system_webauthn_login_button:hover {
  border-color: #d9ba84; background: #fbf8f1; color: #222;
}

/* Links unter dem Formular */
.com-users-login__options {
  border-top: 1px solid #eee; margin-top: 6px; padding-top: 14px; text-align: center;
}
.com-users-login__options.list-group { border-radius: 0; }
.com-users-login__options .list-group-item {
  border: 0; background: none; padding: 6px 0; font-size: 14px;
  color: #6b6b6b; text-align: center;
}
.com-users-login__options .list-group-item:hover { color: #a8863f; background: none; }

@media (max-width: 57/* Kompakter auf niedrigen Bildschirmen, damit das ganze Formular sichtbar ist */
@media (max-height: 820px) and (min-width: 576px) {
  body.com_users #sp-main-body { padding: 20px 0 28px !important; }
  .com-users-login .col-lg-4 { max-width: 440px; padding: 20px 32px 10px; }
  .com-users-login .col-lg-4::before { font-size: 24px; margin-bottom: 12px; }
  .com-users-login__form .mb-3 { margin-bottom: 9px !important; }
  .com-users-login__form label { margin-bottom: 4px; font-size: 13.5px; }
  .com-users-login .form-control { height: 42px; font-size: 15px; }
  .com-users-login__form .com-users-login__submit .btn { height: 42px; font-size: 15px; }
  .com-users-login__form .com-users-login__submit .mb-3 { margin-bottom: 8px !important; }
  .com-users-login__options { margin-top: 4px; padding-top: 6px; }
  .com-users-login__options .list-group-item { padding: 2px 0; font-size: 13px; }
}5px) {
  .com-users-login .col-lg-4 { padding: 28px 22px 18px; border-radius: 8px; }
  .com-users-login .col-lg-4::before { font-size: 28px; }
}

@media (max-height: 820px) and (min-width: 576px) {
  body.com_users #sp-main-body { padding: 20px 0 28px !important; }
  .com-users-login .col-lg-4 { max-width: 440px; padding: 20px 32px 10px; }
  .com-users-login .col-lg-4::before { font-size: 24px; margin-bottom: 12px; }
  .com-users-login__form .mb-3 { margin-bottom: 9px !important; }
  .com-users-login__form label { margin-bottom: 4px; font-size: 13.5px; }
  .com-users-login .form-control { height: 42px; font-size: 15px; }
  .com-users-login__form .com-users-login__submit .btn { height: 42px; font-size: 15px; }
  .com-users-login__form .com-users-login__submit .mb-3 { margin-bottom: 8px !important; }
  .com-users-login__options { margin-top: 4px; padding-top: 6px; }
  .com-users-login__options .list-group-item { padding: 2px 0; font-size: 13px; }
}

/* ===== Passwort vergessen / Benutzername vergessen / Registrierung ===== */
.com-users-reset__form,
.com-users-remind__form,
.com-users-registration .row > div {
  max-width: 460px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e7e2d6;
  border-top: 3px solid #d9ba84;
  border-radius: 10px;
  padding: 26px 36px 20px;
  box-shadow: 0 12px 32px rgba(40, 30, 10, .08);
}
.com-users-registration .row { margin: 0; }
.com-users-registration .row > div { flex: 0 0 auto; width: 100%; max-width: 480px; }
.com-users-reset__form.well,
.com-users-remind__form.well { min-height: 0; }

.com-users-reset__form fieldset,
.com-users-remind__form fieldset,
.com-users-registration__form fieldset { border: 0; padding: 0; margin: 0; }

/* Überschriften */
.com-users-reset__form legend,
.com-users-registration__form legend {
  float: none; width: auto; padding: 0; margin: 0 0 14px; border: 0;
  font-family: Raleway, "Open Sans", sans-serif;
  font-weight: 300; font-size: 26px; line-height: 1.2; color: #1c1c1c;
}
.com-users-remind__form::before {
  content: "Benutzername vergessen";
  display: block;
  font-family: Raleway, "Open Sans", sans-serif;
  font-weight: 300; font-size: 26px; line-height: 1.2; color: #1c1c1c;
  margin-bottom: 14px;
}
.com-users-remind__form legend {
  float: none; width: auto; padding: 0; margin: 0 0 14px; border: 0;
  font-size: 14px; font-weight: 400; line-height: 1.5; color: #555;
}
.com-users-reset__form p { font-size: 14px; line-height: 1.5; color: #555; margin: 0 0 14px; }

/* Felder */
.com-users-reset .control-group,
.com-users-remind .control-group,
.com-users-registration .control-group { margin-bottom: 10px; }
.com-users-reset .control-label,
.com-users-remind .control-label,
.com-users-registration .control-label { width: auto; float: none; padding: 0; text-align: left; }
.com-users-reset .controls,
.com-users-remind .controls,
.com-users-registration .controls { margin: 0; }
.com-users-reset label,
.com-users-remind label,
.com-users-registration label { font-size: 13.5px; font-weight: 600; color: #333; margin-bottom: 4px; }
.com-users-reset .star,
.com-users-remind .star,
.com-users-registration .star,
.com-users-registration strong.red { color: #a8863f; }
.com-users-reset .form-control,
.com-users-remind .form-control,
.com-users-registration .form-control {
  height: 42px; padding: 0 14px; font-size: 15px; color: #222;
  background: #fff; border: 1px solid #d6d0c2; border-radius: 8px; box-shadow: none;
}
.com-users-reset .form-control:focus,
.com-users-remind .form-control:focus,
.com-users-registration .form-control:focus {
  border-color: #d9ba84; box-shadow: 0 0 0 3px rgba(217, 186, 132, .35); outline: 0;
}
.com-users-registration .input-group .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.com-users-registration .input-group .btn.input-password-toggle {
  background: #f4f1ea; border: 1px solid #d6d0c2; border-left: 0;
  color: #555; border-radius: 0 8px 8px 0; padding: 0 14px;
}
.com-users-registration .field-spacer .spacer,
.com-users-registration [id="jform[password1]-rules"] { font-size: 12.5px; color: #777; }
.com-users-registration meter { width: 100%; height: 6px; margin-top: 6px; }
.com-users-registration output { font-size: 12px; color: #777; }

/* Die zwei Zusatzfelder (Atemtyp, Beruf) sind bei der Registrierung gesperrt */
.com-users-registration__form fieldset:nth-of-type(2) { display: none; }

/* Schaltflächen */
.com-users-reset__submit .controls .btn,
.com-users-remind__submit .controls .btn,
.com-users-registration__submit .controls .btn {
  width: 100%; height: 44px; border-radius: 8px;
  font-size: 15px; font-weight: 600; letter-spacing: .02em;
  background: #030303; border: 1px solid #030303; color: #d9ba84;
  transition: background .2s, color .2s, border-color .2s;
}
.com-users-reset__submit .controls .btn:hover,
.com-users-remind__submit .controls .btn:hover,
.com-users-registration__submit .controls .btn:hover {
  background: #d9ba84; border-color: #d9ba84; color: #030303;
}
.com-users-reset__submit,
.com-users-remind__submit,
.com-users-registration__submit { margin-top: 14px; margin-bottom: 0; }

/* Kompakter auf niedrigen Bildschirmen */
@media (max-height: 820px) and (min-width: 576px) {
  .com-users-reset__form,
  .com-users-remind__form,
  .com-users-registration .row > div { padding: 20px 32px 14px; }
  .com-users-reset__form legend,
  .com-users-registration__form legend,
  .com-users-remind__form::before { font-size: 24px; margin-bottom: 8px; }
  .com-users-reset .control-group,
  .com-users-remind .control-group,
  .com-users-registration .control-group { margin-bottom: 7px; }
  .com-users-reset .form-control,
  .com-users-remind .form-control,
  .com-users-registration .form-control { padding: 8px 12px; }
}

/* ===== Benutzermenü (mod_usermenu) in der Top Bar ===== */
#sp-top-bar { position: relative; z-index: 1100; }
.usermenu { position: relative; display: inline-block; }
#sp-top-bar .usermenu { top: 5px; }

#sp-top-bar .usermenu__toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0; margin: 0; outline: 0; box-shadow: none;
  color: #fff; font: inherit; font-size: 15px; font-weight: 300; line-height: 1;
  cursor: pointer; white-space: nowrap;
}
#sp-top-bar .usermenu__toggle:focus { outline: 0; box-shadow: none; }
#sp-top-bar .usermenu__toggle:hover,
#sp-top-bar .usermenu.is-open .usermenu__toggle,
#sp-top-bar .usermenu__toggle:focus-visible { color: #d8bd82; }
#sp-top-bar .usermenu__icon { flex: 0 0 auto; width: 20px !important; height: 20px !important; }
.usermenu__chevron { flex: 0 0 auto; transition: transform .2s; }
.usermenu.is-open .usermenu__chevron { transform: rotate(180deg); }

/* Dropdown: exakt wie die Hauptmenü-Untermenüs */
#sp-top-bar .usermenu__list {
  display: none; position: absolute; right: 0; top: calc(100% + 5px);
  width: 240px; max-width: 90vw; margin: 0; padding: 5px 0; list-style: none;
  background: rgba(12, 12, 12, 0.88); border-radius: 0; box-shadow: none;
}
#sp-top-bar .usermenu.is-open .usermenu__list { display: block; }
#sp-top-bar .usermenu__list li { margin: 0; padding: 0; border: 0; }
#sp-top-bar .usermenu__list a,
#sp-top-bar .usermenu__logout button {
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  padding: 6px 20px; background: none; border: 0; border-radius: 0;
  color: #fff; font-family: inherit; font-size: 15px; font-weight: 400; line-height: 19.5px;
  text-decoration: none; cursor: pointer;
}
#sp-top-bar .usermenu__list a:hover,
#sp-top-bar .usermenu__list a:focus-visible,
#sp-top-bar .usermenu__logout button:hover,
#sp-top-bar .usermenu__logout button:focus-visible,
#sp-top-bar .usermenu__list li.is-active > a { color: #d8bd82; background: none; }
#sp-top-bar .usermenu__logout { margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, .12) !important; }
#sp-top-bar .usermenu__logout form { margin: 0; }

@media (max-width: 575px) {
  #sp-top-bar .usermenu__toggle { font-size: 14px; }
  #sp-top-bar .usermenu__icon { width: 18px !important; height: 18px !important; }
}

/* ===== Newsletter-Archiv (AcyMailing) ===== */
#acym_wrapper.archive_listing .acym__front__archive { max-width: 860px; margin: 0 auto; padding: 8px 0 24px; }

/* Titel */
#acym_wrapper.archive_listing .acym__front__archive__title {
  font-family: "Raleway", "Open Sans", sans-serif; font-weight: 300; font-size: 40px; line-height: 1.2;
  color: #030303; margin: 0 0 26px; padding-bottom: 14px; position: relative;
}
#acym_wrapper.archive_listing .acym__front__archive__title::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 2px; background: #d8bd82;
}

/* Suche */
#acym_wrapper.archive_listing #acym__front__archive__search { display: flex; gap: 12px; margin-bottom: 14px; }
#acym_wrapper.archive_listing #acym__front__archive__search input[type="text"] {
  flex: 1 1 auto; height: 46px; box-sizing: border-box; margin: 0; padding: 11px 14px;
  background: #faf8f3; border: 1px solid #e0d9c8; border-radius: 6px; box-shadow: none;
  font-family: "Open Sans", sans-serif; font-size: 16px; color: #2b2b2b;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
#acym_wrapper.archive_listing #acym__front__archive__search input[type="text"]:focus {
  background: #fff; border-color: #d8bd82; outline: 0; box-shadow: 0 0 0 3px rgba(216, 189, 130, .28);
}
#acym_wrapper.archive_listing #acym__front__archive__search .button {
  flex: 0 0 auto; height: 46px; margin: 0; padding: 0 28px;
  background: #030303; border: 1px solid #030303; border-radius: 6px; box-shadow: none;
  font-family: "Open Sans", sans-serif; font-size: 15px; font-weight: 400; letter-spacing: .02em; color: #fff;
  transition: background-color .2s, color .2s, border-color .2s;
}
#acym_wrapper.archive_listing #acym__front__archive__search .button:hover,
#acym_wrapper.archive_listing #acym__front__archive__search .button:focus-visible {
  background: #d8bd82; border-color: #d8bd82; color: #030303;
}

/* Liste: Titel (Link) + Sendedatum als Zeile */
#acym_wrapper.archive_listing a.acym__modal__handle {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin: 0; padding: 20px 4px 3px;
  font-family: "Open Sans", sans-serif; font-size: 18px; line-height: 1.4; color: #030303; text-decoration: none;
  transition: color .2s, padding-left .2s;
}
#acym_wrapper.archive_listing a.acym__modal__handle::after {
  content: "\2192"; flex: 0 0 auto; color: #d8bd82; font-size: 18px; opacity: .6;
  transition: opacity .2s, transform .2s;
}
#acym_wrapper.archive_listing a.acym__modal__handle:hover { color: #a8863f; padding-left: 10px; }
#acym_wrapper.archive_listing a.acym__modal__handle:hover::after { opacity: 1; transform: translateX(4px); }
#acym_wrapper.archive_listing p.acym__front__archive__newsletter_sending-date {
  margin: 0; padding: 0 4px 18px; border-bottom: 1px solid #e7e2d6;
  font-family: "Open Sans", sans-serif; font-size: 13px; letter-spacing: .03em; color: #8a8578;
}

/* Seitenwahl */
#acym_wrapper.archive_listing .pagination { margin-top: 28px; }
#acym_wrapper.archive_listing .pagination_container { gap: 4px; }
#acym_wrapper.archive_listing .pagination_input {
  width: 58px; height: 40px; box-sizing: border-box; padding: 6px; text-align: center;
  background: #faf8f3; border: 1px solid #e0d9c8; border-radius: 6px; box-shadow: none;
  font-family: "Open Sans", sans-serif; font-size: 16px; color: #2b2b2b;
}
#acym_wrapper.archive_listing .pagination_text { margin: 0 6px; font-family: "Open Sans", sans-serif; font-size: 15px; color: #5a5650; }
#acym_wrapper.archive_listing .pagination_border_left,
#acym_wrapper.archive_listing .pagination_border_right { border-color: #e7e2d6; }
#acym_wrapper.archive_listing .pagination__i { color: #a8863f; transition: color .2s; }
#acym_wrapper.archive_listing .pagination-next:hover .pagination__i,
#acym_wrapper.archive_listing .pagination-previous:hover .pagination__i { color: #030303; }
#acym_wrapper.archive_listing .pagination_disabled .pagination__i { color: #cfc8b8; }

@media (max-width: 575px) {
  #acym_wrapper.archive_listing .acym__front__archive__title { font-size: 30px; }
  #acym_wrapper.archive_listing #acym__front__archive__search { flex-wrap: wrap; }
  #acym_wrapper.archive_listing #acym__front__archive__search .button { width: 100%; }
  #acym_wrapper.archive_listing a.acym__modal__handle { font-size: 16px; }
}

/* ===== Sticky Header ===== */
html { scroll-padding-top: 70px; }
body, .body-innerwrapper { overflow-x: clip !important; overflow-y: visible !important; }

/* Unterseiten: Header bleibt oben stehen */
body:not(.home-transparent-header) #sp-header {
  position: sticky !important; top: 0 !important; z-index: 1030;
}

/* Startseite: nach dem Scrollen fixiert */
body.home-transparent-header.hdr-fixed #sp-header {
  position: fixed !important; top: 0 !important; left: 0; right: 0; width: 100%; z-index: 1030;
}

/* Gescrollt: halbtransparentes Grau mit Weichzeichner, wie auf der alten Seite */
body.hdr-fixed #sp-header,
body.subpage-header.hdr-fixed #sp-header,
body.home-transparent-header.hdr-fixed #sp-header {
  background: rgba(39, 39, 39, .75) !important;
  background-color: rgba(39, 39, 39, .75) !important;
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}

/* Gescrollt: Header-Höhe wie auf der alten Seite (nur ab Desktop-Breite) */
@media (min-width: 992px) {
  #sp-header, #sp-header .container, #sp-header .container-inner, #sp-header .row,
  #sp-header #sp-logo, #sp-header .logo { transition: height .3s, margin .3s; }
  body.hdr-fixed #sp-header { height: 70px !important; margin-bottom: -10px; }
  body.hdr-fixed #sp-header .container, body.hdr-fixed #sp-header .container-inner,
  body.hdr-fixed #sp-header .row, body.hdr-fixed #sp-header #sp-logo,
  body.hdr-fixed #sp-header .logo { height: 70px !important; }
  body.subpage-header.hdr-fixed #sp-header .sp-megamenu-parent > li > a,
  body.home-transparent-header.hdr-fixed #sp-header .sp-megamenu-parent > li > a { line-height: 66px !important; }
}


/* Referenten (Event Booking): Foto, Name und Text untereinander; mehrere Referenten nebeneinander */
#eb-speakers-list {
  display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-start;
}
#eb-speakers-list .eb-speaker-container {
  flex: 1 1 280px; width: auto; max-width: none; padding-left: 0; padding-right: 0;
}

/* Nur ein Referent: eine Spalte in halber Breite */
#eb-speakers-list .eb-speaker-container:only-child {
  flex: 0 1 calc(50% - 20px); min-width: 280px;
}

#eb-speakers-list .eb-speaker-avatar { margin-bottom: 14px; }
#eb-speakers-list .eb-speaker-avatar img {
  width: 200px; height: 200px; max-width: 100%;
  object-fit: cover; object-position: center 15%;
  margin-left: auto; margin-right: auto;
}
#eb-speakers-list .eb-speaker-name { text-align: center; }

/* ===== Cookie-Leiste (Web357 Cookies Policy Notification Bar) ===== */
#w357_cpnb_outer.cpnb-outer {
  background: rgba(12, 13, 13, .8) !important;
  border-top: 1px solid #d9ba84 !important;
}
#w357_cpnb_outer .cpnb-button-ok,
.cpnb-modal-actions .cpnb-button-ok {
  background: rgba(217, 186, 132, .8) !important; color: #fff !important;
}
#w357_cpnb_outer .cpnb-button-decline,
.cpnb-modal-actions .cpnb-button-decline {
  background: rgba(192, 192, 192, .8) !important; color: #fff !important;
}
#w357_cpnb_outer .cpnb-button-more-default {
  background: rgba(123, 138, 139, .8) !important; color: #fff !important;
}
#w357_cpnb_outer .cpnb-button:hover,
.cpnb-modal-actions .cpnb-button:hover { filter: brightness(1.12); }

/* Newsletter-Anmeldung: Vorname + Name nebeneinander, E-Mail volle Breite */
.acym_module_form .acym_form {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}
.acym_module_form .acym_form > .onefield {
  flex: 1 1 100%;
  margin-bottom: 14px;
  min-width: 0;
}
.acym_module_form .acym_form > .onefield:nth-child(-n+2) {
  flex: 1 1 calc(50% - 8px);
}
.acym_module_form .acym_form .onefield > label {
  display: block;
  width: 100%;
}
.acym_module_form .acym_form .onefield input[type="text"],
.acym_module_form .acym_form .onefield input[type="email"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
.acym_module_form .acym_form > .fieldacycaptcha {
  margin: 0;
}
@media (max-width: 575px) {
  .acym_module_form .acym_form > .onefield:nth-child(-n+2) {
    flex: 1 1 100%;
  }
}

/* ---- Newsletter-Formular: kompakte Karte ---- */
.acym_module_form {
  background: #fff;
  border: 1px solid #e7e2d6;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
  padding: 18px 20px;
}
.acym_module_form .acym_form > .onefield { margin-bottom: 8px; }
.acym_module_form .acym__users__creation__fields__title {
  display: block;
  font-size: 13px;
  line-height: 1.2;
  margin-bottom: 3px;
}
.acym_module_form .acym_form .onefield input[type="text"],
.acym_module_form .acym_form .onefield input[type="email"] {
  height: 36px;
  padding: 6px 10px !important;
}
.acym_module_form .acym_form > .fieldacyterms { margin: 2px 0 0; }
.acym_module_form .acysubbuttons { margin: 10px 0 0; }

/* ---- Akkordeon: Unterstreichung, Icon, Pfeil ---- */
.sppb-addon-accordion .sppb-panel {
  background: transparent !important;
  border-color: transparent !important;
}
.sppb-addon-accordion .sppb-panel-heading {
  border-bottom: 1px solid #999;
  padding: 10px 40px 10px 12px;
}
.sppb-addon-accordion .sppb-panel-title::before {
  content: "\e630";
  font-family: "Pe-icon-7-stroke";
  font-weight: 400;
  font-size: 17.6px;
  line-height: 1;
  color: #999;
  margin-right: 8px;
  vertical-align: middle;
}
.sppb-addon-accordion .sppb-panel-heading .sppb-toggle-direction {
  color: #999 !important;
  transform: translateY(-50%) rotate(90deg);
}
.sppb-addon-accordion .sppb-panel-heading.active .sppb-toggle-direction {
  transform: translateY(-50%) rotate(-90deg);
}
.sppb-addon-accordion .sppb-panel-body { padding: 20px 15px; }

/* Footer wie auf der alten Seite: ohne Linie, kompakt */
#sp-footer .container-inner {
  border-top: 0 !important;
  padding: 0 !important;
}

.recaptcha-hinweis {
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: #777;
  margin: 8px 0 0;
}

/* reCAPTCHA-Badge ausblenden (Hinweistext am Formular nötig) */
.grecaptcha-badge {
  visibility: hidden !important;
}

/* Proof-of-Work-Captcha im Newsletter-Formular */
.acym_module_form .fieldacycaptcha altcha-widget {
  display: block;
  width: 100%;
}
.acym_module_form .fieldacycaptcha .altcha {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  background: #faf8f3;
}
.acym_module_form .fieldacycaptcha .altcha-main {
  padding: 8px 12px;
  gap: 10px;
  align-items: center;
}
.acym_module_form .fieldacycaptcha .altcha-checkbox input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #b79a5e;
}
.acym_module_form .fieldacycaptcha .altcha-label {
  font-size: 14px;
  line-height: 1.2;
  margin: 0;
  color: #444;
}

/* Schriften zuweisen (lokal geladen) */
body, input, textarea, select, button,
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
.menu.nav-pills > li > a,
.menu.nav-pills > li > span,
.sppb-addon-text-block .sppb-addon-content {
  font-family: "Open Sans", sans-serif !important;
}
h1, h2, h3, h4, h5, h6,
.sppb-addon-text-block .sppb-addon-content h1,
.sppb-addon-text-block .sppb-addon-content h2,
.sppb-addon-text-block .sppb-addon-content h3,
.sppb-addon-text-block .sppb-addon-content h4,
.sppb-addon-text-block .sppb-addon-content h5,
.sppb-addon-text-block .sppb-addon-content h6,
.sppb-addon-title, .sppb-sp-slider-title,
.extra-title, .sppb-feature-box-title {
  font-family: "Raleway", sans-serif !important;
}

/* Optin-Formular (Atemtyp Rechner Pro): alles untereinander */
.sppb-optin-form .sppb-form-control {
  width: 100% !important;
  max-width: 100%;
}
.sppb-optin-form .recaptcha-wrap,
.sppb-optin-form .checkbox-wrap {
  flex: 0 0 100%;
  max-width: 100%;
  margin-top: 12px;
}
.sppb-optin-form altcha-widget {
  display: block;
  width: 100%;
  max-width: 100%;
}
.sppb-optin-form .altcha {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 4px;
  background: #faf8f3;
}
.sppb-optin-form .altcha-main { padding: 8px 12px; gap: 10px; align-items: center; }
.sppb-optin-form .altcha-label { font-size: 14px; margin: 0; color: #444; }
.sppb-optin-form .sppb-form-check-label {
  font-size: 14px;
  line-height: 1.5;
}
.sppb-optin-form.submit-button-inside .button-wrap {
  position: static !important;
  margin-top: 14px;
  text-align: left;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.sppb-optin-form .button-wrap button {
  height: auto;
  padding: 10px 28px;
  border-radius: 4px;
  box-shadow: none;
}

/* Optin-Formular als Karte hervorheben */
form.sppb-optin-form,
form.sppb-optin-form.submit-button-inside {
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e7e2d6;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  padding: 22px 24px !important;
  box-sizing: border-box;
}

/* Event Booking: Buttons im Stil der Website */
#eb-events .btn,
.eb-register-button.btn,
#eb-event-page .btn {
  border-radius: 4px;
  font-size: 15px;
  padding: 9px 22px;
  box-shadow: none;
}
/* Haupt-Button: Anmeldung (schwarz mit goldener Schrift, wie beim Login) */
#eb-events .btn-primary,
#eb-event-page .btn-primary {
  background: #000;
  border-color: #000;
  color: #d9ba84;
}
#eb-events .btn-primary:hover,
#eb-event-page .btn-primary:hover {
  background: #222;
  border-color: #222;
  color: #fff;
}
/* Gruppen und Details: dezent mit dunklem Umriss */
#eb-events .btn-secondary,
#eb-event-page .btn-secondary {
  background: transparent;
  border: 1px solid #bbb;
  color: #444;
}
#eb-events .btn-secondary:hover,
#eb-event-page .btn-secondary:hover {
  background: #f4f2ec;
  border-color: #8b7a40;
  color: #222;
}

/* Überschrift der Übersicht etwas ruhiger */
h1.eb-page-heading {
  font-size: 32px;
  margin-bottom: 24px;
}

/* Seminare optisch trennen */
#eb-events .eb-event-container,
#eb-events > div {
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid #e7e2d6;
}
#eb-events > div:last-child { border-bottom: 0; }

/* Tabelle mit den Eckdaten dezenter */
#eb-events table.table-bordered,
#eb-event-page table.table-bordered {
  border-color: #e7e2d6;
}
#eb-events .table-striped > tbody > tr:nth-of-type(odd) > * {
  background: #faf8f3;
  --bs-table-accent-bg: #faf8f3;
}
#eb-events .eb-group-registration-button.btn-primary,
#eb-event-page .eb-group-registration-button.btn-primary {
  background: transparent;
  border: 1px solid #000;
  color: #000;
}

#sp-slider-inner-item-1658950653512-num-5-key.sppb-sp-slider-button .sp-slider-btn-text:hover,
#sp-slider-inner-item-1658950653512-num-5-key.sppb-sp-slider-button .sp-slider-btn-text:focus {
  background: rgba(217,186,132,.18) !important;
  color: #fff !important;
  border-color: rgba(217,186,132,.91) !important;
}

#sppb-addon-1ef885af-972c-49ae-b4ec-6f572557b596 .sppb-addon-title {
  font-size: 27px;
  font-weight: 400;
  line-height: 35px;
  color: #fff;
  text-align: center;
}