/*
Theme Name:   Blocksy Child - Libella Cosmetic
Theme URI:    https://www.libella-cosmetic.at/
Description:  Child-Theme fuer den Relaunch der Website Libella Cosmetic (WEB-4868).
              Alle projektspezifischen Anpassungen liegen hier, damit Updates des
              Blocksy-Themes nichts ueberschreiben.
Author:       movec Web Development
Author URI:   https://www.movec.com/
Template:     blocksy
Version:      1.1.3
Text Domain:  blocksy-child
*/

/* ==========================================================================
   Hinweis zur Arbeitsweise

   Farben, Schriften, Abstaende und Buttons werden NICHT hier gesetzt, sondern
   im Blocksy-Customizer unter "Global Styles". Nur so bleiben sie zentral
   aenderbar und wirken auch in Elementor-Modulen und im Shop.

   In diese Datei gehoert ausschliesslich, was der Customizer nicht abdeckt.
   Werte siehe WEB-4868-farbpalette.md.
   ========================================================================== */

:root {
    --lib-basis:       #F7F5F3;
    --lib-weiss:       #FFFFFF;
    --lib-text:        #1A1A1A;
    --lib-sekundaer:   #6E6862;
    --lib-akzent:      #6B543D;
    --lib-akzent-hell: #8B6F52;
    --lib-dunkel:      #3A3633;   /* bis 24.09.2026 #242220 */
    --lib-linie:       #E3DED8;
    --lib-hover:       #54422F;
    --lib-erfolg:      #4A6B4F;
    --lib-fehler:      #8B4A3F;

    /* Fliesstextschrift - von beiden Menues genutzt, damit sie nicht
       auseinanderlaufen. Faellt auf Blocksys Wert zurueck. */
    --lib-schrift:     var(--theme-font-family, Inter, system-ui, sans-serif);
}

/* Zeilenlaenge im Fliesstext begrenzen.
   Die Behandlungstexte sind 2.000-4.000 Zeichen lang und werden ohne
   Begrenzung ueber die volle Containerbreite unlesbar. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
    max-width: 75ch;
}

/* Kantige Kanten statt abgerundeter - siehe Gestaltungsregeln. */
.wp-block-button__link,
.ct-button,
button,
input[type="submit"] {
    border-radius: 2px;
}

/* Links im Fliesstext unterstreichen. Farbe allein reicht als
   Unterscheidungsmerkmal nicht aus (Barrierefreiheit). */
.entry-content a:not(.ct-button):not(.wp-block-button__link) {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}


/* ==========================================================================
   Hauptnavigation

   Blocksy liefert das Menue ab Werk in 12px, Schriftschnitt 700 und
   Grossbuchstaben. Das ist zugleich zu klein zum bequemen Lesen und zu fett
   fuer die angestrebte ruhige Anmutung.

   Umgestellt auf 16px in Schnitt 500 und normaler Schreibweise. Grossbuchstaben
   waeren im Beauty-Segment ueblich, scheitern hier aber an der Wortlaenge:
   "GESICHTSBEHANDLUNGEN" und "KOERPER & WELLNESS" sprengen bei 16px gemeinsam
   mit dem Logo die Containerbreite von 1200px.

   Diese Regeln ueberschreiben die entsprechenden Customizer-Optionen.
   Aenderungen an Groesse und Schnitt des Menues also hier vornehmen, nicht
   im Customizer - dort wirken sie nicht mehr.
   ========================================================================== */

.ct-header [data-id="menu"] > ul > li > a {
    font-family: var(--lib-schrift);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    padding-left: 18px;
    padding-right: 18px;
    position: relative;
}

/* Hover und aktiver Zustand: duenne Linie, die aus der Mitte aufzieht.
   Zurueckhaltender als ein Farbwechsel und passt zur reduzierten Bildsprache. */
.ct-header [data-id="menu"] > ul > li > a::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 12px;
    height: 1px;
    background: var(--lib-akzent);
    transform: scaleX(0);
    transition: transform 0.25s ease;
}

.ct-header [data-id="menu"] > ul > li > a:hover::after,
.ct-header [data-id="menu"] > ul > li.current-menu-item > a::after,
.ct-header [data-id="menu"] > ul > li.current-menu-ancestor > a::after {
    transform: scaleX(1);
}

/* Untermenue: etwas mehr Luft und ein weisser Grund, damit es sich vom
   getoenten Header (#E3DED8) klar abhebt. */
.ct-header [data-id="menu"] .sub-menu {
    background: var(--lib-weiss);
    border: 1px solid var(--lib-linie);
    border-radius: 2px;
    padding: 8px 0;
}

.ct-header [data-id="menu"] .sub-menu .ct-menu-link {
    font-size: 15px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    padding: 10px 22px;
}

.ct-header [data-id="menu"] .sub-menu .ct-menu-link:hover {
    background: var(--lib-basis);
    color: var(--lib-akzent);
}

/* Ab hier bricht das Menue ohnehin ins mobile Offcanvas um; die Regeln oben
   wuerden dort nur mit den Blocksy-Vorgaben kollidieren. */
@media (max-width: 999px) {
    .ct-header [data-id="menu"] > ul > li > a::after {
        display: none;
    }
}


/* ==========================================================================
   Mobiles Menue (Offcanvas)

   Gleiche Anmutung wie das Desktop-Menue: dieselbe Schriftfamilie, derselbe
   Schnitt (500), dieselbe Sperrung und derselbe Akzentstrich bei Hover und
   aktiver Seite.

   Bewusst abweichend ist nur die Groesse - 18px statt 16px. Auf dem Telefon
   wird mit dem Finger getroffen, nicht mit dem Mauszeiger; zusammen mit dem
   groesseren Innenabstand ergibt das Beruehrflaechen von rund 48px Hoehe.

   Blocksy steuert das Offcanvas ueber eigene CSS-Variablen
   (--theme-font-weight: 700, --theme-font-size: 20px). Diese werden hier
   mitgesetzt, nicht nur die Endwerte - sonst schlagen die Vorgaben ueberall
   dort durch, wo eine Regel nicht ausdruecklich ueberschrieben wurde.
   ========================================================================== */

#offcanvas .ct-panel-inner {
    background-color: var(--lib-dunkel);
}

#offcanvas .ct-panel-content {
    padding-top: 8px;
}

/* Die Variablen an der Wurzel des Offcanvas setzen, damit alle abgeleiteten
   Regeln denselben Wert sehen. */
[data-id="mobile-menu"] {
    --theme-font-family: var(--lib-schrift);
    --theme-font-weight: 500;
    --theme-font-size: 18px;
    --theme-line-height: 1.4;
}

[data-id="mobile-menu"] .ct-menu-link {
    font-family: var(--lib-schrift);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    padding-top: 14px;
    padding-bottom: 14px;
    position: relative;
}

/* Derselbe Akzentstrich wie im Desktop-Menue, hier linksbuendig statt
   aufziehend - eine Animation aus der Mitte wirkt in einer vertikalen Liste
   unruhig. */
[data-id="mobile-menu"] > li > .ct-menu-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 8px;
    width: 22px;
    height: 1px;
    background: var(--lib-akzent-hell);
    opacity: 0;
    transition: opacity 0.2s ease;
}

[data-id="mobile-menu"] > li > .ct-menu-link:hover::after,
[data-id="mobile-menu"] > li.current-menu-item > .ct-menu-link::after,
[data-id="mobile-menu"] > li.current-menu-ancestor > .ct-menu-link::after {
    opacity: 1;
}

/* Trennlinien zwischen den Hauptpunkten, dezent in Braun statt hartem Weiss */
[data-id="mobile-menu"] > li + li {
    border-top: 1px solid rgba(139, 111, 82, 0.35);
}

/* Unterpunkte zuruecknehmen und einruecken - wie im Desktop-Untermenue,
   wo sie ebenfalls kleiner und im Schnitt 400 stehen. */
[data-id="mobile-menu"] .sub-menu .ct-menu-link {
    font-family: var(--lib-schrift);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    color: #C9C2BA;
    padding-left: 18px;
    padding-top: 11px;
    padding-bottom: 11px;
}

[data-id="mobile-menu"] .sub-menu > li + li {
    border-top: 0;
}

[data-id="mobile-menu"] .sub-menu .ct-menu-link::after {
    display: none;
}

/* Aktiver Eintrag in der Akzentfarbe, damit die Position erkennbar bleibt */
[data-id="mobile-menu"] .current-menu-item > .ct-menu-link,
[data-id="mobile-menu"] .current-menu-ancestor > .ct-menu-link {
    color: var(--lib-akzent-hell);
}


/* ==========================================================================
   Footer

   Der Footer traegt dieselben Inhalte, die zuvor als dunkler Abschnitt am Ende
   der Startseite standen, und uebernimmt deshalb auch deren Hintergrund. Ein
   dunkler Fussbereich schliesst die Seite ab, statt sie ins Nichts auslaufen
   zu lassen.

   Zur Spezifitaet: Blocksy setzt den Hintergrund ueber
   [data-footer*="type-1"] .ct-footer (0,2,0). Ein einfaches .ct-footer (0,1,0)
   wird davon ueberschrieben - deshalb hier durchgaengig
   [data-footer] .ct-footer.ct-footer (0,3,0). Das Attribut sitzt am <body>.
   Kein !important: Die hoehere Spezifitaet reicht und bleibt nachvollziehbar.

   Die Textfarben muessen mitwechseln, Blocksy rechnet sie nicht automatisch um.
   Das Akzentbraun #8B6F52 erreicht auf #3A3633 nur einen Kontrast von 2.6 und
   faellt fuer Fliesstext durch - Links bekommen deshalb einen aufgehellten
   Braunton (#C4A886, Kontrast 5.3). Fliesstext #D8D0C6 erreicht 7.8.
   ========================================================================== */

[data-footer] .ct-footer.ct-footer {
    background-color: var(--lib-dunkel);
}

/* Die Zeilen selbst bleiben transparent, damit der Footer-Grund durchscheint */
[data-footer] .ct-footer.ct-footer [data-row] {
    background-color: transparent;
}

/* Fliesstext in den Widget-Bereichen.
   16px statt der geerbten 18px: Fussbereichs-Angaben sind Sekundaerinformation
   und duerfen kompakter stehen als der Fliesstext im Seiteninhalt. */
[data-footer] .ct-footer.ct-footer,
[data-footer] .ct-footer.ct-footer .widget,
[data-footer] .ct-footer.ct-footer p,
[data-footer] .ct-footer.ct-footer li {
    color: #D8D0C6;
    font-size: 16px;
    line-height: 1.55;
}

/* Widget-Ueberschriften.
   20px zu 16px ergibt einen Groessensprung von 1.25 - unterhalb davon wirken
   Ueberschrift und Text wie ein Block. Zuvor standen 19px gegen geerbte 18px,
   also praktisch gleich gross. Gewicht, Farbe und eine leichte Sperrung
   verstaerken die Trennung zusaetzlich. */
[data-footer] .ct-footer.ct-footer .widget-title,
[data-footer] .ct-footer.ct-footer h1,
[data-footer] .ct-footer.ct-footer h2,
[data-footer] .ct-footer.ct-footer h3,
[data-footer] .ct-footer.ct-footer h4 {
    color: var(--lib-weiss);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
    margin-bottom: 12px;
}

/* Aufgehellter Braunton statt der Akzentfarbe - siehe Kommentar oben */
[data-footer] .ct-footer.ct-footer a {
    color: #C4A886;
}

[data-footer] .ct-footer.ct-footer a:hover {
    color: var(--lib-weiss);
}

/* Copyright-Zeile zuruecknehmen und mit einer feinen Linie absetzen */
[data-footer] .ct-footer.ct-footer [data-row*="bottom"] {
    border-top: 1px solid #3A3733;
    color: #A89E92;
    font-size: 15px;
}

[data-footer] .ct-footer.ct-footer [data-row*="bottom"] a {
    color: #A89E92;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

[data-footer] .ct-footer.ct-footer [data-row*="bottom"] a:hover {
    color: var(--lib-weiss);
}


/* ==========================================================================
   Abstaende um Ueberschriften im Fliesstext

   Blocksy und Elementor setzen Ueberschriften mit sehr knappem Abstand nach
   oben. Auf textlastigen Seiten - Rechtstexte, Behandlungsbeschreibungen -
   klebt die Ueberschrift dadurch am vorangehenden Absatz und gliedert nicht.

   Typografische Regel: Vor einer Ueberschrift gehoert deutlich mehr Raum als
   danach. Sie leitet den folgenden Text ein und muss sichtbar zu ihm gehoeren,
   nicht zum vorherigen Abschnitt. Die Werte orientieren sich an der jeweiligen
   Schriftgroesse (rund das 1,3-fache oben, ein Drittel davon unten).

   :first-child schliesst die erste Ueberschrift eines Blocks aus - dort wuerde
   der Abstand den Abschnittsabstand verdoppeln.
   ========================================================================== */

.elementor-widget-text-editor h2,
.entry-content h2 {
    margin-top: 48px;
    margin-bottom: 16px;
}

.elementor-widget-text-editor h3,
.entry-content h3 {
    margin-top: 36px;
    margin-bottom: 12px;
}

.elementor-widget-text-editor h4,
.entry-content h4 {
    margin-top: 28px;
    margin-bottom: 10px;
}

.elementor-widget-text-editor > *:first-child,
.elementor-widget-text-editor h2:first-child,
.elementor-widget-text-editor h3:first-child,
.entry-content > h2:first-child,
.entry-content > h3:first-child {
    margin-top: 0;
}

/* Absaetze und Listen im Fliesstext etwas luftiger */
.elementor-widget-text-editor p,
.entry-content p {
    margin-bottom: 1.1em;
}

.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol {
    margin-bottom: 1.2em;
    padding-left: 1.3em;
}

.elementor-widget-text-editor li {
    margin-bottom: 0.4em;
}


/* ==========================================================================
   Barrierefreiheit

   Massnahmen nach WCAG 2.1 AA, soweit sie sich im Stylesheet umsetzen lassen.
   Hintergrund und vollstaendige Liste: WEB-4868-barrierefreiheit.md
   ========================================================================== */

/* Sichtbarer Fokus auf allen bedienbaren Elementen (2.4.7).
   Themes entfernen den Standardrahmen des Browsers gern aus optischen
   Gruenden - wer per Tastatur navigiert, sieht dann nicht mehr, wo er ist.
   :focus-visible zeigt ihn nur bei Tastaturbedienung, nicht beim Mausklick. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--lib-akzent);
    outline-offset: 3px;
    border-radius: 1px;
}

/* Auf dunklem Grund braucht der Rahmen einen hellen Ton, sonst verschwindet er:
   #6B543D erreicht auf #3A3633 nur 1.7, #C4A886 dagegen 5.3 (Grenze 3.0).

   Dunkle Elementor-Abschnitte tragen die Klasse lib-dunkel, gesetzt von den
   Werkzeugen unter tools/. Bis 24.09.2026 stand hier ein Selektor auf den
   Farbwert im style-Attribut - der griff nie, weil Elementor die
   Hintergrundfarbe in eine eigene CSS-Datei schreibt. */
[data-footer] .ct-footer.ct-footer a:focus-visible,
#offcanvas a:focus-visible,
.elementor-section.lib-dunkel a:focus-visible {
    outline-color: #C4A886;
}

/* Sprungmarke zum Inhalt (2.4.1).
   Liegt ausserhalb des sichtbaren Bereichs und wird erst beim Fokussieren
   eingeblendet - so ueberspringen Tastaturnutzer die 21 Menuepunkte. */
.lib-sprungmarke {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 14px 24px;
    background: var(--lib-dunkel);
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 500;
}

.lib-sprungmarke:focus {
    left: 8px;
    top: 8px;
}

/* Bewegung nur, wenn sie nicht ausdruecklich abgelehnt wird (2.3.3).
   Betrifft die Unterstreichung im Menue und Elementors Uebergaenge. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================================================
   Kontaktformular

   Setzt die ueberarbeitete Formularstruktur um (siehe
   content-raw/kontaktformular.md). Greift, sobald der Formularcode im
   Backend eingesetzt ist.
   ========================================================================== */

.wpcf7-form p {
    margin-bottom: 20px;
}

.wpcf7-form label {
    display: block;
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 6px;
    color: var(--lib-text);
}

.wpcf7-form .pflicht {
    color: var(--lib-akzent);
}

.wpcf7-form .formular-hinweis {
    font-size: 15px;
    color: var(--lib-sekundaer);
    margin-bottom: 26px;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--lib-linie);
    border-radius: 2px;
    background: var(--lib-weiss);
    color: var(--lib-text);
    font-size: 16px;
    font-family: inherit;
}

/* Rahmenkontrast der Felder mindestens 3:1 gegen den Untergrund (1.4.11).
   Die Linienfarbe allein reicht dafuer nicht aus. */
.wpcf7-form input[type="text"]:hover,
.wpcf7-form input[type="email"]:hover,
.wpcf7-form input[type="tel"]:hover,
.wpcf7-form textarea:hover {
    border-color: var(--lib-sekundaer);
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
    border-color: var(--lib-akzent);
}

.wpcf7-form textarea {
    min-height: 170px;
    resize: vertical;
}

.wpcf7-form input[type="submit"] {
    background: var(--lib-akzent);
    color: var(--lib-weiss);
    border: 1px solid var(--lib-akzent);
    padding: 15px 32px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.wpcf7-form input[type="submit"]:hover {
    background: var(--lib-hover);
    border-color: var(--lib-hover);
}

/* Fehlermeldungen: Farbe allein darf die Information nicht tragen (1.4.1),
   deshalb zusaetzlich Rahmen und Textgewicht. */
.wpcf7-not-valid-tip {
    color: var(--lib-fehler);
    font-size: 15px;
    font-weight: 500;
    margin-top: 5px;
}

.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid {
    border-color: var(--lib-fehler);
    border-width: 2px;
}

.wpcf7-response-output {
    border-width: 2px !important;
    padding: 14px 18px !important;
    margin: 22px 0 0 !important;
    font-size: 16px;
}


/* ==========================================================================
   Cookie-Hinweis

   Die Website setzt nur technisch notwendige Cookies (WooCommerce-Warenkorb
   und -Sitzung). Dafuer ist keine Einwilligung erforderlich, der Hinweis ist
   reine Information. Eine Ablehnen-Schaltflaeche waere irrefuehrend: Ohne
   diese Cookies funktioniert der Gutscheinkauf nicht.

   Blocksy bietet keine Option, die Schaltflaeche zu entfernen; ohne
   Beschriftung bleibt ein leerer Button zurueck, den Screenreader als
   "Schaltflaeche" ohne Bezeichnung ansagen und der per Tabulator erreichbar
   ist. display:none nimmt ihn aus Darstellung, Tabreihenfolge und
   Accessibility-Tree zugleich - anders als visibility:hidden oder opacity:0,
   die ihn bedienbar liessen.

   Kommen spaeter auswertende Dienste dazu, muss diese Regel wieder entfernt
   und eine Consent-Loesung mit Skript-Blockade eingesetzt werden.
   ========================================================================== */

.cookie-notification .ct-cookies-decline-button {
    display: none;
}

/* Die verbleibende Schaltflaeche steht allein - etwas mehr Raum davor */
.cookie-notification .ct-button-group {
    gap: 0;
}

.cookie-notification .ct-cookies-accept-button {
    white-space: nowrap;
}

/* Der Verweis auf die Datenschutzerklaerung muss sich vom Fliesstext abheben */
.cookie-notification .ct-cookies-content a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* ==========================================================================
   Mengenfeld im Shop (Plus/Minus)

   Blocksy zeichnet Plus und Minus als Zeichen der Symbolschrift "woo" und
   rechnet ihre Groesse aus der Feldhoehe: Hoehe / 5.5. Auf der Produktseite
   ergab das am Desktop 10 px, auf dem Telefon 6.9 px - mit einer
   Strichstaerke von 1.2 bzw. 0.8 px. Striche unter einem Pixel glaettet der
   Browser zu einem hellen Grau; die Symbole waren praktisch nicht lesbar
   (gemessen an der Glyphe, 25.09.2026).

   Feste 16 px ergeben ueberall einen Strich von 1.9 px. Gilt fuer alle
   Mengenfelder vom Typ 2: Produktseite, Warenkorb, Mini-Warenkorb.
   ========================================================================== */

.quantity[data-type="type-2"] .ct-increase::before,
.quantity[data-type="type-2"] .ct-decrease::before {
    font-size: 16px;
}

/* Tippflaeche mindestens 24 x 24 px (WCAG 2.2, 2.5.8). Blocksy rechnet die
   Kreise aus der Feldhoehe (Hoehe / 1.8): am Telefon 22 px auf der
   Produktseite, 21 px im Warenkorb. max() haelt die Blocksy-Groesse, wo sie
   ohnehin reicht, und hebt nur die kleinen Faelle an.

   Position und Innenabstand muessen mitwandern - sonst sitzen die Kreise
   nicht mittig bzw. ueberdecken sie die Zahl. Im Warenkorb (80 px breit)
   bleiben danach 17.6 px fuer die Ziffer: genug fuer zweistellige Mengen. */
.quantity[data-type="type-2"] .ct-increase,
.quantity[data-type="type-2"] .ct-decrease {
    width: max(24px, calc(var(--quantity-height, 55px) / 1.8));
    height: max(24px, calc(var(--quantity-height, 55px) / 1.8));
    top: calc(50% - max(12px, calc(var(--quantity-height, 55px) / 3.6)));
}

.quantity[data-type="type-2"] input[type="number"] {
    padding-inline: calc(max(24px, calc(var(--quantity-height, 55px) / 1.8)) + 9%);
}

/* ==========================================================================
   Telefon (bis 689 px, Blocksys Mobil-Umbruch) - seit 1.1.3, 12.11.2026

   Befund der Mobilpruefung auf 360/375/414 px:
   - Ueberschriften: 48 px (H1) bzw. 36 px (H2) sind fuer deutsche
     Komposita zu gross. overflow-wrap brach Woerter ohne Trennstrich
     mitten durch ("Geschaeftsbedi|ngungen", "Haarentfernu|ng").
     Kleinere Groessen plus echte Silbentrennung (html lang="de").
     Ausnahme von der Regel "Schriften im Customizer": dort lassen sich
     Groessen setzen, aber keine Silbentrennung - beides gehoert zusammen.
   - Kopfzeile: Logo (193 px) und "Online-Termin" (144 px) ueberlappten
     um rund 50 px, "exclusiv" im Logo war verdeckt. Logo skaliert mit der
     Bildschirmbreite, der Button wird kompakter.
   - Buttons mit Zeilenumbruch hatten keinen Zeilenabstand.
   - Footer-Links unten waren 12 px.
   ========================================================================== */

h1, h2, h3,
.elementor-heading-title {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 8 4 4;
    overflow-wrap: normal;
}

@media (max-width: 689.98px) {
    h1,
    .elementor-widget-heading h1.elementor-heading-title {
        --theme-font-size: 34px;
        font-size: 34px;
        line-height: 1.15;
    }

    h2,
    .elementor-widget-heading h2.elementor-heading-title {
        --theme-font-size: 28px;
        font-size: 28px;
        line-height: 1.2;
    }

    h3,
    .elementor-widget-heading h3.elementor-heading-title {
        --theme-font-size: 22px;
        font-size: 22px;
        line-height: 1.25;
    }

    /* Logo waechst mit der Breite: 150 px ab 375 px, darunter kleiner */
    .ct-header [data-device="mobile"] .site-branding img {
        width: min(150px, calc(100vw - 225px));
        height: auto;
        max-height: none;
    }

    .ct-header [data-device="mobile"] .ct-header-cta .ct-button {
        font-size: 13px;
        padding: 4px 12px;
        min-height: 38px;
    }

    .elementor-button .elementor-button-text,
    .ct-button {
        line-height: 1.3;
    }

    [data-footer] .ct-footer-copyright a,
    [data-footer] [data-id="menu-secondary"] a,
    [data-footer] .menu a {
        font-size: 13px;
    }
}