/* Kontakt
 *
 * Gemessen an „Kontakt“ des Webflow-Stands (1280 px):
 *   Bühne ab y 140, 733 hoch; Hintergrundbild 1280 × 600 ab y 207 (cover, Radius 5)
 *   Formularkasten 645 breit bei x 40 / y 142, Innenabstand 30, Rand 1 px, Grund #262524
 *   Überzeile 20/30 akzent · Titel 28/36,4 Gewicht 500 · Formular ab y 274 (Titel + 30)
 *   Felder 583 × 60, Grund #171717, Rand 1 px, Innenabstand 20/25, 20 px, Abstand 25
 *   Textfeld 160 hoch · Häkchen 23 × 24, Radius 2, Text 16/24 · Senden 130 × 54, hell auf dunkel
 *   Info: drei Kacheln 387 breit, Abstand 20, Innenabstand 40, zentriert,
 *         Kreis 80 (#121418), Titel 30/39, Text 20/30, Sektion 140 unten
 */

/* ---------------------------------------------------- Bühne mit Formular */
.kontakt-buehne { --oben: 140px; position: relative; padding: var(--oben) 0 140px; }
/* Kontaktseite (nicht Startseite): Kasten samt Bild tiefer – 20 px wie alle Unterseiten plus 40 px Luft unter dem Kopf (23.09.2026) */
.kontakt-buehne:not(.start-kontakt) { --oben: calc(var(--abstand-kopf) + 40px); }
/* Hintergrundbild von der Oberkante des Betreff-Felds bis zur Unterkante des Senden-Knopfs:
 * oben --oben (Bühne, 140) + 2 (Kasten) + 1 (Rand) + 71 (Kopfzeile) + 40 (Innenabstand) = 254 (+ 6 gemessen: Kopfzeile ist 77 hoch);
 * unten 140 + 1 + 110,4 (Leiste: 30 + 50,4 + 30) + 40 = 291,4. Ohne Rundung; cremiger Schleier im Beige der Kacheln */
.kontakt-hintergrund {
  position: absolute; left: 0; right: 0; top: calc(var(--oben) + 120px); bottom: 292px;
  overflow: hidden; background: var(--dunkel-sektion);
}
.kontakt-hintergrund img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kontakt-hintergrund::after { content: ""; position: absolute; inset: 0; background: rgba(236, 230, 227, .55); mix-blend-mode: multiply; }
.kontakt-kasten {
  position: relative; width: 645px; max-width: 100%; margin-top: 2px;
  padding: 0; border: 1px solid var(--dunkel-rand); background: var(--dunkel-grund);
}
/* Aufbau wie die Kästen der Startseite: Kopfzeile mit Schräge, Inhalt, Leiste */
.kontakt-kasten .kasten-kopf { display: flex; align-items: center; min-height: 71px; padding: 20px 16px 20px 40px; border-bottom: 1px solid var(--dunkel-rand); }
.kontakt-kasten .kasten-kopf .schraege { align-self: stretch; width: 70px; margin: -20px 0 -20px 15px; flex: none;
  background: linear-gradient(to top left, transparent calc(50% - .6px), var(--dunkel-rand) calc(50% - .6px), var(--dunkel-rand) calc(50% + .6px), transparent calc(50% + .6px)); }
.kontakt-kasten .untertitel { margin: 0; font-family: var(--schrift-text); font-style: normal; font-size: 30px; line-height: 36px; font-weight: 700; text-transform: uppercase; letter-spacing: 0; color: var(--dunkel-text); }
.kontakt-inhalt { padding: 40px; }
.kontakt-kasten .kasten-fuss { padding: 30px 40px; border-top: 1px solid var(--dunkel-rand); }
.kontakt-kasten .kasten-fuss h2 { font-size: 36px; line-height: 1.4; margin: 0; font-family: var(--schrift-display); font-style: italic; font-weight: 500; text-transform: none; }
.kontakt-kasten .ueberzeile { margin: 0; font-size: 20px; line-height: 30px; color: var(--akzent); }
.kontakt-kasten h1, .kontakt-kasten h2.kontakt-titel {   /* kursive Serife (Wunsch vom 22.09.2026), nicht die Barlow-Versalien der übrigen Seitentitel */
  font-family: var(--schrift-display); font-style: italic; text-transform: none; letter-spacing: 0;
  font-size: 30px; line-height: 1.3; font-weight: 500; margin: 5px 0 30px;
}
.formular { display: grid; gap: 25px; }
.feld { display: grid; gap: 6px; }
.feld label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* Vorlage nur mit Platzhaltern; Label bleibt für Vorleser */
.feld input, .feld textarea, .feld select {
  width: 100%; height: 60px; padding: 0 25px;
  font: inherit; font-size: 20px; line-height: 1.43; color: var(--dunkel-text);
  background: #171717; border: 1px solid var(--dunkel-rand); border-radius: 0;
}
.feld textarea { height: 160px; min-height: 160px; padding: 20px 25px; resize: vertical; }
.feld select { appearance: none; cursor: pointer; padding-right: 56px;
  background-image: linear-gradient(45deg, transparent 50%, var(--dunkel-text-leise) 50%), linear-gradient(135deg, var(--dunkel-text-leise) 50%, transparent 50%);
  background-position: calc(100% - 30px) 26px, calc(100% - 24px) 26px; background-size: 6px 6px; background-repeat: no-repeat; }   /* Pfeil aus zwei Dreiecken */
.feld select:invalid { color: var(--dunkel-text-leise); }   /* „Betreff wählen“ wie ein Platzhalter */
/* Katalogbestellung: erscheint bei Betreff „Katalogbestellung“ (kontakt.js), sonst ausgeblendet.
 * Kataloge als Zeilen im Feldstil, Anschrift als Straße/Nr. und PLZ/Ort. */
.bestellung { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; align-content: start; }
.bestellung legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Jede Zeile genau wie ein Eingabefeld: 60 px hoch inklusive Rand; aufeinanderfolgende Zeilen teilen sich die Linie */
.katalog-wahl { margin: 0; padding: 0; list-style: none; }
.katalog-wahl li { border: 1px solid var(--dunkel-rand); background: #171717; box-sizing: border-box; height: 60px; }
.katalog-wahl li + li { margin-top: -1px; }
.katalog-wahl .haken { grid-template-columns: 23px 1fr auto; column-gap: 14px; height: 100%; padding: 0 20px; font-size: 20px; line-height: 1.43; color: var(--dunkel-text); }
.katalog-wahl .haken small { font-size: 15px; color: var(--dunkel-text-leise); white-space: nowrap; }
.katalog-wahl .haken input { background: #171717; }
.feld-zeile { display: grid; gap: 10px; }
.feld-zeile.strasse { grid-template-columns: 1fr 110px; }
.feld-zeile.ort { grid-template-columns: 130px 1fr; }
/* Felder 10 px auseinander wie die Felder des Schachbretts (23.09.2026); Einwilligung, Fehlermeldung und
 * Senden behalten ihren bisherigen Abstand (25 bzw. 45 px) */
.felder { display: grid; gap: 10px; min-width: 0; }
.felder > .einwilligung, .felder > .meldung-fehler { margin-top: 15px; }
/* Mit Skript (.schaltbar): Bestellblock ausgeblendet, bei Katalogbestellung wächst der Kasten weich nach rechts
 * (Breite des Kastens und Spaltenmaß des Rasters werden animiert), der Block blendet nachlaufend ein. */
.formular.schaltbar { display: grid; grid-template-columns: minmax(0, 1fr) 0px; column-gap: 0; transition: grid-template-columns .5s cubic-bezier(.4, 0, .2, 1), column-gap .5s cubic-bezier(.4, 0, .2, 1); }
.formular.schaltbar .bestellung { display: grid; opacity: 0; visibility: hidden; transform: translateX(24px); overflow: hidden; transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s; }
.formular.schaltbar.mit-bestellung .bestellung { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease .25s, transform .4s cubic-bezier(.2, .7, .2, 1) .2s, visibility 0s; }
.kontakt-kasten { transition: width .5s cubic-bezier(.4, 0, .2, 1); }
@media screen and (min-width: 992px) {
  /* Linke Spalte bleibt beim Aufklappen gleich breit, rechts kommt der Rest dazu. */
  /* Lage und Breite wie die Über-uns-Kacheln darüber (23.09.2026): links auf der Innenkante der Startseiten-Kästen
   * (Kastenrand 1 + Innenabstand 40 = 41 px ab Bahn), rechts auf der Außenkante der zweiten Kachel.
   * Vier Kacheln mit 10 px Abstand in (Bahn − 82): zwei Kacheln + Abstand = (Bahn − 82 − 30) / 2 + 10 = 50 % − 46 px.
   * Mit Bestellung bis zur Außenkante der vierten Kachel (Bahn − 82). cqw = 1 % der Bahn-Innenbreite. */
  .kontakt-buehne > .bahn { container-type: inline-size; }
  .kontakt-kasten { margin-left: 41px; width: calc(50cqw - 46px); }
  .kontakt-kasten:has(.formular.mit-bestellung) { width: calc(100cqw - 82px); }
  .formular.schaltbar { grid-template-columns: calc(50cqw - 128px) 0px; }   /* linke Spalte = Kasten − 2 − 2 × 40 */
  .formular.schaltbar.mit-bestellung { grid-template-columns: calc(50cqw - 128px) minmax(0, 1fr); column-gap: 30px; }
  .formular.schaltbar .bestellung { align-self: start; }
}
@media screen and (max-width: 991px) {   /* gestapelt: unterhalb der Felder, ohne Breitenanimation */
  .formular.schaltbar { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 0fr; row-gap: 0; transition: grid-template-rows .45s ease, row-gap .45s ease; }
  .formular.schaltbar.mit-bestellung { grid-template-rows: auto 1fr; row-gap: 25px; }
  .formular.schaltbar .bestellung { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .formular.schaltbar, .kontakt-kasten, .formular.schaltbar .bestellung { transition: none; } }
.bestellung .hinweis { margin: 10px 0 0; padding-top: 16px; border-top: 1px solid var(--dunkel-rand); font-size: 16px; line-height: 24px; color: var(--dunkel-text-leise); }   /* Ablauf der Bestellung, mit Linie abgesetzt (23.09.2026) */
.bestellung .hinweis strong { color: var(--dunkel-text); font-weight: 600; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--dunkel-text-leise); opacity: 1; }
.feld input:focus-visible, .feld textarea:focus-visible, .feld select:focus-visible { outline: 2px solid var(--akzent); outline-offset: -1px; }   /* Fokusrahmen liegt auf dem Feldrand, nicht davor */
.feld input:user-invalid, .feld textarea:user-invalid { border-color: #e0a58a; }
.haken { display: grid; grid-template-columns: 23px 1fr; gap: 8px; align-items: center; font-size: 16px; line-height: 24px; cursor: pointer; }
.haken input { appearance: none; width: 23px; height: 24px; margin: 0; border: 1px solid var(--dunkel-rand); border-radius: 2px; background: var(--dunkel-grund); cursor: pointer; display: grid; place-items: center; }
.haken input:checked::before { content: ""; width: 11px; height: 12px; background: var(--akzent); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.haken input:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.einwilligung a { color: var(--dunkel-text); display: inline-block; padding-block: 10px; margin-block: -10px; }   /* 24 + 20 = 44 */
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* Falle für Bots, für Menschen unsichtbar */
.senden {
  justify-self: center; margin-top: 35px; min-height: 54px; padding: 11px 30px;
  font: inherit; font-size: 20px; line-height: 30px; font-weight: 500;
  color: var(--dunkel-grund); background: var(--akzent); border: 1px solid transparent; cursor: pointer;
  transition: background .2s ease;
}
.senden:hover { background: #fff; }
.senden:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.meldung { padding: 16px 20px; border: 1px solid var(--akzent); font-size: 18px; line-height: 1.5; }
.meldung-fehler { border-color: #e0a58a; margin: 0; }   /* oben 15 px: siehe .felder */
.meldung-fehler:focus { outline: none; }
.meldung-fehler + .senden { margin-top: 15px; }
@media screen and (max-width: 991px) {
  .kontakt-kasten { width: 600px; }
  .kontakt-kasten .untertitel { font-size: 28px; line-height: 34px; }   /* wie die übrigen Abschnittstitel (01.10.2026) */
}
@media screen and (max-width: 767px) {
  .kontakt-buehne { padding-bottom: 80px; }
  /* Bild über dem Kasten (--bild sichtbar), reicht hinter dem Kasten bis zur Oberkante des Betreff-Felds:
   * Rand 1 + Kopfzeile 75 + Innenabstand 40 = 116 (bis 479: 96). 01.10.2026, iPad hoch. */
  .kontakt-buehne { --bild: 320px; --bis-betreff: 116px; }
  .kontakt-buehne:not(.start-kontakt) { --oben: var(--abstand-kopf); }   /* Kontaktseite: Bild beginnt, wo auf den Unterseiten die Titel beginnen (01.10.2026) */
  .kontakt-hintergrund { position: absolute; top: var(--oben); bottom: auto; height: calc(var(--bild) + var(--bis-betreff)); margin: 0; }
  .kontakt-kasten { width: 100%; margin-top: var(--bild); }
  .feld input, .feld select { padding: 0 16px; font-size: 18px; } .feld select { padding-right: 48px; }
  .katalog-wahl li { height: auto; min-height: 60px; }
  .katalog-wahl .haken { padding: 8px 16px; font-size: 18px; grid-template-columns: 23px 1fr; }
  .katalog-wahl .haken small { grid-column: 2; white-space: normal; }
  .feld-zeile { gap: 10px; }
  .feld textarea { padding: 14px 16px; font-size: 18px; }
}
@media screen and (max-width: 479px) {
  .kontakt-inhalt { padding: 20px 15px; } .kontakt-kasten .kasten-kopf { padding-left: 15px; } .kontakt-kasten .kasten-fuss { padding: 20px 15px; } .kontakt-kasten .untertitel { font-size: 17px; } .kontakt-kasten .kasten-fuss h2 { font-size: 24px; }
  .kontakt-buehne { --bild: 220px; --bis-betreff: 96px; }
  .kontakt-kasten h1, .kontakt-kasten h2.kontakt-titel { font-size: 24px; }
}

/* ---------------------------------------------------- Anschrift, Telefon, E-Mail */
.kontakt-info { padding: 0 0 140px; }
.kontakt-kacheln { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kontakt-kachel {
  padding: 40px; border: 1px solid var(--dunkel-rand); text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.kontakt-kachel .kreis {
  width: 80px; height: 80px; border-radius: 50%; background: #121418; color: var(--dunkel-text);
  display: grid; place-items: center; margin-bottom: 25px;
}
.kontakt-kachel .kreis svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kontakt-kachel h2 { font-size: 30px; line-height: 1.3; margin: 0 0 10px; }
.kontakt-kachel p { margin: 0; font-size: 20px; line-height: 30px; color: var(--dunkel-text-leise); }
.kontakt-kachel a { color: inherit; text-decoration: none; display: inline-block; padding-block: 7px; margin-block: -7px; }   /* 30 + 14 = 44 */
.kontakt-kachel a:hover { color: var(--akzent); text-decoration: underline; }
@media screen and (max-width: 991px) { .kontakt-kacheln { grid-template-columns: 1fr; } .kontakt-kachel { padding: 30px; } }
@media screen and (max-width: 479px) { .kontakt-info { padding-bottom: 80px; } .kontakt-kachel { padding: 24px 15px; } .kontakt-kachel h2 { font-size: 24px; } .kontakt-kachel p { font-size: 18px; } }