/* ============================================================
   kontakt.css — Anliegen und Anfahrt

   Zwei Dinge stehen auf dieser Seite nebeneinander: was der
   Besucher schreiben will, und wie er uns sonst erreicht. Links
   das Formular, rechts das Datenblatt — kein Kasten mit Symbolen,
   sondern eine gesetzte Tabelle, wie sie im Briefkopf steht.

   Hero, Krume und Abschnittsrhythmus kommen aus leistung.css.
   ============================================================ */

/* ---------- Abschnittskopf, zweispaltig ---------------------
   Wie auf der Jobs-Seite: der Satz steht neben der Überschrift
   und beginnt genau über der rechten Spalte des Rasters
   darunter. Dafür MUSS die Spaltenteilung dieselbe sein. */
.kt-zone .sec-head.kt-kopf {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  column-gap: clamp(28px, 4vw, 64px);
  align-items: start;
  margin-bottom: clamp(30px, 4.2vh, 44px);
}
.kt-kopf .mono { grid-column: 1; grid-row: 1; }
.kt-kopf h2 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
.kt-kopf .lead {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  /* Hebt den Unterschied der Oberlängen zwischen Auszeichnungs-
     und Fliesstext auf, damit beide oben auf einer Linie sitzen. */
  padding-top: 0.42em;
  max-width: 46ch;
}

/* ---------- Formular links, Datenblatt rechts --------------- */
.kt-raster {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.kt-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 18px;
}
.kt-feld { display: flex; flex-direction: column; gap: 6px; }
.kt-feld--voll { grid-column: 1 / -1; }
/* Der Absender ist ein Knopf, kein Balken. */
.kt-feld--voll > .btn { align-self: start; }
.kt-feld label {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.kt-feld input,
.kt-feld textarea {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: 0.94rem;
  color: var(--tinte);
  background: var(--grund);
  border: 1px solid var(--grey-line-2);
  border-radius: 2px;
  transition: border-color .18s, box-shadow .18s;
}
.kt-feld textarea { min-height: 156px; resize: vertical; }
.kt-feld input::placeholder,
.kt-feld textarea::placeholder { color: var(--text-dim); opacity: 0.65; }
.kt-feld input:focus,
.kt-feld textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(8, 70, 168, 0.13);
}

/* Die Falle für Massenversender. Nicht `display:none` — manche
   Sender füllen gerade das aus, was versteckt ist, andere lesen
   die Regel und meiden es. Aus dem Bild geschoben, aus dem
   Tabulatorlauf genommen, vor Vorlesehilfen verborgen. */
/* .kt-falle steht jetzt in base.css — das Bewerbungsformular auf
   der Jobseite braucht sie genauso, und jene Seite lädt diese
   Datei nicht. Ohne die Regel stand dort ein leeres weisses
   Eingabefeld neben „Vorname". */

/* ---------- Das Datenblatt ---------------------------------- */
.kt-daten > .mono { display: block; margin-bottom: 14px; }
.kt-daten h3 {
  margin: 0 0 clamp(16px, 2.4vh, 26px);
  font-family: var(--f-display);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.kt-blatt {
  margin: 0;
  border-top: 1px solid var(--grey-line-2);
}
/* Beschriftung und Wert nebeneinander, nicht untereinander: so
   liest sich die Spalte als Datenblatt und nicht als Liste. */
.kt-zeile {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: 4px 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--grey-line-2);
}
.kt-zeile dt {
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--text-dim);
}
.kt-zeile dd {
  margin: 0;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--tinte);
}
.kt-zeile dd a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--grey-line-2);
  transition: color .18s, border-color .18s;
}
.kt-zeile dd a:hover { color: var(--blue-text); border-color: var(--blue); }

/* ============================================================
   DIE KARTE

   Vorher lag hier ein <iframe> von Google, das beim blossen
   Öffnen der Seite lud — mit der IP jedes Besuchers, ohne dass
   er gefragt wurde. Die Schriften dieser Website liegen aus
   genau diesem Grund selbst gehostet im Projekt; eine still
   mitladende Fremdkarte widerspricht dem.

   Jetzt liegt hier eine eigene Fläche im Hausstil, und erst ein
   Klick holt die Karte. Wer gar nicht laden will, nimmt den Link
   daneben und bleibt auf seiner Seite.
   ============================================================ */
.kt-karte {
  position: relative;
  margin: 0;
  aspect-ratio: 2.1;
  min-height: 340px;
  /* Beides zwingend. `min-height` und `aspect-ratio` zusammen
     lassen die Box ihre BREITE aus der Höhe ableiten: bei 375 px
     Fenster kam sie so auf 340 × 1,5 = 510 px und die ganze Seite
     liess sich seitlich schieben. Die Breite muss die maßgebende
     Größe bleiben. */
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--grey-line-2);
  border-radius: 2px;
  overflow: hidden;
  /* Millimeterpapier: dasselbe Raster, das der Bauplatz auf der
     Jobs-Seite als Boden hat — hier als Grund für die Anschrift. */
  background-image:
    linear-gradient(rgba(11, 82, 196, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 82, 196, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(11, 82, 196, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 82, 196, 0.10) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px, 110px 110px, 110px 110px;
  background-color: var(--grund);
}
.kt-karte-blatt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: clamp(22px, 4vw, 44px);
  text-align: center;
}
.kt-anschrift {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(21px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.kt-karte-knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 5px;
}
.kt-karte-hinweis {
  margin: 3px 0 0;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
/* Ist die Karte geladen, verschwindet die Fläche und der Rahmen
   gibt das Bild frei. */
.kt-karte.ist-geladen .kt-karte-blatt { display: none; }
.kt-karte iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 900px) {
  .kt-zone .sec-head.kt-kopf { grid-template-columns: minmax(0, 1fr); }
  .kt-kopf h2 { margin-bottom: 18px; }
  .kt-kopf .lead { grid-column: 1; grid-row: 3; padding-top: 0; max-width: 62ch; }
  .kt-raster { grid-template-columns: minmax(0, 1fr); }
  .kt-karte { aspect-ratio: 1.4; min-height: 300px; }
}
@media (max-width: 560px) {
  .kt-form { grid-template-columns: 1fr; }
  /* Beschriftung über den Wert: nebeneinander blieben für die
     Anschrift keine 150 px. */
  .kt-zeile { grid-template-columns: minmax(0, 1fr); }
}