/* ==========================================================================
   LIA'S KITCHEN – nur /kontakt/ (nach css/stil.css geladen, gleiche ?v=)
   Seiten-Kopf mit «Lieber persönlich?» daneben (ab 900 px rechts als ruhige Karte, auf dem Handy als Zeile unter
   dem Titel), darunter die Anfrage auf der Creme-Karte (dasselbe Formular wie auf der Startseite, Stil in
   css/stil.css Abschnitt 8), zum Schluss der Ablauf (Abschnitt 7).
   ========================================================================== */

/* --- Seiten-Kopf: etwas kompakter als sonst, damit die Anfrage früh ins Bild kommt --- */

.kontakt-kopf { padding-bottom: clamp(28px, 4vw, 52px); }
.kontakt-kopf .ueberzeile { text-wrap: balance; }
.kontakt-kopf h1 { max-width: 12em; font-size: clamp(42px, 6.4vw, 80px); }
.kontakt-kopf-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }

/* --- Lieber persönlich? (dunkel, dezent): Telefon, WhatsApp (nur hier, Lia 15.10.2026) und E-Mail, «Adresse
       kopieren» nur über https --- */

.direkt { padding-top: 24px; border-top: 1px solid var(--linie); }

.direkt-titel {
  color: var(--gold); font-family: var(--sans); font-size: 12px; font-weight: 600; line-height: 1.6;
  letter-spacing: .2em; text-transform: uppercase;
}

.direkt-satz { margin-top: 8px; color: var(--gedaempft); font-size: 15px; line-height: 1.6; }
.direkt-liste { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 10px 0 0; padding: 0; list-style: none; }

.direkt .persoenlich-link {
  gap: 12px; color: var(--text); font-family: var(--serif); font-optical-sizing: auto; font-size: 20px;
  font-weight: 300; line-height: 1.3; text-decoration-line: underline; text-decoration-color: var(--linie-gold);
  text-decoration-thickness: 1px; text-underline-offset: .3em; overflow-wrap: anywhere;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}

.direkt .persoenlich-link .symbol { width: 18px; height: 18px; color: var(--gold); }
.direkt .knopf-klein { margin-top: 14px; border-color: rgba(244,238,226,.28); color: var(--text); }

@media (hover: hover) {
  .direkt .persoenlich-link:hover { color: var(--gold); text-decoration-color: currentColor; }
  .direkt .knopf-klein:hover { border-color: var(--gold); color: var(--gold); }
}

@media (hover: none) {
  .direkt .persoenlich-link:active { color: var(--gold); text-decoration-color: currentColor; }
}
.direkt .kopiert { display: block; color: var(--gedaempft); font-size: 14px; } /* bleibt im Dokument (Ansage) */
.direkt .kopiert:not(:empty) { margin-top: 6px; }

/* --- «Referenz schreiben» (Lia 14.10.2026; bis 21.10.2026 «Kundenstimme schreiben»): am Computer bei «Lieber
   persönlich?» (.direkt-stimme), auf dem Handy ganz unten nach dem Ablauf (.kontakt-stimme), damit die Anfrage früher
   ins Bild kommt. Sichtbar ist immer nur einer (der andere display: none): Vorleser hören den Link nie doppelt --- */

.kontakt-stimme { display: none; }

@media (max-width: 899px) {
  .direkt-stimme { display: none; }
  .kontakt-stimme { display: block; margin: 28px 0 0; padding-top: 8px; border-top: 1px solid var(--linie); }
}

/* Handy: etwas kompakter, damit die Karte mit der Anfrage früher ins Bild kommt (Wortlaut gleich); die
   Karte beginnt oben mit weniger Luft (wie an einer Kartenkante: --abstand × .7 statt × 1, Lia 14.10.2026) */
@media (max-width: 599px) {
  .kontakt-kopf .einleitung { font-size: 16px; line-height: 1.6; }
  .kontakt-kopf-raster { gap: 20px; }
  .direkt { padding-top: 20px; }
  .direkt-liste { gap: 0 24px; margin-top: 6px; }
  .direkt .persoenlich-link { font-size: 18px; }
  .kontakt-kopf + .anfrage-abschnitt { padding-top: calc(var(--abstand) * .7); }
}

@media (min-width: 900px) {
  .kontakt-kopf-raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); gap: clamp(40px, 6vw, 112px); align-items: end;
  }

  .direkt {
    padding: 30px 32px 26px; border: 1px solid var(--linie-gold); border-radius: 28px;
    background: rgba(244,238,226,.035);
  }

  .direkt-liste { flex-direction: column; gap: 2px; margin-top: 14px; }
}

/* --- Ablauf am Seitenende: etwas weniger Luft unten, der Fuss folgt gleich (ab 600 px nur 0,4 × --abstand:
   css/stil.css 9 «Lücke über dem Fuss», Lia 15.10.2026) --- */

.kontakt-ablauf { padding-bottom: calc(var(--abstand) * .8); }