/* Zeichenfabrik -- Kontaktseite, sektionsspezifische Stile. .uebersicht-hero/.kicker kommen aus
   kursuebersicht.css/basis.css, .teamevent-form-grid/.teamevent-form-feld--breit kommen aus
   teamevent.css (identische Formular-Optik wie das Teamevent-Anfrageformular),
   .teamevent-form-optional/.buchung-agb/.buchung-fehler kommen aus buchung.css, der Dank aus basis.css -- hier nur, was wirklich neu ist. */

.kontakt-sektion { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--farbe-rand); }
.kontakt-formular { padding: 32px 24px; }
/* Das Formular (.buchung-schritt-inhalt aus buchung.css) bringt eigenes horizontales Padding
   mit -- hier abschalten, damit Formularfelder und der FAQ-Hinweis darüber links/rechts bündig
   auf der .kontakt-formular-Kante sitzen (nicht mehr wie zuvor über den Block hinauskragen). */
.kontakt-formular .buchung-schritt-inhalt { padding: 0; }

/* Die Zusage steht VOR dem Absenden (15.08.2026), direkt unter der Überschrift und über dem
   FAQ-Hinweis: Sie ist der Grund, dieses Formular zu nehmen und nicht die Mailadresse rechts.
   Bewusst ohne Kasten und ohne Farbe — sie ist ein Satz, kein Hinweisfeld; ein zweiter
   getönter Block über dem FAQ-Kasten sähe aus wie zwei Warnungen übereinander. */
.kontakt-zusage {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.5;
  color: #37342D;
}

.kontakt-faq-hinweis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding: 14px 18px;
  background: #F4F1EA;
  border-left: 2px solid var(--farbe-teal-hell);
  text-decoration: none;
  font-size: 14px;
  color: #37342D;
  transition: background 0.15s ease;
}
/* Der Hover gehört nur dem Link: Als schlichter Kasten (Karte 565, E8, N6: Hinweis über den langen
   Formularen „Kurs vorschlagen“ und „Startangaben“) steht er still. */
a.kontakt-faq-hinweis:hover { background: #EEEAE1; }
.kontakt-faq-hinweis p { margin: 0; }
.kontakt-faq-pfeil { font-weight: 700; color: var(--farbe-teal); white-space: nowrap; }

/* Der Dank nach dem Absenden ist seit Karte 632 (13.11.2026) ein Baustein in website/css/basis.css (`{% danke %}`). */

.kontakt-info { padding: 32px 24px; background: #F4F1EA; display: flex; flex-direction: column; gap: 28px; }
.kontakt-info-label {
  font-family: var(--schrift-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A8377;
  margin: 0 0 12px;
}
.kontakt-direkt { display: flex; flex-direction: column; gap: 10px; }
/* Karte 565, E8 (N1, N2), Verwender: „Kurs vorschlagen“ und „Startangaben“; Kontakt nicht.
   Die Spalte geht mit, wo das Formular 3.000 px länger ist als sie: ab 1024 px klebt ihr Inhalt
   unter dem Kopf. Die Schritte sind eine nummerierte Liste in der Schrift der Bürozeiten. */
.kontakt-info-innen { display: flex; flex-direction: column; gap: 28px; }
.kontakt-schritte { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.6; color: #37342D; }
.kontakt-schritte li + li { margin-top: 6px; }
/* Mail und Telefon sind Textlinks nach der EINEN Linkregel (basis.css) — groß, weil sie die Antwort der
   Seite sind. Bis 18.10.2026 eigene Farbe ohne Linie (Inhaber, Karte 376: „gehören zur Linkregel“). */
.kontakt-direkt { align-items: flex-start; }
.kontakt-direkt a { font-size: 18px; font-weight: 700; }
.kontakt-buerozeiten { margin: 0; font-size: 15px; line-height: 1.7; color: #37342D; }
.kontakt-standorte { display: flex; flex-direction: column; gap: 16px; }
.kontakt-standort-name { margin: 0 0 2px; font-weight: 700; font-size: 15px; }
.kontakt-standort-adresse { margin: 0; font-size: 14px; line-height: 1.6; color: #6B665E; }
/* K2: Erreichbarkeit/Anfahrt je Standort (aus StandortInfo.beschreibung). */
.kontakt-standort-erreichbarkeit { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: #6B665E; }
.kontakt-standort-erreichbarkeit p { margin: 0 0 4px; }
.kontakt-social { display: flex; gap: 8px 20px; flex-wrap: wrap; font-size: 15px; }
/* Instagram, Newsletter: Textlinks nach der Linkregel (bis 18.10.2026 eigene Pillen, Karte 376). */

/* ---- Karten (Standort-Platzhalter) ---- */
.kontakt-karten { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 32px 24px 40px; border-bottom: 1px solid var(--farbe-rand); }
.kontakt-karte { border: 1px solid var(--farbe-rand); background: #fff; }
.kontakt-karte-platzhalter { aspect-ratio: 16 / 9; border-bottom: 1px solid var(--farbe-rand); }
/* K3: Consent-Gate vor der OpenStreetMap-Karte. */
.kontakt-karte-consent {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 20px 24px;
}
.kontakt-karte-consent p { margin: 0; font-size: 13px; line-height: 1.6; color: #6B665E; max-width: 42ch; }
.kontakt-karte-iframe { display: block; width: 100%; height: 100%; border: 0; }
.kontakt-karte-fuss { padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.kontakt-karte-fuss h3 { margin: 0 0 4px; font-size: 19px; font-weight: 700; }
.kontakt-karte-fuss p { margin: 0; font-size: 14px; line-height: 1.6; color: #6B665E; }
/* „Route“ ist ein Weg: .link-pfeil aus basis.css (bis 18.10.2026 eigener Link mit getipptem „→“, Karte 376). */

@media (min-width: 1024px) {
  .kontakt-sektion { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .kontakt-formular { padding: 52px 56px; }
  .kontakt-info { padding: 52px 44px; }
  .kontakt-info--geht-mit .kontakt-info-innen { position: sticky; top: 96px; }
  .kontakt-karten { grid-template-columns: repeat(2, 1fr); padding: 56px 56px 64px; }
}

/* ---- Illustration: Jean-Luc Godard (Werkbank 408) — Creme-Füllung; ragt ab 1280 oben ins beige
   Feld „kontakt-info“ und steht unten in der Tuschekante. Gestapelt über die ganze Rasterbreite,
   sonst nähme er ab 1024 die zweite Spalte neben der Karte. */
@media (max-width: 1279px) { .kontakt-karten .zf-illu--godard { grid-column: 1 / -1; justify-self: end; width: min(86vw, 440px); margin: 8px -24px -80px auto; } }
@media (min-width: 1280px) {
  .kontakt-karten .zf-illu--godard { width: min(700px, 48.6vw); left: calc(50% + 5px); bottom: -84px; }
}

/* ---- Illustration: Der Maler auf „Privatunterricht“ (Karte 627, Inhaber 12.11.2026: zwei Köpfe, ein Körper —
   Lernende und Künstler, genau 1:1). Letztes Kind der rechten Spalte (`.kontakt-info.hat-illu`), unter den Wegen,
   rechtsbündig; er steht AUF der Tuschekante des Fußes, nur die Sohlen berühren sie (Inhaber: „darf nicht versinken“).
   Die Kante ist durchsichtig und liegt vor den Figuren (basis.css).
   ⚠️ IN JEDER BREITE IM FLUSS DER SPALTE, auch ab 1280 px (dort setzt basis.css die Figuren sonst absolut): Nach dem
   Absenden ist die Spalte so kurz wie die Bestätigung, und ein absolut gestellter Maler lag dann über „So läuft’s“ und
   den Wegen (im Bild gesehen). Im Fluss wächst die Spalte mit ihm; `margin-top: auto` stellt ihn neben einem langen
   Formular an ihren Fuß.
   GRÖSSE (Inhaber 13.11.2026: „wesentlich größer, 160 % etwa“): 400 px statt 250, am Telefon min(73.6vw, 352px) statt
   min(46vw, 220px). Dafür wächst die Seite um rund 250 px (1440) bzw. 190 px (390): Im Fluss überdeckt er nichts, auch
   nicht nach dem Absenden; absolut gesetzt läge er dann wieder über „So läuft’s“. Zwischen 1024 und rund 1100 px ist die
   Spalte schmaler als er; `100% + 40px` lässt ihn bis in ihre linke Polsterung (44 px) reichen, nie ins Formular.
   Der Versatz nach unten: die untere Polsterung der Spalte, dazu der Weg bis zur Tusche. Die beginnt nicht an der
   Oberkante der Kante, sondern tiefer, und wie tief, wächst mit ihrer Höhe (clamp(64px, 9vw, 130px), basis.css). Die
   Kante wird rechts abgeschnitten, also stehen die Sohlen je nach Fensterbreite über anderen Spitzen; abgestimmt am
   20-%-Maß der Tusche unter den Sohlen (wie tief sie über die Spalten der Sohlen gesehen einsinken), gemessen bei 390,
   600, 900, 1023, 1024, 1100, 1180, 1279, 1280, 1366, 1440, 1680 und 1920: überall −1,4 bis 7,6 px (der abgenommene
   Stand mit 250 px: −0,4 bis 3,2, bei 1920 11,6). */
@media (max-width: 1023px) {
  .kontakt-info .zf-illu--maler {
    align-self: flex-end; width: min(73.6vw, 352px);
    margin: 8px 0 calc(-32px - 0.53 * clamp(64px, 9vw, 130px) + 4px);
  }
}
@media (min-width: 1024px) {
  .kontakt-info .zf-illu--maler {
    position: static; align-self: flex-end; width: min(400px, calc(100% + 40px));
    margin: auto 0 calc(-52px - 0.505 * clamp(64px, 9vw, 130px) + 4px);
  }
}
@media (min-width: 1280px) {
  .kontakt-info .zf-illu--maler { margin-bottom: calc(-52px - 0.455 * clamp(64px, 9vw, 130px) - 8px); }
}