/*
Theme Name:   SCHOLZ Child
Theme URI:    https://scholz-ls.de
Description:  Child-Theme für SCHOLZ LIFE SCIENCE auf Basis von Divi 5.
              Erstellt von mandego oHG.
Author:       mandego oHG
Author URI:   https://www.mandego.de
Template:     Divi
Version:      7.13.0
Requires PHP: 7.4
Text Domain:  scholz-child
*/

/* ==========================================================================
   Hinweis: Divi 5 lädt diese Datei selbst (Handle "divi-style-child").
   In der functions.php ist deshalb KEIN wp_enqueue_style nötig.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Schrift Hind — lokal eingebunden (DSGVO)

   Die Dateien liegen im Theme unter /fonts und werden vom eigenen Server
   ausgeliefert; es gibt keine Verbindung zu Google mehr. Quelle: Google Fonts,
   Lizenz SIL Open Font License 1.1 (freie Nutzung, auch selbst gehostet).
   Enthalten: Latin und Latin-Erweiterung, Gewichte 300 bis 700. Ohne
   Devanagari — die Seite nutzt es nicht.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/hind-300-latin-ext.woff2') format('woff2');
  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: 'Hind';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/hind-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/hind-400-latin-ext.woff2') format('woff2');
  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: 'Hind';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/hind-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/hind-500-latin-ext.woff2') format('woff2');
  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: 'Hind';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/hind-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/hind-600-latin-ext.woff2') format('woff2');
  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: 'Hind';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/hind-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/hind-700-latin-ext.woff2') format('woff2');
  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: 'Hind';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/hind-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. Design-Tokens — verbindliche Vorgaben SCHOLZ LIFE SCIENCE
   -------------------------------------------------------------------------- */

:root {
  /* Farben */
  --brand:            #1faf9b;  /* Hauptfarbton */
  --brand-light:      #06f9d0;  /* Hellgrün, oberer Verlauf */
  --text-body:        #a9aaaa;  /* Fließtext-Grau */
  --bg-light:         #f0edea;  /* warmes Off-White, helle Sektionen */
  --brand-dark:       #188d7d;  /* Markengrün im Hover */
  --grey-fill:        #ececec;  /* Füllfarbe des grauen Buttons */
  --grey-fill-hover:  #dedede;
  --grey-text:        #6b6c6c;  /* dunkleres Grau für Schrift auf Grau */
  --grey-text-hover:  #4a4b4b;
  --brand-deep:       #0f7d6e;  /* dunkles Grün für die Leistungs-Sektion */
  --brand-deep-hover: #0a5a4f;
  --text-body-dark:   #4a5052;  /* Fließtext */
  --card-bg:          #f7f5f2;  /* Kartenfläche */

  /* Verlauf für den oberen Bereich (Nav + Hero) */
  --brand-gradient:   linear-gradient(120deg, #1faf9b 10%, #06f9d0 120%);

  /* Radien */
  --radius:           16px;     /* Standard für Karten und Bildflächen */
  --radius-lg:        32px;     /* großzügiger Radius */
  --radius-xl:        48px;     /* Kontakt-Kacheln */
  --radius-pill:      999px;    /* Pillen-Form für Buttons */
  /* 120px wären bei 390px Bildschirmbreite fast ein Drittel davon — mitskalierend. */
  --radius-section:   clamp(48px, 1.1907rem + 7.4227vw, 120px);  /* Rundung unten rechts an Farbflächen */

  /* Schrift */
  --font-base:        'Hind', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Roboto, Helvetica, Arial, sans-serif;

  /* Typo-Skala — Größenverhältnisse nach Vorbild unilever.com,
     dort live gemessen (H1 66/72, H2 42/48, H3 25/30, Body 18/28).

     Die clamp()-Werte sind so gerechnet, dass bei 1360px Viewport exakt die
     oben genannten Desktopgrößen herauskommen (abgenommener Stand) und bei
     390px die Mobilwerte. Dazwischen wird stufenlos interpoliert.
     Der Mobilwert für H1 ist gemessen: bei 40px kippt eine 29-Zeichen-
     Headline in der 312px-Spalte von drei auf zwei Zeilen. */
  --fs-h1:            clamp(40px, 1.8466rem + 2.6804vw, 66px);
  --fs-h2:            clamp(28px, 1.3982rem + 1.4433vw, 42px);
  --fs-h3:            clamp(21px, 1.2120rem + 0.4124vw, 25px);
  --fs-h4:            clamp(18px, 1.0747rem + 0.2062vw, 20px);
  --fs-h5:            clamp(16px, 0.9749rem + 0.1031vw, 17px);
  --fs-h6:            clamp(14px, 0.8499rem + 0.1031vw, 15px);
  --fs-body:          clamp(16px, 0.9497rem + 0.2062vw, 18px);
  --fs-lead:          clamp(18px, 1.0245rem + 0.4124vw, 22px);
  --fs-eyebrow:       15px;   /* kleine Überzeile über der Headline */

  --lh-heading:       1.09;   /* eng bei großen Headlines */
  --lh-body:          1.56;   /* großzügig im Fließtext */
  --ls-heading:       -0.02em;/* negatives Tracking, hält große Schrift kompakt */

  /* Vertikaler Rhythmus */
  /* Mobil wären 168px rund ein Fünftel der Bildschirmhöhe — daher mitskalierend.
     Der Hero (.scholz-hero) hat eigene Werte und bleibt unberührt: seine
     200px halten das Video unter dem fixierten Header frei. */
  --space-section:    clamp(72px, 2.0876rem + 9.8969vw, 168px);  /* Abstand oben je Sektion */
  --space-block:      32px;
  --container:        1360px;
}

/* --------------------------------------------------------------------------
   2. Grundlagen
   -------------------------------------------------------------------------- */

/* Divi 5 setzt die Schrift per Inline-Style auf :root als
   var(--et_global_heading_font) bzw. var(--et_global_body_font).
   Inline-Styles schlagen jede Stylesheet-Regel, deshalb werden hier Divis
   eigene Variablen belegt statt dagegen anzuschreiben. Das !important ist
   nötig, weil Divis Definition selbst inline auf :root steht. */
:root {
  --et_global_heading_font: var(--font-base) !important;
  --et_global_body_font:    var(--font-base) !important;
}

body,
h1, h2, h3, h4, h5, h6,
.et_pb_module,
input, textarea, select, button {
  font-family: var(--font-base);
}

/* --------------------------------------------------------------------------
   3. Buttons — Pillen-Form (Kundenvorgabe)
   -------------------------------------------------------------------------- */

.et_pb_button,
.et_pb_module .et_pb_button,
input[type="submit"],
button[type="submit"] {
  border-radius: var(--radius-pill);
  padding-left: 2em;
  padding-right: 2em;
}

/* Divi setzt in seinem eigenen, inline generierten Critical-CSS bei Hover
   pauschal border-radius:0 auf jeden .et_pb_button
   (".et_pb_bg_layout_light.et_pb_button:hover, … body .et_pb_button:hover"),
   mit hoher Spezifitaet. Ohne diese Regel wird JEDER Button beim Hover
   eckig — betraf ursprünglich den Hero-Button, tatsächlich aber alle
   Divi-Standard-Buttons auf der Seite (Kontaktformular, Footer-Kontakt,
   Standard-/Fill-/Grau-Variante). Die SLS-Plugin-Module haben dasselbe
   Problem separat in ihrem eigenen CSS gelöst — diese Regel deckt alles
   ab, was NICHT über ein SLS-Modul läuft. */
body .et_pb_button:hover,
body .et_pb_module .et_pb_button:hover,
body input[type="submit"]:hover,
body button[type="submit"]:hover {
  border-radius: var(--radius-pill) !important;
}

/* --------------------------------------------------------------------------
   3b. Typografische Skala

   Divi setzt Schriftgrößen modulweise per Inline-CSS. Damit die Skala
   greift, brauchen die Regeln hier Divi-Selektoren, nicht nur h1/h2.
   -------------------------------------------------------------------------- */

body .et_pb_section h1,
body .et_pb_heading h1,
body h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-weight: 700;
}

body .et_pb_section h2,
body .et_pb_heading h2,
body h2 {
  font-size: var(--fs-h2);
  line-height: 1.14;
  letter-spacing: var(--ls-heading);
  font-weight: 700;
}

body .et_pb_section h3,
body .et_pb_heading h3,
body h3 {
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
}

body .et_pb_section h4,
body .et_pb_heading h4,
body h4 {
  font-size: var(--fs-h4);
  line-height: 1.3;
  font-weight: 700;
}

body .et_pb_section h5,
body h5 { font-size: var(--fs-h5); line-height: 1.4; font-weight: 700; }

body .et_pb_section h6,
body h6 { font-size: var(--fs-h6); line-height: 1.4; font-weight: 700; }

/* Fließtext */
body .et_pb_text,
body .et_pb_text p,
body .et_pb_toggle_content,
body .et_pb_toggle_content p,
body .et_pb_slide_description p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

body .et_pb_text li {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin-bottom: 8px;
}

/* Zitat etwas größer als Fließtext */
body .et_pb_text blockquote p {
  font-size: 21px;
  line-height: 1.5;
}

/* Großzügiger vertikaler Rhythmus wie bei der Referenz */
body .et_pb_section {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

/* Der Hero braucht oben Platz für den fixierten Header (Logo 88px plus
   2 x 40px Padding = 168px) und darunter noch Luft bis zur Headline. */
body .scholz-hero {
  padding-top: 200px !important;
  padding-bottom: 140px !important;
  /* Die grüne Fläche läuft nach rechts unten weich aus. overflow:hidden ist
     nötig, damit die Medien-Pille an der Rundung mit beschnitten wird. */
  border-bottom-right-radius: var(--radius-section);
  overflow: hidden;
}

/* Breiterer Container */
body .et_pb_row {
  max-width: var(--container);
  width: 90%;
}

/* Abstand zwischen den Modulen innerhalb einer Spalte */
body .et_pb_column .et_pb_module {
  margin-bottom: var(--space-block);
}

/* Buttons: Typografie wie die Navigation — Versalien, halbfett, leicht
   gesperrt. */
body .et_pb_button {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-block;
  /* Der Platz für den Pfeil ist von Anfang an reserviert — der Button ändert
     beim Hover seine Maße nicht. Animiert wird nur die Beschriftung per
     transform (siehe unten), das läuft auf der GPU. Eine Animation von
     padding oder text-indent würde bei jedem Frame das Layout neu berechnen
     und sichtbar ruckeln. */
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* Das reservierte Pfeil-Padding gilt nur ab Tablet. Auf dem Telefon (Hover
   gibt es auf Touch nicht) bestimmt der Builder den Innenabstand: bei den
   SLS-Modulen im Modul selbst, beim Formular unter Button > Zwischenraum. Ein
   !important im Stylesheet wuerde diese Einstellungen uebersteuern. */
@media (min-width: 768px) {
  body .et_pb_button {
    padding: calc(0.5em + 1.5px) 3.6em calc(0.5em - 1.5px) 2em !important;
  }
}

/* Die Beschriftung liegt in einem Wrapper, den js/scripts.js einfügt —
   Divi gibt den Buttontext als reinen Textknoten aus. */
body .et_pb_button .scholz-lbl,
.scholz-karte-btn .scholz-lbl {
  display: inline-block;
  transition: transform .3s ease;
  will-change: transform;
}

body .et_pb_button:hover .scholz-lbl,
.scholz-karte-btn:hover .scholz-lbl {
  transform: translateX(-4px);
}

/* --- Button-Varianten -----------------------------------------------------

   Drei Ausprägungen, alle mit identischer Höhe und Pillenform:
   1. Standard (ohne Zusatzklasse): Outline in Markengrün
   2. .scholz-btn-fill:  gefüllt grün, weiße Schrift, keine Outline
   3. .scholz-btn-grey:  helles Grau, dunklere Schrift

   Auf der Musterseite sind sie über die Positionsklassen zugewiesen, weil
   Divi das Setzen eigener CSS-Klassen an Modulen per API nicht übernimmt
   (css.advanced.cssClass greift nicht). Sobald die Klassen im Builder
   vergeben werden, greifen die .scholz-btn-*-Selektoren.
   ------------------------------------------------------------------------- */

body .et_pb_button.scholz-btn-fill,
body .et_pb_button_2.et_pb_button {
  background-color: var(--brand) !important;
  border: 2px solid var(--brand) !important;
  color: #ffffff !important;
}

body .et_pb_button.scholz-btn-fill:hover,
body .et_pb_button_2.et_pb_button:hover {
  background-color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
  color: #ffffff !important;
}

body .et_pb_button.scholz-btn-grey,
body .et_pb_button_3.et_pb_button {
  background-color: var(--grey-fill) !important;
  border: 2px solid var(--grey-fill) !important;
  color: var(--grey-text) !important;
}

body .et_pb_button.scholz-btn-grey:hover,
body .et_pb_button_3.et_pb_button:hover {
  background-color: var(--grey-fill-hover) !important;
  border-color: var(--grey-fill-hover) !important;
  color: var(--grey-text-hover) !important;
}

/* Buttons mittig in ihrer Spalte. Ohne das stehen sie linksbündig, und
   unterschiedliche Textlängen lassen die Abstände ungleich wirken. */
body .et_pb_button_1,
body .et_pb_button_2,
body .et_pb_button_3 {
  display: block;
  width: fit-content;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Der Pfeil sitzt rechts und blendet weich ein */
body .et_pb_button::after {
  right: 1.2em;
  left: auto !important;
  margin-left: 0;
  transition: opacity .3s ease;
}

body .et_pb_button:hover::after {
  opacity: 1;
  right: 1.2em;
  left: auto !important;
}

/* --------------------------------------------------------------------------
   3c. Header und Navigation

   Vorbild unilever.de, dort live vermessen: Pillen-Navigation 52px hoch mit
   Radius 26px (= halbe Höhe), weiß freigestellt auf der Farbfläche, Logo
   links, Menüpunkte 15px halbfett.

   Abweichung von der Referenz auf Kundenwunsch: Der Header bleibt beim
   Scrollen oben stehen, und die Fläche hinter der Navigation wird unscharf
   (backdrop-filter), sodass der Inhalt sichtbar verschwommen darunter
   durchläuft.
   -------------------------------------------------------------------------- */

:root {
  --nav-h:       52px;
  --nav-radius:  26px;
}

/* Header transparent über der Hero-Farbfläche.
   Die !important sind nötig, weil Divis eigenes Header-CSS mit hoher
   Spezifität arbeitet — ohne sie greifen Hintergrund, Radius und Blur nicht. */
#main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 40px 0;
  transition: padding .3s ease, background-color .3s ease;
}

#page-container {
  padding-top: 0 !important;
}

/* Der Header-Container liegt exakt auf der Inhaltsbreite, damit Logo und
   Navigation an denselben Kanten enden wie der Seiteninhalt (Divi-Row). */
#main-header .container {
  width: 80% !important;
  max-width: 1080px !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

/* Logo links. Das SVG bringt keine festen Maße mit und fällt im
   Flex-Container sonst auf wenige Pixel zusammen — daher feste Höhe. */
#main-header .logo_container {
  position: static;
  flex: 0 0 auto;
  width: auto !important;
  height: 88px !important;
  display: flex;
  align-items: center;
}

#main-header #logo {
  height: 88px !important;
  width: auto !important;
  max-height: none !important;
  max-width: none !important;
  min-width: 330px;
}

/* Im Ausgangszustand liegt die Oberkante der Pille bündig mit der Oberkante
   des Schriftzugs "SCHOLZ". Bei 88px Logohöhe beginnt der Schriftzug 29px
   unter der Logo-Oberkante — das Icon ragt darüber hinaus. Der Wert wurde per
   Pixel-Analyse des gerenderten SVG ermittelt; bei geänderter Logohöhe
   entsprechend mitskalieren (29 / 88 = rund 33 %). */
body #main-header:not(.et-fixed-header) .container {
  align-items: flex-start !important;
}

body #main-header:not(.et-fixed-header) #et-top-navigation {
  margin-top: 29px;
}

/* Die Pille: weiß und unscharf auf der Farbfläche */
body #main-header #et-top-navigation {
  /* Divi setzt float:right — das verhindert, dass die Flexbox die Navigation
     an die rechte Inhaltskante schiebt. */
  float: none !important;
  margin-left: auto !important;
  flex: 0 0 auto;
  padding: 0 8px !important;
  background-color: rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
  backdrop-filter: blur(14px) saturate(1.4) !important;
  border-radius: var(--nav-radius) !important;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
  transition: background-color .3s ease, box-shadow .3s ease;
}

#main-header #top-menu-nav,
#main-header #top-menu {
  height: 100%;
  display: flex;
  align-items: center;
}

#main-header #top-menu li {
  padding-right: 0;
  margin: 0 4px;
}

#main-header #top-menu li a {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand) !important;
  padding: 10px 18px;
  border-radius: var(--nav-radius);
  transition: background-color .2s ease, color .2s ease;
  opacity: 1;
}

#main-header #top-menu li a:hover {
  background-color: var(--brand) !important;
  color: #ffffff !important;
  opacity: 1;
}

/* Der Abschnitt, der gerade im Blick ist. Gefuellt wie der Hover, aber in
   einem helleren Gruen — so bleibt erkennbar, wo man steht, ohne mit dem
   Hover-Zustand zu konkurrieren. */
#main-header #top-menu li.scholz-aktiv > a {
  background-color: rgba(31, 175, 155, 0.16) !important;
  color: var(--brand-deep) !important;
}

/* Der Hover gewinnt immer — auch auf dem aktiven Punkt. */
#main-header #top-menu li.scholz-aktiv > a:hover {
  background-color: var(--brand) !important;
  color: #ffffff !important;
}

/* Das Logo federt beim Hover wie die Menuepunkte — dieselbe Kurve, deren
   Wert ueber 1 den Ueberschwinger erzeugt. */
#main-header #logo {
  transition: height .4s ease-in-out, transform .42s cubic-bezier(.34, 1.56, .64, 1);
  transform-origin: left center;
  will-change: transform;
}

#main-header .logo_container:hover #logo {
  transform: scale(1.08);
}

/* Gummiband-Effekt: Der Menüpunkt unter der Maus wird etwas größer, seine
   Nachbarn weichen aus — der direkte Nachbar stärker, der übernächste
   schwächer. Die Federung kommt aus der cubic-bezier-Kurve, deren Wert über
   1 einen Überschwinger erzeugt. */
#main-header #top-menu li {
  transition: transform .42s cubic-bezier(.34, 1.56, .64, 1);
  will-change: transform;
}

#main-header #top-menu li:hover {
  transform: scale(1.10);
}

#main-header #top-menu li:hover + li {
  transform: translateX(9px);
}

#main-header #top-menu li:has(+ li:hover) {
  transform: translateX(-9px);
}

#main-header #top-menu li:hover + li + li {
  transform: translateX(4px);
}

#main-header #top-menu li:has(+ li + li:hover) {
  transform: translateX(-4px);
}

/* Divi-Suchlupe ausblenden — nicht Teil des Entwurfs */
#main-header #et_top_search {
  display: none;
}

/* Gescrollter Zustand: kompakte, milchige Leiste über die volle Breite.
   Die !important sind hier nötig, weil die Regeln des Ausgangszustands
   (Logo 88px) selbst mit !important gesetzt sind. */
/* Milchglas statt bloss unscharf: Ein Weichzeichner allein wirkt glatt und
   flaechig. Erst eine feine Koernung und ein schraeger Lichtverlauf lassen
   die Leiste wie mattiertes Glas erscheinen. */
#main-header.et-fixed-header {
  padding: 12px 0 !important;
  background-color: rgba(255, 255, 255, 0.62) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) brightness(1.06);
  backdrop-filter: blur(20px) saturate(1.5) brightness(1.06);
  box-shadow: 0 1px 16px rgba(0, 0, 0, 0.08) !important;
}

/* Koernung: ein Rauschen aus einem SVG-Filter, als Data-URI eingebettet.
   soft-light legt es weich ueber den Untergrund, ohne ihn aufzuhellen. */
#main-header.et-fixed-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.62'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

/* Lichtverlauf schraeg ueber die Flaeche — gibt dem Glas Tiefe. */
#main-header.et-fixed-header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0.34) 0%,
    rgba(255, 255, 255, 0.06) 34%,
    rgba(255, 255, 255, 0.22) 58%,
    rgba(255, 255, 255, 0.02) 100%);
}

/* Der Inhalt liegt ueber beiden Ebenen. */
#main-header.et-fixed-header .container {
  position: relative;
  z-index: 1;
}

/* Logo und Navigation schrumpfen mit, sonst wirkt die Leiste zu wuchtig */
#main-header.et-fixed-header .logo_container {
  height: 46px !important;
}

#main-header.et-fixed-header #logo {
  height: 46px !important;
  min-width: 172px !important;
  opacity: 0 !important;
}

body #main-header.et-fixed-header #et-top-navigation {
  height: 46px;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

#main-header.et-fixed-header #top-menu li a {
  padding: 9px 17px;
  font-size: 15px;
}

/* Logo wechselt auf die Positiv-Variante, sonst weiß auf weiß.
   Der naheliegende content-Tausch am img rendert bei SVG nicht zuverlässig —
   deshalb wird das Positiv-Logo als Hintergrund des Containers eingeblendet
   und das weiße img darüber ausgeblendet. */
#main-header.et-fixed-header .logo_container {
  background-image: url('/wp-content/uploads/2026/09/SCHOLZ-Life-Sience_lang_positiv.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

/* Mobil */
#main-header .mobile_menu_bar:before {
  color: var(--brand);
}

@media (max-width: 980px) {
  /* Ohne flex:1 1 auto schrumpft der Nav-Container durch flex:0 0 auto auf
     Burgerbreite (56px). Das Aufklappmenue haengt daran und die Menuepunkte
     brechen dann nach jedem Wort um. */
  body #main-header #et-top-navigation {
    height: auto;
    padding: 0 !important;
    flex: 1 1 auto;
    justify-content: flex-end;
  }
  #main-header #logo { min-width: 140px; height: 36px !important; }

  /* ---- Zustand 1: oben nur das Sandwichmenue, ohne Hintergrund ----------
     Die Pille aus der Desktopfassung entfaellt mobil komplett; das Icon steht
     weiss auf der gruenen Hero-Flaeche. */
  body #main-header:not(.et-fixed-header) #et-top-navigation {
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    margin-top: 0 !important;
  }
  body #main-header:not(.et-fixed-header) .container {
    align-items: center !important;
  }
  body #main-header:not(.et-fixed-header) .mobile_menu_bar:before {
    color: #ffffff !important;
  }

  /* ---- Zustand 2: beim Scrollen die Milchglasleiste --------------------
     Die Glasflaeche selbst kommt aus dem gemeinsamen .et-fixed-header-Block
     weiter oben. Divi setzt den Header mobil auf position:absolute, dadurch
     scrollt er weg und die Leiste erschiene nie — deshalb hier wieder fixed.
     Logo und Burger bleiben sichtbar, beide in der dunklen Variante, weil
     Weiss auf dem hellen Glas verschwindet. */
  .et_fixed_nav #main-header { position: fixed !important; }

  #main-header.et-fixed-header #logo { opacity: 0 !important; }
  #main-header.et-fixed-header .logo_container {
    background-image: url('/wp-content/uploads/2026/09/SCHOLZ-Life-Sience_lang_positiv.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
  }
  body #main-header.et-fixed-header #et-top-navigation {
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
  body #main-header.et-fixed-header .mobile_menu_bar:before {
    color: var(--brand);
  }

  /* ---- Ausrichtung des Burgers --------------------------------------
     Divi gibt dem Icon padding-bottom:24px bei line-height:0 — dadurch haengt
     es 12px ueber der Mitte seiner eigenen Box. Padding raus, Box auf
     Icongroesse, Inhalt zentriert.

     Danach steht der Burger zwar auf der geometrischen Mitte, wirkt aber immer
     noch zu hoch: Im Logo ragt das Tropfen-Icon oben ueber den Schriftzug
     hinaus, dessen Mitte liegt 21,3 von 172,2 viewBox-Einheiten tiefer als die
     Boxmitte. Bezug ist der Schriftzug, nicht die Box — daher die Korrektur,
     umgerechnet auf die jeweilige Logohoehe (36px oben, 46px in der Leiste). */
  #main-header .mobile_menu_bar_toggle {
    padding: 0 !important;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #main-header .mobile_nav { display: flex; align-items: center; }

  #main-header:not(.et-fixed-header) .mobile_menu_bar_toggle {
    transform: translateY(5.9px);   /* 21,3 / 172,2 * 48 */
  }
  #main-header.et-fixed-header .mobile_menu_bar_toggle {
    transform: translateY(5.7px);   /* 21,3 / 172,2 * 46 */
  }

  /* ---- Zustand 3: geoeffnet wird der Burger zum X ----------------------
     Divi wechselt beim Klick .closed gegen .opened auf .mobile_nav.
     "M" ist das Schliesskreuz in Divis Icon-Font, "a" der Burger. */
  #main-header .mobile_nav.opened .mobile_menu_bar_toggle:before {
    content: "M";
  }
  #main-header .mobile_menu_bar_toggle:before {
    transition: color .25s ease;
  }

  /* Das Pillenmenue oben setzt display:flex ohne Breakpoint und schlaegt damit
     Divis eigenes #top-menu{display:none}. Ohne diese Regel bleibt das
     Desktopmenue mobil stehen, liegt neben dem Burger und zieht das Dokument
     auf 737px Breite — die Seite laesst sich dann seitlich schieben. */
  #main-header #top-menu-nav,
  #main-header #top-menu { display: none; }

  #main-header #et_mobile_nav_menu { margin-left: auto; }

  #main-header .et_mobile_menu {
    top: calc(100% + 8px);
    border-radius: var(--radius);
    overflow: hidden;
    /* Divi setzt oben eine 3px-Linie in seinem Akzentblau (#2ea3f2) — die
       passt nicht zur Marke und sitzt quer auf der gerundeten Ecke.
       Statt der Linie hebt ein weicher Schatten die Flaeche ab. */
    border-top: none;
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.16),
      0 2px 8px rgba(0, 0, 0, 0.08);
  }
}

/* --------------------------------------------------------------------------
   3f-2. Leistungskachel als Divi-Module (Baustein SLS_Leistungen)

   Dieselbe Optik wie die Kacheln oben, aber aus echten Divi-Modulen statt
   einem Code-Block — damit der Kunde Bild, Titel, Text und Button über die
   normale Builder-Oberfläche pflegt. Farben, Schriftgrößen, Radien und
   Abstände sitzen als Attribute an den Modulen; hier steht nur, was Divi
   über Modulfelder nicht abbilden kann.
   -------------------------------------------------------------------------- */

/* Spalte als Flex-Säule, damit der Button unten andocken kann. */
.sls-karte {
  display: flex;
  flex-direction: column;
}

/* Der Button sitzt in einem eigenen Divi-Wrapper — margin-top und der seitliche
   Abstand gehören an diesen, nicht an den Button selbst: am Button würde das
   Padding die Pillenform aufblähen statt den Button einzurücken. 32px = gleiche
   Fluchtlinie wie Titel und Fließtext. */
.sls-karte .et_pb_button_module_wrapper {
  margin-top: auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* Divi rundet jedes Bild mit --radius (Abschnitt 3d). In der Kachel trägt
   der Bildcontainer die Kontur, das Bild selbst muss eckig bleiben —
   sonst liegen zwei Rundungen übereinander. */
.sls-karte .scholz-karte-bild img {
  border-radius: 0;
}

/* Vorgabe Fabian (21.09.2026): Im Bild sollen alle vier Radien gleich sein —
   die große Rundung unten rechts trägt nur noch die Kachel selbst. */
.sls-karte .scholz-karte-bild {
  border-radius: 24px !important;
}

/* Alle Kachel-Buttons gefüllt in Markengrün — wie die Original-Kacheln
   (.scholz-karte-btn). Ohne das erben sie über .et_pb_button_1/2/3 die drei
   verschiedenen Varianten aus Abschnitt 3b. */
.sls-karte .et_pb_button_module_wrapper .et_pb_button {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #ffffff !important;
}

.sls-karte .et_pb_button_module_wrapper .et_pb_button:hover {
  background-color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
}

/* Vorgabe Fabian (21.09.2026): Buttons linksbündig auf einer Linie mit dem
   Text. Die Regel in Abschnitt 3b zentriert .et_pb_button_1/2/3 — das wird
   hier für die Kacheln aufgehoben, damit alle drei gleich stehen. */
.sls-karte .et_pb_button_module_wrapper .et_pb_button {
  display: block;
  width: fit-content;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Abstände wie im Original (Abschnitt 3f): Divi gibt jedem Modul 32px
   Abstand nach unten — in der Kachel sind es 24px unter dem Bild, 12px unter
   dem Titel und 28px unter dem Text. */
.sls-karte .scholz-karte-bild {
  margin-bottom: 24px !important;
}

.sls-karte .scholz-karte-titel {
  padding-top: 0 !important;
  margin-bottom: 12px !important;
}

.sls-karte .scholz-karte-inhalt {
  margin-bottom: 28px !important;
}

/* Bildausschnitt wie im Original: 16:10, formatfüllend. */
.sls-karte .scholz-karte-bild .et_pb_image_wrap {
  display: block;
  aspect-ratio: 16 / 10;
}

.sls-karte .scholz-karte-bild .et_pb_image_wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* --------------------------------------------------------------------------
   3c-2  Farbverlaeufe der grossen gruenen Flaechen

   Oben wird das Gruen zur oberen rechten Ecke hin heller, unten zur unteren
   rechten. Beide Verlaeufe sind bewusst flach gehalten — sie sollen die
   Flaeche beleben, nicht als Farbwechsel auffallen.
   -------------------------------------------------------------------------- */

body .et_pb_section:nth-of-type(1) {
  background-color: transparent !important;
  background-image: linear-gradient(to top right, var(--brand) 45%, #2fc9b3 100%) !important;
}

/* Kontakt und Footer bilden unten eine durchgehende gruene Flaeche mit
   langsam wanderndem Farbverlauf.

   Ein Verlauf laesst sich nicht direkt animieren. Bewegt wird stattdessen
   die Position eines Verlaufs, der groesser ist als seine Flaeche
   (background-size 260%) — die Flaeche selbst bleibt unbewegt, deshalb
   koennen keine Kanten ins Bild wandern und die Seitenhoehe bleibt
   unberuehrt. Der frueher versuchte Weg ueber transform verschiebt die
   ganze Ebene und zeigte genau diese Probleme.

   Wichtig: background-image, -size und -position duerfen KEIN !important
   tragen — solche Deklarationen gewinnen gegen Animationen, die Bewegung
   bliebe stehen. */
body .et_pb_section#contact {
  background-color: transparent !important;
  background-image: none !important;
  overflow: visible !important;
}

body .et_pb_section#contact::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--verlauf-hoehe, 1700px);
  pointer-events: none;
  z-index: -2;
  background-image: linear-gradient(135deg,
    #0f7d6e 0%,
    #17957f 22%,
    #26bda6 42%,
    #3fd4bb 55%,
    #26bda6 70%,
    #17957f 85%,
    #0f7d6e 100%);
  background-size: 260% 260%;
  background-repeat: no-repeat;
  animation: scholzVerlauf 24s ease-in-out infinite alternate;
}

/* Der Footer malt KEINEN eigenen Verlauf. Bei gleicher Prozentgroesse, aber
   anderer Bezugshoehe (Kontakt ~975px, Footer ~605px) laeuft derselbe
   Verlauf dort steiler und trifft an der Sektionsgrenze auf eine andere
   Farbe — sichtbar als Kante. Die Ebene der Kontakt-Sektion reicht ueber
   beide hinweg, ihre Hoehe misst scripts.js. */
body .et_pb_section:has(.scholz-footer) {
  background-color: transparent !important;
  background-image: none !important;
}

@keyframes scholzVerlauf {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

body .et_pb_section#contact > .et_pb_row {
  position: relative;
  z-index: 1;
}

/* Die Rundung zwischen beiden wuerde auf durchgehendem Gruen als helle
   Kerbe erscheinen. */
body .et_pb_section#contact {
  border-bottom-right-radius: 0 !important;
  /* Enger an den Footer geruecken; der Grundwert von 168px liess das
     Formular zu weit oben stehen. */
  padding-bottom: 110px !important;
}

/* Der helle Block bleibt hell und hebt sich vom gruenen Grund ab; beide
   oberen Ecken gleich gerundet (Kundenvorlage).

   Der Schatten waechst beim Heranscrollen: scripts.js setzt --schatten von
   0 auf 1, waehrend der Footer ins Bild kommt. */
.scholz-footer-hell {
  background: #f5f4f2 !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  box-shadow:
    0 calc(-14px * var(--schatten, 1))
      calc(46px * var(--schatten, 1))
      rgba(0, 0, 0, calc(0.20 * var(--schatten, 1)));
}

.scholz-footer-teilen {
  box-shadow:
    0 calc(6px * var(--schatten, 1))
      calc(20px * var(--schatten, 1))
      rgba(0, 0, 0, calc(0.22 * var(--schatten, 1)));
}

/* Der Fussbereich behaelt sein dunkles Gruen — er trennt die Rechtslinks
   sichtbar vom Rest ab. Nur der helle Block darueber wird transparent,
   damit der Verlauf durchlaeuft. Die Rundung sass zuvor an der Sektion;
   die traegt jetzt den Verlauf, also gehoert sie an diesen Block. */
.scholz-footer-dunkel {
  background: #123f38 !important;
  border-radius: 0 !important;
}

/* Nur die Kontakt-Sektion liegt auf Gruen — der helle Block behaelt seine
   urspruenglichen Farben. */
#contact h1,
#contact h2,
#contact h3,
#contact .et_pb_module_header,
#contact .et_pb_contact_main_title {
  color: #ffffff !important;
}

#contact p,
#contact .et_pb_text_inner {
  color: rgba(255, 255, 255, 0.88) !important;
}

#contact .et_pb_contact_form_label {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Eingabefelder bleiben hell, damit Getipptes lesbar ist. */
#contact .input,
#contact textarea.et_pb_contact_message {
  background-color: rgba(255, 255, 255, 0.92) !important;
  color: var(--text-body-dark) !important;
  border: none !important;
}

#contact .input::placeholder,
#contact textarea::placeholder {
  color: var(--grey-text) !important;
}

#contact .et_pb_button,
#contact .et_pb_contact_submit {
  background-color: #ffffff !important;
  color: var(--brand-deep) !important;
  border-color: #ffffff !important;
}

#contact .et_pb_contact_captcha_question {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* --------------------------------------------------------------------------
   3d. Hero

   Aufbau: angeschnittene Pille mit Video oben, darunter linksbündig die
   Headline. Die Pille ist rechts bündig am Viewport-Rand und links gerundet,
   sie läuft also rechts aus dem Bild heraus.
   -------------------------------------------------------------------------- */

/* Alle Headlines linksbündig */
body .et_pb_section h1,
body .et_pb_section h2,
body .et_pb_section h3,
body .et_pb_section h4,
body .et_pb_section h5,
body .et_pb_section h6 {
  text-align: left;
}

/* Die Medien-Pille bricht links aus der Row aus: Sie beginnt bündig am
   linken Fensterrand und endet an der rechten Inhaltskante, wo sie
   halbrund ausläuft. */
.scholz-hero-media {
  position: relative;
  /* Startet an der linken Inhaltskante und läuft bis zum rechten
     Fensterrand: Elternbreite plus die Hälfte des Abstands zum Viewport. */
  width: calc(100% + (50vw - 50%));
  margin-left: calc(-1 * (50vw - 50%));
  margin-bottom: 12px;
  aspect-ratio: 24 / 8;
  overflow: hidden;
  border-radius: 0 999px 999px 0;
  background: rgba(255, 255, 255, 0.12);
}

/* Das Poster-Bild trägt die Fläche, falls das Video nicht abspielt */
.scholz-hero-media video {
  background-size: cover;
  background-position: center;
}

.scholz-hero-media video,
.scholz-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Das Code-Modul selbst darf nicht beschneiden und bringt keinen
   zusätzlichen Abstand mit — der Abstand kommt von der Pille. */
.scholz-hero .et_pb_code {
  overflow: visible;
  margin-bottom: 0 !important;
}

@media (max-width: 980px) {
  .scholz-hero-media {
    width: calc(100% + (50vw - 50%));
    margin-left: calc(-1 * (50vw - 50%));
    margin-bottom: 48px;
    aspect-ratio: 16 / 9;
    border-radius: 0 999px 999px 0;
  }
}

@media (max-width: 767px) {
  .scholz-hero-media {
    aspect-ratio: 4 / 3;
    /* Rechts als volle Pille (Halbkreis), links eckig — das Video laeuft
       dort aus dem Bild. Wie auf Desktop; 999px begrenzt der Browser
       automatisch auf die halbe Hoehe, das bleibt also bei jeder
       Videohoehe ein sauberer Halbkreis. */
    border-radius: 0 999px 999px 0;
    /* plus 18px Spalten-Gap = 28px bis zur Headline */
    margin-bottom: 10px;
  }
}

/* --------------------------------------------------------------------------
   3e. Formensprache: alles rundet

   Gestalterische Grundregel des Projekts: Flächen, Bilder, Karten und
   Formularfelder haben runde Ecken. Farbige Hintergrundflächen (Sektionen)
   runden dabei immer unten rechts aus.
   -------------------------------------------------------------------------- */

/* Alle Sektionen runden unten rechts aus — das ist die durchgängige
   Formensprache der Seite, unabhängig von der Hintergrundfarbe.
   overflow:hidden ist nötig, damit Inhalte an der Rundung mit beschnitten
   werden (etwa die Medien-Pille im Hero). */
body .et_pb_section {
  position: relative;
  border-bottom-right-radius: var(--radius-section);
  overflow: hidden;
}

/* Ohne Überlappung bliebe die Rundung unsichtbar: Die folgende Sektion
   liegt lückenlos an und füllt die ausgesparte Ecke sofort wieder auf.
   Deshalb rutscht jede Sektion um den Radius nach oben unter die vorherige
   — das Padding gleicht die Verschiebung wieder aus. */
body .et_pb_section + .et_pb_section {
  margin-top: calc(-1 * var(--radius-section));
  padding-top: calc(var(--space-section) + var(--radius-section)) !important;
}

/* Die Stapelreihenfolge muss umgekehrt werden: Ohne z-index liegt die im
   Quelltext spätere Sektion oben und verdeckt die Rundung der vorherigen.
   Absteigende Werte sorgen dafür, dass jede Sektion UNTER ihrer Vorgängerin
   liegt. Reicht für bis zu 20 Sektionen. */
body .et_pb_section:nth-of-type(1)  { z-index: 20; }
body .et_pb_section:nth-of-type(2)  { z-index: 19; }
body .et_pb_section:nth-of-type(3)  { z-index: 18; }
body .et_pb_section:nth-of-type(4)  { z-index: 17; }
body .et_pb_section:nth-of-type(5)  { z-index: 16; }
body .et_pb_section:nth-of-type(6)  { z-index: 15; }
body .et_pb_section:nth-of-type(7)  { z-index: 14; }
body .et_pb_section:nth-of-type(8)  { z-index: 13; }
body .et_pb_section:nth-of-type(9)  { z-index: 12; }
body .et_pb_section:nth-of-type(10) { z-index: 11; }
body .et_pb_section:nth-of-type(11) { z-index: 10; }
body .et_pb_section:nth-of-type(12) { z-index: 9; }
body .et_pb_section:nth-of-type(13) { z-index: 8; }
body .et_pb_section:nth-of-type(14) { z-index: 7; }
body .et_pb_section:nth-of-type(15) { z-index: 6; }
body .et_pb_section:nth-of-type(16) { z-index: 5; }
body .et_pb_section:nth-of-type(17) { z-index: 4; }
body .et_pb_section:nth-of-type(18) { z-index: 3; }
body .et_pb_section:nth-of-type(19) { z-index: 2; }
body .et_pb_section:nth-of-type(20) { z-index: 1; }

/* Bilder und Medienflächen */
body .et_pb_image img,
body .et_pb_main_blurb_image img,
body .et_pb_slide_image img,
body .et_pb_gallery_image img,
body .et_pb_team_member_image img {
  border-radius: var(--radius);
}

/* Karten, Aufklapper, Akkordeon */
body .et_pb_toggle,
body .et_pb_accordion .et_pb_toggle,
body .et_pb_pricing_table,
body .et_pb_testimonial,
body .et_pb_cta,
body .et_pb_blurb .et_pb_blurb_content,
body .et_pb_tabs {
  border-radius: var(--radius);
}

/* Formularfelder. Divi setzt hier .et_pb_contact .et_pb_contact_field input
   mit 0px — der Selektor unten muss mindestens gleich spezifisch sein. */
body .et_pb_contact .et_pb_contact_field input,
body .et_pb_contact .et_pb_contact_field textarea,
body .et_pb_contact .et_pb_contact_field select,
body .et_pb_contact_form input,
body .et_pb_contact_form textarea,
body .et_pb_newsletter_form input,
body .et_pb_searchform input {
  border-radius: var(--radius) !important;
}

/* Slider und Video */
body .et_pb_slider,
body .et_pb_video,
body .et_pb_video_box,
body .et_pb_code iframe {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Trenner behalten runde Enden */
body .et_pb_divider .et_pb_divider_internal,
body .et_pb_space {
  border-radius: var(--radius-pill);
}

body .et_pb_divider:before {
  border-radius: var(--radius-pill);
}

/* --------------------------------------------------------------------------
   3f. Textfarben

   H1 bis H3 tragen die Markenfarbe, H4 bis H6 treten in Hellgrau zurück,
   der Fließtext steht in einem weichen Anthrazit.
   -------------------------------------------------------------------------- */

body .et_pb_section h1,
body .et_pb_section h2,
body .et_pb_section h3 {
  color: var(--brand);
}

body .et_pb_section h4,
body .et_pb_section h5,
body .et_pb_section h6 {
  color: var(--text-body);
}

body .et_pb_text,
body .et_pb_text p,
body .et_pb_text li,
body .et_pb_toggle_content,
body .et_pb_toggle_content p {
  color: var(--text-body-dark);
}

/* Der Hero steht auf Farbe und bleibt weiß */
body .scholz-hero h1,
body .scholz-hero h2,
body .scholz-hero h3,
body .scholz-hero .et_pb_text p {
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   3g. Listen

   Aufzählungspunkt und Nummer tragen die Markenfarbe, die Nummer zusätzlich
   größer und fett. Divis eigene Listenpunkte werden dafür abgeschaltet und
   durch Pseudo-Elemente ersetzt.
   -------------------------------------------------------------------------- */

body .et_pb_text ul {
  list-style: none;
  padding-left: 1.6em;
}

body .et_pb_text ul li {
  position: relative;
}

body .et_pb_text ul li::before {
  content: "•";
  position: absolute;
  left: -1.1em;
  color: var(--brand);
  font-size: 1.4em;
  line-height: 1.1;
}

body .et_pb_text ol {
  list-style: none;
  counter-reset: scholz-liste;
  padding-left: 2.1em;
}

body .et_pb_text ol li {
  position: relative;
  counter-increment: scholz-liste;
}

body .et_pb_text ol li::before {
  content: counter(scholz-liste) ".";
  position: absolute;
  left: -2.1em;
  color: var(--brand);
  font-weight: 700;
  font-size: 1.25em;
  line-height: 1.25;
}

/* --------------------------------------------------------------------------
   3h. Links: Unterstrich wächst beim Hover von links nach rechts
   -------------------------------------------------------------------------- */

/* Gilt fuer alle Textlinks — Fliesstext, Aufklapper, Kartentitel, Footer.
   Ausgenommen sind Navigation und Buttons: Die Navigation hat ihren
   Gummiband-Effekt, die Buttons ihre eigene Hover-Gestaltung. Icon-Links
   ohne Text sind ebenfalls ausgenommen, dort waere eine Linie sinnlos. */
body .et_pb_section a:not([class*="et_pb_button"]):not(.scholz-karte-btn),
body .scholz-footer-links a {
  position: relative;
  text-decoration: none;
}

body .et_pb_text a,
body .et_pb_toggle_content a,
body .sls_textblock a {
  color: var(--brand);
}

body .et_pb_section a:not([class*="et_pb_button"]):not(.scholz-karte-btn)::after,
body .scholz-footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* Dicht unter der Schrift und nur ein Pixel stark. */
  bottom: 4px;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .32s ease;
}

body .et_pb_section a:not([class*="et_pb_button"]):not(.scholz-karte-btn):hover::after,
body .scholz-footer-links a:hover::after {
  transform: scaleX(1);
}

/* Icon-Links tragen keinen Text, unter dem eine Linie sitzen koennte.
   Die Selektoren brauchen dieselbe Spezifitaet wie die Grundregel oben,
   sonst gewinnt diese. */
body .et_pb_section .scholz-footer-social a::after,
body .et_pb_section .scholz-footer-teilen a::after,
body .scholz-footer-social a::after,
body .scholz-footer-teilen a::after {
  display: none;
}

/* Die Kartentitel sind mit 25px deutlich groesser als der Fliesstext —
   dort traegt die Linie entsprechend kraeftiger. */
/* :not() zaehlt bei der Spezifitaet mit — die Grundregel oben traegt zwei
   solcher Pseudoklassen und gewinnt sonst gegen diese hier. */
body .et_pb_section .scholz-karten .scholz-karte-text h3 a::after {
  height: 2px;
  bottom: 2px;
}

/* --------------------------------------------------------------------------
   3i. Zweispaltiger Fließtext

   Ein durchlaufender Text über zwei Spalten. Mit zwei Divi-Spalten wären es
   zwei getrennte Texte — deshalb CSS-Spalten.
   -------------------------------------------------------------------------- */

.scholz-zweispaltig {
  column-count: 2;
  column-gap: 56px;
}

.scholz-zweispaltig p {
  margin: 0;
}

@media (max-width: 767px) {
  .scholz-zweispaltig { column-count: 1; }
}

/* --------------------------------------------------------------------------
   3j. Leistungs-Karten

   Bild oben, darunter die helle Textfläche mit Überschrift, Text und Button.
   Die Karten sind gleich hoch, dadurch stehen die Buttons auf einer Linie.
   -------------------------------------------------------------------------- */

.scholz-karten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
  align-items: stretch;
}

/* Die Karte ist eine durchgehende Fläche mit großer Rundung unten rechts.
   Das Bild trägt dieselbe Kontur, dadurch wirken Bild und Karte als eine
   Form — so wie in der Layout-Vorlage. */
.scholz-karte {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--card-bg);
  border-radius: 24px 24px 72px 24px;
  overflow: hidden;
}

.scholz-karte-bild {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 24px 24px 72px 24px;
}

.scholz-karte-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Die Textfläche liegt innerhalb der Karte und trägt daher weder eigenen
   Hintergrund noch eigene Rundung. */
.scholz-karte-text {
  padding: 24px 32px 36px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.scholz-karte-text h3 {
  margin: 0 0 12px;
  font-size: 25px;
  line-height: 1.2;
}

/* Kein fester Unterstrich mehr — die Linie waechst beim Hover ein wie bei
   allen anderen Textlinks (Abschnitt 3h). */
.scholz-karte-text h3 a {
  color: var(--brand-deep) !important;
  text-decoration: none;
}

.scholz-karte-text h3 a:hover {
  color: var(--brand-deep-hover) !important;
}

.scholz-karte-text p {
  margin: 0 0 28px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-body-dark);
  flex: 0 0 auto;
}

/* Der Button dockt unten an — dadurch stehen alle Buttons auf einer Linie.
   Maße und Verhalten entsprechen exakt dem gefüllten Divi-Button
   (.scholz-btn-fill), damit die Seite eine einheitliche Buttonsprache hat:
   47px hoch, 16px Schrift, 2px Rahmen, Pfeil beim Hover. */
.scholz-karte-btn {
  margin-top: auto;
  align-self: flex-start;
  display: inline-block;
  position: relative;
  text-align: center;
  /* Platz für den Pfeil ist von Anfang an reserviert (siehe .et_pb_button). */
  padding: calc(0.5em + 1.5px) 3.6em calc(0.5em - 1.5px) 2em;
  line-height: 27.2px;
  background: var(--brand);
  border: 2px solid var(--brand);
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: background-color .3s ease, border-color .3s ease;
}

.scholz-karte-btn:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

/* Pfeil aus Divis Icon-Font, damit er identisch zu den Divi-Buttons ist */
.scholz-karte-btn::after {
  content: "5";
  font-family: ETmodules;
  position: absolute;
  right: 1.2em;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  font-size: 1.2em;
  font-weight: 400;
  letter-spacing: 0;
  transition: opacity .3s ease;
}

.scholz-karte-btn:hover::after {
  opacity: 1;
}

@media (max-width: 980px) {
  .scholz-karten {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}



/* Die Leistungs-Sektion steht auf dunklem Grün.
   Angesprochen über die eigene Klasse .scholz-leistungen (am Sektionsmodul
   gesetzt) — Positionsklassen wie .et_pb_section_4 brechen, sobald sich die
   Reihenfolge ändert oder der Baustein auf einer anderen Seite steht. */
body .scholz-leistungen {
  background-color: var(--brand-deep) !important;
}

body .scholz-leistungen h1,
body .scholz-leistungen h2,
body .scholz-leistungen h3 {
  color: #ffffff !important;
}

body .scholz-leistungen .et_pb_text:not(.scholz-karte-inhalt),
body .scholz-leistungen .et_pb_text:not(.scholz-karte-inhalt) p {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* In den Kacheln steht der Text auf heller Fläche und bleibt dunkel —
   die weiße Schrift oben gilt nur für die grüne Sektionsfläche selbst. */
body .scholz-leistungen .sls-karte .scholz-karte-inhalt,
body .scholz-leistungen .sls-karte .scholz-karte-inhalt p {
  color: var(--text-body-dark) !important;
}

/* Drei mdg-SLS_Leistung-Kacheln nebeneinander gleich hoch, unabhängig von
   unterschiedlich langem Titel/Text. Divis Flex-Row streckt ihre Spalten
   zwar meist von selbst (align-items:stretch ist ihr Default), hier zur
   Sicherheit erzwungen — die Höhe wird über die Spalte bis ins Modul
   durchgereicht (siehe sls_leistung { height:100% } im Plugin-CSS). */
body .scholz-leistungen .et_pb_row {
  align-items: stretch;
}

body .scholz-leistungen .et_pb_column {
  display: flex;
  align-items: stretch;
}

body .scholz-leistungen .et_pb_column > .sls_leistung {
  width: 100%;
}

/* --------------------------------------------------------------------------
   3k. Parallax-Bereich

   Das Hintergrundbild bleibt beim Scrollen stehen, der Inhalt zieht darüber
   hinweg. Umgesetzt wie auf unilever.de: position:fixed am Bild, begrenzt
   durch clip-path am Container. background-attachment:fixed wäre die
   naheliegende Lösung, wird auf iOS aber nicht unterstützt.
   -------------------------------------------------------------------------- */

.scholz-parallax {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  margin: 0;
  /* Der Block füllt die Sektion über die volle Breite; der Innenabstand
     hält den Inhalt auf der Spaltenbreite der übrigen Seite. */
  /* 240px = 120px Innenabstand plus 120px Ausgleich für die
     Sektions-Überlappung */
  padding: 240px calc((100vw - 1080px) / 2);
  overflow: hidden;
  isolation: isolate;
  /* Begrenzt das fixierte Bild auf diesen Container und übernimmt dabei die
     Rundung unten rechts, damit sie auch für das Bild gilt. */
  clip-path: inset(0 round 0 0 var(--radius-section) 0);
}

/* Die Sektion um den Parallax-Block trägt weder Padding, Hintergrund noch
   eigene Spaltenbreite — der Block übernimmt alles selbst und gleicht dabei
   die 120px-Überlappung der Sektionen mit aus (siehe padding oben/unten).
   Ohne das entstünde über dem Bereich eine weiße Fläche von 288px.
   Der doppelte Selektor ist nötig, um die allgemeine Sektionsregel
   (.et_pb_section + .et_pb_section) zu überstimmen. */
body .et_pb_section.scholz-parallax-sektion,
body .et_pb_section + .et_pb_section.scholz-parallax-sektion {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background-color: transparent !important;
}

body .scholz-parallax-sektion .et_pb_row {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body .scholz-parallax-sektion .et_pb_column,
body .scholz-parallax-sektion .et_pb_code {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.scholz-parallax-bild {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  z-index: -1;
}

/* Dezenter Schleier, damit die Schrift auf jedem Bildmotiv lesbar bleibt.
   Neutrales Schwarz statt Markenfarbe — so behält das Foto seine eigenen
   Farben. 42 % sind der Kompromiss zwischen Bildwirkung und Kontrast. */
.scholz-parallax::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  z-index: 0;
}

.scholz-parallax-inhalt {
  position: relative;
  z-index: 1;
  max-width: 620px;
}

.scholz-parallax-inhalt h2 {
  color: #ffffff !important;
  margin: 0 0 20px;
}

.scholz-parallax-inhalt p {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 18px;
  line-height: 1.56;
  margin: 0 0 28px;
}

@media (max-width: 1200px) {
  .scholz-parallax {
    padding-left: 5vw;
    padding-right: 5vw;
  }
}

@media (max-width: 767px) {
  .scholz-parallax {
    min-height: 420px;
    padding: 192px 5vw;
  }
}

/* --------------------------------------------------------------------------
   3l. Aufklapper (Toggle und Akkordeon)
   -------------------------------------------------------------------------- */

body .et_pb_toggle,
body .et_pb_accordion .et_pb_toggle {
  /* oben rechts bewusst nur minimal gerundet */
  border-radius: 24px 5px 24px 24px !important;
  border: none !important;
  box-shadow: none !important;
  background-color: #eceae7 !important;
}

/* Der geöffnete Aufklapper hebt sich heller ab */
body .et_pb_toggle.et_pb_toggle_open,
body .et_pb_accordion .et_pb_toggle.et_pb_toggle_open {
  background-color: #f5f4f2 !important;
}

body .et_pb_toggle .et_pb_toggle_title,
body .et_pb_accordion .et_pb_toggle_title {
  color: var(--brand) !important;
  position: relative;
}

/* Pfeil aus zwei Rahmenlinien statt Divis Icon-Font: nur so lassen sich
   Größe und Strichstärke frei bestimmen. Divi setzt hier sonst einen Kreis
   mit Plus/Minus. */
body .et_pb_toggle_title:before {
  content: "" !important;
  font-family: inherit !important;
  position: absolute;
  right: 0;
  top: 50%;
  width: 10px !important;
  height: 10px !important;
  border: none !important;
  border-right: 3px solid var(--brand) !important;
  border-bottom: 3px solid var(--brand) !important;
  border-radius: 2px !important;
  background: none !important;
  /* Die Prozentwerte halten die optische Mitte — der gedrehte Pfeil ist
     nicht symmetrisch zu seiner Box. */
  transform: translateY(-70%) rotate(45deg);
  transform-origin: center;
  transition: transform .35s ease;
  display: block;
  margin: 0 !important;
}

body .et_pb_toggle_open .et_pb_toggle_title:before {
  content: "" !important;
  transform: translateY(-30%) rotate(225deg);
}

/* --------------------------------------------------------------------------
   3m. Bildstreifen

   Ein durchlaufendes Band aus Fotos. Es startet an der linken Inhaltskante,
   läuft rechts aus dem Bild und ist links als halbe Pille gerundet — das
   Gegenstück zur Medien-Pille im Hero. Die Bewegung steuert js/scripts.js:
   Dauerlauf, dessen Richtung der Scrollrichtung folgt.
   -------------------------------------------------------------------------- */

.scholz-band {
  /* Reicht 140px über die linke Inhaltskante hinaus und läuft rechts
     aus dem Bild — spiegelbildlich zur Medien-Pille im Hero. */
  width: calc(100% + (50vw - 50%) + 140px);
  margin-left: -140px;
  max-width: none;
  overflow: hidden;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  margin-top: 40px;
  /* weicher Auslauf an der linken Rundung */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 100%);
}

.scholz-band-spur {
  display: flex;
  width: max-content;
  will-change: transform;
}

/* Mit der Maus über dem Band hält der Dauerlauf an, der Streifen lässt
   sich dann von Hand ziehen (siehe js/scripts.js). */
.scholz-band { cursor: grab; }
.scholz-band.zieht { cursor: grabbing; }

.scholz-band img {
  user-select: none;
  -webkit-user-drag: none;
}

.scholz-band-bild {
  flex: 0 0 auto;
  height: 420px;
  width: auto;
  border-right: 6px solid #ffffff;
}

.scholz-band-bild img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: cover;
}

/* Flex-Kinder wachsen per Default mit ihrem Inhalt (min-width:auto) — ohne
   diese Regeln sprengt die Bildspur die Divi-Spalte auf mehrere tausend Pixel. */
.et_pb_column:has(.scholz-band) {
  min-width: 0 !important;
  overflow: visible !important;
}

.et_pb_code:has(.scholz-band),
.et_pb_code:has(.scholz-band) .et_pb_code_inner {
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
}

@media (max-width: 767px) {
  .scholz-band-bild { height: 260px; }
}

/* --------------------------------------------------------------------------
   3n. Footer

   Divis Standardfooter (Widget-Bereich mit "Archives"/"Categories" plus
   Fußleiste) wird ausgeblendet — der eigene Footer ersetzt ihn vollständig.
   -------------------------------------------------------------------------- */

#main-footer {
  display: none !important;
}

/* Die Divi-Sektion um den Footer trägt weder Padding noch Rundung, damit
   der Footer bündig an den Seitenrändern und unten abschließt. */
body .et_pb_section:has(.scholz-footer) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  /* Die Sektionen darüber liegen laut z-index-Leiter (Abschnitt 3e) weiter
     vorn und überlappen den Footer um die Rundungshöhe. Der Footer muss
     darüber liegen, sonst verschwinden Teilen-Pille und obere Rundung. */
  z-index: 30 !important;
  margin-top: 0 !important;
}

body .et_pb_section:has(.scholz-footer) .et_pb_row {
  padding: 0 !important;
  margin: 0 auto !important;
}

body .et_pb_section:has(.scholz-footer) .et_pb_column,
body .et_pb_section:has(.scholz-footer) .et_pb_code {
  padding: 0 !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Aufbau nach Vorlage: heller Block mit zwei Spalten, darüber die
   schwebende Teilen-Pille, darunter der dunkle Fußbereich mit Rechtslinks
   und Logo.
   -------------------------------------------------------------------------- */

.scholz-footer {
  position: relative;
  margin-top: 0;
  /* Der Footer bleibt auf Inhaltsbreite, schließt aber unten bündig ab —
     ohne die sonst übliche Rundung unten rechts. */
  margin-bottom: 0;
}

/* Die Teilen-Pille überlappt die Oberkante des hellen Blocks */
.scholz-footer-teilen {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--brand-deep);
  color: #ffffff;
  padding: 12px 26px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  z-index: 2;
}

.scholz-footer-teilen a,
.scholz-footer-teilen .ic {
  display: flex;
  color: #ffffff;
}

.scholz-footer-teilen svg {
  width: 20px;
  height: 20px;
  display: block;
}

.scholz-footer-teilen a:hover { opacity: 0.75; }

.scholz-footer-hell {
  background: #f5f4f2;
  /* Oberkante gerundet — gespiegelt zur sonstigen Regel: die grosse Rundung
     links, rechts nur angedeutet. */
  border-radius: 120px 24px 0 0;
  padding: 76px 64px 64px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
}

.scholz-footer-spalte h2 {
  color: var(--brand) !important;
  margin: 0 0 16px;
  font-size: var(--fs-h2);
  line-height: 1.14;
}

.scholz-footer-spalte p {
  color: var(--text-body-dark);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0 0 28px;
  max-width: 460px;
}

/* Kontakt-Spalte: Text links, Button rechts auf gleicher Höhe — nutzt die
   volle Breite, die seit dem Wegfall von "Folgen Sie uns" frei ist. */
.scholz-footer-spalte--kontakt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.scholz-footer-spalte--kontakt .scholz-footer-kontakt-text p {
  margin-bottom: 0;
}

.scholz-footer-kontakt-aktionen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex-shrink: 0;
}

.scholz-footer-kontakt-btn {
  margin-top: 0;
  align-self: stretch;
  text-align: center;
}

/* Telefon als zweiter, zurückhaltenderer Button — Mail bleibt der
   primäre CTA (gefüllt), Anrufen tritt optisch dahinter zurück. */
.scholz-footer-kontakt-btn--sekundaer {
  background: transparent;
  color: var(--brand) !important;
}

.scholz-footer-kontakt-btn--sekundaer:hover {
  background: var(--brand);
  color: #ffffff !important;
}

.scholz-footer-social {
  display: flex;
  gap: 22px;
}

.scholz-footer-social a {
  color: var(--brand);
  display: flex;
}

.scholz-footer-social svg {
  width: 30px;
  height: 30px;
}

.scholz-footer-social a:hover { color: var(--brand-dark); }

.scholz-footer-dunkel {
  background: #123f38;
  color: #ffffff;
  padding: 44px 64px 52px;
}

.scholz-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  margin-bottom: 38px;
}

.scholz-footer-links a {
  color: #ffffff;
  font-size: 16px;
  /* Ohne Linie im Ruhezustand — sie waechst erst beim Hover ein. Ein
     dauerhafter Unterstrich ergaebe dort zwei Linien uebereinander. */
  text-decoration: none;
  position: relative;
}

.scholz-footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* Dicht unter der Schrift und nur ein Pixel stark. */
  bottom: 4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .32s ease;
}

.scholz-footer-links a:hover::after {
  transform: scaleX(1);
}

.scholz-footer-links a:hover { color: var(--brand-light); }

.scholz-footer-fuss {
  display: flex;
  align-items: center;
  gap: 26px;
}

.scholz-footer-logo {
  height: 52px;
  width: auto;
}

.scholz-footer-fuss span {
  display: block;
  font-size: 15px;
  line-height: 1.7;
}

.scholz-footer-fuss .copy { color: rgba(255, 255, 255, 0.65); }

@media (max-width: 980px) {
  .scholz-footer-hell {
    gap: 44px;
    padding: 72px 32px 48px;
  }

  .scholz-footer-spalte--kontakt {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  .scholz-footer-spalte--kontakt .scholz-footer-kontakt-text p {
    margin-bottom: 0;
  }

  .scholz-footer-spalte h2 { font-size: 32px; }
  .scholz-footer-dunkel { padding: 36px 32px 44px; }
}

/* Oberer Bereich auf dem Telefon kompakter.

   Der Header war mobil 168px hoch: Der Logo-Container behielt die
   Desktop-Hoehe von 88px, dazu 2x40px Padding — obwohl das Logo selbst nur
   36px hoch ist. Diese Luft schob den ganzen Hero nach unten und zwang das
   Sektions-Padding auf 200px. */
@media (max-width: 767px) {
  #main-header { padding: 18px 0 !important; }
  /* Logo im Ausgangszustand groesser (Wunsch Fabian, 14.09.2026): 36 -> 48px,
     Breite proportional 140 -> 187px. In der Milchglasleiste bleibt es
     kompakt, damit die Leiste beim Scrollen schlank wirkt. */
  #main-header:not(.et-fixed-header) #logo {
    height: 48px !important;
    min-width: 187px !important;
  }
  #main-header:not(.et-fixed-header) .logo_container { height: 52px !important; }

  /* 130px statt 200px. Gemessen: Logo-Unterkante liegt bei 104px, das Video
     soll rund 24px darunter beginnen. Bei 100px ragten Logo und Burger 4-5px
     ins Video. */
  body .scholz-hero {
    padding-top: 130px !important;
    padding-bottom: 64px !important;
  }

  /* Die Abstaende zwischen den Modulen kommen NICHT von margin-bottom,
     sondern vom Flex-Gap der Spalte (30px). margin-bottom addiert sich nur
     darauf — deshalb hier den Gap steuern. */
  .scholz-hero .et_pb_column { gap: 18px !important; }
  .scholz-hero .et_pb_heading { margin-bottom: 0 !important; }
  .scholz-hero .et_pb_text { margin-bottom: 0 !important; }

  /* Hero-Vorspann: 22px sind neben der 40px-H1 zu gross.
     Die Groesse steht zwar auch am Modul (Divi erzeugt dafuer korrekt
     ".et_pb_text_0 -> 18px" in seiner 767er-Query), aber die Typo-Skala
     oben ("body .et_pb_text p") ist spezifischer und gewinnt. Ein Umbau
     der Skala auf :where() waere die saubere Loesung, laesst aber alle
     Fliesstexte auf Divis 14px zurueckfallen — deshalb hier gezielt. */
  body .scholz-hero .et_pb_text p { font-size: 18px; }
}

/* Dunkler Fussbereich auf dem Telefon.
   Der helle Block darueber hat schon seine 980er-Regeln, der dunkle nicht. */
@media (max-width: 767px) {
  /* .scholz-footer-fuss ist flex mit nowrap. Logo (156px) und Textblock
     teilen sich dann 248px, der Text bekommt 66px und bricht nach jedem
     Wort um ("SCHOLZ / LIFE / SCIENCE"). Deshalb hier gestapelt. */
  .scholz-footer-fuss {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  /* Die Rechtslinks wrappten mit 34px Abstand ungleichmaessig um — zwei in
     der ersten Zeile, der Rest einzeln. Untereinander ist ruhiger, und das
     Padding bringt die Tap-Flaeche von 24px auf 44px. */
  .scholz-footer-links {
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
  }

  /* inline-block, nicht block: das Padding vergroessert die Tap-Flaeche von
     24px auf 44px, die Hover-Linie (::after ueber die volle Elementbreite)
     bleibt aber so breit wie das Wort. Mit display:block zoge sie sich ueber
     die ganze Spalte und sah aus wie eine Trennlinie. */
  .scholz-footer-links a {
    display: inline-block;
    /* 11px statt 10: mit 10 blieben es 43,8px – knapp unter dem Minimum. */
    padding: 11px 0;
  }

  /* Icon-Links: Klickflaeche auf 44px bringen, ohne die Icons zu
     vergroessern. Der negative Margin gleicht das Padding wieder aus,
     damit die Abstaende im Layout unveraendert bleiben. */
  .scholz-footer-teilen a {
    padding: 12px;   /* 20px Icon + 2x12 = 44 */
    margin: -12px;
  }

  .scholz-footer-social a {
    padding: 7px;    /* 30px Icon + 2x7 = 44 */
    margin: -7px;
  }

  /* Die Linie sitzt sonst 4px ueber der Elementunterkante — durch das neue
     Padding waere das 5px unter der Schrift statt dicht darunter. */
  .scholz-footer-links a::after {
    bottom: 10px;
  }
}

/* --------------------------------------------------------------------------
   4. Divi-Standardfarbe auf die Markenfarbe ziehen

   Divi verwendet an vielen Stellen fest sein Standardblau #2ea3f2. Die
   globale Farbpalette im Variablenmanager wäre der saubere Weg, ließ sich
   aber nicht speichern — deshalb hier zentral überschrieben.
   -------------------------------------------------------------------------- */

/* Buttons — Divi setzt .et_pb_bg_layout_light.et_pb_module.et_pb_button
   (drei Klassen). Die Selektoren hier müssen mindestens gleich spezifisch
   sein, sonst gewinnt Divis Inline-Stylesheet. */
.et_pb_button.et_pb_module.et_pb_bg_layout_light,
.et_pb_button.et_pb_module.et_pb_bg_layout_light:hover,
body .et_pb_button:not(.et_pb_bg_layout_dark) {
  color: var(--brand);
  border-color: var(--brand);
}

/* Buttons auf farbigem Grund bleiben weiß.

   Divi vergibt et_pb_bg_layout_light/-dark nur nach dem eigenen
   Hintergrund-Setting des Moduls, nicht nach dem der Section. Auf einer
   Section mit Markenfarbe bekommt der Button deshalb fälschlich "light"
   und wäre grün auf grün. Die Klasse .scholz-hero an der Section
   korrigiert das. */
body .et_pb_button.et_pb_bg_layout_dark,
body .et_pb_bg_layout_dark .et_pb_button,
body .scholz-hero .et_pb_button,
body .scholz-hero .et_pb_button.et_pb_bg_layout_light,
body .scholz-hero .et_pb_button.et_pb_module.et_pb_bg_layout_light,
body .scholz-hero .et_pb_button.et_pb_module.et_pb_bg_layout_light {
  color: #ffffff;
  border-color: #ffffff;
}

body .scholz-hero .et_pb_button:hover,
body .scholz-hero .et_pb_button:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Links im Fließtext */
body .et_pb_text a,
body .et_pb_toggle_content a,
body .et_pb_slide_description a {
  color: var(--brand);
}

/* Zitat-Balken */
body .et_pb_text blockquote {
  border-left-color: var(--brand);
}

/* Aufklapper und Akkordeon: Plus/Minus-Symbol */
body .et_pb_toggle_title:before,
body .et_pb_accordion .et_pb_toggle_title:before {
  color: var(--brand);
}

/* Slider-Navigation */
body .et_pb_slider .et-pb-controllers a.et-pb-active-control {
  background-color: var(--brand);
}

/* Formular: Absende-Button und Feldfokus */
body .et_pb_contact_submit.et_pb_button {
  color: var(--brand);
  border-color: var(--brand);
}
body .et_pb_contact_form input:focus,
body .et_pb_contact_form textarea:focus {
  border-color: var(--brand);
}

/* --------------------------------------------------------------------------
   5. Projekt-CSS
   Eigene Regeln ab hier.
   -------------------------------------------------------------------------- */

/* Kontaktformular einspaltig auf dem Telefon.

   Die Einstellung selbst steht im Builder: die vier Felder haben
   sizing.phone.flexType = "24_24" (Seite 24, per API gesetzt), Divi vergibt
   dafuer auch brav die Klasse .et_flex_column_24_24_phone am Element.
   Nur die zugehoerige CSS-Regel fehlt im generierten Stylesheet — Divi baut
   das Breakpoint-CSS fuer Flex-Spalten offenbar erst beim Speichern im
   Visual Builder, nicht bei einem Update ueber die REST-API.

   Diese Regel liefert daher nur nach, was zur bestehenden Builder-Einstellung
   gehoert. Sie kann entfallen, sobald die Seite einmal im Visual Builder
   gespeichert wurde — vorher pruefen, ob Divi die Regel dann selbst mitbringt.
   767px ist Divis eigener Phone-Breakpoint. */
@media (max-width: 767px) {
  .et_flex_column_24_24_phone { width: 100% !important; }
}

/* Tap-Flaechen in den Leistungs-Karten auf 44px.
   Titel (21px Schrift, 25,2px Zeilenhoehe) und "Mehr erfahren" waren 34
   bzw. 41px hoch. Das Padding vergroessert nur die Klickflaeche, optisch
   aendert sich nichts. */
@media (max-width: 767px) {
  .scholz-karte h3 a {
    display: inline-block;
    padding: 10px 0;
  }

  .scholz-karte-text > a {
    padding: 7px 0;
  }
}