/* =========================================================================
   Aquanatura Header – Overrides zum Agntix-Theme.
   Das Widget gibt das exakte Agntix-Header-Markup aus, gestylt wird es vom
   global geladenen Theme. Hier nur kleine, bewusste Abweichungen:
   1) besserer Hover-Kontrast im Dropdown (Agntix-Weiß-Variante ist sehr blass),
   2) Styling für unseren Kontakt/Social-Block im Handy-Offcanvas.
   ========================================================================= */

/* Header-Reihe: Logo links, Menü mittig, Button rechts. */
.aqua-tp-header .aqua-hdr-row { display: flex; align-items: center; width: 100%; }
.aqua-tp-header .aqua-hdr-row .tp-header-logo { flex: 0 0 auto; }
.aqua-tp-header .aqua-hdr-row .tp-header-menu { flex: 1 1 auto; justify-content: center; }
.aqua-tp-header .aqua-hdr-row .tp-header-right { flex: 0 0 auto; margin-left: auto; }

/* Feine Linie unter dem Header (wie im Original). */
.aqua-tp-header .tp-header-area { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }

/* Dropdown exakt unter dem jeweiligen Menüpunkt (li relativ positionieren).
   !important, weil das Theme die li auf static setzt. */
.aqua-tp-header .tp-header-menu nav ul li:not(.p-static) { position: relative !important; }

/* 1) Dropdown-Hover: dezentes helles Grau (das Grün war zu kräftig). */
.aqua-tp-header .dropdown-white-bg nav ul li .tp-submenu li:hover > a,
.aqua-tp-header .dropdown-white-bg nav ul li .tp-submenu li.active > a,
.aqua-tp-header .tp-submenu li:hover > a {
    background-color: #e7e8ed;
    color: #15151c;
}

/* 1b) Button in Aquanatura-Grün (statt Agntix-Neongrün). */
.aqua-tp-header .tp-btn-black.btn-green-light-bg .tp-btn-black-text,
.aqua-tp-header .tp-btn-black.btn-green-light-bg .tp-btn-black-circle {
    background-color: #4CA139;
}
.aqua-tp-header .tp-btn-black.btn-green-light-bg .tp-btn-black-text { color: #ffffff; }
.aqua-tp-header .tp-btn-black.btn-green-light-bg .tp-btn-black-circle svg { color: #ffffff; }

/* 2) Offcanvas: Button-Abstand + Kontakt/Social (unsere Ergänzung). */
.tp-offcanvas-area .aqua-oc-btn { margin: 6px 0 30px; }

/* 2a) Offcanvas-Logo groesser als das Desktop-Logo (eigener fester Wert,
   der Elementor-Regler "Logo-Breite" ist schon auf sein Maximum von 340px
   gestellt und wirkt am Handy trotzdem nur ~135px - eine andere, spezifischere
   Theme-Regel gewinnt dort). !important, um diese Theme-Regel sicher zu schlagen. */
.tp-offcanvas-area .tp-offcanvas-logo img { width: 195px !important; height: auto !important; }

/* 2b) "Projekt anfragen" linksbuendig zu den Menuepunkten. button_html() wird
   fuer Header UND Offcanvas geteilt und traegt die Bootstrap-Klasse "ml-25"
   (25px Abstand zum Desktop-Menue) - im Offcanvas soll der Button aber an
   derselben Kante wie die Menuepunkte starten. */
.tp-offcanvas-area .aqua-oc-btn .tp-header-btn-box { margin-left: 0 !important; }

/* Kontakt und die zwei Symbole nebeneinander statt untereinander
   (Marcel, 25.08.2026). Bei 364px Fensterbreite braucht der Kontaktblock
   rund 200px und die beiden Kreise 96px - das geht sich mit Abstand aus.
   align-items:flex-start setzt die Symbole oben im Kasten, auf Hoehe der
   Zeile "Kontakt" (Marcel, 25.08.2026: "das soll nicht unten sondern
   einfach oben sein in dem Container, auf der Hoehe von der Kontakt-
   Schrift"). wrap ist die Rueckfalltuer fuer sehr schmale Geraete, dort
   rutschen sie wieder darunter statt zu ueberlappen. */
.tp-offcanvas-area .aqua-oc-fuss {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 16px 20px;
}
/* flex-grow 0: der Kontaktblock soll seine natuerliche Breite behalten und
   die Symbole nicht aus der Zeile draengen. Gemessen bei 364px: Kontakt
   156px, Symbole 96px, dazu 20px Abstand - zusammen 272px. */
.tp-offcanvas-area .aqua-oc-info { margin: 30px 0 0; flex: 0 1 auto; }
.tp-offcanvas-area .aqua-oc-social { flex: 0 0 auto; margin-top: 30px; }
/* Die Ueberschrift "Folge uns" steht rechts ueber den Symbolen und darf
   dort nicht noch einmal 24px nach oben schieben - sonst stuenden die
   Kreise tiefer als die letzte Zeile des Kontaktblocks. */
.tp-offcanvas-area .aqua-oc-social h4 { margin-top: 0; }
.tp-offcanvas-area .aqua-oc-info h4,
.tp-offcanvas-area .aqua-oc-social h4 {
    font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: #15151c; margin: 24px 0 14px;
}
.tp-offcanvas-area .aqua-oc-info p {
    margin: 0; color: #636368; font-size: 16px; line-height: 1.9;
}
.tp-offcanvas-area .aqua-oc-info a { color: #636368; text-decoration: none; }
.tp-offcanvas-area .aqua-oc-info a:hover { color: #4CA139; }
.tp-offcanvas-area .aqua-oc-social-icons { display: flex; gap: 12px; }
.tp-offcanvas-area .aqua-oc-social-icons a {
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid rgba(20, 20, 20, 0.15);
    display: inline-flex; align-items: center; justify-content: center;
    color: #15151c; transition: all 0.25s;
}
.tp-offcanvas-area .aqua-oc-social-icons a:hover { background: #4CA139; border-color: #4CA139; color: #fff; }
.tp-offcanvas-area .aqua-oc-social-icons svg { width: 18px; height: 18px; }

/* 3) Megamenü: breite Dropdowns (viele Punkte) mehrspaltig + zentriert.
   min-width statt width (Theme setzt .tp-submenu auf 260px). */
.aqua-tp-header .tp-header-menu li.aqua-has-mega { position: relative; }
.aqua-tp-header .tp-header-menu .tp-submenu.aqua-mega {
    min-width: 720px;
    width: 720px;
    max-width: 92vw;
    left: 50%;
    right: auto;
    transform: translateX(-50%) scale(1, 0);
    transform-origin: top center;
    display: flex;
    flex-wrap: wrap;
    padding: 16px 14px;
}
.aqua-tp-header .tp-header-menu li.aqua-has-mega:hover > .tp-submenu.aqua-mega {
    transform: translateX(-50%) scale(1);
}
.aqua-tp-header .tp-header-menu .tp-submenu.aqua-mega > li { width: 33.333%; padding: 0 6px; }
@media (max-width: 1400px) {
    .aqua-tp-header .tp-header-menu .tp-submenu.aqua-mega { min-width: 560px; width: 560px; }
    .aqua-tp-header .tp-header-menu .tp-submenu.aqua-mega > li { width: 50%; }
}

/* 3b) Echtes Elementor-Megamenü-Template (z.B. Leistungen):
   normales Dropdown ausblenden und das Template-Panel auf volle Breite. */
.aqua-tp-header .tp-header-menu .has-mega-menu > .tp-submenu { display: none !important; }
.aqua-tp-header .tp-header-area .container.container-1580 { position: relative; }
.aqua-tp-header .tp-megamenu-wrapper.mega-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    width: auto; z-index: 99;
    opacity: 0; visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.35s, transform 0.35s, visibility 0.35s;
}
.aqua-tp-header .tp-header-menu .has-mega-menu:hover > .tp-megamenu-wrapper.mega-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.aqua-tp-header .tp-megamenu-wrapper.mega-menu > .elementor { width: 100%; }

/* 4) Header dauerhaft fixiert, KEIN Klon/Slide/Fade-Wechsel mehr (Entscheidung
   Marcel 16.07.2026, ersetzt den frueheren Sticky-Ansatz, dessen Zustands-
   wechsel als "Ploppen" sichtbar war): Der Header behaelt immer dieselbe
   Position und Hoehe. Oben am Seitenanfang ist er transparent ueber dem Hero,
   ab kurzem Scroll blendet .aqua-scrolled (JS) einen Glas-Hintergrund weich
   per Opacity ein. Farbe/Deckkraft/Blur sind exakt dieselben Variablen wie
   bei den Dropdown-Panels (Aquanatura -> Menü-Design).
   Der Blur liegt auf einem Pseudo-Element (::after, das ::before gehoert dem
   Lesbarkeits-Verlauf): haette die Leiste SELBST backdrop-filter, koennten
   die Panels darin nie mehr blurren (Backdrop-Root-Regel).
   Im Elementor-Editor bleibt die Position unangetastet (kein fixed). */
body:not(.elementor-editor-active) .aqua-tp-header .tp-header-area {
    position: fixed; top: 0; left: 0; right: 0; z-index: 999;
}
/* Die duenne Trennlinie (rgba 255/0.12, Regel weiter oben in dieser Datei)
   bleibt in BEIDEN Zustaenden unveraendert: frueher wechselte sie beim
   Scrollen die Farbe, das las sich wie eine Fremdlinie unter dem Glas. */
.aqua-tp-header .tp-header-area {
    transition: box-shadow 0.35s ease;
}
.aqua-tp-header .tp-header-area.aqua-scrolled {
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.18);
}
/* Beim Scrollen etwas schlanker, WEICH animiert (gleiches Element, kein
   Zustandssprung): nur das Link-Padding faehrt runter, das Logo bleibt.
   Das !important ueberstimmt das transition:all des Themes, das sonst die
   Padding-Animation blockiert (siehe fruehere Sticky-Notiz). */
.aqua-tp-header .tp-header-area .tp-header-menu nav > ul > li > a {
    transition: color 0.25s ease, padding 0.3s ease !important;
}
.aqua-tp-header .tp-header-area.aqua-scrolled .tp-header-menu nav > ul > li > a {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
}
/* Die Leisten-Hoehe bestimmt das LOGO, nicht die Links: das Logo-Kaestchen
   trug frueher 32px Polster oben/unten, das Bild 57px, macht 121px Leiste
   (gescrollt 20 + 57 + 20 = 97px). Genau deshalb konnte man das Logo nicht
   vergroessern, ohne dass die Leiste mitwaechst.
   Seit 23.07.2026 ist die Hoehe deshalb vom Logo ENTKOPPELT: das Kaestchen
   bekommt die bisherigen Leistenhoehen fest (121 / 97px) und zentriert das
   Bild darin aus. Die Bildhoehe (74 / 60px) laesst sich damit frei
   aendern, ohne dass die Leiste springt; max-height:100% deckelt zusaetzlich.
   Nur ab 1200px (Breakpoint d-xl des Markups): darunter ist das Menue im
   Offcanvas, dort bleibt die kompakte Leiste von 78px unangetastet.
   Gemessen im echten Chrome (headless, claude-shot) - die Messung im
   In-App-Browser liefert auf dieser Seite falsche Werte. */
/* Zur Ausrichtung (Wunsch Marcel 23.07.2026: "der Text vom Logo muss auf der
   gleichen Ebene sein wie die Menuepunkte"): Das Logo-Bild ist NICHT optisch
   mittig. Die Libelle sitzt ueber dem Schriftzug, dadurch liegt die Mitte des
   Wortes "aquanatura" per Pixelmessung des PNG (1880x598) bei 68,4% der
   Bildhoehe, nicht bei 50%. Zentriert man das Bild, haengt der Schriftzug
   sichtbar unter der Menuezeile.
   Deshalb wird das Bild oben ausgerichtet und per margin-top gesetzt:
       margin-top = Leistenmitte - 0,684 * Bildhoehe
   Leistenmitte ist zugleich die Mitte der Menue-Schrift (die Links sind in der
   Reihe zentriert). 121/2 - 0,684*74 = 9,9 -> 10px, gescrollt 97/2 - 0,684*60
   = 7,5px. Bei geaenderter Bildhoehe diese zwei Werte neu ausrechnen.
   KEIN transform benutzen: eine dauerhafte GPU-Ebene tastet das Bild bei
   devicePixelRatio 1,25 neu ab und laesst es unscharf wirken. */
@media (min-width: 1200px) {
    /* Leistenbreite = Slider-Breite (Wunsch Marcel 23.07.2026): der Theme-
       Container "container-1580" war schmaler als der Hero. Gemessen bei
       1920px lag die Leiste bei 185..1735 (1550 innen), der Hero-Container
       bei 135..1785 (1650). Deshalb bekommt der Header hier exakt die Formel
       des Hero-Containers aus aqua-hero2.css: width 92%, max-width 1650,
       kein Polster. Damit stehen Logo und Button bei JEDER Breite buendig
       zum Slider, nicht nur bei einer Aufloesung.
       ACHTUNG: die 1650 sind der Wert von --h2-content-maxw am Hero-Widget.
       Wird die Hero-Breite im Elementor geaendert, gehoert sie hier mit. */
    .aqua-tp-header .tp-header-area > .container.container-1580 {
        width: 92%;
        max-width: 1650px;
        padding-left: 0;
        padding-right: 0;
    }

    /* Menue-Mitte unabhaengig von der Logobreite.
       Marcel am 29.07.2026: "beim Sticky-Header wird das Logo kleiner, dann
       zieht sich das Menue mit nach links, das bleibt nicht mittig."

       Ursache, nachgemessen: die Reihe war flex mit
       Logo (0 0 auto) | Menue (1 1 auto, justify-content:center) | Knopf (0 0 auto).
       Das Menue wurde damit NICHT in der Containermitte zentriert, sondern nur
       im RESTPLATZ zwischen Logo und Knopf. Es galt exakt
           Menuemitte = Containermitte + (Logobreite - Knopfbreite) / 2
       Beim Scrollen faellt die Logo-Bildhoehe von 74px auf 60px, die Breite
       dadurch von 232,64px auf 188,63px - und die Menuemitte wandert um genau
       die Haelfte davon, 22,0px, nach links. Bei 1440 und bei 1920 derselbe
       Wert, der Fehler haengt allein an der Logobreite.

       Gleich grosse Aussenspalten halten die Mitte fest.

       Bewusst NICHT die Variante "Menue absolut zentrieren": ein transform am
       Menue macht dieses zum Bezugsrahmen fuer absolut positionierte Kinder,
       und das Vollbreiten-Megamenue haengt am Container - es wuerde auf
       Menuebreite zusammenschrumpfen. */
    .aqua-tp-header .aqua-hdr-row {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    .aqua-tp-header .aqua-hdr-row .tp-header-logo { grid-column: 1; justify-self: start; }
    .aqua-tp-header .aqua-hdr-row .tp-header-menu { grid-column: 2; min-width: 0; }
    .aqua-tp-header .aqua-hdr-row .tp-header-right {
        grid-column: 3;
        justify-self: end;
        margin-left: 0;
        /* Pflicht: ohne diese Zeile quetscht das Menue bei 1200px den Knopf
           von 202px auf 151px zusammen (gemessen). */
        min-width: max-content;
    }

    .aqua-tp-header .tp-header-area .tp-header-logo {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: 121px;
        display: flex;
        align-items: flex-start;
        transition: height 0.3s ease;
    }
    .aqua-tp-header .tp-header-area.aqua-scrolled .tp-header-logo {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: 97px;
    }
    .aqua-tp-header .tp-header-area .tp-header-logo a {
        display: block;
        line-height: 0;
    }
    /* Das width aus dem Elementor-Regler "Logo-Breite" wird hier bewusst
       ueberstimmt: bei fester Leistenhoehe ist die HOEHE die fuehrende
       Groesse, die Breite laeuft mit dem Seitenverhaeltnis mit. */
    .aqua-tp-header .tp-header-area .tp-header-logo img {
        width: auto !important;
        height: 74px !important;
        max-height: 100%;
        margin-top: 10px;
        transition: height 0.3s ease, margin-top 0.3s ease;
    }
    /* Das Logo bleibt beim Scrollen GENAU gleich gross.
       Marcel am 30.07.2026: "beim sticky header das logo nicht so machen das das
       logo kleiner wird, das soll einfach so bleiben."
       Vorher schrumpfte es mit der Leiste mit: gemessen von 74 auf 60px Hoehe
       und von 233 auf 189px Breite, dazu 2px nach oben. Jetzt bewegt es sich
       nicht mehr - Hoehe und margin-top sind in beiden Zustaenden dieselben,
       und weil die Leiste von oben nach unten schrumpft, bleibt der Abstand des
       Logos zur Oberkante gleich.
       Das passt in die geschrumpfte Leiste: 74px Bildhoehe plus 10px Abstand
       sind 84px, die gescrollte Leiste ist 98px hoch (gemessen).
       Nur die Leiste selbst wird noch flacher (121 auf 97px), das Logo nicht.
       Die Regel bleibt als leere Absichtserklaerung stehen, damit niemand die
       Theme-Vorgabe versehentlich wieder einbaut. */
    .aqua-tp-header .tp-header-area.aqua-scrolled .tp-header-logo img {
        height: 74px !important;
        margin-top: 10px;
    }
}
.aqua-tp-header .tp-header-area::after {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: var(--aqua-menu-bg, rgba(16, 20, 16, 0.45));
    -webkit-backdrop-filter: blur(var(--aqua-menu-blur, 16px)) saturate(140%);
    backdrop-filter: blur(var(--aqua-menu-blur, 16px)) saturate(140%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.aqua-tp-header .tp-header-area.aqua-scrolled::after { opacity: 1; }

/* 5) Fix: normales Dropdown exakt unter dem Menuepunkt ausrichten.
   Das Theme setzt .tp-submenu auf left:-137px (alte, statische li). Da unsere
   li jetzt position:relative ist, muss der Versatz auf 0. */
.aqua-tp-header .tp-header-menu nav ul li:not(.p-static) > .tp-submenu:not(.aqua-mega) {
    left: 0 !important;
    right: auto !important;
}

/* 5b) Dropdown auf DIESELBE Kante wie das Megamenue.
   Marcel am 29.07.2026: "das Dropdown liegt nicht auf gleicher Kante wie das
   Megamenue."

   Ursache, nachgemessen: beide Panels stehen auf top:100%, messen die 100%
   aber an verschiedenen Eltern.
     Megamenue: die li ist static (Regel 6 weiter unten), das Panel ankert am
                .container-1580 -> Oberkante 121px, gescrollt 97px, also
                buendig an der Leistenunterkante.
     Dropdown:  die li ist relative, das Panel ankert am Menuepunkt. Der ist
                nur 96px hoch (gescrollt 70px) und sitzt mittig in der Reihe.
                -> Oberkante 108,5px, gescrollt 83,5px.
   Der Fehlbetrag ist genau der Rest unter dem Menuepunkt:
     (121 - 96) / 2 = 12,5px   bzw.   (97 - 70) / 2 = 13,5px
   Bei 1280, 1600 und 1920 identisch gemessen, also breitenunabhaengig. */
.aqua-tp-header .tp-header-menu nav ul li > .tp-submenu {
    margin-top: 12.5px;
}
.aqua-tp-header .tp-header-area.aqua-scrolled .tp-header-menu nav ul li > .tp-submenu {
    margin-top: 13.5px;
}
/* Bruecke ueber die nachgeschobene Luecke. Ohne sie verliert die Maus auf dem
   Weg nach unten den Hover und das Panel klappt zu - im Test nachgewiesen.
   Die Pseudo-Elemente gehoeren zu den Panels und halten li:hover aufrecht.
   Deshalb auch KEIN overflow:hidden auf den Panels, das schnitte sie ab. */
.aqua-tp-header .tp-header-menu nav ul li > .tp-submenu::before,
.aqua-tp-header .tp-megamenu-wrapper.mega-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -13px;
    height: 13px;
}
.aqua-tp-header .tp-header-area.aqua-scrolled .tp-header-menu nav ul li > .tp-submenu::before,
.aqua-tp-header .tp-header-area.aqua-scrolled .tp-megamenu-wrapper.mega-menu::before {
    top: -14px;
    height: 14px;
}

/* 6) Fix: Element-Megamenue (z.B. Leistungen) auf volle Container-Breite.
   Die li muss static sein, damit das absolute Panel am Container (relative)
   ankert und nicht an der schmalen li. Schlaegt li.aqua-has-mega:relative. */
.aqua-tp-header .tp-header-menu li.has-mega-menu {
    position: static !important;
}

/* 7) Leistungen-Service-Titel immer sichtbar. Der tp_text_invert-Effekt setzt
   die Textfuellfarbe auf transparent (Reveal-Gradient per JS), was die Titel
   unsichtbar macht, wenn das JS nicht greift. Darum Fuellfarbe hart erzwingen. */
.tp-service-content .tp-section-title,
.tp-service-content .tp-section-title a,
.tp-service-content .tp-section-title a div,
.tp-service-content .tp-el-title-ani,
.tp-service-content .tp-el-title-ani div {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    color: #141414 !important;
    -webkit-text-fill-color: #141414 !important;
}

/* 8) Submenu- und Megamenue-Panels im Hero-Karten-Look (dunkles Milchglas wie
   die Schaugarten-Karte). Farbe, Deckkraft und Blur kommen als CSS-Variablen
   aus wp-admin -> Design -> Menü-Design (class-aqua-menu-design.php gibt sie
   inline aus); die Werte hier sind nur die Defaults, falls die Ausgabe fehlt. */
.aqua-tp-header .tp-header-menu .tp-submenu,
.aqua-tp-header .tp-megamenu-wrapper.mega-menu {
    background-color: var(--aqua-menu-bg, rgba(16, 20, 16, 0.45)) !important;
    -webkit-backdrop-filter: blur(var(--aqua-menu-blur, 16px)) saturate(140%);
    backdrop-filter: blur(var(--aqua-menu-blur, 16px)) saturate(140%);
    border: 1px solid var(--aqua-menu-border, rgba(255, 255, 255, 0.22)) !important;
    /* Rundum 14px (Wunsch Marcel, 30.07.2026: "schau dass hier die Ecken oben
       auch abgerundet sind"). Vorher standen die oberen Ecken auf 0, damit die
       Panels ohne Fuge an der Leiste ansetzen. Marcel will die weiche Kante
       lieber - beide Panels sitzen weiterhin auf DERSELBEN Hoehe (Block 5b),
       nur eben mit runder Oberkante. */
    border-radius: 14px;
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.22) !important;
}
/* Fallback: kann der Browser keinen backdrop-filter (sehr selten), waere die
   Transparenz auf dem Foto unlesbar, dann lieber fast deckend. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .aqua-tp-header .tp-header-menu .tp-submenu,
    .aqua-tp-header .tp-megamenu-wrapper.mega-menu {
        background-color: var(--aqua-menu-bg-solid, rgba(16, 20, 16, 0.94)) !important;
    }
    /* Gleicher Fallback fuer die Header-Leiste, damit Leiste und Panels auch
       ohne backdrop-filter identisch aussehen. */
    .aqua-tp-header .tp-header-area::after {
        background: var(--aqua-menu-bg-solid, rgba(16, 20, 16, 0.94));
    }
}
/* 8b) Das Mega-Menue-Template bringt eigene (weisse) Innen-Hintergruende mit,
   die das Glas komplett verdecken wuerden: Struktur-Container-FARBEN
   transparent schalten. Hintergrund-BILDER (z.B. das Foto in der rechten
   Spalte) und <img> bleiben unberuehrt. */
.aqua-tp-header .tp-megamenu-wrapper.mega-menu .elementor,
.aqua-tp-header .tp-megamenu-wrapper.mega-menu .e-con,
.aqua-tp-header .tp-megamenu-wrapper.mega-menu .e-con-inner,
.aqua-tp-header .tp-megamenu-wrapper.mega-menu .elementor-section,
.aqua-tp-header .tp-megamenu-wrapper.mega-menu .elementor-widget-wrap,
.aqua-tp-header .tp-megamenu-wrapper.mega-menu [class*="tp-megamenu"] {
    background-color: transparent !important;
    /* Innen-Blur des Templates aus (blur(40px) am Root-Container): sonst
       liegt Glas auf Glas und das Mega-Menue wirkt dunkler und matschiger
       als die normalen Dropdowns. Es soll NUR das Wrapper-Glas geben. */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
/* Trennlinien im Mega-Menue: duenn und dezent wie der Panel-Rand, statt der
   fast weissen Linien (rgb(243,243,246)) aus dem alten weissen Design. */
.aqua-tp-header .tp-megamenu-wrapper.mega-menu .e-con,
.aqua-tp-header .tp-megamenu-wrapper.mega-menu .e-con-inner,
.aqua-tp-header .tp-megamenu-wrapper.mega-menu .elementor-widget,
.aqua-tp-header .tp-megamenu-wrapper.mega-menu .elementor-widget-container {
    border-color: var(--aqua-menu-border, rgba(255, 255, 255, 0.22)) !important;
}

/* Texte in den Panels folgen dem gewaehlten Stil (dunkles Glas = weiss). Das
   Mega-Menue ist ein Elementor-Template, darum breit auf Links/Titel/Texte. */
.aqua-tp-header .tp-header-menu .tp-submenu a.dropdown-items,
.aqua-tp-header .tp-megamenu-wrapper.mega-menu a,
.aqua-tp-header .tp-megamenu-wrapper.mega-menu h1,
.aqua-tp-header .tp-megamenu-wrapper.mega-menu h2,
.aqua-tp-header .tp-megamenu-wrapper.mega-menu h3,
.aqua-tp-header .tp-megamenu-wrapper.mega-menu h4,
.aqua-tp-header .tp-megamenu-wrapper.mega-menu h5,
.aqua-tp-header .tp-megamenu-wrapper.mega-menu h6,
.aqua-tp-header .tp-megamenu-wrapper.mega-menu p,
.aqua-tp-header .tp-megamenu-wrapper.mega-menu span {
    color: var(--aqua-menu-text, #ffffff) !important;
}

/* 9) Hover in Dropdowns und Mega-Menue: heller Schimmer passend zum Glas. */
.aqua-tp-header .tp-header-menu .tp-submenu a.dropdown-items:hover,
.aqua-tp-header .tp-megamenu-wrapper.mega-menu .tp-megamenu-list a.tp-el-title:hover {
    background-color: var(--aqua-menu-hover, rgba(255, 255, 255, 0.16)) !important;
    color: var(--aqua-menu-text, #ffffff) !important;
    border-radius: 8px;
}

/* 10) Reviews als Google-Bewertungen: Avatar-Bilder und Badge-Logo durch das
   Google-G ersetzen (data-URI, kein Upload noetig). */
.aqua-google-g .tp-testimonial-avater img,
.tp-testimonial-ratting img {
    content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGNpcmNsZSBjeD0iMjQiIGN5PSIyNCIgcj0iMjQiIGZpbGw9IiNmZmZmZmYiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3LjIsNy4yKSBzY2FsZSgwLjcpIj48cGF0aCBmaWxsPSIjNDI4NUY0IiBkPSJNNDYuOTggMjQuNTVjMC0xLjU3LS4xNS0zLjA5LS4zOC00LjU1SDI0djkuMDJoMTIuOTRjLS41OCAyLjk2LTIuMjYgNS40OC00Ljc4IDcuMThsNy43MyA2YzQuNTEtNC4xOCA3LjA5LTEwLjM2IDcuMDktMTcuNjV6Ii8+PHBhdGggZmlsbD0iIzM0QTg1MyIgZD0iTTI0IDQ4YzYuNDggMCAxMS45My0yLjEzIDE1Ljg5LTUuODFsLTcuNzMtNmMtMi4xNSAxLjQ1LTQuOTIgMi4zLTguMTYgMi4zLTYuMjYgMC0xMS41Ny00LjIyLTEzLjQ3LTkuOTFsLTcuOTggNi4xOUM2LjUxIDQyLjYyIDE0LjYyIDQ4IDI0IDQ4eiIvPjxwYXRoIGZpbGw9IiNGQkJDMDUiIGQ9Ik0xMC41MyAyOC41OWMtLjQ4LTEuNDUtLjc2LTIuOTktLjc2LTQuNTlzLjI3LTMuMTQuNzYtNC41OWwtNy45OC02LjE5Qy45MiAxNi40NiAwIDIwLjEyIDAgMjRjMCAzLjg4LjkyIDcuNTQgMi41NiAxMC43OGw3Ljk3LTYuMTl6Ii8+PHBhdGggZmlsbD0iI0VBNDMzNSIgZD0iTTI0IDkuNWMzLjU0IDAgNi43MSAxLjIyIDkuMjEgMy42bDYuODUtNi44NUMzNS45IDIuMzggMzAuNDcgMCAyNCAwIDE0LjYyIDAgNi41MSA1LjM4IDIuNTYgMTMuMjJsNy45OCA2LjE5QzEyLjQzIDEzLjcyIDE3Ljc0IDkuNSAyNCA5LjV6Ii8+PC9nPjwvc3ZnPg==') !important;
    object-fit: contain !important;
}
.tp-testimonial-avater img {
    content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGNpcmNsZSBjeD0iMjQiIGN5PSIyNCIgcj0iMjQiIGZpbGw9IiNmZmZmZmYiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3LjIsNy4yKSBzY2FsZSgwLjcpIj48cGF0aCBmaWxsPSIjNDI4NUY0IiBkPSJNNDYuOTggMjQuNTVjMC0xLjU3LS4xNS0zLjA5LS4zOC00LjU1SDI0djkuMDJoMTIuOTRjLS41OCAyLjk2LTIuMjYgNS40OC00Ljc4IDcuMThsNy43MyA2YzQuNTEtNC4xOCA3LjA5LTEwLjM2IDcuMDktMTcuNjV6Ii8+PHBhdGggZmlsbD0iIzM0QTg1MyIgZD0iTTI0IDQ4YzYuNDggMCAxMS45My0yLjEzIDE1Ljg5LTUuODFsLTcuNzMtNmMtMi4xNSAxLjQ1LTQuOTIgMi4zLTguMTYgMi4zLTYuMjYgMC0xMS41Ny00LjIyLTEzLjQ3LTkuOTFsLTcuOTggNi4xOUM2LjUxIDQyLjYyIDE0LjYyIDQ4IDI0IDQ4eiIvPjxwYXRoIGZpbGw9IiNGQkJDMDUiIGQ9Ik0xMC41MyAyOC41OWMtLjQ4LTEuNDUtLjc2LTIuOTktLjc2LTQuNTlzLjI3LTMuMTQuNzYtNC41OWwtNy45OC02LjE5Qy45MiAxNi40NiAwIDIwLjEyIDAgMjRjMCAzLjg4LjkyIDcuNTQgMi41NiAxMC43OGw3Ljk3LTYuMTl6Ii8+PHBhdGggZmlsbD0iI0VBNDMzNSIgZD0iTTI0IDkuNWMzLjU0IDAgNi43MSAxLjIyIDkuMjEgMy42bDYuODUtNi44NUMzNS45IDIuMzggMzAuNDcgMCAyNCAwIDE0LjYyIDAgNi41MSA1LjM4IDIuNTYgMTMuMjJsNy45OCA2LjE5QzEyLjQzIDEzLjcyIDE3Ljc0IDkuNSAyNCA5LjV6Ii8+PC9nPjwvc3ZnPg==') !important;
    background: #ffffff !important;
    object-fit: contain !important;
}

/* 11) Reviews-Sektion: modernes Glas-Design mit Garten-Hintergrund. */
/* Reviews-Hintergrund + Overlay jetzt nativ am Container 0d1d592 (in Elementor editierbar: Bild, Schleier-Farbe/Deckkraft, Hoehe ueber Padding). */
.elementor-element-df35f93 > .e-con-inner,
.elementor-element-df35f93 .elementor-widget-tp-testimonial-zigzag,
.elementor-element-df35f93 .tp-testimonial-area,
.elementor-element-df35f93 [class*="sectionarea"] {
    background-color: transparent !important;
    background-image: none !important;
}
/* Glas-Cards */
.elementor-element-df35f93 .tp-testimonial-item {
    background: rgba(255,255,255,0.10) !important;
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
    border: 1px solid rgba(255,255,255,0.22) !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 50px rgba(0,0,0,0.32) !important;
}
.elementor-element-df35f93 .tp-testimonial-item,
.elementor-element-df35f93 .tp-testimonial-item p,
.elementor-element-df35f93 .tp-testimonial-item h1,
.elementor-element-df35f93 .tp-testimonial-item h2,
.elementor-element-df35f93 .tp-testimonial-item h3,
.elementor-element-df35f93 .tp-testimonial-item h4,
.elementor-element-df35f93 .tp-testimonial-item span {
    color: #ffffff !important;
}
/* Google-Badge: G kleiner + Layout aufgeraeumt */
.elementor-element-df35f93 .tp-testimonial-ratting img {
    width: 42px !important; height: 42px !important; max-width: 42px !important;
    border-radius: 50% !important; flex: 0 0 auto !important;
}
.elementor-element-df35f93 .tp-testimonial-ratting-box {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.elementor-element-df35f93 .tp-testimonial-ratting {
    background: rgba(255,255,255,0.13) !important;
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
    border: 1px solid rgba(255,255,255,0.24) !important;
    border-radius: 50px !important;
    padding: 12px 26px !important;
}
.elementor-element-df35f93 .tp-testimonial-ratting svg path { fill: #FBBC05 !important; }
.elementor-element-df35f93 .tp-testimonial-item {
    transition: transform 0.55s cubic-bezier(.16, 1, .3, 1), box-shadow 0.45s ease !important;
}
.elementor-element-df35f93 .tp-testimonial-ratting,
.elementor-element-df35f93 .tp-testimonial-ratting * { color: #ffffff !important; white-space: nowrap; }

/* 13) Footer aufgeraeumt: zu grosse Texte verkleinern, ausgewogener. */
.tp-footer-widget-title { font-size: 38px !important; line-height: 1.18 !important; }
.tp-copyright-big-text { font-size: 150px !important; }
@media (max-width: 767px) {
    .tp-footer-widget-title { font-size: 26px !important; }
    .tp-copyright-big-text { font-size: 58px !important; }
}

/* 14) Reviews-Badge (Pille unter dem Titel) komplett ausblenden. */
.elementor-element-df35f93 .tp-testimonial-ratting-box,
.elementor-element-df35f93 .tp-testimonial-ratting { display: none !important; }

/* 15) Footer: Wortmarke durch Logo ersetzen, rotierenden Stern entfernen. */
.tp-copyright-img { display: none !important; }
.tp-copyright-big-text { display: none !important; }
.tp-copyright-content::before {
    content: '';
    display: block;
    width: 300px; height: 84px;
    margin: 0 auto 6px;
    background: url('https://p-zjich7.project.space/wp-content/uploads/2025/05/logo-transparent.png') no-repeat center;
    background-size: contain;
}


/* 18) Aquanatura Banner Widget (Struktur). */
.aqua-banner { position: relative; display: flex; align-items: center; justify-content: center;
    min-height: 440px; background-size: cover; background-position: center center;
    background-repeat: no-repeat; overflow: hidden; }
.aqua-banner__veil { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1; }
.aqua-banner__veil--top { top: 0; height: 45%; }
.aqua-banner__veil--bottom { bottom: 0; height: 50%; }
.aqua-banner__inner { position: relative; z-index: 2; text-align: center; padding: 50px 24px; max-width: 1100px; width: 100%; }
.aqua-banner__sub { display: inline-block; text-transform: uppercase; letter-spacing: 0.14em;
    font-weight: 700; font-size: 14px; margin-bottom: 14px; color: #fff; }
/* overflow-wrap und hyphens sind ein Sicherheitsnetz, keine Gestaltung.
   Grund (30.07.2026): die Schriftgroesse des Banner-Titels kommt aus der
   Elementor-Typografie je Seite. Fehlt dort ein Handy-Wert, gilt die
   Rechner-Groesse auf jeder Breite - gemessen 87px bei 390px Bildbreite, und
   "Schaugarten" ragte damit 205px aus dem Bild. Die Handy-Werte sind seither in
   jeder Seite gesetzt (9,6vw, bei Fassadenbegruenung 8,1vw).
   Trotzdem bleibt es moeglich, dass der Kunde spaeter einen noch laengeren
   Titel eintraegt. Dann bricht das Wort mit Silbentrennung um, statt aus dem
   Bild zu laufen. Am Rechner aendert sich dadurch nichts, weil dort kein Wort
   zu lang ist. */
.aqua-banner__title { font-size: 64px; font-weight: 800; line-height: 1.05; margin: 0; color: #fff;
    overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 767px) { .aqua-banner__title { font-size: 38px; } .aqua-banner { min-height: 300px; }
    /* Mehr Luft unter der Kopfzeile. Der Bannerinhalt sitzt mittig, bei
       einem langen Titel waechst er nach oben: "Gartengestaltung &
       Schwimmteich in Laa an der Thaya" braucht am Handy vier Zeilen,
       dann stiess der Vorspann ans Logo (gemessen 25.08.2026: Logo bis
       y=67, Vorspann ab y=65, also 2px Ueberlappung). Die groessere
       Kopfpolsterung schiebt den Inhalt um die halbe Differenz nach
       unten und haelt auf allen Seiten Abstand. */
    .aqua-banner__inner { padding-top: 86px; } }




/* 21) Mega-Menue schmaler + zentriert. */
.aqua-tp-header .tp-megamenu-wrapper.mega-menu {
    left: 50% !important; right: auto !important; margin-left: -650px !important;
    width: 1300px !important; max-width: 96vw !important;
}

/* ================================================================
   22) Aquanatura Reviews Widget (eigenständig, self-contained)
   ================================================================ */
.aqua-reviews{
    position:relative;
    background-size:cover;
    background-position:center;
    overflow:hidden;
    padding:90px 6% 100px;
    isolation:isolate;
}
.aqua-reviews::before{
    content:'';position:absolute;inset:0;z-index:0;
    background-color:rgba(10,16,10,0.34);pointer-events:none;
}
.aqua-reviews__veil{position:absolute;left:0;right:0;z-index:1;pointer-events:none;}
.aqua-reviews__veil--top{top:0;height:38%;}
.aqua-reviews__veil--bottom{bottom:0;height:42%;}
.aqua-reviews__head,.aqua-reviews__grid{position:relative;z-index:2;}

.aqua-reviews__head{text-align:center;max-width:780px;margin:0 auto 48px;}
.aqua-reviews__sub{
    display:inline-flex;align-items:center;gap:9px;
    color:#bfe3b9;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
    font-size:14px;margin-bottom:14px;
}
.aqua-reviews__sub::before{content:'';width:20px;height:2px;background:#7bc36f;display:inline-block;}
.aqua-reviews__title{
    color:#fff;font-size:clamp(30px,4vw,52px);line-height:1.08;margin:0;font-weight:700;
}
.aqua-reviews__badge{
    display:inline-flex;align-items:center;gap:10px;margin-top:24px;
    padding:10px 20px;border-radius:999px;
    background:rgba(255,255,255,0.14);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.28);
    color:#fff;text-decoration:none;font-size:15px;
    transition:background .25s ease,transform .25s ease;
}
a.aqua-reviews__badge:hover{background:rgba(255,255,255,0.22);transform:translateY(-2px);}
.aqua-reviews__badge-rate{font-weight:700;font-size:17px;}
.aqua-reviews__badge-stars{display:inline-flex;gap:1px;}
.aqua-reviews__badge-count{opacity:.9;}

.aqua-reviews__grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:26px;
    max-width:1180px;margin:0 auto;
}
.aqua-rev-card{
    background:rgba(255,255,255,0.12);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,0.22);
    border-radius:22px;padding:30px 30px 26px;
    box-shadow:0 18px 44px rgba(0,0,0,0.18);
    display:flex;flex-direction:column;gap:16px;
    transition:transform .3s ease,box-shadow .3s ease,background .3s ease;
}
.aqua-rev-card:hover{
    transform:translateY(-6px);
    box-shadow:0 26px 60px rgba(0,0,0,0.26);
    background:rgba(255,255,255,0.17);
}
.aqua-rev-card__stars{display:inline-flex;gap:2px;}
.aqua-star{display:inline-block;}
.aqua-star.is-on path{fill:#fbbf24;}
.aqua-star.is-off path{fill:rgba(255,255,255,0.35);}
.aqua-rev-card__text{color:#f4f6f4;font-size:17px;line-height:1.6;margin:0;flex:1;}
.aqua-rev-card__foot{display:flex;align-items:center;gap:12px;margin-top:4px;}
.aqua-rev-card__avatar{
    width:42px;height:42px;border-radius:50%;background:#fff;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,0.18);flex:none;
}
.aqua-rev-card__meta{display:flex;flex-direction:column;line-height:1.25;}
.aqua-rev-card__name{color:#fff;font-weight:700;font-size:16px;}
.aqua-rev-card__src{color:rgba(255,255,255,0.7);font-size:13px;}

@media(max-width:991px){
    .aqua-reviews{padding:70px 6% 80px;}
    .aqua-reviews__grid{grid-template-columns:1fr;}
}

/* Elementor Lazy-Load-Killer (background-image:none !important) ueberbieten.
   :not(#_l) hebt die Spezifitaet ueber die Lazy-Regel, Werte via CSS-Variablen. */
.aqua-reviews:not(#_l):not(#_l):not(#_l){
    background-image: var(--aqua-bg, none) !important;
    background-size: cover !important; background-position: center !important;
}
.aqua-reviews__veil--top:not(#_l):not(#_l):not(#_l){
    background-image: linear-gradient(to bottom, var(--aqua-veil-top, rgba(8,14,8,0.55)) 0%, rgba(0,0,0,0) 100%) !important;
}
.aqua-reviews__veil--bottom:not(#_l):not(#_l):not(#_l){
    background-image: linear-gradient(to top, var(--aqua-veil-bottom, rgba(8,14,8,0.6)) 0%, rgba(0,0,0,0) 100%) !important;
}

/* === Reviews: horizontaler Slider (Karten nebeneinander) === */
.aqua-reviews__slider{ width:100%; max-width:1180px; margin:0 auto; overflow:hidden; }
.aqua-reviews .swiper-wrapper{ align-items:stretch; }
.aqua-reviews .swiper-slide{ height:auto; display:flex; }
.aqua-reviews .swiper-slide .aqua-rev-card{ width:100%; height:100%; }
.aqua-reviews__controls{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:32px; }
.aqua-reviews__prev,.aqua-reviews__next{
    width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,0.35);
    background:rgba(255,255,255,0.14);color:#fff;font-size:24px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    transition:background .25s ease,transform .25s ease;
}
.aqua-reviews__prev:hover,.aqua-reviews__next:hover{ background:rgba(255,255,255,0.26); transform:translateY(-2px); }
.aqua-reviews__dots{ display:flex; align-items:center; gap:8px; }
.aqua-reviews__dots .swiper-pagination-bullet{ width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,0.45);opacity:1;cursor:pointer;transition:all .25s ease; }
.aqua-reviews__dots .swiper-pagination-bullet-active{ background:#fff; width:24px;border-radius:5px; }

/* === Reviews-Badge: kein Text-Umfaerben beim Hover === */
.aqua-reviews__badge,
.aqua-reviews__badge *,
a.aqua-reviews__badge:hover,
a.aqua-reviews__badge:hover .aqua-reviews__badge-rate,
a.aqua-reviews__badge:hover .aqua-reviews__badge-count,
a.aqua-reviews__badge:hover *{
    color:#ffffff !important;
}

/* ================================================================
   22b) Reviews: Google-Feed (Smash Balloon Reviews Feed) im Glas-Look
   ================================================================
   Ab 04.08.2026 holt die Bewertungssektion der Startseite ihre Karten
   ueber [reviews-feed feed=1] direkt von Google. Das Plugin bringt sein
   eigenes Aussehen mit: helle Karten, dunkler Text, Trennlinien - auf
   dem dunklen Foto der Sektion unlesbar. Diese Regeln bauen daraus
   exakt dieselben Glaskarten, die vorher von Hand gepflegt waren.

   WARUM UEBERALL !important: das Plugin schreibt seine Farben als
   Inline-<style> mit "#sb-reviews-container-1 .klasse" davor. Ein
   ID-Selektor schlaegt jede reine Klassenregel, egal wie lang. Die
   Feed-Nummer steckt in der ID - wuerde man sie hier mitschreiben,
   braeche das CSS, sobald jemand einen zweiten Feed anlegt.

   Das Karussell ist Owl Carousel (.sbr-owl-*), NICHT Swiper wie im
   Rest der Seite. Die Pfeile setzt Owl selbst auf position:absolute.  */

/* Die Karten sollen 1180px breit bleiben wie im alten Slider. Die 64px
   Innenabstand sind die Gasse fuer die Pfeile: Owl setzt sie auf
   left:0 / right:0, und weil dieser Wrapper der naechste positionierte
   Vorfahr ist, landen sie damit NEBEN den Karten statt darauf.
   Unter 992px faellt die Gasse weg - dort ist keine uebrig, dann liegen
   die Pfeile wie ueblich halbtransparent auf der Karte. */
.aqua-reviews__feed{
    position:relative; z-index:2;
    /* 1500 Karten + 2x64 Gasse = 1628. Die 1500 sind dieselbe Innenbreite
       wie Fusszeile und FAQ (Wunsch Marcel 04.08.2026). */
    max-width:1628px; padding:0 64px; margin:0 auto;
}
@media(max-width:991px){
    .aqua-reviews__feed{ max-width:1180px; padding:0; }
}

/* --- Kopf des Feeds: Ueberschrift raus, Bewertung als Glas-Pille --- */
/* "Reviews" doppelt sich mit dem Widget-Titel darueber. */
.aqua-reviews__feed .sb-feed-header-heading{ display:none !important; }
.aqua-reviews__feed .sb-feed-header{ margin:0 0 36px !important; padding:0 !important; }
.aqua-reviews__feed .sb-feed-header-content{ text-align:center; }
.aqua-reviews__feed .sb-feed-header-bottom{
    display:flex !important; flex-wrap:wrap; align-items:center;
    justify-content:center; gap:14px;
}
.aqua-reviews__feed .sb-feed-header-average{
    display:inline-flex; align-items:center; gap:10px;
    padding:10px 20px; border-radius:999px;
    background:rgba(255,255,255,0.14);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.28);
}
.aqua-reviews__feed .sb-feed-header-rating{ color:#fff !important; font-size:17px !important; font-weight:700 !important; }
.aqua-reviews__feed .sb-feed-header-rating-subtext{ color:rgba(255,255,255,0.9) !important; font-size:15px !important; }
.aqua-reviews__feed .sb-feed-header-rating-icons{ color:#fbbf24 !important; }
.aqua-reviews__feed .sb-item-rating-icon-dimmed{ color:rgba(255,255,255,0.35) !important; }

/* "Eine Bewertung schreiben" - das ist ein CTA, deshalb Website-Gruen. */
.aqua-reviews__feed .sb-feed-header-btn{
    background:#4CA139 !important; color:#fff !important;
    border-radius:999px !important; padding:11px 22px !important;
    border:0 !important;
}
.aqua-reviews__feed .sb-feed-header-btn:hover{ background:#3d8a2d !important; }
.aqua-reviews__feed .sb-feed-header-btn svg path{ fill:#fff !important; }

/* --- Die Karten --- */
/* Owl gibt jedem Element eine Inline-Breite. flex:0 0 auto laesst die
   stehen, display:flex am Track macht alle Karten gleich hoch. */
.aqua-reviews__feed .sbr-owl-stage{ display:flex; align-items:stretch; }
.aqua-reviews__feed .sbr-owl-item{ flex:0 0 auto; height:auto; display:flex; }
.aqua-reviews__feed .sb-post-item-wrap{
    width:100%;
    background:rgba(255,255,255,0.12) !important;
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,0.22) !important;
    border-radius:22px !important;
    padding:30px 30px 26px !important;
    margin:0 !important;
    box-shadow:0 18px 44px rgba(0,0,0,0.18);
    transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.aqua-reviews__feed .sb-post-item-wrap:hover{
    transform:translateY(-6px);
    box-shadow:0 26px 60px rgba(0,0,0,0.26);
    background:rgba(255,255,255,0.17) !important;
}
.aqua-reviews__feed .sb-post-item{ height:100%; }
.aqua-reviews__feed .sb-item-text,
.aqua-reviews__feed .sb-item-pros-cons{
    color:#f4f6f4 !important; font-size:17px !important; line-height:1.6 !important;
}
.aqua-reviews__feed .sb-item-text a{ color:#cfe9c8 !important; }
.aqua-reviews__feed .sb-item-author-name{ color:#fff !important; font-weight:700 !important; font-size:16px !important; }
.aqua-reviews__feed .sb-item-author-date{ color:rgba(255,255,255,0.7) !important; font-size:13px !important; }
.aqua-reviews__feed .sb-item-rating{ color:#fbbf24 !important; margin:14px 0 14px !important; }
.aqua-reviews__feed .sb-item-author-img img{ border:2px solid rgba(255,255,255,0.45); }
/* Die Profilbilder von Google werden wegen der Cookie-Zustimmung gar nicht
   erst geladen (Klasse sbr-gdpr-image, kein <img> im Markup). Das leere
   Kaestchen schob den Namen nach rechts. Ist keins da, faellt der Platz
   weg; kommt nach der Zustimmung eins, greift die Regel nicht mehr.
   Ohne :has()-Unterstuetzung bleibt es beim bisherigen Zustand. */
.aqua-reviews__feed .sb-item-author-img:not(:has(img)){ display:none !important; margin:0 !important; }

/* Der Weiterlesen-Knopf des Plugins ist nur "..." - als Text erkennbar
   machen. Die Beschriftung fuer Screenreader liegt im aria-label des
   Knopfes, das generierte Wort aendert daran nichts. */
.aqua-reviews__feed .sb-expand{ display:inline; }
.aqua-reviews__feed .sb-expand-on-click{
    background:none !important; border:0 !important; padding:0 !important;
    color:#cfe9c8 !important; font-size:16px; cursor:pointer;
}
.aqua-reviews__feed .sb-expand-on-click::after{ content:' mehr lesen'; }
.aqua-reviews__feed .sb-expand-on-click:hover{ color:#fff !important; }

/* --- Pfeile, Punkte, Pause: gleiche Optik wie der alte Slider --- */
.aqua-reviews__feed .sbr-owl-prev,
.aqua-reviews__feed .sbr-owl-next{
    width:48px !important; height:48px !important; border-radius:50% !important;
    background:rgba(255,255,255,0.14) !important;
    border:1px solid rgba(255,255,255,0.35) !important;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    color:#fff !important;
    display:flex !important; align-items:center; justify-content:center;
    transition:background .25s ease;
}
.aqua-reviews__feed .sbr-owl-prev:hover,
.aqua-reviews__feed .sbr-owl-next:hover{ background:rgba(255,255,255,0.26) !important; }
/* Owl haengt die Pfeile an .sb-feed-posts (position:relative), nicht an
   diesen Wrapper - der Innenabstand oben allein schiebt sie deshalb NICHT
   heraus. Die 64px muessen hier gegengerechnet werden. Geprueft: das
   Elternelement clippt nicht (overflow:visible), nur die Buehne darunter. */
.aqua-reviews__feed .sbr-owl-prev{ left:-64px !important; }
.aqua-reviews__feed .sbr-owl-next{ right:-64px !important; }
@media(max-width:991px){
    .aqua-reviews__feed .sbr-owl-prev{ left:0 !important; }
    .aqua-reviews__feed .sbr-owl-next{ right:0 !important; }
}
.aqua-reviews__feed .sbr-owl-prev svg,
.aqua-reviews__feed .sbr-owl-next svg{ fill:#fff !important; color:#fff !important; width:15px; height:15px; }
.aqua-reviews__feed .sbr-owl-dots{
    display:flex !important; align-items:center; justify-content:center;
    gap:8px; margin-top:30px;
}
.aqua-reviews__feed .sbr-owl-dot{
    width:9px !important; height:9px !important; border-radius:50% !important;
    background:rgba(255,255,255,0.45) !important; border:0 !important;
    transition:all .25s ease;
}
.aqua-reviews__feed .sbr-owl-dot.active{ background:#fff !important; width:24px !important; border-radius:5px !important; }
/* Owl legt in jeden Punkt noch ein <span> mit eigenem Hintergrund - das
   sass als dunkler Klecks im hellen Punkt. Der aeussere Punkt ist der
   sichtbare, das innere Element kommt weg. */
.aqua-reviews__feed .sbr-owl-dot > span{ display:none !important; }
.aqua-reviews__feed .sbr-carousel-playpause{
    position:absolute !important; top:auto; bottom:0; right:0; z-index:3;
    width:34px !important; height:34px !important; border-radius:50% !important;
    background:rgba(255,255,255,0.14) !important;
    border:1px solid rgba(255,255,255,0.3) !important;
    color:#fff !important;
}

@media(max-width:767px){
    .aqua-reviews__feed .sb-post-item-wrap{ padding:24px 22px 22px !important; }
}

/* === FAQ der Startseite auf Fusszeilen-Breite (04.08.2026) ===
   Elementor deckelt die Sektion bei 1230px, und zwar in ZWEI Containern:
   124e4122 traegt die Ueberschrift, 2a1ab98d die Fragen. Wer nur einen
   davon anfasst, bekommt eine Ueberschrift, die neben ihren Fragen steht.
   Die Nummern stehen so im gespeicherten Elementor-Baum - wird die Sektion
   neu aufgebaut, gehoeren sie hier nachgezogen. */
.elementor-element-124e4122 > .e-con-inner,
.elementor-element-2a1ab98d > .e-con-inner{ max-width:1500px; }

/* === Bewertungsbilder: Lupe auf der Seite statt Sprung zu Google ===
   Das Reviews-Feed-Plugin verlinkt die Fotos direkt auf lh3.googleusercontent
   .com; ein Klick liess die Website stehen. Das Overlay dazu haengt am
   BODY, nicht im Inhalt: das Theme faehrt GSAP ScrollSmoother und
   transformiert #smooth-content - position:fixed waere darin wirkungslos
   und die Lupe wuerde mitscrollen. */
.aqua-reviews__feed a.sb-single-image{ cursor:zoom-in; }
.aqua-lupe{
    position:fixed; inset:0; z-index:99999;
    display:flex; align-items:center; justify-content:center;
    background:rgba(8,14,8,0.88);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s ease;
}
.aqua-lupe.ist-offen{ opacity:1; visibility:visible; }
.aqua-lupe__bild{
    max-width:min(1200px, 92vw); max-height:86vh;
    width:auto; height:auto; display:block;
    border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,0.5);
    transform:scale(.97); transition:transform .22s ease;
}
.aqua-lupe.ist-offen .aqua-lupe__bild{ transform:none; }
.aqua-lupe__zu,.aqua-lupe__pfeil{
    position:absolute; display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,0.35); background:rgba(255,255,255,0.14);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    color:#fff; cursor:pointer; border-radius:50%;
    transition:background .2s ease;
}
.aqua-lupe__zu:hover,.aqua-lupe__pfeil:hover{ background:rgba(255,255,255,0.28); }
.aqua-lupe__zu{ top:22px; right:26px; width:46px; height:46px; font-size:28px; line-height:1; }
.aqua-lupe__pfeil{ top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:28px; line-height:1; }
.aqua-lupe__zurueck{ left:24px; }
.aqua-lupe__weiter{ right:24px; }
.aqua-lupe__zaehler{
    position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
    color:rgba(255,255,255,0.85); font-size:14px; letter-spacing:.04em;
}
.aqua-lupe.ist-einzeln .aqua-lupe__pfeil,
.aqua-lupe.ist-einzeln .aqua-lupe__zaehler{ display:none; }
@media(max-width:600px){
    .aqua-lupe__pfeil{ width:44px; height:44px; }
    .aqua-lupe__zurueck{ left:10px; }
    .aqua-lupe__weiter{ right:10px; }
    .aqua-lupe__zu{ top:14px; right:14px; }
}

/* === Home-Ablauf (tp-process 77bb188): helle Karten statt schwarz === */
.elementor-element-77bb188 .tp-work-item{
    background-color:#eff3ef !important;
    border-color:#ffffff !important;
    box-shadow:0 12px 32px rgba(20,40,20,0.07) !important;
}
.elementor-element-77bb188 .tp-work-title{ color:#16241a !important; -webkit-text-fill-color:#16241a !important; }
.elementor-element-77bb188 .tp-work-content p{ color:#5e6b60 !important; -webkit-text-fill-color:#5e6b60 !important; }

/* === Aquanatura Bild mit Box (Glas-Overlay im Bild) === */
.aqua-imgbox{ position:relative; display:block; overflow:hidden; border-radius:22px; margin:0; line-height:0; }
.aqua-imgbox img{ display:block; width:100%; height:480px; object-fit:cover; }
.aqua-imgbox__box{
    position:absolute; max-width:78%; padding:16px 22px; line-height:1.3;
    background:rgba(16,20,16,0.34); border:1px solid rgba(255,255,255,0.22);
    border-radius:14px; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    box-shadow:0 12px 34px rgba(0,0,0,0.20);
}
.aqua-imgbox__title{ display:block; color:#fff; font-weight:700; font-size:19px; line-height:1.2; }
.aqua-imgbox__sub{ display:block; color:rgba(255,255,255,0.82); font-size:14px; margin-top:3px; }
.aqua-imgbox--bl .aqua-imgbox__box{ left:24px; bottom:24px; }
.aqua-imgbox--br .aqua-imgbox__box{ right:24px; bottom:24px; text-align:right; }
.aqua-imgbox--tl .aqua-imgbox__box{ left:24px; top:24px; }
.aqua-imgbox--tr .aqua-imgbox__box{ right:24px; top:24px; text-align:right; }
.aqua-imgbox--bc .aqua-imgbox__box{ left:50%; bottom:24px; transform:translateX(-50%); text-align:center; }

/* === Header: dezenter dunkler Verlauf von oben (bessere Lesbarkeit der weissen
   Navi ueber dem Hero). Blendet aus, sobald das Glas (.aqua-scrolled) da ist,
   sonst laege Verlauf auf Glas. === */
.aqua-tp-header .tp-header-area.header-transparent::before{
    content:""; position:absolute; left:0; right:0; top:0;
    height:190px; pointer-events:none; z-index:0;
    background:linear-gradient(to bottom, rgba(8,12,10,0.55) 0%, rgba(8,12,10,0.22) 48%, rgba(8,12,10,0) 100%);
    transition:opacity 0.35s ease;
}
.aqua-tp-header .tp-header-area.header-transparent.aqua-scrolled::before{ opacity:0; }
.aqua-tp-header .tp-header-area > *{ position:relative; z-index:1; }

/* === Handy-Menue (Offcanvas). Das Panel .tp-offcanvas-area wird AUSSERHALB von
   .aqua-tp-header ausgegeben - deshalb greift keine der Regeln oben, und das
   Agntix-Theme bleibt unwidersprochen. Zwei Nachbesserungen: ===

   a) Knopf "Projekt anfragen" in Aquanatura-Gruen statt Agntix-Neongruen.
      Gleiche Struktur wie oben, nur mit .tp-offcanvas-area als Anker.
   b) Die 18 Punkte im Mega-Menue lesbar machen. Das Theme setzt sie ueber
      ".tp-megamenu-list ul li a" auf #bfbfc0 - auf dem weissen Panel sind das
      1,84:1, WCAG verlangt 4,5:1. Wir nehmen dasselbe #2E2D2D wie die uebrigen
      Offcanvas-Punkte, damit das Menue EINE Handschrift hat: 13,7:1.
      Absichtlich kein Gruen - Gruen bleibt den Knoepfen vorbehalten.
      Unser Selektor (0,2,3) schlaegt den des Themes (0,1,3) ohne !important.
      Nur .tp-offcanvas-area davor, damit das dunkle Desktop-Mega-Menue mit
      seiner weissen Schrift unberuehrt bleibt. */
.tp-offcanvas-area .tp-btn-black.btn-green-light-bg .tp-btn-black-text,
.tp-offcanvas-area .tp-btn-black.btn-green-light-bg .tp-btn-black-circle {
    background-color: #4CA139;
}
.tp-offcanvas-area .tp-btn-black.btn-green-light-bg .tp-btn-black-text { color: #ffffff; }
.tp-offcanvas-area .tp-btn-black.btn-green-light-bg .tp-btn-black-circle svg { color: #ffffff; }

.tp-offcanvas-area .tp-megamenu-list ul li a { color: #2E2D2D; }

/* === Mega-Menue-Spaltenueberschriften auch im Handy-Offcanvas mit Pfeil
   (05.08.2026). Die Ueberschriften-Regel weiter oben ist an ".aqua-tp-header"
   gebunden, das Offcanvas-Panel liegt aber ausserhalb davon (siehe Kommentar
   oben) und blieb dadurch im alten, pfeillosen Stil haengen - obwohl exakt
   dasselbe Markup (Template 49329) hineinkopiert wird. Gleiche Regel, nur an
   .tp-offcanvas-area verankert und in Dunkel statt Weiss (weisses Panel). */
.tp-offcanvas-area .tp-megamenu-wrapper.mega-menu .elementor-widget-heading .elementor-heading-title a{
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    /* Mittig statt oben (Marcel, 10.08.2026): "das ist auch nicht mittig zur
       Schrift". Bei flex-start richtet sich der 32px-Kreis an der Oberkante
       der ~20px hohen Textzeile aus und haengt dadurch sichtbar zu hoch. */
    align-items: center;
    gap: 9px;
    color: #111013 !important;
    opacity: 0.85;
    transition: opacity 0.18s ease;
}
/* Dunkle Fassung desselben Knopf-Pfeils - Begruendung siehe Kopfleiste weiter unten. */
.tp-offcanvas-area .tp-megamenu-wrapper.mega-menu .elementor-widget-heading .elementor-heading-title a::after{
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    /* Helles Panel -> dunkle Flaeche, sonst identisch zur Kopfleiste. */
    background-color: rgba(17, 16, 19, 0.08);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M1 9L9 1M9 1H1M9 1V9' stroke='%23111013' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    flex: 0 0 28px;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.tp-offcanvas-area .tp-megamenu-wrapper.mega-menu .elementor-widget-heading .elementor-heading-title a:hover{
    opacity: 1;
}
.tp-offcanvas-area .tp-megamenu-wrapper.mega-menu .elementor-widget-heading .elementor-heading-title a:hover::after{
    transform: translate(2px, -2px);
    background-color: rgba(17, 16, 19, 0.16);
}
@media (prefers-reduced-motion: reduce){
    .tp-offcanvas-area .tp-megamenu-wrapper.mega-menu .elementor-widget-heading .elementor-heading-title a,
    .tp-offcanvas-area .tp-megamenu-wrapper.mega-menu .elementor-widget-heading .elementor-heading-title a::after{
        transition: none;
    }
}

/* === Spaltenueberschriften im Mega-Menue (04.08.2026, zweite Fassung) ===
   Erste Fassung hatte eine gruene Unterlinie. Marcel: "ich will da keine
   gruenen Unterstriche, mach irgendwie ein anderes Design, aber auch so ein
   Design, dass man checkt, dass man da draufklicken kann - und mach die
   Schriftgroesse ein bisschen groesser."

   Jetzt: groessere Schrift, ein dauerhaft sichtbarer Pfeil hinter dem Wort
   (das ist das Klick-Signal, kein Strich), und beim Darueberfahren wandert
   der Pfeil und die Zeile wird dunkler. Kein Gruen: das bleibt den Knoepfen
   vorbehalten. */
.aqua-tp-header .tp-megamenu-wrapper.mega-menu .elementor-widget-heading .elementor-heading-title{
    font-size: 14px;
    line-height: 1.25;
    letter-spacing: 0.02em;
    white-space: nowrap;   /* "Planung & Gestaltung" bleibt in einer Zeile */
}
.aqua-tp-header .tp-megamenu-wrapper.mega-menu .elementor-widget-heading .elementor-heading-title a{
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    /* Mittig zur Schrift (Marcel, 10.08.2026). Hier standen zwei
       align-items untereinander - das zweite (flex-start) gewann und zog den
       Kreis an die Oberkante der Textzeile. Die Spaltentitel sind einzeilig,
       "an der ersten Zeile" und "mittig" fallen also ohnehin zusammen. */
    align-items: center;
    gap: 9px;
    /* Weiss wie alle anderen Menuepunkte. Die zwischenzeitlich graue Fassung
       hat Marcel verworfen ("das ist alles grau und sieht nicht gut aus").
       Das Klick-Signal ist allein der Pfeil. */
    color: var(--aqua-menu-text, #ffffff) !important;
    opacity: 0.92;
    transition: opacity 0.18s ease;
}
/* Pfeil im Mega-Menue = derselbe wie in jedem Knopf (Marcel, 10.08.2026)
   ---------------------------------------------------------------------
   Hier stand das Schriftzeichen "\2197". Das ist NICHT dasselbe Zeichen wie
   im Knopf "Projekt anfragen": dort steckt ein SVG mit eigener Strichstaerke
   und runden Enden (path M1 9L9 1M9 1H1M9 1V9, stroke-width 1.5). Als
   Schriftzeichen sah der Pfeil duenner und je nach Schrift anders aus.
   Jetzt liegt exakt dasselbe SVG als Hintergrundbild im Kreis.
   Kreis 20 -> 32px, Pfeil 14px (Marcel: "der Kreis herum ist etwas zu
   klein"). Der Kreis ist damit etwa so hoch wie die Versalien daneben.
   ⚠️ Die Strichfarbe steht im SVG fest (currentColor wirkt in einem
   Hintergrundbild nicht). Deshalb gibt es zwei Fassungen - weiss fuer die
   dunkle Kopfleiste, dunkel fuer das helle Offcanvas-Menue weiter oben. */
.aqua-tp-header .tp-megamenu-wrapper.mega-menu .elementor-widget-heading .elementor-heading-title a::after{
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    /* Gefuellte Flaeche statt Umrandung - genau wie der Pfeil in der
       Video-Teaser-Karte des Hero (.teaser-arrow in aqua-hero2.css):
       weiss mit 15 % Deckkraft, beim Ueberfahren 30 %, keine Linie.
       (Marcel, 10.08.2026: "mach die Kreislinie weg und mach so einen
       helleren weissen Kreis, wie beim Video-Widget".) */
    background-color: rgba(255, 255, 255, 0.15);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M1 9L9 1M9 1H1M9 1V9' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    flex: 0 0 28px;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
/* Hover: die Zeile wird voll deckend und der Pfeil fuellt sich - der Text
   bleibt weiss. */
.aqua-tp-header .tp-megamenu-wrapper.mega-menu .elementor-widget-heading .elementor-heading-title a:hover{
    opacity: 1;
}
.aqua-tp-header .tp-megamenu-wrapper.mega-menu .elementor-widget-heading .elementor-heading-title a:hover::after{
    transform: translate(2px, -2px);
    background-color: rgba(255, 255, 255, 0.30);
}
@media (prefers-reduced-motion: reduce){
    .aqua-tp-header .tp-megamenu-wrapper.mega-menu .elementor-widget-heading .elementor-heading-title a,
    .aqua-tp-header .tp-megamenu-wrapper.mega-menu .elementor-widget-heading .elementor-heading-title a::after{
        transition: none;
    }
}

/* === Untermenuepunkte im Mega-Menue: Zeilenabstand (04.08.2026) ===
   Zweizeilige Punkte wie "Schwimmteich & Naturpool" klebten aufeinander
   (Marcel: "das klebt einfach zu sehr zusammen"). Der Theme-Stil setzt
   line-height auf 1, das faellt erst auf, seit ein Punkt umbricht. */
.aqua-tp-header .tp-megamenu-wrapper.mega-menu .tp-megamenu-list a.tp-el-title,
.aqua-tp-header .tp-megamenu-wrapper.mega-menu .tp-megamenu-list li a {
    line-height: 1.45;
    display: block;
}
.aqua-tp-header .tp-megamenu-wrapper.mega-menu .tp-megamenu-list li + li {
    margin-top: 4px;
}

/* ===================================================================
   Ausgeklapptes Menue am Handy: enger setzen
   -------------------------------------------------------------------
   Gemessen am 25.08.2026 bei 364 px:
       Polsterung oben der Huelle          50 px
       Logo endet bei 112, Liste ab 202    90 px Abstand
       Liste endet bei 478, Knopf ab 558   80 px Abstand
   Marcel: "das Menue soll ein Stueck weiter oben sein, und unter dem
   Punkt Kontakt zum Knopf nicht so viel Abstand."
   Alle drei Werte kommen aus dem Theme. Sie sind fuer eine lange
   Menueliste gedacht; hier sind es sechs Punkte, dann wirkt es leer.
   =================================================================== */
@media(max-width:767px){
  .tp-offcanvas-area .tp-offcanvas-wrapper{padding-top:34px}
  .tp-offcanvas-area .tp-offcanvas-top{margin-bottom:40px}
  .tp-offcanvas-area .tp-offcanvas-menu{margin-bottom:32px}
}
/* Auf schmalen Geraeten 12px weniger seitliche Polsterung. Grund: Kontakt
   und Symbole brauchen zusammen 272px, bei 364px Fensterbreite blieben mit
   der alten 50er-Polsterung nur 264px - es fehlten genau 8px und die
   Symbole rutschten wieder darunter. Mit 38px sind es 288px.
   Bewusst NICHT die Symbole verkleinert: 42px sind schon knapp fuer eine
   Trefferflaeche, kleiner soll es nicht werden. Unter 340px greift der
   Umbruch weiterhin, dort ist kein Platz mehr fuer eine Zeile. */
@media(max-width:420px){
  .tp-offcanvas-area .tp-offcanvas-wrapper{padding-left:38px;padding-right:38px}
}