/* ---- Aquanatura Footer ----
 *
 * 1:1 uebernommen aus der HTML-Fassung des Footers (Vorlage 2180, Stand
 * 28.07.2026 16:56). Der Footer wurde danach auf ein echtes Elementor-Widget
 * (aqua_footer) umgestellt, damit der Kunde die Inhalte selbst bearbeiten kann.
 * Die Regeln hier sind bewusst UNVERAENDERT geblieben, damit die Seite exakt
 * gleich aussieht. Wer hier etwas aendert, aendert das Aussehen.
 */

/* Bodenabstand 112px: der fixe Nach-oben-Knopf belegt 50-94px ueber der Unterkante */
/* Weisstoene angehoben (Marcel, 29.07.2026: "nicht alles so transparent weiss,
 * den Text ein bisschen weisser"). Vorher .8 / .62 - auf dem kraeftigen Gruen
 * wirkte das ausgewaschen. Jetzt .94 / .84: die Abstufung zwischen Ueberschrift,
 * Fliesstext und Nebenangabe bleibt erhalten, aber alles liest sich als Weiss. */
.aqf{--aqf-w:#fff;--aqf-soft:rgba(255,255,255,.94);--aqf-dim:rgba(255,255,255,.84);--aqf-line:rgba(255,255,255,.22);--aqf-ease:cubic-bezier(.23,1,.32,1);color:var(--aqf-w);padding:58px 0 112px}
.aqf *,.aqf *::before,.aqf *::after{box-sizing:border-box}
/* Der Seitenabstand der Fusszeile.
   92% ergeben 4% Rand je Seite - unter 500px Bildschirmbreite sind das
   weniger als die 20px, die der Seiteninhalt ueberall haelt
   (padding-inline:clamp(20px,4vw,40px)). Am Handy stand die Fusszeile
   deshalb weiter aussen als alles darueber, die Kante sprang beim Scrollen
   sichtbar nach links (gemessen 31.07.2026 bei 390px: 15,59 gegen 20,00;
   bei 360px 14,41 gegen 20,00).
   min() nimmt den kleineren der beiden Werte: unter 500px greift der feste
   20px-Rand, darueber bleibt es bei 92% wie bisher. Bei genau 500px sind
   beide gleich, der Uebergang ist also stufenlos.
   Der Deckel ist 1500px (04.08.2026). Vorher 1320 - da stand die Fusszeile
   deutlich schmaler als die Kopfleiste. Auf exakt Header-Breite (1650, der
   Wert aus aqua-header.css bzw. --h2-content-maxw des Hero) gestellt war sie
   Marcel zu breit; 1500 ist der Mittelweg dazwischen. Die Breitenformel ist
   dieselbe wie beim Header (92%), nur der Deckel liegt bewusst 150px
   darunter - das ist Absicht, kein vergessener Abgleich. */
.aqf__inner{width:min(92%,calc(100% - 40px));max-width:1500px;margin:0 auto}
.aqf__top{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.95fr) minmax(0,.95fr) minmax(0,1.5fr);gap:52px 48px;align-items:start}
.aqf__claim{margin:0 0 16px;font-size:clamp(28px,2.6vw,37px);font-weight:600;line-height:1.1;letter-spacing:-.03em;color:var(--aqf-w)}
.aqf__sub{margin:0;max-width:24ch;font-size:clamp(17px,1.3vw,19px);font-weight:400;line-height:1.55;letter-spacing:-.01em;color:var(--aqf-soft)}
.aqf__social{display:flex;gap:12px;margin-top:32px}
.aqf__soc{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:999px;border:1px solid rgba(255,255,255,.45);color:var(--aqf-w);text-decoration:none;transition:background-color .5s var(--aqf-ease),border-color .5s var(--aqf-ease),color .5s var(--aqf-ease),transform .5s var(--aqf-ease)}
/* Drei moegliche Quellen fuer das Zeichen, alle gleich gross (18px):
 * 1. das eingebaute Inline-SVG (Rueckfall),
 * 2. ein hochgeladenes SVG aus der Mediathek,
 * 3. ein Zeichen aus der Icon-Bibliothek (<i> mit Icon-Schrift).
 * Die 18px stehen absichtlich doppelt (svg und i), damit die Knopfgroesse
 * 46px unveraendert bleibt, egal was gewaehlt wurde. */
.aqf__soc svg{display:block;flex:0 0 auto;width:18px;height:18px;fill:currentColor}
.aqf__soc i{display:block;flex:0 0 auto;width:18px;height:18px;font-size:18px;line-height:18px;text-align:center;font-style:normal}
.aqf__soc i::before{line-height:inherit}
.aqf__h{display:flex;align-items:center;gap:12px;margin:0 0 24px;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.02em;color:var(--aqf-w)}
.aqf__h::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--aqf-w)}
.aqf__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.aqf__list li{margin:0;padding:0}
.aqf__list a{position:relative;display:inline-block;color:var(--aqf-soft);text-decoration:none;font-size:16px;line-height:1.45;letter-spacing:-.01em;transition:color .45s var(--aqf-ease)}
.aqf__list a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .55s var(--aqf-ease)}
.aqf__list--kontakt a::after{display:none}
.aqf__col--kontakt{display:grid;gap:36px}
.aqf__hours{display:grid;grid-template-columns:max-content 1fr;column-gap:18px;row-gap:9px;margin:0}
.aqf__hours dt{margin:0;font-size:15px;line-height:1.45;letter-spacing:-.01em;color:var(--aqf-dim)}
.aqf__hours dd{margin:0;font-size:15px;line-height:1.45;letter-spacing:-.01em;color:var(--aqf-w)}
/* Ohne Trennlinie (Marcel, 29.07.2026). Der frei gewordene Platz wird nicht
   voll aufgefuellt, damit die Wortmarke hoeher sitzt: vorher 64+48=112px
   Abstand, dann 64+12=76px, jetzt 16+0=16px.
   Warum so wenig: .aqf__top ist ein Raster mit align-items:start, die
   Zeilenhoehe bestimmt die HOECHSTE Spalte (Kontakt + Oeffnungszeiten). Die
   Wortmarke steht aber links unter den beiden KURZEN Spalten. In ihrem
   Streifen lagen dadurch ueber 200px leeres Gruen statt der 76px. Die 16px
   gelten deshalb nur im breiten Raster - ab 1150px stapeln die Spalten und
   der alte Wert kommt zurueck, sonst klebt die Marke an der Kontaktspalte. */
.aqf__bottom{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:28px 40px;margin-top:16px;padding-top:0}
/* 26.08.2026: linke Haelfte der Fusszeile - Wortmarke, darunter Copyright und
   Rechtslinks. Rechts daneben sitzt das Partnerlogo.
   min-width:0 ist Pflicht: ein Flex-Kind waechst sonst mit seinem Inhalt und
   schiebt das Logo aus der Zeile. */
.aqf__bottomlinks{flex:1 1 auto;min-width:0}
.aqf__brandmark{flex:0 1 auto;width:min(58%,560px);min-width:220px}
/* position:relative + die beiden Variablen sind die Angriffspunkte der Regler
 * "Waagrecht/Senkrecht verschieben" im Widget. Zwei getrennte Elementor-Regeln
 * koennen sich nicht beide "transform" teilen (die spaetere gewinnt komplett),
 * deshalb schreibt jeder Regler nur seine Variable. */
.aqf__mark{display:block;width:100%;height:auto;border-radius:0;position:relative;transform:translate(var(--aqf-mx,0px),var(--aqf-my,0px))}
/* Grundversatz nach oben, nur im breiten Raster.
   Im Fluss ist Schluss: die hohe Kontaktspalte bestimmt die Rasterzeile, im
   Streifen der Wortmarke bleiben dadurch rund 145px leeres Gruen, das kein
   Abstandswert wegnehmen kann. Ein Versatz holt sie da heraus, ohne Layout
   auszuloesen. 56px sind gemessen: darunter bleiben noch rund 70px Luft zu
   den Social-Zeichen darueber, es wird also nirgends eng.
   Marcel 29.07.2026: "das Logo muss weiter nach oben, du siehst ja eh dass
   das gut reinpasst."
   Unterhalb von 1150px stapeln die Spalten, dort ist der Platz echt und der
   Versatz waere falsch - deshalb nur ab 1151px. Der Regler "Senkrecht
   verschieben" ueberschreibt diesen Wert; steht er auf 0, gilt der hier. */
@media (min-width:1151px){
    .aqf__mark{--aqf-my:-56px}
}
.aqf__copy{margin:24px 0 0;font-size:16px;line-height:1.5;letter-spacing:-.02em;color:var(--aqf-soft)}
/* Copyright und Rechtslinks in EINER Zeile, links unten.
   Marcel 26.08.2026: "die Links wie Datenschutz und Impressum und AGB zur
   linken Seite rueber machen, neben den Copyright-Text."
   baseline statt center: Copyright und Links haben dieselbe Schriftgroesse,
   aber die Links tragen einen Unterstrich im :hover - an der Grundlinie
   ausgerichtet sitzen sie sauber auf einer Hoehe. */
/* center statt baseline: in der Zeile steht seit 26.08. auch das Partnerlogo,
   und das ist rund 58px hoch gegen 24px Textzeile. An der Grundlinie
   ausgerichtet haenge es weit ueber die Zeile hinaus. */
.aqf__rechtszeile{display:flex;flex-wrap:wrap;align-items:center;gap:10px 40px;margin-top:24px}
/* Der Abstand steckt jetzt in der Zeile, nicht mehr im Copyright selbst -
   sonst haetten die Links keinen. */
.aqf__rechtszeile .aqf__copy{margin:0}
.aqf__meta{list-style:none;display:flex;flex-wrap:wrap;gap:12px 44px;margin:0;padding:0}
.aqf__meta li{margin:0;padding:0}
.aqf__meta a{position:relative;display:inline-block;color:var(--aqf-soft);text-decoration:none;font-size:16px;line-height:1.5;letter-spacing:-.02em;transition:color .45s var(--aqf-ease)}
.aqf__meta a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .55s var(--aqf-ease)}
/* Partnerlogo rechts unten. Die Breite kommt aus dem Widget-Regler
   (.aqf__partner img), hier steht nur, was ohne Regler gelten soll.
   line-height:0 am Link, sonst haengt unter dem Bild der Zeilendurchschuss
   als sichtbarer Streifen und die Unterkanten stimmen nicht mehr ueberein. */
/* margin-left:auto schiebt das Logo ans rechte Ende DER ZEILE - das ist der
   Unterschied zu einem eigenen Flex-Kind von .aqf__bottom, das sich an der
   Unterkante des ganzen Blocks ausgerichtet haette. */
.aqf__partner{flex:0 0 auto;margin-left:auto;display:inline-block;line-height:0;opacity:.85;transition:opacity .45s var(--aqf-ease)}
.aqf__partner img{display:block;width:150px;height:auto}
.aqf__partner:hover,.aqf__partner:focus-visible{opacity:1}
.aqf a:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:2px}
@media (hover:hover) and (pointer:fine){
.aqf__soc:hover{background:#fff;border-color:#fff;color:#4CA139;transform:translateY(-3px)}
.aqf__list a:hover,.aqf__meta a:hover{color:#fff}
.aqf__list a:hover::after,.aqf__meta a:hover::after{transform:scaleX(1)}
.aqf__list--kontakt a:hover{text-decoration:underline;text-underline-offset:4px}
}
@media (max-width:1150px){
.aqf__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 44px}
.aqf__claim{font-size:clamp(28px,3.4vw,38px)}
.aqf__brand{grid-column:1/-1}
.aqf__col--kontakt{grid-column:1/-1;grid-template-columns:1fr 1fr;gap:44px}
.aqf__sub{max-width:34ch}
.aqf__brandmark{width:min(64%,420px)}
/* Ab hier stapeln die Spalten, die Wortmarke steht direkt unter der
   Kontaktspalte. Ohne diese Zeile klebt sie an "2154 Gaubitsch 153". */
.aqf__bottom{margin-top:64px;padding-top:12px}
}
@media (max-width:700px){
/* Fusszeile stapelt links, der Nach-oben-Knopf steht rechts frei -> 72px genuegen */
.aqf{padding:40px 0 72px}
.aqf__top{grid-template-columns:minmax(0,1fr);gap:40px}
.aqf__col--kontakt{grid-template-columns:minmax(0,1fr);gap:34px}
.aqf__bottom{flex-direction:column;align-items:flex-start;gap:20px;margin-top:48px;padding-top:8px}
/* Am Handy stapelt alles. Die 78% begrenzen nur noch die Wortmarke - die
   linke Haelfte selbst darf die volle Breite nehmen, sonst muessten sich
   Copyright und die drei Rechtslinks 280px teilen. */
.aqf__bottomlinks{width:100%}
.aqf__brandmark{width:min(78%,280px)}
.aqf__copy{margin-top:20px}
.aqf__rechtszeile{margin-top:20px;gap:8px 32px}
/* Am Handy stapelt die Zeile. margin-left:auto wuerde das Logo dann in einer
   eigenen Zeile nach rechts schieben - es soll aber wie alles andere links
   stehen, mit etwas Luft nach oben. */
.aqf__partner{margin-left:0;margin-top:10px}
.aqf__meta{gap:8px 32px}
.aqf__h{margin-bottom:20px}
}
@media (prefers-reduced-motion:reduce){
.aqf a,.aqf a::after,.aqf__soc{transition-duration:.01ms!important}
.aqf__soc:hover{transform:none}
}

/* Nur im Elementor-Editor: dort steht das Widget beim Bearbeiten manchmal
 * ausserhalb der gruenen Flaeche, weisse Schrift waere dann unsichtbar. */
.elementor-editor-active .elementor-widget-aqua_footer .aqf{background-color:#4CA139}