/* ============================================================
   Aquanatura Site-Fixes - global geladen, klein gehalten
   ------------------------------------------------------------
   Hier stehen nur Dinge, die auf JEDER Seite gelten muessen:
   1. Fremde Eingangsanimationen stilllegen (sie lassen Inhalte
      dauerhaft unsichtbar haengen).
   2. Der Footer als eine Einheit (Gras + gruene Flaeche).
   3. Sichtbarer Tastatur-Fokus.
   ============================================================ */

/* ------------------------------------------------------------
   1. Fremde Eingangsanimationen stilllegen
   ------------------------------------------------------------
   Elementor und das Agntix-Theme bringen je eine eigene Eingangs-
   animation mit. Beide loesen NUR aus, wenn ein Element von unten
   ins Bild scrollt, und beide verstecken vorher per visibility.

   Gemessen am 28.07.2026 auf der Live-Seite: nach einem Ankersprung
   aus dem Menue, beim Zurueckscrollen oder bei schnellem Scrollen
   loesen sie nie aus. Folge: der Seiten-Banner (aqua_banner,
   _animation=fadeInDown), die gruene Footer-Flaeche und das grosse
   Footer-Logo blieben DAUERHAFT unsichtbar - erst ein Neuladen half.

   Deshalb: sichtbar erzwingen. Die Eingangsbewegung uebernimmt
   ausschliesslich aqua-fade.js, das nichts dauerhaft versteckt
   lassen kann (rAF-Sicherheitsschleife statt Einweg-Auslöser).
   Wichtig: das steht in CSS, nicht nur in JS - faellt das JS aus,
   ist trotzdem alles sichtbar. */
.elementor-invisible {
    visibility: visible !important;
}
/* Elementors Keyframe-Eingaenge (animated fadeInUp/fadeInDown/...) abschalten,
   sonst laeuft zusaetzlich zur eigenen Bewegung noch eine zweite. */
.elementor-element.animated {
    animation-name: none !important;
    animation: none !important;
}
/* Die GSAP-Eingaenge des Themes setzen opacity/transform inline. */
.tp_fade_anim,
.tp_fade_top,
.tp_fade_bottom,
.tp_fade_left,
.tp_fade_right,
.tp_text_anim {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* ------------------------------------------------------------
   2. Footer: Gras und gruene Flaeche sind EIN Element
   ------------------------------------------------------------
   Der Grasstreifen ist ein transparentes WebP (4718x444), dessen
   unterste ~44px bereits das gleiche Gruen tragen wie die Flaeche
   darunter (#4CA139). Er sass in einem WEISSEN Container und wurde
   als eigenes Bild-Widget separat eingeblendet.

   Zwei Fehler daraus, beide von Marcel gemeldet:
   a) Das Bild ist ein Inline-Element und sitzt auf der Textgrundlinie -
      darunter blieb ein weisser Rest im Container stehen: die
      "komische weisse Linie".
   b) Gras und Flaeche kamen nacheinander herein, weil sie zwei
      getrennte Animationen hatten.

   Fix: line-height 0 (kein Grundlinien-Rest), das Bild als Block ueber
   die volle Breite, und eine gruene Sicherheitskante ganz unten, die
   jede Rundungs-Haarlinie zudeckt. Die gemeinsame Einblendung macht
   aqua-fade.js (Klasse aqua-fade--block auf der ganzen Flaeche). */
.aqua-footer-grass {
    position: relative;
    line-height: 0;
    font-size: 0;
}
.aqua-footer-grass > .elementor-widget-image,
.aqua-footer-grass .elementor-widget-container {
    line-height: 0;
    font-size: 0;
}
.aqua-footer-grass img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
}
/* Deckt eine mogliche Halb-Pixel-Fuge zwischen Grasstreifen und Flaeche zu.
   Die untersten Bildzeilen sind ohnehin volles Gruen, das faellt nicht auf. */
.aqua-footer-grass::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 4px;
    background: #4CA139;
    pointer-events: none;
}

/* ------------------------------------------------------------
   3. Footer-Feinschliff
   ------------------------------------------------------------
   Der Footer ist seit 28.07.2026 aus ECHTEN Elementor-Widgets gebaut
   (Ueberschrift, Texteditor, Icon-Liste, Bild, Social Icons), damit der
   Kunde ihn selbst bearbeiten kann. Farben, Groessen und Abstaende stehen
   deshalb in den Elementor-Einstellungen und NICHT hier.

   Hier steht nur, was Elementor nicht kann: der weisse Punkt vor den
   Spaltentiteln, die zweispaltigen Oeffnungszeiten und der Hover-Strich
   unter den Links. Wer den Footer umbaut, aendert also Elementor -
   diese Datei nur fuer diese drei Kleinigkeiten. */
.aqf-coltitle .elementor-heading-title {
    display: flex;
    align-items: center;
    gap: 11px;
}
.aqf-coltitle .elementor-heading-title::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #fff;
}

/* Links: ruhiger Unterstrich beim Darueberfahren, nur mit echtem Zeiger. */
.aqf-links .elementor-icon-list-item > a {
    transition: color .2s cubic-bezier(.23, 1, .32, 1);
}
@media (hover: hover) and (pointer: fine) {
    .aqf-links .elementor-icon-list-item > a:hover {
        color: #fff;
        text-decoration: underline;
        text-underline-offset: 4px;
    }
}
.aqf-links .elementor-icon-list-item > a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Oeffnungszeiten zweispaltig. Der Kunde bearbeitet die Tabelle ganz
   normal im Texteditor-Widget. */
.aqf-hourswrap table.aqf-hours {
    width: 100%;
    border-collapse: collapse;
}
.aqf-hourswrap table.aqf-hours td {
    padding: 0 0 9px;
    border: 0;
    vertical-align: top;
}
.aqf-hourswrap table.aqf-hours td:first-child {
    padding-right: 18px;
    white-space: nowrap;
}
.aqf-hourswrap table.aqf-hours td:last-child {
    text-align: right;
    white-space: nowrap;
}
@media (max-width: 480px) {
    .aqf-hourswrap table.aqf-hours td:last-child { text-align: left; }
}

/* ------------------------------------------------------------
   4. Glas- und Blurboxen sind wieder abgerundet
   ------------------------------------------------------------
   Am 28.07.2026 stand hier eine Sammelregel, die Hero-Karten, Bildrahmen
   UND die Glas-Schilder auf Bildern per border-radius:0 scharfkantig
   gezwungen hat. Das war eine zu weite Auslegung von Marcels Satz "nur
   die Bilder sollen eckig sein" - gemeint waren die Fotos, nicht die
   Bedienelemente darauf.

   Marcel am 29.07.2026: "mach diese Blur-Boxen usw. alle wieder
   abgerundet." Die Sammelregel ist deshalb ERSATZLOS GESTRICHEN. Jedes
   Element traegt seinen eigenen Radius wieder selbst:
     .aqua-hero2-media 16px · .aqua-hero2-testi 24px
     .aqua-hero2-intro--card 16px · .teaser-img 14px
     .aqua-imgbox 22px · .aqua-imgbox__box 14px · .aqe__gcap 14px
   Wer hier wieder eine Sammelregel einbauen will: nicht tun, das war
   genau der Fehler.

   Zwei Nachzuegler brauchen noch Hilfe, weil ihr CSS in den HTML-Widgets
   der noch nicht umgebauten Seiten steht und dort hart auf eckig steht.
   Beim Umbau von Ueber uns (50379) und Kontakt (50340) wandern diese
   beiden Zeilen in die jeweilige Seitendatei und koennen hier weg. */
.ub__herocapbox,
.aqk__pcard {
    border-radius: 14px !important;
}

/* ------------------------------------------------------------
   5. Drohnenvideo auf der Startseite: kein schwarzes Loch mehr
   ------------------------------------------------------------
   Das Video im gepinnten Bildabschnitt (Theme-Widget tp-pin-video) steht auf
   preload="metadata" und hat KEIN poster-Attribut. metadata laedt aber kein
   einziges Bild - solange nicht abgespielt wird, rendert der Browser eine
   schwarze Flaeche. Mitten in einem Raster aus Gartenfotos faellt das sofort
   auf; Marcel hatte es am 29.07.2026 im Screenshot.

   Das Theme-Widget bietet kein Feld fuer ein Vorschaubild an, das beim <video>
   landet. Deshalb liegt das Standbild hier als Hintergrund: es ist zu sehen,
   bis der erste echte Filmbild gezeichnet ist, und verschwindet dann von selbst
   dahinter. preload bleibt auf metadata - die Datei ist 40 MB gross und soll
   nicht ungefragt geladen werden.

   Das Standbild ist Sekunde 6 des Videos (am Anfang und ab Sekunde 21 blendet
   es nach Schwarz - deshalb weder Bild 0 noch das Ende genommen). */
.tp-video-area video {
    background-image: url("https://p-zjich7.project.space/wp-content/uploads/2026/07/pin-video-poster.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ------------------------------------------------------------
   6. Der Strich am Abschnittskopf zeichnet sich
   ------------------------------------------------------------
   Jeder Abschnitt der Website beginnt gleich: gruener Punkt, Wort in
   Grossbuchstaben, danach ein duenner Strich von 46px. Bisher stand der
   Strich einfach da. Jetzt zieht er sich beim Hereinscrollen von links auf.

   Warum das die richtige Stelle ist: es ist die EINE Geste, die auf jeder
   Seite vorkommt, und sie sagt etwas - "hier faengt ein neuer Abschnitt an".
   Sie kostet nichts (ein transform auf einem Pseudoelement), aendert kein
   Layout und ist so klein, dass sie nie im Weg ist. Wer sie nicht bemerkt,
   vermisst nichts; wer sie bemerkt, merkt, dass jemand nachgedacht hat.

   Die Klassen heissen je Seite anders (ub__kicker, aqe__kicker, dg__kicker,
   aqp__kicker, aqpc__kicker, aqs__eyebrow), tragen aber alle denselben
   ::after-Strich. Deshalb hier ueber das Muster im Klassennamen statt sechs
   Einzelregeln, die beim naechsten Abschnitt wieder vergessen wuerden.

   WICHTIG - Sicherheitsnetz: versteckt wird NUR unterhalb von .rv-on, und
   diese Klasse setzt ausschliesslich das Reveal-Skript. Faellt das JavaScript
   aus, kommt .rv-on nie, und die Striche stehen ganz normal da. Ohne diese
   Bedingung waere ein Aussetzer des Skripts gleichbedeutend mit dauerhaft
   unsichtbaren Strichen - genau der Fehler, der am 28.07. den Footer und den
   Seitenbanner unsichtbar gemacht hat. */
.rv-on [class*="__kicker"]::after,
.rv-on [class*="__eyebrow"]::after {
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .85s cubic-bezier(.23, 1, .32, 1) .1s;
}
/* Sowohl der Fall "der Kicker selbst traegt data-rv" (Leistungsseiten) als
   auch "der Kicker liegt in einem data-rv-Block" (Ueber uns). */
.rv-on [data-rv].rv-in [class*="__kicker"]::after,
.rv-on [data-rv].rv-in[class*="__kicker"]::after,
.rv-on [data-rv].rv-in [class*="__eyebrow"]::after,
.rv-on [data-rv].rv-in[class*="__eyebrow"]::after {
    transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
    .rv-on [class*="__kicker"]::after,
    .rv-on [class*="__eyebrow"]::after {
        transform: none !important;
        transition: none !important;
    }
}

/* ------------------------------------------------------------
   7. Sichtbarer Tastatur-Fokus
   ------------------------------------------------------------
   Das Theme entfernt den Fokusring an mehreren Stellen. Wer mit der
   Tastatur navigiert, sieht sonst nicht, wo er ist. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid #4CA139;
    outline-offset: 3px;
}

/* ------------------------------------------------------------
   8. FAQ: die Frage darf nicht unter den Plus-Knopf laufen
   ------------------------------------------------------------
   Das Theme setzt den runden Knopf mit position:absolute an den rechten Rand
   der Schaltflaeche, reserviert dafuer aber keinen Platz: .accordion-buttons
   hat padding-right:0. Solange die Frage kurz ist, faellt das nicht auf.

   Gemessen am 30.07.2026 auf der Startseite bei 390px Bildbreite: der Knopf
   liegt bei x=319 bis 355, die Schaltflaeche geht von 15 bis 375. Drei der
   sieben Fragen laufen unter den Knopf:
     "Wie laeuft ein Projekt mit Aquanatura ab?"            19px darunter
     "Uebernehmen Sie auch die Pflege nach der Fertig..."   38px darunter
     "Kann ich Ihren Schaugarten besuchen?"                 15px darunter
   Im Screenshot fehlen dadurch die letzten Zeichen samt Fragezeichen.

   Die Regel gilt bewusst auf JEDER Breite, nicht nur am Handy: am Rechner
   bleiben nach der Aenderung immer noch 396 bis 781px Luft (gemessen bei
   1440px), es aendert sich dort also nichts. Am Handy bricht die Frage jetzt
   um, statt abgeschnitten zu werden. 56px sind die Knopfbreite (36px) plus
   20px Abstand.

   Das !important ist noetig und keine Bequemlichkeit: die Regel steht
   nachweislich im geladenen Stylesheet (im Browser geprueft: aqua-site.css,
   Selektor .accordion-buttons, padding-right 56px), der berechnete Wert blieb
   trotzdem 0px. Eine Theme-Regel mit hoeherer Spezifitaet setzt ihn zurueck.
   Sie liess sich ueber die Stylesheet-Liste nicht eindeutig benennen, weil ein
   Teil der Theme-Selektoren beim Abgleich eine Ausnahme wirft. Die Ausnahme
   bleibt deshalb eng auf diese eine Eigenschaft begrenzt. */
.accordion-buttons {
    padding-right: 56px !important;
}

/* ------------------------------------------------------------
   9. Knopf direkt unter einem Bild braucht Abstand
   ------------------------------------------------------------
   Auf der Startseite folgt dem Portraet von Johannes Haas der Knopf
   "Mehr ansehen". Am Handy stehen beide untereinander und der Abstand war
   gemessen 0,0px - Bild und Knopf klebten aneinander und sahen nach
   Kollision aus statt nach Layout.

   Der saubere Weg waere ein Handy-Aussenabstand am Knopf-Widget. Der Wert
   laesst sich in Elementor auch speichern (_margin_mobile ist im Baum
   vorhanden, nachgeprueft), Elementor gibt ihn fuer dieses Widget aber nicht
   als CSS aus - im erzeugten post-47206.css steht keine Handy-Regel dafuer.
   Deshalb hier.

   Der Geschwister-Selektor trifft nur den Fall "Knopf steht unmittelbar unter
   einem Bild-Widget". Am Rechner stehen die beiden in verschiedenen
   Containern, dort greift die Regel gar nicht. */
.elementor-widget-aqua_imagebox + .elementor-widget-aqua_button {
    margin-top: 28px;
}

/* ------------------------------------------------------------
   10. Projekttitel auf der Startseite duerfen umbrechen
   ------------------------------------------------------------
   Die Projektkacheln der Startseite kommen aus dem Theme (tp-project-box).
   Ihre Titel stehen in einer festen Spaltenbreite und brechen nicht um.
   Gemessen am 30.07.2026 bei 768px Bildbreite, echter Ueberlauf
   (scrollWidth gegen clientWidth):
     "Fassadenbegruenung"             66px
     "Apotheke Heilkraeutergarten"    48px
     "Natursteinmauer mit Wasserwand" 23px
     "Naturpool mit Natursteinmauer"  23px
   Bei 390px und 576px passt es, dort ist die Kachel breiter im Verhaeltnis.

   Silbentrennung zuerst (die Seite ist auf lang="de", deutsche Trennregeln
   greifen), harter Umbruch als Netz. Damit kann kein Titel mehr herausragen,
   auch keiner, den der Kunde spaeter ergaenzt. Am Rechner aendert sich nichts,
   dort passen alle Titel in eine Zeile. */
.tp-project-title {
    hyphens: auto;
    overflow-wrap: break-word;
}

/* ------------------------------------------------------------
   11. Elementors Handy-Umbruch bei unseren Widgets abschalten
   ------------------------------------------------------------
   Elementor setzt auf Containern am Handy flex-wrap:wrap
   (--flex-wrap-mobile). Bei einem Widget, dessen Hoehe aus aspect-ratio
   kommt, hat das eine unangenehme Folge: die Elementor-Huelle bekommt nicht
   mehr die Inhaltshoehe, sondern nur den Rest der Spalte - im schlimmsten Fall
   null. Der Inhalt steht dann sichtbar da, nimmt im Layout aber keinen Platz
   ein, und der Folgeabschnitt wird darueber gezeichnet.

   Zweimal gemessen und beide Male bestaetigt:
     Planung & Gestaltung, Vorher/Nachher-Regler bei 390px:
       Huelle 180px gegen Buehne 270px, die Ueberschrift lag auf dem Foto.
     Schaugarten, Drohnenvideo bei 390px nach der Aufteilung in Abschnitte:
       Huelle 0px gegen Video 293px, der Rundgang begann an derselben Stelle
       wie das Video, die Seite war 293px zu kurz.
   Am Rechner tritt es nicht auf, dort stehen dieselben Container ohnehin auf
   nowrap (nachgemessen).

   Die Regel greift nur bei Containern, die direkt eines UNSERER Widgets
   enthalten (Praefix elementor-widget-aqua_). Fremde Container bleiben
   unberuehrt. Auf diesen Seiten ist ein Umbruch in einer Flex-SPALTE ohnehin
   nie gewollt - die Abschnitte stehen untereinander. */
/* Das !important ist noetig: Elementor setzt flex-wrap ueber eine eigene
   Regel auf .e-con-inner, die bei gleicher Spezifitaet gewinnt. Nachgemessen
   am 31.07.2026 auf Bau & Stein - der Selektor traf (matches lieferte true),
   der berechnete Wert blieb trotzdem "wrap", und die Huelle des
   Zwischenband-Abschnitts war 44px statt 263px hoch. */
.e-con:has(> [class*="elementor-widget-aqua_"]),
.e-con-inner:has(> [class*="elementor-widget-aqua_"]) {
    flex-wrap: nowrap !important;
}

/* 12) Sichtbarer Fokusring.
   Das Theme setzt an jedem Bedienelement outline-style:none - gemessen am
   31.07.2026 an Burger, Logo-Link, Kopfmenue-Links und Knoepfen: outline-width
   steht auf 3px, der Stil aber auf none, der Ring ist also unsichtbar. Wer die
   Seite mit der Tastatur bedient, sieht zu keinem Zeitpunkt, wo er steht
   (WCAG 2.4.7, Stufe AA - dieselbe Norm, mit der die Menuefarben begruendet sind).

   :focus-visible statt :focus - der Ring erscheint nur bei Tastaturbedienung.
   Fuer Maus und Touch aendert sich NICHTS, die Seite sieht unveraendert aus.

   currentColor statt einer festen Farbe: die Website hat helle und dunkle
   Bereiche (weisser Inhalt, dunkler Kopfbereich ueber dem Hero, dunkle
   Abschnitte). Ein fester Ton waere auf einer der beiden Seiten unsichtbar.
   currentColor uebernimmt die Schriftfarbe des Elements und hat damit
   automatisch denselben Kontrast wie der Text, der ohnehin lesbar sein muss.
   Absichtlich kein Gruen: #4CA139 bleibt den Knoepfen vorbehalten.

   !important ist noetig, weil die Theme-Regel sonst gewinnt. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid currentColor !important;
    outline-offset: 3px;
}

/* ============================================================
   Verweise im Fliesstext
   ------------------------------------------------------------
   Seit 09.08.2026 stehen inhaltliche Verweise zwischen den
   Kernseiten mitten im Text ("... und der Gartenpflege").

   OHNE DIESE REGEL WAREN SIE UNSICHTBAR: gemessen am selben Tag
   trugen sie exakt dieselbe Farbe wie der Fliesstext,
   text-decoration: none und dasselbe Schriftgewicht. Ein Verweis,
   den niemand als solchen erkennt, wird nicht geklickt - und ein
   nicht geklickter Verweis ist fuer die Besucher wertlos.

   Bewusst NEUTRAL und nicht gruen: Gruen ist auf dieser Website
   den Schaltflaechen vorbehalten. Die Unterstreichung sitzt
   tiefer als serienmaessig und ist gedaempft, damit ein Absatz
   mit zwei Verweisen nicht unruhig wirkt.

   Der Zugriff ist eng gefasst: nur Verweise OHNE eigene Klasse
   innerhalb eines Absatzes oder Listeneintrags im Seiteninhalt.
   Schaltflaechen, Kacheln und Menuepunkte tragen immer eine
   Klasse und bleiben damit unberuehrt.
   ============================================================ */
[data-elementor-type="wp-page"] p > a:not([class]),
[data-elementor-type="wp-page"] li > a:not([class]) {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: rgba(20, 20, 20, .38);
    transition: text-decoration-color .2s ease, color .2s ease;
}

[data-elementor-type="wp-page"] p > a:not([class]):hover,
[data-elementor-type="wp-page"] li > a:not([class]):hover,
[data-elementor-type="wp-page"] p > a:not([class]):focus-visible,
[data-elementor-type="wp-page"] li > a:not([class]):focus-visible {
    text-decoration-color: currentColor;
}

/* Auf dunklem Grund - dort ist der Text hell. */
.aqe--dunkel [data-elementor-type="wp-page"] p > a:not([class]),
[data-elementor-type="wp-page"] .aqe--dunkel p > a:not([class]),
[data-elementor-type="wp-page"] .ub--dunkel p > a:not([class]) {
    text-decoration-color: rgba(255, 255, 255, .45);
}

/* ============================================================
   Seitenabstand zwischen 1401 und 1557 px Fensterbreite
   ------------------------------------------------------------
   GEMESSEN am 10.08.2026 auf /leistungen/planung-gestaltung/:

     1400 px  Ueberschrift bei x = 130    (in Ordnung)
     1410 px  Ueberschrift bei x =   0    <- klebt am Rand
     1440 px  Ueberschrift bei x =   0    <- klebt am Rand
     1510 px  Ueberschrift bei x =   0    <- klebt am Rand
     1600 px  Ueberschrift bei x =  45    (in Ordnung)

   URSACHE: Der Elementor-Behaelter traegt bis 1400 px eine
   Hoechstbreite von 1140 px und ist damit zentriert - daher der
   Abstand. Ab 1401 px springt die Hoechstbreite auf 1510 px.
   Solange das Fenster SCHMALER als 1510 px ist, fuellt der
   Behaelter es vollstaendig aus, und zwar ohne jeden
   Innenabstand. Erst oberhalb von 1510 px entsteht wieder Luft,
   und die erreicht bei 1558 px die ersten 24 px.

   Betroffen ist damit ausgerechnet der Bereich 1401 bis 1557 px
   - also 1440 und 1536, zwei der haeufigsten Laptop-Breiten
   ueberhaupt. Ueberschrift, Absatz und Ablaufliste standen dort
   buchstaeblich am Fensterrand.

   DIE RECHNUNG: Der Zuschlag laeuft genau dort aus, wo der
   natuerliche Abstand die 24 px erreicht - (1558 - Fensterbreite)
   / 2. Bei 1440 px sind das 59 px, bei 1510 px noch 24 px, ab
   1558 px null. Dadurch gibt es keinen Sprung beim Umschalten.

   NUR TEXTFUEHRENDE ABSCHNITTE, und das ist Absicht: Die
   Vorher-Nachher-Bilder laufen bewusst randlos ueber die ganze
   Breite und bleiben unberuehrt. Vor dem Einbau geprueft, dass
   die betroffenen Abschnitte weder Hintergrundfarbe noch
   Hintergrundbild tragen - das Einruecken ist also nur am Text
   zu sehen, nicht an einer verschobenen Flaeche.

   Nachgemessen auf acht Seiten: klebende Stellen 21 -> 0 bzw.
   4 -> 0, Seitenhoehe in allen Faellen unveraendert.
   ============================================================ */
@media (min-width: 1401px) and (max-width: 1557px) {
    [data-elementor-type="wp-page"] .e-con-inner:has(.tp-el-container),
    [data-elementor-type="wp-page"] .e-con-inner:has(.aqua-process),
    [data-elementor-type="wp-page"] .e-con-inner:has(.aqbx),
    [data-elementor-type="wp-page"] .e-con-inner:has(.aqwb__layout) {
        padding-inline: min(60px, calc((1558px - 100vw) / 2));
    }
}

/* ============================================================
   Klickflaeche der Teilen-Knoepfe in der Social Wall
   ------------------------------------------------------------
   GEMESSEN am 10.08.2026: Die Teilen-Knoepfe des Feed-Plugins
   sind 16 x 17 px gross - zwoelf Stueck auf Startseite und
   "Ueber uns". Googles Mindestmass fuer ein Tippziel sind
   24 x 24 px, empfohlen sind 48. Mit dem Finger trifft man
   17 px schlicht nicht zuverlaessig.

   Das Feed-Plugin bleibt unangetastet - hier wird nur von
   aussen die Flaeche vergroessert. Das SYMBOL behaelt seine
   Groesse, es bekommt nur Luft ringsum; optisch aendert sich
   dadurch nichts Sichtbares.
   ============================================================ */
.sbsw-share-button,
a.sbsw-share-button {
    min-width: 32px;
    min-height: 32px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   16. Auswahlfeld im Anfrageformular: Text senkrecht mittig
   ============================================================
   Marcel, 10.08.2026: "beim Auswählen-Dropdown ist das Wort nicht mittig,
   und das Ausgewählte auch nicht."

   GEMESSEN auf /kontakt/ (1440px):
       Kasten 56px hoch
       padding-top 0px, padding-bottom 13px   <- asymmetrisch
       Luft ueber dem Text  9,5px
       Luft unter dem Text 22,5px

   Das Feld ist kein natives <select>, sondern das Choices-Bauteil. Dessen
   Regeln stehen als Inline-CSS auf der Seite selbst und setzen zwar
   "display:flex; align-items:center", aber ein einseitiges padding-bottom
   hebelt das aus: Flex zentriert innerhalb der INHALTSBOX, und die sitzt
   durch das einseitige Polster 13px zu weit oben. Deshalb rutschte der Text
   nach oben statt in die Mitte.

   Richtig ist, oben und unten gar kein Polster zu setzen und die Hoehe
   allein ueber min-height zu halten - dann zentriert Flex sauber. Seitlich
   bleibt es, wie es war (46px rechts fuer den Pfeil, 16px links).

   ⚠️ Die Spezifitaet ist mit Absicht eine Stufe hoeher (.choices dazwischen):
   Die Seiten-Regel traegt selbst !important, und bei gleichem Gewicht
   gewinnt die spaeter geladene - das waere das Inline-CSS der Seite. */
.aqk .choices .choices__inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
}
/* Der Textträger selbst darf keine eigene Hoehe erzwingen, sonst verschiebt
   er die Mitte wieder - Choices setzt hier je nach Zustand unterschiedliche
   Polster (Platzhalter vs. ausgewaehlter Wert). */
.aqk .choices .choices__list--single {
    padding: 0 !important;
    width: 100%;
    display: flex !important;
    align-items: center !important;
}

/* ============================================================
   17. FAQ-Abschnitt: Einleitung linksbuendig, Luft nach oben
   ============================================================
   Beides Marcel, 10.08.2026.

   (a) EINLEITUNGSTEXT stand weit rechts eingerueckt.
       GEMESSEN auf der Startseite bei 1440px:
           Container beginnt bei  74 px
           Ueberschrift bei       74 px
           Einleitungstext bei   487 px   <- 413 px eingerueckt
       Ursache ist ein margin-left:413px, das die Theme-Vorlage auf
       p.tp-el-content setzt. Der Text soll unter der Ueberschrift beginnen,
       nicht in der Mitte. Bewusst NUR im FAQ-Kopf ueberschrieben
       (.ar-hero-title-box), damit dieselbe Theme-Klasse anderswo unberuehrt
       bleibt.

   (b) LUFT UEBER DEM FAQ. Auf /leistungen/planung-gestaltung/ folgte die
       Ueberschrift "Häufige Fragen zur Gartenplanung" mit nur 48 px Abstand
       auf die Bildergalerie darueber - sie klebte daran. 112 px setzen den
       Abschnitt sichtbar ab, ohne ein Loch zu reissen; am Handy die Haelfte,
       dort ist der Bildschirm knapper. */
.ar-hero-title-box p.tp-el-content,
.tp-faq-area .tp-el-content,
[class*="faq"] .ar-hero-title-box p.tp-el-content {
    margin-left: 0 !important;
}

/* ---- Abstaende am FAQ-Bereich, KORRIGIERT am 20.08.2026 ----

   Vorher stand hier margin-top:112px auf .elementor-widget-tp-faq. Die
   Absicht war Luft UEBER dem FAQ-Bereich. Der Selektor trifft aber nur das
   FRAGEN-Widget - der Titel ist ein eigenes Widget (tp-about-heading) davor.
   Die Luft landete deshalb ZWISCHEN Titel und Fragen.

   Gemessen bei 2560 x 1305, /leistungen/planung-gestaltung/:
     Karussellbild endet 9659, FAQ-Kicker beginnt 9660  ->   1 px
     Titel endet 9766, erste Frage beginnt 9926         -> 160 px
   Der Titel klebte also am fremden Abschnitt und schwebte weit ueber seinen
   eigenen Fragen.

   Jetzt haengt die Luft am Container, der BEIDE Widgets enthaelt, und das
   Fragen-Widget bekommt keinen Aufschlag mehr. Uebrig bleiben 48 px zwischen
   Titel und erster Frage - eng genug, dass die Gruppe zusammenhaelt.
   192 aussen zu 48 innen ist das Verhaeltnis 1:4.

   Nur zwei Seiten benutzen das Theme-FAQ: planung-gestaltung und die zehn
   Ortsseiten. Alle anderen haben eigene FAQ-Widgets aus dem Plugin. */
.e-con:has(> .e-con-inner > .elementor-widget-tp-faq),
.e-con:has(> .e-con-inner > .elementor-element > .elementor-widget-container > .tp-faq) {
    margin-top: clamp(72px, 7.5vw, 192px);
}
/* Kein Aufschlag mehr am Fragen-Widget selbst. */
.elementor-widget-tp-faq,
.tp-faq-area,
.elementor-element:has(> .elementor-widget-container > .tp-faq) {
    margin-top: 0;
}

/* Fragen auf dieselbe linke Kante wie die Ueberschrift.
   Das Theme legt die Fragen in ein Bootstrap-Raster (.row > .col-lg-12) und
   gibt dem Aufklapp-Knopf eine eigene Einrueckung (.acc_padding). Zusammen
   standen sie 31 px weiter rechts als der Titel darueber - bei 2560 px gut zu
   sehen. Nur die LINKE Seite wird zurueckgesetzt: der Abstand nach rechts
   traegt das Plus-Zeichen, und die senkrechten Abstaende bleiben unberuehrt. */
.elementor-widget-tp-faq .row { --bs-gutter-x: 0; }
.elementor-widget-tp-faq .accordion-buttons,
.elementor-widget-tp-faq .accordion-body { padding-left: 0; }

/* ============================================================
   18. Luft unter dem Seitenbanner
   ============================================================
   Marcel, 10.08.2026: "beim Pool & Teich klebt der erste Abschnitt zu sehr
   am Banner".

   GEMESSEN auf /leistungen/wasser-im-garten/ bei 1440px: Banner-Unterkante
   500 px, Oberkante der Sprungliste 500 px - Abstand exakt 0. Der Inhalt
   beginnt also unmittelbar an der Bildkante.

   Der Abstand haengt bewusst am Banner-Widget und nicht an der Sprungliste:
   So bekommt JEDE Seite denselben Auftakt, egal welcher Abschnitt zuerst
   kommt. 64 px setzen den Inhalt ab, ohne ein Loch zu reissen; am Handy die
   Haelfte, dort ist der Bildschirm knapper. */
/* ⚠️ !important ist hier noetig, nicht Bequemlichkeit: Elementor setzt den
   Aussenabstand seiner Widgets ueber eigene Regeln, die spaeter geladen
   werden als diese Datei. Ohne !important blieb margin-bottom bei 0 -
   nachgemessen am 10.08.2026 auf drei Leistungsseiten, Luecke jeweils 0 px,
   obwohl die Regel hier stand.
   Zusaetzlich der umgebende Container: Das Banner liegt in einem e-con-Kind,
   und in einem Flex-Container wirkt der Abstand des Kindes nicht immer nach
   aussen. */
/* ⚠️ NUR das Widget, NICHT zusaetzlich der Container: Beide zusammen
   ergaben 144 statt 72 px - der Abstand addierte sich, weil das Banner das
   einzige Kind seines Containers ist und beide Regeln griffen (gemessen
   10.08.2026 auf vier Seiten). */
.elementor-widget-aqua_banner {
    margin-bottom: 72px !important;
}
@media (max-width: 767px) {
    .elementor-widget-aqua_banner { margin-bottom: 36px !important; }
}

/* ===================================================================
   Abschnittskopf des Themes: Abstand zwischen Ueberschrift und Text
   -------------------------------------------------------------------
   Der Kopf tp-about-heading traegt am h2 die Klasse pb-30, die aber von
   einer Theme-Regel auf 0 gesetzt wird. Auf Planung & Gestaltung sass der
   Abstand trotzdem, weil aqua-planung.css dem Absatz 26px gab. Als am
   24.08.2026 die Planungs-Widgets von den Ortsseiten flogen, wurde jenes
   Stylesheet dort nicht mehr geladen - und der Text klebte direkt an der
   Ueberschrift (gemessen: 0px auf der Ortsseite, 26px auf Planung).

   Der Abstand gehoert nicht in ein Stylesheet, das nur zufaellig mitlaedt.
   Deshalb hier in aqua-site.css, das auf jeder Seite dabei ist. Wert
   unveraendert 26px, damit sich am Original nichts verschiebt.
   =================================================================== */
.tp-career-title.pb-30 + p{margin-top:26px}

/* ===================================================================
   Theme-Abschnittskoepfe auf dieselbe Kante wie unsere Abschnitte
   -------------------------------------------------------------------
   Unsere Abschnitte sitzen in .aqe__wrap:
       max-width:1510px; margin-inline:auto;
       padding-inline:clamp(20px,4vw,40px)
   Die Theme-Widgets (tp-about-heading, tp-faq) haben diese Polsterung
   nicht. Ergebnis auf den Ortsseiten: der Auftakt und der FAQ-Kopf
   standen bei jeder Breite genau 40px weiter aussen als alles andere
   (gemessen bei 2560: 525 statt 565). Marcel am 25.08.2026: "da passt
   die Layoutbreite von dem Gartengestaltung-Abschnitt nicht, die ist
   viel zu breit."

   Nicht mit festen Werten nachgebaut, sondern DIESELBE Regel: nur so
   stimmt es auch an den Breakpoints dazwischen, wo beide Familien
   unterschiedlich boxen.

   ANGEHAENGT WIRD UEBER DIE ABSCHNITTS-ID, nicht ueber eine Klasse:
   Elementor gibt _css_classes nur an WIDGETS aus, an Containern nicht
   (am 25.08.2026 mit drei Proben nachgewiesen). _element_id rendert
   dagegen zuverlaessig. Die ID schlaegt ausserdem Elementors eigene
   Abstandsregel, die mit (0,3,0) sonst gewinnen wuerde.

   Die Polsterung MUSS am geboxten Innencontainer sitzen. Am aeusseren
   Abschnitt bleibt sie bei breiten Fenstern wirkungslos, weil der
   Innencontainer ohnehin auf 1510px deckelt und sich mittig setzt.
   =================================================================== */
#aqua-kopf-auftakt,
#aqua-kopf-faq{
  padding-inline:clamp(20px,4vw,40px);
}

/* Im Laptop-Bereich (gemessen bei 1440) legt das Theme auf BEIDE Huellen
   des Auftakts noch einmal 59px seitlich. Die stapeln sich auf unsere
   Polsterung und schoben den Kopf auf 158 statt 40. Bei allen anderen
   Breiten steht dort ohnehin 0, das Nullsetzen kostet also nichts. */
#planung > .e-con-inner,
#aqua-sec-faq > .e-con-inner,
#aqua-kopf-auftakt > .e-con-inner,
#aqua-kopf-faq > .e-con-inner{
  padding-inline:0;
}

/* ===================================================================
   Startseite, Zahlenreihe im Aquanatura-Abschnitt
   -------------------------------------------------------------------
   Die Zahl "2 000 m²" braucht bei 70px Schriftgrad 251px Platz. Die
   beiden Zaehler teilen sich ihre Spalte zu je 50 Prozent:

       Fenster 2560 -> Spalte 570 -> je 270px   passt
       Fenster 1500 -> Spalte 553 -> je 261px   passt
       Fenster 1400 -> Spalte 397 -> je 183px   PASST NICHT
       Fenster  844 -> Spalte 375 -> je 172px   PASST NICHT

   Unterhalb von 1500 schrieben sich "2 000m²" und "500+" also
   uebereinander (Marcel, 25.08.2026, mit Screenshots bei 844 und 1400).

   Nicht an Breakpoints geraten: die Spaltenbreite haengt hier nicht
   linear am Fenster, sie springt bei 1366 von 553 auf 397 und bei 1200
   wieder auf 575. Deshalb umbrechen lassen, sobald es nicht mehr passt.
   255px Mindestbreite = die 251px der Zahl plus etwas Luft.
   =================================================================== */
#aqua-zahlen{
  flex-wrap:wrap;
}
/* width:auto muss mit: die Zaehler tragen von Elementor width:50%. Mit
   Umbruch und 30px Spalt ergibt 50% + 50% + 30px mehr als die volle
   Breite, dann brechen sie SOFORT um - auch bei 2560, wo sie bequem
   nebeneinander passen. Mit flex-basis statt Prozent rechnet der Spalt
   sich richtig ein: nebeneinander solange Platz ist, sonst untereinander. */
/* ⚠️ flex-basis MUSS auto bleiben (korrigiert 25.08.2026 abends).
   Hier stand "flex:1 1 255px". Am Handy steht diese Reihe als SPALTE, und
   in einer Spalte ist die Hauptachse die Hoehe - aus den 255px wurde dort
   eine Mindesthoehe je Zaehler. Gemessen bei 364px: jeder Zaehler 255px
   hoch, obwohl Zahl und Beschriftung zusammen nur rund 110px brauchen.
   Marcel: "da ist viel zu viel Abstand dazwischen und darunter."
   Mit flex-basis:auto kommt die Grundgroesse aus dem Inhalt - in der Reihe
   die Breite, in der Spalte die Hoehe. min-width wirkt nur waagrecht und
   sorgt weiterhin dafuer, dass "2 000 m²" nie in den Nachbarn laeuft. */
#aqua-zahlen > .elementor-element{
  width:auto;
  flex:1 1 auto;
  min-width:255px;
}