/* Kontaktseite. Am 03.09.2026 aus dem HTML-Block der Seite herausgeloest,
damit die Inhalte im Widget "Aquanatura Kontakt" bearbeitbar werden.
Zeichengleich uebernommen - am Aussehen aendert sich nichts. */
/* ======================================================================
Kontakt. Bausteine aus dem Gerdix-Template (About mit ueberlappender
Karte, Karten-Reihe, heller Block, dunkler Abschluss ueber die volle
Breite, Zwei-Ton-Ueberschrift), ausgefuehrt in der Aquanatura-Sprache:
hell und neutral, Inter, scharfe Bildrahmen, weiche Bedienelemente,
Gruen nur fuer Punkt, Icon und Button.
====================================================================== */
.aqk{--ink:#111013;--txt:#141414;--mut:#636368;--line:rgba(20,20,20,.14);--green:#4CA139;
--paper:#f4f6f3;--dark:#12170f;
--r:10px;--r-lg:14px;--r-pill:999px;
--ease:cubic-bezier(.23,1,.32,1);
width:100%;color:var(--txt);font-family:inherit;-webkit-font-smoothing:antialiased}
.aqk :where(*){box-sizing:border-box}
.aqk :where(p,h2,h3,h4,dl,dd,dt,ul,ol,li,form,figure){margin:0;padding:0}
.aqk__wrap{--aqk-pad:clamp(20px,4vw,40px);width:100%;
max-width:calc(var(--container-max-width,1510px) + var(--aqk-pad)*2);
margin-inline:auto;padding-inline:var(--aqk-pad)}
/* Eingangsanimation. Nur Deckkraft und Transform, nie "all". */
.aqk [data-rv]{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.aqk.rv-on [data-rv]{opacity:0;transform:translateY(24px)}
.aqk.rv-on [data-rv].rv-in{opacity:1;transform:none}
/* Grundelemente */
.aqk .aqk__eyebrow{display:flex;align-items:center;gap:12px;font-size:16px;line-height:1;
letter-spacing:.02em;text-transform:uppercase;color:var(--mut);font-weight:600}
.aqk__eyebrow .aqk__dot{width:10px;height:10px;flex:0 0 10px;border-radius:50%;background:var(--green)}
.aqk .aqk__eyebrow::after{content:"";height:1px;width:46px;flex:0 0 46px;margin-left:4px;background:rgba(20,20,20,.30)}
.aqk .aqk__h{margin-top:24px;font-size:clamp(32px,3.5vw,50px);line-height:1.06;letter-spacing:-.03em;
color:var(--ink);font-weight:700}
.aqk .aqk__h--s{font-size:clamp(26px,2.4vw,36px)}
.aqk .aqk__h .aqk__fade{color:rgba(17,16,19,.34)}
.aqk .aqk__p{margin-top:26px;font-size:19.5px;line-height:1.62;color:var(--txt);max-width:46ch}
.aqk__sec{padding:clamp(52px,6vw,100px) 0}
.aqk__sec + .aqk__sec{border-top:1px solid var(--line)}
/* Fokus bleibt immer sichtbar, gruener Ring */
.aqk a:focus-visible,.aqk button:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.aqk a.aqk__line:focus-visible{border-radius:12px}
.aqk button[type="submit"]:focus-visible{border-radius:var(--r-pill)}
/* --- 1. Kopf mit Portrait und ueberlappender Karte --------------------- */
.aqk__lead{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
gap:clamp(36px,4.5vw,90px);align-items:center}
.aqk__portrait{position:relative}
/* Bildrahmen bleiben scharfkantig, bewusst ohne Radius. */
.aqk__portraitimg{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#ecedeb}
.aqk__portraitimg img{position:absolute;inset:0;width:100%;height:100%;max-width:none;
object-fit:cover;object-position:50% 50%;display:block}
/* Die Karte liegt auf dem Bild, also scharfkantig und als dunkle Glasflaeche
(Muster wie .ub__herocapbox), nur ohne Radius. Sie sitzt mit Abstand
innerhalb des Bildes, nicht an der Kante. Der Glas-Ton ist dunkler als das
Muster (.55 statt .34), weil das Luftbild an dieser Stelle helle Flaechen
hat: mit .34 blieben nur 3.1:1 Kontrast fuer weisse Schrift. */
.aqk__pcard{position:absolute;left:clamp(20px,2vw,28px);bottom:clamp(20px,2vw,28px);
padding:18px 22px 20px;max-width:min(70%,330px);
background:rgba(16,20,16,.55);border:1px solid rgba(255,255,255,.22);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
box-shadow:0 10px 28px rgba(0,0,0,.28)}
.aqk .aqk__pname{font-size:21px;line-height:1.2;font-weight:700;letter-spacing:-.02em;color:#fff}
.aqk .aqk__prole{margin-top:8px;font-size:15.5px;line-height:1.45;color:rgba(255,255,255,.90)}
/* Kontaktzeilen mit rundem Icon-Badge */
.aqk__lines{margin-top:clamp(34px,3.4vw,50px);border-top:1px solid var(--line)}
.aqk__line{display:grid;grid-template-columns:46px minmax(0,150px) minmax(0,1fr) 20px;
align-items:center;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);
text-decoration:none;color:var(--ink)}
.aqk .aqk__lineico{position:relative;width:46px;height:46px;border-radius:50%;
display:grid;place-items:center;background:rgba(76,161,57,.10);
color:var(--green);font-style:normal;
transition:color .2s var(--ease),transform .2s var(--ease)}
.aqk .aqk__lineico::after{content:"";position:absolute;inset:0;border-radius:50%;
background:var(--green);opacity:0;transform:scale(.82);
transition:opacity .2s var(--ease),transform .2s var(--ease)}
.aqk .aqk__lineico svg{position:relative;z-index:1;width:20px;height:20px;display:block}
.aqk .aqk__linelbl{font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:600}
.aqk .aqk__lineval{font-size:clamp(19px,1.6vw,23px);line-height:1.25;font-weight:700;letter-spacing:-.02em;
color:var(--ink);transition:transform .22s var(--ease);display:inline-block}
.aqk .aqk__linearr{justify-self:end;width:20px;height:20px;display:block;font-style:normal;color:var(--mut);
transition:color .2s var(--ease),transform .22s var(--ease)}
.aqk .aqk__linearr svg{width:20px;height:20px;display:block}
/* --- 2. Formularblock auf hellem Grund, volle Breite ------------------- */
.aqk__band{background:var(--paper)}
.aqk__bandin{padding:clamp(52px,6vw,100px) 0}
.aqk__formgrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
gap:clamp(32px,4vw,80px);align-items:start}
.aqk__hours{margin-top:32px;border-top:1px solid var(--line)}
.aqk__hourrow{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:8px 24px;
padding:18px 0;border-bottom:1px solid var(--line)}
.aqk .aqk__hourdt{font-size:16px;line-height:1.5;color:var(--mut)}
.aqk .aqk__hourdd{font-size:18.5px;line-height:1.5;color:var(--ink);font-weight:500}
/* Kein Kasten mehr: weisser Grund und gruener Balken liessen einen ganz
normalen Absatz wie einen Hinweiskasten aussehen (Marcel, 04.08.2026).
Jetzt steht er als Fliesstext unter den Oeffnungszeiten, nur durch
Abstand abgesetzt. */
.aqk__note{margin-top:34px}
.aqk .aqk__notep{font-size:16.5px;line-height:1.6;color:var(--txt);max-width:56ch}
.aqk__form{background:#fff;padding:clamp(30px,3.2vw,52px);border-radius:var(--r-lg);
box-shadow:0 22px 60px rgba(0,0,0,.08)}
.aqk__fields{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:32px}
.aqk__field{display:flex;flex-direction:column;gap:9px}
.aqk__field--full{grid-column:1 / -1}
.aqk .aqk__label{font-size:14.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:600}
/* Mit .aqk davor, sonst gewinnt die Theme-Regel input[type=...] und die
Felder haetten unterschiedliche Radien. */
.aqk .aqk__input,.aqk .aqk__select,.aqk .aqk__textarea{width:100%;font-family:inherit;font-size:17px;line-height:1.5;
color:var(--ink);background:#fafbfa;border:1px solid rgba(20,20,20,.16);padding:14px 16px;
border-radius:var(--r);
transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.aqk .aqk__select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:46px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636368' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 15px center;background-size:20px 20px}
.aqk .aqk__input:focus,.aqk .aqk__select:focus,.aqk .aqk__textarea:focus{outline:0;border-color:var(--green);background-color:#fff}
.aqk .aqk__input:focus-visible,.aqk .aqk__select:focus-visible,.aqk .aqk__textarea:focus-visible{
outline:2px solid var(--green);outline-offset:2px}
.aqk .aqk__textarea{min-height:160px;resize:vertical}
.aqk__submitrow{margin-top:30px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.aqk .aqk__hint{font-size:15px;line-height:1.5;color:var(--mut);max-width:36ch}
.aqk__msg{margin-top:20px;font-size:16.5px;line-height:1.55;padding:14px 18px;
border-left:3px solid var(--green);border-radius:var(--r);background:var(--paper);color:var(--ink)}
.aqk__msg[hidden]{display:none}
.aqk__msg--err{border-left-color:#b3261e}
/* --- 3. Anfahrt: Google-Karte nach Zustimmung -------------------------- */
.aqk__mapgrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
gap:clamp(28px,3.4vw,56px);align-items:start;margin-top:clamp(32px,3.6vw,56px)}
/* Der Kartenrahmen zaehlt wie ein Bild, bleibt scharfkantig. */
.aqk__map{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--paper);
border:1px solid var(--line)}
.aqk__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.aqk__routes{border-top:1px solid var(--line)}
.aqk__route{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);gap:8px 24px;
padding:18px 0;border-bottom:1px solid var(--line)}
.aqk .aqk__routedt{font-size:16px;color:var(--mut)}
.aqk .aqk__routedd{font-size:17.5px;line-height:1.5;color:var(--ink);font-weight:500}
/* --- 4. Dunkler Abschluss ueber die volle Breite ----------------------- */
.aqk__dark{position:relative;background:var(--dark);overflow:hidden}
.aqk__darkbg{position:absolute;inset:0;opacity:.18}
.aqk__darkbg img{width:100%;height:100%;object-fit:cover;display:block}
.aqk__darkbg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,23,15,.55),rgba(18,23,15,.78))}
.aqk__darkin{position:relative;padding:clamp(64px,7vw,116px) 0;text-align:center}
.aqk__dark .aqk__eyebrow{color:rgba(255,255,255,.82);justify-content:center}
.aqk__dark .aqk__eyebrow::after{background:rgba(255,255,255,.34)}
.aqk__dark .aqk__h{color:#fff;margin-inline:auto;max-width:20ch}
.aqk__dark .aqk__p{color:rgba(255,255,255,.80);margin-inline:auto;text-align:center;max-width:56ch}
.aqk__btnrow{margin-top:34px;display:flex}
.aqk__dark .aqk__btnrow{justify-content:center}
/* Website-Button: die Theme-Regel greift nur unter .aqua-tp-header */
.aqk .tp-btn-black.btn-green-light-bg .tp-btn-black-text,
.aqk .tp-btn-black.btn-green-light-bg .tp-btn-black-circle{background-color:#4CA139}
.aqk .tp-btn-black.btn-green-light-bg .tp-btn-black-text{color:#fff}
.aqk .tp-btn-black.btn-green-light-bg .tp-btn-black-circle svg{color:#fff}
.aqk button[type="submit"]{transition:transform .16s var(--ease)}
/* Das echte Contact-Form-7-Formular bleibt im DOM (sonst kein Versand),
ist aber optisch entfernt. Sichtbar ist unser deutsches Formular. */
.elementor-50340 .elementor-widget-shortcode{position:absolute;width:1px;height:1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Zeigefinger-Geraete: Hover-Feedback, weich und ohne Spruenge */
@media (hover:hover) and (pointer:fine){
a.aqk__line:hover .aqk__lineico{color:#fff}
a.aqk__line:hover .aqk__lineico::after{opacity:1;transform:scale(1)}
a.aqk__line:hover .aqk__lineval{transform:translateX(5px)}
a.aqk__line:hover .aqk__linearr{color:var(--green);transform:translate(3px,-3px)}
.aqk .aqk__input:hover,.aqk .aqk__select:hover,.aqk .aqk__textarea:hover{border-color:rgba(20,20,20,.30)}
}
/* Druckpunkt */
a.aqk__line:active .aqk__lineico{transform:scale(.97)}
.aqk button[type="submit"]:active{transform:scale(.97)}
@media(max-width:1080px){
.aqk__lead,.aqk__formgrid,.aqk__mapgrid{grid-template-columns:1fr;gap:34px}
.aqk__portraitimg{aspect-ratio:16/10}
}
@media(max-width:880px){
.aqk__fields{grid-template-columns:1fr}
.aqk__line{grid-template-columns:46px minmax(0,1fr) 20px;row-gap:4px;gap:16px}
.aqk__linelbl{display:none}
.aqk__hourrow,.aqk__route{grid-template-columns:1fr;gap:4px}
/* Schmale Schirme: die Karte rutscht unter das Bild, verdeckt also nichts.
Dort kein Glas (es liegt kein Bild mehr dahinter), sondern dunkle Schrift
auf Weiss. Scharfkantig bleibt sie trotzdem. */
.aqk__pcard{position:static;max-width:none;padding:20px 22px 22px;
background:#fff;border:1px solid var(--line);box-shadow:none;
-webkit-backdrop-filter:none;backdrop-filter:none}
.aqk .aqk__pname{color:var(--ink)}
.aqk .aqk__prole{color:var(--mut)}
}
/* Weniger Bewegung: Wege raus, Deckkraft und Farbe bleiben */
/* Das Auswahlfeld am Handy: die laengste Option passte nicht.
Gemessen 30.07.2026 bei 390px - nutzbare Textbreite 226px gegen 243,3px
Text, sichtbar stand "Schwimmteich oder Naturpc". Bei 15px misst derselbe
Text 214,7px und passt ab 390px Bildschirmbreite. Auf 360px-Geraeten
waeren es 8,7px zu viel, deshalb waechst die Schrift mit: clamp gibt dort
14px (200,4px Text gegen 206px Platz) und ab 385px die vollen 15px. Der Innenabstand rechts bleibt gross
genug fuer den Pfeil. text-overflow faengt ab, was auf sehr schmalen
Geraeten trotzdem nicht hineinpasst - vorher stand es auf clip, also
hartem Schnitt mitten im Wort. */
@media(max-width:560px){
.aqk .aqk__select{font-size:clamp(14px,3.9vw,15px);padding-right:36px;text-overflow:ellipsis}
}
@media(prefers-reduced-motion:reduce){
.aqk.rv-on [data-rv],.aqk.rv-on [data-rv].rv-in{opacity:1;transform:none;transition:none}
.aqk .aqk__lineico,.aqk .aqk__lineico::after,.aqk .aqk__lineval,.aqk .aqk__linearr,
.aqk button[type="submit"]{transform:none!important}
.aqk .aqk__lineico{transition:color .2s linear}
.aqk .aqk__lineico::after{transition:opacity .2s linear}
.aqk .aqk__lineval{transition:none}
.aqk .aqk__linearr{transition:color .2s linear}
.aqk button[type="submit"]{transition:none}
}
/* --- WPForms in der Optik des bisherigen Formulars (03.08.2026).
Die Regeln spiegeln aqk__label / aqk__input / aqk__select. !important,
weil WPForms eigene Stile mit hoher Spezifitaet mitbringt. --- */
.aqk .aqk__wpfslot{margin-top:6px}
.aqk .wpforms-container{margin:0!important;padding:0!important}
.aqk .wpforms-form .wpforms-field{padding:0!important;margin:0 0 18px!important}
.aqk .wpforms-form .wpforms-field-layout{margin-bottom:0!important}
/* display braucht !important: WPForms setzt die Zeile auf flex, und ohne
Grid griffen die 1fr-Spalten nie - die Felder schrumpften auf
Inhaltsbreite (gemessen 265px in einer 345px-Spalte, 03.08. abends). */
.aqk .wpforms-form .wpforms-layout-row{display:grid!important;grid-template-columns:1fr 1fr;
gap:0 22px;align-items:start;margin:0!important}
.aqk .wpforms-form .wpforms-layout-column{min-width:0}
.aqk .wpforms-form .wpforms-layout-column{width:auto!important;max-width:none!important;
padding:0!important;margin:0!important}
@media(max-width:640px){.aqk .wpforms-form .wpforms-layout-row{grid-template-columns:1fr}}
.aqk .wpforms-form .wpforms-field-label{display:block;margin:0 0 8px!important;font-size:14.5px!important;
letter-spacing:.08em;text-transform:uppercase;color:var(--mut)!important;font-weight:600!important}
.aqk .wpforms-form .wpforms-field-sublabel{display:none!important}
.aqk .wpforms-form .wpforms-required-label{display:none!important}
.aqk .wpforms-form button.wpforms-submit{gap:12px;padding:13px 15px 13px 28px!important}
.aqk .aqk__btnico{display:inline-grid;place-items:center;width:30px;height:30px;
border-radius:999px;background:#fff;color:var(--green);flex:0 0 30px}
.aqk .wpforms-form input[type=text],.aqk .wpforms-form input[type=email],
.aqk .wpforms-form input[type=tel],.aqk .wpforms-form select,.aqk .wpforms-form textarea{
width:100%!important;max-width:none!important;font-family:inherit!important;font-size:17px!important;
line-height:1.5!important;color:var(--ink)!important;background:#fafbfa!important;
border:1px solid rgba(20,20,20,.16)!important;padding:14px 16px!important;
border-radius:var(--r)!important;height:auto!important;box-shadow:none!important}
.aqk .wpforms-form textarea{min-height:160px!important;resize:vertical}
.aqk .wpforms-form input:hover,.aqk .wpforms-form select:hover,.aqk .wpforms-form textarea:hover{
border-color:rgba(20,20,20,.30)!important}
.aqk .wpforms-form input:focus,.aqk .wpforms-form select:focus,.aqk .wpforms-form textarea:focus{
outline:0!important;border-color:var(--green)!important;background-color:#fff!important}
.aqk .wpforms-form .wpforms-submit-container{grid-column:1/-1;padding:6px 0 0!important;margin:0!important}
.aqk .wpforms-form button.wpforms-submit{
display:inline-flex;align-items:center;gap:10px;border:0!important;cursor:pointer;
background:var(--green)!important;color:#fff!important;font-family:inherit!important;
font-size:16px!important;font-weight:600!important;line-height:1!important;
padding:17px 30px!important;border-radius:999px!important;
transition:transform .18s ease,filter .18s ease}
.aqk .wpforms-form button.wpforms-submit:hover{transform:translateY(-1px);filter:brightness(1.07)}
.aqk .wpforms-form button.wpforms-submit:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.aqk .wpforms-form select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
padding-right:46px!important;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;
background-repeat:no-repeat!important;background-position:right 16px center!important;background-size:18px!important}
.aqk .wpforms-form input::placeholder,.aqk .wpforms-form textarea::placeholder{color:#6b6f64;opacity:1}
.aqk .wpforms-form .wpforms-field-checkbox input[type=checkbox],
.aqk .wpforms-form input[type=checkbox]{width:19px;height:19px;accent-color:var(--green);
margin:2px 12px 0 0;flex:0 0 19px;cursor:pointer}
.aqk .wpforms-form .wpforms-field-gdpr-checkbox ul{list-style:none;margin:0;padding:0}
.aqk .wpforms-form .wpforms-field-gdpr-checkbox li{display:flex;align-items:flex-start}
.aqk .wpforms-form .wpforms-field-gdpr-checkbox li label{font-size:14.5px;line-height:1.55;
color:var(--mut);font-weight:400;cursor:pointer;margin:0}
.aqk .wpforms-form .wpforms-error{font-size:14px;color:#b3261e}
/* --- Das Auswahlfeld ist KEIN natives