/* Mastricht — Kontakt-Sektion (Anfrageformular + Terminwaehler), Desktop-Demo.
   Eigene Datei wie cursor.css, damit neu.css unberuehrt bleibt.

   Grammatik der Seite, nichts Neues erfunden:
   - weisse Sektion (Formulare gehoeren auf Weiss), eine Schriftfamilie, Akzent nur im Detail
   - Zeilen sind Haarlinien wie im Register (#leistungen) und im Fakten-Block (#fakten);
     der rote Strich faehrt UNTEN ein (Leo 2026-09-07) — hier beim Fokus statt beim Zeigen
   - keine Kaesten, keine Pillen, scharfe Kanten (--r: 2px)
   - der gewaehlte Zeitraum im Kalender wird als rote Linie gezeichnet: dasselbe Motiv wie
     die Kuehlkette, nur im Monatsraster */

#kontakt [hidden]{display:none!important}

/* ── Sektion ───────────────────────────────────────── */
/* Leo 2026-09-07: hellgrauer Grund, schmalerer Block, und alle Textzeilen auf EINER Kante.
   Die Maße stehen als Variablen hier oben — Zeilen, Fuß und Zusammenfassung teilen sie sich,
   damit die Spalten nicht auseinanderlaufen koennen. */
/* Panelbreite und Spalt haengen am BLOCK (Prozent), nicht am Fenster: sonst wandert die
   Aufteilung mit der Fensterbreite, obwohl der Block laengst auf 1140px steht. */
#kontakt{--kal-w:min(392px,34%);--kf-gap:min(72px,6.5%);
  --kf-lblw:170px;--kf-lblgap:32px;--kf-max:1140px;
  /* EINE Groesse fuer jeden Inhalt der Tabelle — Eingaben, Auswahlen, Einheiten, Termine,
     Zusammenfassung (Leo 2026-09-07). Die Zeilen-Titel links bleiben die Beschriftungsebene. */
  --kf-txt:17px;--kf-mark:11px;--kf-markgap:10px}
.kf-wrap{max-width:var(--kf-max);margin:0 auto}
/* Die Ueberschrift laeuft ueber die volle Breite des Blocks (zweispaltig bliebe sie dreizeilig) */
#kontakt .sec-head{display:block;margin-bottom:64px}
#kontakt .sec-head h2{hyphens:none;-webkit-hyphens:none}
.kf-body{display:grid;grid-template-columns:minmax(0,1fr) var(--kal-w);gap:var(--kf-gap);align-items:start}

/* ── Formular als Register ─────────────────────────── */
.kf{margin:0;min-width:0}
.kf-col{min-width:0}
.kf-rows{border-bottom:1px solid var(--line)}
.kf-row{position:relative;display:grid;grid-template-columns:var(--kf-lblw) minmax(0,1fr);
  column-gap:var(--kf-lblgap);align-items:baseline;border-top:1px solid var(--line);padding:23px 0 22px}
/* Der rote Strich liegt auf der Haarlinie UNTER der Zeile — dieselbe Kante wie in .fx-row/.reg-row */
.kf-row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--acc);
  transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.77,0,.18,1)}
.kf-row:focus-within::after{transform:scaleX(1)}
.kf-lbl{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);
  line-height:1.5;transition:color .4s}
.kf-row:focus-within .kf-lbl{color:var(--ink)}
.kf-req{color:var(--acc);margin-left:.2em;font-style:normal}
.kf-hint .kf-req{margin:0 .3em 0 0}

.kf-in{width:100%;font:inherit;font-size:var(--kf-txt);font-weight:500;line-height:1.35;color:var(--ink);
  background:transparent;border:0;padding:0;outline:none;-webkit-appearance:none;appearance:none;border-radius:0}
.kf-in::placeholder{color:rgba(17,18,20,.3);font-weight:400}
textarea.kf-in{resize:vertical;min-height:92px;display:block}
/* Pflichtfeld erst nach dem ersten Absende-Versuch anmahnen, nicht beim Tippen */
.kf.is-geprueft .kf-in:invalid{color:var(--acc)}
.kf.is-geprueft .kf-row:has(.kf-in:invalid)::after{transform:scaleX(1);background:rgba(216,35,42,.5)}

/* Relation: Von → Nach in einer Zeile */
/* Der Pfeil steht zwischen den beiden ORTSANGABEN, nicht in der Mitte einer leeren Spalte
   (Leo 2026-09-07). Dafuer waechst das erste Feld mit seinem Inhalt mit (kontakt.js misst den
   Text an einer unsichtbaren Kopie) — links und rechts vom Pfeil bleibt derselbe Abstand.
   Ohne JS traegt die Vorgabebreite des Feldes. */
.kf-rel{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:baseline;
  column-gap:20px}
.kf-rel .kf-in:first-child{width:auto;min-width:66px;max-width:100%}
.kf-arrow{font-style:normal;color:var(--acc);font-weight:500;line-height:1}

/* Sendung: drei Zahlen mit Einheit */
.kf-units{display:flex;flex-wrap:wrap;gap:10px 22px}
.kf-unit{display:flex;align-items:baseline;gap:9px;min-width:0}
.kf-unit .kf-in{width:2.8em;flex:none;min-width:0}
.kf-unit i{font-style:normal;font-size:var(--kf-txt);font-weight:500;color:var(--grey);white-space:nowrap}
/* Spinner der Zahlenfelder weg — sie waeren das einzige native Element der Seite. Die Regel
   MUSS am Feld selbst haengen (.kf-in[type=number]): eine eigene Klasse .kf-num gab es im Markup
   gar nicht, und WebKit zeigt die Pfeilchen dauerhaft, Chromium erst beim Zeigen — gesehen wurde
   es erst in der WebKit-Aufnahme (Leo 2026-09-07). */
.kf-in[type=number]{-moz-appearance:textfield}
.kf-in[type=number]::-webkit-outer-spin-button,
.kf-in[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}

/* Auswahl (Anfrageart, Temperatur, Turnus, Zeitfenster): Quadrat-Marke statt Pille */
/* Die Marke IST das Bedienelement (appearance:none auf radio/checkbox) — nicht ein Ersatz
   daneben. Ein optisch verstecktes Pflichtfeld kann der Browser bei der Pruefung nicht
   anspringen: die Meldung waere unsichtbar und die Konsole bekaeme einen Fehler. */
/* Zwei feste Spalten statt Umbruch nach Restplatz: so stehen auch die Auswahlen untereinander. */
.kf-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px var(--kf-lblgap)}
/* Die MARKE steht auf der Spaltenkante — genau dort beginnt auch der Text jeder Eingabe.
   Der Text der Auswahl rueckt um Marke + Abstand ein und bleibt beim Umbruch unter sich. */
.kf-choice{position:relative;display:block;line-height:1.3;
  padding-left:calc(var(--kf-mark) + var(--kf-markgap));
  font-size:var(--kf-txt);font-weight:500;color:var(--grey);transition:color .3s}
.kf-mark{position:absolute;left:0;top:.32em;width:var(--kf-mark);height:var(--kf-mark);margin:0;
  border-radius:1px;background:transparent;-webkit-appearance:none;appearance:none;
  box-shadow:inset 0 0 0 1px rgba(17,18,20,.34);transition:background .35s,box-shadow .35s}
.kf-choice:hover{color:var(--ink)}
.kf-choice:hover .kf-mark{box-shadow:inset 0 0 0 1px rgba(17,18,20,.6)}
.kf-mark:checked{background:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.kf-mark:checked~.kf-t{color:var(--ink)}
.kf-mark:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--acc),0 0 0 3px rgba(216,35,42,.24)}
.kf-t{transition:color .3s}

/* Sendungs-Block: gilt nur fuer Transportanfragen und faltet sich sonst weg (mit JS) */
.kf-fracht{display:grid;grid-template-rows:1fr;transition:grid-template-rows .55s cubic-bezier(.77,0,.18,1)}
.kf-fracht>div{min-height:0;overflow:hidden}
.kf-fracht.is-zu{grid-template-rows:0fr}
@media (prefers-reduced-motion:reduce){.kf-fracht{transition:none}}

/* Fuss: Pflichtfeld-Hinweis links, Einwilligung + Absenden rechts */
.kf-foot{display:grid;grid-template-columns:var(--kf-lblw) minmax(0,1fr);column-gap:var(--kf-lblgap);padding-top:34px}
.kf-hint{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.kf-consent{position:relative;display:block;max-width:62ch;color:var(--grey);
  padding-left:calc(var(--kf-mark) + var(--kf-markgap))}
.kf-consent .kf-mark{top:.42em}
.kf-consent-t{font-size:13px;line-height:1.6}
.kf-ds{font-size:13px;line-height:1.6;color:var(--grey);margin-top:10px;max-width:62ch}
.kf-ds a{text-decoration:none;position:relative;color:var(--ink)}
.kf-ds a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--acc);
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.77,0,.18,1)}
.kf-ds a:hover::after{transform:scaleX(1)}
#kontakt .btn-solid{background:var(--ink);color:#fff}
.kf-send{margin-top:34px}

/* Bestaetigung nach dem Absenden — die Demo verschickt nichts und sagt das auch */
.kf-done{margin-top:44px;border-top:1px solid var(--line);padding-top:26px}
/* Ohne Aufzaehlungspunkt: er haette den Satz um 21px nach rechts geschoben und damit die
   einzige Kante des Blocks gebrochen (Leo 2026-09-07). Der Hinweis traegt fett genug. */
.kf-note{font-size:var(--kf-txt);font-weight:600;color:var(--ink)}
.kf-sum{margin:22px 0 0;display:grid;grid-template-columns:var(--kf-lblw) minmax(0,1fr);
  column-gap:0;row-gap:0;font-size:var(--kf-txt)}
.kf-note{margin-left:0}
.kf-sum dt{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);
  padding:11px 0;border-top:1px solid var(--line)}
.kf-sum dd{margin:0;padding:11px 0 11px var(--kf-lblgap);border-top:1px solid var(--line);color:var(--ink);font-weight:500}

/* ── Terminwaehler ─────────────────────────────────── */
.kal{position:sticky;top:clamp(116px,15vh,168px);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px 22px;background:var(--paper)}
.kal>.kf-lbl{display:block;margin-bottom:16px}
.kal-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.kal-mon{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1}
.kal-nav{display:flex;gap:4px}
.kal-nav button{width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--r);
  background:transparent;color:var(--grey);transition:color .3s,background .3s}
.kal-nav svg{width:15px;height:15px;display:block}
.kal-nav button:hover:not(:disabled){color:var(--ink);background:var(--soft)}
.kal-nav button:disabled{opacity:.28}
.kal-grid{display:grid;grid-template-columns:26px repeat(7,minmax(0,1fr));align-items:center}
.kal-wd{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);
  text-align:center;padding-bottom:10px}
.kal-wd.we{color:rgba(17,18,20,.32)}
.kal-kw{font-size:10px;font-weight:600;letter-spacing:.06em;color:rgba(17,18,20,.3);text-align:left;
  line-height:42px}
.kal-day{position:relative;height:42px;padding:0;border:0;border-radius:var(--r);background:transparent;
  font:inherit;font-size:15px;font-weight:500;color:var(--ink);line-height:42px;text-align:center;
  transition:background .25s,color .25s}
.kal-day.we{color:rgba(17,18,20,.46)}
.kal-day:hover:not(:disabled){background:var(--soft)}
.kal-day:disabled{color:rgba(17,18,20,.2)}
.kal-day.aus{color:rgba(17,18,20,.16)}
/* der gewaehlte Zeitraum ist eine rote Linie zwischen den beiden Endpunkten — dasselbe
   Motiv wie die Kuehlkette, nur im Monatsraster */
.kal-day.is-in::before{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--acc);
  opacity:.6}
.kal-day.is-ab,.kal-day.is-zu{background:var(--acc);color:#fff}
.kal-day.is-ab:hover,.kal-day.is-zu:hover{background:var(--acc)}
.kal-day.is-heute::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;margin-left:-2px;
  border-radius:50%;background:var(--acc)}
.kal-day.is-ab::after,.kal-day.is-zu::after{background:#fff}
.kal-day:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}

.kal-out{margin-top:16px;border-top:1px solid var(--line)}
.kal-o{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--line)}
.kal-o .kal-l{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.kal-vw{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.kal-v{font-size:var(--kf-txt);font-weight:500;color:var(--ink)}
.kal-v.is-leer{color:rgba(17,18,20,.34);font-weight:400}
.kal-x{padding:0;border:0;background:transparent;color:var(--grey);font:inherit;font-size:15px;line-height:1;
  transition:color .3s}
.kal-x:hover{color:var(--acc)}
.kal-zf{padding-top:16px}
.kal-zf .kf-lbl{margin-bottom:12px;display:block}
.kal-zf .kf-choices{gap:12px 20px}
.kal-hint{margin-top:14px;font-size:12px;line-height:1.5;color:rgba(17,18,20,.44)}

/* Ohne JS traegt das Panel zwei native Datumsfelder — der Waehler ist nur die Verbesserung darueber */
.kal-plain{display:grid;gap:16px}
.kal-plain label{display:grid;gap:8px}
.kal-plain input{font:inherit;font-size:16px;color:var(--ink);background:transparent;border:0;
  border-bottom:1px solid var(--line);padding:0 0 8px;outline:none}

/* Zeiger: der eigene Cursor blendet ueber Eingaben aus (cursor.js), Schaltflaechen bleiben Zeiger */
.kal-day:not(:disabled),.kal-nav button:not(:disabled),.kal-x,.kf-choice,.kf-consent{cursor:pointer}

/* ── Ihr Ansprechpartner ────────────────────────────
   Dieselbe Register-Grammatik wie das Formular darueber: kf-row/kf-lbl/kf-ctl, also dieselben
   zwei Textkanten (der Waechter _kf-kanten.mjs misst diese Zeilen deshalb gleich mit).
   Das Raster ist das von .kf-body — so steht das Foto genau unter dem Terminwaehler und in
   seiner Breite. Die Verweise unterstreichen sich rot wie a.ft-val in der Fusszeile;
   nichts Neues erfunden. */
.ap{margin-top:112px}
/* Das Foto endet auf der letzten Haarlinie des Registers: seine Hoehe kommt aus der Zeile,
   nicht aus dem Seitenverhaeltnis der Datei (sonst haengt es je nach Fensterbreite anders weit
   nach unten). Deshalb stretch + absolut gefuelltes Feld; object-position haelt den Kopf oben. */
.ap-body{display:grid;grid-template-columns:minmax(0,1fr) var(--kal-w);gap:var(--kf-gap);align-items:stretch}
.ap-reg{min-width:0}
.ap-name{margin:0;font-size:var(--kf-txt);font-weight:600;line-height:1.35;color:var(--ink)}
.ap-rolle{margin:5px 0 0;font-size:var(--kf-txt);font-weight:400;line-height:1.35;color:var(--grey)}
.ap-v{margin:0;font-size:var(--kf-txt);font-weight:500;line-height:1.35;color:var(--ink)}
.ap-a{position:relative;font-size:var(--kf-txt);font-weight:500;line-height:1.35;color:var(--ink);
  text-decoration:none}
.ap-a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--acc);
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.77,0,.18,1)}
.ap-a:hover::after{transform:scaleX(1)}
.ap-bild{position:relative;margin:0;min-height:340px;border-radius:var(--r);overflow:hidden;
  background:var(--soft)}
.ap-bild img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;
  object-position:50% 8%}
.ap-a{cursor:pointer}