/* ============ KONTAKT — Desktop nach Figma /contact Entwurf 1 (608:3), Mobil nach K-M1 (1179:3), 12.10. ============
   Schriften aus typo.css (Rollen), Maße in Design-Pixeln var(--u). Spalten bei 1440: Kerbe 170 · Formular 760 · 150 · Direkt 300. */
.seitenkopf{padding-left:var(--rand);padding-right:var(--rand)}

.kontakt{display:grid;grid-template-columns:calc(170 * var(--u)) minmax(0,760fr) calc(150 * var(--u)) minmax(0,300fr);align-items:start;padding:calc(121 * var(--u)) var(--rand) 0}
.k-formular{grid-column:2}
.k-direkt{grid-column:4;display:flex;flex-direction:column;gap:calc(41 * var(--u))}

/* Linienfelder: Text 20/28, Linie 17 darunter; die Nachricht wächst beim Tippen mit, die Linie wandert mit (contact.js) */
.k-felder{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(30 * var(--u));row-gap:calc(40 * var(--u))}
.k-feld{position:relative}
.k-feld.breit{grid-column:1 / -1}
.k-feld input,.k-feld textarea{display:block;width:100%;margin:0;padding:0 0 calc(17 * var(--u));border:0;border-bottom:1px solid rgba(26,26,26,.18);border-radius:0;background:none;color:var(--ink);font-family:var(--font-b);font-weight:400;font-size:var(--fs-text-l);line-height:var(--lh-text-l);letter-spacing:var(--ls-text-l);outline:none;transition:border-color .2s ease}
.k-feld textarea{resize:none;overflow:hidden}
.k-feld input::placeholder,.k-feld textarea::placeholder{color:var(--gedaempft);opacity:1}
.k-feld input:focus,.k-feld textarea:focus{border-bottom-color:var(--ink)}
.k-feld input:focus-visible,.k-feld textarea:focus-visible{border-bottom-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.k-unsichtbar,.k-honig{position:absolute !important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.k-hinweis{margin-top:calc(23 * var(--u));font-family:var(--font-b);font-size:var(--fs-text-xs);line-height:var(--lh-text-xs);letter-spacing:var(--ls-text-xs);color:var(--gedaempft)}
.k-hinweis a{color:inherit;text-decoration:underline;text-underline-offset:.15em}

/* Absende-Button B-1 (Artur 12.10.): Kontur in CI-Grau, Schrift Ink 75 %, Radius 5, keine Pille, kein Rot */
.k-senden{display:inline-flex;align-items:center;gap:calc(12 * var(--u));margin-top:calc(50 * var(--u));padding:calc(15 * var(--u)) calc(20 * var(--u));border:1.5px solid var(--gedaempft);border-radius:var(--radius);background:none;color:rgba(26,26,26,.75);font-family:var(--font-h);font-weight:500;font-size:var(--fs-link);line-height:var(--lh-link);letter-spacing:var(--ls-link);cursor:pointer;transition:border-color .2s ease,color .2s ease}
.k-senden:hover,.k-senden:focus-visible{border-color:var(--ink);color:var(--ink)}
.k-senden:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.k-pfeil{display:inline-block;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.k-senden:hover .k-pfeil{transform:translateX(4px)}

/* Direkte Kontakte: Label grau, Wert 18/22 */
.k-direkt .label{color:var(--gedaempft)}
.k-wert{display:block;width:fit-content;margin-top:calc(9 * var(--u));font-family:var(--font-h);font-weight:500;font-size:var(--fs-klein-h);line-height:var(--lh-klein-h);letter-spacing:var(--ls-klein-h);color:var(--ink)}
a.k-wert{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}

/* Office: Label links, Adresse + Google Maps rechts in derselben Zeile; zwei quadratische Fotos */
.k-office{padding:calc(151 * var(--u)) var(--rand) calc(150 * var(--u))}
.k-office-kopf{display:flex;align-items:baseline}
.k-adresse{margin-left:auto}
.k-maps{margin-left:calc(58 * var(--u));text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.k-bilder{display:grid;grid-template-columns:1fr 1fr;gap:var(--rand);margin-top:calc(40 * var(--u))}
.k-bild{aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden}
.k-bild img{width:100%;height:100%;object-fit:cover}

/* Tablet: Formular über die volle Breite, Kontakte darunter */
@media (max-width:1100px){
  .kontakt{display:block;padding-top:60px}
  .k-direkt{margin-top:64px;gap:32px}
  .k-office{padding-top:120px;padding-bottom:100px}
}

/* Mobil (K-M1): einspaltig, Felder 17/24 mit Linie 14 darunter, 32 Abstand; Office als eigener Abschnitt (80 + 100) */
@media (max-width:760px){
  .kontakt{padding-top:40px}
  .k-felder{grid-template-columns:1fr;row-gap:32px}
  .k-feld input,.k-feld textarea{padding-bottom:14px}
  .k-hinweis{margin-top:20px}
  .k-senden{margin-top:32px}
  .k-direkt{margin-top:64px;gap:32px}
  .k-wert{margin-top:6px}
  .k-office{padding:180px var(--rand) 80px}
  .k-office-kopf{display:block}
  .k-adresse{margin:16px 0 0}
  .k-maps{display:block;width:fit-content;margin:8px 0 0}
  .k-bilder{grid-template-columns:1fr;gap:20px}
}