/* ==========================================================================
   assets/css/pages/contact.css — Seitenstil fuer views/contact.php
   --------------------------------------------------------------------------
   Nur seitenspezifische Klassen mit dem Praefix "contact". Alles andere
   (Karten, Formularfelder, Chips, Hinweise, FAQ, Knoepfe) kommt unveraendert
   aus components.css, base.css und layout.css.

   Reihenfolge:
     1. Aufbau der Seite
     2. Formularkarte
     3. Formular im Detail
     4. Kontaktspalte
     5. Anfahrt-Teaser
     6. Fragen und Antworten
     7. Enge Bildschirme, Druck, Bewegungsarmut
   ========================================================================== */


/* ==========================================================================
   1. AUFBAU
   Kein overflow am Abschnitt: <body> beschneidet bereits mit overflow-x:clip,
   und ein overflow:hidden hier wuerde das sticky der Kontaktspalte zerstoeren.
   ========================================================================== */
.contactTop{
  position:relative;
}

/* Formular und Kontaktspalte beginnen oben buendig, statt gleich hoch zu werden. */
.contactLayout{
  align-items:start;
}


/* ==========================================================================
   2. FORMULARKARTE
   ========================================================================== */
.contactFormCard{
  gap:var(--s3);
}

/* Eine Karte, in der man tippt, darf beim Ueberfahren nicht wegrutschen. */
@media (hover:hover){
  .contactFormCard:hover{
    transform:none;
    box-shadow:var(--sh-md);
  }
}

.contactFormCard__title{
  margin:0;
  scroll-margin-top:calc(clamp(68px,8vw,88px) + var(--s5));
}

.contactFormCard__intro{
  margin:0;
  max-width:52ch;
  font-size:var(--fs-sm);
  line-height:var(--lh-normal);
  color:var(--ink-soft);
}


/* ==========================================================================
   3. FORMULAR IM DETAIL
   ========================================================================== */
.contactForm{
  margin-top:var(--s2);
}

.contactForm__required{
  margin:0;
}

.contactForm__required abbr,
.contactForm .consent abbr{
  text-decoration:none;
  color:var(--clay-700);
  cursor:default;
}

/* Die Zeitwunsch-Gruppe ist ein <fieldset>; .form fieldset setzt bereits
   display:grid und den Abstand, hier bleibt nur der Aussenabstand. */
.contactForm__when{
  margin:0;
}

.contactForm__when .field__hint{
  margin-top:0;
}

/* Fortschritt, Absenden, Rueckmeldung und Telefonhinweis als ein Block. */
.contactForm__send{
  display:grid;
  gap:var(--s4);
  margin-top:var(--s2);
}

.contactForm__promise{
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  margin:0;
  font-size:var(--fs-sm);
  line-height:var(--lh-normal);
  color:var(--ink-soft);
}

.contactForm__promise > svg{
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin-top:.25em;
  color:var(--clay-600);
}

/* Das Beschriftungsfeld des Honigtopfs soll auch dann unsichtbar bleiben,
   wenn die Karte den absoluten Versatz einmal nicht beschneiden kann. */
.contactForm .honeypot label{
  font-size:var(--fs-2xs);
  color:transparent;
}


/* ==========================================================================
   4. KONTAKTSPALTE
   ========================================================================== */
.contactAside{
  display:grid;
  gap:var(--s5);
  align-content:start;
}

/* Mitlaufend nur, wenn daneben wirklich Platz ist und der Schirm hoch genug. */
@media (min-width:1024px) and (min-height:720px){
  .contactAside{
    position:sticky;
    top:calc(clamp(68px,8vw,88px) + var(--s5));
  }
}

.contactCard{
  gap:var(--s4);
}

@media (hover:hover){
  .contactCard:hover{
    transform:none;
    box-shadow:var(--sh-sm);
  }
}

/* ---- 4.1 Telefonnummer: gross, tippbar, mit atmendem Ring ---------------- */
.contactPhone{
  display:flex;
  align-items:center;
  gap:var(--s4);
  min-height:44px;
  padding:var(--s4);
  border:1.5px solid var(--clay-100);
  border-radius:var(--r-md);
  background-color:var(--clay-50);
  text-decoration:none;
  transition:
    background-color var(--t-base) var(--ease-soft),
    border-color var(--t-base) var(--ease-soft),
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
}

.contactPhone:hover,
.contactPhone:focus-visible{
  background-color:var(--clay-100);
  border-color:var(--clay-300);
  transform:translateY(-2px);
  box-shadow:var(--sh-md);
}

.contactPhone__icon{
  position:relative;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:50%;
  background-color:var(--clay-600);
  color:#fff;
}

/* Der Ring aus SPEC-01 §3: pulseRing, dauerhaft, rein dekorativ. */
.contactPhone__icon::before{
  content:'';
  position:absolute;
  inset:0;
  border:2px solid var(--clay-400);
  border-radius:50%;
  pointer-events:none;
  animation:pulseRing 2.4s var(--ease-out) infinite;
}

.contactPhone__text{
  display:grid;
  gap:.15rem;
  min-width:0;
}

.contactPhone__label{
  font-family:var(--font-sans);
  font-size:var(--fs-2xs);
  font-weight:600;
  letter-spacing:var(--ls-wider);
  line-height:1.4;
  text-transform:uppercase;
  color:var(--clay-700);
}

/* Grossdisplay: --clay-800 haelt den Kontrast auch unter 28px sicher.
   Die Groesse ist so gewaehlt, dass die Nummer in der Karte auf einer Zeile bleibt. */
.contactPhone__number{
  font-family:var(--font-display);
  font-size:clamp(1.1rem,.95rem + .45vw,1.3rem);
  font-weight:600;
  letter-spacing:var(--ls-tight);
  line-height:var(--lh-tight);
  color:var(--clay-800);
}

/* ---- 4.2 Die uebrigen Wege ---------------------------------------------- */
.contactWays{
  display:grid;
  gap:var(--s2);
  margin:0;
  padding:0;
  list-style:none;
  max-width:none;
}

.contactWays > li{
  margin:0;
}

.contactWay{
  display:flex;
  align-items:flex-start;
  gap:var(--s3);
  min-height:44px;
  padding:.6rem .7rem;
  border-radius:var(--r-sm);
  color:var(--ink);
  text-decoration:none;
  transition:background-color var(--t-base) var(--ease-soft);
}

a.contactWay:hover,
a.contactWay:focus-visible{
  background-color:var(--clay-50);
}

.contactWay--plain{
  cursor:default;
}

.contactWay__icon{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background-color:var(--sand-2);
  color:var(--clay-700);
  transition:
    background-color var(--t-base) var(--ease-soft),
    transform var(--t-base) var(--ease-out);
}

a.contactWay:hover .contactWay__icon,
a.contactWay:focus-visible .contactWay__icon{
  background-color:var(--clay-100);
  transform:scale(1.06);
}

.contactWay__body{
  display:grid;
  gap:.12rem;
  min-width:0;
  padding-top:.1rem;
}

.contactWay__label{
  font-family:var(--font-sans);
  font-size:var(--fs-2xs);
  font-weight:600;
  letter-spacing:var(--ls-wider);
  line-height:1.4;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.contactWay__value{
  font-size:var(--fs-sm);
  line-height:var(--lh-snug);
  color:var(--ink);
  overflow-wrap:anywhere;
}

a.contactWay .contactWay__value{
  color:var(--brand-ink);
}

.contactCard__address{
  font-style:normal;
  line-height:var(--lh-snug);
}


/* ==========================================================================
   4a. RUECKRUF
   Schliesst direkt an die Formularkarte an — kein doppelter Abschnittsabstand.
   ========================================================================== */
.contactCallback{
  padding-top:0;
}

.callbackCard .eyebrow{
  margin:0;
}

.field__optional{
  font-weight:400;
  color:var(--ink-soft);
}


/* ==========================================================================
   5. ANFAHRT-TEASER
   ========================================================================== */
.contactRoute__grid{
  align-items:center;
}

/* Organischer Bildrahmen statt Rechteck — dieselbe Formensprache wie im Hero. */
.contactRoute__media{
  position:relative;
  margin:0;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border-radius:var(--blob-b);
  background-color:var(--sand-3);
  box-shadow:var(--sh-md);
  animation:blobMorph 18s linear infinite alternate;
}

.contactRoute__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.contactRoute__caption{
  position:absolute;
  left:var(--s4);
  bottom:var(--s4);
  display:flex;
  align-items:center;
  gap:.45rem;
  max-width:calc(100% - var(--s4) * 2);
  padding:.55rem .95rem;
  border-radius:var(--r-pill);
  background-color:var(--sand);
  box-shadow:var(--sh-sm);
  font-family:var(--font-sans);
  font-size:var(--fs-xs);
  font-weight:600;
  line-height:1.3;
  color:var(--ink);
}

.contactRoute__caption > svg{
  flex:0 0 auto;
  width:16px;
  height:16px;
  color:var(--clay-700);
}

.contactRoute__body{
  display:grid;
  gap:var(--s4);
  align-content:center;
}

.contactRoute__body h2{
  margin:0;
}

.contactRoute__actions{
  margin:0;
}


/* ==========================================================================
   6. FRAGEN UND ANTWORTEN
   ========================================================================== */
.contactFaq__list{
  margin-top:0;
}

.contactFaq__more{
  justify-content:center;
  margin-top:var(--s6);
}

/* Ohne Skripting bleibt kein Text im zugeklappten Zustand haengen. */
@media (scripting:none){
  .contactFaq__list .faq__a{
    grid-template-rows:1fr;
  }

  .contactFaq__list .faq__q{
    cursor:default;
  }

  .contactFaq__list .faq__q > svg{
    display:none;
  }
}

html.no-js .contactFaq__list .faq__a{
  grid-template-rows:1fr;
}

html.no-js .contactFaq__list .faq__q > svg{
  display:none;
}


/* ==========================================================================
   7. ENGE BILDSCHIRME, DRUCK, BEWEGUNGSARMUT
   ========================================================================== */
@media (max-width:1023.98px){
  /* Einspaltig: die Kontaktspalte rueckt unter das Formular, bleibt aber luftig. */
  .contactAside{
    gap:var(--s4);
  }
}

@media (max-width:519.98px){
  .contactPhone{
    gap:var(--s3);
    padding:var(--s3);
  }

  .contactPhone__icon{
    width:48px;
    height:48px;
  }

  .contactWay{
    padding:.55rem .35rem;
  }

  .contactWay__icon{
    width:36px;
    height:36px;
  }

  .contactRoute__media{
    aspect-ratio:3 / 2;
  }
}

@media print{
  .contactForm__send,
  .contactRoute__media,
  .contactFaq__more{
    display:none;
  }

  .contactPhone,
  .contactWay{
    border:0;
    background:none;
    padding:0;
  }

  .contactPhone__icon::before{
    display:none;
  }
}